mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-22 23:12:52 +02:00
Code Issues Releases Wiki Activity

refactor: editable - combine ref callback and event handler in useIsomorphicLayoutEffect (#5313)

Browse Source
This commit is contained in:
Ed Hager
2023-02-24 15:40:05 -06:00
committed by GitHub
parent b32428e882
commit 3bf568ede2
2 changed files with 15 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
packages/slate-react/src/components/editable.tsx
View File

@@ -704,10 +704,19 @@ export const Editable = (props: EditableProps) => {
EDITOR_TO_ELEMENT.delete(editor)
NODE_TO_ELEMENT.delete(editor)
if (HAS_BEFORE_INPUT_SUPPORT) {
if (ref.current && HAS_BEFORE_INPUT_SUPPORT) {
// @ts-ignore The `beforeinput` event isn't recognized.
ref.current.removeEventListener('beforeinput', onDOMBeforeInput)
}
} else {
// Attach a native DOM event handler for `beforeinput` events, because React's
// built-in `onBeforeInput` is actually a leaky polyfill that doesn't expose
// real `beforeinput` events sadly... (2019/11/04)
// https://github.com/facebook/react/issues/11211
if (HAS_BEFORE_INPUT_SUPPORT) {
// @ts-ignore The `beforeinput` event isn't recognized.
node.addEventListener('beforeinput', onDOMBeforeInput)
}
}
ref.current = node
@@ -715,24 +724,6 @@ export const Editable = (props: EditableProps) => {
[ref, onDOMBeforeInput]
)
// Attach a native DOM event handler for `beforeinput` events, because React's
// built-in `onBeforeInput` is actually a leaky polyfill that doesn't expose
// real `beforeinput` events sadly... (2019/11/04)
// https://github.com/facebook/react/issues/11211
useIsomorphicLayoutEffect(() => {
if (ref.current && HAS_BEFORE_INPUT_SUPPORT) {
// @ts-ignore The `beforeinput` event isn't recognized.
ref.current.addEventListener('beforeinput', onDOMBeforeInput)
}
return () => {
if (ref.current && HAS_BEFORE_INPUT_SUPPORT) {
// @ts-ignore The `beforeinput` event isn't recognized.
ref.current.removeEventListener('beforeinput', onDOMBeforeInput)
}
}
}, [onDOMBeforeInput])
// Attach a native DOM event handler for `selectionchange`, because React's
// built-in `onSelect` handler doesn't fire for all selection changes. It's a
// leaky polyfill that only fires on keypresses or clicks. Instead, we want to