@blocknote/core 0.37.0 → 0.39.0

package/src/blocks/CodeBlockContent/CodeBlockContent.ts

@@ -1,445 +0,0 @@
-import type { HighlighterGeneric } from "@shikijs/types";
-import { InputRule, isTextSelection } from "@tiptap/core";
-import { TextSelection } from "@tiptap/pm/state";
-import { Parser, createHighlightPlugin } from "prosemirror-highlight";
-import { createParser } from "prosemirror-highlight/shiki";
-import { BlockNoteEditor } from "../../index.js";
-import {
-  PropSchema,
-  createBlockSpecFromStronglyTypedTiptapNode,
-  createStronglyTypedTiptapNode,
-} from "../../schema/index.js";
-import { createDefaultBlockDOMOutputSpec } from "../defaultBlockHelpers.js";
-
-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>>;
-};
-
-type CodeBlockConfigOptions = {
-  editor: BlockNoteEditor<any, any, any>;
-};
-
-export const shikiParserSymbol = Symbol.for("blocknote.shikiParser");
-export const shikiHighlighterPromiseSymbol = Symbol.for(
-  "blocknote.shikiHighlighterPromise",
-);
-export const defaultCodeBlockPropSchema = {
-  language: {
-    default: "text",
-  },
-} satisfies PropSchema;
-
-const CodeBlockContent = createStronglyTypedTiptapNode({
-  name: "codeBlock",
-  content: "inline*",
-  group: "blockContent",
-  marks: "insertion deletion modification",
-  code: true,
-  defining: true,
-  addOptions() {
-    return {
-      defaultLanguage: "text",
-      indentLineWithTab: true,
-      supportedLanguages: {},
-    };
-  },
-  addAttributes() {
-    const options = this.options as CodeBlockConfigOptions;
-
-    return {
-      language: {
-        default: options.editor.settings.codeBlock.defaultLanguage,
-        parseHTML: (inputElement) => {
-          let element = inputElement as HTMLElement | null;
-          let language: string | null = 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) {
-            language = dataLanguage.toLowerCase();
-          } else {
-            const classNames = [...(element?.className.split(" ") || [])];
-            const languages = classNames
-              .filter((className) => className.startsWith("language-"))
-              .map((className) => className.replace("language-", ""));
-
-            if (languages.length > 0) {
-              language = languages[0].toLowerCase();
-            }
-          }
-
-          if (!language) {
-            return null;
-          }
-
-          return (
-            getLanguageId(options.editor.settings.codeBlock, language) ??
-            language
-          );
-        },
-        renderHTML: (attributes) => {
-          return attributes.language
-            ? {
-                class: `language-${attributes.language}`,
-                "data-language": attributes.language,
-              }
-            : {};
-        },
-      },
-    };
-  },
-  parseHTML() {
-    return [
-      // Parse from internal HTML.
-      {
-        tag: "div[data-content-type=" + this.name + "]",
-        contentElement: ".bn-inline-content",
-      },
-      // Parse from external HTML.
-      {
-        tag: "pre",
-        // contentElement: "code",
-        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 options = this.options as CodeBlockConfigOptions;
-
-    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;
-        });
-      };
-
-      Object.entries(
-        options.editor.settings.codeBlock.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 ||
-        options.editor.settings.codeBlock.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() {
-    const options = this.options as CodeBlockConfigOptions;
-    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.editor.settings.codeBlock.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 `codeBlock.createHighlighter` function",
-          );
-          hasWarned = true;
-        }
-        return [];
-      }
-      if (!highlighter) {
-        globalThisForShiki[shikiHighlighterPromiseSymbol] =
-          globalThisForShiki[shikiHighlighterPromiseSymbol] ||
-          options.editor.settings.codeBlock.createHighlighter();
-
-        return globalThisForShiki[shikiHighlighterPromiseSymbol].then(
-          (createdHighlighter) => {
-            highlighter = createdHighlighter;
-          },
-        );
-      }
-      const language = getLanguageId(
-        options.editor.settings.codeBlock,
-        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);
-    };
-
-    const shikiLazyPlugin = createHighlightPlugin({
-      parser: lazyParser,
-      languageExtractor: (node) => node.attrs.language,
-      nodeTypes: [this.name],
-    });
-
-    return [shikiLazyPlugin];
-  },
-  addInputRules() {
-    const options = this.options as CodeBlockConfigOptions;
-
-    return [
-      new InputRule({
-        find: /^```(.*?)\s$/,
-        handler: ({ state, range, match }) => {
-          const $start = state.doc.resolve(range.from);
-          const languageName = match[1].trim();
-          const attributes = {
-            language:
-              getLanguageId(options.editor.settings.codeBlock, languageName) ??
-              languageName,
-          };
-
-          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,
-);
-
-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/FileBlockContent/FileBlockContent.ts

@@ -1,100 +0,0 @@
-import type { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
-import {
-  BlockFromConfig,
-  FileBlockConfig,
-  PropSchema,
-  createBlockSpec,
-} from "../../schema/index.js";
-import { defaultProps } 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 const filePropSchema = {
-  backgroundColor: defaultProps.backgroundColor,
-  // File name.
-  name: {
-    default: "" as const,
-  },
-  // File url.
-  url: {
-    default: "" as const,
-  },
-  // File caption.
-  caption: {
-    default: "" as const,
-  },
-} satisfies PropSchema;
-
-export const fileBlockConfig = {
-  type: "file" as const,
-  propSchema: filePropSchema,
-  content: "none",
-  isFileBlock: true,
-} satisfies FileBlockConfig;
-
-export const fileRender = (
-  block: BlockFromConfig<typeof fileBlockConfig, any, any>,
-  editor: BlockNoteEditor<any, any, any>,
-) => {
-  return createFileBlockWrapper(block, editor);
-};
-
-export const fileParse = (element: HTMLElement) => {
-  if (element.tagName === "EMBED") {
-    // Ignore if parent figure has already been parsed.
-    if (element.closest("figure")) {
-      return undefined;
-    }
-
-    return parseEmbedElement(element as HTMLEmbedElement);
-  }
-
-  if (element.tagName === "FIGURE") {
-    const parsedFigure = parseFigureElement(element, "embed");
-    if (!parsedFigure) {
-      return undefined;
-    }
-
-    const { targetElement, caption } = parsedFigure;
-
-    return {
-      ...parseEmbedElement(targetElement as HTMLEmbedElement),
-      caption,
-    };
-  }
-
-  return undefined;
-};
-
-export const fileToExternalHTML = (
-  block: BlockFromConfig<typeof fileBlockConfig, any, any>,
-) => {
-  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,
-  };
-};
-
-export const FileBlock = createBlockSpec(fileBlockConfig, {
-  render: fileRender,
-  parse: fileParse,
-  toExternalHTML: fileToExternalHTML,
-});

package/src/blocks/HeadingBlockContent/HeadingBlockContent.ts

@@ -1,159 +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,
-  getBlockFromPos,
-  propsToAttributes,
-} from "../../schema/index.js";
-import { createDefaultBlockDOMOutputSpec } from "../defaultBlockHelpers.js";
-import { defaultProps } from "../defaultProps.js";
-import { createToggleWrapper } from "../ToggleWrapper/createToggleWrapper.js";
-import { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
-
-const HEADING_LEVELS = [1, 2, 3, 4, 5, 6] as const;
-
-export const headingPropSchema = {
-  ...defaultProps,
-  level: { default: 1, values: HEADING_LEVELS },
-  isToggleable: { default: false },
-} satisfies PropSchema;
-
-const HeadingBlockContent = createStronglyTypedTiptapNode({
-  name: "heading",
-  content: "inline*",
-  group: "blockContent",
-
-  addAttributes() {
-    return propsToAttributes(headingPropSchema);
-  },
-
-  addInputRules() {
-    const editor = this.options.editor as BlockNoteEditor<any, any, any>;
-    return [
-      ...editor.settings.heading.levels.map((level) => {
-        // Creates a heading of appropriate level when starting with "#", "##", or "###".
-        return new InputRule({
-          find: new RegExp(`^(#{${level}})\\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: "heading",
-                  props: {
-                    level: level as any,
-                  },
-                }),
-              )
-              // Removes the "#" character(s) used to set the heading.
-              .deleteRange({ from: range.from, to: range.to })
-              .run();
-          },
-        });
-      }),
-    ];
-  },
-
-  addKeyboardShortcuts() {
-    const editor = this.options.editor as BlockNoteEditor<any, any, any>;
-
-    return Object.fromEntries(
-      editor.settings.heading.levels.map((level) => [
-        `Mod-Alt-${level}`,
-        () => {
-          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: "heading",
-              props: {
-                level: level as any,
-              },
-            }),
-          );
-        },
-      ]),
-    );
-  },
-  parseHTML() {
-    const editor = this.options.editor as BlockNoteEditor<any, any, any>;
-
-    return [
-      // Parse from internal HTML.
-      {
-        tag: "div[data-content-type=" + this.name + "]",
-        contentElement: ".bn-inline-content",
-      },
-      ...editor.settings.heading.levels.map((level) => ({
-        tag: `h${level}`,
-        attrs: { level },
-        node: "heading",
-      })),
-    ];
-  },
-
-  renderHTML({ node, HTMLAttributes }) {
-    return createDefaultBlockDOMOutputSpec(
-      this.name,
-      `h${node.attrs.level}`,
-      {
-        ...(this.options.domAttributes?.blockContent || {}),
-        ...HTMLAttributes,
-      },
-      this.options.domAttributes?.inlineContent || {},
-    );
-  },
-
-  addNodeView() {
-    return ({ node, HTMLAttributes, getPos }) => {
-      const { dom, contentDOM } = createDefaultBlockDOMOutputSpec(
-        this.name,
-        `h${node.attrs.level}`,
-        {
-          ...(this.options.domAttributes?.blockContent || {}),
-          ...HTMLAttributes,
-        },
-        this.options.domAttributes?.inlineContent || {},
-      );
-      dom.removeChild(contentDOM);
-
-      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 Heading = createBlockSpecFromStronglyTypedTiptapNode(
-  HeadingBlockContent,
-  headingPropSchema,
-);