chore: remove unused dependencies and bundle react-icons

nperez0111 · nperez0111 · commit aabbd3a334c2 · 2026-05-27T18:59:37.000+02:00
@blocknote/core:
- Remove unused @tiptap/extension-horizontal-rule (custom divider block)
- Remove unused @tiptap/extension-paragraph (custom paragraph block)
- Remove lib0; replace lib0/random uuidv4 with crypto.randomUUID()
- Update YjsThreadStore test mock accordingly

@blocknote/react:
- Remove unused lodash.merge and @types/lodash.merge
- Remove unused @floating-ui/utils (transitive dep only)
- Move @types/use-sync-external-store to optionalDependencies
- Bundle react-icons into dist output (tree-shaken) instead of
  externalizing it, so consumers no longer need to install it
- Define local IconType to avoid leaking react-icons in .d.ts output
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -97,17 +97,14 @@
     "@tiptap/core": "^3.13.0",
     "@tiptap/extension-bold": "^3.13.0",
     "@tiptap/extension-code": "^3.13.0",
-    "@tiptap/extension-horizontal-rule": "^3.13.0",
     "@tiptap/extension-italic": "^3.13.0",
-    "@tiptap/extension-paragraph": "^3.13.0",
     "@tiptap/extension-strike": "^3.13.0",
     "@tiptap/extension-text": "^3.13.0",
     "@tiptap/extension-underline": "^3.13.0",
     "@tiptap/extensions": "^3.13.0",
     "@tiptap/pm": "^3.13.0",
     "emoji-mart": "^5.6.0",
     "fast-deep-equal": "^3.1.3",
-    "lib0": "^0.2.99",
     "prosemirror-highlight": "^0.15.1",
     "prosemirror-model": "^1.25.4",
     "prosemirror-state": "^1.4.4",
diff --git a/packages/core/src/comments/threadstore/yjs/YjsThreadStore.test.ts b/packages/core/src/comments/threadstore/yjs/YjsThreadStore.test.ts
@@ -4,12 +4,12 @@ import { CommentBody } from "../../types.js";
 import { DefaultThreadStoreAuth } from "../DefaultThreadStoreAuth.js";
 import { YjsThreadStore } from "./YjsThreadStore.js";
 
-// Mock UUID to generate sequential IDs
+// Mock crypto.randomUUID to generate sequential IDs
 let mockUuidCounter = 0;
