@blocknote/core 0.33.0 → 0.35.0

package/src/api/nodeUtil.ts

@@ -1,8 +1,4 @@
-import {
-  combineTransactionSteps,
-  findChildrenInRange,
-  getChangedRanges,
-} from "@tiptap/core";
+import { combineTransactionSteps } from "@tiptap/core";
 import type { Node } from "prosemirror-model";
 import type { Transaction } from "prosemirror-state";
 import {
@@ -17,6 +13,23 @@ import type { StyleSchema } from "../schema/styles/types.js";
 import { nodeToBlock } from "./nodeConversions/nodeToBlock.js";
 import { getPmSchema } from "./pmUtil.js";
 
+/**
+ * Gets the parent block of a node, if it has one.
+ */
+function getParentBlockId(doc: Node, pos: number): string | undefined {
+  if (pos === 0) {
+    return undefined;
+  }
+  const resolvedPos = doc.resolve(pos);
+  for (let i = resolvedPos.depth; i > 0; i--) {
+    const parent = resolvedPos.node(i);
+    if (isNodeBlock(parent)) {
+      return parent.attrs.id;
+    }
+  }
+  return undefined;
+}
+
 /**
  * Get a TipTap node by id
  */
@@ -62,38 +75,11 @@ export function isNodeBlock(node: Node): boolean {
  * This attributes the changes to a specific source.
  */
 export type BlockChangeSource =
-  | {
-      /**
-       * When an event is triggered by the local user, the source is "local".
-       * This is the default source.
-       */
-      type: "local";
-    }
-  | {
-      /**
-       * When an event is triggered by a paste operation, the source is "paste".
-       */
-      type: "paste";
-    }
-  | {
-      /**
-       * When an event is triggered by a drop operation, the source is "drop".
-       */
-      type: "drop";
-    }
-  | {
-      /**
-       * When an event is triggered by an undo or redo operation, the source is "undo" or "redo".
-       * @note Y.js undo/redo are not differentiated.
-       */
-      type: "undo" | "redo" | "undo-redo";
-    }
-  | {
-      /**
-       * When an event is triggered by a remote user, the source is "remote".
-       */
-      type: "yjs-remote";
-    };
+  | { type: "local" }
+  | { type: "paste" }
+  | { type: "drop" }
+  | { type: "undo" | "redo" | "undo-redo" }
+  | { type: "yjs-remote" };
 
 export type BlocksChanged<
   BSchema extends BlockSchema = DefaultBlockSchema,
@@ -120,9 +106,28 @@ export type BlocksChanged<
     | {
         type: "update";
         /**
-         * The block before the update.
+         * The previous block.
+         */
+        prevBlock: Block<BSchema, ISchema, SSchema>;
+      }
+    | {
+        type: "move";
+        /**
+         * The affected block.
+         */
+        block: Block<BSchema, ISchema, SSchema>;
+        /**
+         * The block before the move.
          */
         prevBlock: Block<BSchema, ISchema, SSchema>;
+        /**
+         * The previous parent block (if it existed).
+         */
+        prevParent?: Block<BSchema, ISchema, SSchema>;
+        /**
+         * The current parent block (if it exists).
+         */
+        currentParent?: Block<BSchema, ISchema, SSchema>;
       }
   )
 >;
@@ -139,8 +144,6 @@ function areBlocksDifferentExcludingChildren<
   block1: Block<BSchema, ISchema, SSchema>,
   block2: Block<BSchema, ISchema, SSchema>,
 ): boolean {
-  // TODO use an actual diff algorithm
-  // Compare all properties except children
   return (
     block1.id !== block2.id ||
     block1.type !== block2.type ||
@@ -149,11 +152,63 @@ function areBlocksDifferentExcludingChildren<
   );
 }
 
