fix: Remove @react-hookz/web peer dependency (#861)

package.json

@@ -143,7 +143,6 @@
         "vitest": "2.0.4"
     },
     "peerDependencies": {
-        "@react-hookz/web": "^14.2.3 || >=15.x",
         "emoji-regex": "^10.2.1",
         "hast-util-is-element": "^3.0.0",
         "linkifyjs": "^4.1.1",

src/hooks/use-editor.ts

@@ -1,10 +1,29 @@
-import { DependencyList, useEffect, useState } from 'react'
+import { DependencyList, useCallback, useEffect, useState } from 'react'
 
-import { useRerender } from '@react-hookz/web'
 import { Editor } from '@tiptap/react'
 
 import type { EditorOptions } from '@tiptap/core'
 
+function stateChanger(state: number) {
+    return (state + 1) % Number.MAX_SAFE_INTEGER
+}
+
+/**
+ * This is a copy of the `useRerender` hook from `@react-hookz/web`, which is a utility hook that
+ * returns a function that can be called to force a re-render of the component.
+ *
+ * Turns out we don't have the need to use any of the other hooks from `@react-hookz/web`, which is
+ * a peer dependency that often introduces breaking changes, causing upgrade issues across our
+ * projects.
+ */
+function useRerender(): () => void {
+    const [, setState] = useState(0)
+
+    return useCallback(() => {
+        setState(stateChanger)
+    }, [])
+}
+
 /**
  * This is a fork of the official `useEditor` hook with one key difference, which is to prevent a
  * `null` Editor object instance from being returned on the first render.

stories/typist-editor/decorators/typist-editor-decorator/typist-editor-toolbar.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from 'react'
+import { useCallback, useEffect, useReducer } from 'react'
 import {
     RiArrowGoBackLine,
     RiArrowGoForwardLine,
@@ -28,8 +28,6 @@ import {
 
 import { Box, Button } from '@doist/reactist'
 
-import { useRerender } from '@react-hookz/web'
-
 import styles from './typist-editor-toolbar.module.css'
 
 import type { CoreEditor } from '../../../../src'
@@ -41,7 +39,7 @@ type TypistEditorToolbarProps = {
 function TypistEditorToolbar({ editor }: TypistEditorToolbarProps) {
     const isCursorOverLink = Boolean(editor.getAttributes('link').href)
 
-    const forceRerender = useRerender()
+    const [, forceRerender] = useReducer((x: number) => x + 1, 0)
 
     useEffect(
         function initializeEventListeners() {