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

improve prop typings for Editable (#3158)

Browse Source
This commit is contained in:
Nathan Fenner
2019-11-28 17:28:35 -08:00
committed by Ian Storm Taylor
parent ac1d6165b5
commit 5bf58bbb71
1 changed files with 55 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -36,18 +36,19 @@ import {
* Editable.
*/
export const Editable = (props: {
export const Editable = (
props: {
decorate?: (entry: NodeEntry) => Range[]
onDOMBeforeInput?: (event: Event) => void
placeholder?: string
readOnly?: boolean
role?: string
style?: Record<string, any>
style?: React.CSSProperties
renderDecoration?: (props: CustomDecorationProps) => JSX.Element
renderElement?: (props: CustomElementProps) => JSX.Element
renderMark?: (props: CustomMarkProps) => JSX.Element
[key: string]: any
}) => {
} & React.HTMLAttributes<HTMLDivElement>
) => {
const {
decorate = defaultDecorate,
placeholder,
@@ -404,7 +405,7 @@ export const Editable = (props: {
editor.exec({ type: 'insert_text', text })
}
}, [])}
onBlur={useCallback((event: React.FocusEvent) => {
onBlur={useCallback((event: React.FocusEvent<HTMLDivElement>) => {
if (
readOnly ||
state.isUpdatingSelection ||
@@ -458,7 +459,7 @@ export const Editable = (props: {
IS_FOCUSED.delete(editor)
}, [])}
onClick={useCallback((event: React.MouseEvent) => {
onClick={useCallback((event: React.MouseEvent<HTMLDivElement>) => {
if (
!readOnly &&
hasTarget(editor, event.target) &&
@@ -475,7 +476,8 @@ export const Editable = (props: {
}
}
}, [])}
onCompositionEnd={useCallback((event: React.CompositionEvent) => {
onCompositionEnd={useCallback(
(event: React.CompositionEvent<HTMLDivElement>) => {
if (
hasEditableTarget(editor, event.target) &&
!isEventHandled(event, attributes.onCompositionEnd)
@@ -490,16 +492,21 @@ export const Editable = (props: {
editor.exec({ type: 'insert_text', text: event.data })
}
}
}, [])}
onCompositionStart={useCallback((event: React.CompositionEvent) => {
},
[]
)}
onCompositionStart={useCallback(
(event: React.CompositionEvent<HTMLDivElement>) => {
if (
hasEditableTarget(editor, event.target) &&
!isEventHandled(event, attributes.onCompositionStart)
) {
state.isComposing = true
}
}, [])}
onCopy={useCallback((event: React.ClipboardEvent) => {
},
[]
)}
onCopy={useCallback((event: React.ClipboardEvent<HTMLDivElement>) => {
if (
hasEditableTarget(editor, event.target) &&
!isEventHandled(event, attributes.onCopy)
@@ -508,7 +515,7 @@ export const Editable = (props: {
setFragmentData(event.clipboardData, editor)
}
}, [])}
onCut={useCallback((event: React.ClipboardEvent) => {
onCut={useCallback((event: React.ClipboardEvent<HTMLDivElement>) => {
if (
!readOnly &&
hasEditableTarget(editor, event.target) &&
@@ -523,7 +530,7 @@ export const Editable = (props: {
}
}
}, [])}
onDragOver={useCallback((event: React.DragEvent) => {
onDragOver={useCallback((event: React.DragEvent<HTMLDivElement>) => {
if (
hasTarget(editor, event.target) &&
!isEventHandled(event, attributes.onDragOver)
@@ -538,7 +545,7 @@ export const Editable = (props: {
}
}
}, [])}
onDragStart={useCallback((event: React.DragEvent) => {
onDragStart={useCallback((event: React.DragEvent<HTMLDivElement>) => {
if (
hasTarget(editor, event.target) &&
!isEventHandled(event, attributes.onDragStart)
@@ -557,7 +564,7 @@ export const Editable = (props: {
setFragmentData(event.dataTransfer, editor)
}
}, [])}
onDrop={useCallback((event: React.DragEvent) => {
onDrop={useCallback((event: React.DragEvent<HTMLDivElement>) => {
if (
hasTarget(editor, event.target) &&
!readOnly &&
@@ -579,7 +586,7 @@ export const Editable = (props: {
}
}
}, [])}
onFocus={useCallback((event: React.FocusEvent) => {
onFocus={useCallback((event: React.FocusEvent<HTMLDivElement>) => {
if (
!readOnly &&
!state.isUpdatingSelection &&
@@ -698,7 +705,7 @@ export const Editable = (props: {
}
}
}}
onPaste={useCallback((event: React.ClipboardEvent) => {
onPaste={useCallback((event: React.ClipboardEvent<HTMLDivElement>) => {
// COMPAT: Firefox doesn't support the `beforeinput` event, so we
// fall back to React's `onPaste` here instead.
if (
@@ -781,9 +788,11 @@ const hasEditableTarget = (
* Check if an event is overrided by a handler.
*/
const isEventHandled = (
event: React.SyntheticEvent,
handler?: (event: React.SyntheticEvent) => void
const isEventHandled = <
EventType extends React.SyntheticEvent<unknown, unknown>
>(
event: EventType,
handler?: (event: EventType) => void
) => {
if (!handler) {
return false