@blocknote/core 0.25.2 → 0.27.0

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,

package/src/comments/threadstore/yjs/YjsThreadStore.ts

@@ -237,6 +237,7 @@ export class YjsThreadStore extends YjsThreadStoreBase {
 
     yThread.set("resolved", true);
     yThread.set("resolvedUpdatedAt", new Date().getTime());
+    yThread.set("resolvedBy", this.userId);
   });
 
   public unresolveThread = this.transact((options: { threadId: string }) => {

package/src/comments/threadstore/yjs/yjsHelpers.ts

@@ -40,6 +40,7 @@ export function threadToYMap(thread: ThreadData) {
   yMap.set("comments", commentsArray);
   yMap.set("resolved", thread.resolved);
   yMap.set("resolvedUpdatedAt", thread.resolvedUpdatedAt?.getTime());
+  yMap.set("resolvedBy", thread.resolvedBy);
   yMap.set("metadata", thread.metadata);
   return yMap;
 }
@@ -115,7 +116,8 @@ export function yMapToThread(yMap: Y.Map<any>): ThreadData {
       (comment) => yMapToComment(comment)
     ),
     resolved: yMap.get("resolved"),
-    resolvedUpdatedAt: yMap.get("resolvedUpdatedAt"),
+    resolvedUpdatedAt: new Date(yMap.get("resolvedUpdatedAt")),
+    resolvedBy: yMap.get("resolvedBy"),
     metadata: yMap.get("metadata"),
   };
 }

package/src/comments/types.ts

@@ -105,6 +105,10 @@ export type ThreadData = {
    * The date when the thread was marked as resolved.
    */
   resolvedUpdatedAt?: Date;
+  /**
+   * The id of the user that marked the thread as resolved.
+   */
+  resolvedBy?: string;
   /**
    * You can use this store any additional information about the thread.
    */

package/src/editor/Block.css

@@ -37,6 +37,10 @@ BASIC STYLES
   outline: 4px solid rgb(100, 160, 255);
 }
 
+.bn-inline-content {
+  width: 100%;
+}
+
 /*
 NESTED BLOCKS
 */
@@ -146,6 +150,14 @@ NESTED BLOCKS
   font-weight: bold;
 }
 
