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

enable eslint hooks rules (#5363)

Browse Source
This commit is contained in:
Anthony Ciccarello
2023-03-17 10:45:54 -07:00
committed by GitHub
parent 556a4565d2
commit d42cd005db
15 changed files with 264 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
.changeset/shaggy-donuts-applaud.md Normal file
View File

@@ -0,0 +1,11 @@
---
'slate-react': minor
---
update dependencies on react hooks to be more senstive to changes
The code should now meet eslint react hook standards
This could result in more renders
closes #3886

5
.eslintrc.json
View File

@@ -4,7 +4,8 @@
"plugin:import/typescript",
"prettier",
"prettier/@typescript-eslint",
"prettier/react"
"prettier/react",
"plugin:react-hooks/recommended"
],
"plugins": ["@typescript-eslint", "import", "react", "prettier"],
"parser": "@typescript-eslint/parser",
@@ -19,7 +20,7 @@
"settings": {
"import/extensions": [".js", ".ts", ".jsx", ".tsx"],
"react": {
"version": "detect"
"version": "16"
}
},
"env": {

1
package.json
View File

@@ -74,6 +74,7 @@
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-react": "^7.16.0",
"eslint-plugin-react-hooks": "^4.6.0",
"faker": "^4.1.0",
"image-extensions": "^1.1.0",
"is-hotkey": "^0.1.6",

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

@@ -69,6 +69,7 @@ import {
import { RestoreDOM } from './restore-dom/restore-dom'
import { useAndroidInputManager } from '../hooks/android-input-manager/use-android-input-manager'
import { useTrackUserInput } from '../hooks/use-track-user-input'
import { AndroidInputManager } from '../hooks/android-input-manager/android-input-manager'
type DeferredOperation = () => void
@@ -181,13 +182,25 @@ export const Editable = (props: EditableProps) => {
}
}, [autoFocus])
/**
* The AndroidInputManager object has a cyclical dependency on onDOMSelectionChange
*
* It is defined as a reference to simplify hook dependencies and clarify that
* it needs to be initialized.
*/
const androidInputManagerRef = useRef<
AndroidInputManager | null | undefined
>()
// Listen on the native `selectionchange` event to be able to update any time
// the selection changes. This is required because React's `onSelect` is leaky
// and non-standard so it doesn't fire until after a selection has been
// released. This causes issues in situations where another change happens
// while a selection is being dragged.
const onDOMSelectionChange = useCallback(
const onDOMSelectionChange = useMemo(
() =>
throttle(() => {
const androidInputManager = androidInputManagerRef.current
if (
(IS_ANDROID || !ReactEditor.isComposing(editor)) &&
(!state.isUpdatingSelection || androidInputManager?.isFlushing()) &&
@@ -244,7 +257,7 @@ export const Editable = (props: EditableProps) => {
}
}
}, 100),
[readOnly]
[editor, readOnly, state]
)
const scheduleOnDOMSelectionChange = useMemo(
@@ -252,7 +265,7 @@ export const Editable = (props: EditableProps) => {
[onDOMSelectionChange]
)
const androidInputManager = useAndroidInputManager({
androidInputManagerRef.current = useAndroidInputManager({
node: ref,
onDOMSelectionChange,
scheduleOnDOMSelectionChange,
@@ -278,7 +291,7 @@ export const Editable = (props: EditableProps) => {
if (
!domSelection ||
!ReactEditor.isFocused(editor) ||
androidInputManager?.hasPendingAction()
androidInputManagerRef.current?.hasPendingAction()
) {
return
}
@@ -376,7 +389,8 @@ export const Editable = (props: EditableProps) => {
}
const newDomRange = setDomSelection()
const ensureSelection = androidInputManager?.isFlushing() === 'action'
const ensureSelection =
androidInputManagerRef.current?.isFlushing() === 'action'
if (!IS_ANDROID || !ensureSelection) {
setTimeout(() => {
@@ -444,8 +458,8 @@ export const Editable = (props: EditableProps) => {
!isDOMEventHandled(event, propsOnDOMBeforeInput)
) {
// COMPAT: BeforeInput events aren't cancelable on android, so we have to handle them differently using the android input manager.
if (androidInputManager) {
return androidInputManager.handleDOMBeforeInput(event)
if (androidInputManagerRef.current) {
return androidInputManagerRef.current.handleDOMBeforeInput(event)
}
// Some IMEs/Chrome extensions like e.g. Grammarly set the selection immediately before
@@ -699,7 +713,14 @@ export const Editable = (props: EditableProps) => {
}
}
},
[readOnly, propsOnDOMBeforeInput]
[
editor,
onDOMSelectionChange,
onUserInput,
propsOnDOMBeforeInput,
readOnly,
scheduleOnDOMSelectionChange,
]
)
const callbackRef = useCallback(
@@ -728,7 +749,12 @@ export const Editable = (props: EditableProps) => {
ref.current = node
},
[ref, onDOMBeforeInput, onDOMSelectionChange, scheduleOnDOMSelectionChange]
[
onDOMSelectionChange,
scheduleOnDOMSelectionChange,
editor,
onDOMBeforeInput,
]
)
// Attach a native DOM event handler for `selectionchange`, because React's
@@ -899,15 +925,16 @@ export const Editable = (props: EditableProps) => {
}
}
},
[readOnly]
[attributes.onBeforeInput, editor, readOnly]
)}
onInput={useCallback((event: React.FormEvent<HTMLDivElement>) => {
onInput={useCallback(
(event: React.FormEvent<HTMLDivElement>) => {
if (isEventHandled(event, attributes.onInput)) {
return
}
if (androidInputManager) {
androidInputManager.handleInput()
if (androidInputManagerRef.current) {
androidInputManagerRef.current.handleInput()
return
}
@@ -919,7 +946,9 @@ export const Editable = (props: EditableProps) => {
op()
}
deferredOperations.current = []
}, [])}
},
[attributes.onInput]
)}
onBlur={useCallback(
(event: React.FocusEvent<HTMLDivElement>) => {
if (
@@ -984,7 +1013,13 @@ export const Editable = (props: EditableProps) => {
IS_FOCUSED.delete(editor)
},
[readOnly, attributes.onBlur]
[
readOnly,
state.isUpdatingSelection,
state.latestElement,
editor,
attributes.onBlur,
]
)}
onClick={useCallback(
(event: React.MouseEvent<HTMLDivElement>) => {
@@ -1045,7 +1080,7 @@ export const Editable = (props: EditableProps) => {
}
}
},
[readOnly, attributes.onClick]
[editor, attributes.onClick, readOnly]
)}
onCompositionEnd={useCallback(
(event: React.CompositionEvent<HTMLDivElement>) => {
@@ -1055,7 +1090,7 @@ export const Editable = (props: EditableProps) => {
IS_COMPOSING.set(editor, false)
}
androidInputManager?.handleCompositionEnd(event)
androidInputManagerRef.current?.handleCompositionEnd(event)
if (
isEventHandled(event, attributes.onCompositionEnd) ||
@@ -1097,7 +1132,7 @@ export const Editable = (props: EditableProps) => {
}
}
},
[attributes.onCompositionEnd]
[attributes.onCompositionEnd, editor]
)}
onCompositionUpdate={useCallback(
(event: React.CompositionEvent<HTMLDivElement>) => {
@@ -1111,12 +1146,12 @@ export const Editable = (props: EditableProps) => {
}
}
},
[attributes.onCompositionUpdate]
[attributes.onCompositionUpdate, editor]
)}
onCompositionStart={useCallback(
(event: React.CompositionEvent<HTMLDivElement>) => {
if (ReactEditor.hasSelectableTarget(editor, event.target)) {
androidInputManager?.handleCompositionStart(event)
androidInputManagerRef.current?.handleCompositionStart(event)
if (
isEventHandled(event, attributes.onCompositionStart) ||
@@ -1151,7 +1186,7 @@ export const Editable = (props: EditableProps) => {
}
}
},
[attributes.onCompositionStart]
[attributes.onCompositionStart, editor]
)}
onCopy={useCallback(
(event: React.ClipboardEvent<HTMLDivElement>) => {
@@ -1168,7 +1203,7 @@ export const Editable = (props: EditableProps) => {
)
}
},
[attributes.onCopy]
[attributes.onCopy, editor]
)}
onCut={useCallback(
(event: React.ClipboardEvent<HTMLDivElement>) => {
@@ -1198,7 +1233,7 @@ export const Editable = (props: EditableProps) => {
}
}
},
[readOnly, attributes.onCut]
[readOnly, editor, attributes.onCut]
)}
onDragOver={useCallback(
(event: React.DragEvent<HTMLDivElement>) => {
@@ -1216,7 +1251,7 @@ export const Editable = (props: EditableProps) => {
}
}
},
[attributes.onDragOver]
[attributes.onDragOver, editor]
)}
onDragStart={useCallback(
(event: React.DragEvent<HTMLDivElement>) => {
@@ -1247,7 +1282,7 @@ export const Editable = (props: EditableProps) => {
)
}
},
[readOnly, attributes.onDragStart]
[readOnly, editor, attributes.onDragStart, state]
)}
onDrop={useCallback(
(event: React.DragEvent<HTMLDivElement>) => {
@@ -1290,7 +1325,7 @@ export const Editable = (props: EditableProps) => {
state.isDraggingInternally = false
},
[readOnly, attributes.onDrop]
[readOnly, editor, attributes.onDrop, state]
)}
onDragEnd={useCallback(
(event: React.DragEvent<HTMLDivElement>) => {
@@ -1308,7 +1343,7 @@ export const Editable = (props: EditableProps) => {
// Note: `onDragEnd` is only called when `onDrop` is not called
state.isDraggingInternally = false
},
[readOnly, attributes.onDragEnd]
[readOnly, state, attributes, editor]
)}
onFocus={useCallback(
(event: React.FocusEvent<HTMLDivElement>) => {
@@ -1333,7 +1368,7 @@ export const Editable = (props: EditableProps) => {
IS_FOCUSED.set(editor, true)
}
},
[readOnly, attributes.onFocus]
[readOnly, state, editor, attributes.onFocus]
)}
onKeyDown={useCallback(
(event: React.KeyboardEvent<HTMLDivElement>) => {
@@ -1341,7 +1376,7 @@ export const Editable = (props: EditableProps) => {
!readOnly &&
ReactEditor.hasEditableTarget(editor, event.target)
) {
androidInputManager?.handleKeyDown(event)
androidInputManagerRef.current?.handleKeyDown(event)
const { nativeEvent } = event
@@ -1608,7 +1643,7 @@ export const Editable = (props: EditableProps) => {
}
}
},
[readOnly, attributes.onKeyDown]
[readOnly, editor, attributes.onKeyDown]
)}
onPaste={useCallback(
(event: React.ClipboardEvent<HTMLDivElement>) => {
@@ -1634,7 +1669,7 @@ export const Editable = (props: EditableProps) => {
}
}
},
[readOnly, attributes.onPaste]
[readOnly, editor, attributes.onPaste]
)}
>
<Children

2
packages/slate-react/src/components/leaf.tsx
View File

@@ -83,7 +83,7 @@ const Leaf = (props: {
return () => {
EDITOR_TO_PLACEHOLDER_ELEMENT.delete(editor)
}
}, [placeholderRef, leaf])
}, [placeholderRef, leaf, editor])
let children = (
<String isLast={isLast} leaf={leaf} parent={parent} text={text} />

10
packages/slate-react/src/components/slate.tsx
View File

@@ -5,7 +5,7 @@ import { FocusedContext } from '../hooks/use-focused'
import { EditorContext } from '../hooks/use-slate-static'
import { SlateContext, SlateContextValue } from '../hooks/use-slate'
import {
getSelectorContext,
useSelectorContext,
SlateSelectorContext,
} from '../hooks/use-slate-selector'
import { EDITOR_TO_ON_CHANGE } from '../utils/weak-maps'
@@ -47,7 +47,7 @@ export const Slate = (props: {
const {
selectorContext,
onChange: handleSelectorChange,
} = getSelectorContext(editor)
} = useSelectorContext(editor)
const onContextChange = useCallback(() => {
if (onChange) {
@@ -59,7 +59,7 @@ export const Slate = (props: {
editor,
}))
handleSelectorChange(editor)
}, [onChange])
}, [editor, handleSelectorChange, onChange])
useEffect(() => {
EDITOR_TO_ON_CHANGE.set(editor, onContextChange)
@@ -68,13 +68,13 @@ export const Slate = (props: {
EDITOR_TO_ON_CHANGE.set(editor, () => {})
unmountRef.current = true
}
}, [onContextChange])
}, [editor, onContextChange])
const [isFocused, setIsFocused] = useState(ReactEditor.isFocused(editor))
useEffect(() => {
setIsFocused(ReactEditor.isFocused(editor))
})
}, [editor])
useIsomorphicLayoutEffect(() => {
const fn = () => setIsFocused(ReactEditor.isFocused(editor))

7
packages/slate-react/src/hooks/android-input-manager/use-android-input-manager.ts
View File

@@ -22,10 +22,9 @@ const MUTATION_OBSERVER_CONFIG: MutationObserverInit = {
characterData: true,
}
export function useAndroidInputManager({
node,
...options
}: UseAndroidInputManagerOptions) {
export const useAndroidInputManager = !IS_ANDROID
? () => null
: ({ node, ...options }: UseAndroidInputManagerOptions) => {
if (!IS_ANDROID) {
return null
}

2
packages/slate-react/src/hooks/use-mutation-observer.ts
View File

@@ -23,5 +23,5 @@ export function useMutationObserver(
mutationObserver.observe(node.current, options)
return () => mutationObserver.disconnect()
}, [])
}, [mutationObserver, node, options])
}

