@blocknote/core 0.37.0 → 0.39.0

package/src/blocks/Code/block.ts

@@ -0,0 +1,303 @@
+import type { HighlighterGeneric } from "@shikijs/types";
+import { createBlockNoteExtension } from "../../editor/BlockNoteExtension.js";
+import { createBlockConfig, createBlockSpec } from "../../schema/index.js";
+import { lazyShikiPlugin } from "./shiki.js";
+import { DOMParser } from "@tiptap/pm/model";
+
+export type CodeBlockOptions = {
+  /**
+   * Whether to indent lines with a tab when the user presses `Tab` in a code block.
+   *
+   * @default true
+   */
+  indentLineWithTab?: boolean;
+  /**
+   * The default language to use for code blocks.
+   *
+   * @default "text"
+   */
+  defaultLanguage?: string;
+  /**
+   * The languages that are supported in the editor.
+   *
+   * @example
+   * {
+   *   javascript: {
+   *     name: "JavaScript",
+   *     aliases: ["js"],
+   *   },
+   *   typescript: {
+   *     name: "TypeScript",
+   *     aliases: ["ts"],
+   *   },
+   * }
+   */
+  supportedLanguages?: Record<
+    string,
+    {
+      /**
+       * The display name of the language.
+       */
+      name: string;
+      /**
+       * Aliases for this language.
+       */
+      aliases?: string[];
+    }
+  >;
+  /**
+   * The highlighter to use for code blocks.
+   */
+  createHighlighter?: () => Promise<HighlighterGeneric<any, any>>;
+};
+
+export type CodeBlockConfig = ReturnType<typeof createCodeBlockConfig>;
+
+export const createCodeBlockConfig = createBlockConfig(
+  ({ defaultLanguage = "text" }: CodeBlockOptions) =>
+    ({
+      type: "codeBlock" as const,
+      propSchema: {
+        language: {
+          default: defaultLanguage,
+        },
+      },
+      content: "inline",
+    }) as const,
+);
+
+export const createCodeBlockSpec = createBlockSpec(
+  createCodeBlockConfig,
+  (options) => ({
+    meta: {
+      code: true,
+      defining: true,
+      isolating: false,
+    },
+    parse: (e) => {
+      if (e.tagName !== "PRE") {
+        return undefined;
+      }
+
+      if (
+        e.childElementCount !== 1 ||
+        e.firstElementChild?.tagName !== "CODE"
+      ) {
+        return undefined;
+      }
+
+      const code = e.firstElementChild!;
+      const language =
+        code.getAttribute("data-language") ||
+        code.className
+          .split(" ")
+          .find((name) => name.includes("language-"))
+          ?.replace("language-", "");
+
+      return { language };
+    },
+
+    parseContent: ({ el, schema }) => {
+      const parser = DOMParser.fromSchema(schema);
+      const code = el.firstElementChild!;
+
+      return parser.parse(code, {
+        topNode: schema.nodes["codeBlock"].create(),
+      }).content;
+    },
+
+    render(block, editor) {
+      const wrapper = document.createDocumentFragment();
+      const pre = document.createElement("pre");
+      const code = document.createElement("code");
+      pre.appendChild(code);
+
+      let removeSelectChangeListener = undefined;
+
+      if (options.supportedLanguages) {
+        const select = document.createElement("select");
+
+        const handleLanguageChange = (event: Event) => {
+          const language = (event.target as HTMLSelectElement).value;
+
+          editor.updateBlock(block.id, { props: { language } });
+        };
+        select.addEventListener("change", handleLanguageChange);
+
+        const selectWrapper = document.createElement("div");
+        selectWrapper.contentEditable = "false";
+        select.value =
+          block.props.language || options.defaultLanguage || "text";
+
+        Object.entries(options.supportedLanguages ?? {}).forEach(
+          ([id, { name }]) => {
+            const option = document.createElement("option");
+
+            option.value = id;
+            option.text = name;
+            select.appendChild(option);
+          },
+        );
+        selectWrapper.appendChild(select);
+        wrapper.appendChild(selectWrapper);
+
+        removeSelectChangeListener = () =>
+          select.removeEventListener("change", handleLanguageChange);
+      }
+      wrapper.appendChild(pre);
+
+      return {
+        dom: wrapper,
+        contentDOM: code,
+        destroy: () => {
+          removeSelectChangeListener?.();
+        },
+      };
+    },
+    toExternalHTML(block) {
+      const pre = document.createElement("pre");
+      const code = document.createElement("code");
+      code.className = `language-${block.props.language}`;
+      code.dataset.language = block.props.language;
+      pre.appendChild(code);
+      return {
+        dom: pre,
+        contentDOM: code,
+      };
+    },
+  }),
+  (options) => {
+    return [
+      createBlockNoteExtension({
+        key: "code-block-highlighter",
+        plugins: [lazyShikiPlugin(options)],
+      }),
+      createBlockNoteExtension({
+        key: "code-block-keyboard-shortcuts",
+        keyboardShortcuts: {
+          Delete: ({ editor }) => {
+            return editor.transact((tr) => {
+              const { block } = editor.getTextCursorPosition();
+              if (block.type !== "codeBlock") {
+                return false;
+              }
+              const { $from } = tr.selection;
+
+              // When inside empty codeblock, on `DELETE` key press, delete the codeblock
+              if (!$from.parent.textContent) {
+                editor.removeBlocks([block]);
+
+                return true;
+              }
+
+              return false;
+            });
+          },
+          Tab: ({ editor }) => {
+            if (options.indentLineWithTab === false) {
+              return false;
+            }
+
+            return editor.transact((tr) => {
+              const { block } = editor.getTextCursorPosition();
+              if (block.type === "codeBlock") {
+                // TODO should probably only tab when at a line start or already tabbed in
+                tr.insertText("  ");
+                return true;
+              }
+
+              return false;
+            });
+          },
+          Enter: ({ editor }) => {
+            return editor.transact((tr) => {
+              const { block, nextBlock } = editor.getTextCursorPosition();
+              if (block.type !== "codeBlock") {
+                return false;
+              }
+              const { $from } = tr.selection;
+
+              const isAtEnd = $from.parentOffset === $from.parent.nodeSize - 2;
+              const endsWithDoubleNewline =
+                $from.parent.textContent.endsWith("\n\n");
+
+              // The user is trying to exit the code block by pressing enter at the end of the code block
+              if (isAtEnd && endsWithDoubleNewline) {
+                // Remove the double newline
+                tr.delete($from.pos - 2, $from.pos);
+
+                // If there is a next block, move the cursor to it
+                if (nextBlock) {
+                  editor.setTextCursorPosition(nextBlock, "start");
+                  return true;
+                }
+
+                // If there is no next block, insert a new paragraph
+                const [newBlock] = editor.insertBlocks(
+                  [{ type: "paragraph" }],
+                  block,
+                  "after",
+                );
+                // Move the cursor to the new block
+                editor.setTextCursorPosition(newBlock, "start");
+
+                return true;
+              }
+
+              tr.insertText("\n");
+              return true;
+            });
+          },
+          "Shift-Enter": ({ editor }) => {
+            return editor.transact(() => {
+              const { block } = editor.getTextCursorPosition();
+              if (block.type !== "codeBlock") {
+                return false;
+              }
+
+              const [newBlock] = editor.insertBlocks(
+                // insert a new paragraph
+                [{ type: "paragraph" }],
+                block,
+                "after",
+              );
+              // move the cursor to the new block
+              editor.setTextCursorPosition(newBlock, "start");
+              return true;
+            });
+          },
+        },
+        inputRules: [
+          {
+            find: /^```(.*?)\s$/,
+            replace: ({ match }) => {
+              const languageName = match[1].trim();
+              const attributes = {
+                language: getLanguageId(options, languageName) ?? languageName,
+              };
+
+              return {
+                type: "codeBlock",
+                props: {
+                  language: attributes.language,
+                },
+                content: [],
+              };
+            },
+          },
+        ],
+      }),
+    ];
+  },
+);
+
+export function getLanguageId(
+  options: CodeBlockOptions,
+  languageName: string,
+): string | undefined {
+  return Object.entries(options.supportedLanguages ?? {}).find(
+    ([id, { aliases }]) => {
+      return aliases?.includes(languageName) || id === languageName;
+    },
+  )?.[0];
+}

package/src/blocks/Code/shiki.ts

@@ -0,0 +1,73 @@
+import type { HighlighterGeneric } from "@shikijs/types";
+import { Parser, createHighlightPlugin } from "prosemirror-highlight";
+import { createParser } from "prosemirror-highlight/shiki";
+import { CodeBlockOptions, getLanguageId } from "./block.js";
+
+export const shikiParserSymbol = Symbol.for("blocknote.shikiParser");
+export const shikiHighlighterPromiseSymbol = Symbol.for(
+  "blocknote.shikiHighlighterPromise",
+);
+
+export function lazyShikiPlugin(options: CodeBlockOptions) {
+  const globalThisForShiki = globalThis as {
+    [shikiHighlighterPromiseSymbol]?: Promise<HighlighterGeneric<any, any>>;
+    [shikiParserSymbol]?: Parser;
+  };
+
+  let highlighter: HighlighterGeneric<any, any> | undefined;
+  let parser: Parser | undefined;
+  let hasWarned = false;
+  const lazyParser: Parser = (parserOptions) => {
+    if (!options.createHighlighter) {
+      if (process.env.NODE_ENV === "development" && !hasWarned) {
+        // eslint-disable-next-line no-console
+        console.log(
+          "For syntax highlighting of code blocks, you must provide a `createCodeBlockSpec({ createHighlighter: () => ... })` function",
+        );
+        hasWarned = true;
+      }
+      return [];
+    }
+    if (!highlighter) {
+      globalThisForShiki[shikiHighlighterPromiseSymbol] =
+        globalThisForShiki[shikiHighlighterPromiseSymbol] ||
+        options.createHighlighter();
+
+      return globalThisForShiki[shikiHighlighterPromiseSymbol].then(
+        (createdHighlighter) => {
+          highlighter = createdHighlighter;
+        },
+      );
+    }
+    const language = getLanguageId(options, parserOptions.language!);
+
+    if (
+      !language ||
+      language === "text" ||
+      language === "none" ||
+      language === "plaintext" ||
+      language === "txt"
+    ) {
+      return [];
+    }
+
+    if (!highlighter.getLoadedLanguages().includes(language)) {
+      return highlighter.loadLanguage(language);
+    }
+
+    if (!parser) {
+      parser =
+        globalThisForShiki[shikiParserSymbol] ||
+        createParser(highlighter as any);
+      globalThisForShiki[shikiParserSymbol] = parser;
+    }
+
+    return parser(parserOptions);
+  };
+
+  return createHighlightPlugin({
+    parser: lazyParser,
+    languageExtractor: (node) => node.attrs.language,
+    nodeTypes: ["codeBlock"],
+  });
+}

package/src/blocks/File/block.ts

@@ -0,0 +1,98 @@
+import { createBlockConfig, createBlockSpec } from "../../schema/index.js";
+import { defaultProps, parseDefaultProps } from "../defaultProps.js";
+import { parseEmbedElement } from "./helpers/parse/parseEmbedElement.js";
+import { parseFigureElement } from "./helpers/parse/parseFigureElement.js";
+import { createFileBlockWrapper } from "./helpers/render/createFileBlockWrapper.js";
+import { createLinkWithCaption } from "./helpers/toExternalHTML/createLinkWithCaption.js";
+
+export type FileBlockConfig = ReturnType<typeof createFileBlockConfig>;
+
+export const createFileBlockConfig = createBlockConfig(
+  () =>
+    ({
+      type: "file" as const,
+      propSchema: {
+        backgroundColor: defaultProps.backgroundColor,
+        // File name.
+        name: {
+          default: "" as const,
+        },
+        // File url.
+        url: {
+          default: "" as const,
+        },
+        // File caption.
+        caption: {
+          default: "" as const,
+        },
+      },
+      content: "none" as const,
+    }) as const,
+);
+
+export const fileParse = () => (element: HTMLElement) => {
+  if (element.tagName === "EMBED") {
+    // Ignore if parent figure has already been parsed.
+    if (element.closest("figure")) {
+      return undefined;
+    }
+
+    const { backgroundColor } = parseDefaultProps(element);
+
+    return {
+      ...parseEmbedElement(element as HTMLEmbedElement),
+      backgroundColor,
+    };
+  }
+
+  if (element.tagName === "FIGURE") {
+    const parsedFigure = parseFigureElement(element, "embed");
+    if (!parsedFigure) {
+      return undefined;
+    }
+
+    const { targetElement, caption } = parsedFigure;
+
+    const { backgroundColor } = parseDefaultProps(element);
+
+    return {
+      ...parseEmbedElement(targetElement as HTMLEmbedElement),
+      backgroundColor,
+      caption,
+    };
+  }
+
+  return undefined;
+};
+
+export const createFileBlockSpec = createBlockSpec(createFileBlockConfig, {
+  meta: {
+    fileBlockAccept: ["*/*"],
+  },
+  parse: fileParse(),
+  render(block, editor) {
+    return createFileBlockWrapper(block, editor);
+  },
+  toExternalHTML(block) {
+    if (!block.props.url) {
+      const div = document.createElement("p");
+      div.textContent = "Add file";
+
+      return {
+        dom: div,
+      };
+    }
+
+    const fileSrcLink = document.createElement("a");
+    fileSrcLink.href = block.props.url;
+    fileSrcLink.textContent = block.props.name || block.props.url;
+
+    if (block.props.caption) {
+      return createLinkWithCaption(fileSrcLink, block.props.caption);
+    }
+
+    return {
+      dom: fileSrcLink,
+    };
+  },
+});

package/src/blocks/{FileBlockContent → File}/helpers/render/createAddFileButton.ts

@@ -1,10 +1,12 @@
 import type { BlockNoteEditor } from "../../../../editor/BlockNoteEditor.js";
-import { BlockFromConfig, FileBlockConfig } from "../../../../schema/index.js";
+import {
+  BlockConfig,
+  BlockFromConfigNoChildren,
+} from "../../../../schema/index.js";
 
 export const createAddFileButton = (
-  block: BlockFromConfig<FileBlockConfig, any, any>,
+  block: BlockFromConfigNoChildren<BlockConfig<string, any, "none">, any, any>,
   editor: BlockNoteEditor<any, any, any>,
-  buttonText?: string,
   buttonIcon?: HTMLElement,
 ) => {
   const addFileButton = document.createElement("div");
@@ -23,7 +25,9 @@ export const createAddFileButton = (
   const addFileButtonText = document.createElement("p");
   addFileButtonText.className = "bn-add-file-button-text";
   addFileButtonText.innerHTML =
-    buttonText || editor.dictionary.file_blocks.file.add_button_text;
+    block.type in editor.dictionary.file_blocks.add_button_text
+      ? editor.dictionary.file_blocks.add_button_text[block.type]
+      : editor.dictionary.file_blocks.add_button_text["file"];
   addFileButton.appendChild(addFileButtonText);
 
   // Prevents focus from moving to the button.

package/src/blocks/{FileBlockContent → File}/helpers/render/createFileBlockWrapper.ts

@@ -1,21 +1,29 @@
 import type { BlockNoteEditor } from "../../../../editor/BlockNoteEditor.js";
 import {
-  BlockFromConfig,
-  BlockSchemaWithBlock,
-  FileBlockConfig,
+  BlockConfig,
+  BlockFromConfigNoChildren,
 } from "../../../../schema/index.js";
 import { createAddFileButton } from "./createAddFileButton.js";
 import { createFileNameWithIcon } from "./createFileNameWithIcon.js";
 
 export const createFileBlockWrapper = (
-  block: BlockFromConfig<FileBlockConfig, any, any>,
-  editor: BlockNoteEditor<
-    BlockSchemaWithBlock<FileBlockConfig["type"], FileBlockConfig>,
+  block: BlockFromConfigNoChildren<
+    BlockConfig<
+      string,
+      {
+        backgroundColor: { default: "default" };
+        name: { default: "" };
+        url: { default: "" };
+        caption: { default: "" };
+        showPreview?: { default: true };
+      },
+      "none"
+    >,
     any,
     any
   >,
+  editor: BlockNoteEditor<any, any, any>,
   element?: { dom: HTMLElement; destroy?: () => void },
-  buttonText?: string,
   buttonIcon?: HTMLElement,
 ) => {
   const wrapper = document.createElement("div");
@@ -24,12 +32,7 @@ export const createFileBlockWrapper = (
   // Show the add file button if the file has not been uploaded yet. Change to
   // show a loader if a file upload for the block begins.
   if (block.props.url === "") {
-    const addFileButton = createAddFileButton(
-      block,
-      editor,
-      buttonText,
-      buttonIcon,
-    );
+    const addFileButton = createAddFileButton(block, editor, buttonIcon);
     wrapper.appendChild(addFileButton.dom);
 
     const destroyUploadStartHandler = editor.onUploadStart((blockId) => {

package/src/blocks/{FileBlockContent → File}/helpers/render/createFileNameWithIcon.ts

@@ -1,9 +1,22 @@
-import { BlockFromConfig, FileBlockConfig } from "../../../../schema/index.js";
+import {
+  BlockConfig,
+  BlockFromConfigNoChildren,
+} 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 createFileNameWithIcon = (
-  block: BlockFromConfig<FileBlockConfig, any, any>,
+  block: BlockFromConfigNoChildren<
+    BlockConfig<
+      string,
+      {
+        name: { default: "" };
+      },
+      "none"
+    >,
+    any,
+    any
+  >,
 ): { dom: HTMLElement; destroy?: () => void } => {
   const file = document.createElement("div");
   file.className = "bn-file-name-with-icon";