From 3b175f77cf0fa638a8ad267959ab720d24815fdd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Grimm?= Date: Wed, 22 Feb 2023 13:58:21 -0600 Subject: [PATCH] fix: Replace usage of useEvent with useCallback (#98) --- package-lock.json | 6 +-- package.json | 2 +- src/components/typist-editor.tsx | 82 ++++++++++++++++---------------- 3 files changed, 46 insertions(+), 44 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3ea373eb..bea7fd85 100644 --- a/package-lock.json +++ b/package-lock.json @@ -103,6 +103,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", @@ -125,7 +126,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" } }, @@ -30421,7 +30421,7 @@ "version": "0.9.3", "resolved": "https://registry.npmjs.org/react-use-event-hook/-/react-use-event-hook-0.9.3.tgz", "integrity": "sha512-8edWglTZ9Z5kfl31EuRjr4MDkTcEczHvrbo2EG1WVrX/a1B2sP3S9RCXjtSwrEnYRw29ldErlvDQNbTOxHNcmQ==", - "peer": true, + "dev": true, "peerDependencies": { "react": ">=16.8.0" } @@ -59912,7 +59912,7 @@ "version": "0.9.3", "resolved": "https://registry.npmjs.org/react-use-event-hook/-/react-use-event-hook-0.9.3.tgz", "integrity": "sha512-8edWglTZ9Z5kfl31EuRjr4MDkTcEczHvrbo2EG1WVrX/a1B2sP3S9RCXjtSwrEnYRw29ldErlvDQNbTOxHNcmQ==", - "peer": true, + "dev": true, "requires": {} }, "read-pkg": { diff --git a/package.json b/package.json index ce5c11dc..04dd626d 100644 --- 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 index fa7af0e3..783d07f1 100644 --- 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(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( {