Class EditBox

packages/editor/src/components/edit_box.tsx:23–139

@observer
export class EditBox extends React.Component<EditBoxProps, EditBoxState> {
  editTextArea: React.RefObject<HTMLTextAreaElement>
  inputBox: React.RefObject<HTMLInputElement>

  constructor(props: EditBoxProps) {
    super(props)
    const editBoxData = this.props.editBoxData
    this.editTextArea = React.createRef()
    this.inputBox = React.createRef()

    this.state = {
      userInput: editBoxData.contents, // Get current edit value
    }
  }

  render() {
    const { userInput } = this.state
    const { editorX, editorY, editBoxData, selection } = this.props
    const { x, y } = editBoxData

    const hidden = selection.isHidden
    const positionStyles: React.CSSProperties = {
      position: 'absolute',
      left: x + editorX - 1 + 'px',
      top: y + editorY + 'px',
      opacity: hidden ? 0 : 1,
    }

    if (editBoxData.node.layout.boxType === NodeBoxType.STRING) {
      return (
        <div style={positionStyles}>
          <div className="edit-box edit-box-string">
            <textarea
              ref={this.editTextArea}
              autoFocus
              defaultValue={userInput}
              onChange={this.onChange}
              onKeyDown={this.onKeyDown}
            />
          </div>
        </div>
      )
    }

    return (
      <div style={positionStyles}>
        <div className="edit-box">
          <input
            ref={this.inputBox}
            autoFocus
            type="text"
            value={userInput}
            onChange={this.onChange}
            onKeyDown={this.onKeyDown}
          />
        </div>
      </div>
    )