Merge branch 'plugin-system' of github.com:TypeCellOS/BlockNote into plugin-system

Author: matthewlipski

examples/03-ui-components/02-formatting-toolbar-buttons/src/BlueButton.tsx

@@ -2,10 +2,9 @@ import "@blocknote/mantine/style.css";
 import {
   useBlockNoteEditor,
   useComponentsContext,
-  useEditorContentOrSelectionChange,
+  useEditorState,
   useSelectedBlocks,
 } from "@blocknote/react";
-import { useState } from "react";
 
 // Custom Formatting Toolbar Button to toggle blue text & background color.
 export function BlueButton() {
@@ -14,18 +13,12 @@ export function BlueButton() {
   const Components = useComponentsContext()!;
 
   // Tracks whether the text & background are both blue.
-  const [isSelected, setIsSelected] = useState<boolean>(
-    editor.getActiveStyles().textColor === "blue" &&
-      editor.getActiveStyles().backgroundColor === "blue",
-  );
-
-  // Updates state on content or selection change.
-  useEditorContentOrSelectionChange(() => {
-    setIsSelected(
+  const isSelected = useEditorState({
+    editor,
+    selector: ({ editor }) =>
       editor.getActiveStyles().textColor === "blue" &&
-        editor.getActiveStyles().backgroundColor === "blue",
-    );
-  }, editor);
+      editor.getActiveStyles().backgroundColor === "blue",
+  });
 
   // Doesn't render unless a at least one block with inline content is
   // selected. You can use a similar pattern of returning `null` to

examples/03-ui-components/04-side-menu-buttons/src/RemoveBlockButton.tsx

@@ -1,5 +1,5 @@
 import {} from "@blocknote/core";
-import { SideMenu } from "@blocknote/core/extensions";
+import { SideMenuExtension } from "@blocknote/core/extensions";
 import {
   useBlockNoteEditor,
   useComponentsContext,
@@ -13,7 +13,7 @@ export function RemoveBlockButton() {
 
   const Components = useComponentsContext()!;
 
-  const sideMenu = useExtension(SideMenu);
+  const sideMenu = useExtension(SideMenuExtension);
 
   return (
     <Components.SideMenu.Button

examples/03-ui-components/05-side-menu-drag-handle-items/src/ResetBlockTypeItem.tsx

@@ -1,5 +1,5 @@
 import {} from "@blocknote/core";
-import { SideMenu } from "@blocknote/core/extensions";
+import { SideMenuExtension } from "@blocknote/core/extensions";
 import {
   useBlockNoteEditor,
   useComponentsContext,
@@ -12,7 +12,7 @@ export function ResetBlockTypeItem(props: { children: ReactNode }) {
 
   const Components = useComponentsContext()!;
 
-  const sideMenu = useExtension(SideMenu);
+  const sideMenu = useExtension(SideMenuExtension);
 
   return (
     <Components.Generic.Menu.Item

examples/03-ui-components/13-custom-ui/src/MUIFormattingToolbar.tsx

@@ -2,7 +2,7 @@ import { Block } from "@blocknote/core";
 import {
   blockTypeSelectItems,
   useBlockNoteEditor,
-  useEditorContentOrSelectionChange,
+  useEditorState,
 } from "@blocknote/react";
 import {
   Done,
@@ -108,17 +108,10 @@ function MUIToolbarSelect<Item extends { name: string; icon?: FC }>(props: {
 function MUIBlockTypeSelect() {
   const editor = useBlockNoteEditor<TextBlockSchema>();
 
-  // The block currently containing the text cursor.
-  const [block, setBlock] = useState<Block>(
-    editor.getTextCursorPosition().block,
-  );
-
-  // Updates the block currently containing the text cursor whenever the editor
-  // content or selection changes.
-  useEditorContentOrSelectionChange(
-    () => setBlock(editor.getTextCursorPosition().block),
+  const block = useEditorState({
     editor,
-  );
+    selector: ({ editor }) => editor.getTextCursorPosition().block,
+  });
 
   // Gets the default items for the select.
   const defaultBlockTypeSelectItems = useMemo(
@@ -154,8 +147,6 @@ function MUIBlockTypeSelect() {
         props: newSelectedItem.props,
       });
       editor.focus();
-
-      setBlock(editor.getTextCursorPosition().block);
     },
     [block, defaultBlockTypeSelectItems, editor],
   );
@@ -220,16 +211,10 @@ function MUIBasicTextStyleButton(props: {
   const editor = useBlockNoteEditor<TextBlockSchema>();
 
   // Whether the text style is currently active.
-  const [textStyleActive, setTextStyleActive] = useState(
-    !!editor.getActiveStyles()[props.textStyle],
-  );
-
-  // Updates whether the text style is active when the editor content or
-  // selection changes.
-  useEditorContentOrSelectionChange(
-    () => setTextStyleActive(props.textStyle in editor.getActiveStyles()),
+  const textStyleActive = useEditorState({
     editor,
-  );
+    selector: ({ editor }) => props.textStyle in editor.getActiveStyles(),
+  });
 
   // Tooltip for the button.
   const tooltip = useMemo(
@@ -273,24 +258,16 @@ function MUITextAlignButton(props: {
   const editor = useBlockNoteEditor<TextBlockSchema>();
 
   // The text alignment of the block currently containing the text cursor.
-  const [activeTextAlignment, setActiveTextAlignment] = useState(() => {
-    const props = editor.getTextCursorPosition().block.props;
-    if ("textAlignment" in props) {
-      return props.textAlignment;
-    }
-    return undefined;
-  });
-
-  // Updates the text alignment when the editor content or selection changes.
-  useEditorContentOrSelectionChange(() => {
-    setActiveTextAlignment(() => {
+  const activeTextAlignment = useEditorState({
+    editor,
+    selector: ({ editor }) => {
       const props = editor.getTextCursorPosition().block.props;
       if ("textAlignment" in props) {
         return props.textAlignment;
       }
       return undefined;
-    });
-  }, editor);
+    },
+  });
 
   // Tooltip for the button.
   const tooltip = useMemo(
@@ -346,21 +323,15 @@ function MUIColorStyleButton() {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
   // The active text and background colors.
-  const [activeTextColor, setActiveTextColor] = useState(
-    () => editor.getActiveStyles().textColor || "default",
-  );
-  const [activeBackgroundColor, setActiveBackgroundColor] = useState(
-    () => editor.getActiveStyles().backgroundColor || "default",
-  );
-
-  // Updates the active text and background colors when the editor content or
-  // selection changes.
-  useEditorContentOrSelectionChange(() => {
-    const activeStyles = editor.getActiveStyles();
-
-    setActiveTextColor(activeStyles.textColor || "default");
-    setActiveBackgroundColor(activeStyles.backgroundColor || "default");
-  }, editor);
+  const activeTextColor = useEditorState({
+    editor,
+    selector: ({ editor }) => editor.getActiveStyles().textColor || "default",
+  });
+  const activeBackgroundColor = useEditorState({
+    editor,
+    selector: ({ editor }) =>
+      editor.getActiveStyles().backgroundColor || "default",
+  });
 
   // Handles opening and closing the color menu.
   const onClick = useCallback(

examples/03-ui-components/13-custom-ui/src/MUISideMenu.tsx

@@ -1,5 +1,5 @@
 import {} from "@blocknote/core";
-import { SideMenu } from "@blocknote/core/extensions";
+import { SideMenuExtension } from "@blocknote/core/extensions";
 import {
   SideMenuProps,
   useBlockNoteEditor,
@@ -25,7 +25,7 @@ function MUIRemoveBlockItem(
   props: SideMenuProps & { closeDragHandleMenu: () => void },
 ) {
   const editor = useBlockNoteEditor();
-  const sideMenu = useExtension(SideMenu, { editor });
+  const sideMenu = useExtension(SideMenuExtension, { editor });
   // Deletes the block next to the side menu.
   const onClick = useCallback(() => {
     sideMenu.unfreezeMenu();
@@ -82,7 +82,7 @@ function MUIDragHandleButton(props: SideMenuProps) {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
   const editor = useBlockNoteEditor();
-  const sideMenu = useExtension(SideMenu, { editor });
+  const sideMenu = useExtension(SideMenuExtension, { editor });
   // Handles opening and closing the drag handle menu.
   const onClick = useCallback(
     (event: MouseEvent<HTMLButtonElement>) => {
@@ -130,7 +130,7 @@ function MUISideMenu(props: SideMenuProps & { children: ReactNode }) {
   // Since the side menu is positioned by the top-left corner of a block, we
   // manually set its height based on the hovered block so that it's vertically
   // centered.
-  const sideMenuHeight = useExtensionState(SideMenu, {
+  const sideMenuHeight = useExtensionState(SideMenuExtension, {
     selector: (state) => {
       // TODO this feels like a hack
       if (state && state.block.type === "heading") {

examples/07-collaboration/05-comments/src/App.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import {
+  CommentsExtension,
   DefaultThreadStoreAuth,
   YjsThreadStore,
 } from "@blocknote/core/comments";
@@ -74,10 +75,7 @@ function Document() {
   // setup the editor with comments and collaboration
   const editor = useCreateBlockNote(
     {
-      resolveUsers,
-      comments: {
-        threadStore,
-      },
+      extensions: [CommentsExtension({ threadStore, resolveUsers })],
       collaboration: {
         provider,
         fragment: doc.getXmlFragment("blocknote"),

examples/07-collaboration/06-comments-with-sidebar/src/App.tsx

@@ -3,6 +3,7 @@
 import {
   DefaultThreadStoreAuth,
   YjsThreadStore,
+  CommentsExtension,
 } from "@blocknote/core/comments";
 import { BlockNoteView } from "@blocknote/mantine";
 import "@blocknote/mantine/style.css";
@@ -77,15 +78,12 @@ export default function App() {
   // setup the editor with comments and collaboration
   const editor = useCreateBlockNote(
     {
-      resolveUsers,
-      comments: {
-        threadStore,
-      },
       collaboration: {
         provider,
         fragment: doc.getXmlFragment("blocknote"),
         user: { color: getRandomColor(), name: activeUser.username },
       },
+      extensions: [CommentsExtension({ threadStore, resolveUsers })],
     },
     [activeUser, threadStore],
   );

examples/07-collaboration/08-forking/src/App.tsx

@@ -1,6 +1,6 @@
 import "@blocknote/core/fonts/inter.css";
 import {} from "@blocknote/core";
-import { ForkYDoc } from "@blocknote/core/extensions";
+import { ForkYDocExtension } from "@blocknote/core/extensions";
 import {
   useCreateBlockNote,
   useExtension,
@@ -34,8 +34,8 @@ export default function App() {
       },
     },
   });
-  const forkYDocPlugin = useExtension(ForkYDoc, { editor });
-  const isForked = useExtensionState(ForkYDoc, {
+  const forkYDocPlugin = useExtension(ForkYDocExtension, { editor });
+  const isForked = useExtensionState(ForkYDocExtension, {
     editor,
     selector: (state) => state.isForked,
   });

examples/09-ai/01-minimal/.bnexample.json

@@ -6,7 +6,6 @@
   "dependencies": {
     "@blocknote/xl-ai": "latest",
     "@mantine/core": "^8.3.4",
-    "ai": "^5.0.45",
-    "zustand": "^5.0.3"
+    "ai": "^5.0.45"
   }
 }

examples/09-ai/02-playground/.bnexample.json

@@ -6,7 +6,6 @@
   "dependencies": {
     "@blocknote/xl-ai": "latest",
     "@mantine/core": "^8.3.4",
-    "ai": "^5.0.45",
-    "zustand": "^5.0.3"
+    "ai": "^5.0.45"
   }
 }