@blocknote/core 0.26.0 → 0.27.0

package/src/api/nodeConversions/__snapshots__/nodeConversions.test.ts.snap

@@ -699,7 +699,7 @@ exports[`Test BlockNote-Prosemirror conversion > Case: default schema > Convert
   "content": [
     {
       "attrs": {
-        "language": "javascript",
+        "language": "text",
       },
       "content": [
         {
@@ -724,7 +724,7 @@ exports[`Test BlockNote-Prosemirror conversion > Case: default schema > Convert
   "content": [
     {
       "attrs": {
-        "language": "javascript",
+        "language": "text",
       },
       "type": "codeBlock",
     },

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

@@ -3,7 +3,7 @@
     "id": "1",
     "type": "codeBlock",
     "props": {
-      "language": "javascript"
+      "language": "text"
     },
     "content": [
       {

package/src/api/parsers/html/parseHTML.test.ts

@@ -13,7 +13,7 @@ async function parseHTMLAndCompareSnapshots(
   const blocks = await editor.tryParseHTMLToBlocks(html);
 
   const snapshotPath = "./__snapshots__/" + snapshotName + ".json";
-  expect(JSON.stringify(blocks, undefined, 2)).toMatchFileSnapshot(
+  await expect(JSON.stringify(blocks, undefined, 2)).toMatchFileSnapshot(
     snapshotPath
   );
 

package/src/api/parsers/markdown/__snapshots__/pasted/whitespace bold.json

@@ -0,0 +1,42 @@
+[
+  {
+    "id": "0",
+    "type": "paragraph",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left"
+    },
+    "content": [
+      {
+        "type": "text",
+        "text": "hello ",
+        "styles": {}
+      },
+      {
+        "type": "text",
+        "text": "beautiful ",
+        "styles": {
+          "bold": true
+        }
+      },
+      {
+        "type": "text",
+        "text": " world",
+        "styles": {}
+      }
+    ],
+    "children": []
+  },
+  {
+    "id": "2",
+    "type": "paragraph",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left"
+    },
+    "content": [],
+    "children": []
+  }
+]

package/src/api/parsers/markdown/__snapshots__/whitespace bold.json

@@ -0,0 +1,19 @@
+[
+  {
+    "id": "1",
+    "type": "paragraph",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left"
+    },
+    "content": [
+      {
+        "type": "text",
+        "text": "hello **beautiful ** world",
+        "styles": {}
+      }
+    ],
+    "children": []
+  }
+]

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

@@ -0,0 +1,60 @@
+// Headings H1-H6.
+const h1 = /(^|\n) {0,3}#{1,6} {1,8}[^\n]{1,64}\r?\n\r?\n\s{0,32}\S/;
+
+// Bold, italic, underline, strikethrough, highlight.
+const bold = /(?:\s|^)(_|__|\*|\*\*|~~|==|\+\+)(?!\s).{1,64}(?<!\s)(?=\1)/;
+
+// Basic inline link (also captures images).
+const link = /\[[^\]]{1,128}\]\(https?:\/\/\S{1,999}\)/;
+
+// Inline code.
+const code = /(?:\s|^)`(?!\s)[^`]{1,48}(?<!\s)`([^\w]|$)/;
+
+// Unordered list.
+const ul = /(?:^|\n)\s{0,5}-\s{1}[^\n]+\n\s{0,15}-\s/;
+
+// Ordered list.
+const ol = /(?:^|\n)\s{0,5}\d+\.\s{1}[^\n]+\n\s{0,15}\d+\.\s/;
+
+// Horizontal rule.
+const hr = /\n{2} {0,3}-{2,48}\n{2}/;
+
+// Fenced code block.
+const fences =
+  /(?:\n|^)(```|~~~|\$\$)(?!`|~)[^\s]{0,64} {0,64}[^\n]{0,64}\n[\s\S]{0,9999}?\s*\1 {0,64}(?:\n+|$)/;
+
+// Classical underlined H1 and H2 headings.
+const title = /(?:\n|^)(?!\s)\w[^\n]{0,64}\r?\n(-|=)\1{0,64}\n\n\s{0,64}(\w|$)/;
+
+// Blockquote.
+const blockquote =
+  /(?:^|(\r?\n\r?\n))( {0,3}>[^\n]{1,333}\n){1,999}($|(\r?\n))/;
+
+// Table Header
+const tableHeader = /^\s*\|(.+\|)+\s*$/m;
+
+// Table Divider
+const tableDivider = /^\s*\|(\s*[-:]+[-:]\s*\|)+\s*$/m;
+
+// Table Row
+const tableRow = /^\s*\|(.+\|)+\s*$/m;
+
+/**
+ * Returns `true` if the source text might be a markdown document.
+ *
+ * @param src Source text to analyze.
+ */
+export const isMarkdown = (src: string): boolean =>
+  h1.test(src) ||
+  bold.test(src) ||
+  link.test(src) ||
+  code.test(src) ||
+  ul.test(src) ||
+  ol.test(src) ||
+  hr.test(src) ||
+  fences.test(src) ||
+  title.test(src) ||
+  blockquote.test(src) ||
+  tableHeader.test(src) ||
+  tableDivider.test(src) ||
+  tableRow.test(src);

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

@@ -12,7 +12,7 @@ async function parseMarkdownAndCompareSnapshots(
   const blocks = await editor.tryParseMarkdownToBlocks(md);
 
   const snapshotPath = "./__snapshots__/" + snapshotName + ".json";
-  expect(JSON.stringify(blocks, undefined, 2)).toMatchFileSnapshot(
+  await expect(JSON.stringify(blocks, undefined, 2)).toMatchFileSnapshot(
     snapshotPath
   );
 
@@ -23,7 +23,7 @@ async function parseMarkdownAndCompareSnapshots(
   doPaste(editor.prosemirrorView, md, null, true, new ClipboardEvent("paste"));
 
   const pastedSnapshotPath = "./__snapshots__/pasted/" + snapshotName + ".json";
-  expect(JSON.stringify(editor.document, undefined, 2)).toMatchFileSnapshot(
+  await expect(JSON.stringify(editor.document, undefined, 2)).toMatchFileSnapshot(
     pastedSnapshotPath
   );
 
@@ -99,6 +99,11 @@ P*ara*~~grap~~h
 *   Bullet List Item`;
     await parseMarkdownAndCompareSnapshots(markdown, "complex");
   });
