Skip to content

Commit

Permalink
refactor: Remove usage of useEvent with useCallback
Browse files Browse the repository at this point in the history
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)
  • Loading branch information
pawelgrimm committed Jan 13, 2023
1 parent 94a0578 commit c4753fc
Showing 1 changed file with 42 additions and 40 deletions.
82 changes: 42 additions & 40 deletions src/components/typist-editor.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { forwardRef, useImperativeHandle, useMemo } from 'react'
import { useEvent } from 'react-use-event-hook'
import { forwardRef, useCallback, useImperativeHandle, useMemo } from 'react'

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

const handleCreate = useEvent(function handleCreate(props: CreateProps) {
const { view } = props.editor

// Apply a selection to the document if one was given and `autoFocus` is `true`
if (autoFocus && contentSelection) {
view.dispatch(
view.state.tr
.setSelection(resolveContentSelection(view.state.doc, contentSelection))
.scrollIntoView(),
)
}

// Move the suggestion plugins to the top of the plugins list so they have a higher priority
// than all input rules (such as the ones used for Markdown shortcuts)
// ref: https://github.com/ueberdosis/tiptap/issues/2570
if (view.state.plugins.length > 0) {
const restOfPlugins: Plugin[] = []
const suggestionPlugins: Plugin[] = []

view.state.plugins.forEach((plugin) => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore: The `Plugin` type does not include `key`
if ((plugin.key as string).includes('Suggestion')) {
suggestionPlugins.push(plugin)
} else {
restOfPlugins.push(plugin)
}
})

view.updateState(
view.state.reconfigure({
plugins: [...suggestionPlugins, ...restOfPlugins],
}),
)
}
const handleCreate = useCallback(
function handleCreate(props: CreateProps) {
const { view } = props.editor

// Apply a selection to the document if one was given and `autoFocus` is `true`
if (autoFocus && contentSelection) {
view.dispatch(
view.state.tr
.setSelection(resolveContentSelection(view.state.doc, contentSelection))
.scrollIntoView(),
)
}

// Move the suggestion plugins to the top of the plugins list so they have a higher priority
// than all input rules (such as the ones used for Markdown shortcuts)
// ref: https://github.com/ueberdosis/tiptap/issues/2570
if (view.state.plugins.length > 0) {
const restOfPlugins: Plugin[] = []
const suggestionPlugins: Plugin[] = []

view.state.plugins.forEach((plugin) => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore: The `Plugin` type does not include `key`
if ((plugin.key as string).includes('Suggestion')) {
suggestionPlugins.push(plugin)
} else {
restOfPlugins.push(plugin)
}
})

view.updateState(
view.state.reconfigure({
plugins: [...suggestionPlugins, ...restOfPlugins],
}),
)
}

// Invoke the user `onCreate` handle after all internal initializations
onCreate?.(props)
})
// Invoke the user `onCreate` handle after all internal initializations
onCreate?.(props)
},
[autoFocus, contentSelection, onCreate],
)

const editor = useEditor(
{
Expand Down

0 comments on commit c4753fc

Please sign in to comment.