Doist · rfgamaral · Feb 23, 2023 · Feb 23, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -123,7 +123,6 @@
         "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",

diff --git a/stories/documentation/tips-and-tricks/performance.md b/stories/documentation/tips-and-tricks/performance.md
@@ -35,5 +35,3 @@ function PlainTextEditorContainer({ content }) {
     return <TypistEditor content={content} extensions={extensions} />
 }
 ```
-
-The same is true for event handler properties, such as the `onUpdate`, `onTransaction`, and all others. For these, you may consider wrapping them with `useEvent` from the third-party [`react-use-event-hook`](https://github.com/scottrippey/react-use-event-hook) package, which keeps the callback reference more stable than `useCallback` while invoking the callback with always up-to-date properties and state. Please refer to [Usage → Helpers](/?path=/docs/documentation-usage-helpers--page) for a `useEvent` example.
diff --git a/stories/documentation/usage/helpers.md b/stories/documentation/usage/helpers.md
@@ -7,8 +7,7 @@ Passing down a `ref` to the `TypistEditor` component gives us access to some hel
 -   `getAllNodesAttributesByType(nodeType)`: Returns the attributes of a given node type for all the nodes in the editor document.
 
 ```tsx
-import { useRef } from 'react'
-import { useEvent } from 'react-use-event-hook'
+import { useCallback, useRef } from 'react'
 
 import { TypistEditor, RichTextKit } from '@doist/typist'
 
