mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-24 07:52:50 +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

5
.changeset/tall-adults-attack.md Normal file
View File

@@ -0,0 +1,5 @@
---
'slate-react': patch
---
Some code clean-up in Editable.

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

@@ -704,10 +704,19 @@ export const Editable = (props: EditableProps) => {
EDITOR_TO_ELEMENT.delete(editor) EDITOR_TO_ELEMENT.delete(editor)
NODE_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. // @ts-ignore The `beforeinput` event isn't recognized.
ref.current.removeEventListener('beforeinput', onDOMBeforeInput) 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 ref.current = node
@@ -715,24 +724,6 @@ export const Editable = (props: EditableProps) => {
[ref, onDOMBeforeInput] [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 // 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 // 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 // leaky polyfill that only fires on keypresses or clicks. Instead, we want to