+function determineChangeSource(transaction: Transaction): BlockChangeSource {
+  if (transaction.getMeta("paste")) {
+    return { type: "paste" };
+  }
+  if (transaction.getMeta("uiEvent") === "drop") {
+    return { type: "drop" };
+  }
+  if (transaction.getMeta("history$")) {
+    return {
+      type: transaction.getMeta("history$").redo ? "redo" : "undo",
+    };
+  }
+  if (transaction.getMeta("y-sync$")) {
+    if (transaction.getMeta("y-sync$").isUndoRedoOperation) {
+      return { type: "undo-redo" };
+    }
+    return { type: "yjs-remote" };
+  }
+  return { type: "local" };
+}
+
+function collectAllBlocks<
+  BSchema extends BlockSchema,
+  ISchema extends InlineContentSchema,
+  SSchema extends StyleSchema,
+>(
+  doc: Node,
+): Record<
+  string,
+  {
+    block: Block<BSchema, ISchema, SSchema>;
+    parentId: string | undefined;
+  }
+> {
+  const blocks: Record<
+    string,
+    {
+      block: Block<BSchema, ISchema, SSchema>;
+      parentId: string | undefined;
+    }
+  > = {};
+  const pmSchema = getPmSchema(doc);
+  doc.descendants((node, pos) => {
+    if (isNodeBlock(node)) {
+      const parentId = getParentBlockId(doc, pos);
+      blocks[node.attrs.id] = {
+        block: nodeToBlock(node, pmSchema),
+        parentId,
+      };
+    }
+    return true;
+  });
+  return blocks;
+}
+
 /**
  * Get the blocks that were changed by a transaction.
- * @param transaction The transaction to get the changes from.
- * @param editor The editor to get the changes from.
- * @returns The blocks that were changed by the transaction.
  */
 export function getBlocksChangedByTransaction<
   BSchema extends BlockSchema = DefaultBlockSchema,
