mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-16 20:24:01 +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. // Allow for passed-in styles to override anything.
...style, ...style,
}} }}
onBeforeInput={useCallback((event: React.SyntheticEvent) => { onBeforeInput={useCallback(
// COMPAT: Firefox doesn't support the `beforeinput` event, so we (event: React.SyntheticEvent) => {
// fall back to React's leaky polyfill instead just for it. It // COMPAT: Firefox doesn't support the `beforeinput` event, so we
// only works for the `insertText` input type. // fall back to React's leaky polyfill instead just for it. It
if (IS_FIREFOX && !readOnly) { // only works for the `insertText` input type.
event.preventDefault() if (IS_FIREFOX && !readOnly) {
const text = (event as any).data as string event.preventDefault()
editor.exec({ type: 'insert_text', text }) const text = (event as any).data as string
} editor.exec({ type: 'insert_text', text })
}, [])} }
},
[readOnly]
)}
onBlur={useCallback( onBlur={useCallback(
(event: React.FocusEvent<HTMLDivElement>) => { (event: React.FocusEvent<HTMLDivElement>) => {
if ( if (
@@ -498,7 +501,7 @@ export const Editable = (props: EditableProps) => {
IS_FOCUSED.delete(editor) IS_FOCUSED.delete(editor)
}, },
[attributes.onBlur] [readOnly, attributes.onBlur]
)} )}
onClick={useCallback( onClick={useCallback(
(event: React.MouseEvent<HTMLDivElement>) => { (event: React.MouseEvent<HTMLDivElement>) => {
@@ -518,7 +521,7 @@ export const Editable = (props: EditableProps) => {
} }
} }
}, },
[attributes.onClick] [readOnly, attributes.onClick]
)} )}
onCompositionEnd={useCallback( onCompositionEnd={useCallback(
(event: React.CompositionEvent<HTMLDivElement>) => { (event: React.CompositionEvent<HTMLDivElement>) => {
@@ -578,7 +581,7 @@ export const Editable = (props: EditableProps) => {
} }
} }
}, },
[attributes.onCut] [readOnly, attributes.onCut]
)} )}
onDragOver={useCallback( onDragOver={useCallback(
(event: React.DragEvent<HTMLDivElement>) => { (event: React.DragEvent<HTMLDivElement>) => {
@@ -643,7 +646,7 @@ export const Editable = (props: EditableProps) => {
} }
} }
}, },
[attributes.onDrop] [readOnly, attributes.onDrop]
)} )}
onFocus={useCallback( onFocus={useCallback(
(event: React.FocusEvent<HTMLDivElement>) => { (event: React.FocusEvent<HTMLDivElement>) => {
@@ -667,7 +670,7 @@ export const Editable = (props: EditableProps) => {
IS_FOCUSED.set(editor, true) IS_FOCUSED.set(editor, true)
} }
}, },
[attributes.onFocus] [readOnly, attributes.onFocus]
)} )}
onKeyDown={useCallback( onKeyDown={useCallback(
(event: React.KeyboardEvent<HTMLDivElement>) => { (event: React.KeyboardEvent<HTMLDivElement>) => {
@@ -863,7 +866,7 @@ export const Editable = (props: EditableProps) => {
} }
} }
}, },
[attributes.onKeyDown] [readOnly, attributes.onKeyDown]
)} )}
onPaste={useCallback( onPaste={useCallback(
(event: React.ClipboardEvent<HTMLDivElement>) => { (event: React.ClipboardEvent<HTMLDivElement>) => {
@@ -882,7 +885,7 @@ export const Editable = (props: EditableProps) => {
}) })
} }
}, },
[attributes.onPaste] [readOnly, attributes.onPaste]
)} )}
> >
<Children <Children