@blocknote/core 0.38.0 → 0.39.0

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<

package/src/blocks/Paragraph/block.ts

@@ -0,0 +1,80 @@
+import { createBlockNoteExtension } from "../../editor/BlockNoteExtension.js";
+import { createBlockConfig, createBlockSpec } from "../../schema/index.js";
+import {
+  addDefaultPropsExternalHTML,
+  defaultProps,
+  parseDefaultProps,
+} from "../defaultProps.js";
+
+export type ParagraphBlockConfig = ReturnType<
+  typeof createParagraphBlockConfig
+>;
+
+export const createParagraphBlockConfig = createBlockConfig(
+  () =>
+    ({
+      type: "paragraph" as const,
+      propSchema: defaultProps,
+      content: "inline" as const,
+    }) as const,
+);
+
+export const createParagraphBlockSpec = createBlockSpec(
+  createParagraphBlockConfig,
+  {
+    meta: {
+      isolating: false,
+    },
+    parse: (e) => {
+      if (e.tagName !== "P") {
+        return undefined;
+      }
+
+      // Edge case for things like images directly inside paragraph.
+      if (!e.textContent?.trim()) {
+        return undefined;
+      }
+
+      return parseDefaultProps(e);
+    },
+    render: () => {
+      const dom = document.createElement("p");
+      return {
+        dom,
+        contentDOM: dom,
+      };
+    },
+    toExternalHTML: (block) => {
+      const dom = document.createElement("p");
+      addDefaultPropsExternalHTML(block.props, dom);
+      return {
+        dom,
+        contentDOM: dom,
+      };
+    },
+    runsBefore: ["default"],
+  },
+  [
+    createBlockNoteExtension({
+      key: "paragraph-shortcuts",
+      keyboardShortcuts: {
+        "Mod-Alt-0": ({ editor }) => {
+          const cursorPosition = editor.getTextCursorPosition();
+
+          if (
+            editor.schema.blockSchema[cursorPosition.block.type].content !==
+            "inline"
+          ) {
+            return false;
+          }
+
+          editor.updateBlock(cursorPosition.block, {
+            type: "paragraph",
+            props: {},
+          });
+          return true;
+        },
+      },
+    }),
+  ],
+);

package/src/blocks/Quote/block.ts

@@ -0,0 +1,90 @@
+import { createBlockNoteExtension } from "../../editor/BlockNoteExtension.js";
+import { createBlockConfig, createBlockSpec } from "../../schema/index.js";
+import {
+  addDefaultPropsExternalHTML,
+  defaultProps,
+  parseDefaultProps,
+} from "../defaultProps.js";
+
+export type QuoteBlockConfig = ReturnType<typeof createQuoteBlockConfig>;
+
+export const createQuoteBlockConfig = createBlockConfig(
+  () =>
+    ({
+      type: "quote" as const,
+      propSchema: {
+        backgroundColor: defaultProps.backgroundColor,
+        textColor: defaultProps.textColor,
+      },
+      content: "inline" as const,
+    }) as const,
+);
+
+export const createQuoteBlockSpec = createBlockSpec(
+  createQuoteBlockConfig,
+  {
+    meta: {
+      isolating: false,
+    },
+    parse(element) {
+      if (element.tagName === "BLOCKQUOTE") {
+        const { backgroundColor, textColor } = parseDefaultProps(element);
+
+        return { backgroundColor, textColor };
+      }
+
+      return undefined;
+    },
+    render() {
+      const quote = document.createElement("blockquote");
+
+      return {
+        dom: quote,
+        contentDOM: quote,
+      };
+    },
+    toExternalHTML(block) {
+      const quote = document.createElement("blockquote");
+      addDefaultPropsExternalHTML(block.props, quote);
+
+      return {
+        dom: quote,
+        contentDOM: quote,
+      };
+    },
+  },
+  [
+    createBlockNoteExtension({
+      key: "quote-block-shortcuts",
+      keyboardShortcuts: {
+        "Mod-Alt-q": ({ editor }) => {
+          const cursorPosition = editor.getTextCursorPosition();
+
+          if (
+            editor.schema.blockSchema[cursorPosition.block.type].content !==
+            "inline"
+          ) {
+            return false;
+          }
+
+          editor.updateBlock(cursorPosition.block, {
+            type: "quote",
+            props: {},
+          });
+          return true;
+        },
+      },
+      inputRules: [
+        {
+          find: new RegExp(`^>\\s$`),
+          replace() {
+            return {
+              type: "quote",
+              props: {},
+            };
+          },
+        },
+      ],
+    }),
+  ],
+);