@@ -163,109 +218,75 @@ export function getBlocksChangedByTransaction<
   transaction: Transaction,
   appendedTransactions: Transaction[] = [],
 ): BlocksChanged<BSchema, ISchema, SSchema> {
-  let source: BlockChangeSource = { type: "local" };
-
-  if (transaction.getMeta("paste")) {
-    source = { type: "paste" };
-  } else if (transaction.getMeta("uiEvent") === "drop") {
-    source = { type: "drop" };
-  } else if (transaction.getMeta("history$")) {
-    source = {
-      type: transaction.getMeta("history$").redo ? "redo" : "undo",
-    };
-  } else if (transaction.getMeta("y-sync$")) {
-    if (transaction.getMeta("y-sync$").isUndoRedoOperation) {
-      source = {
-        type: "undo-redo",
-      };
-    } else {
-      source = {
-        type: "yjs-remote",
-      };
-    }
-  }
-
-  // Get affected blocks before and after the change
-  const pmSchema = getPmSchema(transaction);
+  const source = determineChangeSource(transaction);
   const combinedTransaction = combineTransactionSteps(transaction.before, [
     transaction,
     ...appendedTransactions,
   ]);
 
-  const changedRanges = getChangedRanges(combinedTransaction);
-  const prevAffectedBlocks = changedRanges
-    .flatMap((range) => {
-      return findChildrenInRange(
-        combinedTransaction.before,
-        range.oldRange,
-        isNodeBlock,
-      );
-    })
-    .map(({ node }) => nodeToBlock(node, pmSchema));
-
-  const nextAffectedBlocks = changedRanges
-    .flatMap((range) => {
-      return findChildrenInRange(
-        combinedTransaction.doc,
-        range.newRange,
-        isNodeBlock,
-      );
-    })
-    .map(({ node }) => nodeToBlock(node, pmSchema));
-
-  const nextBlocks = new Map(
-    nextAffectedBlocks.map((block) => {
-      return [block.id, block];
-    }),
+  const prevBlocks = collectAllBlocks<BSchema, ISchema, SSchema>(
+    combinedTransaction.before,
   );
-  const prevBlocks = new Map(
-    prevAffectedBlocks.map((block) => {
-      return [block.id, block];
-    }),
+  const nextBlocks = collectAllBlocks<BSchema, ISchema, SSchema>(
+    combinedTransaction.doc,
   );
 
   const changes: BlocksChanged<BSchema, ISchema, SSchema> = [];
 
-  // Inserted blocks are blocks that were not in the previous state and are in the next state
-  for (const [id, block] of nextBlocks) {
-    if (!prevBlocks.has(id)) {
+  // Handle inserted blocks
+  Object.keys(nextBlocks)
+    .filter((id) => !(id in prevBlocks))
+    .forEach((id) => {
       changes.push({
         type: "insert",
-        block,
+        block: nextBlocks[id].block,
         source,
         prevBlock: undefined,
       });
-    }
-  }
+    });
 
-  // Deleted blocks are blocks that were in the previous state but not in the next state
-  for (const [id, block] of prevBlocks) {
-    if (!nextBlocks.has(id)) {
+  // Handle deleted blocks
+  Object.keys(prevBlocks)
+    .filter((id) => !(id in nextBlocks))
+    .forEach((id) => {
       changes.push({
         type: "delete",
-        block,
+        block: prevBlocks[id].block,
         source,
         prevBlock: undefined,
       });
-    }
-  }
+    });
 
-  // Updated blocks are blocks that were in the previous state and are in the next state
-  for (const [id, block] of nextBlocks) {
-    if (prevBlocks.has(id)) {
-      const prevBlock = prevBlocks.get(id)!;
+  // Handle updated, moved, indented, outdented blocks
+  Object.keys(nextBlocks)
+    .filter((id) => id in prevBlocks)
+    .forEach((id) => {
+      const prev = prevBlocks[id];
+      const next = nextBlocks[id];
+      const isParentDifferent = prev.parentId !== next.parentId;
 
-      // Only include the update if the block itself changed (excluding children)
-      if (areBlocksDifferentExcludingChildren(prevBlock, block)) {
+      if (isParentDifferent) {
+        changes.push({
+          type: "move",
+          block: next.block,
+          prevBlock: prev.block,
+          source,
+          prevParent: prev.parentId
+            ? prevBlocks[prev.parentId]?.block
+            : undefined,
+          currentParent: next.parentId
+            ? nextBlocks[next.parentId]?.block
+            : undefined,
+        });
+      } else if (areBlocksDifferentExcludingChildren(prev.block, next.block)) {
         changes.push({
           type: "update",
-          block,
-          prevBlock,
+          block: next.block,
+          prevBlock: prev.block,
           source,
         });
       }
-    }
-  }
+    });
 
   return changes;
 }

package/src/api/parsers/markdown/detectMarkdown.test.ts

@@ -0,0 +1,211 @@
+import { describe, expect, it } from "vitest";
+import { isMarkdown } from "./detectMarkdown.js";
+
+describe("isMarkdown", () => {
+  describe("Headings (H1-H6)", () => {
+    it("should detect H1 headings", () => {
+      expect(isMarkdown("# Heading 1\n\nContent")).toBe(true);
+      expect(isMarkdown("  # Heading 1\n\nContent")).toBe(true);
+      expect(isMarkdown("   # Heading 1\n\nContent")).toBe(true);
+    });
+
+    it("should detect H2-H6 headings", () => {
+      expect(isMarkdown("## Heading 2\n\nContent")).toBe(true);
+      expect(isMarkdown("### Heading 3\n\nContent")).toBe(true);
+      expect(isMarkdown("#### Heading 4\n\nContent")).toBe(true);
+      expect(isMarkdown("##### Heading 5\n\nContent")).toBe(true);
+      expect(isMarkdown("###### Heading 6\n\nContent")).toBe(true);
+    });
+
+    it("should not detect invalid headings", () => {
+      expect(isMarkdown("####### Heading 7\n\nContent")).toBe(false);
+      expect(isMarkdown("#Heading without space\n\nContent")).toBe(false);
+      expect(isMarkdown("# \n\nContent")).toBe(false);
+      expect(
+        isMarkdown(
+          "# Very long heading that exceeds the character limit and should not be detected as a valid markdown heading\n\nContent",
+        ),
+      ).toBe(false);
+    });
+  });
+
+  describe("Bold, italic, underline, strikethrough, highlight", () => {
+    it("should detect bold text", () => {
+      expect(isMarkdown("**bold text**")).toBe(true);
+      expect(isMarkdown("__bold text__")).toBe(true);
+      expect(isMarkdown(" *bold text* ")).toBe(true);
+      expect(isMarkdown(" _bold text_ ")).toBe(true);
+    });
+
+    it("should detect italic text", () => {
+      expect(isMarkdown("*italic text*")).toBe(true);
+      expect(isMarkdown("_italic text_")).toBe(true);
+    });
+
+    it("should detect strikethrough text", () => {
+      expect(isMarkdown("~~strikethrough text~~")).toBe(true);
+    });
+
+    it("should detect highlighted text", () => {
+      expect(isMarkdown("==highlighted text==")).toBe(true);
+      expect(isMarkdown("++highlighted text++")).toBe(true);
+    });
+  });
+
+  describe("Links", () => {
+    it("should detect basic links", () => {
+      expect(isMarkdown("[Link text](https://example.com)")).toBe(true);
+      expect(isMarkdown("[Link text](http://example.com)")).toBe(true);
+      expect(isMarkdown("[Short](https://ex.com)")).toBe(true);
+    });
+
+    it("should detect image links", () => {
+      expect(isMarkdown("![Alt text](https://example.com/image.jpg)")).toBe(
+        true,
+      );
+    });
+  });
+
+  describe("Inline code", () => {
+    it("should detect inline code", () => {
+      expect(isMarkdown("`code`")).toBe(true);
+      expect(isMarkdown(" `code` ")).toBe(true);
+      expect(isMarkdown("`const x = 1;`")).toBe(true);
+    });
+
+    it("should not detect invalid inline code", () => {
+      expect(isMarkdown("` code `")).toBe(false); // spaces around content
+      expect(isMarkdown("``")).toBe(false); // empty
+      expect(isMarkdown("` `")).toBe(false); // only space
+    });
+  });
+
+  describe("Unordered lists", () => {
+    it("should detect unordered lists", () => {
+      expect(isMarkdown("- Item 1\n- Item 2")).toBe(true);
+      expect(isMarkdown(" - Item 1\n - Item 2")).toBe(true);
+      expect(isMarkdown("  - Item 1\n  - Item 2")).toBe(true);
+      expect(isMarkdown("   - Item 1\n   - Item 2")).toBe(true);
+      expect(isMarkdown("    - Item 1\n    - Item 2")).toBe(true);
+      expect(isMarkdown("     - Item 1\n     - Item 2")).toBe(true);
+    });
+
+    it("should not detect invalid unordered lists", () => {
+      expect(isMarkdown("- Item 1")).toBe(false); // single item
+      expect(isMarkdown("-- Item 1\n-- Item 2")).toBe(false); // wrong marker
+      expect(isMarkdown("-Item 1\n-Item 2")).toBe(false); // no space after marker
+    });
+  });
+
+  describe("Ordered lists", () => {
+    it("should detect ordered lists", () => {
+      expect(isMarkdown("1. Item 1\n2. Item 2")).toBe(true);
+      expect(isMarkdown(" 1. Item 1\n 2. Item 2")).toBe(true);
+      expect(isMarkdown("  1. Item 1\n  2. Item 2")).toBe(true);
+      expect(isMarkdown("   1. Item 1\n   2. Item 2")).toBe(true);
+      expect(isMarkdown("    1. Item 1\n    2. Item 2")).toBe(true);
+      expect(isMarkdown("     1. Item 1\n     2. Item 2")).toBe(true);
+    });
+
+    it("should not detect invalid ordered lists", () => {
+      expect(isMarkdown("1. Item 1")).toBe(false); // single item
+      expect(isMarkdown("1 Item 1\n2 Item 2")).toBe(false); // no dot
+      expect(isMarkdown("1.Item 1\n2.Item 2")).toBe(false); // no space after dot
+    });
+  });
+
+  describe("Horizontal rules", () => {
+    it("should detect horizontal rules", () => {
+      expect(isMarkdown("\n\n ---\n\n")).toBe(true);
+      expect(isMarkdown("\n\n ----\n\n")).toBe(true);
+      expect(isMarkdown("\n\n  ---\n\n")).toBe(true);
+      expect(isMarkdown("\n\n   ---\n\n")).toBe(true);
+    });
+  });
+
+  describe("Fenced code blocks", () => {
+    it("should detect fenced code blocks", () => {
+      expect(isMarkdown("```\ncode block\n```")).toBe(true);
+      expect(isMarkdown("~~~\ncode block\n~~~")).toBe(true);
+      expect(isMarkdown("```javascript\nconst x = 1;\n```")).toBe(true);
+      expect(isMarkdown("```js\nconst x = 1;\n```")).toBe(true);
+    });
+  });
+
+  describe("Classical underlined headings", () => {
+    it("should detect H1 with equals", () => {
+      expect(isMarkdown("Heading\n===\n\nContent")).toBe(true);
+      expect(isMarkdown("Heading\n====\n\nContent")).toBe(true);
+    });
+
+    it("should detect H2 with dashes", () => {
+      expect(isMarkdown("Heading\n---\n\nContent")).toBe(true);
+      expect(isMarkdown("Heading\n----\n\nContent")).toBe(true);
+    });
+  });
+
+  describe("Blockquotes", () => {
+    it("should detect blockquotes", () => {
+      expect(isMarkdown("> This is a blockquote\n\nContent")).toBe(true);
+      expect(isMarkdown(" > This is a blockquote\n\nContent")).toBe(true);
+      expect(isMarkdown("  > This is a blockquote\n\nContent")).toBe(true);
+      expect(isMarkdown("   > This is a blockquote\n\nContent")).toBe(true);
+    });
+
+    it("should detect multi-line blockquotes", () => {
+      expect(isMarkdown("> Line 1\n> Line 2\n\nContent")).toBe(true);
+      expect(isMarkdown("> Line 1\n> Line 2\n> Line 3\n\nContent")).toBe(true);
+    });
+  });
+
+  describe("Tables", () => {
+    it("should detect table headers", () => {
+      expect(isMarkdown("| Header 1 | Header 2 |\n")).toBe(true);
+      expect(isMarkdown("| Header 1 | Header 2 | Header 3 |\n")).toBe(true);
+    });
+
+    it("should detect table dividers", () => {
+      expect(isMarkdown("| --- | --- |\n")).toBe(true);
+      expect(isMarkdown("| :--- | ---: |\n")).toBe(true);
+      expect(isMarkdown("| :---: | --- |\n")).toBe(true);
+    });
+
+    it("should detect table rows", () => {
+      expect(isMarkdown("| Cell 1 | Cell 2 |\n")).toBe(true);
+      expect(isMarkdown("| Cell 1 | Cell 2 | Cell 3 |\n")).toBe(true);
+    });
+
+    it("should detect complete tables", () => {
+      const table =
+        "| Header 1 | Header 2 |\n| --- | --- |\n| Cell 1 | Cell 2 |\n";
+      expect(isMarkdown(table)).toBe(true);
+    });
+
+    it("should not detect invalid tables", () => {
+      expect(isMarkdown("| Header 1 | Header 2\n")).toBe(false); // missing closing pipe
+      expect(isMarkdown("Header 1 | Header 2 |\n")).toBe(false); // missing opening pipe
+    });
+  });
+
+  describe("Edge cases and combinations", () => {
+    it("should detect mixed markdown content", () => {
+      const mixedContent =
+        "# Heading\n\nThis is **bold** and *italic* text with a [link](https://example.com).\n\n- List item 1\n- List item 2\n\n> Blockquote\n\n```\ncode block\n```";
+      expect(isMarkdown(mixedContent)).toBe(true);
+    });
+
+    it("should not detect plain text", () => {
+      expect(
+        isMarkdown("This is just plain text without any markdown formatting."),
+      ).toBe(false);
+      expect(isMarkdown("")).toBe(false);
+      expect(isMarkdown("   \n   \n   ")).toBe(false); // only whitespace
+    });
+
+    it("should handle special characters", () => {
+      expect(isMarkdown("**text with `backticks`**")).toBe(true);
+      expect(isMarkdown("**text with [brackets]**")).toBe(true);
+      expect(isMarkdown("**text with (parentheses)**")).toBe(true);
+    });
+  });
+});

package/src/api/parsers/markdown/detectMarkdown.ts

@@ -2,13 +2,14 @@
 const h1 = /(^|\n) {0,3}#{1,6} {1,8}[^\n]{1,64}\r?\n\r?\n\s{0,32}\S/;
 
 // Bold, italic, underline, strikethrough, highlight.
-const bold = /(?:\s|^)(_|__|\*|\*\*|~~|==|\+\+)(?!\s).{1,64}(?<!\s)(?=\1)/;
+const bold =
+  /(_|__|\*|\*\*|~~|==|\+\+)(?!\s)(?:[^\s](?:.{0,62}[^\s])?|\S)(?=\1)/;
 
 // Basic inline link (also captures images).
 const link = /\[[^\]]{1,128}\]\(https?:\/\/\S{1,999}\)/;
 
 // Inline code.
-const code = /(?:\s|^)`(?!\s)[^`]{1,48}(?<!\s)`([^\w]|$)/;
+const code = /(?:\s|^)`(?!\s)(?:[^\s`](?:[^`]{0,46}[^\s`])?|[^\s`])`([^\w]|$)/;
 
 // Unordered list.
 const ul = /(?:^|\n)\s{0,5}-\s{1}[^\n]+\n\s{0,15}-\s/;

package/src/blocks/ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent.ts

@@ -31,7 +31,8 @@ const BulletListItemBlockContent = createStronglyTypedTiptapNode({
           const blockInfo = getBlockInfoFromSelection(state);
           if (
             !blockInfo.isBlockContainer ||
-            blockInfo.blockContent.node.type.spec.content !== "inline*"
+            blockInfo.blockContent.node.type.spec.content !== "inline*" ||
+            blockInfo.blockNoteType === "heading"
           ) {
             return;
           }

package/src/blocks/ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent.ts

@@ -50,7 +50,8 @@ const NumberedListItemBlockContent = createStronglyTypedTiptapNode({
           if (
             !blockInfo.isBlockContainer ||
             blockInfo.blockContent.node.type.spec.content !== "inline*" ||
-            blockInfo.blockNoteType === "numberedListItem"
+            blockInfo.blockNoteType === "numberedListItem" ||
+            blockInfo.blockNoteType === "heading"
           ) {
             return;
           }

package/src/blocks/QuoteBlockContent/QuoteBlockContent.ts

@@ -2,11 +2,15 @@ import {
   createBlockSpecFromStronglyTypedTiptapNode,
   createStronglyTypedTiptapNode,
 } from "../../schema/index.js";
-import { createDefaultBlockDOMOutputSpec } from "../defaultBlockHelpers.js";
+import {
+  createDefaultBlockDOMOutputSpec,
+  mergeParagraphs,
+} from "../defaultBlockHelpers.js";
 import { defaultProps } from "../defaultProps.js";
 import { getBlockInfoFromSelection } from "../../api/getBlockInfoFromPos.js";
 import { updateBlockCommand } from "../../api/blockManipulation/commands/updateBlock/updateBlock.js";
 import { InputRule } from "@tiptap/core";
+import { DOMParser } from "prosemirror-model";
 
 export const quotePropSchema = {
   ...defaultProps,
@@ -76,6 +80,24 @@ export const QuoteBlockContent = createStronglyTypedTiptapNode({
       {
         tag: "blockquote",
         node: "quote",
+        getContent: (node, schema) => {
+          // Parse the blockquote content as inline content
+          const element = node as HTMLElement;
+
+          // Clone to avoid modifying the original
+          const clone = element.cloneNode(true) as HTMLElement;
+
+          // Merge multiple paragraphs into one with line breaks
+          mergeParagraphs(clone);
+
+          // Parse the content directly as a paragraph to extract inline content
+          const parser = DOMParser.fromSchema(schema);
+          const parsed = parser.parse(clone, {
+            topNode: schema.nodes.paragraph.create(),
+          });
+
+          return parsed.content;
+        },
       },
     ];
   },

package/src/blocks/ToggleWrapper/createToggleWrapper.ts

@@ -41,6 +41,7 @@ export const createToggleWrapper = (
 
   const toggleButton = document.createElement("button");
   toggleButton.className = "bn-toggle-button";
+  toggleButton.type = "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>';
@@ -75,6 +76,7 @@ export const createToggleWrapper = (
 
   const toggleAddBlockButton = document.createElement("button");
   toggleAddBlockButton.className = "bn-toggle-add-block-button";
+  toggleAddBlockButton.type = "button";
   toggleAddBlockButton.textContent = "Empty toggle. Click to add a block.";
   const toggleAddBlockButtonMouseDown = (event: MouseEvent) =>
     event.preventDefault();