Method render

packages/editor/src/components/string_node.tsx:56–96

()

  }

  render() {
    const { block, selectionState, isInvalidBlamed } = this.props
    const isSelected = selectionState !== NodeSelectionState.UNSELECTED
    const leftPos = block.x + block.marginLeft
    const topPos = block.y + block.marginTop

    const isValid = (block.isValid || block.invalidChildsetID) && !isInvalidBlamed
    const className = 'svgsplootnode stringnode' + (isSelected ? ' selected' : '') + (isValid ? '' : ' invalid')

    const internalWidth = block.blockWidth - STRING_CAP_WIDTH * 2

    const rectangle = (
      <rect
        ref={this.shapeRef}
        tabIndex={0}
        className={isSelected ? 'string-node-selected-background' : 'string-node-background'}
        x={leftPos + STRING_CAP_WIDTH - 4}
        y={topPos}
        width={internalWidth + 8}
        height={block.rowHeight}
      />
    )

    const startCap = getLeftCapShape(className, leftPos, topPos, block.rowHeight)
    const endCap = getRightCapShape(className, leftPos + STRING_CAP_WIDTH + internalWidth + 3, topPos, block.rowHeight)

    const textContent = block.node.getProperty('value')

    return (
      <>
        {rectangle}
        {startCap}
        <foreignObject x={leftPos + STRING_CAP_WIDTH + 1} y={topPos} width={internalWidth} height={block.rowHeight}>
          <pre tabIndex={0} className="string-node">
            {textContent}
          </pre>
        </foreignObject>
        {endCap}
      </>
    )
  }

  componentDidMount(): void {
    if (this.props.selectionState === NodeSelectionState.SELECTED) {