-vi.mock("lib0/random", async (importOriginal) => ({
-  ...(await importOriginal<typeof import("lib0/random")>()),
-  uuidv4: () => `mocked-uuid-${++mockUuidCounter}`,
-}));
+const originalRandomUUID = crypto.randomUUID.bind(crypto);
+vi.spyOn(crypto, "randomUUID").mockImplementation(
+  () => `mocked-uuid-${++mockUuidCounter}` as ReturnType<typeof originalRandomUUID>,
+);
 
 describe("YjsThreadStore", () => {
   let store: YjsThreadStore;
diff --git a/packages/core/src/comments/threadstore/yjs/YjsThreadStore.ts b/packages/core/src/comments/threadstore/yjs/YjsThreadStore.ts
@@ -1,4 +1,4 @@
-import { uuidv4 } from "lib0/random";
+
 import * as Y from "yjs";
 import { CommentBody, CommentData, ThreadData } from "../../types.js";
 import { ThreadStoreAuth } from "../ThreadStoreAuth.js";
@@ -57,7 +57,7 @@ export class YjsThreadStore extends YjsThreadStoreBase {
 
       const comment: CommentData = {
         type: "comment",
-        id: uuidv4(),
+        id: crypto.randomUUID(),
         userId: this.userId,
         createdAt: date,
         updatedAt: date,
@@ -68,7 +68,7 @@ export class YjsThreadStore extends YjsThreadStoreBase {
 
       const thread: ThreadData = {
         type: "thread",
-        id: uuidv4(),
+        id: crypto.randomUUID(),
         createdAt: date,
         updatedAt: date,
         comments: [comment],
@@ -105,7 +105,7 @@ export class YjsThreadStore extends YjsThreadStoreBase {
       const date = new Date();
       const comment: CommentData = {
         type: "comment",
-        id: uuidv4(),
+        id: crypto.randomUUID(),
         userId: this.userId,
         createdAt: date,
         updatedAt: date,
diff --git a/packages/core/src/extensions/Placeholder/Placeholder.ts b/packages/core/src/extensions/Placeholder/Placeholder.ts
@@ -1,6 +1,6 @@
 import { Plugin, PluginKey } from "prosemirror-state";
 import { Decoration, DecorationSet } from "prosemirror-view";
-import { uuidv4 } from "lib0/random";
+
 import {
   createExtension,
   ExtensionOptions,
@@ -23,7 +23,7 @@ export const PlaceholderExtension = createExtension(
         new Plugin({
           key: PLUGIN_KEY,
           view: (view) => {
-            const uniqueEditorSelector = `placeholder-selector-${uuidv4()}`;
+            const uniqueEditorSelector = `placeholder-selector-${crypto.randomUUID()}`;
             view.dom.classList.add(uniqueEditorSelector);
             const styleEl = document.createElement("style");
 
diff --git a/packages/core/src/extensions/tiptap-extensions/UniqueID/UniqueID.ts b/packages/core/src/extensions/tiptap-extensions/UniqueID/UniqueID.ts
@@ -6,7 +6,7 @@ import {
 } from "@tiptap/core";
 import { Fragment, Slice } from "prosemirror-model";
 import { Plugin, PluginKey } from "prosemirror-state";
-import { uuidv4 } from "lib0/random";
+
 
 /**
  * Code from Tiptap UniqueID extension (https://tiptap.dev/api/extensions/unique-id)
@@ -65,7 +65,7 @@ const UniqueID = Extension.create({
           return testOptions.mockID.toString() as string;
         }
 
-        return uuidv4();
+        return crypto.randomUUID();
       },
       filterTransaction: null,
     };
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -61,22 +61,18 @@
     "@blocknote/core": "0.51.3",
     "@emoji-mart/data": "^1.2.1",
     "@floating-ui/react": "^0.27.18",
-    "@floating-ui/utils": "^0.2.10",
     "@tanstack/react-store": "0.7.7",
     "@tiptap/core": "^3.13.0",
     "@tiptap/pm": "^3.13.0",
     "@tiptap/react": "^3.13.0",
-    "@types/use-sync-external-store": "1.5.0",
     "emoji-mart": "^5.6.0",
     "fast-deep-equal": "^3.1.3",
-    "lodash.merge": "^4.6.2",
-    "react-icons": "^5.5.0",
     "use-sync-external-store": "1.6.0"
   },
   "devDependencies": {
     "@types/lodash.foreach": "^4.5.9",
     "@types/lodash.groupby": "^4.6.9",
-    "@types/lodash.merge": "^4.6.9",
+    "react-icons": "^5.5.0",
     "@types/react": "^19.2.3",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.1",
@@ -91,6 +87,9 @@
     "vite-plugin-externalize-deps": "^0.10.0",
     "vitest": "^4.1.2"
   },
+  "optionalDependencies": {
+    "@types/use-sync-external-store": "1.5.0"
+  },
   "peerDependencies": {
     "react": "^18.0 || ^19.0 || >= 19.0.0-rc",
     "react-dom": "^18.0 || ^19.0 || >= 19.0.0-rc"
diff --git a/packages/react/src/components/FormattingToolbar/DefaultButtons/BasicTextStyleButton.tsx b/packages/react/src/components/FormattingToolbar/DefaultButtons/BasicTextStyleButton.tsx
@@ -6,7 +6,7 @@ import {
   formatKeyboardShortcut,
 } from "@blocknote/core";
 import { useCallback } from "react";
-import { IconType } from "react-icons";
+import type { IconType } from "../../../icons.js";
 import {
   RiBold,
   RiCodeFill,
diff --git a/packages/react/src/components/FormattingToolbar/DefaultButtons/TextAlignButton.tsx b/packages/react/src/components/FormattingToolbar/DefaultButtons/TextAlignButton.tsx
@@ -11,7 +11,7 @@ import {
 } from "@blocknote/core";
 import { TableHandlesExtension } from "@blocknote/core/extensions";
 import { useCallback } from "react";
-import { IconType } from "react-icons";
+import type { IconType } from "../../../icons.js";
 import {
   RiAlignCenter,
   RiAlignJustify,
diff --git a/packages/react/src/components/FormattingToolbar/DefaultSelects/BlockTypeSelect.tsx b/packages/react/src/components/FormattingToolbar/DefaultSelects/BlockTypeSelect.tsx
@@ -6,7 +6,7 @@ import {
   StyleSchema,
 } from "@blocknote/core";
 import { useMemo } from "react";
-import type { IconType } from "react-icons";
+import type { IconType } from "../../../icons.js";
 import {
   RiH1,
   RiH2,
diff --git a/packages/react/src/components/SuggestionMenu/getDefaultReactSlashMenuItems.tsx b/packages/react/src/components/SuggestionMenu/getDefaultReactSlashMenuItems.tsx
@@ -28,7 +28,7 @@ import {
   RiVolumeUpFill,
 } from "react-icons/ri";
 
-import { IconType } from "react-icons";
+import type { IconType } from "../../icons.js";
 import { DefaultReactSuggestionItem } from "./types.js";
 
 const icons: Record<string, IconType> = {
diff --git a/packages/react/src/icons.ts b/packages/react/src/icons.ts
@@ -0,0 +1,12 @@
+/**
+ * Compatible replacement for `IconType` from react-icons.
+ * Defined locally so consumers don't need react-icons installed for
+ * type-checking.
+ */
+export type IconType = React.ComponentType<
+  React.SVGAttributes<SVGElement> & {
+    size?: string | number;
+    color?: string;
+    title?: string;
+  }
+>;
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
@@ -133,6 +133,8 @@ export * from "./schema/ReactBlockSpec.js";
 export * from "./schema/ReactInlineContentSpec.js";
 export * from "./schema/ReactStyleSpec.js";
 
+export * from "./icons.js";
+
 export * from "./util/elementOverflow.js";
 export * from "./util/mergeRefs.js";
 
diff --git a/packages/react/vite.config.ts b/packages/react/vite.config.ts
@@ -44,6 +44,16 @@ export default defineConfig((conf) => ({
       // make sure to externalize deps that shouldn't be bundled
       // into your library
       external: (source) => {
+        // Bundle react-icons into the output (tree-shaken) so consumers
+        // don't need to install it as a peer/runtime dependency.
+        const bundledDeps = ["react-icons"];
+        if (
+          bundledDeps.some(
+            (dep) => source === dep || source.startsWith(dep + "/")
+          )
+        ) {
+          return false;
+        }
         if (
           Object.keys({
             ...pkg.dependencies,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
