@blocknote/core 0.38.0 → 0.39.1

package/src/blocks/ListItemBlockContent/CheckListItemBlockContent/CheckListItemBlockContent.ts

@@ -1,299 +0,0 @@
-import { InputRule } from "@tiptap/core";
-import { updateBlockCommand } from "../../../api/blockManipulation/commands/updateBlock/updateBlock.js";
-import {
-  getBlockInfoFromSelection,
-  getNearestBlockPos,
-} from "../../../api/getBlockInfoFromPos.js";
-import {
-  PropSchema,
-  createBlockSpecFromStronglyTypedTiptapNode,
-  createStronglyTypedTiptapNode,
-  propsToAttributes,
-} from "../../../schema/index.js";
-import { createDefaultBlockDOMOutputSpec } from "../../defaultBlockHelpers.js";
-import { defaultProps } from "../../defaultProps.js";
-import { getListItemContent } from "../getListItemContent.js";
-import { handleEnter } from "../ListItemKeyboardShortcuts.js";
-
-export const checkListItemPropSchema = {
-  ...defaultProps,
-  checked: {
-    default: false,
-  },
-} satisfies PropSchema;
-
-const checkListItemBlockContent = createStronglyTypedTiptapNode({
-  name: "checkListItem",
-  content: "inline*",
-  group: "blockContent",
-
-  addAttributes() {
-    return propsToAttributes(checkListItemPropSchema);
-  },
-
-  addInputRules() {
-    return [
-      // Creates a checklist when starting with "[]" or "[X]".
-      new InputRule({
-        find: new RegExp(`\\[\\s*\\]\\s$`),
-        handler: ({ state, chain, range }) => {
-          const blockInfo = getBlockInfoFromSelection(state);
-          if (
-            !blockInfo.isBlockContainer ||
-            blockInfo.blockContent.node.type.spec.content !== "inline*"
-          ) {
-            return;
-          }
-
-          chain()
-            .command(
-              updateBlockCommand(blockInfo.bnBlock.beforePos, {
-                type: "checkListItem",
-                props: {
-                  checked: false as any,
-                },
-              }),
-            )
-            // Removes the characters used to set the list.
-            .deleteRange({ from: range.from, to: range.to });
-        },
-      }),
-      new InputRule({
-        find: new RegExp(`\\[[Xx]\\]\\s$`),
-        handler: ({ state, chain, range }) => {
-          const blockInfo = getBlockInfoFromSelection(state);
-
-          if (
-            !blockInfo.isBlockContainer ||
-            blockInfo.blockContent.node.type.spec.content !== "inline*"
-          ) {
-            return;
-          }
-
-          chain()
-            .command(
-              updateBlockCommand(blockInfo.bnBlock.beforePos, {
-                type: "checkListItem",
-                props: {
-                  checked: true as any,
-                },
-              }),
-            )
-            // Removes the characters used to set the list.
-            .deleteRange({ from: range.from, to: range.to });
-        },
-      }),
-    ];
-  },
-
-  addKeyboardShortcuts() {
-    return {
-      Enter: () => handleEnter(this.options.editor),
-      "Mod-Shift-9": () => {
-        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: "checkListItem",
-            props: {},
-          }),
-        );
-      },
-    };
-  },
-
-  parseHTML() {
-    return [
-      // Parse from internal HTML.
-      {
-        tag: "div[data-content-type=" + this.name + "]",
-        contentElement: ".bn-inline-content",
-      },
-      // Parse from external HTML.
-      {
-        tag: "input",
-        getAttrs: (element) => {
-          if (typeof element === "string") {
-            return false;
-          }
-
-          // Ignore if we already parsed an ancestor list item to avoid double-parsing.
-          if (element.closest("[data-content-type]") || element.closest("li")) {
-            return false;
-          }
-
-          if ((element as HTMLInputElement).type === "checkbox") {
-            return { checked: (element as HTMLInputElement).checked };
-          }
-
-          return false;
-        },
-        node: "checkListItem",
-      },
-      {
-        tag: "li",
-        getAttrs: (element) => {
-          if (typeof element === "string") {
-            return false;
-          }
-
-          const parent = element.parentElement;
-
-          if (parent === null) {
-            return false;
-          }
-
-          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 false;
-            }
-
-            return { checked: checkbox.checked };
-          }
-
-          return false;
-        },
-        // As `li` elements can contain multiple paragraphs, we need to merge their contents
-        // into a single one so that ProseMirror can parse everything correctly.
-        getContent: (node, schema) =>
-          getListItemContent(node, schema, this.name),
-        node: "checkListItem",
-      },
-    ];
-  },
-
-  // Since there is no HTML checklist element, there isn't really any
-  // standardization for what checklists should look like in the DOM. GDocs'
-  // and Notion's aren't cross compatible, for example. This implementation
-  // has a semantically correct DOM structure (though missing a label for the
-  // checkbox) which is also converted correctly to Markdown by remark.
-  renderHTML({ node, HTMLAttributes }) {
-    const checkbox = document.createElement("input");
-    checkbox.type = "checkbox";
-    checkbox.checked = node.attrs.checked;
-    if (node.attrs.checked) {
-      checkbox.setAttribute("checked", "");
-    }
-
-    const { dom, contentDOM } = createDefaultBlockDOMOutputSpec(
-      this.name,
-      "p",
-      {
-        ...(this.options.domAttributes?.blockContent || {}),
-        ...HTMLAttributes,
-      },
-      this.options.domAttributes?.inlineContent || {},
-    );
-
-    dom.insertBefore(checkbox, contentDOM);
-
-    return { dom, contentDOM };
-  },
-
-  // Need to render node view since the checkbox needs to be able to update the
-  // node. This is only possible with a node view as it exposes `getPos`.
-  addNodeView() {
-    return ({ node, getPos, editor, HTMLAttributes }) => {
-      // Need to wrap certain elements in a div or keyboard navigation gets
-      // confused.
-      const wrapper = document.createElement("div");
-      const checkboxWrapper = document.createElement("div");
-      checkboxWrapper.contentEditable = "false";
-
-      const checkbox = document.createElement("input");
-      checkbox.type = "checkbox";
-      checkbox.checked = node.attrs.checked;
-      if (node.attrs.checked) {
-        checkbox.setAttribute("checked", "");
-      }
-
-      const changeHandler = () => {
-        if (!editor.isEditable) {
-          // This seems like the most effective way of blocking the checkbox
-          // from being toggled, as event.preventDefault() does not stop it for
-          // "click" or "change" events.
-          checkbox.checked = !checkbox.checked;
-          return;
-        }
-
-        // TODO: test
-        if (typeof getPos !== "boolean") {
-          const beforeBlockContainerPos = getNearestBlockPos(
-            editor.state.doc,
-            getPos(),
-          );
-
-          if (beforeBlockContainerPos.node.type.name !== "blockContainer") {
-            throw new Error(
-              `Expected blockContainer node, got ${beforeBlockContainerPos.node.type.name}`,
-            );
-          }
-
-          this.editor.commands.command(
-            updateBlockCommand(beforeBlockContainerPos.posBeforeNode, {
-              type: "checkListItem",
-              props: {
-                checked: checkbox.checked as any,
-              },
-            }),
-          );
-        }
-      };
-      checkbox.addEventListener("change", changeHandler);
-
-      const { dom, contentDOM } = createDefaultBlockDOMOutputSpec(
-        this.name,
-        "p",
-        {
-          ...(this.options.domAttributes?.blockContent || {}),
-          ...HTMLAttributes,
-        },
-        this.options.domAttributes?.inlineContent || {},
-      );
-
-      if (typeof getPos !== "boolean") {
-        // Since `node` is a blockContent node, we have to get the block ID from
-        // the parent blockContainer node. This means we can't add the label in
-        // `renderHTML` as we can't use `getPos` and therefore can't get the
-        // parent blockContainer node.
-        const blockID = this.editor.state.doc.resolve(getPos()).node().attrs.id;
-        const label = "label-" + blockID;
-        checkbox.setAttribute("aria-labelledby", label);
-        contentDOM.id = label;
-      }
-
-      dom.removeChild(contentDOM);
-      dom.appendChild(wrapper);
-      wrapper.appendChild(checkboxWrapper);
-      wrapper.appendChild(contentDOM);
-      checkboxWrapper.appendChild(checkbox);
-
-      return {
-        dom,
-        contentDOM,
-        destroy: () => {
-          checkbox.removeEventListener("change", changeHandler);
-        },
-      };
-    };
-  },
-});
-
-export const CheckListItem = createBlockSpecFromStronglyTypedTiptapNode(
-  checkListItemBlockContent,
-  checkListItemPropSchema,
-);

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

