Repository: ianstormtaylor/slate
File: packages/slate-react/src/components/editable.tsx (TypeScript)

Code before:
            ...style,
          }}
          onBeforeInput={useCallback(
            (event: React.FormEvent<HTMLDivElement>) => {
              // COMPAT: Certain browsers don't support the `beforeinput` event, so we
              // fall back to React's leaky polyfill instead just for it. It
              // only works for the `insertText` input type.
              if (
                !HAS_BEFORE_INPUT_SUPPORT &&
                !readOnly &&
                !isEventHandled(event, attributes.onBeforeInput) &&
                hasEditableTarget(editor, event.target)
              ) {
                event.preventDefault()
                if (!state.isComposing) {
                  const text = (event as any).data as string
                  Editor.insertText(editor, text)
                }
              }
            },
            [readOnly]
          )}
          onInput={useCallback((event: React.SyntheticEvent) => {
            // Flush native operations, as native events will have propogated
            // and we can correctly compare DOM text values in components
            // to stop rendering, so that browsers functions like autocorrect
            // and spellcheck work as expected.
            flushNativeEvents(editor)
          }, [])}
          onBlur={useCallback(
            (event: React.FocusEvent<HTMLDivElement>) => {
              if (
                readOnly ||
                state.isUpdatingSelection ||
                !hasEditableTarget(editor, event.target) ||
                isEventHandled(event, attributes.onBlur)
              ) {
                return
              }

              // COMPAT: If the current `activeElement` is still the previous
              // one, this is due to the window being blurred when the tab
              // itself becomes unfocused, so we want to abort early to allow to
              // editor to stay focused when the tab becomes focused again.
              const root = ReactEditor.findDocumentOrShadowRoot(editor)
              if (state.latestElement === root.activeElement) {
                return
              }

              const { relatedTarget } = event
              const el = ReactEditor.toDOMNode(editor, editor)

Review comment (suggestion):
```suggestion
            // to stop rendering, so that browser functions like autocorrect
```

Code after:
            ...style,
          }}
          onBeforeInput={useCallback(
            (event: React.FormEvent<HTMLDivElement>) => {
              // COMPAT: Certain browsers don't support the `beforeinput` event, so we
              // fall back to React's leaky polyfill instead just for it. It
              // only works for the `insertText` input type.
              if (
                !HAS_BEFORE_INPUT_SUPPORT &&
                !readOnly &&
                !isEventHandled(event, attributes.onBeforeInput) &&
                hasEditableTarget(editor, event.target)
              ) {
                event.preventDefault()
                if (!state.isComposing) {
                  const text = (event as any).data as string
                  Editor.insertText(editor, text)
                }
              }
            },
            [readOnly]
          )}
          onInput={useCallback((event: React.SyntheticEvent) => {
            // Flush native operations, as native events will have propogated
            // and we can correctly compare DOM text values in components
            // to stop rendering, so that browser functions like autocorrect
            // and spellcheck work as expected.
            flushNativeEvents(editor)
          }, [])}
          onBlur={useCallback(
            (event: React.FocusEvent<HTMLDivElement>) => {
              if (
                readOnly ||
                state.isUpdatingSelection ||
                !hasEditableTarget(editor, event.target) ||
                isEventHandled(event, attributes.onBlur)
              ) {
                return
              }

              // COMPAT: If the current `activeElement` is still the previous
              // one, this is due to the window being blurred when the tab
              // itself becomes unfocused, so we want to abort early to allow to
              // editor to stay focused when the tab becomes focused again.
              const root = ReactEditor.findDocumentOrShadowRoot(editor)
              if (state.latestElement === root.activeElement) {
                return
              }

              const { relatedTarget } = event
              const el = ReactEditor.toDOMNode(editor, editor)