@blocknote/core 0.31.3 → 0.32.0

package/src/blocks/HeadingBlockContent/HeadingBlockContent.ts

@@ -5,14 +5,20 @@ import {
   PropSchema,
   createBlockSpecFromStronglyTypedTiptapNode,
   createStronglyTypedTiptapNode,
+  getBlockFromPos,
   propsToAttributes,
 } from "../../schema/index.js";
 import { createDefaultBlockDOMOutputSpec } from "../defaultBlockHelpers.js";
 import { defaultProps } from "../defaultProps.js";
+import { createToggleWrapper } from "../ToggleWrapper/createToggleWrapper.js";
+import { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
+
+const HEADING_LEVELS = [1, 2, 3, 4, 5, 6] as const;
 
 export const headingPropSchema = {
   ...defaultProps,
-  level: { default: 1, values: [1, 2, 3] as const },
+  level: { default: 1, values: HEADING_LEVELS },
+  isToggleable: { default: false },
 } satisfies PropSchema;
 
 const HeadingBlockContent = createStronglyTypedTiptapNode({
@@ -25,8 +31,9 @@ const HeadingBlockContent = createStronglyTypedTiptapNode({
   },
 
   addInputRules() {
+    const editor = this.options.editor as BlockNoteEditor<any, any, any>;
     return [
-      ...[1, 2, 3].map((level) => {
+      ...editor.settings.heading.levels.map((level) => {
         // Creates a heading of appropriate level when starting with "#", "##", or "###".
         return new InputRule({
           find: new RegExp(`^(#{${level}})\\s$`),
@@ -58,87 +65,46 @@ const HeadingBlockContent = createStronglyTypedTiptapNode({
   },
 
   addKeyboardShortcuts() {
-    return {
-      "Mod-Alt-1": () => {
-        const blockInfo = getBlockInfoFromSelection(this.editor.state);
-        if (
-          !blockInfo.isBlockContainer ||
-          blockInfo.blockContent.node.type.spec.content !== "inline*"
-        ) {
-          return true;
-        }
-
-        // call updateBlockCommand
-        return this.editor.commands.command(
-          updateBlockCommand(blockInfo.bnBlock.beforePos, {
-            type: "heading",
-            props: {
-              level: 1 as any,
-            },
-          }),
-        );
-      },
-      "Mod-Alt-2": () => {
-        const blockInfo = getBlockInfoFromSelection(this.editor.state);
-        if (
-          !blockInfo.isBlockContainer ||
-          blockInfo.blockContent.node.type.spec.content !== "inline*"
-        ) {
-          return true;
-        }
-
-        return this.editor.commands.command(
-          updateBlockCommand(blockInfo.bnBlock.beforePos, {
-            type: "heading",
-            props: {
-              level: 2 as any,
-            },
-          }),
-        );
-      },
-      "Mod-Alt-3": () => {
-        const blockInfo = getBlockInfoFromSelection(this.editor.state);
-        if (
-          !blockInfo.isBlockContainer ||
-          blockInfo.blockContent.node.type.spec.content !== "inline*"
-        ) {
-          return true;
-        }
-
-        return this.editor.commands.command(
-          updateBlockCommand(blockInfo.bnBlock.beforePos, {
-            type: "heading",
-            props: {
-              level: 3 as any,
-            },
-          }),
-        );
-      },
-    };
+    const editor = this.options.editor as BlockNoteEditor<any, any, any>;
+
+    return Object.fromEntries(
+      editor.settings.heading.levels.map((level) => [
+        `Mod-Alt-${level}`,
+        () => {
+          const blockInfo = getBlockInfoFromSelection(this.editor.state);
+          if (
+            !blockInfo.isBlockContainer ||
+            blockInfo.blockContent.node.type.spec.content !== "inline*"
+          ) {
+            return true;
+          }
+
+          return this.editor.commands.command(
+            updateBlockCommand(blockInfo.bnBlock.beforePos, {
+              type: "heading",
+              props: {
+                level: level as any,
+              },
+            }),
+          );
+        },
+      ]),
+    );
   },
   parseHTML() {
+    const editor = this.options.editor as BlockNoteEditor<any, any, any>;
+
     return [
       // Parse from internal HTML.
       {
         tag: "div[data-content-type=" + this.name + "]",
         contentElement: ".bn-inline-content",
       },
-      // Parse from external HTML.
-      {
-        tag: "h1",
-        attrs: { level: 1 },
+      ...editor.settings.heading.levels.map((level) => ({
+        tag: `h${level}`,
+        attrs: { level },
         node: "heading",
-      },
-      {
-        tag: "h2",
-        attrs: { level: 2 },
-        node: "heading",
-      },
-      {
-        tag: "h3",
-        attrs: { level: 3 },
-        node: "heading",
-      },
+      })),
     ];
   },
 
@@ -153,6 +119,38 @@ const HeadingBlockContent = createStronglyTypedTiptapNode({
       this.options.domAttributes?.inlineContent || {},
     );
   },
+
+  addNodeView() {
+    return ({ node, HTMLAttributes, getPos }) => {
+      const { dom, contentDOM } = createDefaultBlockDOMOutputSpec(
+        this.name,
+        `h${node.attrs.level}`,
+        {
+          ...(this.options.domAttributes?.blockContent || {}),
+          ...HTMLAttributes,
+        },
+        this.options.domAttributes?.inlineContent || {},
+      );
+      dom.removeChild(contentDOM);
+
+      const editor = this.options.editor;
+      const block = getBlockFromPos(getPos, editor, this.editor, this.name);
+
+      const toggleWrapper = createToggleWrapper(
+        block as any,
+        editor,
+        contentDOM,
+      );
+      dom.appendChild(toggleWrapper.dom);
+
+      return {
+        dom,
+        contentDOM,
+        ignoreMutation: toggleWrapper.ignoreMutation,
+        destroy: toggleWrapper.destroy,
+      };
+    };
+  },
 });
 
 export const Heading = createBlockSpecFromStronglyTypedTiptapNode(

package/src/blocks/ListItemBlockContent/ListItemKeyboardShortcuts.ts

@@ -18,6 +18,7 @@ export const handleEnter = (editor: BlockNoteEditor<any, any, any>) => {
 
   if (
     !(
+      blockContent.node.type.name === "toggleListItem" ||
       blockContent.node.type.name === "bulletListItem" ||
       blockContent.node.type.name === "numberedListItem" ||
       blockContent.node.type.name === "checkListItem"

package/src/blocks/ListItemBlockContent/ToggleListItemBlockContent/ToggleListItemBlockContent.ts

@@ -0,0 +1,104 @@
+import { updateBlockCommand } from "../../../api/blockManipulation/commands/updateBlock/updateBlock.js";
+import { getBlockInfoFromSelection } from "../../../api/getBlockInfoFromPos.js";
+import {
+  PropSchema,
+  createBlockSpecFromStronglyTypedTiptapNode,
+  createStronglyTypedTiptapNode,
+  getBlockFromPos,
+} from "../../../schema/index.js";
+import { createDefaultBlockDOMOutputSpec } from "../../defaultBlockHelpers.js";
+import { defaultProps } from "../../defaultProps.js";
+import { createToggleWrapper } from "../../ToggleWrapper/createToggleWrapper.js";
+import { handleEnter } from "../ListItemKeyboardShortcuts.js";
+
+export const toggleListItemPropSchema = {
+  ...defaultProps,
+} satisfies PropSchema;
+
+const ToggleListItemBlockContent = createStronglyTypedTiptapNode({
+  name: "toggleListItem",
+  content: "inline*",
+  group: "blockContent",
+  // This is to make sure that the list item Enter keyboard handler takes
+  // priority over the default one.
+  priority: 90,
+  addKeyboardShortcuts() {
+    return {
+      Enter: () => handleEnter(this.options.editor),
+      "Mod-Shift-6": () => {
+        const blockInfo = getBlockInfoFromSelection(this.editor.state);
+        if (
+          !blockInfo.isBlockContainer ||
+          blockInfo.blockContent.node.type.spec.content !== "inline*"
+        ) {
+          return true;
+        }
+
+        return this.editor.commands.command(
+          updateBlockCommand(blockInfo.bnBlock.beforePos, {
+            type: "toggleListItem",
+            props: {},
+          }),
+        );
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      // Parse from internal HTML.
+      {
+        tag: "div[data-content-type=" + this.name + "]",
+        contentElement: ".bn-inline-content",
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return createDefaultBlockDOMOutputSpec(
+      this.name,
+      "p",
+      {
+        ...(this.options.domAttributes?.blockContent || {}),
+        ...HTMLAttributes,
+      },
+      this.options.domAttributes?.inlineContent || {},
+    );
+  },
+
+  addNodeView() {
+    return ({ HTMLAttributes, getPos }) => {
+      const { dom, contentDOM } = createDefaultBlockDOMOutputSpec(
+        this.name,
+        "p",
+        {
+          ...(this.options.domAttributes?.blockContent || {}),
+          ...HTMLAttributes,
+        },
+        this.options.domAttributes?.inlineContent || {},
+      );
+
+      const editor = this.options.editor;
+      const block = getBlockFromPos(getPos, editor, this.editor, this.name);
+
+      const toggleWrapper = createToggleWrapper(
+        block as any,
+        editor,
+        contentDOM,
+      );
+      dom.appendChild(toggleWrapper.dom);
+
+      return {
+        dom,
+        contentDOM,
+        ignoreMutation: toggleWrapper.ignoreMutation,
+        destroy: toggleWrapper.destroy,
+      };
+    };
+  },
+});
+
+export const ToggleListItem = createBlockSpecFromStronglyTypedTiptapNode(
+  ToggleListItemBlockContent,
+  toggleListItemPropSchema,
+);

package/src/blocks/ToggleWrapper/createToggleWrapper.ts

@@ -0,0 +1,182 @@
+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: HTMLElement,
+  toggledState: ToggledState = defaultToggledState,
+): {
+  dom: HTMLElement;
+  contentDOM?: HTMLElement;
+  ignoreMutation?: (mutation: ViewMutationRecord) => boolean;
+  destroy?: () => void;
+} => {
+  if ("isToggleable" in block.props && !block.props.isToggleable) {
+    return {
+      dom: renderedElement,
+    };
+  }
+
+  const dom = document.createElement("div");
+
+  const toggleWrapper = document.createElement("div");
+  toggleWrapper.className = "bn-toggle-wrapper";
+
+  const toggleButton = document.createElement("button");
+  toggleButton.className = "bn-toggle-button";
+  toggleButton.innerHTML =
+    // https://fonts.google.com/icons?selected=Material+Symbols+Rounded:chevron_right:FILL@0;wght@700;GRAD@0;opsz@24&icon.query=chevron&icon.style=Rounded&icon.size=24&icon.color=%23e8eaed
+    '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="CURRENTCOLOR"><path d="M320-200v-560l440 280-440 280Z"/></svg>';
+  const toggleButtonMouseDown = (event: MouseEvent) => event.preventDefault();
+  toggleButton.addEventListener("mousedown", toggleButtonMouseDown);
+  const toggleButtonOnClick = () => {
+    // Toggles visibility of child blocks. Also adds/removes the "add block"
+    // button if there are no child blocks.
+    if (toggleWrapper.getAttribute("data-show-children") === "true") {
+      toggleWrapper.setAttribute("data-show-children", "false");
+      toggledState.set(editor.getBlock(block)!, false);
+
+      if (dom.contains(toggleAddBlockButton)) {
+        dom.removeChild(toggleAddBlockButton);
+      }
+    } else {
+      toggleWrapper.setAttribute("data-show-children", "true");
+      toggledState.set(editor.getBlock(block)!, true);
+
+      if (
+        editor.getBlock(block)?.children.length === 0 &&
+        !dom.contains(toggleAddBlockButton)
+      ) {
+        dom.appendChild(toggleAddBlockButton);
+      }
+    }
+  };
+  toggleButton.addEventListener("click", toggleButtonOnClick);
+
+  toggleWrapper.appendChild(toggleButton);
+  toggleWrapper.appendChild(renderedElement);
+
+  const toggleAddBlockButton = document.createElement("button");
+  toggleAddBlockButton.className = "bn-toggle-add-block-button";
+  toggleAddBlockButton.textContent = "Empty toggle. Click to add a block.";
+  const toggleAddBlockButtonMouseDown = (event: MouseEvent) =>
+    event.preventDefault();
+  toggleAddBlockButton.addEventListener(
+    "mousedown",
+    toggleAddBlockButtonMouseDown,
+  );
+  const toggleAddBlockButtonOnClick = () => {
+    // Adds a single empty child block.
+    editor.transact(() => {
+      // dom.removeChild(toggleAddBlockButton);
+
+      const updatedBlock = editor.updateBlock(block, {
+        // Single empty block with default type.
+        children: [{}],
+      });
+      editor.setTextCursorPosition(updatedBlock.children[0].id, "end");
+      editor.focus();
+    });
+  };
+  toggleAddBlockButton.addEventListener("click", toggleAddBlockButtonOnClick);
+
+  dom.appendChild(toggleWrapper);
+
+  let childCount = block.children.length;
+  const onEditorChange = editor.onChange(() => {
+    const newChildCount = editor.getBlock(block)?.children.length ?? 0;
+
+    if (newChildCount > childCount) {
+      // If a child block is added while children are hidden, show children.
+      if (toggleWrapper.getAttribute("data-show-children") === "false") {
+        toggleWrapper.setAttribute("data-show-children", "true");
+        toggledState.set(editor.getBlock(block)!, true);
+      }
+
+      // Remove the "add block" button as we want to show child blocks and
+      // there is at least one child block.
+      if (dom.contains(toggleAddBlockButton)) {
+        dom.removeChild(toggleAddBlockButton);
+      }
+    } else if (newChildCount === 0 && newChildCount < childCount) {
+      // If the last child block is removed while children are shown, hide
+      // children.
+      if (toggleWrapper.getAttribute("data-show-children") === "true") {
+        toggleWrapper.setAttribute("data-show-children", "false");
+        toggledState.set(editor.getBlock(block)!, false);
+      }
+
+      // Remove the "add block" button as we want to hide child blocks,
+      // regardless of whether there are child blocks or not.
+      if (dom.contains(toggleAddBlockButton)) {
+        dom.removeChild(toggleAddBlockButton);
+      }
+    }
+
+    childCount = newChildCount;
+  });
+
+  if (toggledState.get(block)) {
+    toggleWrapper.setAttribute("data-show-children", "true");
+
+    if (block.children.length === 0) {
+      // If the toggle is set to show children, but there are no children,
+      // we add the "add block" button.
+      dom.appendChild(toggleAddBlockButton);
+    }
+  } else {
+    toggleWrapper.setAttribute("data-show-children", "false");
+  }
+
+  return {
+    dom,
+    // Prevents re-renders when the toggle button is clicked.
+    ignoreMutation: (mutation) => {
+      if (
+        mutation instanceof MutationRecord &&
+        // We want to prevent re-renders when the view changes, so we ignore
+        // all mutations where the `data-show-children` attribute is changed
+        // or the "add block" button is added/removed.
+        ((mutation.type === "attributes" &&
+          mutation.target === toggleWrapper &&
+          mutation.attributeName === "data-show-children") ||
+          (mutation.type === "childList" &&
+            (mutation.addedNodes[0] === toggleAddBlockButton ||
+              mutation.removedNodes[0] === toggleAddBlockButton)))
+      ) {
+        return true;
+      }
+      return false;
+    },
+    destroy: () => {
+      toggleButton.removeEventListener("mousedown", toggleButtonMouseDown);
+      toggleButton.removeEventListener("click", toggleButtonOnClick);
+      toggleAddBlockButton.removeEventListener(
+        "mousedown",
+        toggleAddBlockButtonMouseDown,
+      );
+      toggleAddBlockButton.removeEventListener(
+        "click",
+        toggleAddBlockButtonOnClick,
+      );
+      onEditorChange?.();
+    },
+  };
+};

package/src/blocks/defaultBlockTypeGuards.ts

@@ -24,7 +24,11 @@ export function checkDefaultBlockTypeInSchema<
 >(
   blockType: BlockType,
   editor: BlockNoteEditor<any, I, S>,
-): editor is BlockNoteEditor<{ Type: DefaultBlockSchema[BlockType] }, I, S> {
+): editor is BlockNoteEditor<
+  { [K in BlockType]: DefaultBlockSchema[BlockType] },
+  I,
+  S
+> {
   return (
     blockType in editor.schema.blockSchema &&
     editor.schema.blockSchema[blockType] === defaultBlockSchema[blockType]
@@ -40,7 +44,7 @@ export function checkDefaultInlineContentTypeInSchema<
   editor: BlockNoteEditor<B, any, S>,
 ): editor is BlockNoteEditor<
   B,
-  { Type: DefaultInlineContentSchema[InlineContentType] },
+  { [K in InlineContentType]: DefaultInlineContentSchema[InlineContentType] },
   S
 > {
   return (

package/src/blocks/defaultBlocks.ts

@@ -25,6 +25,7 @@ import { CodeBlock } from "./CodeBlockContent/CodeBlockContent.js";
 import { FileBlock } from "./FileBlockContent/FileBlockContent.js";
 import { Heading } from "./HeadingBlockContent/HeadingBlockContent.js";
 import { ImageBlock } from "./ImageBlockContent/ImageBlockContent.js";
+import { ToggleListItem } from "./ListItemBlockContent/ToggleListItemBlockContent/ToggleListItemBlockContent.js";
 import { BulletListItem } from "./ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent.js";
 import { CheckListItem } from "./ListItemBlockContent/CheckListItemBlockContent/CheckListItemBlockContent.js";
 import { NumberedListItem } from "./ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent.js";
@@ -38,6 +39,7 @@ export const defaultBlockSpecs = {
   heading: Heading,
   quote: Quote,
   codeBlock: CodeBlock,
+  toggleListItem: ToggleListItem,
   bulletListItem: BulletListItem,
   numberedListItem: NumberedListItem,
   checkListItem: CheckListItem,

package/src/editor/Block.css

@@ -49,7 +49,7 @@ NESTED BLOCKS
 */
 
 .bn-block-group .bn-block-group {
-  margin-left: 1.5em;
+  margin-left: 24px;
 }
 
 .bn-block-group .bn-block-group > .bn-block-outer {
@@ -130,6 +130,15 @@ NESTED BLOCKS
 [data-content-type="heading"][data-level="3"] {
   --level: 1.3em;
 }
+[data-content-type="heading"][data-level="4"] {
+  --level: 1em;
+}
+[data-content-type="heading"][data-level="5"] {
+  --level: 0.9em;
+}
+[data-content-type="heading"][data-level="6"] {
+  --level: 0.8em;
+}
 
 [data-prev-level="1"] {
   --prev-level: 3em;
@@ -140,6 +149,15 @@ NESTED BLOCKS
 [data-prev-level="3"] {
   --prev-level: 1.3em;
 }
+[data-prev-level="4"] {
+  --prev-level: 1em;
+}
+[data-prev-level="5"] {
+  --prev-level: 0.9em;
+}
+[data-prev-level="6"] {
+  --prev-level: 0.8em;
+}
 
 .bn-block-outer[data-prev-type="heading"] > .bn-block > .bn-block-content {
   font-size: var(--prev-level);
@@ -174,9 +192,11 @@ NESTED BLOCKS
 }
 
 /* Ordered */
-.bn-block-content[data-content-type="numberedListItem"] {
+.bn-block-content[data-content-type="numberedListItem"]::before {
   display: flex;
-  gap: 0.5em;
+  justify-content: center;
+  min-width: 24px;
+  padding-right: 4px;
 }
 
 [data-content-type="numberedListItem"] {
@@ -204,9 +224,11 @@ NESTED BLOCKS
 }
 
 /* Unordered */
-.bn-block-content[data-content-type="bulletListItem"] {
+.bn-block-content[data-content-type="bulletListItem"]::before {
   display: flex;
-  gap: 0.5em;
+  justify-content: center;
+  min-width: 24px;
+  padding-right: 4px;
 }
 
 /* Checked */
@@ -215,9 +237,15 @@ NESTED BLOCKS
   width: 100%;
 }
 
+.bn-block-content[data-content-type="checkListItem"] > div > div {
+  display: flex;
+  justify-content: center;
+  min-width: 24px;
+  padding-right: 4px;
+}
+
 .bn-block-content[data-content-type="checkListItem"] > div > div > input {
   margin: 0;
-  margin-inline-end: 0.5em;
   cursor: pointer;
 }
 
@@ -234,6 +262,70 @@ NESTED BLOCKS
   justify-content: flex-end;
 }
 
+/* Toggle */
+.bn-block-content:has(.bn-toggle-wrapper) > div {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.bn-block:has(
+    > .bn-block-content > div > .bn-toggle-wrapper[data-show-children="false"]
+  )
+  > .bn-block-group,
+.bn-block:has(
+    > .react-renderer
+      > .bn-block-content
+      > div
+      > .bn-toggle-wrapper[data-show-children="false"]
+  )
+  > .bn-block-group {
+  display: none;
+}
+
+.bn-toggle-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.bn-toggle-button {
+  color: var(--bn-colors-editor-text);
+  padding: 3px;
+}
+
+.bn-toggle-button > svg {
+  width: 18px;
+  height: 18px;
+}
+
+.bn-toggle-wrapper[data-show-children="true"] .bn-toggle-button {
+  transform: rotate(90deg);
+}
+
+.bn-toggle-add-block-button {
+  font-size: 16px;
+  color: var(--bn-colors-side-menu);
+  font-weight: normal;
+  margin-left: 22px;
+  padding-inline: 2px;
+  width: fit-content;
+}
+
+.bn-toggle-button,
+.bn-toggle-add-block-button {
+  background: none;
+  border: none;
+  border-radius: var(--bn-border-radius-small);
+  cursor: pointer;
+  display: flex;
+  user-select: none;
+}
+
+.bn-toggle-button:hover,
+.bn-toggle-add-block-button:hover {
+  background-color: var(--bn-colors-hovered-background);
+}
+
 /* No list nesting */
 .bn-block-outer[data-prev-type="bulletListItem"]
   > .bn-block

package/src/editor/BlockNoteEditor.test.ts

@@ -52,6 +52,7 @@ it("immediately replaces doc", async () => {
         "id": "2",
         "props": {
           "backgroundColor": "default",
+          "isToggleable": false,
           "level": 1,
           "textAlignment": "left",
           "textColor": "default",