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