+/* QUOTES */
+[data-content-type="quote"] blockquote {
+  border-left: 2px solid rgb(125, 121, 122);
+  color: rgb(125, 121, 122);
+  margin: 0;
+  padding-left: 1em;
+}
+
 /* LISTS */
 
 .bn-block-content::before {
@@ -188,6 +200,7 @@ NESTED BLOCKS
 /* Checked */
 .bn-block-content[data-content-type="checkListItem"] > div {
   display: flex;
+  width: 100%;
 }
 
 .bn-block-content[data-content-type="checkListItem"] > div > div > input {
@@ -542,6 +555,6 @@ NESTED BLOCKS
   background: rgba(255, 200, 0, 0.15);
 }
 
-.bn-thread-mark:not([data-orphan="true"]) .bn-thread-mark-selected {
+.bn-thread-mark .bn-thread-mark-selected {
   background: rgba(255, 200, 0, 0.25);
 }

package/src/editor/BlockNoteEditor.ts

@@ -43,7 +43,10 @@ import {
 import { createExternalHTMLExporter } from "../api/exporters/html/externalHTMLExporter.js";
 import { blocksToMarkdown } from "../api/exporters/markdown/markdownExporter.js";
 import { HTMLToBlocks } from "../api/parsers/html/parseHTML.js";
-import { markdownToBlocks } from "../api/parsers/markdown/parseMarkdown.js";
+import {
+  markdownToBlocks,
+  markdownToHTML,
+} from "../api/parsers/markdown/parseMarkdown.js";
 import {
   Block,
   DefaultBlockSchema,
@@ -91,7 +94,7 @@ import {
 import { Dictionary } from "../i18n/dictionary.js";
 import { en } from "../i18n/locales/index.js";
 
-import { Plugin, Transaction } from "@tiptap/pm/state";
+import { Plugin, TextSelection, Transaction } from "@tiptap/pm/state";
 import { dropCursor } from "prosemirror-dropcursor";
 import { EditorView } from "prosemirror-view";
 import { ySyncPluginKey } from "y-prosemirror";
@@ -101,6 +104,8 @@ import { nodeToBlock } from "../api/nodeConversions/nodeToBlock.js";
 import type { ThreadStore, User } from "../comments/index.js";
 import "../style.css";
 import { EventEmitter } from "../util/EventEmitter.js";
+import { CodeBlockOptions } from "../blocks/CodeBlockContent/CodeBlockContent.js";
+import { nestedListsToBlockNoteStructure } from "../api/parsers/html/util/nestedLists.js";
 
 export type BlockNoteExtensionFactory = (
   editor: BlockNoteEditor<any, any, any>
@@ -156,6 +161,11 @@ export type BlockNoteEditorOptions<
     showCursorLabels?: "always" | "activity";
   };
 
+  /**
+   * Options for code blocks.
+   */
+  codeBlock?: CodeBlockOptions;
+
   comments: {
     threadStore: ThreadStore;
   };
@@ -212,6 +222,39 @@ export type BlockNoteEditorOptions<
     string | undefined
   >;
 
+  /**
+   * Custom paste handler that can be used to override the default paste behavior.
+   * @returns The function should return `true` if the paste event was handled, otherwise it should return `false` if it should be canceled or `undefined` if it should be handled by another handler.
+   *
+   * @example
+   * ```ts
+   * pasteHandler: ({ defaultPasteHandler }) => {
+   *   return defaultPasteHandler({ pasteBehavior: "prefer-html" });
+   * }
+   * ```
+   */
+  pasteHandler?: (context: {
+    event: ClipboardEvent;
+    editor: BlockNoteEditor<BSchema, ISchema, SSchema>;
+    /**
+     * The default paste handler
+     * @param context The context object
+     * @returns Whether the paste event was handled or not
+     */
+    defaultPasteHandler: (context?: {
+      /**
+       * Whether to prioritize Markdown content in `text/plain` over `text/html` when pasting from the clipboard.
+       * @default true
+       */
+      prioritizeMarkdownOverHTML?: boolean;
+      /**
+       * Whether to parse `text/plain` content from the clipboard as Markdown content.
+       * @default true
+       */
+      plainTextAsMarkdown?: boolean;
+    }) => boolean | undefined;
+  }) => boolean | undefined;
+
   /**
    * Resolve a URL of a file block to one that can be displayed or downloaded. This can be used for creating authenticated URL or
    * implementing custom protocols / schemes
@@ -442,6 +485,7 @@ export class BlockNoteEditor<
       cellTextColor: boolean;
       headers: boolean;
     };
+    codeBlock: CodeBlockOptions;
   };
 
   public static create<
@@ -489,6 +533,12 @@ export class BlockNoteEditor<
         cellTextColor: options?.tables?.cellTextColor ?? false,
         headers: options?.tables?.headers ?? false,
       },
+      codeBlock: {
+        indentLineWithTab: options?.codeBlock?.indentLineWithTab ?? true,
+        defaultLanguage: options?.codeBlock?.defaultLanguage ?? "text",
+        supportedLanguages: options?.codeBlock?.supportedLanguages ?? {},
+        createHighlighter: options?.codeBlock?.createHighlighter ?? undefined,
+      },
     };
 
     // apply defaults
@@ -532,6 +582,7 @@ export class BlockNoteEditor<
       tabBehavior: newOptions.tabBehavior,
       sideMenuDetection: newOptions.sideMenuDetection || "viewport",
       comments: newOptions.comments,
+      pasteHandler: newOptions.pasteHandler,
     });
 
     // add extensions from _tiptapOptions
@@ -688,7 +739,7 @@ export class BlockNoteEditor<
     parentElement?: HTMLElement | null,
     contentComponent?: any
   ) => {
-    this._tiptapEditor.mount(parentElement, contentComponent);
+    this._tiptapEditor.mount(this, parentElement, contentComponent);
   };
 
   /**
@@ -1136,17 +1187,18 @@ export class BlockNoteEditor<
     }
 
     const { from, to } = this._tiptapEditor.state.selection;
-
-    if (!text) {
-      text = this._tiptapEditor.state.doc.textBetween(from, to);
-    }
-
     const mark = this.pmSchema.mark("link", { href: url });
 
     this.dispatch(
-      this._tiptapEditor.state.tr
-        .insertText(text, from, to)
-        .addMark(from, from + text.length, mark)
+      text
+        ? this._tiptapEditor.state.tr
+            .insertText(text, from, to)
+            .addMark(from, from + text.length, mark)
+        : this._tiptapEditor.state.tr
+            .setSelection(
+              TextSelection.create(this._tiptapEditor.state.tr.doc, to)
+            )
+            .addMark(from, to, mark)
     );
   }
 
@@ -1431,4 +1483,44 @@ export class BlockNoteEditor<
   public setForceSelectionVisible(forceSelectionVisible: boolean) {
     this.showSelectionPlugin.setEnabled(forceSelectionVisible);
   }
+
+  /**
+   * This will convert HTML into a format that is compatible with BlockNote.
+   */
+  private convertHtmlToBlockNoteHtml(html: string) {
+    const htmlNode = nestedListsToBlockNoteStructure(html.trim());
+    return htmlNode.innerHTML;
+  }
+
+  /**
+   * Paste HTML into the editor. Defaults to converting HTML to BlockNote HTML.
+   * @param html The HTML to paste.
+   * @param raw Whether to paste the HTML as is, or to convert it to BlockNote HTML.
+   */
+  public pasteHTML(html: string, raw = false) {
+    let htmlToPaste = html;
+    if (!raw) {
+      htmlToPaste = this.convertHtmlToBlockNoteHtml(html);
+    }
+    if (!htmlToPaste) {
+      return;
+    }
+    this.prosemirrorView?.pasteHTML(htmlToPaste);
+  }
+
+  /**
+   * Paste text into the editor. Defaults to interpreting text as markdown.
+   * @param text The text to paste.
+   */
+  public pasteText(text: string) {
+    return this.prosemirrorView?.pasteText(text);
+  }
+
+  /**
+   * Paste markdown into the editor.
+   * @param markdown The markdown to paste.
+   */
+  public async pasteMarkdown(markdown: string) {
+    return this.pasteHTML(await markdownToHTML(markdown));
+  }
 }