@blocknote/core 0.26.0 → 0.27.0

package/types/src/index.d.ts

@@ -1,4 +1,3 @@
-import * as locales from "./i18n/locales/index.js";
 export * from "./api/blockManipulation/commands/updateBlock/updateBlock.js";
 export * from "./api/exporters/html/externalHTMLExporter.js";
 export * from "./api/exporters/html/internalHTMLSerializer.js";
@@ -53,8 +52,8 @@ export * from "./util/esmDependencies.js";
 export * from "./util/table.js";
 export * from "./util/string.js";
 export * from "./util/typescript.js";
+export type { CodeBlockOptions } from "./blocks/CodeBlockContent/CodeBlockContent.js";
 export { UnreachableCaseError, assertEmpty } from "./util/typescript.js";
-export { locales };
 export * from "./api/nodeConversions/blockToNode.js";
 export * from "./api/nodeConversions/nodeToBlock.js";
 export * from "./api/testUtil/partialBlockTestUtil.js";

package/types/src/locales.d.ts

@@ -0,0 +1 @@
+export * from "./i18n/index.js";

package/types/src/pm-nodes/BlockContainer.d.ts

@@ -1,15 +1,10 @@
 import { Node } from "@tiptap/core";
 import type { BlockNoteEditor } from "../editor/BlockNoteEditor.js";
+import { BlockNoteDOMAttributes } from "../schema/index.js";
 /**
  * The main "Block node" documents consist of
  */
 export declare const BlockContainer: Node<{
-    domAttributes?: Partial<{
-        editor: Record<string, string>;
-        block: Record<string, string>;
-        blockGroup: Record<string, string>;
-        blockContent: Record<string, string>;
-        inlineContent: Record<string, string>;
-    }> | undefined;
+    domAttributes?: BlockNoteDOMAttributes;
     editor: BlockNoteEditor<any, any, any>;
 }, any>;

package/types/src/pm-nodes/BlockGroup.d.ts

@@ -1,10 +1,5 @@
 import { Node } from "@tiptap/core";
+import { BlockNoteDOMAttributes } from "../schema/index.js";
 export declare const BlockGroup: Node<{
-    domAttributes?: Partial<{
-        editor: Record<string, string>;
-        block: Record<string, string>;
-        blockGroup: Record<string, string>;
-        blockContent: Record<string, string>;
-        inlineContent: Record<string, string>;
-    }> | undefined;
+    domAttributes?: BlockNoteDOMAttributes;
 }, any>;

package/types/src/schema/blocks/types.d.ts

@@ -38,6 +38,7 @@ export type BlockConfig = {
     content: "inline" | "none" | "table";
     isSelectable?: boolean;
     isFileBlock?: false;
+    hardBreakShortcut?: "shift+enter" | "enter" | "none";
 } | FileBlockConfig;
 export type TiptapBlockImplementation<T extends BlockConfig, B extends BlockSchema, I extends InlineContentSchema, S extends StyleSchema> = {
     requiredExtensions?: Array<Extension | Node>;

package/types/src/schema/inlineContent/internal.d.ts

@@ -22,7 +22,7 @@ export declare function createInlineContentSpecFromTipTapNode<T extends Node, P
         content: "styled" | "none";
     };
     implementation: {
-        node: Node<any, any>;
+        node: Node;
     };
 };
 export declare function getInlineContentSchemaFromSpecs<T extends InlineContentSpecs>(specs: T): InlineContentSchemaFromSpecs<T>;

package/README.md

