@blocknote/core 0.37.0 → 0.39.0

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: {},
+            };
+          },
+        },
+      ],
+    }),
+  ],
+);

package/src/blocks/{TableBlockContent/TableBlockContent.ts → Table/block.ts}

@@ -1,12 +1,11 @@
 import { Node, mergeAttributes } from "@tiptap/core";
-import { TableCell } from "@tiptap/extension-table-cell";
-import { TableHeader } from "@tiptap/extension-table-header";
 import { DOMParser, Fragment, Node as PMNode, Schema } from "prosemirror-model";
 import { TableView } from "prosemirror-tables";
 import { NodeView } from "prosemirror-view";
+import { createBlockNoteExtension } from "../../editor/BlockNoteExtension.js";
 import {
-  createBlockSpecFromStronglyTypedTiptapNode,
-  createStronglyTypedTiptapNode,
+  BlockConfig,
+  createBlockSpecFromTiptapNode,
 } from "../../schema/index.js";
 import { mergeCSSClasses } from "../../util/browser.js";
 import { createDefaultBlockDOMOutputSpec } from "../defaultBlockHelpers.js";
@@ -17,7 +16,134 @@ export const tablePropSchema = {
   textColor: defaultProps.textColor,
 };
 
-export const TableBlockContent = createStronglyTypedTiptapNode({
+const TiptapTableHeader = Node.create<{
+  HTMLAttributes: Record<string, any>;
+}>({
+  name: "tableHeader",
+
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+    };
+  },
+
+  /**
+   * We allow table headers and cells to have multiple tableContent nodes because
+   * when merging cells, prosemirror-tables will concat the contents of the cells naively.
+   * This would cause that content to overflow into other cells when prosemirror tries to enforce the cell structure.
+   *
+   * So, we manually fix this up when reading back in the `nodeToBlock` and only ever place a single tableContent back into the cell.
+   */
+  content: "tableContent+",
+
+  addAttributes() {
+    return {
+      colspan: {
+        default: 1,
+      },
+      rowspan: {
+        default: 1,
+      },
+      colwidth: {
+        default: null,
+        parseHTML: (element) => {
+          const colwidth = element.getAttribute("colwidth");
+          const value = colwidth
+            ? colwidth.split(",").map((width) => parseInt(width, 10))
+            : null;
+
+          return value;
+        },
+      },
+    };
+  },
+
+  tableRole: "header_cell",
+
+  isolating: true,
+
+  parseHTML() {
+    return [
+      {
+        tag: "th",
+        // As `th` 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) =>
+          parseTableContent(node as HTMLElement, schema),
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "th",
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+      0,
+    ];
+  },
+});
+
+const TiptapTableCell = Node.create<{
+  HTMLAttributes: Record<string, any>;
+}>({
+  name: "tableCell",
+
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+    };
+  },
+
+  content: "tableContent+",
+
+  addAttributes() {
+    return {
+      colspan: {
+        default: 1,
+      },
+      rowspan: {
+        default: 1,
+      },
+      colwidth: {
+        default: null,
+        parseHTML: (element) => {
+          const colwidth = element.getAttribute("colwidth");
+          const value = colwidth
+            ? colwidth.split(",").map((width) => parseInt(width, 10))
+            : null;
+
+          return value;
+        },
+      },
+    };
+  },
+
+  tableRole: "cell",
+
+  isolating: true,
+
+  parseHTML() {
+    return [
+      {
+        tag: "td",
+        // As `td` 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) =>
+          parseTableContent(node as HTMLElement, schema),
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "td",
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+      0,
+    ];
+  },
+});
+
+const TiptapTableNode = Node.create({
   name: "table",
   content: "tableRow+",
   group: "blockContent",
@@ -134,7 +260,7 @@ export const TableBlockContent = createStronglyTypedTiptapNode({
   },
 });
 
-const TableParagraph = createStronglyTypedTiptapNode({
+const TiptapTableParagraph = Node.create({
   name: "tableParagraph",
   group: "tableContent",
   content: "inline*",
@@ -179,7 +305,9 @@ const TableParagraph = createStronglyTypedTiptapNode({
  * This extension allows you to create table rows.
  * @see https://www.tiptap.dev/api/nodes/table-row
  */
-export const TableRow = Node.create<{ HTMLAttributes: Record<string, any> }>({
+const TiptapTableRow = Node.create<{
+  HTMLAttributes: Record<string, any>;
+}>({
   name: "tableRow",
 
   addOptions() {
@@ -241,47 +369,37 @@ function parseTableContent(node: HTMLElement, schema: Schema) {
   return Fragment.fromArray(extractedContent);
 }
 
-export const Table = createBlockSpecFromStronglyTypedTiptapNode(
-  TableBlockContent,
-  tablePropSchema,
-  [
-    TableExtension,
-    TableParagraph,
-    TableHeader.extend({
-      /**
-       * We allow table headers and cells to have multiple tableContent nodes because
-       * when merging cells, prosemirror-tables will concat the contents of the cells naively.
-       * This would cause that content to overflow into other cells when prosemirror tries to enforce the cell structure.
-       *
-       * So, we manually fix this up when reading back in the `nodeToBlock` and only ever place a single tableContent back into the cell.
-       */
-      content: "tableContent+",
-      parseHTML() {
-        return [
-          {
-            tag: "th",
-            // As `th` 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) =>
-              parseTableContent(node as HTMLElement, schema),
-          },
-        ];
-      },
-    }),
-    TableCell.extend({
-      content: "tableContent+",
-      parseHTML() {
-        return [
-          {
-            tag: "td",
-            // As `td` 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) =>
-              parseTableContent(node as HTMLElement, schema),
-          },
-        ];
-      },
-    }),
-    TableRow,
-  ],
-);
+export type TableBlockConfig = BlockConfig<
+  "table",
+  {
+    textColor: {
+      default: "default";
+    };
+  },
+  "table"
+>;
+
+export const createTableBlockSpec = () =>
+  createBlockSpecFromTiptapNode(
+    { node: TiptapTableNode, type: "table", content: "table" },
+    tablePropSchema,
+    [
+      createBlockNoteExtension({
+        key: "table-extensions",
+        tiptapExtensions: [
+          TableExtension,
+          TiptapTableParagraph,
+          TiptapTableHeader,
+          TiptapTableCell,
+          TiptapTableRow,
+        ],
+      }),
+    ],
+  );
+
+// We need to declare this here because we aren't using the table extensions from tiptap, so the types are not automatically inferred.
+declare module "@tiptap/core" {
+  interface NodeConfig {
+    tableRole?: string;
+  }
+}

package/src/blocks/ToggleWrapper/createToggleWrapper.ts

@@ -28,7 +28,7 @@ export const createToggleWrapper = (
   ignoreMutation?: (mutation: ViewMutationRecord) => boolean;
   destroy?: () => void;
 } => {
-  if ("isToggleable" in block.props && !block.props.isToggleable) {
+  if (!("isToggleable" in block.props) || !block.props.isToggleable) {
     return {
       dom: renderedElement,
     };

package/src/blocks/Video/block.ts

@@ -0,0 +1,143 @@
+import { createBlockConfig, createBlockSpec } from "../../schema/index.js";
+import { defaultProps, parseDefaultProps } from "../defaultProps.js";
+import { parseFigureElement } from "../File/helpers/parse/parseFigureElement.js";
+import { createResizableFileBlockWrapper } from "../File/helpers/render/createResizableFileBlockWrapper.js";
+import { createFigureWithCaption } from "../File/helpers/toExternalHTML/createFigureWithCaption.js";
+import { createLinkWithCaption } from "../File/helpers/toExternalHTML/createLinkWithCaption.js";
+import { parseVideoElement } from "./parseVideoElement.js";
+
+export const FILE_VIDEO_ICON_SVG =
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM8 5V19H16V5H8ZM4 5V7H6V5H4ZM18 5V7H20V5H18ZM4 9V11H6V9H4ZM18 9V11H20V9H18ZM4 13V15H6V13H4ZM18 13V15H20V13H18ZM4 17V19H6V17H4ZM18 17V19H20V17H18Z"></path></svg>';
+
+export interface VideoOptions {
+  icon?: string;
+}
+
+export type VideoBlockConfig = ReturnType<typeof createVideoBlockConfig>;
+
+export const createVideoBlockConfig = createBlockConfig(
+  (_ctx: VideoOptions) => ({
+    type: "video" as const,
+    propSchema: {
+      textAlignment: defaultProps.textAlignment,
+      backgroundColor: defaultProps.backgroundColor,
+      name: { default: "" as const },
+      url: { default: "" as const },
+      caption: { default: "" as const },
+      showPreview: { default: true },
+      previewWidth: { default: undefined, type: "number" as const },
+    },
+    content: "none" as const,
+  }),
+);
+
+export const videoParse = (_config: VideoOptions) => (element: HTMLElement) => {
+  if (element.tagName === "VIDEO") {
+    // Ignore if parent figure has already been parsed.
+    if (element.closest("figure")) {
+      return undefined;
+    }
+
+    const { backgroundColor } = parseDefaultProps(element);
+
+    return {
+      ...parseVideoElement(element as HTMLVideoElement),
+      backgroundColor,
+    };
+  }
+
+  if (element.tagName === "FIGURE") {
+    const parsedFigure = parseFigureElement(element, "video");
+    if (!parsedFigure) {
+      return undefined;
+    }
+
+    const { targetElement, caption } = parsedFigure;
+
+    const { backgroundColor } = parseDefaultProps(element);
+
+    return {
+      ...parseVideoElement(targetElement as HTMLVideoElement),
+      backgroundColor,
+      caption,
+    };
+  }
+
+  return undefined;
+};
+
+export const createVideoBlockSpec = createBlockSpec(
+  createVideoBlockConfig,
+  (config) => ({
+    meta: {
+      fileBlockAccept: ["video/*"],
+    },
+    parse: videoParse(config),
+    render(block, editor) {
+      const icon = document.createElement("div");
+      icon.innerHTML = config.icon ?? FILE_VIDEO_ICON_SVG;
+
+      const videoWrapper = document.createElement("div");
+      videoWrapper.className = "bn-visual-media-wrapper";
+
+      const video = document.createElement("video");
+      video.className = "bn-visual-media";
+      if (editor.resolveFileUrl) {
+        editor.resolveFileUrl(block.props.url).then((downloadUrl) => {
+          video.src = downloadUrl;
+        });
+      } else {
+        video.src = block.props.url;
+      }
+      video.controls = true;
+      video.contentEditable = "false";
+      video.draggable = false;
+      video.width = block.props.previewWidth;
+      videoWrapper.appendChild(video);
+
+      return createResizableFileBlockWrapper(
+        block,
+        editor,
+        { dom: videoWrapper },
+        videoWrapper,
+        icon.firstElementChild as HTMLElement,
+      );
+    },
+    toExternalHTML(block) {
+      if (!block.props.url) {
+        const div = document.createElement("p");
+        div.textContent = "Add video";
+
+        return {
+          dom: div,
+        };
+      }
+
+      let video;
+      if (block.props.showPreview) {
+        video = document.createElement("video");
+        video.src = block.props.url;
+        if (block.props.previewWidth) {
+          video.width = block.props.previewWidth;
+        }
+      } else {
+        video = document.createElement("a");
+        video.href = block.props.url;
+        video.textContent = block.props.name || block.props.url;
+      }
+
+      if (block.props.caption) {
+        if (block.props.showPreview) {
+          return createFigureWithCaption(video, block.props.caption);
+        } else {
+          return createLinkWithCaption(video, block.props.caption);
+        }
+      }
+
+      return {
+        dom: video,
+      };
+    },
+    runsBefore: ["file"],
+  }),
+);

package/src/blocks/defaultBlockHelpers.ts

@@ -100,13 +100,13 @@ export const defaultBlockToHTML = <
 // This is used when parsing blocks like list items and table cells, as they may
 // contain multiple paragraphs that ProseMirror will not be able to handle
 // properly.
-export function mergeParagraphs(element: HTMLElement) {
+export function mergeParagraphs(element: HTMLElement, separator = "<br>") {
   const paragraphs = element.querySelectorAll("p");
   if (paragraphs.length > 1) {
     const firstParagraph = paragraphs[0];
     for (let i = 1; i < paragraphs.length; i++) {
       const paragraph = paragraphs[i];
-      firstParagraph.innerHTML += "<br>" + paragraph.innerHTML;
+      firstParagraph.innerHTML += separator + paragraph.innerHTML;
       paragraph.remove();
     }
   }