@blocknote/core 0.17.1 → 0.18.0

package/src/api/nodeConversions/blockToNode.ts

@@ -161,7 +161,8 @@ export function tableContentToNodes<
 
   for (const row of tableContent.rows) {
     const columnNodes: Node[] = [];
-    for (const cell of row.cells) {
+    for (let i = 0; i < row.cells.length; i++) {
+      const cell = row.cells[i];
       let pNode: Node;
       if (!cell) {
         pNode = schema.nodes["tableParagraph"].create({});
@@ -172,7 +173,17 @@ export function tableContentToNodes<
         pNode = schema.nodes["tableParagraph"].create({}, textNodes);
       }
 
-      const cellNode = schema.nodes["tableCell"].create({}, pNode);
+      const cellNode = schema.nodes["tableCell"].create(
+        {
+          // The colwidth array should have multiple values when the colspan of
+          // a cell is greater than 1. However, this is not yet implemented so
+          // we can always assume a length of 1.
+          colwidth: tableContent.columnWidths?.[i]
+            ? [tableContent.columnWidths[i]]
+            : null,
+        },
+        pNode
+      );
       columnNodes.push(cellNode);
     }
     const rowNode = schema.nodes["tableRow"].create({}, columnNodes);

package/src/api/nodeConversions/nodeToBlock.ts

@@ -30,14 +30,24 @@ export function contentNodeToTableContent<
 >(contentNode: Node, inlineContentSchema: I, styleSchema: S) {
   const ret: TableContent<I, S> = {
     type: "tableContent",
+    columnWidths: [],
     rows: [],
   };
 
-  contentNode.content.forEach((rowNode) => {
+  contentNode.content.forEach((rowNode, _offset, index) => {
     const row: TableContent<I, S>["rows"][0] = {
       cells: [],
     };
 
+    if (index === 0) {
+      rowNode.content.forEach((cellNode) => {
+        // The colwidth array should have multiple values when the colspan of a
+        // cell is greater than 1. However, this is not yet implemented so we
+        // can always assume a length of 1.
+        ret.columnWidths.push(cellNode.attrs.colwidth?.[0] || undefined);
+      });
+    }
+
     rowNode.content.forEach((cellNode) => {
       row.cells.push(
         contentNodeToInlineContent(

package/src/api/parsers/html/__snapshots__/parse-notion-html.json

@@ -370,6 +370,11 @@
     },
     "content": {
       "type": "tableContent",
+      "columnWidths": [
+        null,
+        null,
+        null
+      ],
       "rows": [
         {
           "cells": [

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

@@ -12,7 +12,7 @@ import { HTMLToBlocks } from "../html/parseHTML.js";
 // modified version of https://github.com/syntax-tree/mdast-util-to-hast/blob/main/lib/handlers/code.js
 // that outputs a data-language attribute instead of a CSS class (e.g.: language-typescript)
 function code(state: any, node: any) {
-  const value = node.value ? node.value + "\n" : "";
+  const value = node.value ? node.value : "";
   /** @type {Properties} */
   const properties: any = {};
 

package/src/api/testUtil/cases/defaultSchema.ts

@@ -175,6 +175,33 @@ export const defaultSchemaTestCases: EditorTestCases<
         },
       ],
     },
+    {
+      name: "codeBlock/empty",
+      blocks: [
+        {
+          type: "codeBlock",
+        },
+      ],
+    },
+    {
+      name: "codeBlock/defaultLanguage",
+      blocks: [
+        {
+          type: "codeBlock",
+          content: "console.log('Hello, world!');",
+        },
+      ],
+    },
+    {
+      name: "codeBlock/python",
+      blocks: [
+        {
+          type: "codeBlock",
+          props: { language: "python" },
+          content: "print('Hello, world!')",
+        },
+      ],
+    },
     {
       name: "file/button",
       blocks: [
@@ -332,6 +359,74 @@ export const defaultSchemaTestCases: EditorTestCases<
         },
       ],
     },
+    {
+      name: "table/basic",
+      blocks: [
+        {
+          type: "table",
+          content: {
+            type: "tableContent",
+            rows: [
+              {
+                cells: ["Table Cell", "Table Cell", "Table Cell"],
+              },
+              {
+                cells: ["Table Cell", "Table Cell", "Table Cell"],
+              },
+              {
+                cells: ["Table Cell", "Table Cell", "Table Cell"],
+              },
+            ],
+          },
+        },
+      ],
+    },
+    {
+      name: "table/allColWidths",
+      blocks: [
+        {
+          type: "table",
+          content: {
+            type: "tableContent",
+            columnWidths: [100, 200, 300],
+            rows: [
+              {
+                cells: ["Table Cell", "Table Cell", "Table Cell"],
+              },
+              {
+                cells: ["Table Cell", "Table Cell", "Table Cell"],
+              },
+              {
+                cells: ["Table Cell", "Table Cell", "Table Cell"],
+              },
+            ],
+          },
+        },
+      ],
+    },
+    {
+      name: "table/mixedColWidths",
+      blocks: [
+        {
+          type: "table",
+          content: {
+            type: "tableContent",
+            columnWidths: [100, undefined, 300],
+            rows: [
+              {
+                cells: ["Table Cell", "Table Cell", "Table Cell"],
+              },
+              {
+                cells: ["Table Cell", "Table Cell", "Table Cell"],
+              },
+              {
+                cells: ["Table Cell", "Table Cell", "Table Cell"],
+              },
+            ],
+          },
+        },
+      ],
+    },
     {
       name: "link/basic",
       blocks: [

package/src/api/testUtil/partialBlockTestUtil.ts

@@ -80,12 +80,19 @@ export function partialBlockToBlockForTesting<
   schema: BSchema,
   partialBlock: PartialBlock<BSchema, I, S>
 ): Block<BSchema, I, S> {
+  const contentType: "inline" | "table" | "none" =
+    schema[partialBlock.type!].content;
+
   const withDefaults: Block<BSchema, I, S> = {
     id: "",
     type: partialBlock.type!,
     props: {} as any,
     content:
-      schema[partialBlock.type!].content === "inline" ? [] : (undefined as any),
+      contentType === "inline"
+        ? []
+        : contentType === "table"
+        ? { type: "tableContent", columnWidths: [], rows: [] }
+        : (undefined as any),
     children: [] as any,
     ...partialBlock,
   };
@@ -98,6 +105,24 @@ export function partialBlockToBlockForTesting<
     }
   );
 
+  if (contentType === "inline") {
+    const content = withDefaults.content as InlineContent<I, S>[] | undefined;
+    withDefaults.content = partialContentToInlineContent(content) as any;
+  } else if (contentType === "table") {
+    const content = withDefaults.content as TableContent<I, S> | undefined;
+    withDefaults.content = {
+      type: "tableContent",
+      columnWidths:
+        content?.columnWidths ||
+        content?.rows[0]?.cells.map(() => undefined) ||
+        [],
+      rows:
+        content?.rows.map((row) => ({
+          cells: row.cells.map((cell) => partialContentToInlineContent(cell)),
+        })) || [],
+    } as any;
+  }
+
   return {
     ...withDefaults,
     content: partialContentToInlineContent(withDefaults.content),

package/src/blocks/CodeBlockContent/CodeBlockContent.ts

@@ -0,0 +1,369 @@
+import { InputRule, isTextSelection } from "@tiptap/core";
+import { TextSelection } from "@tiptap/pm/state";
+import { createHighlightPlugin, Parser } from "prosemirror-highlight";
+import { createParser } from "prosemirror-highlight/shiki";
+import {
+  BundledLanguage,
+  bundledLanguagesInfo,
+  createHighlighter,
+  Highlighter,
+} from "shiki";
+import {
+  createBlockSpecFromStronglyTypedTiptapNode,
+  createStronglyTypedTiptapNode,
+  PropSchema,
+} from "../../schema/index.js";
+import { createDefaultBlockDOMOutputSpec } from "../defaultBlockHelpers.js";
+import {
+  defaultSupportedLanguages,
+  SupportedLanguageConfig,
+} from "./defaultSupportedLanguages.js";
+
+interface CodeBlockOptions {
+  defaultLanguage: string;
+  indentLineWithTab: boolean;
+  supportedLanguages: SupportedLanguageConfig[];
+}
+
+export const defaultCodeBlockPropSchema = {
+  language: {
+    default: "javascript",
+    values: [...defaultSupportedLanguages.map((lang) => lang.id)],
+  },
+} satisfies PropSchema;
+
+const CodeBlockContent = createStronglyTypedTiptapNode({
+  name: "codeBlock",
+  content: "inline*",
+  group: "blockContent",
+  marks: "",
+  code: true,
+  defining: true,
+  addOptions() {
+    return {
+      defaultLanguage: "javascript",
+      indentLineWithTab: true,
+      supportedLanguages: defaultSupportedLanguages,
+    };
+  },
+  addAttributes() {
+    return {
+      language: {
+        default: this.options.defaultLanguage,
+        parseHTML: (inputElement) => {
+          let element = inputElement as HTMLElement | null;
+
+          if (
+            element?.tagName === "DIV" &&
+            element?.dataset.contentType === "codeBlock"
+          ) {
+            element = element.children[0] as HTMLElement | null;
+          }
+
+          if (element?.tagName === "PRE") {
+            element = element?.children[0] as HTMLElement | null;
+          }
+
+          const dataLanguage = element?.getAttribute("data-language");
+
+          if (dataLanguage) {
+            return dataLanguage.toLowerCase();
+          }
+
+          const classNames = [...(element?.className.split(" ") || [])];
+          const languages = classNames
+            .filter((className) => className.startsWith("language-"))
+            .map((className) => className.replace("language-", ""));
+          const [language] = languages;
+
+          if (!language) {
+            return null;
+          }
+
+          return language.toLowerCase();
+        },
+        renderHTML: (attributes) => {
+          return attributes.language && attributes.language !== "text"
+            ? {
+                class: `language-${attributes.language}`,
+              }
+            : {};
+        },
+      },
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "div[data-content-type=" + this.name + "]",
+      },
+      {
+        tag: "pre",
+        preserveWhitespace: "full",
+      },
+    ];
+  },
+  renderHTML({ HTMLAttributes }) {
+    const pre = document.createElement("pre");
+    const { dom, contentDOM } = createDefaultBlockDOMOutputSpec(
+      this.name,
+      "code",
+      this.options.domAttributes?.blockContent || {},
+      {
+        ...(this.options.domAttributes?.inlineContent || {}),
+        ...HTMLAttributes,
+      }
+    );
+
+    dom.removeChild(contentDOM);
+    dom.appendChild(pre);
+    pre.appendChild(contentDOM);
+
+    return {
+      dom,
+      contentDOM,
+    };
+  },
+  addNodeView() {
+    const supportedLanguages = this.options
+      .supportedLanguages as SupportedLanguageConfig[];
+
+    return ({ editor, node, getPos, HTMLAttributes }) => {
+      const pre = document.createElement("pre");
+      const select = document.createElement("select");
+      const selectWrapper = document.createElement("div");
+      const { dom, contentDOM } = createDefaultBlockDOMOutputSpec(
+        this.name,
+        "code",
+        {
+          ...(this.options.domAttributes?.blockContent || {}),
+          ...HTMLAttributes,
+        },
+        this.options.domAttributes?.inlineContent || {}
+      );
+      const handleLanguageChange = (event: Event) => {
+        const language = (event.target as HTMLSelectElement).value;
+
+        editor.commands.command(({ tr }) => {
+          tr.setNodeAttribute(getPos(), "language", language);
+
+          return true;
+        });
+      };
+
+      supportedLanguages.forEach(({ id, name }) => {
+        const option = document.createElement("option");
+
+        option.value = id;
+        option.text = name;
+        select.appendChild(option);
+      });
+
+      selectWrapper.contentEditable = "false";
+      select.value = node.attrs.language || this.options.defaultLanguage;
+      dom.removeChild(contentDOM);
+      dom.appendChild(selectWrapper);
+      dom.appendChild(pre);
+      pre.appendChild(contentDOM);
+      selectWrapper.appendChild(select);
+      select.addEventListener("change", handleLanguageChange);
+
+      return {
+        dom,
+        contentDOM,
+        update: (newNode) => {
+          if (newNode.type !== this.type) {
+            return false;
+          }
+
+          return true;
+        },
+        destroy: () => {
+          select.removeEventListener("change", handleLanguageChange);
+        },
+      };
+    };
+  },
+  addProseMirrorPlugins() {
+    let highlighter: Highlighter | undefined;
+    let parser: Parser | undefined;
+
+    const supportedLanguages = this.options
+      .supportedLanguages as SupportedLanguageConfig[];
+    const lazyParser: Parser = (options) => {
+      if (!highlighter) {
+        return createHighlighter({
+          themes: ["github-dark"],
+          langs: [],
+        }).then((createdHighlighter) => {
+          highlighter = createdHighlighter;
+        });
+      }
+
+      const language = options.language;
+
+      if (
+        language &&
+        language !== "text" &&
+        !highlighter.getLoadedLanguages().includes(language) &&
+        supportedLanguages.find(({ id }) => id === language) &&
+        bundledLanguagesInfo.find(({ id }) => id === language)
+      ) {
+        return highlighter.loadLanguage(language as BundledLanguage);
+      }
+
+      if (!parser) {
+        parser = createParser(highlighter);
+      }
+
+      return parser(options);
+    };
+
+    const shikiLazyPlugin = createHighlightPlugin({
+      parser: lazyParser,
+      languageExtractor: (node) => node.attrs.language,
+      nodeTypes: [this.name],
+    });
+
+    return [shikiLazyPlugin];
+  },
+  addInputRules() {
+    const supportedLanguages = this.options
+      .supportedLanguages as SupportedLanguageConfig[];
+
+    return [
+      new InputRule({
+        find: /^```(.*?)\s$/,
+        handler: ({ state, range, match }) => {
+          const $start = state.doc.resolve(range.from);
+          const languageName = match[1].trim();
+          const attributes = {
+            language:
+              supportedLanguages.find(({ match }) => {
+                return match.includes(languageName);
+              })?.id || this.options.defaultLanguage,
+          };
+
+          if (
+            !$start
+              .node(-1)
+              .canReplaceWith(
+                $start.index(-1),
+                $start.indexAfter(-1),
+                this.type
+              )
+          ) {
+            return null;
+          }
+
+          state.tr
+            .delete(range.from, range.to)
+            .setBlockType(range.from, range.from, this.type, attributes)
+            .setSelection(TextSelection.create(state.tr.doc, range.from));
+
+          return;
+        },
+      }),
+    ];
+  },
+  addKeyboardShortcuts() {
+    return {
+      Delete: ({ editor }) => {
+        const { selection } = editor.state;
+        const { $from } = selection;
+
+        // When inside empty codeblock, on `DELETE` key press, delete the codeblock
+        if (
+          editor.isActive(this.name) &&
+          !$from.parent.textContent &&
+          isTextSelection(selection)
+        ) {
+          // Get the start position of the codeblock for node selection
+          const from = $from.pos - $from.parentOffset - 2;
+
+          editor.chain().setNodeSelection(from).deleteSelection().run();
+
+          return true;
+        }
+
+        return false;
+      },
+      Tab: ({ editor }) => {
+        if (!this.options.indentLineWithTab) {
+          return false;
+        }
+        if (editor.isActive(this.name)) {
+          editor.commands.insertContent("  ");
+          return true;
+        }
+
+        return false;
+      },
+      Enter: ({ editor }) => {
+        const { $from } = editor.state.selection;
+
+        if (!editor.isActive(this.name)) {
+          return false;
+        }
+
+        const isAtEnd = $from.parentOffset === $from.parent.nodeSize - 2;
+        const endsWithDoubleNewline = $from.parent.textContent.endsWith("\n\n");
+
+        if (!isAtEnd || !endsWithDoubleNewline) {
+          editor.commands.insertContent("\n");
+          return true;
+        }
+
+        return editor
+          .chain()
+          .command(({ tr }) => {
+            tr.delete($from.pos - 2, $from.pos);
+
+            return true;
+          })
+          .exitCode()
+          .run();
+      },
+      "Shift-Enter": ({ editor }) => {
+        const { $from } = editor.state.selection;
+
+        if (!editor.isActive(this.name)) {
+          return false;
+        }
+
+        editor
+          .chain()
+          .insertContentAt(
+            $from.pos - $from.parentOffset + $from.parent.nodeSize,
+            {
+              type: "paragraph",
+            }
+          )
+          .run();
+
+        return true;
+      },
+    };
+  },
+});
+
+export const CodeBlock = createBlockSpecFromStronglyTypedTiptapNode(
+  CodeBlockContent,
+  defaultCodeBlockPropSchema
+);
+
+export function customizeCodeBlock(options: Partial<CodeBlockOptions>) {
+  return createBlockSpecFromStronglyTypedTiptapNode(
+    CodeBlockContent.configure(options),
+    {
+      language: {
+        default:
+          options.defaultLanguage ||
+          defaultCodeBlockPropSchema.language.default,
+        values:
+          options.supportedLanguages?.map((lang) => lang.id) ||
+          defaultCodeBlockPropSchema.language.values,
+      },
+    }
+  );
+}

package/src/blocks/CodeBlockContent/defaultSupportedLanguages.ts

@@ -0,0 +1,96 @@
+import { bundledLanguagesInfo } from "shiki/bundle/web";
+
+export type SupportedLanguageConfig = {
+  id: string;
+  name: string;
+  match: string[];
+};
+
+export const defaultSupportedLanguages: SupportedLanguageConfig[] = [
+  {
+    id: "text",
+    name: "Plain Text",
+    match: ["text", "txt", "plain"],
+  },
+  ...bundledLanguagesInfo
+    .filter((lang) => {
+      return ![
+        "angular-html",
+        "angular-ts",
+        "astro",
+        "blade",
+        "coffee",
+        "handlebars",
+        "html-derivative",
+        "http",
+        "imba",
+        "jinja",
+        "jison",
+        "json5",
+        "marko",
+        "mdc",
+        "stylus",
+        "ts-tags",
+      ].includes(lang.id);
+    })
+    .map((lang) => ({
+      match: [lang.id, ...(lang.aliases || [])],
+      id: lang.id,
+      name: lang.name,
+    })),
+  {
+    id: "haskell",
+    name: "Haskell",
+    match: ["haskell", "hs"],
+  },
+  {
+    id: "csharp",
+    name: "C#",
+    match: ["c#", "csharp", "cs"],
+  },
+  {
+    id: "latex",
+    name: "LaTeX",
+    match: ["latex"],
+  },
+  {
+    id: "lua",
+    name: "Lua",
+    match: ["lua"],
+  },
+  {
+    id: "mermaid",
+    name: "Mermaid",
+    match: ["mermaid", "mmd"],
+  },
+  {
+    id: "ruby",
+    name: "Ruby",
+    match: ["ruby", "rb"],
+  },
+  {
+    id: "rust",
+    name: "Rust",
+    match: ["rust", "rs"],
+  },
+  {
+    id: "scala",
+    name: "Scala",
+    match: ["scala"],
+  },
+  {
+    id: "swift",
+    name: "Swift",
+    match: ["swift"],
+  },
+  {
+    id: "kotlin",
+    name: "Kotlin",
+    match: ["kotlin", "kt", "kts"],
+  },
+  {
+    id: "objective-c",
+    name: "Objective C",
+    match: ["objective-c", "objc"],
+  },
+];

package/src/blocks/FileBlockContent/fileBlockHelpers.ts

@@ -108,6 +108,13 @@ export const createFileAndCaptionWrapper = (
   caption.className = "bn-file-caption";
   caption.textContent = block.props.caption;
 
+  if (typeof block.props.previewWidth === "number" &&
+    block.props.previewWidth > 0 &&
+    block.props.caption !== undefined
+  ) {
+    caption.style.width = `${block.props.previewWidth}px`
+  }
+
   fileAndCaptionWrapper.appendChild(file);
   fileAndCaptionWrapper.appendChild(caption);