@blocknote/core 0.37.0 → 0.39.0

package/src/blocks/ListItem/CheckListItem/block.ts

@@ -0,0 +1,175 @@
+import { createBlockNoteExtension } from "../../../editor/BlockNoteExtension.js";
+import { createBlockConfig, createBlockSpec } from "../../../schema/index.js";
+import {
+  addDefaultPropsExternalHTML,
+  defaultProps,
+  parseDefaultProps,
+} from "../../defaultProps.js";
+import { handleEnter } from "../../utils/listItemEnterHandler.js";
+import { getListItemContent } from "../getListItemContent.js";
+
+export type CheckListItemBlockConfig = ReturnType<
+  typeof createCheckListItemConfig
+>;
+
+export const createCheckListItemConfig = createBlockConfig(
+  () =>
+    ({
+      type: "checkListItem" as const,
+      propSchema: {
+        ...defaultProps,
+        checked: { default: false, type: "boolean" },
+      },
+      content: "inline",
+    }) as const,
+);
+
+export const createCheckListItemBlockSpec = createBlockSpec(
+  createCheckListItemConfig,
+  {
+    meta: {
+      isolating: false,
+    },
+    parse(element) {
+      if (element.tagName === "input") {
+        // Ignore if we already parsed an ancestor list item to avoid double-parsing.
+        if (element.closest("[data-content-type]") || element.closest("li")) {
+          return undefined;
+        }
+
+        if ((element as HTMLInputElement).type === "checkbox") {
+          return { checked: (element as HTMLInputElement).checked };
+        }
+        return undefined;
+      }
+      if (element.tagName !== "LI") {
+        return undefined;
+      }
+
+      const parent = element.parentElement;
+
+      if (parent === null) {
+        return undefined;
+      }
+
+      if (
+        parent.tagName === "UL" ||
+        (parent.tagName === "DIV" && parent.parentElement?.tagName === "UL")
+      ) {
+        const checkbox =
+          (element.querySelector("input[type=checkbox]") as HTMLInputElement) ||
+          null;
+
+        if (checkbox === null) {
+          return undefined;
+        }
+
+        return { ...parseDefaultProps(element), checked: checkbox.checked };
+      }
+
+      return;
+    },
+    // As `li` elements can contain multiple paragraphs, we need to merge their contents
+    // into a single one so that ProseMirror can parse everything correctly.
+    parseContent: ({ el, schema }) =>
+      getListItemContent(el, schema, "checkListItem"),
+    render(block, editor) {
+      const dom = document.createDocumentFragment();
+      const checkbox = document.createElement("input");
+      checkbox.type = "checkbox";
+      checkbox.checked = block.props.checked;
+      if (block.props.checked) {
+        checkbox.setAttribute("checked", "");
+      }
+      checkbox.addEventListener("change", () => {
+        editor.updateBlock(block, { props: { checked: !block.props.checked } });
+      });
+      // We use a <p> tag, because for <li> tags we'd need a <ul> element to put
+      // them in to be semantically correct, which we can't have due to the
+      // schema.
+      const paragraph = document.createElement("p");
+
+      dom.appendChild(checkbox);
+      dom.appendChild(paragraph);
+
+      return {
+        dom,
+        contentDOM: paragraph,
+      };
+    },
+    toExternalHTML(block) {
+      const dom = document.createElement("li");
+      const checkbox = document.createElement("input");
+      checkbox.type = "checkbox";
+      checkbox.checked = block.props.checked;
+      if (block.props.checked) {
+        checkbox.setAttribute("checked", "");
+      }
+      // We use a <p> tag, because for <li> tags we'd need a <ul> element to put
+      // them in to be semantically correct, which we can't have due to the
+      // schema.
+      const paragraph = document.createElement("p");
+      addDefaultPropsExternalHTML(block.props, dom);
+
+      dom.appendChild(checkbox);
+      dom.appendChild(paragraph);
+
+      return {
+        dom,
+        contentDOM: paragraph,
+      };
+    },
+    runsBefore: ["bulletListItem"],
+  },
+  [
+    createBlockNoteExtension({
+      key: "check-list-item-shortcuts",
+      keyboardShortcuts: {
+        Enter: ({ editor }) => {
+          return handleEnter(editor, "checkListItem");
+        },
+        "Mod-Shift-9": ({ editor }) => {
+          const cursorPosition = editor.getTextCursorPosition();
+
+          if (
+            editor.schema.blockSchema[cursorPosition.block.type].content !==
+            "inline"
+          ) {
+            return false;
+          }
+
+          editor.updateBlock(cursorPosition.block, {
+            type: "checkListItem",
+            props: {},
+          });
+          return true;
+        },
+      },
+      inputRules: [
+        {
+          find: new RegExp(`\\[\\s*\\]\\s$`),
+          replace() {
+            return {
+              type: "checkListItem",
+              props: {
+                checked: false,
+              },
+              content: [],
+            };
+          },
+        },
+        {
+          find: new RegExp(`\\[[Xx]\\]\\s$`),
+          replace() {
+            return {
+              type: "checkListItem",
+              props: {
+                checked: true,
+              },
+            };
+          },
+        },
+      ],
+    }),
+  ],
+);