+
+  it("whitespace bold", async () => {
+    const markdown = `hello **beautiful ** world`;
+    await parseMarkdownAndCompareSnapshots(markdown, "whitespace bold");
+  });
 });
 
 describe("Issue 226", () => {

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

@@ -48,18 +48,9 @@ function code(state: any, node: any) {
   return result;
 }
 
-export async function markdownToBlocks<
-  BSchema extends BlockSchema,
-  I extends InlineContentSchema,
-  S extends StyleSchema
->(
-  markdown: string,
-  blockSchema: BSchema,
-  icSchema: I,
-  styleSchema: S,
-  pmSchema: Schema
-): Promise<Block<BSchema, I, S>[]> {
+export async function markdownToHTML(markdown: string): Promise<string> {
   const deps = await initializeESMDependencies();
+
   const htmlString = deps.unified
     .unified()
     .use(deps.remarkParse.default)
@@ -73,11 +64,21 @@ export async function markdownToBlocks<
     .use(deps.rehypeStringify.default)
     .processSync(markdown);
 
-  return HTMLToBlocks(
-    htmlString.value as string,
-    blockSchema,
-    icSchema,
-    styleSchema,
-    pmSchema
-  );
+  return htmlString.value as string;
+}
+
+export async function markdownToBlocks<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  markdown: string,
+  blockSchema: BSchema,
+  icSchema: I,
+  styleSchema: S,
+  pmSchema: Schema
+): Promise<Block<BSchema, I, S>[]> {
+  const htmlString = await markdownToHTML(markdown);
+
+  return HTMLToBlocks(htmlString, blockSchema, icSchema, styleSchema, pmSchema);
 }

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

@@ -23,6 +23,18 @@ export const defaultSchemaTestCases: EditorTestCases<
     return BlockNoteEditor.create({
       schema: withPageBreak(BlockNoteSchema.create()),
       uploadFile: uploadToTmpFilesDotOrg_DEV_ONLY,
+      codeBlock: {
+        supportedLanguages: {
+          javascript: {
+            name: "JavaScript",
+            aliases: ["js"],
+          },
+          python: {
+            name: "Python",
+            aliases: ["py"],
+          },
+        },
+      },
     });
   },
   documents: [
@@ -213,6 +225,7 @@ export const defaultSchemaTestCases: EditorTestCases<
       blocks: [
         {
           type: "codeBlock",
+          props: { language: "javascript" },
           content: "const hello = 'world';\nconsole.log(hello);\n",
         },
       ],

package/src/blocks/CodeBlockContent/CodeBlockContent.ts

@@ -2,28 +2,65 @@ 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[];
-}
+import type { HighlighterGeneric } from "@shikijs/types";
+import { BlockNoteEditor } from "../../index.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(
@@ -31,8 +68,7 @@ export const shikiHighlighterPromiseSymbol = Symbol.for(
 );
 export const defaultCodeBlockPropSchema = {
   language: {
-    default: "javascript",
-    values: [...defaultSupportedLanguages.map((lang) => lang.id)],
+    default: "text",
   },
 } satisfies PropSchema;
 
@@ -45,18 +81,17 @@ const CodeBlockContent = createStronglyTypedTiptapNode({
   defining: true,
   addOptions() {
     return {
-      defaultLanguage: "javascript",
+      defaultLanguage: "text",
       indentLineWithTab: true,
-      supportedLanguages: defaultSupportedLanguages,
+      supportedLanguages: {},
     };
   },
   addAttributes() {
-    const supportedLanguages = this.options
-      .supportedLanguages as SupportedLanguageConfig[];
+    const options = this.options as CodeBlockConfigOptions;
 
     return {
       language: {
-        default: this.options.defaultLanguage,
+        default: options.editor.settings.codeBlock.defaultLanguage,
         parseHTML: (inputElement) => {
           let element = inputElement as HTMLElement | null;
           let language: string | null = null;
@@ -91,17 +126,13 @@ const CodeBlockContent = createStronglyTypedTiptapNode({
             return null;
           }
 
-          return (
-            supportedLanguages.find(({ match }) => {
-              return match.includes(language);
-            })?.id || this.options.defaultLanguage
-          );
+          return getLanguageId(options.editor.settings.codeBlock, language);
         },
         renderHTML: (attributes) => {
-          // TODO: Use `data-language="..."` instead for easier parsing
-          return attributes.language && attributes.language !== "text"
+          return attributes.language
             ? {
                 class: `language-${attributes.language}`,
+                "data-language": attributes.language,
               }
             : {};
         },
@@ -143,8 +174,7 @@ const CodeBlockContent = createStronglyTypedTiptapNode({
     };
   },
   addNodeView() {
-    const supportedLanguages = this.options
-      .supportedLanguages as SupportedLanguageConfig[];
+    const options = this.options as CodeBlockConfigOptions;
 
     return ({ editor, node, getPos, HTMLAttributes }) => {
       const pre = document.createElement("pre");
@@ -169,7 +199,9 @@ const CodeBlockContent = createStronglyTypedTiptapNode({
         });
       };
 
-      supportedLanguages.forEach(({ id, name }) => {
+      Object.entries(
+        options.editor.settings.codeBlock.supportedLanguages
+      ).forEach(([id, { name }]) => {
         const option = document.createElement("option");
 
         option.value = id;
@@ -178,7 +210,9 @@ const CodeBlockContent = createStronglyTypedTiptapNode({
       });
 
       selectWrapper.contentEditable = "false";
-      select.value = node.attrs.language || this.options.defaultLanguage;
+      select.value =
+        node.attrs.language ||
+        options.editor.settings.codeBlock.defaultLanguage;
       dom.removeChild(contentDOM);
       dom.appendChild(selectWrapper);
       dom.appendChild(pre);
@@ -203,24 +237,30 @@ const CodeBlockContent = createStronglyTypedTiptapNode({
     };
   },
   addProseMirrorPlugins() {
-    const supportedLanguages = this.options
-      .supportedLanguages as SupportedLanguageConfig[];
+    const options = this.options as CodeBlockConfigOptions;
     const globalThisForShiki = globalThis as {
-      [shikiHighlighterPromiseSymbol]?: Promise<Highlighter>;
+      [shikiHighlighterPromiseSymbol]?: Promise<HighlighterGeneric<any, any>>;
       [shikiParserSymbol]?: Parser;
     };
 
-    let highlighter: Highlighter | undefined;
+    let highlighter: HighlighterGeneric<any, any> | undefined;
     let parser: Parser | undefined;
-
-    const lazyParser: Parser = (options) => {
+    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 highlighter function"
+          );
+          hasWarned = true;
+        }
+        return [];
+      }
       if (!highlighter) {
         globalThisForShiki[shikiHighlighterPromiseSymbol] =
           globalThisForShiki[shikiHighlighterPromiseSymbol] ||
-          createHighlighter({
-            themes: ["github-dark"],
-            langs: [],
-          });
+          options.editor.settings.codeBlock.createHighlighter();
 
         return globalThisForShiki[shikiHighlighterPromiseSymbol].then(
           (createdHighlighter) => {
@@ -229,25 +269,25 @@ const CodeBlockContent = createStronglyTypedTiptapNode({
         );
       }
 
-      const language = options.language;
+      const language = parserOptions.language;
 
       if (
         language &&
         language !== "text" &&
         !highlighter.getLoadedLanguages().includes(language) &&
-        supportedLanguages.find(({ id }) => id === language) &&
-        bundledLanguagesInfo.find(({ id }) => id === language)
+        language in options.editor.settings.codeBlock.supportedLanguages
       ) {
-        return highlighter.loadLanguage(language as BundledLanguage);
+        return highlighter.loadLanguage(language);
       }
 
       if (!parser) {
         parser =
-          globalThisForShiki[shikiParserSymbol] || createParser(highlighter);
+          globalThisForShiki[shikiParserSymbol] ||
+          createParser(highlighter as any);
         globalThisForShiki[shikiParserSymbol] = parser;
       }
 
-      return parser(options);
+      return parser(parserOptions);
     };
 
     const shikiLazyPlugin = createHighlightPlugin({
@@ -259,8 +299,7 @@ const CodeBlockContent = createStronglyTypedTiptapNode({
     return [shikiLazyPlugin];
   },
   addInputRules() {
-    const supportedLanguages = this.options
-      .supportedLanguages as SupportedLanguageConfig[];
+    const options = this.options as CodeBlockConfigOptions;
 
     return [
       new InputRule({
@@ -269,10 +308,10 @@ const CodeBlockContent = createStronglyTypedTiptapNode({
           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,
+            language: getLanguageId(
+              options.editor.settings.codeBlock,
+              languageName
+            ),
           };
 
           if (
@@ -383,18 +422,10 @@ export const CodeBlock = createBlockSpecFromStronglyTypedTiptapNode(
   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,
-      },
-    }
+function getLanguageId(options: CodeBlockOptions, languageName: string) {
+  return (
+    Object.entries(options.supportedLanguages).find(([id, { aliases }]) => {
+      return aliases?.includes(languageName) || id === languageName;
+    })?.[0] || languageName
   );
 }

package/src/blocks/QuoteBlockContent/QuoteBlockContent.ts

@@ -0,0 +1,98 @@
+import {
+  createBlockSpecFromStronglyTypedTiptapNode,
+  createStronglyTypedTiptapNode,
+} from "../../schema/index.js";
+import { createDefaultBlockDOMOutputSpec } from "../defaultBlockHelpers.js";
+import { defaultProps } from "../defaultProps.js";
+import { getBlockInfoFromSelection } from "../../api/getBlockInfoFromPos.js";
+import { updateBlockCommand } from "../../api/blockManipulation/commands/updateBlock/updateBlock.js";
+import { InputRule } from "@tiptap/core";
+
+export const quotePropSchema = {
+  ...defaultProps,
+};
+
+export const QuoteBlockContent = createStronglyTypedTiptapNode({
+  name: "quote",
+  content: "inline*",
+  group: "blockContent",
+
+  addInputRules() {
+    return [
+      // Creates a block quote when starting with ">".
+      new InputRule({
+        find: new RegExp(`^>\\s$`),
+        handler: ({ state, chain, range }) => {
+          const blockInfo = getBlockInfoFromSelection(state);
+          if (
+            !blockInfo.isBlockContainer ||
+            blockInfo.blockContent.node.type.spec.content !== "inline*"
+          ) {
+            return;
+          }
+
+          chain()
+            .command(
+              updateBlockCommand(
+                this.options.editor,
+                blockInfo.bnBlock.beforePos,
+                {
+                  type: "quote",
+                  props: {},
+                }
+              )
+            )
+            // Removes the ">" character used to set the list.
+            .deleteRange({ from: range.from, to: range.to });
+        },
+      }),
+    ];
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      "Mod-Alt-q": () => {
+        const blockInfo = getBlockInfoFromSelection(this.editor.state);
+        if (
+          !blockInfo.isBlockContainer ||
+          blockInfo.blockContent.node.type.spec.content !== "inline*"
+        ) {
+          return true;
+        }
+
+        return this.editor.commands.command(
+          updateBlockCommand(this.options.editor, blockInfo.bnBlock.beforePos, {
+            type: "quote",
+          })
+        );
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      { tag: "div[data-content-type=" + this.name + "]" },
+      {
+        tag: "blockquote",
+        node: "quote",
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return createDefaultBlockDOMOutputSpec(
+      this.name,
+      "blockquote",
+      {
+        ...(this.options.domAttributes?.blockContent || {}),
+        ...HTMLAttributes,
+      },
+      this.options.domAttributes?.inlineContent || {}
+    );
+  },
+});
+
+export const Quote = createBlockSpecFromStronglyTypedTiptapNode(
+  QuoteBlockContent,
+  quotePropSchema
+);

package/src/blocks/TableBlockContent/TableExtension.ts

@@ -31,7 +31,7 @@ export const TableExtension = Extension.create({
           this.editor.state.selection.$head.parent.type.name ===
             "tableParagraph"
         ) {
-          this.editor.commands.setHardBreak();
+          this.editor.commands.insertContent({ type: "hardBreak" });
 
           return true;
         }

package/src/blocks/defaultBlocks.ts

@@ -29,14 +29,14 @@ import { BulletListItem } from "./ListItemBlockContent/BulletListItemBlockConten
 import { CheckListItem } from "./ListItemBlockContent/CheckListItemBlockContent/CheckListItemBlockContent.js";
 import { NumberedListItem } from "./ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent.js";
 import { Paragraph } from "./ParagraphBlockContent/ParagraphBlockContent.js";
+import { Quote } from "./QuoteBlockContent/QuoteBlockContent.js";
 import { Table } from "./TableBlockContent/TableBlockContent.js";
 import { VideoBlock } from "./VideoBlockContent/VideoBlockContent.js";
 
-export { customizeCodeBlock } from "./CodeBlockContent/CodeBlockContent.js";
-
 export const defaultBlockSpecs = {
   paragraph: Paragraph,
   heading: Heading,
+  quote: Quote,
   codeBlock: CodeBlock,
   bulletListItem: BulletListItem,
   numberedListItem: NumberedListItem,