13
packages/slate-react/src/hooks/use-slate-selector.tsx
View File

@@ -112,17 +112,22 @@ export function useSlateSelector<T>(
/**
* Create selector context with editor updating on every editor change
*/
export function getSelectorContext(editor: Editor) {
export function useSelectorContext(editor: Editor) {
const eventListeners = useRef<EditorChangeHandler[]>([]).current
const slateRef = useRef<{
editor: Editor
}>({
editor,
}).current
const onChange = useCallback((editor: Editor) => {
const onChange = useCallback(
(editor: Editor) => {
slateRef.editor = editor
eventListeners.forEach((listener: EditorChangeHandler) => listener(editor))
}, [])
eventListeners.forEach((listener: EditorChangeHandler) =>
listener(editor)
)
},
[eventListeners, slateRef]
)
const selectorContext = useMemo(() => {
return {

2
packages/slate-react/src/hooks/use-track-user-input.ts
View File

@@ -21,7 +21,7 @@ export function useTrackUserInput() {
animationFrameIdRef.current = window.requestAnimationFrame(() => {
receivedUserInput.current = false
})
}, [])
}, [editor])
useEffect(() => () => cancelAnimationFrame(animationFrameIdRef.current), [])

14
packages/slate-react/test/index.spec.tsx
View File

@@ -1,4 +1,4 @@
import React from 'react'
import React, { useEffect } from 'react'
import { createEditor, Element, Transforms } from 'slate'
import { create, act, ReactTestRenderer } from 'react-test-renderer'
import { Slate, withReact, Editable } from '../src'
@@ -22,7 +22,7 @@ describe('slate-react', () => {
test('should not unmount the node that gets split on a split_node operation', async () => {
const editor = withReact(createEditor())
const value = [{ type: 'block', children: [{ text: 'test' }] }]
const mounts = jest.fn<void, [Element]>()
const mounts = jest.fn()
let el: ReactTestRenderer
@@ -30,8 +30,8 @@ describe('slate-react', () => {
el = create(
<Slate editor={editor} value={value} onChange={() => {}}>
<Editable
renderElement={({ element, children }) => {
React.useEffect(() => mounts(element), [])
renderElement={({ children }) => {
useEffect(() => mounts(), [])
return children
}}
@@ -56,7 +56,7 @@ describe('slate-react', () => {
{ type: 'block', children: [{ text: 'te' }] },
{ type: 'block', children: [{ text: 'st' }] },
]
const mounts = jest.fn<void, [Element]>()
const mounts = jest.fn()
let el: ReactTestRenderer
@@ -64,8 +64,8 @@ describe('slate-react', () => {
el = create(
<Slate editor={editor} value={value} onChange={() => {}}>
<Editable
renderElement={({ element, children }) => {
React.useEffect(() => mounts(element), [])
renderElement={({ children }) => {
useEffect(() => mounts(), [])
return children
}}

22
site/examples/code-highlighting.tsx
View File

@@ -8,7 +8,7 @@ import 'prismjs/components/prism-python'
import 'prismjs/components/prism-php'
import 'prismjs/components/prism-sql'
import 'prismjs/components/prism-java'
import React, { useCallback, useMemo, useState } from 'react'
import React, { useCallback, useState } from 'react'
import {
createEditor,
Node,
@@ -51,7 +51,7 @@ const CodeHighlightingExample = () => {
<SetNodeToDecorations />
<Editable
decorate={decorate}
renderElement={renderElement}
renderElement={ElementWrapper}
renderLeaf={renderLeaf}
onKeyDown={onKeyDown}
/>
@@ -60,7 +60,7 @@ const CodeHighlightingExample = () => {
)
}
const renderElement = (props: RenderElementProps) => {
const ElementWrapper = (props: RenderElementProps) => {
const { attributes, children, element } = props
const editor = useSlateStatic()
@@ -161,14 +161,17 @@ const renderLeaf = (props: RenderLeafProps) => {
}
const useDecorate = (editor: Editor) => {
return useCallback(([node, path]) => {
return useCallback(
([node, path]) => {
if (Element.isElement(node) && node.type === CodeLineType) {
const ranges = editor.nodeToDecorations.get(node) || []
return ranges
}
return []
}, [])
},
[editor.nodeToDecorations]
)
}
const getChildNodeToDecorations = ([block, blockPath]: NodeEntry<
@@ -220,7 +223,6 @@ const getChildNodeToDecorations = ([block, blockPath]: NodeEntry<
const SetNodeToDecorations = () => {
const editor = useSlate()
useMemo(() => {
const blockEntries = Array.from(
Editor.nodes(editor, {
at: [],
@@ -234,20 +236,22 @@ const SetNodeToDecorations = () => {
)
editor.nodeToDecorations = nodeToDecorations
}, [editor.children])
return null
}
const useOnKeydown = (editor: Editor) => {
const onKeyDown: React.KeyboardEventHandler = useCallback(e => {
const onKeyDown: React.KeyboardEventHandler = useCallback(
e => {
if (isHotkey('tab', e)) {
// handle tab key, insert spaces
e.preventDefault()
Editor.insertText(editor, ' ')
}
}, [])
},
[editor]
)
return onKeyDown
}

7
site/examples/markdown-shortcuts.tsx
View File

@@ -33,7 +33,8 @@ const MarkdownShortcutsExample = () => {
[]
)
const handleDOMBeforeInput = useCallback((e: InputEvent) => {
const handleDOMBeforeInput = useCallback(
(e: InputEvent) => {
queueMicrotask(() => {
const pendingDiffs = ReactEditor.androidPendingDiffs(editor)
@@ -64,7 +65,9 @@ const MarkdownShortcutsExample = () => {
ReactEditor.androidScheduleFlush(editor)
}
})
}, [])
},
[editor]
)
return (
<Slate editor={editor} value={initialValue}>

2
site/examples/mentions.tsx
View File

@@ -57,7 +57,7 @@ const MentionExample = () => {
}
}
},
[index, search, target]
[chars, editor, index, target]
)
useEffect(() => {

10
yarn.lock
View File

@@ -6769,6 +6769,15 @@ __metadata:
languageName: node
linkType: hard
"eslint-plugin-react-hooks@npm:^4.6.0":
version: 4.6.0
resolution: "eslint-plugin-react-hooks@npm:4.6.0"
peerDependencies:
eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
checksum: 23001801f14c1d16bf0a837ca7970d9dd94e7b560384b41db378b49b6e32dc43d6e2790de1bd737a652a86f81a08d6a91f402525061b47719328f586a57e86c3
languageName: node
linkType: hard
"eslint-plugin-react@npm:^7.16.0":
version: 7.24.0
resolution: "eslint-plugin-react@npm:7.24.0"
@@ -13872,6 +13881,7 @@ resolve@^2.0.0-next.3:
eslint-plugin-import: ^2.18.2
eslint-plugin-prettier: ^3.1.1
eslint-plugin-react: ^7.16.0
eslint-plugin-react-hooks: ^4.6.0
faker: ^4.1.0
image-extensions: ^1.1.0
is-hotkey: ^0.1.6