package/src/blocks/ListItem/NumberedListItem/IndexingPlugin.ts

@@ -0,0 +1,173 @@
+import type { Node } from "@tiptap/pm/model";
+import type { Transaction } from "@tiptap/pm/state";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+
+import { getBlockInfo } from "../../../api/getBlockInfoFromPos.js";
+
+// Loosely based on https://github.com/ueberdosis/tiptap/blob/7ac01ef0b816a535e903b5ca92492bff110a71ae/packages/extension-mathematics/src/MathematicsPlugin.ts (MIT)
+
+type DecoSpec = {
+  index: number;
+  isFirst: boolean;
+  hasStart: boolean;
+  side: number;
+};
+
+type Deco = Omit<Decoration, "spec"> & { spec: DecoSpec };
+
+/**
+ * Calculate the index for a numbered list item based on its position and previous siblings
+ */
+function calculateListItemIndex(
+  node: Node,
+  pos: number,
+  tr: Transaction,
+  map: Map<Node, number>,
+): { index: number; isFirst: boolean; hasStart: boolean } {
+  let index: number = node.firstChild!.attrs["start"] || 1;
+  let isFirst = true;
+  const hasStart = !!node.firstChild!.attrs["start"];
+
+  const blockInfo = getBlockInfo({
+    posBeforeNode: pos,
+    node,
+  });
+
+  if (!blockInfo.isBlockContainer) {
+    throw new Error("impossible");
+  }
+
+  // Check if this block is the start of a new ordered list
+  const prevBlock = tr.doc.resolve(blockInfo.bnBlock.beforePos).nodeBefore;
+  const prevBlockIndex = prevBlock ? map.get(prevBlock) : undefined;
+
+  if (prevBlockIndex !== undefined) {
+    index = prevBlockIndex + 1;
+    isFirst = false;
+  } else if (prevBlock) {
+    // Because we only check the affected ranges, we may need to walk backwards to find the previous block's index
+    // We can't just rely on the map, because the map is reset every `apply` call
+    const prevBlockInfo = getBlockInfo({
+      posBeforeNode: blockInfo.bnBlock.beforePos - prevBlock.nodeSize,
+      node: prevBlock,
+    });
+
+    const isPrevBlockOrderedListItem =
+      prevBlockInfo.blockNoteType === "numberedListItem";
+    if (isPrevBlockOrderedListItem) {
+      // recurse to get the index of the previous block
+      const itemIndex = calculateListItemIndex(
+        prevBlock,
+        blockInfo.bnBlock.beforePos - prevBlock.nodeSize,
+        tr,
+        map,
+      );
+      index = itemIndex.index + 1;
+      isFirst = false;
+    }
+  }
+  // Note: we set the map late, so that when we recurse, we can rely on the map to get the previous block's index in one lookup
+  map.set(node, index);
+
+  return { index, isFirst, hasStart };
+}
+
+/**
+ * Get the decorations for the current state based on the previous state,
+ * and the transaction that was applied to get to the current state
+ */
+function getDecorations(
+  tr: Transaction,
+  previousPluginState: { decorations: DecorationSet },
+) {
+  const map = new Map<Node, number>();
+
+  const nextDecorationSet = previousPluginState.decorations.map(
+    tr.mapping,
+    tr.doc,
+  );
+  const decorationsToAdd = [] as Deco[];
+
+  tr.doc.nodesBetween(0, tr.doc.nodeSize - 2, (node, pos) => {
+    if (
+      node.type.name === "blockContainer" &&
+      node.firstChild!.type.name === "numberedListItem"
+    ) {
+      const { index, isFirst, hasStart } = calculateListItemIndex(
+        node,
+        pos,
+        tr,
+        map,
+      );
+
+      // Check if decoration already exists with the same properties (for perf reasons)
+      const existingDecorations = nextDecorationSet.find(
+        pos,
+        pos + node.nodeSize,
+        (deco: DecoSpec) =>
+          deco.index === index &&
+          deco.isFirst === isFirst &&
+          deco.hasStart === hasStart,
+      );
+
+      if (existingDecorations.length === 0) {
+        // Create a widget decoration to display the index
+        decorationsToAdd.push(
+          // move in by 1 to account for the block container
+          Decoration.node(pos + 1, pos + node.nodeSize - 1, {
+            "data-index": index.toString(),
+          }),
+        );
+      }
+    }
+  });
+
+  // Remove any decorations that exist at the same position, they will be replaced by the new decorations
+  const decorationsToRemove = decorationsToAdd.flatMap((deco) =>
+    nextDecorationSet.find(deco.from, deco.to),
+  );
+
+  return {
+    decorations: nextDecorationSet
+      // Remove existing decorations that are going to be replaced
+      .remove(decorationsToRemove)
+      // Add any new decorations
+      .add(tr.doc, decorationsToAdd),
+  };
+}
+
+/**
+ * This plugin adds decorations to numbered list items to display their index.
+ */
+export const NumberedListIndexingDecorationPlugin = () => {
+  return new Plugin<{ decorations: DecorationSet }>({
+    key: new PluginKey("numbered-list-indexing-decorations"),
+
+    state: {
+      init(_config, state) {
+        // We create an empty transaction to get the decorations for the initial state based on the initial content
+        return getDecorations(state.tr, {
+          decorations: DecorationSet.empty,
+        });
+      },
+      apply(tr, previousPluginState) {
+        if (
+          !tr.docChanged &&
+          !tr.selectionSet &&
+          previousPluginState.decorations
+        ) {
+          // Just reuse the existing decorations, since nothing should have changed
+          return previousPluginState;
+        }
+        return getDecorations(tr, previousPluginState);
+      },
+    },
+
+    props: {
+      decorations(state) {
+        return this.getState(state)?.decorations ?? DecorationSet.empty;
+      },
+    },
+  });
+};

