Function InputComponent

packages/editor/src/components/input.tsx:27–166

({ autoFocus })

}

const InputComponent: React.FC<InputProps> = ({ autoFocus }) => {
  const editor = useEditableStatic()
  const inputRef = React.useRef<HTMLTextAreaElement>(null)
  const [focused, setFocused] = useFocused()
  const [readOnly] = useReadOnly()

  const [rect, setRect] = React.useState<ShadowRect | null>(null)

  useIsomorphicLayoutEffect(() => {
    if (inputRef.current) EDITOR_TO_INPUT.set(editor, inputRef.current)
    return () => {
      EDITOR_TO_INPUT.delete(editor)
    }
  }, [editor])

  useEffect(() => {
    if (autoFocus) {
      editor.focus()
      Editable.scrollIntoView(editor)
    }
  }, [editor, autoFocus])

  const handleKeydown = (event: React.KeyboardEvent) => {
    const { nativeEvent } = event
    if (Editable.isComposing(editor) && nativeEvent.isComposing === false) {
      IS_COMPOSING.set(editor, false)
    }

    if (event.defaultPrevented || Editable.isComposing(editor)) {
      return
    }
    editor.onKeydown(nativeEvent)
  }

  const handleKeyup = (event: React.KeyboardEvent) => {
    const { nativeEvent } = event
    editor.onKeyup(nativeEvent)
  }

  const handleBlur = () => {
    if (!IS_MOUSEDOWN.get(editor) && !IS_TOUCHING.get(editor)) setFocused(false)
  }

  const handleFocus = () => {
    setFocused(true)
  }

  const handleBeforeInput = (event: React.FormEvent<HTMLTextAreaElement>) => {
    const textarea = event.target
    if (!(textarea instanceof HTMLTextAreaElement)) return
    const { value } = textarea
    editor.onBeforeInput(value)
  }

  const handleInput = (event: React.FormEvent<HTMLTextAreaElement>) => {
    const textarea = event.target
    if (!(textarea instanceof HTMLTextAreaElement)) return
    const value = textarea.value