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

Code before:
            [readOnly, attributes.onClick]
          )}
          onCompositionEnd={useCallback(
            (event: React.CompositionEvent<HTMLDivElement>) => {
              if (
                hasEditableTarget(editor, event.target) &&
                !isEventHandled(event, attributes.onCompositionEnd)
              ) {
                state.isComposing && setIsComposing(false)
                state.isComposing = false

                // COMPAT: In Chrome, `beforeinput` events for compositions
                // aren't correct and never fire the "insertFromComposition"
                // type that we need. So instead, insert whenever a composition
                // ends since it will already have been committed to the DOM.
                if (!IS_SAFARI && !IS_FIREFOX_LEGACY && !IS_IOS && event.data) {
                  Editor.insertText(editor, event.data)
                }

                if (editor.selection && Range.isCollapsed(editor.selection)) {
                  const leafPath = editor.selection.anchor.path
                  const currentTextNode = Node.leaf(editor, leafPath)
                  if (state.hasInsertPrefixInCompositon) {
                    state.hasInsertPrefixInCompositon = false
                    Editor.withoutNormalizing(editor, () => {
                      // remove prefix added in onCompositionStart
                      const text = currentTextNode.text.replace(/^\uFEFF/, '')
                      Transforms.delete(editor, {
                        distance: currentTextNode.text.length,
                        reverse: true,
                      })
                      Transforms.insertText(editor, text)
                    })
                  }
                }
              }
            },
            [attributes.onCompositionEnd]
          )}
          onCompositionUpdate={useCallback(
            (event: React.CompositionEvent<HTMLDivElement>) => {
              if (
                hasEditableTarget(editor, event.target) &&
                !isEventHandled(event, attributes.onCompositionUpdate)
              ) {
                !state.isComposing && setIsComposing(true)
                state.isComposing = true
              }
            },
            [attributes.onCompositionUpdate]
          )}

Review comment (suggestion):
```suggestion
                      // remove Unicode BOM prefix added in `onCompositionStart`
```

Code after:
            [readOnly, attributes.onClick]
          )}
          onCompositionEnd={useCallback(
            (event: React.CompositionEvent<HTMLDivElement>) => {
              if (
                hasEditableTarget(editor, event.target) &&
                !isEventHandled(event, attributes.onCompositionEnd)
              ) {
                state.isComposing && setIsComposing(false)
                state.isComposing = false

                // COMPAT: In Chrome, `beforeinput` events for compositions
                // aren't correct and never fire the "insertFromComposition"
                // type that we need. So instead, insert whenever a composition
                // ends since it will already have been committed to the DOM.
                if (!IS_SAFARI && !IS_FIREFOX_LEGACY && !IS_IOS && event.data) {
                  Editor.insertText(editor, event.data)
                }

                if (editor.selection && Range.isCollapsed(editor.selection)) {
                  const leafPath = editor.selection.anchor.path
                  const currentTextNode = Node.leaf(editor, leafPath)
                  if (state.hasInsertPrefixInCompositon) {
                    state.hasInsertPrefixInCompositon = false
                    Editor.withoutNormalizing(editor, () => {
                      // remove Unicode BOM prefix added in `onCompositionStart`
                      const text = currentTextNode.text.replace(/^\uFEFF/, '')
                      Transforms.delete(editor, {
                        distance: currentTextNode.text.length,
                        reverse: true,
                      })
                      Transforms.insertText(editor, text)
                    })
                  }
                }
              }
            },
            [attributes.onCompositionEnd]
          )}
          onCompositionUpdate={useCallback(
            (event: React.CompositionEvent<HTMLDivElement>) => {
              if (
                hasEditableTarget(editor, event.target) &&
                !isEventHandled(event, attributes.onCompositionUpdate)
              ) {
                !state.isComposing && setIsComposing(true)
                state.isComposing = true
              }
            },
            [attributes.onCompositionUpdate]
          )}