fix: Replace usage of useEvent with useCallback (Doist#98)

jerrywcy · Feb 22, 2023 · 3b175f7 · 3b175f7
1 parent bd8c0c2
commit 3b175f7
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 44 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -140,6 +140,7 @@
         "react-icons": "4.7.1",
         "react-markdown": "8.0.5",
         "react-syntax-highlighter": "15.5.0",
+        "react-use-event-hook": "0.9.3",
         "rehype-raw": "6.1.1",
         "remark-gfm": "3.0.1",
         "rimraf": "3.0.2",
@@ -158,7 +159,6 @@
         "marked": "^4.1.1",
         "react": "^17.0.0 || ^18.0.0",
         "react-dom": "^17.0.0 || ^18.0.0",
-        "react-use-event-hook": "^0.9.3",
         "turndown": "^7.1.1"
     }
 }
diff --git a/src/components/typist-editor.tsx b/src/components/typist-editor.tsx
@@ -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'
@@ -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(
         {