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

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

@@ -36,18 +36,19 @@ import {
* Editable. * Editable.
*/ */
export const Editable = (props: { export const Editable = (
decorate?: (entry: NodeEntry) => Range[] props: {
onDOMBeforeInput?: (event: Event) => void decorate?: (entry: NodeEntry) => Range[]
placeholder?: string onDOMBeforeInput?: (event: Event) => void
readOnly?: boolean placeholder?: string
role?: string readOnly?: boolean
style?: Record<string, any> role?: string
renderDecoration?: (props: CustomDecorationProps) => JSX.Element style?: React.CSSProperties
renderElement?: (props: CustomElementProps) => JSX.Element renderDecoration?: (props: CustomDecorationProps) => JSX.Element
renderMark?: (props: CustomMarkProps) => JSX.Element renderElement?: (props: CustomElementProps) => JSX.Element
[key: string]: any renderMark?: (props: CustomMarkProps) => JSX.Element
}) => { } & 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,31 +476,37 @@ export const Editable = (props: {
} }
} }
}, [])} }, [])}
onCompositionEnd={useCallback((event: React.CompositionEvent) => { onCompositionEnd={useCallback(
if ( (event: React.CompositionEvent<HTMLDivElement>) => {
hasEditableTarget(editor, event.target) && if (
!isEventHandled(event, attributes.onCompositionEnd) hasEditableTarget(editor, event.target) &&
) { !isEventHandled(event, attributes.onCompositionEnd)
state.isComposing = false ) {
state.isComposing = false
// COMPAT: In Chrome, `beforeinput` events for compositions // COMPAT: In Chrome, `beforeinput` events for compositions
// aren't correct and never fire the "insertFromComposition" // aren't correct and never fire the "insertFromComposition"
// type that we need. So instead, insert whenever a composition // type that we need. So instead, insert whenever a composition
// ends since it will already have been committed to the DOM. // ends since it will already have been committed to the DOM.
if (!IS_SAFARI && event.data) { if (!IS_SAFARI && event.data) {
editor.exec({ type: 'insert_text', text: event.data }) editor.exec({ type: 'insert_text', text: event.data })
}
} }
} },
}, [])} []
onCompositionStart={useCallback((event: React.CompositionEvent) => { )}
if ( onCompositionStart={useCallback(
hasEditableTarget(editor, event.target) && (event: React.CompositionEvent<HTMLDivElement>) => {
!isEventHandled(event, attributes.onCompositionStart) if (
) { hasEditableTarget(editor, event.target) &&
state.isComposing = true !isEventHandled(event, attributes.onCompositionStart)
} ) {
}, [])} 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