Class Editor

packages/editor/src/components/editor.tsx:37–256

@observer
export class Editor extends React.Component<EditorProps, EditorState> {
  private editorSvgRef: React.RefObject<SVGSVGElement>
  private editorColumnRef: React.RefObject<HTMLDivElement>

  state = {
    visibleView: 'tray' as EditorSideMenuView,
  }

  constructor(props: EditorProps) {
    super(props)
    this.editorSvgRef = React.createRef()
    this.editorColumnRef = React.createRef()
  }

  render() {
    const { block, selection, banner } = this.props
    let fileBody = null

    fileBody = block.renderedChildSets['body']

    const height = block.rowHeight + block.indentedBlockHeight
    let insertBox = null
    let editBox = null
    if (selection.isCursor() && selection.insertBox !== null) {
      insertBox = (
        <InsertBox
          hidden={selection.isHidden}
          editorX={0}
          editorY={0}
          selection={selection}
          cursorPosition={selection.cursor}
          insertBoxData={selection.insertBox}
        />
      )
    } else if (selection.isEditingSingleNode()) {
      editBox = <EditBox editorX={1} editorY={1} selection={selection} editBoxData={selection.editBox} />
    }
    return (
      <React.Fragment>
        <div className="editor-column">
          {banner}
          <div
            className="editor-box"
            ref={this.editorColumnRef}
            onBlur={this.onBlurHandler}
            onFocus={this.onFocusHandler}
          >
            <svg
              className="editor-svg"
              xmlns="http://www.w3.org/2000/svg"
              height={height}
              preserveAspectRatio="none"
              onClick={this.onClickHandler}
              ref={this.editorSvgRef}
            >
              <ExpandedListBlockView block={fileBody} isSelected={false} />
              <ActiveCursor selection={selection} />
            </svg>