@@ -1,86 +0,0 @@
-import { Plugin, PluginKey } from "prosemirror-state";
-import { getBlockInfo } from "../../../api/getBlockInfoFromPos.js";
-
-// ProseMirror Plugin which automatically assigns indices to ordered list items per nesting level.
-const PLUGIN_KEY = new PluginKey(`numbered-list-indexing`);
-export const NumberedListIndexingPlugin = () => {
-  return new Plugin({
-    key: PLUGIN_KEY,
-    appendTransaction: (_transactions, _oldState, newState) => {
-      const tr = newState.tr;
-      tr.setMeta("numberedListIndexing", true);
-
-      let modified = false;
-
-      // Traverses each node the doc using DFS, so blocks which are on the same nesting level will be traversed in the
-      // same order they appear. This means the index of each list item block can be calculated by incrementing the
-      // index of the previous list item block.
-      newState.doc.descendants((node, pos) => {
-        if (
-          node.type.name === "blockContainer" &&
-          node.firstChild!.type.name === "numberedListItem"
-        ) {
-          let newIndex = `${node.firstChild!.attrs["start"] || 1}`;
-
-          const blockInfo = getBlockInfo({
-            posBeforeNode: pos,
-            node,
-          });
-
-          if (!blockInfo.isBlockContainer) {
-            throw new Error("impossible");
-          }
-
-          // Checks if this block is the start of a new ordered list, i.e. if it's the first block in the document, the
-          // first block in its nesting level, or the previous block is not an ordered list item.
-
-          const prevBlock = tr.doc.resolve(
-            blockInfo.bnBlock.beforePos,
-          ).nodeBefore;
-
-          if (prevBlock) {
-            const prevBlockInfo = getBlockInfo({
-              posBeforeNode: blockInfo.bnBlock.beforePos - prevBlock.nodeSize,
-              node: prevBlock,
-            });
-
-            const isPrevBlockOrderedListItem =
-              prevBlockInfo.blockNoteType === "numberedListItem";
-
-            if (isPrevBlockOrderedListItem) {
-              if (!prevBlockInfo.isBlockContainer) {
-                throw new Error("impossible");
-              }
-              const prevBlockIndex =
-                prevBlockInfo.blockContent.node.attrs["index"];
-
-              newIndex = (parseInt(prevBlockIndex) + 1).toString();
-            }
-          }
-
-          const contentNode = blockInfo.blockContent.node;
-          const index = contentNode.attrs["index"];
-          const isFirst =
-            prevBlock?.firstChild?.type.name !== "numberedListItem";
-
-          if (index !== newIndex || (contentNode.attrs.start && !isFirst)) {
-            modified = true;
-
-            const { start, ...attrs } = contentNode.attrs;
-
-            tr.setNodeMarkup(blockInfo.blockContent.beforePos, undefined, {
-              ...attrs,
-              index: newIndex,
-              ...(typeof start === "number" &&
-                isFirst && {
-                  start,
-                }),
-            });
-          }
-        }
-      });
-
-      return modified ? tr : null;
-    },
-  });
-};

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