@@ -17,9 +16,9 @@ import type { TypistEditorRef } from '@doist/typist'
 function TypistEditorContainer({ content }) {
     const typistEditorRef = useRef<TypistEditorRef>(null)
 
-    const handleUpdate = useEvent(function handleUpdate() {
+    const handleUpdate = useCallback(function handleUpdate() {
         console.log(typistEditorRef.current?.getMarkdown() || '')
-    })
+    }, [])
 
     return (
         <TypistEditor
@@ -35,7 +34,7 @@ function TypistEditorContainer({ content }) {
 Although the example above uses `onUpdate`, this specific event provides its own `getMarkdown` function for a more convenient access to the current editor Markdown document:
 
 ```tsx
-const handleUpdate = useEvent(function handleUpdate({ getMarkdown }: UpdateProps) {
+const handleUpdate = useCallback(function handleUpdate({ getMarkdown }: UpdateProps) {
     console.log(getMarkdown())
-})
+}, [])
 ```
diff --git a/stories/typist-editor/decorators/typist-editor-decorator/typist-editor-decorator.tsx b/stories/typist-editor/decorators/typist-editor-decorator/typist-editor-decorator.tsx
@@ -1,5 +1,4 @@
-import { useEffect, useState } from 'react'
-import { useEvent } from 'react-use-event-hook'
+import { useCallback, useEffect, useState } from 'react'
 
 import { Box, Column, Columns } from '@doist/reactist'
 
@@ -39,9 +38,9 @@ function TypistEditorDecorator({
 
     const shouldRenderToolbar = typistEditor && withToolbar
 
-    const handleUpdate = useEvent((props: UpdateProps) => {
+    const handleUpdate = useCallback((props: UpdateProps) => {
         setMarkdownOutput(props.getMarkdown())
-    })
+    }, [])
 
     useEffect(
         function updateMarkdownOutputOnContentControlChange() {

diff --git a/stories/typist-editor/decorators/typist-editor-decorator/typist-editor-toolbar.tsx b/stories/typist-editor/decorators/typist-editor-decorator/typist-editor-toolbar.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useCallback, useEffect } from 'react'
 import {
     RiArrowGoBackLine,
     RiArrowGoForwardLine,
@@ -25,7 +25,6 @@ import {
     RiStrikethrough,
     RiTextWrap,
 } from 'react-icons/ri'
-import { useEvent } from 'react-use-event-hook'
 
 import { Box, Button } from '@doist/reactist'
 
@@ -61,7 +60,7 @@ function TypistEditorToolbar({ editor }: TypistEditorToolbarProps) {
         [editor, forceRerender],
     )
 
-    const handleLinkButtonClick = useEvent(() => {
+    const handleLinkButtonClick = useCallback(() => {
         const previousUrl = String(editor.getAttributes('link').href || '')
         const newUrl = window.prompt('Link URL', previousUrl)
 
@@ -71,9 +70,9 @@ function TypistEditorToolbar({ editor }: TypistEditorToolbarProps) {
         }
 
         editor.chain().focus().extendMarkRange('link').setLink({ href: newUrl }).run()
-    })
+    }, [editor])
 
-    const handleImageButtonClick = useEvent(() => {
+    const handleImageButtonClick = useCallback(() => {
         const newUrl = window.prompt('Image URL')
 
         if (newUrl === null) {
@@ -82,7 +81,7 @@ function TypistEditorToolbar({ editor }: TypistEditorToolbarProps) {
         }
 
         editor.chain().focus().insertImage({ src: newUrl }).run()
-    })
+    }, [editor])
 
     return (
         <Box

diff --git a/stories/typist-editor/extensions/suggestions/base-suggestion-dropdown.tsx b/stories/typist-editor/extensions/suggestions/base-suggestion-dropdown.tsx
@@ -1,5 +1,4 @@
-import { useEffect, useImperativeHandle, useRef, useState } from 'react'
-import { useEvent } from 'react-use-event-hook'
+import { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react'
 
 import { Box, Inline, Text } from '@doist/reactist'
 
@@ -32,13 +31,16 @@ function BaseSuggestionDropdown<TItem extends object>({
     const areSuggestionsLoading = items.length === 1 && 'isLoading' in items[0]
     const areSuggestionsEmpty = items.length === 0
 
-    const handleItemSelect = useEvent((index: number) => {
-        const item = items[index]
+    const handleItemSelect = useCallback(
+        (index: number) => {
+            const item = items[index]
 
-        if (item) {
-            onItemSelect(item)
-        }
-    })
+            if (item) {
+                onItemSelect(item)
+            }
+        },
+        [items, onItemSelect],
+    )
 
     useEffect(
         function scrollSelectedItemIntoView() {

diff --git a/stories/typist-editor/plain-text-functions.stories.tsx b/stories/typist-editor/plain-text-functions.stories.tsx
@@ -1,5 +1,4 @@
-import { useRef } from 'react'
-import { useEvent } from 'react-use-event-hook'
+import { useCallback, useRef } from 'react'
 
 import { Button } from '@doist/reactist'
 
@@ -29,18 +28,18 @@ export const Commands: ComponentStoryObj<typeof TypistEditor> = {
         (Story, context) => {
             const typistEditorRef = useRef<TypistEditorRef>(null)
 
-            const handleExtendWordRangeClick = useEvent(() => {
+            const handleExtendWordRangeClick = useCallback(() => {
                 typistEditorRef.current?.getEditor().chain().focus().extendWordRange().run()
-            })
+            }, [])
 
-            const handleInsertMarkdownContentClick = useEvent(() => {
+            const handleInsertMarkdownContentClick = useCallback(() => {
                 typistEditorRef.current
                     ?.getEditor()
                     .chain()
                     .focus()
                     .insertMarkdownContent(MARKDOWN_PLACEHOLDER)
                     .run()
-            })
+            }, [])
 
             return (
                 <TypistEditorDecorator
@@ -74,19 +73,19 @@ export const Helpers: ComponentStoryObj<typeof TypistEditor> = {
         (Story, context) => {
             const typistEditorRef = useRef<TypistEditorRef>(null)
 
-            const handleGetEditorClick = useEvent(() => {
+            const handleGetEditorClick = useCallback(() => {
                 action('getEditor')(typistEditorRef.current?.getEditor())
-            })
+            }, [])
 
-            const handleGetMarkdownClick = useEvent(() => {
+            const handleGetMarkdownClick = useCallback(() => {
                 action('getMarkdown')(typistEditorRef.current?.getMarkdown() || '<empty>')
-            })
+            }, [])
 
-            const handleGetAllNodesAttributesByTypeClick = useEvent(() => {
+            const handleGetAllNodesAttributesByTypeClick = useCallback(() => {
                 action('getAllNodesAttributesByType')(
                     typistEditorRef.current?.getAllNodesAttributesByType('mentionSuggestion'),
                 )
-            })
+            }, [])
 
             return (
                 <TypistEditorDecorator

diff --git a/stories/typist-editor/plain-text.stories.tsx b/stories/typist-editor/plain-text.stories.tsx
@@ -1,4 +1,4 @@
-import { useEvent } from 'react-use-event-hook'
+import { useCallback } from 'react'
 
 import { action } from '@storybook/addon-actions'
 
@@ -57,15 +57,15 @@ export const Singleline: ComponentStoryObj<typeof TypistEditor> = {
     },
     decorators: [
         (Story, context) => {
-            const handleKeyDown = useEvent((event: KeyboardEvent, view: EditorView) => {
+            const handleKeyDown = useCallback((event: KeyboardEvent, view: EditorView) => {
                 if (event.key === 'Enter') {
                     action('onEnterPressed')({
                         event,
                         view,
                     })
                     return true
                 }
-            })
+            }, [])
 
             return (
                 <TypistEditorDecorator

diff --git a/stories/typist-editor/rich-text-functions.stories.tsx b/stories/typist-editor/rich-text-functions.stories.tsx
@@ -1,5 +1,4 @@
-import { useRef } from 'react'
-import { useEvent } from 'react-use-event-hook'
+import { useCallback, useRef } from 'react'
 
 import { Button } from '@doist/reactist'
 
@@ -29,18 +28,18 @@ export const Commands: ComponentStoryObj<typeof TypistEditor> = {
         (Story, context) => {
             const typistEditorRef = useRef<TypistEditorRef>(null)
 
-            const handleExtendWordRangeClick = useEvent(() => {
+            const handleExtendWordRangeClick = useCallback(() => {
                 typistEditorRef.current?.getEditor().chain().focus().extendWordRange().run()
-            })
+            }, [])
 
-            const handleInsertMarkdownContentClick = useEvent(() => {
+            const handleInsertMarkdownContentClick = useCallback(() => {
                 typistEditorRef.current
                     ?.getEditor()
                     .chain()
                     .focus()
                     .insertMarkdownContent(MARKDOWN_PLACEHOLDER)
                     .run()
-            })
+            }, [])
 
             return (
                 <TypistEditorDecorator
@@ -74,19 +73,19 @@ export const Helpers: ComponentStoryObj<typeof TypistEditor> = {
         (Story, context) => {
             const typistEditorRef = useRef<TypistEditorRef>(null)
 
-            const handleGetEditorClick = useEvent(() => {
+            const handleGetEditorClick = useCallback(() => {
                 action('getEditor')(typistEditorRef.current?.getEditor())
-            })
+            }, [])
 
-            const handleGetMarkdownClick = useEvent(() => {
+            const handleGetMarkdownClick = useCallback(() => {
                 action('getMarkdown')(typistEditorRef.current?.getMarkdown() || '<empty>')
-            })
+            }, [])
 
-            const handleGetAllNodesAttributesByTypeClick = useEvent(() => {
+            const handleGetAllNodesAttributesByTypeClick = useCallback(() => {
                 action('getAllNodesAttributesByType')(
                     typistEditorRef.current?.getAllNodesAttributesByType('mentionSuggestion'),
                 )
-            })
+            }, [])
 
             return (
                 <TypistEditorDecorator

diff --git a/stories/typist-editor/rich-text.stories.tsx b/stories/typist-editor/rich-text.stories.tsx
@@ -1,5 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react'
-import { useEvent } from 'react-use-event-hook'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import { action } from '@storybook/addon-actions'
 import { clamp, random } from 'lodash-es'
@@ -87,7 +86,7 @@ export const Default: ComponentStoryObj<typeof TypistEditor> = {
                 [imageAttachmentsProgress],
             )
 
-            const handleImageFilePaste = useEvent((file: File) => {
+            const handleImageFilePaste = useCallback((file: File) => {
                 const attachmentId = Math.random().toString(16).slice(2, 10)
 
                 setImageAttachmentsProgress((prevState) => ({ ...prevState, [attachmentId]: 0 }))
@@ -107,7 +106,7 @@ export const Default: ComponentStoryObj<typeof TypistEditor> = {
                 }
 
                 fileReader.readAsDataURL(file)
-            })
+            }, [])
 
             const extensions = useMemo(
                 function configureExtensions() {
@@ -162,15 +161,15 @@ export const Singleline: ComponentStoryObj<typeof TypistEditor> = {
     },
     decorators: [
         (Story, context) => {
-            const handleKeyDown = useEvent((event: KeyboardEvent, view: EditorView) => {
+            const handleKeyDown = useCallback((event: KeyboardEvent, view: EditorView) => {
                 if (event.key === 'Enter') {
                     action('onEnterPressed')({
                         event,
                         view,
                     })
                     return true
                 }
-            })
+            }, [])
 
             return (
                 <TypistEditorDecorator