package/src/blocks/ListItem/NumberedListItem/block.ts

@@ -0,0 +1,133 @@
+import { createBlockNoteExtension } from "../../../editor/BlockNoteExtension.js";
+import { createBlockConfig, createBlockSpec } from "../../../schema/index.js";
+import {
+  addDefaultPropsExternalHTML,
+  defaultProps,
+  parseDefaultProps,
+} from "../../defaultProps.js";
+import { handleEnter } from "../../utils/listItemEnterHandler.js";
+import { getListItemContent } from "../getListItemContent.js";
+import { NumberedListIndexingDecorationPlugin } from "./IndexingPlugin.js";
+
+export type NumberedListItemBlockConfig = ReturnType<
+  typeof createNumberedListItemBlockConfig
+>;
+
+export const createNumberedListItemBlockConfig = createBlockConfig(
+  () =>
+    ({
+      type: "numberedListItem" as const,
+      propSchema: {
+        ...defaultProps,
+        start: { default: undefined, type: "number" } as const,
+      },
+      content: "inline",
+    }) as const,
+);
+
+export const createNumberedListItemBlockSpec = createBlockSpec(
+  createNumberedListItemBlockConfig,
+  {
+    meta: {
+      isolating: false,
+    },
+    parse(element) {
+      if (element.tagName !== "LI") {
+        return undefined;
+      }
+
+      const parent = element.parentElement;
+
+      if (parent === null) {
+        return undefined;
+      }
+
+      if (
+        parent.tagName === "OL" ||
+        (parent.tagName === "DIV" && parent.parentElement?.tagName === "OL")
+      ) {
+        const startIndex = parseInt(parent.getAttribute("start") || "1");
+
+        const defaultProps = parseDefaultProps(element);
+
+        if (element.previousElementSibling || startIndex === 1) {
+          return defaultProps;
+        }
+
+        return {
+          ...defaultProps,
+          start: startIndex,
+        };
+      }
+
+      return undefined;
+    },
+    // As `li` elements can contain multiple paragraphs, we need to merge their contents
+    // into a single one so that ProseMirror can parse everything correctly.
+    parseContent: ({ el, schema }) =>
+      getListItemContent(el, schema, "numberedListItem"),
+    render() {
+      // We use a <p> tag, because for <li> tags we'd need a <ul> element to put
+      // them in to be semantically correct, which we can't have due to the
+      // schema.
+      const dom = document.createElement("p");
+
+      return {
+        dom,
+        contentDOM: dom,
+      };
+    },
+    toExternalHTML(block) {
+      const li = document.createElement("li");
+      const p = document.createElement("p");
+      addDefaultPropsExternalHTML(block.props, li);
+      li.appendChild(p);
+
+      return {
+        dom: li,
+        contentDOM: p,
+      };
+    },
+  },
+  [
+    createBlockNoteExtension({
+      key: "numbered-list-item-shortcuts",
+      inputRules: [
+        {
+          find: new RegExp(`^(\\d+)\\.\\s$`),
+          replace({ match }) {
+            const start = parseInt(match[1]);
+            return {
+              type: "numberedListItem",
+              props: {
+                start: start !== 1 ? start : undefined,
+              },
+            };
+          },
+        },
+      ],
+      keyboardShortcuts: {
+        Enter: ({ editor }) => {
+          return handleEnter(editor, "numberedListItem");
+        },
+        "Mod-Shift-7": ({ editor }) => {
+          const cursorPosition = editor.getTextCursorPosition();
+
+          if (
+            editor.schema.blockSchema[cursorPosition.block.type].content !==
+            "inline"
+          ) {
+            return false;
+          }
+
+          editor.updateBlock(cursorPosition.block, {
+            type: "numberedListItem",
+            props: {},
+          });
+          return true;
+        },
+      },
+      plugins: [NumberedListIndexingDecorationPlugin()],
+    }),
+  ],
+);

