Skip to content

Commit c4753fc

Browse files
committed
refactor: Remove usage of useEvent with useCallback
The `useEvent` function was being called during rendering, which throws an error when React's Strict Mode is enabled. This type of usage is incorrect because it makes the rendering result non-determinisitic. See reactjs/rfcs#220 (comment)
1 parent 94a0578 commit c4753fc

File tree

1 file changed

+42
-40
lines changed

1 file changed

+42
-40
lines changed

src/components/typist-editor.tsx

Lines changed: 42 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import { forwardRef, useImperativeHandle, useMemo } from 'react'
2-
import { useEvent } from 'react-use-event-hook'
1+
import { forwardRef, useCallback, useImperativeHandle, useMemo } from 'react'
32

43
import { getSchema } from '@tiptap/core'
54
import { Placeholder } from '@tiptap/extension-placeholder'
@@ -303,45 +302,48 @@ const TypistEditor = forwardRef<TypistEditorRef, TypistEditorProps>(function Typ
303302
[ariaDescribedBy, ariaLabel, ariaLabelledBy, editable, schema],
304303
)
305304

306-
const handleCreate = useEvent(function handleCreate(props: CreateProps) {
307-
const { view } = props.editor
308-
309-
// Apply a selection to the document if one was given and `autoFocus` is `true`
310-
if (autoFocus && contentSelection) {
311-
view.dispatch(
312-
view.state.tr
313-
.setSelection(resolveContentSelection(view.state.doc, contentSelection))
314-
.scrollIntoView(),
315-
)
316-
}
317-
318-
// Move the suggestion plugins to the top of the plugins list so they have a higher priority
319-
// than all input rules (such as the ones used for Markdown shortcuts)
320-
// ref: https://github.com/ueberdosis/tiptap/issues/2570
321-
if (view.state.plugins.length > 0) {
322-
const restOfPlugins: Plugin[] = []
323-
const suggestionPlugins: Plugin[] = []
324-
325-
view.state.plugins.forEach((plugin) => {
326-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
327-
// @ts-ignore: The `Plugin` type does not include `key`
328-
if ((plugin.key as string).includes('Suggestion')) {
329-
suggestionPlugins.push(plugin)
330-
} else {
331-
restOfPlugins.push(plugin)
332-
}
333-
})
334-
335-
view.updateState(
336-
view.state.reconfigure({
337-
plugins: [...suggestionPlugins, ...restOfPlugins],
338-
}),
339-
)
340-
}
305+
const handleCreate = useCallback(
306+
function handleCreate(props: CreateProps) {
307+
const { view } = props.editor
308+
309+
// Apply a selection to the document if one was given and `autoFocus` is `true`
310+
if (autoFocus && contentSelection) {
311+
view.dispatch(
312+
view.state.tr
313+
.setSelection(resolveContentSelection(view.state.doc, contentSelection))
314+
.scrollIntoView(),
315+
)
316+
}
317+
318+
// Move the suggestion plugins to the top of the plugins list so they have a higher priority
319+
// than all input rules (such as the ones used for Markdown shortcuts)
320+
// ref: https://github.com/ueberdosis/tiptap/issues/2570
321+
if (view.state.plugins.length > 0) {
322+
const restOfPlugins: Plugin[] = []
323+
const suggestionPlugins: Plugin[] = []
324+
325+
view.state.plugins.forEach((plugin) => {
326+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
327+
// @ts-ignore: The `Plugin` type does not include `key`
328+
if ((plugin.key as string).includes('Suggestion')) {
329+
suggestionPlugins.push(plugin)
330+
} else {
331+
restOfPlugins.push(plugin)
332+
}
333+
})
334+
335+
view.updateState(
336+
view.state.reconfigure({
337+
plugins: [...suggestionPlugins, ...restOfPlugins],
338+
}),
339+
)
340+
}
341341

342-
// Invoke the user `onCreate` handle after all internal initializations
343-
onCreate?.(props)
344-
})
342+
// Invoke the user `onCreate` handle after all internal initializations
343+
onCreate?.(props)
344+
},
345+
[autoFocus, contentSelection, onCreate],
346+
)
345347

346348
const editor = useEditor(
347349
{

0 commit comments

Comments
 (0)