@blocknote/core 0.17.1 → 0.19.0

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

@@ -5,6 +5,7 @@ import {
   FileBlockConfig,
 } from "../../schema/index.js";
 
+export const FILE_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3 8L9.00319 2H19.9978C20.5513 2 21 2.45531 21 2.9918V21.0082C21 21.556 20.5551 22 20.0066 22H3.9934C3.44476 22 3 21.5501 3 20.9932V8ZM10 4V9H5V20H19V4H10Z"></path></svg>`;
 export const createFileBlockWrapper = (
   block: BlockFromConfig<FileBlockConfig, any, any>,
   editor: BlockNoteEditor<
@@ -81,8 +82,7 @@ export const createDefaultFilePreview = (
 
   const icon = document.createElement("div");
   icon.className = "bn-file-default-preview-icon";
-  icon.innerHTML =
-    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3 8L9.00319 2H19.9978C20.5513 2 21 2.45531 21 2.9918V21.0082C21 21.556 20.5551 22 20.0066 22H3.9934C3.44476 22 3 21.5501 3 20.9932V8ZM10 4V9H5V20H19V4H10Z"></path></svg>';
+  icon.innerHTML = FILE_ICON_SVG;
 
   const fileName = document.createElement("p");
   fileName.className = "bn-file-default-preview-name";
@@ -108,6 +108,14 @@ 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);
 

package/src/blocks/HeadingBlockContent/HeadingBlockContent.ts

@@ -56,7 +56,7 @@ const HeadingBlockContent = createStronglyTypedTiptapNode({
               .command(
                 updateBlockCommand(
                   this.options.editor,
-                  blockInfo.blockContainer.beforePos,
+                  blockInfo.bnBlock.beforePos,
                   {
                     type: "heading",
                     props: {
@@ -84,16 +84,12 @@ const HeadingBlockContent = createStronglyTypedTiptapNode({
 
         // call updateBlockCommand
         return this.editor.commands.command(
-          updateBlockCommand(
-            this.options.editor,
-            blockInfo.blockContainer.beforePos,
-            {
-              type: "heading",
-              props: {
-                level: 1 as any,
-              },
-            }
-          )
+          updateBlockCommand(this.options.editor, blockInfo.bnBlock.beforePos, {
+            type: "heading",
+            props: {
+              level: 1 as any,
+            },
+          })
         );
       },
       "Mod-Alt-2": () => {
@@ -103,16 +99,12 @@ const HeadingBlockContent = createStronglyTypedTiptapNode({
         }
 
         return this.editor.commands.command(
-          updateBlockCommand(
-            this.options.editor,
-            blockInfo.blockContainer.beforePos,
-            {
-              type: "heading",
-              props: {
-                level: 2 as any,
-              },
-            }
-          )
+          updateBlockCommand(this.options.editor, blockInfo.bnBlock.beforePos, {
+            type: "heading",
+            props: {
+              level: 2 as any,
+            },
+          })
         );
       },
       "Mod-Alt-3": () => {
@@ -122,16 +114,12 @@ const HeadingBlockContent = createStronglyTypedTiptapNode({
         }
 
         return this.editor.commands.command(
-          updateBlockCommand(
-            this.options.editor,
-            blockInfo.blockContainer.beforePos,
-            {
-              type: "heading",
-              props: {
-                level: 3 as any,
-              },
-            }
-          )
+          updateBlockCommand(this.options.editor, blockInfo.bnBlock.beforePos, {
+            type: "heading",
+            props: {
+              level: 3 as any,
+            },
+          })
         );
       },
     };

package/src/blocks/ImageBlockContent/ImageBlockContent.ts

@@ -17,6 +17,9 @@ import {
 } from "../FileBlockContent/fileBlockHelpers.js";
 import { parseImageElement } from "./imageBlockHelpers.js";
 
+export const FILE_IMAGE_ICON_SVG =
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5 11.1005L7 9.1005L12.5 14.6005L16 11.1005L19 14.1005V5H5V11.1005ZM4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM15.5 10C14.6716 10 14 9.32843 14 8.5C14 7.67157 14.6716 7 15.5 7C16.3284 7 17 7.67157 17 8.5C17 9.32843 16.3284 10 15.5 10Z"></path></svg>';
+
 export const imagePropSchema = {
   textAlignment: defaultProps.textAlignment,
   backgroundColor: defaultProps.backgroundColor,
@@ -55,8 +58,7 @@ export const imageRender = (
   editor: BlockNoteEditor<any, any, any>
 ) => {
   const icon = document.createElement("div");
-  icon.innerHTML =
-    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5 11.1005L7 9.1005L12.5 14.6005L16 11.1005L19 14.1005V5H5V11.1005ZM4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM15.5 10C14.6716 10 14 9.32843 14 8.5C14 7.67157 14.6716 7 15.5 7C16.3284 7 17 7.67157 17 8.5C17 9.32843 16.3284 10 15.5 10Z"></path></svg>';
+  icon.innerHTML = FILE_IMAGE_ICON_SVG;
 
   const image = document.createElement("img");
   image.className = "bn-visual-media";

package/src/blocks/ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent.ts

@@ -36,7 +36,7 @@ const BulletListItemBlockContent = createStronglyTypedTiptapNode({
             .command(
               updateBlockCommand(
                 this.options.editor,
-                blockInfo.blockContainer.beforePos,
+                blockInfo.bnBlock.beforePos,
                 {
                   type: "bulletListItem",
                   props: {},
@@ -60,14 +60,10 @@ const BulletListItemBlockContent = createStronglyTypedTiptapNode({
         }
 
         return this.options.editor.commands.command(
-          updateBlockCommand(
-            this.options.editor,
-            blockInfo.blockContainer.beforePos,
-            {
-              type: "bulletListItem",
-              props: {},
-            }
-          )
+          updateBlockCommand(this.options.editor, blockInfo.bnBlock.beforePos, {
+            type: "bulletListItem",
+            props: {},
+          })
         );
       },
     };

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

@@ -57,7 +57,7 @@ const checkListItemBlockContent = createStronglyTypedTiptapNode({
             .command(
               updateBlockCommand(
                 this.options.editor,
-                blockInfo.blockContainer.beforePos,
+                blockInfo.bnBlock.beforePos,
                 {
                   type: "checkListItem",
                   props: {
@@ -83,7 +83,7 @@ const checkListItemBlockContent = createStronglyTypedTiptapNode({
             .command(
               updateBlockCommand(
                 this.options.editor,
-                blockInfo.blockContainer.beforePos,
+                blockInfo.bnBlock.beforePos,
                 {
                   type: "checkListItem",
                   props: {
@@ -109,14 +109,10 @@ const checkListItemBlockContent = createStronglyTypedTiptapNode({
         }
 
         return this.editor.commands.command(
-          updateBlockCommand(
-            this.options.editor,
-            blockInfo.blockContainer.beforePos,
-            {
-              type: "checkListItem",
-              props: {},
-            }
-          )
+          updateBlockCommand(this.options.editor, blockInfo.bnBlock.beforePos, {
+            type: "checkListItem",
+            props: {},
+          })
         );
       },
     };

package/src/blocks/ListItemBlockContent/ListItemKeyboardShortcuts.ts

@@ -5,7 +5,7 @@ import { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
 
 export const handleEnter = (editor: BlockNoteEditor<any, any, any>) => {
   const ttEditor = editor._tiptapEditor;
-  const { blockContent, blockContainer } = getBlockInfoFromSelection(
+  const { blockContent, bnBlock: blockContainer } = getBlockInfoFromSelection(
     ttEditor.state
   );