wTextEditor: PropTypes.func.isRequired,
      type: PropTypes.string.isRequired,
      value: PropTypes.string.isRequired,
    };
  }

  constructor(props) {
    super(props);

    this.state = {
      value: this.props.value,
    };

    this.valuePreRef = createRef();
  }

  componentDidMount() {
    editableItem(
      {
        element: this.valuePreRef.current,
        trigger: "dblclick",
      },
      element => {
        this.props.showTextEditor(element);
      }
    );
  }

  render() {
    const { value } = this.state;
    const isComment = this.props.type === "comment";
    const isWhiteSpace = !/[^\s]/.exec(value);

    return createElement(
      Fragment,
      null,
      isComment ? dom.span({}, "<!--") : null,
      dom.pre(
        {
          className: isWhiteSpace ? "whitespace" : "",
          ref: this.valuePreRef,
          style: {
            display: "inline-block",
            whiteSpace: "normal",
          },
          tabIndex: -1,
          title: isWhiteSpace
            ? getFormatStr(
                "markupView.whitespaceOnly",
                value.replace(/\n/g, "⏎").replace(/\t/g, "⇥").replace(/ /g, "◦")
              )
            : "",
          "data-label": getStr("markupView.whitespaceOnly.label"),
        },
        value
      ),
      isComment ? dom.span({}, "-->") : null
    );
  }
}

module.exports = TextNode;
PK