Implemented PR feedback

Author: matthewlipski

packages/core/src/blocks/HeadingBlockContent/HeadingBlockContent.ts

@@ -159,7 +159,7 @@ const HeadingBlockContent = createStronglyTypedTiptapNode({
 
   addNodeView() {
     return ({ node, HTMLAttributes, getPos }) => {
-      const renderedElement = createDefaultBlockDOMOutputSpec(
+      const { dom, contentDOM } = createDefaultBlockDOMOutputSpec(
         this.name,
         `h${node.attrs.level}`,
         {
@@ -168,22 +168,21 @@ const HeadingBlockContent = createStronglyTypedTiptapNode({
         },
         this.options.domAttributes?.inlineContent || {},
       );
-
-      const contentDOM = renderedElement.contentDOM;
-      const contentDOMParentElement = contentDOM.parentElement!;
+      dom.removeChild(contentDOM);
 
       const editor = this.options.editor;
       const block = getBlockFromPos(getPos, editor, this.editor, this.name);
 
-      const toggleWrapper = createToggleWrapper(block as any, editor, {
-        dom: contentDOM,
+      const toggleWrapper = createToggleWrapper(
+        block as any,
+        editor,
         contentDOM,
-      });
-      contentDOMParentElement.appendChild(toggleWrapper.dom);
+      );
+      dom.appendChild(toggleWrapper.dom);
 
       return {
-        dom: renderedElement.dom,
-        contentDOM: toggleWrapper.contentDOM,
+        dom,
+        contentDOM,
         ignoreMutation: toggleWrapper.ignoreMutation,
         destroy: toggleWrapper.destroy,
       };

packages/core/src/blocks/ListItemBlockContent/ToggleListItemBlockContent/ToggleListItemBlockContent.ts

@@ -68,7 +68,7 @@ const ToggleListItemBlockContent = createStronglyTypedTiptapNode({
 
   addNodeView() {
     return ({ HTMLAttributes, getPos }) => {
-      const renderedElement = createDefaultBlockDOMOutputSpec(
+      const { dom, contentDOM } = createDefaultBlockDOMOutputSpec(
         this.name,
         "p",
         {
@@ -78,21 +78,19 @@ const ToggleListItemBlockContent = createStronglyTypedTiptapNode({
         this.options.domAttributes?.inlineContent || {},
       );
 
-      const contentDOM = renderedElement.contentDOM;
-      const contentDOMParentElement = contentDOM.parentElement!;
-
       const editor = this.options.editor;
       const block = getBlockFromPos(getPos, editor, this.editor, this.name);
 
-      const toggleWrapper = createToggleWrapper(block as any, editor, {
-        dom: contentDOM,
+      const toggleWrapper = createToggleWrapper(
+        block as any,
+        editor,
         contentDOM,
-      });
-      contentDOMParentElement.appendChild(toggleWrapper.dom);
+      );
+      dom.appendChild(toggleWrapper.dom);
 
       return {
-        dom: renderedElement.dom,
-        contentDOM: toggleWrapper.contentDOM,
+        dom,
+        contentDOM,
         ignoreMutation: toggleWrapper.ignoreMutation,
         destroy: toggleWrapper.destroy,
       };

packages/core/src/blocks/ToggleWrapper/createToggleWrapper.ts

@@ -3,37 +3,34 @@ import { ViewMutationRecord } from "@tiptap/pm/view";
 import { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
 import { Block } from "../defaultBlocks.js";
 
+type ToggledState = {
+  set: (block: Block<any, any, any>, isToggled: boolean) => void;
+  get: (block: Block<any, any, any>) => boolean;
+};
+
+export const defaultToggledState: ToggledState = {
+  set: (block, isToggled: boolean) =>
+    window.localStorage.setItem(
+      `toggle-${block.id}`,
+      isToggled ? "true" : "false",
+    ),
+  get: (block) => window.localStorage.getItem(`toggle-${block.id}`) === "true",
+};
+
 export const createToggleWrapper = (
   block: Block<any, any, any>,
   editor: BlockNoteEditor<any, any, any>,
-  renderedElement: {
-    dom: HTMLElement;
-    contentDOM?: HTMLElement;
-    ignoreMutation?: (mutation: ViewMutationRecord) => boolean;
-    destroy?: () => void;
-  },
-  toggledState?: {
-    set: (block: Block<any, any, any>, isToggled: boolean) => void;
-    get: (block: Block<any, any, any>) => boolean;
-  },
+  renderedElement: HTMLElement,
+  toggledState: ToggledState = defaultToggledState,
 ): {
   dom: HTMLElement;
   contentDOM?: HTMLElement;
   ignoreMutation?: (mutation: ViewMutationRecord) => boolean;
   destroy?: () => void;
 } => {
   if ("isToggleable" in block.props && !block.props.isToggleable) {
-    return renderedElement;
-  }
-
-  if (!toggledState) {
-    toggledState = {
-      set: (block, isToggled: boolean) => {
-        window.localStorage.setItem(`toggle-${block.id}`, String(isToggled));
-      },
-      get: (block) => {
-        return window.localStorage.getItem(`toggle-${block.id}`) === "true";
-      },
+    return {
+      dom: renderedElement,
     };
   }
 
@@ -74,7 +71,7 @@ export const createToggleWrapper = (
   toggleButton.addEventListener("click", toggleButtonOnClick);
 
   toggleWrapper.appendChild(toggleButton);
-  toggleWrapper.appendChild(renderedElement.dom);
+  toggleWrapper.appendChild(renderedElement);
 
   const toggleAddBlockButton = document.createElement("button");
   toggleAddBlockButton.className = "bn-toggle-add-block-button";
@@ -150,13 +147,8 @@ export const createToggleWrapper = (
 
   return {
     dom,
-    contentDOM: renderedElement.contentDOM,
     // Prevents re-renders when the toggle button is clicked.
     ignoreMutation: (mutation) => {
-      if (renderedElement.ignoreMutation) {
-        return renderedElement.ignoreMutation(mutation);
-      }
-
       if (
         mutation instanceof MutationRecord &&
         // We want to prevent re-renders when the view changes, so we ignore
@@ -185,7 +177,6 @@ export const createToggleWrapper = (
         toggleAddBlockButtonOnClick,
       );
       onEditorChange?.();
-      renderedElement.destroy?.();
     },
   };
 };

packages/core/src/editor/Block.css

@@ -177,7 +177,8 @@ NESTED BLOCKS
 .bn-block-content[data-content-type="numberedListItem"]::before {
   display: flex;
   justify-content: center;
-  width: 25px;
+  min-width: 24px;
+  padding-right: 4px;
 }
 
 [data-content-type="numberedListItem"] {
@@ -208,7 +209,8 @@ NESTED BLOCKS
 .bn-block-content[data-content-type="bulletListItem"]::before {
   display: flex;
   justify-content: center;
-  width: 25px;
+  min-width: 24px;
+  padding-right: 4px;
 }
 
 /* Checked */
@@ -220,7 +222,8 @@ NESTED BLOCKS
 .bn-block-content[data-content-type="checkListItem"] > div > div {
   display: flex;
   justify-content: center;
-  width: 25px;
+  min-width: 24px;
+  padding-right: 4px;
 }
 
 .bn-block-content[data-content-type="checkListItem"] > div > div > input {

packages/react/src/blocks/ToggleWrapper/ToggleWrapper.tsx

@@ -1,9 +1,41 @@
-import { Block } from "@blocknote/core";
-import { ReactNode, useEffect, useMemo, useState } from "react";
+import {
+  Block,
+  defaultToggledState,
+  UnreachableCaseError,
+} from "@blocknote/core";
+import { ReactNode, useReducer, useState } from "react";
 
 import { ReactCustomBlockRenderProps } from "../../schema/ReactBlockSpec.js";
 import { useEditorChange } from "../../hooks/useEditorChange.js";
 
+const showChildrenReducer = (
+  showChildren: boolean,
+  action:
+    | {
+        type: "toggled";
+      }
+    | {
+        type: "childAdded";
+      }
+    | {
+        type: "lastChildRemoved";
+      },
+) => {
+  if (action.type === "toggled") {
+    return !showChildren;
+  }
+
+  if (action.type === "childAdded") {
+    return true;
+  }
+
+  if (action.type === "lastChildRemoved") {
+    return false;
+  }
+
+  throw new UnreachableCaseError(action);
+};
+
 export const ToggleWrapper = (
   props: Omit<ReactCustomBlockRenderProps<any, any, any>, "contentRef"> & {
     children: ReactNode;
@@ -13,39 +45,56 @@ export const ToggleWrapper = (
     };
   },
 ) => {
-  const { block, editor, children } = props;
-
-  const toggledState = useMemo(
-    () =>
-      props.toggledState || {
-        set: (block, isToggled: boolean) =>
-          window.localStorage.setItem(`toggle-${block.id}`, String(isToggled)),
-        get: (block) =>
-          window.localStorage.getItem(`toggle-${block.id}`) === "true",
-      },
-    [props.toggledState],
-  );
+  const { block, editor, children, toggledState } = props;
 
-  const [showChildren, setShowChildren] = useState(toggledState.get(block));
+  const [showChildren, dispatch] = useReducer(
+    showChildrenReducer,
+    (toggledState || defaultToggledState).get(block),
+  );
   const [childCount, setChildCount] = useState(block.children.length);
 
-  useEffect(() => {
-    toggledState.set(editor.getBlock(block)!, showChildren);
-  }, [block, block.id, editor, showChildren, toggledState]);
+  const handleToggle = (block: Block<any, any, any>) => {
+    (toggledState || defaultToggledState).set(
+      editor.getBlock(block)!,
+      !showChildren,
+    );
+    dispatch({
+      type: "toggled",
+    });
+  };
+
+  const handleChildAdded = (block: Block<any, any, any>) => {
+    (toggledState || defaultToggledState).set(block, true);
+    dispatch({
+      type: "childAdded",
+    });
+  };
+
+  const handleLastChildRemoved = (block: Block<any, any, any>) => {
+    (toggledState || defaultToggledState).set(block, false);
+    dispatch({
+      type: "lastChildRemoved",
+    });
+  };
 
   useEditorChange(() => {
-    const newChildCount = editor.getBlock(block)?.children.length ?? 0;
+    if ("isToggleable" in block.props && !block.props.isToggleable) {
+      return;
+    }
+
+    const newBlock = editor.getBlock(block)!;
+    const newChildCount = newBlock.children.length ?? 0;
 
     if (newChildCount > childCount) {
       // If a child block is added while children are hidden, show children.
       if (!showChildren) {
-        setShowChildren(true);
+        handleChildAdded(newBlock);
       }
     } else if (newChildCount === 0 && newChildCount < childCount) {
       // If the last child block is removed while children are shown, hide
       // children.
       if (showChildren) {
-        setShowChildren(false);
+        handleLastChildRemoved(newBlock);
       }
     }
 
@@ -62,7 +111,7 @@ export const ToggleWrapper = (
         <button
           className="bn-toggle-button"
           onMouseDown={(event) => event.preventDefault()}
-          onClick={() => setShowChildren((showChildren) => !showChildren)}
+          onClick={() => handleToggle(editor.getBlock(block)!)}
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"