@@ -1,172 +0,0 @@
-import { InputRule } from "@tiptap/core";
-import { updateBlockCommand } from "../../../api/blockManipulation/commands/updateBlock/updateBlock.js";
-import { getBlockInfoFromSelection } from "../../../api/getBlockInfoFromPos.js";
-import {
-  PropSchema,
-  createBlockSpecFromStronglyTypedTiptapNode,
-  createStronglyTypedTiptapNode,
-  propsToAttributes,
-} from "../../../schema/index.js";
-import { createDefaultBlockDOMOutputSpec } from "../../defaultBlockHelpers.js";
-import { defaultProps } from "../../defaultProps.js";
-import { getListItemContent } from "../getListItemContent.js";
-import { handleEnter } from "../ListItemKeyboardShortcuts.js";
-import { NumberedListIndexingPlugin } from "./NumberedListIndexingPlugin.js";
-
-export const numberedListItemPropSchema = {
-  ...defaultProps,
-  start: { default: undefined, type: "number" },
-} satisfies PropSchema;
-
-const NumberedListItemBlockContent = createStronglyTypedTiptapNode({
-  name: "numberedListItem",
-  content: "inline*",
-  group: "blockContent",
-  priority: 90,
-  addAttributes() {
-    return {
-      ...propsToAttributes(numberedListItemPropSchema),
-      // the index attribute is only used internally (it's not part of the blocknote schema)
-      // that's why it's defined explicitly here, and not part of the prop schema
-      index: {
-        default: null,
-        parseHTML: (element) => element.getAttribute("data-index"),
-        renderHTML: (attributes) => {
-          return {
-            "data-index": attributes.index,
-          };
-        },
-      },
-    };
-  },
-
-  addInputRules() {
-    return [
-      // Creates an ordered list when starting with "1.".
-      new InputRule({
-        find: new RegExp(`^(\\d+)\\.\\s$`),
-        handler: ({ state, chain, range, match }) => {
-          const blockInfo = getBlockInfoFromSelection(state);
-          if (
-            !blockInfo.isBlockContainer ||
-            blockInfo.blockContent.node.type.spec.content !== "inline*" ||
-            blockInfo.blockNoteType === "numberedListItem" ||
-            blockInfo.blockNoteType === "heading"
-          ) {
-            return;
-          }
-          const startIndex = parseInt(match[1]);
-
-          chain()
-            .command(
-              updateBlockCommand(blockInfo.bnBlock.beforePos, {
-                type: "numberedListItem",
-                props:
-                  (startIndex === 1 && {}) ||
-                  ({
-                    start: startIndex,
-                  } as any),
-              }),
-            )
-            // Removes the "1." characters used to set the list.
-            .deleteRange({ from: range.from, to: range.to });
-        },
-      }),
-    ];
-  },
-
-  addKeyboardShortcuts() {
-    return {
-      Enter: () => handleEnter(this.options.editor),
-      "Mod-Shift-7": () => {
-        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: "numberedListItem",
-            props: {},
-          }),
-        );
-      },
-    };
-  },
-
-  addProseMirrorPlugins() {
-    return [NumberedListIndexingPlugin()];
-  },
-
-  parseHTML() {
-    return [
-      // Parse from internal HTML.
-      {
-        tag: "div[data-content-type=" + this.name + "]",
-        contentElement: ".bn-inline-content",
-      },
-      // Parse from external HTML.
-      {
-        tag: "li",
-        getAttrs: (element) => {
-          if (typeof element === "string") {
-            return false;
-          }
-
-          const parent = element.parentElement;
-
-          if (parent === null) {
-            return false;
-          }
-
-          if (
-            parent.tagName === "OL" ||
-            (parent.tagName === "DIV" && parent.parentElement?.tagName === "OL")
-          ) {
-            const startIndex =
-              parseInt(parent.getAttribute("start") || "1") || 1;
-
-            if (element.previousSibling || startIndex === 1) {
-              return {};
-            }
-
-            return {
-              start: startIndex,
-            };
-          }
-
-          return false;
-        },
-        // As `li` elements can contain multiple paragraphs, we need to merge their contents
-        // into a single one so that ProseMirror can parse everything correctly.
-        getContent: (node, schema) =>
-          getListItemContent(node, schema, this.name),
-        priority: 300,
-        node: "numberedListItem",
-      },
-    ];
-  },
-
-  renderHTML({ HTMLAttributes }) {
-    return createDefaultBlockDOMOutputSpec(
-      this.name,
-      // We use a <p> tag, because for <li> tags we'd need an <ol> element to
-      // put them in to be semantically correct, which we can't have due to the
-      // schema.
-      "p",
-      {
-        ...(this.options.domAttributes?.blockContent || {}),
-        ...HTMLAttributes,
-      },
-      this.options.domAttributes?.inlineContent || {},
-    );
-  },
-});
-
-export const NumberedListItem = createBlockSpecFromStronglyTypedTiptapNode(
-  NumberedListItemBlockContent,
-  numberedListItemPropSchema,
-);

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

