mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-16 04:04:06 +02:00
Code Issues Releases Wiki Activity

fix onBeforeInput memoization (#3347)

Browse Source 
* fix memoization of onBeforeInput callback

* fix lint

* fix callbacks dependencies
This commit is contained in:
cvlmtg
2019-12-18 17:15:17 +01:00
committed by Ian Storm Taylor
parent d765cbc3a8
commit 0b7644e975
1 changed files with 20 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -433,16 +433,19 @@ export const Editable = (props: EditableProps) => {
// Allow for passed-in styles to override anything.
...style,
}}
onBeforeInput={useCallback((event: React.SyntheticEvent) => {
// COMPAT: Firefox doesn'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 (IS_FIREFOX && !readOnly) {
event.preventDefault()
const text = (event as any).data as string
editor.exec({ type: 'insert_text', text })
}
}, [])}
onBeforeInput={useCallback(
(event: React.SyntheticEvent) => {
// COMPAT: Firefox doesn'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 (IS_FIREFOX && !readOnly) {
event.preventDefault()
const text = (event as any).data as string
editor.exec({ type: 'insert_text', text })
}
},
[readOnly]
)}
onBlur={useCallback(
(event: React.FocusEvent<HTMLDivElement>) => {
if (
@@ -498,7 +501,7 @@ export const Editable = (props: EditableProps) => {
IS_FOCUSED.delete(editor)
},
[attributes.onBlur]
[readOnly, attributes.onBlur]
)}
onClick={useCallback(
(event: React.MouseEvent<HTMLDivElement>) => {
@@ -518,7 +521,7 @@ export const Editable = (props: EditableProps) => {
}
}
},
[attributes.onClick]
[readOnly, attributes.onClick]
)}
onCompositionEnd={useCallback(
(event: React.CompositionEvent<HTMLDivElement>) => {
@@ -578,7 +581,7 @@ export const Editable = (props: EditableProps) => {
}
}
},
[attributes.onCut]
[readOnly, attributes.onCut]
)}
onDragOver={useCallback(
(event: React.DragEvent<HTMLDivElement>) => {
@@ -643,7 +646,7 @@ export const Editable = (props: EditableProps) => {
}
}
},
[attributes.onDrop]
[readOnly, attributes.onDrop]
)}
onFocus={useCallback(
(event: React.FocusEvent<HTMLDivElement>) => {
@@ -667,7 +670,7 @@ export const Editable = (props: EditableProps) => {
IS_FOCUSED.set(editor, true)
}
},
[attributes.onFocus]
[readOnly, attributes.onFocus]
)}
onKeyDown={useCallback(
(event: React.KeyboardEvent<HTMLDivElement>) => {
@@ -863,7 +866,7 @@ export const Editable = (props: EditableProps) => {
}
}
},
[attributes.onKeyDown]
[readOnly, attributes.onKeyDown]
)}
onPaste={useCallback(
(event: React.ClipboardEvent<HTMLDivElement>) => {
@@ -882,7 +885,7 @@ export const Editable = (props: EditableProps) => {
})
}
},
[attributes.onPaste]
[readOnly, attributes.onPaste]
)}
>
<Children