package/src/blocks/ListItem/ToggleListItem/block.ts

@@ -0,0 +1,78 @@
+import { createBlockNoteExtension } from "../../../editor/BlockNoteExtension.js";
+import { createBlockConfig, createBlockSpec } from "../../../schema/index.js";
+import {
+  addDefaultPropsExternalHTML,
+  defaultProps,
+} from "../../defaultProps.js";
+import { createToggleWrapper } from "../../ToggleWrapper/createToggleWrapper.js";
+import { handleEnter } from "../../utils/listItemEnterHandler.js";
+
+export type ToggleListItemBlockConfig = ReturnType<
+  typeof createToggleListItemBlockConfig
+>;
+
+export const createToggleListItemBlockConfig = createBlockConfig(
+  () =>
+    ({
+      type: "toggleListItem" as const,
+      propSchema: {
+        ...defaultProps,
+      },
+      content: "inline" as const,
+    }) as const,
+);
+
+export const createToggleListItemBlockSpec = createBlockSpec(
+  createToggleListItemBlockConfig,
+  {
+    meta: {
+      isolating: false,
+    },
+    render(block, editor) {
+      const paragraphEl = document.createElement("p");
+      const toggleWrapper = createToggleWrapper(
+        block as any,
+        editor,
+        paragraphEl,
+      );
+      return { ...toggleWrapper, contentDOM: paragraphEl };
+    },
+    toExternalHTML(block) {
+      const li = document.createElement("li");
+      const p = document.createElement("p");
+      addDefaultPropsExternalHTML(block.props, li);
+      li.appendChild(p);
+
+      return {
+        dom: li,
+        contentDOM: p,
+      };
+    },
+  },
+  [
+    createBlockNoteExtension({
+      key: "toggle-list-item-shortcuts",
+      keyboardShortcuts: {
+        Enter: ({ editor }) => {
+          return handleEnter(editor, "toggleListItem");
+        },
+        "Mod-Shift-6": ({ editor }) => {
+          const cursorPosition = editor.getTextCursorPosition();
+
+          if (
+            editor.schema.blockSchema[cursorPosition.block.type].content !==
+            "inline"
+          ) {
+            return false;
+          }
+
+          editor.updateBlock(cursorPosition.block, {
+            type: "toggleListItem",
+            props: {},
+          });
+          return true;
+        },
+      },
+    }),
+  ],
+);