@@ -1,104 +0,0 @@
-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/PageBreakBlockContent/PageBreakBlockContent.ts

@@ -1,49 +0,0 @@
-import {
-  createBlockSpec,
-  CustomBlockConfig,
-  Props,
-} from "../../schema/index.js";
-
-export const pageBreakConfig = {
-  type: "pageBreak" as const,
-  propSchema: {},
-  content: "none",
-  isFileBlock: false,
-  isSelectable: false,
-} satisfies CustomBlockConfig;
-export const pageBreakRender = () => {
-  const pageBreak = document.createElement("div");
-
-  pageBreak.className = "bn-page-break";
-  pageBreak.setAttribute("data-page-break", "");
-
-  return {
-    dom: pageBreak,
-  };
-};
-export const pageBreakParse = (
-  element: HTMLElement,
-): Partial<Props<typeof pageBreakConfig.propSchema>> | undefined => {
-  if (element.tagName === "DIV" && element.hasAttribute("data-page-break")) {
-    return {
-      type: "pageBreak",
-    };
-  }
-
-  return undefined;
-};
-export const pageBreakToExternalHTML = () => {
-  const pageBreak = document.createElement("div");
-
-  pageBreak.setAttribute("data-page-break", "");
-
-  return {
-    dom: pageBreak,
-  };
-};
-
-export const PageBreak = createBlockSpec(pageBreakConfig, {
-  render: pageBreakRender,
-  parse: pageBreakParse,
-  toExternalHTML: pageBreakToExternalHTML,
-});