@@ -1,125 +0,0 @@
-<p align="center">
-  <a href="https://www.blocknotejs.org">
-    <img alt="TypeCell" src="https://github.com/TypeCellOS/BlockNote/raw/main/docs/public/img/logos/banner.svg?raw=true" width="300" />
-  </a>
-</p>
-
-<p align="center">
-Welcome to BlockNote! The open source Block-Based
-React rich text editor. Easily add a modern text editing experience to your app.
-</p>
-
-<p align="center">
-<a href="https://discord.gg/Qc2QTTH5dF"><img alt="Discord" src="https://img.shields.io/badge/Chat on discord%20-%237289DA.svg?&style=for-the-badge&logo=discord&logoColor=white"/></a> 
-</p>
-
-<p align="center">
-  <a href="https://www.blocknotejs.org">
-    Homepage
-  </a> - <a href="https://www.blocknotejs.org/docs/introduction">
-    Documentation
-  </a> - <a href="https://www.blocknotejs.org/docs/quickstart">
-    Quickstart
-  </a>- <a href="https://www.blocknotejs.org/examples">
-    Examples
-  </a>
-</p>
-
-# Live demo
-
-See our homepage @ [https://www.blocknotejs.org](https://www.blocknotejs.org/) or browse the [examples](https://www.blocknotejs.org/examples).
-
-# Example code (React)
-
-[![npm version](https://badge.fury.io/js/%40blocknote%2Freact.svg)](https://badge.fury.io/js/%40blocknote%2Freact)
-
-```typescript
-import { useCreateBlockNote } from "@blocknote/react";
-import { BlockNoteView } from "@blocknote/mantine";
-import "@blocknote/core/fonts/inter.css";
-import "@blocknote/mantine/style.css";
-
-function App() {
-  const editor = useCreateBlockNote();
-
-  return <BlockNoteView editor={editor} />;
-}
-```
-
-`@blocknote/react` comes with a fully styled UI that makes it an instant, polished editor ready to use in your app.
-
-If you prefer to create your own UI components (menus), or don't want to use React, you can use `@blocknote/core` (_advanced_, [see docs](https://www.blocknotejs.org/docs/vanilla-js)).
-
-# Features
-
-BlockNote comes with a number of features and components to make it easy to embed a high-quality block-based editor in your app:
-
-### Animations:
-
-<img src="https://github.com/TypeCellOS/BlockNote/blob/readme/.resources/animations.gif?raw=true" width="400" />
-
-### Helpful placeholders:
-
-<img src="https://github.com/TypeCellOS/BlockNote/blob/readme/.resources/placeholders.gif?raw=true" width="400" />
-
-### Drag and drop blocks:
-
-<img src="https://github.com/TypeCellOS/BlockNote/blob/readme/.resources/dragdrop.gif?raw=true" width="400" />
-
-### Nesting / indentation with tab and shift+tab:
-
-<img src="https://github.com/TypeCellOS/BlockNote/blob/readme/.resources/nesting.gif?raw=true" width="400" />
-
-### Slash (/) menu:
-
-<img src="https://github.com/TypeCellOS/BlockNote/blob/readme/.resources/slashmenu.gif?raw=true" width="400" />
-
-### Format menu:
-
-<img src="https://github.com/TypeCellOS/BlockNote/blob/readme/.resources/selectmenu.gif?raw=true" width="400" />
-
-### Real-time collaboration:
-
-<img src="https://github.com/TypeCellOS/BlockNote/blob/readme/.resources/collaboration.gif?raw=true" width="400" />
-
-# Feedback 🙋‍♂️🙋‍♀️
-
-We'd love to hear your thoughts and see your experiments, so [come and say hi on Discord](https://discord.gg/Qc2QTTH5dF) or [Matrix](https://matrix.to/#/#typecell-space:matrix.org).
-
-# Contributing 🙌
-
-See [CONTRIBUTING.md](CONTRIBUTING.md) for more info and guidance on how to run the project (TLDR: just use `npm start`).
-
-Directory structure:
-
-```
-blocknote
-├── packages/core       - The core of the editor
-├── packages/react      - The main library for use in React apps
-├── packages/mantine    - Mantine (default) implementation of BlockNote UI
-├── packages/ariakit    - AriaKit implementation of BlockNote UI
-├── packages/shadcn     - ShadCN / Tailwind / Radix implementation of BlockNote UI
-├── examples            - Example apps
-├── playground          - App to browse the example apps (https://playground.blocknotejs.org)
-└── tests               - Playwright end to end tests
-```
-
-The codebase is automatically tested using Vitest and Playwright.
-
-# License 📃
-
-BlockNote is licensed under the [MPL 2.0 license](https://fossa.com/blog/open-source-software-licenses-101-mozilla-public-license-2-0/), which allows you to use BlockNote in commercial (and closed-source) applications. If you make changes to the BlockNote source files, you're expected to publish these changes so the wider community can benefit as well.
-
-# Credits ❤️
-
-BlockNote builds directly on two awesome projects; [Prosemirror](https://prosemirror.net/) by Marijn Haverbeke and [Tiptap](https://tiptap.dev/). Consider sponsoring those libraries when using BlockNote: [Prosemirror](https://marijnhaverbeke.nl/fund/), [Tiptap](https://github.com/sponsors/ueberdosis).
-
-BlockNote is built as part of [TypeCell](https://www.typecell.org). TypeCell is proudly sponsored by the renowned [NLNet foundation](https://nlnet.nl/foundation/) who are on a mission to support an open internet, and protect the privacy and security of internet users. Check them out!
-
-<a href="https://nlnet.nl"><img src="https://nlnet.nl/image/logos/NGIAssure_tag.svg" alt="NLNet" width="100"></a>
-
-Hosting and deployments powered by Vercel:
-
-<a href="https://vercel.com/?utm_source=TypeCell&utm_campaign=oss"><img src="https://images.ctfassets.net/e5382hct74si/78Olo8EZRdUlcDUFQvnzG7/fa4cdb6dc04c40fceac194134788a0e2/1618983297-powered-by-vercel.svg" alt="NLNet" width="150"></a>
-
-This project is tested with BrowserStack

package/src/blocks/CodeBlockContent/defaultSupportedLanguages.ts

@@ -1,116 +0,0 @@
-import { bundledLanguagesInfo } from "shiki";
-
-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 [
-        "c",
-        "cpp",
-        "css",
-        "glsl",
-        "graphql",
-        "haml",
-        "html",
-        "java",
-        "javascript",
-        "json",
-        "jsonc",
-        "jsonl",
-        "jsx",
-        "julia",
-        "less",
-        "markdown",
-        "mdx",
-        "php",
-        "postcss",
-        "pug",
-        "python",
-        "r",
-        "regexp",
-        "sass",
-        "scss",
-        "shellscript",
-        "sql",
-        "svelte",
-        "typescript",
-        "vue",
-        "vue-html",
-        "wasm",
-        "wgsl",
-        "xml",
-        "yaml",
-      ].includes(lang.id);
-    })
-    .map((lang) => ({
-      match: [lang.id, ...(lang.aliases || [])],
-      id: lang.id,
-      name: lang.name,
-    })),
-  { id: "tsx", name: "TSX", match: ["tsx", "typescriptreact"] },
-  {
-    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/types/src/extensions/Comments/threadstore/DefaultThreadStoreAuth.d.ts

@@ -1,47 +0,0 @@
-import { CommentData, ThreadData } from "../types.js";
-import { ThreadStoreAuth } from "./ThreadStoreAuth.js";
-export declare class DefaultThreadStoreAuth extends ThreadStoreAuth {
-    private readonly userId;
-    private readonly role;
-    constructor(userId: string, role: "comment" | "editor");
-    /**
-     * Auth: should be possible by anyone with comment access
-     */
-    canCreateThread(): boolean;
-    /**
-     * Auth: should be possible by anyone with comment access
-     */
-    canAddComment(_thread: ThreadData): boolean;
-    /**
-     * Auth: should only be possible by the comment author
-     */
-    canUpdateComment(comment: CommentData): boolean;
-    /**
-     * Auth: should be possible by the comment author OR an editor of the document
-     */
-    canDeleteComment(comment: CommentData): boolean;
-    /**
-     * Auth: should only be possible by an editor of the document
-     */
-    canDeleteThread(_thread: ThreadData): boolean;
-    /**
-     * Auth: should be possible by anyone with comment access
-     */
-    canResolveThread(_thread: ThreadData): boolean;
-    /**
-     * Auth: should be possible by anyone with comment access
-     */
-    canUnresolveThread(_thread: ThreadData): boolean;
-    /**
-     * Auth: should be possible by anyone with comment access
-     *
-     * Note: will also check if the user has already reacted with the same emoji. TBD: is that a nice design or should this responsibility be outside of auth?
-     */
-    canAddReaction(comment: CommentData, emoji?: string): boolean;
-    /**
-     * Auth: should be possible by anyone with comment access
-     *
-     * Note: will also check if the user has already reacted with the same emoji. TBD: is that a nice design or should this responsibility be outside of auth?
-     */
-    canDeleteReaction(comment: CommentData, emoji?: string): boolean;
-}

package/types/src/extensions/Comments/threadstore/ThreadStore.d.ts

@@ -1,121 +0,0 @@
-import { CommentBody, CommentData, ThreadData } from "../types.js";
-import { ThreadStoreAuth } from "./ThreadStoreAuth.js";
-/**
- * ThreadStore is an abstract class that defines the interface
- * to read / add / update / delete threads and comments.
- */
-export declare abstract class ThreadStore {
-    readonly auth: ThreadStoreAuth;
-    constructor(auth: ThreadStoreAuth);
-    /**
-     * A "thread" in the ThreadStore only contains information about the content
-     * of the thread / comments. It does not contain information about the position.
-     *
-     * This function can be implemented to store the thread in the document (by creating a mark)
-     * If not implemented, default behavior will apply (creating the mark via TipTap)
-     * See CommentsPlugin.ts for more details.
-     */
-    abstract addThreadToDocument?(options: {
-        threadId: string;
-        selection: {
-            prosemirror: {
-                head: number;
-                anchor: number;
-            };
-            yjs: {
-                head: any;
-                anchor: any;
-            };
-        };
-    }): Promise<void>;
-    /**
-     * Creates a new thread with an initial comment.
-     */
-    abstract createThread(options: {
-        initialComment: {
-            body: CommentBody;
-            metadata?: any;
-        };
-        metadata?: any;
-    }): Promise<ThreadData>;
-    /**
-     * Adds a comment to a thread.
-     */
-    abstract addComment(options: {
-        comment: {
-            body: CommentBody;
-            metadata?: any;
-        };
-        threadId: string;
-    }): Promise<CommentData>;
-    /**
-     * Updates a comment in a thread.
-     */
-    abstract updateComment(options: {
-        comment: {
-            body: CommentBody;
-            metadata?: any;
-        };
-        threadId: string;
-        commentId: string;
-    }): Promise<void>;
-    /**
-     * Deletes a comment from a thread.
-     */
-    abstract deleteComment(options: {
-        threadId: string;
-        commentId: string;
-    }): Promise<void>;
-    /**
-     * Deletes a thread.
-     */
-    abstract deleteThread(options: {
-        threadId: string;
-    }): Promise<void>;
-    /**
-     * Marks a thread as resolved.
-     */
-    abstract resolveThread(options: {
-        threadId: string;
-    }): Promise<void>;
-    /**
-     * Marks a thread as unresolved.
-     */
-    abstract unresolveThread(options: {
-        threadId: string;
-    }): Promise<void>;
-    /**
-     * Adds a reaction to a comment.
-     *
-     * Auth: should be possible by anyone with comment access
-     */
-    abstract addReaction(options: {
-        threadId: string;
-        commentId: string;
-        emoji: string;
-    }): Promise<void>;
-    /**
-     * Deletes a reaction from a comment.
-     *
-     * Auth: should be possible by the reaction author
-     */
-    abstract deleteReaction(options: {
-        threadId: string;
-        commentId: string;
-        emoji: string;
-    }): Promise<void>;
-    /**
-     * Retrieve data for a specific thread.
-     */
-    abstract getThread(threadId: string): ThreadData;
-    /**
-     * Retrieve all threads.
-     */
-    abstract getThreads(): Map<string, ThreadData>;
-    /**
-     * Subscribe to changes in the thread store.
-     *
-     * @returns a function to unsubscribe from the thread store
-     */
-    abstract subscribe(cb: (threads: Map<string, ThreadData>) => void): () => void;
-}

package/types/src/extensions/Comments/threadstore/ThreadStoreAuth.d.ts

@@ -1,12 +0,0 @@
-import { CommentData, ThreadData } from "../types.js";
-export declare abstract class ThreadStoreAuth {
-    abstract canCreateThread(): boolean;
-    abstract canAddComment(thread: ThreadData): boolean;
-    abstract canUpdateComment(comment: CommentData): boolean;
-    abstract canDeleteComment(comment: CommentData): boolean;
-    abstract canDeleteThread(thread: ThreadData): boolean;
-    abstract canResolveThread(thread: ThreadData): boolean;
-    abstract canUnresolveThread(thread: ThreadData): boolean;
-    abstract canAddReaction(comment: CommentData, emoji?: string): boolean;
-    abstract canDeleteReaction(comment: CommentData, emoji?: string): boolean;
-}

package/types/src/extensions/Comments/threadstore/TipTapThreadStore.d.ts

@@ -1,97 +0,0 @@
-import type { TiptapCollabProvider } from "@hocuspocus/provider";
-import { CommentBody, ThreadData } from "../types.js";
-import { ThreadStore } from "./ThreadStore.js";
-import { ThreadStoreAuth } from "./ThreadStoreAuth.js";
-/**
- * The `TiptapThreadStore` integrates with Tiptap's collaboration provider for comment management.
- * You can pass a `TiptapCollabProvider` to the constructor which takes care of storing the comments.
- *
- * Under the hood, this actually works similarly to the `YjsThreadStore` implementation. (comments are stored in the Yjs document)
- */
-export declare class TiptapThreadStore extends ThreadStore {
-    private readonly userId;
-    private readonly provider;
-    constructor(userId: string, provider: TiptapCollabProvider, auth: ThreadStoreAuth);
-    /**
-     * Creates a new thread with an initial comment.
-     */
-    createThread(options: {
-        initialComment: {
-            body: CommentBody;
-            metadata?: any;
-        };
-        metadata?: any;
-    }): Promise<ThreadData>;
-    addThreadToDocument: undefined;
-    /**
-     * Adds a comment to a thread.
-     */
-    addComment(options: {
-        comment: {
-            body: CommentBody;
-            metadata?: any;
-        };
-        threadId: string;
-    }): Promise<CommentBody>;
-    /**
-     * Updates a comment in a thread.
-     */
-    updateComment(options: {
-        comment: {
-            body: CommentBody;
-            metadata?: any;
-        };
-        threadId: string;
-        commentId: string;
-    }): Promise<void>;
-    private tiptapCommentToCommentData;
-    private tiptapThreadToThreadData;
-    /**
-     * Deletes a comment from a thread.
-     */
-    deleteComment(options: {
-        threadId: string;
-        commentId: string;
-    }): Promise<void>;
-    /**
-     * Deletes a thread.
-     */
-    deleteThread(options: {
-        threadId: string;
-    }): Promise<void>;
-    /**
-     * Marks a thread as resolved.
-     */
-    resolveThread(options: {
-        threadId: string;
-    }): Promise<void>;
-    /**
-     * Marks a thread as unresolved.
-     */
-    unresolveThread(options: {
-        threadId: string;
-    }): Promise<void>;
-    /**
-     * Adds a reaction to a comment.
-     *
-     * Auth: should be possible by anyone with comment access
-     */
-    addReaction(options: {
-        threadId: string;
-        commentId: string;
-        emoji: string;
-    }): Promise<void>;
-    /**
-     * Deletes a reaction from a comment.
-     *
-     * Auth: should be possible by the reaction author
-     */
-    deleteReaction(options: {
-        threadId: string;
-        commentId: string;
-        emoji: string;
-    }): Promise<void>;
-    getThread(threadId: string): ThreadData;
-    getThreads(): Map<string, ThreadData>;
-    subscribe(cb: (threads: Map<string, ThreadData>) => void): () => void;
-}

package/types/src/extensions/Comments/threadstore/yjs/RESTYjsThreadStore.d.ts

@@ -1,83 +0,0 @@
-import * as Y from "yjs";
-import { CommentBody } from "../../types.js";
-import { ThreadStoreAuth } from "../ThreadStoreAuth.js";
-import { YjsThreadStoreBase } from "./YjsThreadStoreBase.js";
-/**
- * This is a REST-based implementation of the YjsThreadStoreBase.
- * It Reads data directly from the underlying document (same as YjsThreadStore),
- * but for Writes, it sends data to a REST API that should:
- * - check the user has the correct permissions to make the desired changes
- * - apply the updates to the underlying Yjs document
- *
- * (see https://github.com/TypeCellOS/BlockNote-demo-nextjs-hocuspocus)
- *
- * The reason we still use the Yjs document as underlying storage is that it makes it easy to
- * sync updates in real-time to other collaborators.
- * (but technically, you could also implement a different storage altogether
- * and not store the thread related data in the Yjs document)
- */
-export declare class RESTYjsThreadStore extends YjsThreadStoreBase {
-    private readonly BASE_URL;
-    private readonly headers;
-    constructor(BASE_URL: string, headers: Record<string, string>, threadsYMap: Y.Map<any>, auth: ThreadStoreAuth);
-    private doRequest;
-    addThreadToDocument: (options: {
-        threadId: string;
-        selection: {
-            prosemirror: {
-                head: number;
-                anchor: number;
-            };
-            yjs: {
-                head: any;
-                anchor: any;
-            };
-        };
-    }) => Promise<any>;
-    createThread: (options: {
-        initialComment: {
-            body: CommentBody;
-            metadata?: any;
-        };
-        metadata?: any;
-    }) => Promise<any>;
-    addComment: (options: {
-        comment: {
-            body: CommentBody;
-            metadata?: any;
-        };
-        threadId: string;
-    }) => Promise<any>;
-    updateComment: (options: {
-        comment: {
-            body: CommentBody;
-            metadata?: any;
-        };
-        threadId: string;
-        commentId: string;
-    }) => Promise<any>;
-    deleteComment: (options: {
-        threadId: string;
-        commentId: string;
-        softDelete?: boolean;
-    }) => Promise<any>;
-    deleteThread: (options: {
-        threadId: string;
-    }) => Promise<any>;
-    resolveThread: (options: {
-        threadId: string;
-    }) => Promise<any>;
-    unresolveThread: (options: {
-        threadId: string;
-    }) => Promise<any>;
-    addReaction: (options: {
-        threadId: string;
-        commentId: string;
-        emoji: string;
-    }) => Promise<any>;
-    deleteReaction: (options: {
-        threadId: string;
-        commentId: string;
-        emoji: string;
-    }) => Promise<any>;
-}