package/src/blocks/PageBreak/block.ts

@@ -0,0 +1,72 @@
+import {
+  BlockSchema,
+  createBlockConfig,
+  createBlockSpec,
+  InlineContentSchema,
+  StyleSchema,
+} from "../../schema/index.js";
+import { BlockNoteSchema } from "../BlockNoteSchema.js";
+
+export type PageBreakBlockConfig = ReturnType<
+  typeof createPageBreakBlockConfig
+>;
+
+export const createPageBreakBlockConfig = createBlockConfig(
+  () =>
+    ({
+      type: "pageBreak" as const,
+      propSchema: {},
+      content: "none",
+    }) as const,
+);
+
+export const createPageBreakBlockSpec = createBlockSpec(
+  createPageBreakBlockConfig,
+  {
+    parse(element) {
+      if (
+        element.tagName === "DIV" &&
+        element.hasAttribute("data-page-break")
+      ) {
+        return {};
+      }
+
+      return undefined;
+    },
+    render() {
+      const pageBreak = document.createElement("div");
+
+      pageBreak.setAttribute("data-page-break", "");
+
+      return {
+        dom: pageBreak,
+      };
+    },
+    toExternalHTML() {
+      const pageBreak = document.createElement("div");
+
+      pageBreak.setAttribute("data-page-break", "");
+
+      return {
+        dom: pageBreak,
+      };
+    },
+  },
+);
+
+/**
+ * Adds page break support to the given schema.
+ */
+export const withPageBreak = <
+  B extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema,
+>(
+  schema: BlockNoteSchema<B, I, S>,
+) => {
+  return schema.extend({
+    blockSpecs: {
+      pageBreak: createPageBreakBlockSpec(),
+    },
+  });
+};

package/src/blocks/{PageBreakBlockContent → PageBreak}/getPageBreakSlashMenuItems.ts

@@ -6,19 +6,21 @@ import {
   InlineContentSchema,
   StyleSchema,
 } from "../../schema/index.js";
-import { pageBreakSchema } from "./schema.js";
+import { createPageBreakBlockConfig } from "./block.js";
 
 export function checkPageBreakBlocksInSchema<
   I extends InlineContentSchema,
   S extends StyleSchema,
 >(
   editor: BlockNoteEditor<any, I, S>,
-): editor is BlockNoteEditor<typeof pageBreakSchema.blockSchema, I, S> {
-  return (
-    "pageBreak" in editor.schema.blockSchema &&
-    editor.schema.blockSchema["pageBreak"] ===
-      pageBreakSchema.blockSchema["pageBreak"]
-  );
+): editor is BlockNoteEditor<
+  {
+    pageBreak: ReturnType<typeof createPageBreakBlockConfig>;
+  },
+  I,
+  S
+> {
+  return "pageBreak" in editor.schema.blockSchema;
 }
 
 export function getPageBreakSlashMenuItems<