mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-18 13:11:17 +02:00
Code Issues Releases Wiki Activity

Fix missing callback dependencies in slate-react <Editable /> (#3192)

Browse Source 
* Fix missing callback dependencies

* Fix editable formatting
This commit is contained in:
Caleb Delnay
2019-12-01 19:19:39 -05:00
committed by Ian Storm Taylor
parent 0dd3d17cdb
commit 52e20da69a
1 changed files with 392 additions and 362 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -445,7 +445,8 @@ export const Editable = (
editor.exec({ type: 'insert_text', text }) editor.exec({ type: 'insert_text', text })
} }
}, [])} }, [])}
onBlur={useCallback((event: React.FocusEvent<HTMLDivElement>) => { onBlur={useCallback(
(event: React.FocusEvent<HTMLDivElement>) => {
if ( if (
readOnly || readOnly ||
state.isUpdatingSelection || state.isUpdatingSelection ||
@@ -498,8 +499,11 @@ export const Editable = (
} }
IS_FOCUSED.delete(editor) IS_FOCUSED.delete(editor)
}, [])} },
onClick={useCallback((event: React.MouseEvent<HTMLDivElement>) => { [attributes.onBlur]
)}
onClick={useCallback(
(event: React.MouseEvent<HTMLDivElement>) => {
if ( if (
!readOnly && !readOnly &&
hasTarget(editor, event.target) && hasTarget(editor, event.target) &&
@@ -515,7 +519,9 @@ export const Editable = (
Editor.select(editor, range) Editor.select(editor, range)
} }
} }
}, [])} },
[attributes.onClick]
)}
onCompositionEnd={useCallback( onCompositionEnd={useCallback(
(event: React.CompositionEvent<HTMLDivElement>) => { (event: React.CompositionEvent<HTMLDivElement>) => {
if ( if (
@@ -533,7 +539,7 @@ export const Editable = (
} }
} }
}, },
[] [attributes.onCompositionEnd]
)} )}
onCompositionStart={useCallback( onCompositionStart={useCallback(
(event: React.CompositionEvent<HTMLDivElement>) => { (event: React.CompositionEvent<HTMLDivElement>) => {
@@ -544,9 +550,10 @@ export const Editable = (
state.isComposing = true state.isComposing = true
} }
}, },
[] [attributes.onCompositionStart]
)} )}
onCopy={useCallback((event: React.ClipboardEvent<HTMLDivElement>) => { onCopy={useCallback(
(event: React.ClipboardEvent<HTMLDivElement>) => {
if ( if (
hasEditableTarget(editor, event.target) && hasEditableTarget(editor, event.target) &&
!isEventHandled(event, attributes.onCopy) !isEventHandled(event, attributes.onCopy)
@@ -554,8 +561,11 @@ export const Editable = (
event.preventDefault() event.preventDefault()
setFragmentData(event.clipboardData, editor) setFragmentData(event.clipboardData, editor)
} }
}, [])} },
onCut={useCallback((event: React.ClipboardEvent<HTMLDivElement>) => { [attributes.onCopy]
)}
onCut={useCallback(
(event: React.ClipboardEvent<HTMLDivElement>) => {
if ( if (
!readOnly && !readOnly &&
hasEditableTarget(editor, event.target) && hasEditableTarget(editor, event.target) &&
@@ -569,8 +579,11 @@ export const Editable = (
editor.exec({ type: 'delete_fragment' }) editor.exec({ type: 'delete_fragment' })
} }
} }
}, [])} },
onDragOver={useCallback((event: React.DragEvent<HTMLDivElement>) => { [attributes.onCut]
)}
onDragOver={useCallback(
(event: React.DragEvent<HTMLDivElement>) => {
if ( if (
hasTarget(editor, event.target) && hasTarget(editor, event.target) &&
!isEventHandled(event, attributes.onDragOver) !isEventHandled(event, attributes.onDragOver)
@@ -584,8 +597,11 @@ export const Editable = (
event.preventDefault() event.preventDefault()
} }
} }
}, [])} },
onDragStart={useCallback((event: React.DragEvent<HTMLDivElement>) => { [attributes.onDragOver]
)}
onDragStart={useCallback(
(event: React.DragEvent<HTMLDivElement>) => {
if ( if (
hasTarget(editor, event.target) && hasTarget(editor, event.target) &&
!isEventHandled(event, attributes.onDragStart) !isEventHandled(event, attributes.onDragStart)
@@ -603,8 +619,11 @@ export const Editable = (
setFragmentData(event.dataTransfer, editor) setFragmentData(event.dataTransfer, editor)
} }
}, [])} },
onDrop={useCallback((event: React.DragEvent<HTMLDivElement>) => { [attributes.onDragStart]
)}
onDrop={useCallback(
(event: React.DragEvent<HTMLDivElement>) => {
if ( if (
hasTarget(editor, event.target) && hasTarget(editor, event.target) &&
!readOnly && !readOnly &&
@@ -625,8 +644,11 @@ export const Editable = (
editor.exec({ type: 'insert_data', data }) editor.exec({ type: 'insert_data', data })
} }
} }
}, [])} },
onFocus={useCallback((event: React.FocusEvent<HTMLDivElement>) => { [attributes.onDrop]
)}
onFocus={useCallback(
(event: React.FocusEvent<HTMLDivElement>) => {
if ( if (
!readOnly && !readOnly &&
!state.isUpdatingSelection && !state.isUpdatingSelection &&
@@ -646,8 +668,11 @@ export const Editable = (
IS_FOCUSED.set(editor, true) IS_FOCUSED.set(editor, true)
} }
}, [])} },
onKeyDown={event => { [attributes.onFocus]
)}
onKeyDown={useCallback(
(event: React.KeyboardEvent<HTMLDivElement>) => {
if ( if (
!readOnly && !readOnly &&
hasEditableTarget(editor, event.target) && hasEditableTarget(editor, event.target) &&
@@ -839,8 +864,11 @@ export const Editable = (
} }
} }
} }
}} },
onPaste={useCallback((event: React.ClipboardEvent<HTMLDivElement>) => { [attributes.onKeyDown]
)}
onPaste={useCallback(
(event: React.ClipboardEvent<HTMLDivElement>) => {
// COMPAT: Firefox doesn't support the `beforeinput` event, so we // COMPAT: Firefox doesn't support the `beforeinput` event, so we
// fall back to React's `onPaste` here instead. // fall back to React's `onPaste` here instead.
if ( if (
@@ -855,7 +883,9 @@ export const Editable = (
data: event.clipboardData, data: event.clipboardData,
}) })
} }
}, [])} },
[attributes.onPaste]
)}
> >
<Children <Children
decorate={decorate} decorate={decorate}