From ae93242e1668632dec89911aeecc122d6344619b Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Mon, 13 Oct 2025 18:38:36 +0200 Subject: [PATCH 1/7] Added example for configuring default blocks --- .../07-configuring-blocks/.bnexample.json | 6 + .../07-configuring-blocks/README.md | 9 + .../07-configuring-blocks/index.html | 14 + .../07-configuring-blocks/main.tsx | 11 + .../07-configuring-blocks/package.json | 31 + .../07-configuring-blocks/src/App.tsx | 25 + .../07-configuring-blocks/tsconfig.json | 36 + .../07-configuring-blocks/vite.config.ts | 32 + playground/src/examples.gen.tsx | 3118 +++++++++-------- 9 files changed, 1772 insertions(+), 1510 deletions(-) create mode 100644 examples/06-custom-schema/07-configuring-blocks/.bnexample.json create mode 100644 examples/06-custom-schema/07-configuring-blocks/README.md create mode 100644 examples/06-custom-schema/07-configuring-blocks/index.html create mode 100644 examples/06-custom-schema/07-configuring-blocks/main.tsx create mode 100644 examples/06-custom-schema/07-configuring-blocks/package.json create mode 100644 examples/06-custom-schema/07-configuring-blocks/src/App.tsx create mode 100644 examples/06-custom-schema/07-configuring-blocks/tsconfig.json create mode 100644 examples/06-custom-schema/07-configuring-blocks/vite.config.ts diff --git a/examples/06-custom-schema/07-configuring-blocks/.bnexample.json b/examples/06-custom-schema/07-configuring-blocks/.bnexample.json new file mode 100644 index 0000000000..6d4a02dd52 --- /dev/null +++ b/examples/06-custom-schema/07-configuring-blocks/.bnexample.json @@ -0,0 +1,6 @@ +{ + "playground": true, + "docs": true, + "author": "matthewlipski", + "tags": ["Basic"] +} diff --git a/examples/06-custom-schema/07-configuring-blocks/README.md b/examples/06-custom-schema/07-configuring-blocks/README.md new file mode 100644 index 0000000000..516e81ae18 --- /dev/null +++ b/examples/06-custom-schema/07-configuring-blocks/README.md @@ -0,0 +1,9 @@ +# Configuring Default Blocks + +This example shows how you can configure the editor's default blocks. Specifically, heading blocks are made to only support levels 1-3, and cannot be toggleable. + +**Relevant Docs:** + +- [Editor Setup](/docs/getting-started/editor-setup) +- [Default Schema](/docs/foundations/schemas) +- [Custom Schemas](/docs/features/custom-schemas) diff --git a/examples/06-custom-schema/07-configuring-blocks/index.html b/examples/06-custom-schema/07-configuring-blocks/index.html new file mode 100644 index 0000000000..db99d02c9b --- /dev/null +++ b/examples/06-custom-schema/07-configuring-blocks/index.html @@ -0,0 +1,14 @@ + + + + + Configuring Default Blocks + + + +
+ + + diff --git a/examples/06-custom-schema/07-configuring-blocks/main.tsx b/examples/06-custom-schema/07-configuring-blocks/main.tsx new file mode 100644 index 0000000000..677c7f7eed --- /dev/null +++ b/examples/06-custom-schema/07-configuring-blocks/main.tsx @@ -0,0 +1,11 @@ +// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY +import React from "react"; +import { createRoot } from "react-dom/client"; +import App from "./src/App.jsx"; + +const root = createRoot(document.getElementById("root")!); +root.render( + + + +); diff --git a/examples/06-custom-schema/07-configuring-blocks/package.json b/examples/06-custom-schema/07-configuring-blocks/package.json new file mode 100644 index 0000000000..aa6374fed5 --- /dev/null +++ b/examples/06-custom-schema/07-configuring-blocks/package.json @@ -0,0 +1,31 @@ +{ + "name": "@blocknote/example-custom-schema-configuring-blocks", + "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY", + "type": "module", + "private": true, + "version": "0.12.4", + "scripts": { + "start": "vite", + "dev": "vite", + "build:prod": "tsc && vite build", + "preview": "vite preview" + }, + "dependencies": { + "@blocknote/core": "latest", + "@blocknote/react": "latest", + "@blocknote/ariakit": "latest", + "@blocknote/mantine": "latest", + "@blocknote/shadcn": "latest", + "@mantine/core": "^8.3.4", + "@mantine/hooks": "^8.3.4", + "@mantine/utils": "^6.0.22", + "react": "^19.1.0", + "react-dom": "^19.1.0" + }, + "devDependencies": { + "@types/react": "^19.1.0", + "@types/react-dom": "^19.1.0", + "@vitejs/plugin-react": "^4.3.1", + "vite": "^5.3.4" + } +} \ No newline at end of file diff --git a/examples/06-custom-schema/07-configuring-blocks/src/App.tsx b/examples/06-custom-schema/07-configuring-blocks/src/App.tsx new file mode 100644 index 0000000000..3564940e4f --- /dev/null +++ b/examples/06-custom-schema/07-configuring-blocks/src/App.tsx @@ -0,0 +1,25 @@ +import { BlockNoteSchema, createHeadingBlockSpec } from "@blocknote/core"; +import "@blocknote/core/fonts/inter.css"; +import { BlockNoteView } from "@blocknote/mantine"; +import "@blocknote/mantine/style.css"; +import { useCreateBlockNote } from "@blocknote/react"; + +export default function App() { + // Creates a new editor instance. + const editor = useCreateBlockNote({ + // Creates a default schema and extends it with a configured heading block. + schema: BlockNoteSchema.create().extend({ + blockSpecs: { + heading: createHeadingBlockSpec({ + // Disables toggleable headings. + allowToggleHeadings: false, + // Sets the allowed heading levels. + levels: [1, 2, 3], + }), + }, + }), + }); + + // Renders the editor instance using a React component. + return ; +} diff --git a/examples/06-custom-schema/07-configuring-blocks/tsconfig.json b/examples/06-custom-schema/07-configuring-blocks/tsconfig.json new file mode 100644 index 0000000000..dbe3e6f62d --- /dev/null +++ b/examples/06-custom-schema/07-configuring-blocks/tsconfig.json @@ -0,0 +1,36 @@ +{ + "__comment": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY", + "compilerOptions": { + "target": "ESNext", + "useDefineForClassFields": true, + "lib": [ + "DOM", + "DOM.Iterable", + "ESNext" + ], + "allowJs": false, + "skipLibCheck": true, + "esModuleInterop": false, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "module": "ESNext", + "moduleResolution": "bundler", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", + "composite": true + }, + "include": [ + "." + ], + "__ADD_FOR_LOCAL_DEV_references": [ + { + "path": "../../../packages/core/" + }, + { + "path": "../../../packages/react/" + } + ] +} \ No newline at end of file diff --git a/examples/06-custom-schema/07-configuring-blocks/vite.config.ts b/examples/06-custom-schema/07-configuring-blocks/vite.config.ts new file mode 100644 index 0000000000..f62ab20bc2 --- /dev/null +++ b/examples/06-custom-schema/07-configuring-blocks/vite.config.ts @@ -0,0 +1,32 @@ +// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY +import react from "@vitejs/plugin-react"; +import * as fs from "fs"; +import * as path from "path"; +import { defineConfig } from "vite"; +// import eslintPlugin from "vite-plugin-eslint"; +// https://vitejs.dev/config/ +export default defineConfig((conf) => ({ + plugins: [react()], + optimizeDeps: {}, + build: { + sourcemap: true, + }, + resolve: { + alias: + conf.command === "build" || + !fs.existsSync(path.resolve(__dirname, "../../packages/core/src")) + ? {} + : ({ + // Comment out the lines below to load a built version of blocknote + // or, keep as is to load live from sources with live reload working + "@blocknote/core": path.resolve( + __dirname, + "../../packages/core/src/" + ), + "@blocknote/react": path.resolve( + __dirname, + "../../packages/react/src/" + ), + } as any), + }, +})); diff --git a/playground/src/examples.gen.tsx b/playground/src/examples.gen.tsx index ed2c257512..7da6e265c4 100644 --- a/playground/src/examples.gen.tsx +++ b/playground/src/examples.gen.tsx @@ -1,588 +1,615 @@ // generated by dev-scripts/examples/gen.ts -export const examples = { - basic: { - pathFromRoot: "examples/01-basic", - slug: "basic", - projects: [ - { - projectSlug: "minimal", - fullSlug: "basic/minimal", - pathFromRoot: "examples/01-basic/01-minimal", - config: { - playground: true, - docs: true, - author: "matthewlipski", - tags: ["Basic"], - }, - title: "Basic Setup", - group: { - pathFromRoot: "examples/01-basic", - slug: "basic", - }, - readme: - "This example shows the minimal code required to set up a BlockNote editor in React.\n\n**Relevant Docs:**\n\n- [Editor Setup](/docs/getting-started/editor-setup)", - }, - { - projectSlug: "block-objects", - fullSlug: "basic/block-objects", - pathFromRoot: "examples/01-basic/02-block-objects", - config: { - playground: true, - docs: true, - author: "yousefed", - tags: ["Basic", "Blocks", "Inline Content"], - }, - title: "Displaying Document JSON", - group: { - pathFromRoot: "examples/01-basic", - slug: "basic", - }, - readme: - "In this example, the document's JSON representation is displayed below the editor.\n\n**Try it out:** Try typing in the editor and see the JSON update!\n\n**Relevant Docs:**\n\n- [Document Structure](/docs/foundations/document-structure)\n- [Getting the Document](/docs/reference/editor/manipulating-content)", - }, - { - projectSlug: "multi-column", - fullSlug: "basic/multi-column", - pathFromRoot: "examples/01-basic/03-multi-column", - config: { - playground: true, - docs: true, - author: "yousefed", - tags: ["Basic", "Blocks"], - dependencies: { - "@blocknote/xl-multi-column": "latest", + export const examples = { + "basic": { + "pathFromRoot": "examples/01-basic", + "slug": "basic", + "projects": [ + { + "projectSlug": "minimal", + "fullSlug": "basic/minimal", + "pathFromRoot": "examples/01-basic/01-minimal", + "config": { + "playground": true, + "docs": true, + "author": "matthewlipski", + "tags": [ + "Basic" + ] + }, + "title": "Basic Setup", + "group": { + "pathFromRoot": "examples/01-basic", + "slug": "basic" + }, + "readme": "This example shows the minimal code required to set up a BlockNote editor in React.\n\n**Relevant Docs:**\n\n- [Editor Setup](/docs/getting-started/editor-setup)" + }, + { + "projectSlug": "block-objects", + "fullSlug": "basic/block-objects", + "pathFromRoot": "examples/01-basic/02-block-objects", + "config": { + "playground": true, + "docs": true, + "author": "yousefed", + "tags": [ + "Basic", + "Blocks", + "Inline Content" + ] + }, + "title": "Displaying Document JSON", + "group": { + "pathFromRoot": "examples/01-basic", + "slug": "basic" + }, + "readme": "In this example, the document's JSON representation is displayed below the editor.\n\n**Try it out:** Try typing in the editor and see the JSON update!\n\n**Relevant Docs:**\n\n- [Document Structure](/docs/foundations/document-structure)\n- [Getting the Document](/docs/reference/editor/manipulating-content)" + }, + { + "projectSlug": "multi-column", + "fullSlug": "basic/multi-column", + "pathFromRoot": "examples/01-basic/03-multi-column", + "config": { + "playground": true, + "docs": true, + "author": "yousefed", + "tags": [ + "Basic", + "Blocks" + ], + "dependencies": { + "@blocknote/xl-multi-column": "latest" } as any, - pro: true, - }, - title: "Multi-Column Blocks", - group: { - pathFromRoot: "examples/01-basic", - slug: "basic", - }, - readme: - "This example showcases multi-column blocks, allowing you to stack blocks next to each other. These come as part of the `@blocknote/xl-multi-column` package.\n\n**Relevant Docs:**\n\n- [Editor Setup](/docs/getting-started/editor-setup)\n- [Document Structure](/docs/foundations/document-structure)", - }, - { - projectSlug: "default-blocks", - fullSlug: "basic/default-blocks", - pathFromRoot: "examples/01-basic/04-default-blocks", - config: { - playground: true, - docs: true, - author: "yousefed", - tags: ["Basic", "Blocks", "Inline Content"], - }, - title: "Default Schema Showcase", - group: { - pathFromRoot: "examples/01-basic", - slug: "basic", - }, - readme: - "This example showcases each block and inline content type in BlockNote's default schema.\n\n**Relevant Docs:**\n\n- [Editor Setup](/docs/getting-started/editor-setup)\n- [Document Structure](/docs/foundations/document-structure)\n- [Default Schema](/docs/foundations/schemas)", - }, - { - projectSlug: "removing-default-blocks", - fullSlug: "basic/removing-default-blocks", - pathFromRoot: "examples/01-basic/05-removing-default-blocks", - config: { - playground: true, - docs: true, - author: "hunxjunedo", - tags: ["Basic", "removing", "blocks"], - }, - title: "Removing Default Blocks from Schema", - group: { - pathFromRoot: "examples/01-basic", - slug: "basic", - }, - readme: - "This example shows how to change the default schema and disable the Audio and Image blocks. To do this, we pass in a custom schema based on the built-in, default schema, with two specific blocks removed.\n\n**Relevant Docs:**\n\n- [Editor Setup](/docs/getting-started/editor-setup)\n- [Custom Schemas](/docs/features/custom-schemas)\n- [Default Schema](/docs/foundations/schemas)", - }, - { - projectSlug: "block-manipulation", - fullSlug: "basic/block-manipulation", - pathFromRoot: "examples/01-basic/06-block-manipulation", - config: { - playground: true, - docs: true, - author: "matthewlipski", - tags: ["Basic", "Blocks"], - }, - title: "Manipulating Blocks", - group: { - pathFromRoot: "examples/01-basic", - slug: "basic", - }, - readme: - "This example shows 4 buttons to manipulate the first block using the `insertBlocks`, `updateBlock`, `removeBlocks` and `replaceBlocks` methods.\n\n**Relevant Docs:**\n\n- [Block Manipulation](/docs/reference/editor/manipulating-content)", - }, - { - projectSlug: "selection-blocks", - fullSlug: "basic/selection-blocks", - pathFromRoot: "examples/01-basic/07-selection-blocks", - config: { - playground: true, - docs: true, - author: "matthewlipski", - tags: ["Basic", "Blocks"], - }, - title: "Displaying Selected Blocks", - group: { - pathFromRoot: "examples/01-basic", - slug: "basic", - }, - readme: - "In this example, the JSON representation of blocks spanned by the user's selection, is displayed below the editor.\n\n**Try it out:** Select different blocks in the editor and see the JSON update!\n\n**Relevant Docs:**\n\n- [Cursor Selections](/docs/reference/editor/cursor-selections)", - }, - { - projectSlug: "ariakit", - fullSlug: "basic/ariakit", - pathFromRoot: "examples/01-basic/08-ariakit", - config: { - playground: true, - docs: true, - author: "matthewlipski", - tags: ["Basic"], - }, - title: "Use with Ariakit", - group: { - pathFromRoot: "examples/01-basic", - slug: "basic", - }, - readme: - "This example shows how you can use BlockNote with Ariakit (instead of Mantine).\n\n**Relevant Docs:**\n\n- [Ariakit Docs](/docs/getting-started/ariakit)\n- [Editor Setup](/docs/getting-started/editor-setup)", - }, - { - projectSlug: "shadcn", - fullSlug: "basic/shadcn", - pathFromRoot: "examples/01-basic/09-shadcn", - config: { - playground: true, - docs: true, - author: "matthewlipski", - tags: ["Basic"], - tailwind: true, - stackBlitz: false, - }, - title: "Use with ShadCN", - group: { - pathFromRoot: "examples/01-basic", - slug: "basic", - }, - readme: - "This example shows how you can use BlockNote with ShadCN (instead of Mantine).\n\n**Relevant Docs:**\n\n- [Getting Started with ShadCN](/docs/getting-started/shadcn)", - }, - { - projectSlug: "localization", - fullSlug: "basic/localization", - pathFromRoot: "examples/01-basic/10-localization", - config: { - playground: true, - docs: true, - author: "yousefed", - tags: ["Basic"], - }, - title: "Localization (i18n)", - group: { - pathFromRoot: "examples/01-basic", - slug: "basic", - }, - readme: - "In this example, we pass in a custom dictionary to change the interface of the editor to use Dutch (NL) strings.\n\nYou can also provide your own dictionary to customize the strings used in the editor, or submit a Pull Request to add support for your language of your choice.\n\n**Relevant Docs:**\n\n- [Localization](/docs/features/localization)", - }, - { - projectSlug: "custom-placeholder", - fullSlug: "basic/custom-placeholder", - pathFromRoot: "examples/01-basic/11-custom-placeholder", - config: { - playground: true, - docs: true, - author: "ezhil56x", - tags: ["Basic"], - }, - title: "Change placeholder text", - group: { - pathFromRoot: "examples/01-basic", - slug: "basic", - }, - readme: - "In this example, we show how to change the placeholders:\n\n- For an empty document, we show a placeholder `Start typing..` (by default, this is not set)\n- the default placeholder in this editor shows `Custom default placeholder` instead of the default (`Enter text or type '/' for commands`)\n- for Headings, the placeholder shows `Custom heading placeholder` instead of the default (`Heading`). Try adding a Heading to see the change\n\n**Relevant Docs:**\n\n- [Editor Setup](/docs/getting-started/editor-setup)\n- [Localization (i18n)](/examples/basic/localization)", - }, - { - projectSlug: "multi-editor", - fullSlug: "basic/multi-editor", - pathFromRoot: "examples/01-basic/12-multi-editor", - config: { - playground: true, - docs: true, - author: "areknawo", - tags: ["Basic"], - }, - title: "Multi-Editor Setup", - group: { - pathFromRoot: "examples/01-basic", - slug: "basic", - }, - readme: - "This example showcases use of multiple editors in a single page - you can even drag blocks between them.\n\n**Relevant Docs:**\n\n- [Editor Setup](/docs/getting-started/editor-setup)", - }, - { - projectSlug: "custom-paste-handler", - fullSlug: "basic/custom-paste-handler", - pathFromRoot: "examples/01-basic/13-custom-paste-handler", - config: { - playground: true, - docs: true, - author: "nperez0111", - tags: ["Basic"], - }, - title: "Custom Paste Handler", - group: { - pathFromRoot: "examples/01-basic", - slug: "basic", - }, - readme: - "In this example, we change the default paste handler to append some text to the pasted content when the content is plain text.\n\n**Try it out:** Use the buttons to copy some content to the clipboard and paste it in the editor to trigger our custom paste handler.\n\n**Relevant Docs:**\n\n- [Paste Handling](/docs/reference/editor/paste-handling)", - }, - { - projectSlug: "testing", - fullSlug: "basic/testing", - pathFromRoot: "examples/01-basic/testing", - config: { - playground: true, - docs: false, - }, - title: "Test Editor", - group: { - pathFromRoot: "examples/01-basic", - slug: "basic", - }, - readme: "This example is meant for use in end-to-end tests.", - }, - ], + "pro": true + }, + "title": "Multi-Column Blocks", + "group": { + "pathFromRoot": "examples/01-basic", + "slug": "basic" + }, + "readme": "This example showcases multi-column blocks, allowing you to stack blocks next to each other. These come as part of the `@blocknote/xl-multi-column` package.\n\n**Relevant Docs:**\n\n- [Editor Setup](/docs/getting-started/editor-setup)\n- [Document Structure](/docs/foundations/document-structure)" + }, + { + "projectSlug": "default-blocks", + "fullSlug": "basic/default-blocks", + "pathFromRoot": "examples/01-basic/04-default-blocks", + "config": { + "playground": true, + "docs": true, + "author": "yousefed", + "tags": [ + "Basic", + "Blocks", + "Inline Content" + ] + }, + "title": "Default Schema Showcase", + "group": { + "pathFromRoot": "examples/01-basic", + "slug": "basic" + }, + "readme": "This example showcases each block and inline content type in BlockNote's default schema.\n\n**Relevant Docs:**\n\n- [Editor Setup](/docs/getting-started/editor-setup)\n- [Document Structure](/docs/foundations/document-structure)\n- [Default Schema](/docs/foundations/schemas)" + }, + { + "projectSlug": "removing-default-blocks", + "fullSlug": "basic/removing-default-blocks", + "pathFromRoot": "examples/01-basic/05-removing-default-blocks", + "config": { + "playground": true, + "docs": true, + "author": "hunxjunedo", + "tags": [ + "Basic", + "removing", + "blocks" + ] + }, + "title": "Removing Default Blocks from Schema", + "group": { + "pathFromRoot": "examples/01-basic", + "slug": "basic" + }, + "readme": "This example shows how to change the default schema and disable the Audio and Image blocks. To do this, we pass in a custom schema based on the built-in, default schema, with two specific blocks removed.\n\n**Relevant Docs:**\n\n- [Editor Setup](/docs/getting-started/editor-setup)\n- [Custom Schemas](/docs/features/custom-schemas)\n- [Default Schema](/docs/foundations/schemas)" + }, + { + "projectSlug": "block-manipulation", + "fullSlug": "basic/block-manipulation", + "pathFromRoot": "examples/01-basic/06-block-manipulation", + "config": { + "playground": true, + "docs": true, + "author": "matthewlipski", + "tags": [ + "Basic", + "Blocks" + ] + }, + "title": "Manipulating Blocks", + "group": { + "pathFromRoot": "examples/01-basic", + "slug": "basic" + }, + "readme": "This example shows 4 buttons to manipulate the first block using the `insertBlocks`, `updateBlock`, `removeBlocks` and `replaceBlocks` methods.\n\n**Relevant Docs:**\n\n- [Block Manipulation](/docs/reference/editor/manipulating-content)" + }, + { + "projectSlug": "selection-blocks", + "fullSlug": "basic/selection-blocks", + "pathFromRoot": "examples/01-basic/07-selection-blocks", + "config": { + "playground": true, + "docs": true, + "author": "matthewlipski", + "tags": [ + "Basic", + "Blocks" + ] + }, + "title": "Displaying Selected Blocks", + "group": { + "pathFromRoot": "examples/01-basic", + "slug": "basic" + }, + "readme": "In this example, the JSON representation of blocks spanned by the user's selection, is displayed below the editor.\n\n**Try it out:** Select different blocks in the editor and see the JSON update!\n\n**Relevant Docs:**\n\n- [Cursor Selections](/docs/reference/editor/cursor-selections)" + }, + { + "projectSlug": "ariakit", + "fullSlug": "basic/ariakit", + "pathFromRoot": "examples/01-basic/08-ariakit", + "config": { + "playground": true, + "docs": true, + "author": "matthewlipski", + "tags": [ + "Basic" + ] + }, + "title": "Use with Ariakit", + "group": { + "pathFromRoot": "examples/01-basic", + "slug": "basic" + }, + "readme": "This example shows how you can use BlockNote with Ariakit (instead of Mantine).\n\n**Relevant Docs:**\n\n- [Ariakit Docs](/docs/getting-started/ariakit)\n- [Editor Setup](/docs/getting-started/editor-setup)" + }, + { + "projectSlug": "shadcn", + "fullSlug": "basic/shadcn", + "pathFromRoot": "examples/01-basic/09-shadcn", + "config": { + "playground": true, + "docs": true, + "author": "matthewlipski", + "tags": [ + "Basic" + ], + "tailwind": true, + "stackBlitz": false + }, + "title": "Use with ShadCN", + "group": { + "pathFromRoot": "examples/01-basic", + "slug": "basic" + }, + "readme": "This example shows how you can use BlockNote with ShadCN (instead of Mantine).\n\n**Relevant Docs:**\n\n- [Getting Started with ShadCN](/docs/getting-started/shadcn)" + }, + { + "projectSlug": "localization", + "fullSlug": "basic/localization", + "pathFromRoot": "examples/01-basic/10-localization", + "config": { + "playground": true, + "docs": true, + "author": "yousefed", + "tags": [ + "Basic" + ] + }, + "title": "Localization (i18n)", + "group": { + "pathFromRoot": "examples/01-basic", + "slug": "basic" + }, + "readme": "In this example, we pass in a custom dictionary to change the interface of the editor to use Dutch (NL) strings.\n\nYou can also provide your own dictionary to customize the strings used in the editor, or submit a Pull Request to add support for your language of your choice.\n\n**Relevant Docs:**\n\n- [Localization](/docs/features/localization)" + }, + { + "projectSlug": "custom-placeholder", + "fullSlug": "basic/custom-placeholder", + "pathFromRoot": "examples/01-basic/11-custom-placeholder", + "config": { + "playground": true, + "docs": true, + "author": "ezhil56x", + "tags": [ + "Basic" + ] + }, + "title": "Change placeholder text", + "group": { + "pathFromRoot": "examples/01-basic", + "slug": "basic" + }, + "readme": "In this example, we show how to change the placeholders:\n\n- For an empty document, we show a placeholder `Start typing..` (by default, this is not set)\n- the default placeholder in this editor shows `Custom default placeholder` instead of the default (`Enter text or type '/' for commands`)\n- for Headings, the placeholder shows `Custom heading placeholder` instead of the default (`Heading`). Try adding a Heading to see the change\n\n**Relevant Docs:**\n\n- [Editor Setup](/docs/getting-started/editor-setup)\n- [Localization (i18n)](/examples/basic/localization)" + }, + { + "projectSlug": "multi-editor", + "fullSlug": "basic/multi-editor", + "pathFromRoot": "examples/01-basic/12-multi-editor", + "config": { + "playground": true, + "docs": true, + "author": "areknawo", + "tags": [ + "Basic" + ] + }, + "title": "Multi-Editor Setup", + "group": { + "pathFromRoot": "examples/01-basic", + "slug": "basic" + }, + "readme": "This example showcases use of multiple editors in a single page - you can even drag blocks between them.\n\n**Relevant Docs:**\n\n- [Editor Setup](/docs/getting-started/editor-setup)" + }, + { + "projectSlug": "custom-paste-handler", + "fullSlug": "basic/custom-paste-handler", + "pathFromRoot": "examples/01-basic/13-custom-paste-handler", + "config": { + "playground": true, + "docs": true, + "author": "nperez0111", + "tags": [ + "Basic" + ] + }, + "title": "Custom Paste Handler", + "group": { + "pathFromRoot": "examples/01-basic", + "slug": "basic" + }, + "readme": "In this example, we change the default paste handler to append some text to the pasted content when the content is plain text.\n\n**Try it out:** Use the buttons to copy some content to the clipboard and paste it in the editor to trigger our custom paste handler.\n\n**Relevant Docs:**\n\n- [Paste Handling](/docs/reference/editor/paste-handling)" + }, + { + "projectSlug": "testing", + "fullSlug": "basic/testing", + "pathFromRoot": "examples/01-basic/testing", + "config": { + "playground": true, + "docs": false + }, + "title": "Test Editor", + "group": { + "pathFromRoot": "examples/01-basic", + "slug": "basic" + }, + "readme": "This example is meant for use in end-to-end tests." + } + ] }, - backend: { - pathFromRoot: "examples/02-backend", - slug: "backend", - projects: [ - { - projectSlug: "file-uploading", - fullSlug: "backend/file-uploading", - pathFromRoot: "examples/02-backend/01-file-uploading", - config: { - playground: true, - docs: true, - author: "matthewlipski", - tags: ["Intermediate", "Saving/Loading"], - }, - title: "Upload Files", - group: { - pathFromRoot: "examples/02-backend", - slug: "backend", - }, - readme: - 'This example allows users to upload files and use them in the editor. The files are uploaded to [/TMP/Files](https://tmpfiles.org/), and can be used for File, Image, Video, and Audio blocks.\n\n**Try it out:** Click the "Add Image" button and see there\'s now an "Upload" tab in the toolbar!\n\n**Relevant Docs:**\n\n- [Editor Setup](/docs/getting-started/editor-setup)\n- [File Block](/docs/features/blocks/embeds#file)', - }, - { - projectSlug: "saving-loading", - fullSlug: "backend/saving-loading", - pathFromRoot: "examples/02-backend/02-saving-loading", - config: { - playground: true, - docs: true, - author: "yousefed", - tags: ["Intermediate", "Blocks", "Saving/Loading"], - }, - title: "Saving & Loading", - group: { - pathFromRoot: "examples/02-backend", - slug: "backend", - }, - readme: - "This example shows how to save the editor contents to local storage whenever a change is made, and load the saved contents when the editor is created.\n\nYou can replace the `saveToStorage` and `loadFromStorage` functions with calls to your backend or database.\n\n**Try it out:** Try typing in the editor and reloading the page!\n\n**Relevant Docs:**\n\n- [Editor Setup](/docs/getting-started/editor-setup)\n- [Getting the Document](/docs/foundations/manipulating-content#reading-blocks)", - }, - { - projectSlug: "s3", - fullSlug: "backend/s3", - pathFromRoot: "examples/02-backend/03-s3", - config: { - playground: true, - docs: true, - author: "matthewlipski", - tags: ["Intermediate", "Saving/Loading"], - dependencies: { + "backend": { + "pathFromRoot": "examples/02-backend", + "slug": "backend", + "projects": [ + { + "projectSlug": "file-uploading", + "fullSlug": "backend/file-uploading", + "pathFromRoot": "examples/02-backend/01-file-uploading", + "config": { + "playground": true, + "docs": true, + "author": "matthewlipski", + "tags": [ + "Intermediate", + "Saving/Loading" + ] + }, + "title": "Upload Files", + "group": { + "pathFromRoot": "examples/02-backend", + "slug": "backend" + }, + "readme": "This example allows users to upload files and use them in the editor. The files are uploaded to [/TMP/Files](https://tmpfiles.org/), and can be used for File, Image, Video, and Audio blocks.\n\n**Try it out:** Click the \"Add Image\" button and see there's now an \"Upload\" tab in the toolbar!\n\n**Relevant Docs:**\n\n- [Editor Setup](/docs/getting-started/editor-setup)\n- [File Block](/docs/features/blocks/embeds#file)" + }, + { + "projectSlug": "saving-loading", + "fullSlug": "backend/saving-loading", + "pathFromRoot": "examples/02-backend/02-saving-loading", + "config": { + "playground": true, + "docs": true, + "author": "yousefed", + "tags": [ + "Intermediate", + "Blocks", + "Saving/Loading" + ] + }, + "title": "Saving & Loading", + "group": { + "pathFromRoot": "examples/02-backend", + "slug": "backend" + }, + "readme": "This example shows how to save the editor contents to local storage whenever a change is made, and load the saved contents when the editor is created.\n\nYou can replace the `saveToStorage` and `loadFromStorage` functions with calls to your backend or database.\n\n**Try it out:** Try typing in the editor and reloading the page!\n\n**Relevant Docs:**\n\n- [Editor Setup](/docs/getting-started/editor-setup)\n- [Getting the Document](/docs/foundations/manipulating-content#reading-blocks)" + }, + { + "projectSlug": "s3", + "fullSlug": "backend/s3", + "pathFromRoot": "examples/02-backend/03-s3", + "config": { + "playground": true, + "docs": true, + "author": "matthewlipski", + "tags": [ + "Intermediate", + "Saving/Loading" + ], + "dependencies": { "@aws-sdk/client-s3": "^3.609.0", - "@aws-sdk/s3-request-presigner": "^3.609.0", - } as any, - pro: true, - }, - title: "Upload Files to AWS S3", - group: { - pathFromRoot: "examples/02-backend", - slug: "backend", - }, - readme: - 'This example allows users to upload files to an AWS S3 bucket and use them in the editor. The files can be used for File, Image, Video, and Audio blocks.\n\n**Try it out:** Click the "Add Image" button and see there\'s now an "Upload" tab in the toolbar!\n\n**Relevant Docs:**\n\n- [Editor Setup](/docs/getting-started/editor-setup)\n- [File Block](/docs/features/blocks/embeds#file)', - }, - { - projectSlug: "rendering-static-documents", - fullSlug: "backend/rendering-static-documents", - pathFromRoot: "examples/02-backend/04-rendering-static-documents", - config: { - playground: true, - docs: true, - author: "yousefed", - tags: ["server"], - dependencies: { - "@blocknote/server-util": "latest", + "@aws-sdk/s3-request-presigner": "^3.609.0" } as any, + "pro": true }, - title: "Rendering static documents", - group: { - pathFromRoot: "examples/02-backend", - slug: "backend", + "title": "Upload Files to AWS S3", + "group": { + "pathFromRoot": "examples/02-backend", + "slug": "backend" }, - readme: - "This example shows how you can use HTML exported using the `blocksToFullHTML` and render it as a static document (a view-only document, without the editor). You can use this for example if you use BlockNote to edit blog posts in a CMS, but want to display non-editable static, published pages to end-users.\n\n**Relevant Docs:**\n\n- [Server-side processing](/docs/features/server-processing)", + "readme": "This example allows users to upload files to an AWS S3 bucket and use them in the editor. The files can be used for File, Image, Video, and Audio blocks.\n\n**Try it out:** Click the \"Add Image\" button and see there's now an \"Upload\" tab in the toolbar!\n\n**Relevant Docs:**\n\n- [Editor Setup](/docs/getting-started/editor-setup)\n- [File Block](/docs/features/blocks/embeds#file)" }, - ], + { + "projectSlug": "rendering-static-documents", + "fullSlug": "backend/rendering-static-documents", + "pathFromRoot": "examples/02-backend/04-rendering-static-documents", + "config": { + "playground": true, + "docs": true, + "author": "yousefed", + "tags": [ + "server" + ], + "dependencies": { + "@blocknote/server-util": "latest" + } as any + }, + "title": "Rendering static documents", + "group": { + "pathFromRoot": "examples/02-backend", + "slug": "backend" + }, + "readme": "This example shows how you can use HTML exported using the `blocksToFullHTML` and render it as a static document (a view-only document, without the editor). You can use this for example if you use BlockNote to edit blog posts in a CMS, but want to display non-editable static, published pages to end-users.\n\n**Relevant Docs:**\n\n- [Server-side processing](/docs/features/server-processing)" + } + ] }, "ui-components": { - pathFromRoot: "examples/03-ui-components", - slug: "ui-components", - projects: [ - { - projectSlug: "formatting-toolbar-buttons", - fullSlug: "ui-components/formatting-toolbar-buttons", - pathFromRoot: "examples/03-ui-components/02-formatting-toolbar-buttons", - config: { - playground: true, - docs: true, - author: "matthewlipski", - tags: [ + "pathFromRoot": "examples/03-ui-components", + "slug": "ui-components", + "projects": [ + { + "projectSlug": "formatting-toolbar-buttons", + "fullSlug": "ui-components/formatting-toolbar-buttons", + "pathFromRoot": "examples/03-ui-components/02-formatting-toolbar-buttons", + "config": { + "playground": true, + "docs": true, + "author": "matthewlipski", + "tags": [ "Intermediate", "Inline Content", "UI Components", - "Formatting Toolbar", - ], + "Formatting Toolbar" + ] }, - title: "Adding Formatting Toolbar Buttons", - group: { - pathFromRoot: "examples/03-ui-components", - slug: "ui-components", + "title": "Adding Formatting Toolbar Buttons", + "group": { + "pathFromRoot": "examples/03-ui-components", + "slug": "ui-components" }, - readme: - "In this example, we add a blue text/background color and code style button to the Formatting Toolbar. We also make sure it only shows up when some text is selected.\n\n**Try it out:** Select some text to open the Formatting Toolbar, and click one of the new buttons!\n\n**Relevant Docs:**\n\n- [Changing the Formatting Toolbar](/docs/react/components/formatting-toolbar)\n- [Manipulating Inline Content](/docs/reference/editor/manipulating-content)\n- [Editor Setup](/docs/getting-started/editor-setup)", + "readme": "In this example, we add a blue text/background color and code style button to the Formatting Toolbar. We also make sure it only shows up when some text is selected.\n\n**Try it out:** Select some text to open the Formatting Toolbar, and click one of the new buttons!\n\n**Relevant Docs:**\n\n- [Changing the Formatting Toolbar](/docs/react/components/formatting-toolbar)\n- [Manipulating Inline Content](/docs/reference/editor/manipulating-content)\n- [Editor Setup](/docs/getting-started/editor-setup)" }, { - projectSlug: "formatting-toolbar-block-type-items", - fullSlug: "ui-components/formatting-toolbar-block-type-items", - pathFromRoot: - "examples/03-ui-components/03-formatting-toolbar-block-type-items", - config: { - playground: true, - docs: true, - author: "matthewlipski", - tags: [ + "projectSlug": "formatting-toolbar-block-type-items", + "fullSlug": "ui-components/formatting-toolbar-block-type-items", + "pathFromRoot": "examples/03-ui-components/03-formatting-toolbar-block-type-items", + "config": { + "playground": true, + "docs": true, + "author": "matthewlipski", + "tags": [ "Intermediate", "Blocks", "UI Components", "Formatting Toolbar", - "Custom Schemas", + "Custom Schemas" ], - dependencies: { + "dependencies": { "@mantine/core": "^8.3.4", - "react-icons": "^5.2.1", - } as any, + "react-icons": "^5.2.1" + } as any }, - title: "Adding Block Type Select Items", - group: { - pathFromRoot: "examples/03-ui-components", - slug: "ui-components", + "title": "Adding Block Type Select Items", + "group": { + "pathFromRoot": "examples/03-ui-components", + "slug": "ui-components" }, - readme: - 'In this example, we add an item to the Block Type Select, so that it works for a custom alert block we create.\n\n**Try it out:** Select some text to open the Formatting Toolbar, and click "Alert" in the Block Type Select to change the selected block!\n\n**Relevant Docs:**\n\n- [Changing Block Type Select Items](/docs/react/components/formatting-toolbar)\n- [Custom Block Types](/docs/features/custom-schemas/custom-blocks)\n- [Editor Setup](/docs/getting-started/editor-setup)', + "readme": "In this example, we add an item to the Block Type Select, so that it works for a custom alert block we create.\n\n**Try it out:** Select some text to open the Formatting Toolbar, and click \"Alert\" in the Block Type Select to change the selected block!\n\n**Relevant Docs:**\n\n- [Changing Block Type Select Items](/docs/react/components/formatting-toolbar)\n- [Custom Block Types](/docs/features/custom-schemas/custom-blocks)\n- [Editor Setup](/docs/getting-started/editor-setup)" }, { - projectSlug: "side-menu-buttons", - fullSlug: "ui-components/side-menu-buttons", - pathFromRoot: "examples/03-ui-components/04-side-menu-buttons", - config: { - playground: true, - docs: true, - author: "matthewlipski", - tags: ["Intermediate", "Blocks", "UI Components", "Block Side Menu"], - dependencies: { - "react-icons": "^5.2.1", - } as any, - }, - title: "Adding Block Side Menu Buttons", - group: { - pathFromRoot: "examples/03-ui-components", - slug: "ui-components", - }, - readme: - "In this example, we replace the button to add a block in the Block Side Menu, with a button to remove the hovered block.\n\n**Try it out:** Hover a block to open the Block Side Menu, and click the new button!\n\n**Relevant Docs:**\n\n- [Changing the Block Side Menu](/docs/react/components/side-menu)\n- [Removing Blocks](/docs/reference/editor/manipulating-content)\n- [Editor Setup](/docs/getting-started/editor-setup)", - }, - { - projectSlug: "side-menu-drag-handle-items", - fullSlug: "ui-components/side-menu-drag-handle-items", - pathFromRoot: - "examples/03-ui-components/05-side-menu-drag-handle-items", - config: { - playground: true, - docs: true, - author: "matthewlipski", - tags: ["Intermediate", "Blocks", "UI Components", "Block Side Menu"], - dependencies: { - "react-icons": "^5.2.1", - } as any, - }, - title: "Adding Drag Handle Menu Items", - group: { - pathFromRoot: "examples/03-ui-components", - slug: "ui-components", - }, - readme: - 'In this example, we add an item to the Drag Handle Menu, which resets the hovered block to a paragraph.\n\n**Try it out:** Hover a block to open the Block Side Menu, and click "Reset Type" in the Drag Handle Menu to reset the selected block!\n\n**Relevant Docs:**\n\n- [Changing Drag Handle Menu Items](/docs/react/components/side-menu)\n- [Updating Blocks](/docs/reference/editor/manipulating-content)\n- [Editor Setup](/docs/getting-started/editor-setup)', - }, - { - projectSlug: "suggestion-menus-slash-menu-items", - fullSlug: "ui-components/suggestion-menus-slash-menu-items", - pathFromRoot: - "examples/03-ui-components/06-suggestion-menus-slash-menu-items", - config: { - playground: true, - docs: true, - author: "yousefed", - tags: [ + "projectSlug": "side-menu-buttons", + "fullSlug": "ui-components/side-menu-buttons", + "pathFromRoot": "examples/03-ui-components/04-side-menu-buttons", + "config": { + "playground": true, + "docs": true, + "author": "matthewlipski", + "tags": [ + "Intermediate", + "Blocks", + "UI Components", + "Block Side Menu" + ], + "dependencies": { + "react-icons": "^5.2.1" + } as any + }, + "title": "Adding Block Side Menu Buttons", + "group": { + "pathFromRoot": "examples/03-ui-components", + "slug": "ui-components" + }, + "readme": "In this example, we replace the button to add a block in the Block Side Menu, with a button to remove the hovered block.\n\n**Try it out:** Hover a block to open the Block Side Menu, and click the new button!\n\n**Relevant Docs:**\n\n- [Changing the Block Side Menu](/docs/react/components/side-menu)\n- [Removing Blocks](/docs/reference/editor/manipulating-content)\n- [Editor Setup](/docs/getting-started/editor-setup)" + }, + { + "projectSlug": "side-menu-drag-handle-items", + "fullSlug": "ui-components/side-menu-drag-handle-items", + "pathFromRoot": "examples/03-ui-components/05-side-menu-drag-handle-items", + "config": { + "playground": true, + "docs": true, + "author": "matthewlipski", + "tags": [ + "Intermediate", + "Blocks", + "UI Components", + "Block Side Menu" + ], + "dependencies": { + "react-icons": "^5.2.1" + } as any + }, + "title": "Adding Drag Handle Menu Items", + "group": { + "pathFromRoot": "examples/03-ui-components", + "slug": "ui-components" + }, + "readme": "In this example, we add an item to the Drag Handle Menu, which resets the hovered block to a paragraph.\n\n**Try it out:** Hover a block to open the Block Side Menu, and click \"Reset Type\" in the Drag Handle Menu to reset the selected block!\n\n**Relevant Docs:**\n\n- [Changing Drag Handle Menu Items](/docs/react/components/side-menu)\n- [Updating Blocks](/docs/reference/editor/manipulating-content)\n- [Editor Setup](/docs/getting-started/editor-setup)" + }, + { + "projectSlug": "suggestion-menus-slash-menu-items", + "fullSlug": "ui-components/suggestion-menus-slash-menu-items", + "pathFromRoot": "examples/03-ui-components/06-suggestion-menus-slash-menu-items", + "config": { + "playground": true, + "docs": true, + "author": "yousefed", + "tags": [ "Intermediate", "Blocks", "UI Components", "Suggestion Menus", - "Slash Menu", + "Slash Menu" ], - dependencies: { - "react-icons": "^5.2.1", - } as any, - }, - title: "Adding Slash Menu Items", - group: { - pathFromRoot: "examples/03-ui-components", - slug: "ui-components", - }, - readme: - 'In this example, we add an item to the Slash Menu, which adds a new block below with a bold "Hello World" string.\n\n**Try it out:** Press the "/" key to open the Slash Menu and select the new item!\n\n**Relevant Docs:**\n\n- [Changing Slash Menu Items](/docs/react/components/suggestion-menus)\n- [Getting Text Cursor Position](/docs/reference/editor/cursor-selections)\n- [Inserting New Blocks](/docs/reference/editor/manipulating-content)\n- [Editor Setup](/docs/getting-started/editor-setup)', - }, - { - projectSlug: "suggestion-menus-slash-menu-component", - fullSlug: "ui-components/suggestion-menus-slash-menu-component", - pathFromRoot: - "examples/03-ui-components/07-suggestion-menus-slash-menu-component", - config: { - playground: true, - docs: true, - author: "yousefed", - tags: [ + "dependencies": { + "react-icons": "^5.2.1" + } as any + }, + "title": "Adding Slash Menu Items", + "group": { + "pathFromRoot": "examples/03-ui-components", + "slug": "ui-components" + }, + "readme": "In this example, we add an item to the Slash Menu, which adds a new block below with a bold \"Hello World\" string.\n\n**Try it out:** Press the \"/\" key to open the Slash Menu and select the new item!\n\n**Relevant Docs:**\n\n- [Changing Slash Menu Items](/docs/react/components/suggestion-menus)\n- [Getting Text Cursor Position](/docs/reference/editor/cursor-selections)\n- [Inserting New Blocks](/docs/reference/editor/manipulating-content)\n- [Editor Setup](/docs/getting-started/editor-setup)" + }, + { + "projectSlug": "suggestion-menus-slash-menu-component", + "fullSlug": "ui-components/suggestion-menus-slash-menu-component", + "pathFromRoot": "examples/03-ui-components/07-suggestion-menus-slash-menu-component", + "config": { + "playground": true, + "docs": true, + "author": "yousefed", + "tags": [ "Intermediate", "UI Components", "Suggestion Menus", "Slash Menu", - "Appearance & Styling", - ], + "Appearance & Styling" + ] }, - title: "Replacing Slash Menu Component", - group: { - pathFromRoot: "examples/03-ui-components", - slug: "ui-components", + "title": "Replacing Slash Menu Component", + "group": { + "pathFromRoot": "examples/03-ui-components", + "slug": "ui-components" }, - readme: - 'In this example, we replace the default Slash Menu component with a basic custom one.\n\n**Try it out:** Press the "/" key to see the new Slash Menu!\n\n**Relevant Docs:**\n\n- [Replacing the Slash Menu Component](/docs/react/components/suggestion-menus)\n- [Editor Setup](/docs/getting-started/editor-setup)', + "readme": "In this example, we replace the default Slash Menu component with a basic custom one.\n\n**Try it out:** Press the \"/\" key to see the new Slash Menu!\n\n**Relevant Docs:**\n\n- [Replacing the Slash Menu Component](/docs/react/components/suggestion-menus)\n- [Editor Setup](/docs/getting-started/editor-setup)" }, { - projectSlug: "suggestion-menus-emoji-picker-columns", - fullSlug: "ui-components/suggestion-menus-emoji-picker-columns", - pathFromRoot: - "examples/03-ui-components/08-suggestion-menus-emoji-picker-columns", - config: { - playground: true, - docs: true, - author: "yousefed", - tags: [ + "projectSlug": "suggestion-menus-emoji-picker-columns", + "fullSlug": "ui-components/suggestion-menus-emoji-picker-columns", + "pathFromRoot": "examples/03-ui-components/08-suggestion-menus-emoji-picker-columns", + "config": { + "playground": true, + "docs": true, + "author": "yousefed", + "tags": [ "Intermediate", "Blocks", "UI Components", "Suggestion Menus", - "Emoji Picker", - ], + "Emoji Picker" + ] }, - title: "Changing Emoji Picker Columns", - group: { - pathFromRoot: "examples/03-ui-components", - slug: "ui-components", + "title": "Changing Emoji Picker Columns", + "group": { + "pathFromRoot": "examples/03-ui-components", + "slug": "ui-components" }, - readme: - 'In this example, we change the Emoji Picker to display 5 columns instead of 10.\n\n**Try it out:** Press the ":" key to open the Emoji Picker!\n\n**Relevant Docs:**\n\n- [Changing Emoji Picker Columns](/docs/react/components/suggestion-menus)\n- [Editor Setup](/docs/getting-started/editor-setup)', + "readme": "In this example, we change the Emoji Picker to display 5 columns instead of 10.\n\n**Try it out:** Press the \":\" key to open the Emoji Picker!\n\n**Relevant Docs:**\n\n- [Changing Emoji Picker Columns](/docs/react/components/suggestion-menus)\n- [Editor Setup](/docs/getting-started/editor-setup)" }, { - projectSlug: "suggestion-menus-emoji-picker-component", - fullSlug: "ui-components/suggestion-menus-emoji-picker-component", - pathFromRoot: - "examples/03-ui-components/09-suggestion-menus-emoji-picker-component", - config: { - playground: true, - docs: true, - author: "yousefed", - tags: [ + "projectSlug": "suggestion-menus-emoji-picker-component", + "fullSlug": "ui-components/suggestion-menus-emoji-picker-component", + "pathFromRoot": "examples/03-ui-components/09-suggestion-menus-emoji-picker-component", + "config": { + "playground": true, + "docs": true, + "author": "yousefed", + "tags": [ "Intermediate", "UI Components", "Suggestion Menus", "Emoji Picker", - "Appearance & Styling", - ], + "Appearance & Styling" + ] }, - title: "Replacing Emoji Picker Component", - group: { - pathFromRoot: "examples/03-ui-components", - slug: "ui-components", + "title": "Replacing Emoji Picker Component", + "group": { + "pathFromRoot": "examples/03-ui-components", + "slug": "ui-components" }, - readme: - 'In this example, we replace the default Emoji Picker component with a basic custom one.\n\n**Try it out:** Press the ":" key to see the new Emoji Picker!\n\n**Relevant Docs:**\n\n- [Replacing the Emoji Picker Component](/docs/react/components/suggestion-menus)\n- [Editor Setup](/docs/getting-started/editor-setup)', + "readme": "In this example, we replace the default Emoji Picker component with a basic custom one.\n\n**Try it out:** Press the \":\" key to see the new Emoji Picker!\n\n**Relevant Docs:**\n\n- [Replacing the Emoji Picker Component](/docs/react/components/suggestion-menus)\n- [Editor Setup](/docs/getting-started/editor-setup)" }, { - projectSlug: "suggestion-menus-grid-mentions", - fullSlug: "ui-components/suggestion-menus-grid-mentions", - pathFromRoot: - "examples/03-ui-components/10-suggestion-menus-grid-mentions", - config: { - playground: true, - docs: true, - author: "yousefed", - tags: [ + "projectSlug": "suggestion-menus-grid-mentions", + "fullSlug": "ui-components/suggestion-menus-grid-mentions", + "pathFromRoot": "examples/03-ui-components/10-suggestion-menus-grid-mentions", + "config": { + "playground": true, + "docs": true, + "author": "yousefed", + "tags": [ "Intermediate", "Inline Content", "Custom Schemas", - "Suggestion Menus", - ], + "Suggestion Menus" + ] }, - title: "Grid Mentions Menu", - group: { - pathFromRoot: "examples/03-ui-components", - slug: "ui-components", + "title": "Grid Mentions Menu", + "group": { + "pathFromRoot": "examples/03-ui-components", + "slug": "ui-components" }, - readme: - 'In this example, we create a custom `Mention` inline content type which is used to tag people. In addition, we create a new Suggestion Menu for mentions which opens with the "@" character. This Suggestion Menu is displayed as a grid of 2 columns, where each item is the first letter of the person\'s name.\n\n**Try it out:** Press the "@" key to open the mentions menu and insert a mention!\n\n**Relevant Docs:**\n\n- [Custom Inline Content Types](/docs/features/custom-schemas/custom-inline-content)\n- [Creating Suggestion Menus](/docs/react/components/suggestion-menus)\n- [Editor Setup](/docs/getting-started/editor-setup)', + "readme": "In this example, we create a custom `Mention` inline content type which is used to tag people. In addition, we create a new Suggestion Menu for mentions which opens with the \"@\" character. This Suggestion Menu is displayed as a grid of 2 columns, where each item is the first letter of the person's name.\n\n**Try it out:** Press the \"@\" key to open the mentions menu and insert a mention!\n\n**Relevant Docs:**\n\n- [Custom Inline Content Types](/docs/features/custom-schemas/custom-inline-content)\n- [Creating Suggestion Menus](/docs/react/components/suggestion-menus)\n- [Editor Setup](/docs/getting-started/editor-setup)" }, { - projectSlug: "uppy-file-panel", - fullSlug: "ui-components/uppy-file-panel", - pathFromRoot: "examples/03-ui-components/11-uppy-file-panel", - config: { - playground: true, - docs: true, - author: "ezhil56x", - tags: ["Intermediate", "Files"], - dependencies: { + "projectSlug": "uppy-file-panel", + "fullSlug": "ui-components/uppy-file-panel", + "pathFromRoot": "examples/03-ui-components/11-uppy-file-panel", + "config": { + "playground": true, + "docs": true, + "author": "ezhil56x", + "tags": [ + "Intermediate", + "Files" + ], + "dependencies": { "@uppy/core": "^3.13.1", "@uppy/dashboard": "^3.9.1", "@uppy/drag-drop": "^3.1.1", @@ -594,50 +621,48 @@ export const examples = { "@uppy/status-bar": "^3.1.1", "@uppy/webcam": "^3.4.2", "@uppy/xhr-upload": "^3.4.0", - "react-icons": "^5.2.1", + "react-icons": "^5.2.1" } as any, - pro: true, + "pro": true }, - title: "Uppy File Panel", - group: { - pathFromRoot: "examples/03-ui-components", - slug: "ui-components", + "title": "Uppy File Panel", + "group": { + "pathFromRoot": "examples/03-ui-components", + "slug": "ui-components" }, - readme: - 'This example allows users to upload files using [Uppy](https://uppy.io/) by replacing the default File Panel with an Uppy Dashboard.\n\nUppy is highly extensible and has an extensive ecosystem of plugins. For example, you can:\n\n- Record audio, screen or webcam\n- Import files from Box / Dropbox / Facebook / Google Drive / Google Photos / Instagram / OneDrive / Zoom\n- Select files from Unsplash\n- Show an image editor (crop, rotate, etc)\n\nIn this example, we\'ve enabled the Webcam, ScreenCapture and Image Editor plugins.\n\n**Try it out:** Click the "Add Image" button and you can either drop files or click "browse files" to upload them.\n\n**Relevant Docs:**\n\n- [Editor Setup](/docs/getting-started/editor-setup)\n- [Image](/docs/foundations/schemas)', + "readme": "This example allows users to upload files using [Uppy](https://uppy.io/) by replacing the default File Panel with an Uppy Dashboard.\n\nUppy is highly extensible and has an extensive ecosystem of plugins. For example, you can:\n\n- Record audio, screen or webcam\n- Import files from Box / Dropbox / Facebook / Google Drive / Google Photos / Instagram / OneDrive / Zoom\n- Select files from Unsplash\n- Show an image editor (crop, rotate, etc)\n\nIn this example, we've enabled the Webcam, ScreenCapture and Image Editor plugins.\n\n**Try it out:** Click the \"Add Image\" button and you can either drop files or click \"browse files\" to upload them.\n\n**Relevant Docs:**\n\n- [Editor Setup](/docs/getting-started/editor-setup)\n- [Image](/docs/foundations/schemas)" }, { - projectSlug: "static-formatting-toolbar", - fullSlug: "ui-components/static-formatting-toolbar", - pathFromRoot: "examples/03-ui-components/12-static-formatting-toolbar", - config: { - playground: true, - docs: true, - author: "matthewlipski", - tags: [ + "projectSlug": "static-formatting-toolbar", + "fullSlug": "ui-components/static-formatting-toolbar", + "pathFromRoot": "examples/03-ui-components/12-static-formatting-toolbar", + "config": { + "playground": true, + "docs": true, + "author": "matthewlipski", + "tags": [ "Basic", "UI Components", "Formatting Toolbar", - "Appearance & Styling", - ], + "Appearance & Styling" + ] }, - title: "Static Formatting Toolbar", - group: { - pathFromRoot: "examples/03-ui-components", - slug: "ui-components", + "title": "Static Formatting Toolbar", + "group": { + "pathFromRoot": "examples/03-ui-components", + "slug": "ui-components" }, - readme: - "This example shows how to make the formatting toolbar always visible and static\nabove the editor.\n\n**Relevant Docs:**\n\n- [Changing the Formatting Toolbar](/docs/react/components/formatting-toolbar)\n- [Editor Setup](/docs/getting-started/editor-setup)", + "readme": "This example shows how to make the formatting toolbar always visible and static\nabove the editor.\n\n**Relevant Docs:**\n\n- [Changing the Formatting Toolbar](/docs/react/components/formatting-toolbar)\n- [Editor Setup](/docs/getting-started/editor-setup)" }, { - projectSlug: "custom-ui", - fullSlug: "ui-components/custom-ui", - pathFromRoot: "examples/03-ui-components/13-custom-ui", - config: { - playground: true, - docs: true, - author: "matthewlipski", - tags: [ + "projectSlug": "custom-ui", + "fullSlug": "ui-components/custom-ui", + "pathFromRoot": "examples/03-ui-components/13-custom-ui", + "config": { + "playground": true, + "docs": true, + "author": "matthewlipski", + "tags": [ "Advanced", "Inline Content", "UI Components", @@ -645,1112 +670,1185 @@ export const examples = { "Formatting Toolbar", "Suggestion Menus", "Slash Menu", - "Appearance & Styling", + "Appearance & Styling" ], - dependencies: { + "dependencies": { "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.5", "@mui/icons-material": "^5.16.1", - "@mui/material": "^5.16.1", + "@mui/material": "^5.16.1" } as any, - pro: true, - }, - title: "UI With Third-Party Components", - group: { - pathFromRoot: "examples/03-ui-components", - slug: "ui-components", - }, - readme: - "In this example, we implement a basic editor interface using components from Material UI. We replace the Formatting Toolbar, Slash Menu, and Block Side Menu while disabling the other default elements. Additionally, the Formatting Toolbar is made static and always visible above the editor.\n\n**Relevant Docs:**\n\n- [Formatting Toolbar](/docs/react/components/formatting-toolbar)\n- [Manipulating Inline Content](/docs/reference/editor/manipulating-content)\n- [Slash Menu](/docs/react/components/suggestion-menus)\n- [Side Menu](/docs/react/components/side-menu)\n- [Editor Setup](/docs/getting-started/editor-setup)", - }, - { - projectSlug: "experimental-mobile-formatting-toolbar", - fullSlug: "ui-components/experimental-mobile-formatting-toolbar", - pathFromRoot: - "examples/03-ui-components/14-experimental-mobile-formatting-toolbar", - config: { - playground: true, - docs: true, - author: "areknawo", - tags: [ + "pro": true + }, + "title": "UI With Third-Party Components", + "group": { + "pathFromRoot": "examples/03-ui-components", + "slug": "ui-components" + }, + "readme": "In this example, we implement a basic editor interface using components from Material UI. We replace the Formatting Toolbar, Slash Menu, and Block Side Menu while disabling the other default elements. Additionally, the Formatting Toolbar is made static and always visible above the editor.\n\n**Relevant Docs:**\n\n- [Formatting Toolbar](/docs/react/components/formatting-toolbar)\n- [Manipulating Inline Content](/docs/reference/editor/manipulating-content)\n- [Slash Menu](/docs/react/components/suggestion-menus)\n- [Side Menu](/docs/react/components/side-menu)\n- [Editor Setup](/docs/getting-started/editor-setup)" + }, + { + "projectSlug": "experimental-mobile-formatting-toolbar", + "fullSlug": "ui-components/experimental-mobile-formatting-toolbar", + "pathFromRoot": "examples/03-ui-components/14-experimental-mobile-formatting-toolbar", + "config": { + "playground": true, + "docs": true, + "author": "areknawo", + "tags": [ "Intermediate", "UI Components", "Formatting Toolbar", - "Appearance & Styling", - ], + "Appearance & Styling" + ] }, - title: "Experimental Mobile Formatting Toolbar", - group: { - pathFromRoot: "examples/03-ui-components", - slug: "ui-components", + "title": "Experimental Mobile Formatting Toolbar", + "group": { + "pathFromRoot": "examples/03-ui-components", + "slug": "ui-components" }, - readme: - "This example shows how to use the experimental mobile formatting toolbar, which uses [Visual Viewport API](https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API) to position the toolbar right above the virtual keyboard on mobile devices.\n\nController is currently marked **experimental** due to the flickering issue with positioning (caused by delays of the Visual Viewport API)\n\n**Relevant Docs:**\n\n- [Changing the Formatting Toolbar](/docs/react/components/formatting-toolbar)\n- [Editor Setup](/docs/getting-started/editor-setup)", + "readme": "This example shows how to use the experimental mobile formatting toolbar, which uses [Visual Viewport API](https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API) to position the toolbar right above the virtual keyboard on mobile devices.\n\nController is currently marked **experimental** due to the flickering issue with positioning (caused by delays of the Visual Viewport API)\n\n**Relevant Docs:**\n\n- [Changing the Formatting Toolbar](/docs/react/components/formatting-toolbar)\n- [Editor Setup](/docs/getting-started/editor-setup)" }, { - projectSlug: "advanced-tables", - fullSlug: "ui-components/advanced-tables", - pathFromRoot: "examples/03-ui-components/15-advanced-tables", - config: { - playground: true, - docs: true, - author: "nperez0111", - tags: [ + "projectSlug": "advanced-tables", + "fullSlug": "ui-components/advanced-tables", + "pathFromRoot": "examples/03-ui-components/15-advanced-tables", + "config": { + "playground": true, + "docs": true, + "author": "nperez0111", + "tags": [ "Intermediate", "UI Components", "Tables", - "Appearance & Styling", - ], + "Appearance & Styling" + ] }, - title: "Advanced Tables", - group: { - pathFromRoot: "examples/03-ui-components", - slug: "ui-components", + "title": "Advanced Tables", + "group": { + "pathFromRoot": "examples/03-ui-components", + "slug": "ui-components" }, - readme: - "This example enables the following features in tables:\n\n- Split cells\n- Cell background color\n- Cell text color\n- Table row and column headers\n\n**Relevant Docs:**\n\n- [Tables](/docs/features/blocks/tables)\n- [Editor Setup](/docs/getting-started/editor-setup)", + "readme": "This example enables the following features in tables:\n\n- Split cells\n- Cell background color\n- Cell text color\n- Table row and column headers\n\n**Relevant Docs:**\n\n- [Tables](/docs/features/blocks/tables)\n- [Editor Setup](/docs/getting-started/editor-setup)" }, { - projectSlug: "link-toolbar-buttons", - fullSlug: "ui-components/link-toolbar-buttons", - pathFromRoot: "examples/03-ui-components/16-link-toolbar-buttons", - config: { - playground: true, - docs: true, - author: "matthewlipski", - tags: [ + "projectSlug": "link-toolbar-buttons", + "fullSlug": "ui-components/link-toolbar-buttons", + "pathFromRoot": "examples/03-ui-components/16-link-toolbar-buttons", + "config": { + "playground": true, + "docs": true, + "author": "matthewlipski", + "tags": [ "Intermediate", "Inline Content", "UI Components", - "Link Toolbar", - ], + "Link Toolbar" + ] }, - title: "Adding Link Toolbar Buttons", - group: { - pathFromRoot: "examples/03-ui-components", - slug: "ui-components", + "title": "Adding Link Toolbar Buttons", + "group": { + "pathFromRoot": "examples/03-ui-components", + "slug": "ui-components" }, - readme: - 'In this example, we add a button to the Link Toolbar which opens a browser alert.\n\n**Try it out:** Hover the link open the Link Toolbar, and click the new "Open Alert" button!\n\n**Relevant Docs:**\n\n- [Editor Setup](/docs/getting-started/editor-setup)', + "readme": "In this example, we add a button to the Link Toolbar which opens a browser alert.\n\n**Try it out:** Hover the link open the Link Toolbar, and click the new \"Open Alert\" button!\n\n**Relevant Docs:**\n\n- [Editor Setup](/docs/getting-started/editor-setup)" }, { - projectSlug: "advanced-tables-2", - fullSlug: "ui-components/advanced-tables-2", - pathFromRoot: "examples/03-ui-components/17-advanced-tables-2", - config: { - playground: true, - docs: true, - author: "must", - tags: [ + "projectSlug": "advanced-tables-2", + "fullSlug": "ui-components/advanced-tables-2", + "pathFromRoot": "examples/03-ui-components/17-advanced-tables-2", + "config": { + "playground": true, + "docs": true, + "author": "must", + "tags": [ "Intermediate", "UI Components", "Tables", + "Appearance & Styling" + ] + }, + "title": "Advanced Tables with Calculated Columns", + "group": { + "pathFromRoot": "examples/03-ui-components", + "slug": "ui-components" + }, + "readme": "This example demonstrates advanced table features including automatic calculations. It shows how to create a table with calculated columns that automatically update when values change.\n\n## Features\n\n- **Automatic Calculations**: Quantity × Price = Total for each row\n- **Grand Total**: Automatically calculated sum of all totals\n- **Real-time Updates**: Calculations update immediately when you change quantity or price values\n- **Split cells**: Merge and split table cells\n- **Cell background color**: Color individual cells\n- **Cell text color**: Change text color in cells\n- **Table row and column headers**: Use headers for better organization\n\n## How It Works\n\nThe example uses the `onChange` event listener to detect when table content changes. When a table is updated, it automatically:\n\n1. Extracts quantity and price values from each data row\n2. Calculates the total (quantity × price) for each row\n3. Updates the total column with the calculated values\n4. Calculates and updates the grand total\n\n## Code Highlights\n\n```tsx\n {\n const changes = getChanges();\n\n changes.forEach((change) => {\n if (change.type === \"update\" && change.block.type === \"table\") {\n const updatedRows = calculateTableTotals(change.block);\n if (updatedRows) {\n editor.updateBlock(change.block, {\n type: \"table\",\n content: {\n ...change.block.content,\n rows: updatedRows as any,\n } as any,\n });\n }\n }\n });\n }}\n>\n```\n\n**Relevant Docs:**\n\n- [Tables](/docs/features/blocks/tables)\n- [Editor Setup](/docs/getting-started/editor-setup)\n- [Events](/docs/reference/editor/events)" + } + ] + }, + "theming": { + "pathFromRoot": "examples/04-theming", + "slug": "theming", + "projects": [ + { + "projectSlug": "theming-dom-attributes", + "fullSlug": "theming/theming-dom-attributes", + "pathFromRoot": "examples/04-theming/01-theming-dom-attributes", + "config": { + "playground": true, + "docs": true, + "author": "matthewlipski", + "tags": [ + "Basic", + "Blocks", + "Appearance & Styling" + ] + }, + "title": "Adding CSS Class to Blocks", + "group": { + "pathFromRoot": "examples/04-theming", + "slug": "theming" + }, + "readme": "In this example, we add a `hello-world-block` class to each block in the editor. We also create a CSS rule to add a border to all elements with that class.\n\n**Relevant Docs:**\n\n- [Adding DOM Attributes](/docs/react/styling-theming/adding-dom-attributes)" + }, + { + "projectSlug": "changing-font", + "fullSlug": "theming/changing-font", + "pathFromRoot": "examples/04-theming/02-changing-font", + "config": { + "playground": true, + "docs": true, + "author": "matthewlipski", + "tags": [ + "Basic", + "Appearance & Styling" + ] + }, + "title": "Changing Editor Font", + "group": { + "pathFromRoot": "examples/04-theming", + "slug": "theming" + }, + "readme": "In this example, we override some of the default editor CSS to change font within the editor.\n\n**Relevant Docs:**\n\n- [Overriding CSS](/docs/react/styling-theming/overriding-css)" + }, + { + "projectSlug": "theming-css", + "fullSlug": "theming/theming-css", + "pathFromRoot": "examples/04-theming/03-theming-css", + "config": { + "playground": true, + "docs": true, + "author": "matthewlipski", + "tags": [ + "Basic", "Appearance & Styling", - ], + "UI Components" + ] }, - title: "Advanced Tables with Calculated Columns", - group: { - pathFromRoot: "examples/03-ui-components", - slug: "ui-components", + "title": "Overriding CSS Styles", + "group": { + "pathFromRoot": "examples/04-theming", + "slug": "theming" }, - readme: - 'This example demonstrates advanced table features including automatic calculations. It shows how to create a table with calculated columns that automatically update when values change.\n\n## Features\n\n- **Automatic Calculations**: Quantity × Price = Total for each row\n- **Grand Total**: Automatically calculated sum of all totals\n- **Real-time Updates**: Calculations update immediately when you change quantity or price values\n- **Split cells**: Merge and split table cells\n- **Cell background color**: Color individual cells\n- **Cell text color**: Change text color in cells\n- **Table row and column headers**: Use headers for better organization\n\n## How It Works\n\nThe example uses the `onChange` event listener to detect when table content changes. When a table is updated, it automatically:\n\n1. Extracts quantity and price values from each data row\n2. Calculates the total (quantity × price) for each row\n3. Updates the total column with the calculated values\n4. Calculates and updates the grand total\n\n## Code Highlights\n\n```tsx\n {\n const changes = getChanges();\n\n changes.forEach((change) => {\n if (change.type === "update" && change.block.type === "table") {\n const updatedRows = calculateTableTotals(change.block);\n if (updatedRows) {\n editor.updateBlock(change.block, {\n type: "table",\n content: {\n ...change.block.content,\n rows: updatedRows as any,\n } as any,\n });\n }\n }\n });\n }}\n>\n```\n\n**Relevant Docs:**\n\n- [Tables](/docs/features/blocks/tables)\n- [Editor Setup](/docs/getting-started/editor-setup)\n- [Events](/docs/reference/editor/events)', + "readme": "In this example, we override some of the default editor CSS to make the editor text and hovered Slash Menu items blue.\n\n**Relevant Docs:**\n\n- [Overriding CSS](/docs/react/styling-theming/overriding-css)" }, - ], - }, - theming: { - pathFromRoot: "examples/04-theming", - slug: "theming", - projects: [ - { - projectSlug: "theming-dom-attributes", - fullSlug: "theming/theming-dom-attributes", - pathFromRoot: "examples/04-theming/01-theming-dom-attributes", - config: { - playground: true, - docs: true, - author: "matthewlipski", - tags: ["Basic", "Blocks", "Appearance & Styling"], - }, - title: "Adding CSS Class to Blocks", - group: { - pathFromRoot: "examples/04-theming", - slug: "theming", - }, - readme: - "In this example, we add a `hello-world-block` class to each block in the editor. We also create a CSS rule to add a border to all elements with that class.\n\n**Relevant Docs:**\n\n- [Adding DOM Attributes](/docs/react/styling-theming/adding-dom-attributes)", - }, - { - projectSlug: "changing-font", - fullSlug: "theming/changing-font", - pathFromRoot: "examples/04-theming/02-changing-font", - config: { - playground: true, - docs: true, - author: "matthewlipski", - tags: ["Basic", "Appearance & Styling"], - }, - title: "Changing Editor Font", - group: { - pathFromRoot: "examples/04-theming", - slug: "theming", - }, - readme: - "In this example, we override some of the default editor CSS to change font within the editor.\n\n**Relevant Docs:**\n\n- [Overriding CSS](/docs/react/styling-theming/overriding-css)", - }, - { - projectSlug: "theming-css", - fullSlug: "theming/theming-css", - pathFromRoot: "examples/04-theming/03-theming-css", - config: { - playground: true, - docs: true, - author: "matthewlipski", - tags: ["Basic", "Appearance & Styling", "UI Components"], - }, - title: "Overriding CSS Styles", - group: { - pathFromRoot: "examples/04-theming", - slug: "theming", - }, - readme: - "In this example, we override some of the default editor CSS to make the editor text and hovered Slash Menu items blue.\n\n**Relevant Docs:**\n\n- [Overriding CSS](/docs/react/styling-theming/overriding-css)", - }, - { - projectSlug: "theming-css-variables", - fullSlug: "theming/theming-css-variables", - pathFromRoot: "examples/04-theming/04-theming-css-variables", - config: { - playground: true, - docs: true, - author: "matthewlipski", - tags: ["Basic", "Appearance & Styling", "UI Components"], - }, - title: "Overriding Theme CSS Variables", - group: { - pathFromRoot: "examples/04-theming", - slug: "theming", - }, - readme: - "In this example, we override the editor's default theme CSS variables to create a red theme for both light and dark modes.\n\n**Relevant Docs:**\n\n- [Theme CSS Variables](/docs/react/styling-theming/themes#css-variables)", - }, - { - projectSlug: "theming-css-variables-code", - fullSlug: "theming/theming-css-variables-code", - pathFromRoot: "examples/04-theming/05-theming-css-variables-code", - config: { - playground: true, - docs: true, - author: "matthewlipski", - tags: ["Basic", "Appearance & Styling", "UI Components"], - }, - title: "Changing Themes Through Code", - group: { - pathFromRoot: "examples/04-theming", - slug: "theming", - }, - readme: - "In this example, we use the `BlockNoteView` component's `theme` props to create a red theme for both light and dark modes.\n\n**Relevant Docs:**\n\n- [Changing CSS Variables Through Code](/docs/react/styling-theming/themes#programmatic-configuration)", - }, - { - projectSlug: "code-block", - fullSlug: "theming/code-block", - pathFromRoot: "examples/04-theming/06-code-block", - config: { - playground: true, - docs: true, - author: "nperez0111", - tags: ["Basic"], - dependencies: { - "@blocknote/code-block": "latest", - } as any, + { + "projectSlug": "theming-css-variables", + "fullSlug": "theming/theming-css-variables", + "pathFromRoot": "examples/04-theming/04-theming-css-variables", + "config": { + "playground": true, + "docs": true, + "author": "matthewlipski", + "tags": [ + "Basic", + "Appearance & Styling", + "UI Components" + ] }, - title: "Code Block Syntax Highlighting", - group: { - pathFromRoot: "examples/04-theming", - slug: "theming", + "title": "Overriding Theme CSS Variables", + "group": { + "pathFromRoot": "examples/04-theming", + "slug": "theming" }, - readme: - "To enable code block syntax highlighting, you can extend the editor's default schema with a new `codeBlock`, which you can pass options into when creating. By passing the default options from `@blocknote/code-block`, you can enable syntax highlighting. This is excluded by default to reduce bundle size.\n\n**Relevant Docs:**\n\n- [Code Block Syntax Highlighting](/docs/features/blocks/code-blocks)\n- [Editor Setup](/docs/getting-started/editor-setup)\n- [Custom Schema](/docs/features/custom-schemas)", + "readme": "In this example, we override the editor's default theme CSS variables to create a red theme for both light and dark modes.\n\n**Relevant Docs:**\n\n- [Theme CSS Variables](/docs/react/styling-theming/themes#css-variables)" }, { - projectSlug: "custom-code-block", - fullSlug: "theming/custom-code-block", - pathFromRoot: "examples/04-theming/07-custom-code-block", - config: { - playground: true, - docs: true, - author: "nperez0111", - tags: ["Basic"], - dependencies: { + "projectSlug": "theming-css-variables-code", + "fullSlug": "theming/theming-css-variables-code", + "pathFromRoot": "examples/04-theming/05-theming-css-variables-code", + "config": { + "playground": true, + "docs": true, + "author": "matthewlipski", + "tags": [ + "Basic", + "Appearance & Styling", + "UI Components" + ] + }, + "title": "Changing Themes Through Code", + "group": { + "pathFromRoot": "examples/04-theming", + "slug": "theming" + }, + "readme": "In this example, we use the `BlockNoteView` component's `theme` props to create a red theme for both light and dark modes.\n\n**Relevant Docs:**\n\n- [Changing CSS Variables Through Code](/docs/react/styling-theming/themes#programmatic-configuration)" + }, + { + "projectSlug": "code-block", + "fullSlug": "theming/code-block", + "pathFromRoot": "examples/04-theming/06-code-block", + "config": { + "playground": true, + "docs": true, + "author": "nperez0111", + "tags": [ + "Basic" + ], + "dependencies": { + "@blocknote/code-block": "latest" + } as any + }, + "title": "Code Block Syntax Highlighting", + "group": { + "pathFromRoot": "examples/04-theming", + "slug": "theming" + }, + "readme": "To enable code block syntax highlighting, you can extend the editor's default schema with a new `codeBlock`, which you can pass options into when creating. By passing the default options from `@blocknote/code-block`, you can enable syntax highlighting. This is excluded by default to reduce bundle size.\n\n**Relevant Docs:**\n\n- [Code Block Syntax Highlighting](/docs/features/blocks/code-blocks)\n- [Editor Setup](/docs/getting-started/editor-setup)\n- [Custom Schema](/docs/features/custom-schemas)" + }, + { + "projectSlug": "custom-code-block", + "fullSlug": "theming/custom-code-block", + "pathFromRoot": "examples/04-theming/07-custom-code-block", + "config": { + "playground": true, + "docs": true, + "author": "nperez0111", + "tags": [ + "Basic" + ], + "dependencies": { "@blocknote/code-block": "latest", "@shikijs/types": "^3.2.1", "@shikijs/core": "^3.2.1", "@shikijs/engine-javascript": "^3.2.1", "@shikijs/langs-precompiled": "^3.2.1", - "@shikijs/themes": "^3.2.1", - } as any, + "@shikijs/themes": "^3.2.1" + } as any }, - title: "Custom Code Block Theme & Language", - group: { - pathFromRoot: "examples/04-theming", - slug: "theming", + "title": "Custom Code Block Theme & Language", + "group": { + "pathFromRoot": "examples/04-theming", + "slug": "theming" }, - readme: - "To configure a code block highlighting theme and language, you can extend the editor's default schema with a new `codeBlock`, which you can pass options into when creating. You can then use a shiki highlighter to add custom syntax highlighting.\n\nFirst use the [shiki-codegen](https://shiki.style/packages/codegen) CLI to create a `shiki.bundle.ts` file. You can then pass this file into the `codeBlock` options when creating it.\n\n**Relevant Docs:**\n\n- [Code Blocks](/docs/features/blocks/code-blocks)\n- [shiki-codegen](https://shiki.style/packages/codegen)\n- [Custom Schema](/docs/features/custom-schemas)", - }, - ], + "readme": "To configure a code block highlighting theme and language, you can extend the editor's default schema with a new `codeBlock`, which you can pass options into when creating. You can then use a shiki highlighter to add custom syntax highlighting.\n\nFirst use the [shiki-codegen](https://shiki.style/packages/codegen) CLI to create a `shiki.bundle.ts` file. You can then pass this file into the `codeBlock` options when creating it.\n\n**Relevant Docs:**\n\n- [Code Blocks](/docs/features/blocks/code-blocks)\n- [shiki-codegen](https://shiki.style/packages/codegen)\n- [Custom Schema](/docs/features/custom-schemas)" + } + ] }, - interoperability: { - pathFromRoot: "examples/05-interoperability", - slug: "interoperability", - projects: [ - { - projectSlug: "converting-blocks-to-html", - fullSlug: "interoperability/converting-blocks-to-html", - pathFromRoot: - "examples/05-interoperability/01-converting-blocks-to-html", - config: { - playground: true, - docs: true, - author: "matthewlipski", - tags: ["Basic", "Blocks", "Import/Export"], - }, - title: "Converting Blocks to HTML", - group: { - pathFromRoot: "examples/05-interoperability", - slug: "interoperability", - }, - readme: - "This example exports the current document (all blocks) as HTML and displays it below the editor.\n\n**Try it out:** Edit the document to see the HTML representation!\n\n**Relevant Docs:**\n\n- [Converting Blocks to HTML](/docs/features/export/html)", - }, - { - projectSlug: "converting-blocks-from-html", - fullSlug: "interoperability/converting-blocks-from-html", - pathFromRoot: - "examples/05-interoperability/02-converting-blocks-from-html", - config: { - playground: true, - docs: true, - author: "matthewlipski", - tags: ["Basic", "Blocks", "Import/Export"], - }, - title: "Parsing HTML to Blocks", - group: { - pathFromRoot: "examples/05-interoperability", - slug: "interoperability", - }, - readme: - "This example shows how you can convert HTML content to a BlockNote document.\n\nNote that the editor itself is locked for editing by setting `editable` to `false`.\n\n**Try it out:** Edit the HTML in the textarea to see the BlockNote document update!\n\n**Relevant Docs:**\n\n- [Parsing HTML to Blocks](/docs/features/import/html)", - }, - { - projectSlug: "converting-blocks-to-md", - fullSlug: "interoperability/converting-blocks-to-md", - pathFromRoot: "examples/05-interoperability/03-converting-blocks-to-md", - config: { - playground: true, - docs: true, - author: "yousefed", - tags: ["Basic", "Blocks", "Import/Export"], - }, - title: "Converting Blocks to Markdown", - group: { - pathFromRoot: "examples/05-interoperability", - slug: "interoperability", - }, - readme: - "This example exports the current document (all blocks) as Markdown and displays it below the editor.\n\n**Try it out:** Edit the document to see the Markdown representation!\n\n**Relevant Docs:**\n\n- [Converting Blocks to Markdown](/docs/features/export/markdown)", - }, - { - projectSlug: "converting-blocks-from-md", - fullSlug: "interoperability/converting-blocks-from-md", - pathFromRoot: - "examples/05-interoperability/04-converting-blocks-from-md", - config: { - playground: true, - docs: true, - author: "yousefed", - tags: ["Basic", "Blocks", "Import/Export"], - }, - title: "Parsing Markdown to Blocks", - group: { - pathFromRoot: "examples/05-interoperability", - slug: "interoperability", - }, - readme: - "This example shows how you can convert HTML content to a BlockNote document.\n\nNote that the editor itself is locked for editing by setting `editable` to `false`.\n\n**Try it out:** Edit the Markdown in the textarea to see the BlockNote document update!\n\n**Relevant Docs:**\n\n- [Parsing Markdown to Blocks](/docs/features/import/markdown)", - }, - { - projectSlug: "converting-blocks-to-pdf", - fullSlug: "interoperability/converting-blocks-to-pdf", - pathFromRoot: - "examples/05-interoperability/05-converting-blocks-to-pdf", - config: { - playground: true, - docs: true, - author: "yousefed", - tags: ["Interoperability"], - dependencies: { + "interoperability": { + "pathFromRoot": "examples/05-interoperability", + "slug": "interoperability", + "projects": [ + { + "projectSlug": "converting-blocks-to-html", + "fullSlug": "interoperability/converting-blocks-to-html", + "pathFromRoot": "examples/05-interoperability/01-converting-blocks-to-html", + "config": { + "playground": true, + "docs": true, + "author": "matthewlipski", + "tags": [ + "Basic", + "Blocks", + "Import/Export" + ] + }, + "title": "Converting Blocks to HTML", + "group": { + "pathFromRoot": "examples/05-interoperability", + "slug": "interoperability" + }, + "readme": "This example exports the current document (all blocks) as HTML and displays it below the editor.\n\n**Try it out:** Edit the document to see the HTML representation!\n\n**Relevant Docs:**\n\n- [Converting Blocks to HTML](/docs/features/export/html)" + }, + { + "projectSlug": "converting-blocks-from-html", + "fullSlug": "interoperability/converting-blocks-from-html", + "pathFromRoot": "examples/05-interoperability/02-converting-blocks-from-html", + "config": { + "playground": true, + "docs": true, + "author": "matthewlipski", + "tags": [ + "Basic", + "Blocks", + "Import/Export" + ] + }, + "title": "Parsing HTML to Blocks", + "group": { + "pathFromRoot": "examples/05-interoperability", + "slug": "interoperability" + }, + "readme": "This example shows how you can convert HTML content to a BlockNote document.\n\nNote that the editor itself is locked for editing by setting `editable` to `false`.\n\n**Try it out:** Edit the HTML in the textarea to see the BlockNote document update!\n\n**Relevant Docs:**\n\n- [Parsing HTML to Blocks](/docs/features/import/html)" + }, + { + "projectSlug": "converting-blocks-to-md", + "fullSlug": "interoperability/converting-blocks-to-md", + "pathFromRoot": "examples/05-interoperability/03-converting-blocks-to-md", + "config": { + "playground": true, + "docs": true, + "author": "yousefed", + "tags": [ + "Basic", + "Blocks", + "Import/Export" + ] + }, + "title": "Converting Blocks to Markdown", + "group": { + "pathFromRoot": "examples/05-interoperability", + "slug": "interoperability" + }, + "readme": "This example exports the current document (all blocks) as Markdown and displays it below the editor.\n\n**Try it out:** Edit the document to see the Markdown representation!\n\n**Relevant Docs:**\n\n- [Converting Blocks to Markdown](/docs/features/export/markdown)" + }, + { + "projectSlug": "converting-blocks-from-md", + "fullSlug": "interoperability/converting-blocks-from-md", + "pathFromRoot": "examples/05-interoperability/04-converting-blocks-from-md", + "config": { + "playground": true, + "docs": true, + "author": "yousefed", + "tags": [ + "Basic", + "Blocks", + "Import/Export" + ] + }, + "title": "Parsing Markdown to Blocks", + "group": { + "pathFromRoot": "examples/05-interoperability", + "slug": "interoperability" + }, + "readme": "This example shows how you can convert HTML content to a BlockNote document.\n\nNote that the editor itself is locked for editing by setting `editable` to `false`.\n\n**Try it out:** Edit the Markdown in the textarea to see the BlockNote document update!\n\n**Relevant Docs:**\n\n- [Parsing Markdown to Blocks](/docs/features/import/markdown)" + }, + { + "projectSlug": "converting-blocks-to-pdf", + "fullSlug": "interoperability/converting-blocks-to-pdf", + "pathFromRoot": "examples/05-interoperability/05-converting-blocks-to-pdf", + "config": { + "playground": true, + "docs": true, + "author": "yousefed", + "tags": [ + "Interoperability" + ], + "dependencies": { "@blocknote/xl-pdf-exporter": "latest", "@blocknote/xl-multi-column": "latest", - "@react-pdf/renderer": "^4.3.0", + "@react-pdf/renderer": "^4.3.0" } as any, - pro: true, - }, - title: "Exporting documents to PDF", - group: { - pathFromRoot: "examples/05-interoperability", - slug: "interoperability", - }, - readme: - 'This example exports the current document (all blocks) as an PDF file and downloads it to your computer.\n\n**Try it out:** Edit the document and click "Download .pdf" at the top to download the PDF file.', - }, - { - projectSlug: "converting-blocks-to-docx", - fullSlug: "interoperability/converting-blocks-to-docx", - pathFromRoot: - "examples/05-interoperability/06-converting-blocks-to-docx", - config: { - playground: true, - docs: true, - author: "yousefed", - tags: [""], - dependencies: { + "pro": true + }, + "title": "Exporting documents to PDF", + "group": { + "pathFromRoot": "examples/05-interoperability", + "slug": "interoperability" + }, + "readme": "This example exports the current document (all blocks) as an PDF file and downloads it to your computer.\n\n**Try it out:** Edit the document and click \"Download .pdf\" at the top to download the PDF file." + }, + { + "projectSlug": "converting-blocks-to-docx", + "fullSlug": "interoperability/converting-blocks-to-docx", + "pathFromRoot": "examples/05-interoperability/06-converting-blocks-to-docx", + "config": { + "playground": true, + "docs": true, + "author": "yousefed", + "tags": [ + "" + ], + "dependencies": { "@blocknote/xl-docx-exporter": "latest", "@blocknote/xl-multi-column": "latest", - docx: "^9.0.2", + "docx": "^9.0.2" } as any, - pro: true, - }, - title: "Exporting documents to DOCX (Office Open XML)", - group: { - pathFromRoot: "examples/05-interoperability", - slug: "interoperability", - }, - readme: - 'This example exports the current document (all blocks) as an Microsoft Word Document (DOCX) file and downloads it to your computer.\n\n**Try it out:** Edit the document and click "Download .docx" at the top to download the DOCX file.', - }, - { - projectSlug: "converting-blocks-to-odt", - fullSlug: "interoperability/converting-blocks-to-odt", - pathFromRoot: - "examples/05-interoperability/07-converting-blocks-to-odt", - config: { - playground: true, - docs: true, - author: "areknawo", - tags: [""], - dependencies: { + "pro": true + }, + "title": "Exporting documents to DOCX (Office Open XML)", + "group": { + "pathFromRoot": "examples/05-interoperability", + "slug": "interoperability" + }, + "readme": "This example exports the current document (all blocks) as an Microsoft Word Document (DOCX) file and downloads it to your computer.\n\n**Try it out:** Edit the document and click \"Download .docx\" at the top to download the DOCX file." + }, + { + "projectSlug": "converting-blocks-to-odt", + "fullSlug": "interoperability/converting-blocks-to-odt", + "pathFromRoot": "examples/05-interoperability/07-converting-blocks-to-odt", + "config": { + "playground": true, + "docs": true, + "author": "areknawo", + "tags": [ + "" + ], + "dependencies": { "@blocknote/xl-odt-exporter": "latest", - "@blocknote/xl-multi-column": "latest", + "@blocknote/xl-multi-column": "latest" } as any, - pro: true, - }, - title: "Exporting documents to ODT (Open Document Text)", - group: { - pathFromRoot: "examples/05-interoperability", - slug: "interoperability", - }, - readme: - 'This example exports the current document (all blocks) as an Open Document Text (ODT) file and downloads it to your computer.\n\n**Try it out:** Edit the document and click "Download .odt" at the top to download the ODT file.', - }, - { - projectSlug: "converting-blocks-to-react-email", - fullSlug: "interoperability/converting-blocks-to-react-email", - pathFromRoot: - "examples/05-interoperability/08-converting-blocks-to-react-email", - config: { - playground: true, - docs: true, - author: "jmarbutt", - tags: [""], - dependencies: { + "pro": true + }, + "title": "Exporting documents to ODT (Open Document Text)", + "group": { + "pathFromRoot": "examples/05-interoperability", + "slug": "interoperability" + }, + "readme": "This example exports the current document (all blocks) as an Open Document Text (ODT) file and downloads it to your computer.\n\n**Try it out:** Edit the document and click \"Download .odt\" at the top to download the ODT file." + }, + { + "projectSlug": "converting-blocks-to-react-email", + "fullSlug": "interoperability/converting-blocks-to-react-email", + "pathFromRoot": "examples/05-interoperability/08-converting-blocks-to-react-email", + "config": { + "playground": true, + "docs": true, + "author": "jmarbutt", + "tags": [ + "" + ], + "dependencies": { "@blocknote/xl-email-exporter": "latest", - "@react-email/render": "^1.1.2", + "@react-email/render": "^1.1.2" } as any, - pro: true, + "pro": true }, - title: "Exporting documents to Email (HTML)", - group: { - pathFromRoot: "examples/05-interoperability", - slug: "interoperability", + "title": "Exporting documents to Email (HTML)", + "group": { + "pathFromRoot": "examples/05-interoperability", + "slug": "interoperability" }, - readme: - 'This example exports the current document (all blocks) as an HTML file for use in emails, and downloads it to your computer.\n\n**Try it out:** Edit the document and click "Download email .html" at the top to download the HTML file.', - }, - ], + "readme": "This example exports the current document (all blocks) as an HTML file for use in emails, and downloads it to your computer.\n\n**Try it out:** Edit the document and click \"Download email .html\" at the top to download the HTML file." + } + ] }, "custom-schema": { - pathFromRoot: "examples/06-custom-schema", - slug: "custom-schema", - projects: [ - { - projectSlug: "alert-block", - fullSlug: "custom-schema/alert-block", - pathFromRoot: "examples/06-custom-schema/01-alert-block", - config: { - playground: true, - docs: true, - author: "matthewlipski", - tags: [ + "pathFromRoot": "examples/06-custom-schema", + "slug": "custom-schema", + "projects": [ + { + "projectSlug": "alert-block", + "fullSlug": "custom-schema/alert-block", + "pathFromRoot": "examples/06-custom-schema/01-alert-block", + "config": { + "playground": true, + "docs": true, + "author": "matthewlipski", + "tags": [ "Intermediate", "Blocks", "Custom Schemas", "Suggestion Menus", - "Slash Menu", + "Slash Menu" ], - dependencies: { + "dependencies": { "@mantine/core": "^8.3.4", - "react-icons": "^5.2.1", - } as any, + "react-icons": "^5.2.1" + } as any }, - title: "Alert Block", - group: { - pathFromRoot: "examples/06-custom-schema", - slug: "custom-schema", + "title": "Alert Block", + "group": { + "pathFromRoot": "examples/06-custom-schema", + "slug": "custom-schema" }, - readme: - 'In this example, we create a custom `Alert` block which is used to emphasize text.\n\n**Try it out:** Click the "!" icon to change the alert type!\n\n**Relevant Docs:**\n\n- [Custom Blocks](/docs/features/custom-schemas/custom-blocks)\n- [Editor Setup](/docs/getting-started/editor-setup)', + "readme": "In this example, we create a custom `Alert` block which is used to emphasize text.\n\n**Try it out:** Click the \"!\" icon to change the alert type!\n\n**Relevant Docs:**\n\n- [Custom Blocks](/docs/features/custom-schemas/custom-blocks)\n- [Editor Setup](/docs/getting-started/editor-setup)" }, { - projectSlug: "suggestion-menus-mentions", - fullSlug: "custom-schema/suggestion-menus-mentions", - pathFromRoot: "examples/06-custom-schema/02-suggestion-menus-mentions", - config: { - playground: true, - docs: true, - author: "yousefed", - tags: [ + "projectSlug": "suggestion-menus-mentions", + "fullSlug": "custom-schema/suggestion-menus-mentions", + "pathFromRoot": "examples/06-custom-schema/02-suggestion-menus-mentions", + "config": { + "playground": true, + "docs": true, + "author": "yousefed", + "tags": [ "Intermediate", "Inline Content", "Custom Schemas", - "Suggestion Menus", - ], + "Suggestion Menus" + ] }, - title: "Mentions Menu", - group: { - pathFromRoot: "examples/06-custom-schema", - slug: "custom-schema", + "title": "Mentions Menu", + "group": { + "pathFromRoot": "examples/06-custom-schema", + "slug": "custom-schema" }, - readme: - 'In this example, we create a custom `Mention` inline content type which is used to tag people. In addition, we create a new Suggestion Menu for mentions which opens with the "@" character.\n\n**Try it out:** Press the "@" key to open the mentions menu and insert a mention!\n\n**Relevant Docs:**\n\n- [Custom Inline Content Types](/docs/features/custom-schemas/custom-inline-content)\n- [Creating Suggestion Menus](/docs/react/components/suggestion-menus#creating-additional-suggestion-menus)\n- [Editor Setup](/docs/getting-started/editor-setup)', + "readme": "In this example, we create a custom `Mention` inline content type which is used to tag people. In addition, we create a new Suggestion Menu for mentions which opens with the \"@\" character.\n\n**Try it out:** Press the \"@\" key to open the mentions menu and insert a mention!\n\n**Relevant Docs:**\n\n- [Custom Inline Content Types](/docs/features/custom-schemas/custom-inline-content)\n- [Creating Suggestion Menus](/docs/react/components/suggestion-menus#creating-additional-suggestion-menus)\n- [Editor Setup](/docs/getting-started/editor-setup)" }, { - projectSlug: "font-style", - fullSlug: "custom-schema/font-style", - pathFromRoot: "examples/06-custom-schema/03-font-style", - config: { - playground: true, - docs: true, - author: "matthewlipski", - tags: [ + "projectSlug": "font-style", + "fullSlug": "custom-schema/font-style", + "pathFromRoot": "examples/06-custom-schema/03-font-style", + "config": { + "playground": true, + "docs": true, + "author": "matthewlipski", + "tags": [ "Intermediate", "Inline Content", "Custom Schemas", - "Formatting Toolbar", + "Formatting Toolbar" ], - dependencies: { - "react-icons": "^5.2.1", - } as any, - }, - title: "Font Style", - group: { - pathFromRoot: "examples/06-custom-schema", - slug: "custom-schema", - }, - readme: - "In this example, we create a custom `Font` style which is used to set the `fontFamily` style. In addition, we create a Formatting Toolbar button which sets the `Font` style on the selected text.\n\n**Try it out:** Highlight some text to open the Formatting Toolbar and set the `Font` style!\n\n**Relevant Docs:**\n\n- [Custom Styles](/docs/features/custom-schemas/custom-styles)\n- [Changing the Formatting Toolbar](/docs/react/components/formatting-toolbar)\n- [Editor Setup](/docs/getting-started/editor-setup)", - }, - { - projectSlug: "pdf-file-block", - fullSlug: "custom-schema/pdf-file-block", - pathFromRoot: "examples/06-custom-schema/04-pdf-file-block", - config: { - playground: true, - docs: true, - author: "matthewlipski", - tags: [ + "dependencies": { + "react-icons": "^5.2.1" + } as any + }, + "title": "Font Style", + "group": { + "pathFromRoot": "examples/06-custom-schema", + "slug": "custom-schema" + }, + "readme": "In this example, we create a custom `Font` style which is used to set the `fontFamily` style. In addition, we create a Formatting Toolbar button which sets the `Font` style on the selected text.\n\n**Try it out:** Highlight some text to open the Formatting Toolbar and set the `Font` style!\n\n**Relevant Docs:**\n\n- [Custom Styles](/docs/features/custom-schemas/custom-styles)\n- [Changing the Formatting Toolbar](/docs/react/components/formatting-toolbar)\n- [Editor Setup](/docs/getting-started/editor-setup)" + }, + { + "projectSlug": "pdf-file-block", + "fullSlug": "custom-schema/pdf-file-block", + "pathFromRoot": "examples/06-custom-schema/04-pdf-file-block", + "config": { + "playground": true, + "docs": true, + "author": "matthewlipski", + "tags": [ "Intermediate", "Blocks", "Custom Schemas", "Suggestion Menus", - "Slash Menu", + "Slash Menu" ], - dependencies: { + "dependencies": { "@mantine/core": "^8.3.4", - "react-icons": "^5.2.1", + "react-icons": "^5.2.1" } as any, - pro: true, + "pro": true }, - title: "PDF Block", - group: { - pathFromRoot: "examples/06-custom-schema", - slug: "custom-schema", + "title": "PDF Block", + "group": { + "pathFromRoot": "examples/06-custom-schema", + "slug": "custom-schema" }, - readme: - 'In this example, we create a custom `PDF` block which extends the built-in `File` block. In addition, we create a Slash Menu item which inserts a `PDF` block.\n\n**Try it out:** Press the "/" key to open the Slash Menu and insert an `PDF` block!\n\n**Relevant Docs:**\n\n- [Custom Blocks](/docs/features/custom-schemas/custom-blocks)\n- [Changing Slash Menu Items](/docs/react/components/suggestion-menus)\n- [Editor Setup](/docs/getting-started/editor-setup)', + "readme": "In this example, we create a custom `PDF` block which extends the built-in `File` block. In addition, we create a Slash Menu item which inserts a `PDF` block.\n\n**Try it out:** Press the \"/\" key to open the Slash Menu and insert an `PDF` block!\n\n**Relevant Docs:**\n\n- [Custom Blocks](/docs/features/custom-schemas/custom-blocks)\n- [Changing Slash Menu Items](/docs/react/components/suggestion-menus)\n- [Editor Setup](/docs/getting-started/editor-setup)" }, { - projectSlug: "alert-block-full-ux", - fullSlug: "custom-schema/alert-block-full-ux", - pathFromRoot: "examples/06-custom-schema/05-alert-block-full-ux", - config: { - playground: true, - docs: true, - author: "matthewlipski", - tags: [ + "projectSlug": "alert-block-full-ux", + "fullSlug": "custom-schema/alert-block-full-ux", + "pathFromRoot": "examples/06-custom-schema/05-alert-block-full-ux", + "config": { + "playground": true, + "docs": true, + "author": "matthewlipski", + "tags": [ "Intermediate", "Blocks", "Custom Schemas", "Formatting Toolbar", "Suggestion Menus", - "Slash Menu", + "Slash Menu" ], - dependencies: { + "dependencies": { "@mantine/core": "^8.3.4", - "react-icons": "^5.2.1", - } as any, - }, - title: "Alert Block with Full UX", - group: { - pathFromRoot: "examples/06-custom-schema", - slug: "custom-schema", - }, - readme: - 'In this example, we create a custom `Alert` block which is used to emphasize text, same as in the [minimal `Alert` block example](/examples/custom-schema/alert-block). However, in this example, we also add a command to insert the block via the Slash Menu, and an entry in the Formatting Toolbar\'s Block Type Select to change the current block to an `Alert`.\n\n**Try it out:** Press the "/" key to open the Slash Menu and insert an `Alert` block! Or highlight text in a paragraph, then change the block type to an `Alert` using the Block Type Select in the Formatting Toolbar!\n\n**Relevant Docs:**\n\n- [Minimal Alert Block Example](/examples/custom-schema/alert-block)\n- [Changing Slash Menu Items](/docs/react/components/suggestion-menus)\n- [Changing Block Type Select Items](/docs/react/components/formatting-toolbar)\n- [Custom Blocks](/docs/features/custom-schemas/custom-blocks)\n- [Editor Setup](/docs/getting-started/editor-setup)', - }, - { - projectSlug: "toggleable-blocks", - fullSlug: "custom-schema/toggleable-blocks", - pathFromRoot: "examples/06-custom-schema/06-toggleable-blocks", - config: { - playground: true, - docs: true, - author: "matthewlipski", - tags: ["Basic"], - }, - title: "Toggleable Custom Blocks", - group: { - pathFromRoot: "examples/06-custom-schema", - slug: "custom-schema", - }, - readme: - "This example shows how to create custom blocks with a toggle button to show/hide their children, like with the default toggle heading and list item blocks. This is done using the use the `ToggleWrapper` component from `@blocknote/react`.\n\n**Relevant Docs:**\n\n- [Custom Blocks](/docs/features/custom-schemas/custom-blocks)\n- [Editor Setup](/docs/getting-started/editor-setup)\n- [Default Schema](/docs/features/blocks)", - }, - { - projectSlug: "draggable-inline-content", - fullSlug: "custom-schema/draggable-inline-content", - pathFromRoot: "examples/06-custom-schema/draggable-inline-content", - config: { - playground: true, - docs: false, - author: "hectorzhuang", - tags: [], - }, - title: "Draggable Inline Content", - group: { - pathFromRoot: "examples/06-custom-schema", - slug: "custom-schema", - }, - readme: "", - }, - { - projectSlug: "react-custom-blocks", - fullSlug: "custom-schema/react-custom-blocks", - pathFromRoot: "examples/06-custom-schema/react-custom-blocks", - config: { - playground: true, - docs: false, - author: "matthewlipski", - tags: [], - }, - title: "Custom Blocks - React API", - group: { - pathFromRoot: "examples/06-custom-schema", - slug: "custom-schema", - }, - readme: "", - }, - { - projectSlug: "react-custom-inline-content", - fullSlug: "custom-schema/react-custom-inline-content", - pathFromRoot: "examples/06-custom-schema/react-custom-inline-content", - config: { - playground: true, - docs: false, - author: "matthewlipski", - tags: [], - }, - title: "Custom Inline Content - React API", - group: { - pathFromRoot: "examples/06-custom-schema", - slug: "custom-schema", - }, - readme: "", - }, - { - projectSlug: "react-custom-styles", - fullSlug: "custom-schema/react-custom-styles", - pathFromRoot: "examples/06-custom-schema/react-custom-styles", - config: { - playground: true, - docs: false, - author: "matthewlipski", - tags: [], - }, - title: "Custom Styles - React API", - group: { - pathFromRoot: "examples/06-custom-schema", - slug: "custom-schema", - }, - readme: "", - }, - ], + "react-icons": "^5.2.1" + } as any + }, + "title": "Alert Block with Full UX", + "group": { + "pathFromRoot": "examples/06-custom-schema", + "slug": "custom-schema" + }, + "readme": "In this example, we create a custom `Alert` block which is used to emphasize text, same as in the [minimal `Alert` block example](/examples/custom-schema/alert-block). However, in this example, we also add a command to insert the block via the Slash Menu, and an entry in the Formatting Toolbar's Block Type Select to change the current block to an `Alert`.\n\n**Try it out:** Press the \"/\" key to open the Slash Menu and insert an `Alert` block! Or highlight text in a paragraph, then change the block type to an `Alert` using the Block Type Select in the Formatting Toolbar!\n\n**Relevant Docs:**\n\n- [Minimal Alert Block Example](/examples/custom-schema/alert-block)\n- [Changing Slash Menu Items](/docs/react/components/suggestion-menus)\n- [Changing Block Type Select Items](/docs/react/components/formatting-toolbar)\n- [Custom Blocks](/docs/features/custom-schemas/custom-blocks)\n- [Editor Setup](/docs/getting-started/editor-setup)" + }, + { + "projectSlug": "toggleable-blocks", + "fullSlug": "custom-schema/toggleable-blocks", + "pathFromRoot": "examples/06-custom-schema/06-toggleable-blocks", + "config": { + "playground": true, + "docs": true, + "author": "matthewlipski", + "tags": [ + "Basic" + ] + }, + "title": "Toggleable Custom Blocks", + "group": { + "pathFromRoot": "examples/06-custom-schema", + "slug": "custom-schema" + }, + "readme": "This example shows how to create custom blocks with a toggle button to show/hide their children, like with the default toggle heading and list item blocks. This is done using the use the `ToggleWrapper` component from `@blocknote/react`.\n\n**Relevant Docs:**\n\n- [Custom Blocks](/docs/features/custom-schemas/custom-blocks)\n- [Editor Setup](/docs/getting-started/editor-setup)\n- [Default Schema](/docs/features/blocks)" + }, + { + "projectSlug": "configuring-blocks", + "fullSlug": "custom-schema/configuring-blocks", + "pathFromRoot": "examples/06-custom-schema/07-configuring-blocks", + "config": { + "playground": true, + "docs": true, + "author": "matthewlipski", + "tags": [ + "Basic" + ] + }, + "title": "Configuring Default Blocks", + "group": { + "pathFromRoot": "examples/06-custom-schema", + "slug": "custom-schema" + }, + "readme": "This example shows how you can configure the editor's default blocks. Specifically, heading blocks are made to only support levels 1-3, and cannot be toggleable.\n\n**Relevant Docs:**\n\n- [Editor Setup](/docs/getting-started/editor-setup)\n- [Default Schema](/docs/foundations/schemas)\n- [Custom Schemas](/docs/features/custom-schemas)" + }, + { + "projectSlug": "draggable-inline-content", + "fullSlug": "custom-schema/draggable-inline-content", + "pathFromRoot": "examples/06-custom-schema/draggable-inline-content", + "config": { + "playground": true, + "docs": false, + "author": "hectorzhuang", + "tags": [] + }, + "title": "Draggable Inline Content", + "group": { + "pathFromRoot": "examples/06-custom-schema", + "slug": "custom-schema" + }, + "readme": "" + }, + { + "projectSlug": "react-custom-blocks", + "fullSlug": "custom-schema/react-custom-blocks", + "pathFromRoot": "examples/06-custom-schema/react-custom-blocks", + "config": { + "playground": true, + "docs": false, + "author": "matthewlipski", + "tags": [] + }, + "title": "Custom Blocks - React API", + "group": { + "pathFromRoot": "examples/06-custom-schema", + "slug": "custom-schema" + }, + "readme": "" + }, + { + "projectSlug": "react-custom-inline-content", + "fullSlug": "custom-schema/react-custom-inline-content", + "pathFromRoot": "examples/06-custom-schema/react-custom-inline-content", + "config": { + "playground": true, + "docs": false, + "author": "matthewlipski", + "tags": [] + }, + "title": "Custom Inline Content - React API", + "group": { + "pathFromRoot": "examples/06-custom-schema", + "slug": "custom-schema" + }, + "readme": "" + }, + { + "projectSlug": "react-custom-styles", + "fullSlug": "custom-schema/react-custom-styles", + "pathFromRoot": "examples/06-custom-schema/react-custom-styles", + "config": { + "playground": true, + "docs": false, + "author": "matthewlipski", + "tags": [] + }, + "title": "Custom Styles - React API", + "group": { + "pathFromRoot": "examples/06-custom-schema", + "slug": "custom-schema" + }, + "readme": "" + } + ] }, - collaboration: { - pathFromRoot: "examples/07-collaboration", - slug: "collaboration", - projects: [ - { - projectSlug: "partykit", - fullSlug: "collaboration/partykit", - pathFromRoot: "examples/07-collaboration/01-partykit", - config: { - playground: true, - docs: true, - author: "yousefed", - tags: ["Advanced", "Saving/Loading", "Collaboration"], - dependencies: { + "collaboration": { + "pathFromRoot": "examples/07-collaboration", + "slug": "collaboration", + "projects": [ + { + "projectSlug": "partykit", + "fullSlug": "collaboration/partykit", + "pathFromRoot": "examples/07-collaboration/01-partykit", + "config": { + "playground": true, + "docs": true, + "author": "yousefed", + "tags": [ + "Advanced", + "Saving/Loading", + "Collaboration" + ], + "dependencies": { "y-partykit": "^0.0.25", - yjs: "^13.6.27", - } as any, + "yjs": "^13.6.27" + } as any }, - title: "Collaborative Editing with PartyKit", - group: { - pathFromRoot: "examples/07-collaboration", - slug: "collaboration", + "title": "Collaborative Editing with PartyKit", + "group": { + "pathFromRoot": "examples/07-collaboration", + "slug": "collaboration" }, - readme: - "In this example, we use PartyKit to let multiple users collaborate on a single BlockNote document in real-time.\n\n**Try it out:** Open this page in a new browser tab or window to see it in action!\n\n**Relevant Docs:**\n\n- [Editor Setup](/docs/getting-started/editor-setup)\n- [PartyKit](/docs/features/collaboration#partykit)", + "readme": "In this example, we use PartyKit to let multiple users collaborate on a single BlockNote document in real-time.\n\n**Try it out:** Open this page in a new browser tab or window to see it in action!\n\n**Relevant Docs:**\n\n- [Editor Setup](/docs/getting-started/editor-setup)\n- [PartyKit](/docs/features/collaboration#partykit)" }, { - projectSlug: "liveblocks", - fullSlug: "collaboration/liveblocks", - pathFromRoot: "examples/07-collaboration/02-liveblocks", - config: { - playground: true, - docs: true, - author: "yousefed", - tags: ["Advanced", "Saving/Loading", "Collaboration"], - dependencies: { + "projectSlug": "liveblocks", + "fullSlug": "collaboration/liveblocks", + "pathFromRoot": "examples/07-collaboration/02-liveblocks", + "config": { + "playground": true, + "docs": true, + "author": "yousefed", + "tags": [ + "Advanced", + "Saving/Loading", + "Collaboration" + ], + "dependencies": { "@liveblocks/client": "3.7.1-tiptap3", "@liveblocks/react": "3.7.1-tiptap3", "@liveblocks/react-blocknote": "3.7.1-tiptap3", "@liveblocks/react-tiptap": "3.7.1-tiptap3", "@liveblocks/react-ui": "3.7.1-tiptap3", - yjs: "^13.6.27", - } as any, + "yjs": "^13.6.27" + } as any }, - title: "Collaborative Editing with Liveblocks", - group: { - pathFromRoot: "examples/07-collaboration", - slug: "collaboration", + "title": "Collaborative Editing with Liveblocks", + "group": { + "pathFromRoot": "examples/07-collaboration", + "slug": "collaboration" }, - readme: - "In this example, we use\nthe [Liveblocks + BlockNote setup guide](https://liveblocks.io/docs/get-started/react-blocknote)\nto create a collaborative BlockNote editor, where multiple people can work on\nthe same document in real-time.\n\nUsers can also add comments to the documents to start threads, which are\ndisplayed next to the editor. As well as that, they can react to, reply to, and\nresolve existing comments.\n\n**Try it out:** Open this page in a new browser tab or window to see it in\naction!\n\n**Relevant Docs:**\n\n- [Editor Setup](/docs/getting-started/editor-setup)\n- [Liveblocks](/docs/features/collaboration#liveblocks)\n\n**From Liveblocks Website:**\n\n- [Get Started with BlockNote](https://liveblocks.io/docs/get-started/react-blocknote)\n- [Ready Made Features](https://liveblocks.io/docs/ready-made-features/text-editor/blocknote)\n- [API Reference](https://liveblocks.io/docs/api-reference/liveblocks-react-blocknote)\n- [Advanced Example](https://liveblocks.io/examples/collaborative-text-editor/nextjs-blocknote)", + "readme": "In this example, we use\nthe [Liveblocks + BlockNote setup guide](https://liveblocks.io/docs/get-started/react-blocknote)\nto create a collaborative BlockNote editor, where multiple people can work on\nthe same document in real-time.\n\nUsers can also add comments to the documents to start threads, which are\ndisplayed next to the editor. As well as that, they can react to, reply to, and\nresolve existing comments.\n\n**Try it out:** Open this page in a new browser tab or window to see it in\naction!\n\n**Relevant Docs:**\n\n- [Editor Setup](/docs/getting-started/editor-setup)\n- [Liveblocks](/docs/features/collaboration#liveblocks)\n\n**From Liveblocks Website:**\n\n- [Get Started with BlockNote](https://liveblocks.io/docs/get-started/react-blocknote)\n- [Ready Made Features](https://liveblocks.io/docs/ready-made-features/text-editor/blocknote)\n- [API Reference](https://liveblocks.io/docs/api-reference/liveblocks-react-blocknote)\n- [Advanced Example](https://liveblocks.io/examples/collaborative-text-editor/nextjs-blocknote)" }, { - projectSlug: "y-sweet", - fullSlug: "collaboration/y-sweet", - pathFromRoot: "examples/07-collaboration/03-y-sweet", - config: { - playground: true, - docs: true, - author: "jakelazaroff", - tags: ["Advanced", "Saving/Loading", "Collaboration"], - dependencies: { - "@y-sweet/react": "^0.6.3", - } as any, - }, - title: "Collaborative Editing with Y-Sweet", - group: { - pathFromRoot: "examples/07-collaboration", - slug: "collaboration", - }, - readme: - "In this example, we use Y-Sweet to let multiple users collaborate on a single BlockNote document in real-time.\n\n**Try it out:** Open the [Y-Sweet BlockNote demo](https://demos.y-sweet.dev/blocknote) in multiple browser tabs to see it in action!\n\n**Relevant Docs:**\n\n- [Editor Setup](/docs/getting-started/editor-setup)\n- [Real-time collaboration](/docs/features/collaboration)\n- [Y-Sweet on Jamsocket](https://docs.jamsocket.com/y-sweet/tutorials/blocknote)", - }, - { - projectSlug: "electric-sql", - fullSlug: "collaboration/electric-sql", - pathFromRoot: "examples/07-collaboration/04-electric-sql", - config: { - playground: true, - docs: true, - author: "matthewlipski", - tags: ["Advanced", "Saving/Loading", "Collaboration"], - }, - title: "Collaborative Editing with ElectricSQL", - group: { - pathFromRoot: "examples/07-collaboration", - slug: "collaboration", - }, - readme: - "In this example, we use ElectricSQL to let multiple users collaborate on a single BlockNote document in real-time. The setup for this demo is more involved than the other collaboration examples, as it requires a running server and has a more fully-fledged UI. Therefore, the demo just uses an iframe element to show a hosted instance of the full ElectricSQL + BlockNote setup, which you can find the code for [here](https://github.com/TypeCellOS/blocknote-electric-example).\n\n**Try it out:** Open this page (or the [iframe url](https://blocknote-electric-example.vercel.app/)) in a new browser tab or window to see it in action!\n\n**Relevant Docs:**\n\n- [Editor Setup](/docs/getting-started/editor-setup)\n- [Real-time collaboration](/docs/features/collaboration)\n- [ElectricSQL](https://electric-sql.com/)", - }, - { - projectSlug: "comments", - fullSlug: "collaboration/comments", - pathFromRoot: "examples/07-collaboration/05-comments", - config: { - playground: true, - docs: true, - author: "yousefed", - tags: ["Advanced", "Comments", "Collaboration"], - dependencies: { + "projectSlug": "y-sweet", + "fullSlug": "collaboration/y-sweet", + "pathFromRoot": "examples/07-collaboration/03-y-sweet", + "config": { + "playground": true, + "docs": true, + "author": "jakelazaroff", + "tags": [ + "Advanced", + "Saving/Loading", + "Collaboration" + ], + "dependencies": { + "@y-sweet/react": "^0.6.3" + } as any + }, + "title": "Collaborative Editing with Y-Sweet", + "group": { + "pathFromRoot": "examples/07-collaboration", + "slug": "collaboration" + }, + "readme": "In this example, we use Y-Sweet to let multiple users collaborate on a single BlockNote document in real-time.\n\n**Try it out:** Open the [Y-Sweet BlockNote demo](https://demos.y-sweet.dev/blocknote) in multiple browser tabs to see it in action!\n\n**Relevant Docs:**\n\n- [Editor Setup](/docs/getting-started/editor-setup)\n- [Real-time collaboration](/docs/features/collaboration)\n- [Y-Sweet on Jamsocket](https://docs.jamsocket.com/y-sweet/tutorials/blocknote)" + }, + { + "projectSlug": "electric-sql", + "fullSlug": "collaboration/electric-sql", + "pathFromRoot": "examples/07-collaboration/04-electric-sql", + "config": { + "playground": true, + "docs": true, + "author": "matthewlipski", + "tags": [ + "Advanced", + "Saving/Loading", + "Collaboration" + ] + }, + "title": "Collaborative Editing with ElectricSQL", + "group": { + "pathFromRoot": "examples/07-collaboration", + "slug": "collaboration" + }, + "readme": "In this example, we use ElectricSQL to let multiple users collaborate on a single BlockNote document in real-time. The setup for this demo is more involved than the other collaboration examples, as it requires a running server and has a more fully-fledged UI. Therefore, the demo just uses an iframe element to show a hosted instance of the full ElectricSQL + BlockNote setup, which you can find the code for [here](https://github.com/TypeCellOS/blocknote-electric-example).\n\n**Try it out:** Open this page (or the [iframe url](https://blocknote-electric-example.vercel.app/)) in a new browser tab or window to see it in action!\n\n**Relevant Docs:**\n\n- [Editor Setup](/docs/getting-started/editor-setup)\n- [Real-time collaboration](/docs/features/collaboration)\n- [ElectricSQL](https://electric-sql.com/)" + }, + { + "projectSlug": "comments", + "fullSlug": "collaboration/comments", + "pathFromRoot": "examples/07-collaboration/05-comments", + "config": { + "playground": true, + "docs": true, + "author": "yousefed", + "tags": [ + "Advanced", + "Comments", + "Collaboration" + ], + "dependencies": { "@y-sweet/react": "^0.6.3", - "@mantine/core": "^8.3.4", - } as any, + "@mantine/core": "^8.3.4" + } as any }, - title: "Comments & Threads", - group: { - pathFromRoot: "examples/07-collaboration", - slug: "collaboration", + "title": "Comments & Threads", + "group": { + "pathFromRoot": "examples/07-collaboration", + "slug": "collaboration" }, - readme: - 'In this example, you can add comments to the document while collaborating with others. You can also pick user accounts with different permissions, as well as react to, reply to, and resolve existing comments. The comments are displayed floating next to the text they refer to, and appear when selecting said text.\n\n**Try it out:** Click the "Add comment" button in the [Formatting Toolbar](/docs/react/components/formatting-toolbar) to add a comment!\n\n**Relevant Docs:**\n\n- [Comments](/docs/features/collaboration/comments)\n- [Real-time collaboration](/docs/features/collaboration)\n- [Y-Sweet on Jamsocket](https://docs.jamsocket.com/y-sweet/tutorials/blocknote)\n- [Editor Setup](/docs/getting-started/editor-setup)', + "readme": "In this example, you can add comments to the document while collaborating with others. You can also pick user accounts with different permissions, as well as react to, reply to, and resolve existing comments. The comments are displayed floating next to the text they refer to, and appear when selecting said text.\n\n**Try it out:** Click the \"Add comment\" button in the [Formatting Toolbar](/docs/react/components/formatting-toolbar) to add a comment!\n\n**Relevant Docs:**\n\n- [Comments](/docs/features/collaboration/comments)\n- [Real-time collaboration](/docs/features/collaboration)\n- [Y-Sweet on Jamsocket](https://docs.jamsocket.com/y-sweet/tutorials/blocknote)\n- [Editor Setup](/docs/getting-started/editor-setup)" }, { - projectSlug: "comments-with-sidebar", - fullSlug: "collaboration/comments-with-sidebar", - pathFromRoot: "examples/07-collaboration/06-comments-with-sidebar", - config: { - playground: true, - docs: true, - author: "matthewlipski", - tags: ["Advanced", "Comments", "Collaboration"], - dependencies: { + "projectSlug": "comments-with-sidebar", + "fullSlug": "collaboration/comments-with-sidebar", + "pathFromRoot": "examples/07-collaboration/06-comments-with-sidebar", + "config": { + "playground": true, + "docs": true, + "author": "matthewlipski", + "tags": [ + "Advanced", + "Comments", + "Collaboration" + ], + "dependencies": { "@y-sweet/react": "^0.6.3", - "@mantine/core": "^8.3.4", - } as any, + "@mantine/core": "^8.3.4" + } as any }, - title: "Threads Sidebar", - group: { - pathFromRoot: "examples/07-collaboration", - slug: "collaboration", + "title": "Threads Sidebar", + "group": { + "pathFromRoot": "examples/07-collaboration", + "slug": "collaboration" }, - readme: - 'In this example, you can add comments to the document while collaborating with others. You can also pick user accounts with different permissions, as well as react to, reply to, and resolve existing comments. The comments are displayed floating next to the text they refer to, and appear when selecting said text. The comments are shown in a separate sidebar using the `ThreadsSidebar` component.\n\n**Try it out:** Click the "Add comment" button in\nthe [Formatting Toolbar](/docs/react/components/formatting-toolbar) to add a\ncomment!\n\n**Relevant Docs:**\n\n- [Comments Sidebar](/docs/features/collaboration/comments#sidebar-view)\n- [Real-time collaboration](/docs/features/collaboration)\n- [Y-Sweet on Jamsocket](https://docs.jamsocket.com/y-sweet/tutorials/blocknote)\n- [Editor Setup](/docs/getting-started/editor-setup)', + "readme": "In this example, you can add comments to the document while collaborating with others. You can also pick user accounts with different permissions, as well as react to, reply to, and resolve existing comments. The comments are displayed floating next to the text they refer to, and appear when selecting said text. The comments are shown in a separate sidebar using the `ThreadsSidebar` component.\n\n**Try it out:** Click the \"Add comment\" button in\nthe [Formatting Toolbar](/docs/react/components/formatting-toolbar) to add a\ncomment!\n\n**Relevant Docs:**\n\n- [Comments Sidebar](/docs/features/collaboration/comments#sidebar-view)\n- [Real-time collaboration](/docs/features/collaboration)\n- [Y-Sweet on Jamsocket](https://docs.jamsocket.com/y-sweet/tutorials/blocknote)\n- [Editor Setup](/docs/getting-started/editor-setup)" }, { - projectSlug: "ghost-writer", - fullSlug: "collaboration/ghost-writer", - pathFromRoot: "examples/07-collaboration/07-ghost-writer", - config: { - playground: true, - docs: false, - author: "nperez0111", - tags: ["Advanced", "Development", "Collaboration"], - dependencies: { + "projectSlug": "ghost-writer", + "fullSlug": "collaboration/ghost-writer", + "pathFromRoot": "examples/07-collaboration/07-ghost-writer", + "config": { + "playground": true, + "docs": false, + "author": "nperez0111", + "tags": [ + "Advanced", + "Development", + "Collaboration" + ], + "dependencies": { "y-partykit": "^0.0.25", - yjs: "^13.6.27", - } as any, + "yjs": "^13.6.27" + } as any }, - title: "Ghost Writer", - group: { - pathFromRoot: "examples/07-collaboration", - slug: "collaboration", + "title": "Ghost Writer", + "group": { + "pathFromRoot": "examples/07-collaboration", + "slug": "collaboration" }, - readme: - "In this example, we use a local Yjs document to store the document state, and have a ghost writer that edits the document in real-time.\n\n**Try it out:** Open this page in a new browser tab or window to see it in action!\n\n**Relevant Docs:**\n\n- [Editor Setup](/docs/getting-started/editor-setup)", + "readme": "In this example, we use a local Yjs document to store the document state, and have a ghost writer that edits the document in real-time.\n\n**Try it out:** Open this page in a new browser tab or window to see it in action!\n\n**Relevant Docs:**\n\n- [Editor Setup](/docs/getting-started/editor-setup)" }, { - projectSlug: "forking", - fullSlug: "collaboration/forking", - pathFromRoot: "examples/07-collaboration/08-forking", - config: { - playground: true, - docs: false, - author: "nperez0111", - tags: ["Advanced", "Development", "Collaboration"], - dependencies: { + "projectSlug": "forking", + "fullSlug": "collaboration/forking", + "pathFromRoot": "examples/07-collaboration/08-forking", + "config": { + "playground": true, + "docs": false, + "author": "nperez0111", + "tags": [ + "Advanced", + "Development", + "Collaboration" + ], + "dependencies": { "y-partykit": "^0.0.25", - yjs: "^13.6.27", - } as any, + "yjs": "^13.6.27" + } as any }, - title: "Collaborative Editing with Forking", - group: { - pathFromRoot: "examples/07-collaboration", - slug: "collaboration", + "title": "Collaborative Editing with Forking", + "group": { + "pathFromRoot": "examples/07-collaboration", + "slug": "collaboration" }, - readme: - "In this example, we can fork a document and edit it independently of other collaborators. Then, we can choose to merge the changes back into the original document, or discard the changes.\n\n**Try it out:** Open this page in a new browser tab or window to see it in action!\n\n**Relevant Docs:**\n\n- [Editor Setup](/docs/getting-started/editor-setup)", - }, - ], + "readme": "In this example, we can fork a document and edit it independently of other collaborators. Then, we can choose to merge the changes back into the original document, or discard the changes.\n\n**Try it out:** Open this page in a new browser tab or window to see it in action!\n\n**Relevant Docs:**\n\n- [Editor Setup](/docs/getting-started/editor-setup)" + } + ] }, - extensions: { - pathFromRoot: "examples/08-extensions", - slug: "extensions", - projects: [ - { - projectSlug: "tiptap-arrow-conversion", - fullSlug: "extensions/tiptap-arrow-conversion", - pathFromRoot: "examples/08-extensions/01-tiptap-arrow-conversion", - config: { - playground: true, - docs: true, - author: "komsenapati", - tags: ["Extension"], - pro: true, - dependencies: { - "@tiptap/core": "^3.4.3", - } as any, - }, - title: "TipTap extension (arrow InputRule)", - group: { - pathFromRoot: "examples/08-extensions", - slug: "extensions", - }, - readme: - "This example shows how to set up a BlockNote editor with a TipTap extension that registers an InputRule to convert `->` into `→`.\n\n**Try it out:** Type `->` anywhere in the editor and see how it's automatically converted to a single arrow unicode character.", - }, - ], + "extensions": { + "pathFromRoot": "examples/08-extensions", + "slug": "extensions", + "projects": [ + { + "projectSlug": "tiptap-arrow-conversion", + "fullSlug": "extensions/tiptap-arrow-conversion", + "pathFromRoot": "examples/08-extensions/01-tiptap-arrow-conversion", + "config": { + "playground": true, + "docs": true, + "author": "komsenapati", + "tags": [ + "Extension" + ], + "pro": true, + "dependencies": { + "@tiptap/core": "^3.4.3" + } as any + }, + "title": "TipTap extension (arrow InputRule)", + "group": { + "pathFromRoot": "examples/08-extensions", + "slug": "extensions" + }, + "readme": "This example shows how to set up a BlockNote editor with a TipTap extension that registers an InputRule to convert `->` into `→`.\n\n**Try it out:** Type `->` anywhere in the editor and see how it's automatically converted to a single arrow unicode character." + } + ] }, - ai: { - pathFromRoot: "examples/09-ai", - slug: "ai", - projects: [ - { - projectSlug: "minimal", - fullSlug: "ai/minimal", - pathFromRoot: "examples/09-ai/01-minimal", - config: { - playground: true, - docs: true, - author: "yousefed", - tags: ["AI", "llm"], - dependencies: { + "ai": { + "pathFromRoot": "examples/09-ai", + "slug": "ai", + "projects": [ + { + "projectSlug": "minimal", + "fullSlug": "ai/minimal", + "pathFromRoot": "examples/09-ai/01-minimal", + "config": { + "playground": true, + "docs": true, + "author": "yousefed", + "tags": [ + "AI", + "llm" + ], + "dependencies": { "@blocknote/xl-ai": "latest", "@mantine/core": "^8.3.4", - ai: "^5.0.45", - zustand: "^5.0.3", - } as any, - }, - title: "Rich Text editor AI integration", - group: { - pathFromRoot: "examples/09-ai", - slug: "ai", - }, - readme: - "This example shows the minimal setup to add AI integration to your BlockNote rich text editor.\n\nSelect some text and click the AI (stars) button, or type `/ai` anywhere in the editor to access AI functionality.\n\n**Relevant Docs:**\n\n- [Getting Stared with BlockNote AI](/docs/features/ai/getting-started)\n- [Changing the Formatting Toolbar](/docs/react/components/formatting-toolbar)\n- [Changing Slash Menu Items](/docs/react/components/suggestion-menus)", - }, - { - projectSlug: "playground", - fullSlug: "ai/playground", - pathFromRoot: "examples/09-ai/02-playground", - config: { - playground: true, - docs: true, - author: "yousefed", - tags: ["AI", "llm"], - dependencies: { + "ai": "^5.0.45", + "zustand": "^5.0.3" + } as any + }, + "title": "Rich Text editor AI integration", + "group": { + "pathFromRoot": "examples/09-ai", + "slug": "ai" + }, + "readme": "This example shows the minimal setup to add AI integration to your BlockNote rich text editor.\n\nSelect some text and click the AI (stars) button, or type `/ai` anywhere in the editor to access AI functionality.\n\n**Relevant Docs:**\n\n- [Getting Stared with BlockNote AI](/docs/features/ai/getting-started)\n- [Changing the Formatting Toolbar](/docs/react/components/formatting-toolbar)\n- [Changing Slash Menu Items](/docs/react/components/suggestion-menus)" + }, + { + "projectSlug": "playground", + "fullSlug": "ai/playground", + "pathFromRoot": "examples/09-ai/02-playground", + "config": { + "playground": true, + "docs": true, + "author": "yousefed", + "tags": [ + "AI", + "llm" + ], + "dependencies": { "@blocknote/xl-ai": "latest", "@mantine/core": "^8.3.4", - ai: "^5.0.45", - zustand: "^5.0.3", - } as any, - }, - title: "AI Playground", - group: { - pathFromRoot: "examples/09-ai", - slug: "ai", - }, - readme: - "Explore different LLM models integrated with BlockNote in the AI Playground.\n\nChange the configuration, then highlight some text to access the AI menu, or type `/ai` anywhere in the editor.\n\n**Relevant Docs:**\n\n- [Getting Stared with BlockNote AI](/docs/features/ai/getting-started)\n- [BlockNote AI Reference](/docs/features/ai/reference)\n- [Changing the Formatting Toolbar](/docs/react/components/formatting-toolbar)\n- [Changing Slash Menu Items](/docs/react/components/suggestion-menus)", - }, - { - projectSlug: "custom-ai-menu-items", - fullSlug: "ai/custom-ai-menu-items", - pathFromRoot: "examples/09-ai/03-custom-ai-menu-items", - config: { - playground: true, - docs: true, - author: "matthewlipski", - tags: ["AI", "llm"], - dependencies: { + "ai": "^5.0.45", + "zustand": "^5.0.3" + } as any + }, + "title": "AI Playground", + "group": { + "pathFromRoot": "examples/09-ai", + "slug": "ai" + }, + "readme": "Explore different LLM models integrated with BlockNote in the AI Playground.\n\nChange the configuration, then highlight some text to access the AI menu, or type `/ai` anywhere in the editor.\n\n**Relevant Docs:**\n\n- [Getting Stared with BlockNote AI](/docs/features/ai/getting-started)\n- [BlockNote AI Reference](/docs/features/ai/reference)\n- [Changing the Formatting Toolbar](/docs/react/components/formatting-toolbar)\n- [Changing Slash Menu Items](/docs/react/components/suggestion-menus)" + }, + { + "projectSlug": "custom-ai-menu-items", + "fullSlug": "ai/custom-ai-menu-items", + "pathFromRoot": "examples/09-ai/03-custom-ai-menu-items", + "config": { + "playground": true, + "docs": true, + "author": "matthewlipski", + "tags": [ + "AI", + "llm" + ], + "dependencies": { "@blocknote/xl-ai": "latest", "@mantine/core": "^8.3.4", - ai: "^5.0.45", + "ai": "^5.0.45", "react-icons": "^5.2.1", - zustand: "^5.0.3", - } as any, - }, - title: "Adding AI Menu Items", - group: { - pathFromRoot: "examples/09-ai", - slug: "ai", - }, - readme: - 'In this example, we add two items to the AI Menu. The first prompts the AI to make the selected text more casual, and can be found by selecting some text and click the AI (stars) button. The second prompts the AI to give ideas on related topics to extend the document with, and can be found by clicking the "Ask AI" Slash Menu item.\n\nSelect some text and click the AI (stars) button, or type `/ai` anywhere in the editor to access AI functionality.\n\n**Relevant Docs:**\n\n- [Getting Stared with BlockNote AI](/docs/features/ai/getting-started)\n- [Custom AI Menu Items](/docs/features/ai/custom-commands)', - }, - { - projectSlug: "with-collaboration", - fullSlug: "ai/with-collaboration", - pathFromRoot: "examples/09-ai/04-with-collaboration", - config: { - playground: true, - docs: false, - author: "nperez0111", - tags: ["AI", "llm"], - dependencies: { + "zustand": "^5.0.3" + } as any + }, + "title": "Adding AI Menu Items", + "group": { + "pathFromRoot": "examples/09-ai", + "slug": "ai" + }, + "readme": "In this example, we add two items to the AI Menu. The first prompts the AI to make the selected text more casual, and can be found by selecting some text and click the AI (stars) button. The second prompts the AI to give ideas on related topics to extend the document with, and can be found by clicking the \"Ask AI\" Slash Menu item.\n\nSelect some text and click the AI (stars) button, or type `/ai` anywhere in the editor to access AI functionality.\n\n**Relevant Docs:**\n\n- [Getting Stared with BlockNote AI](/docs/features/ai/getting-started)\n- [Custom AI Menu Items](/docs/features/ai/custom-commands)" + }, + { + "projectSlug": "with-collaboration", + "fullSlug": "ai/with-collaboration", + "pathFromRoot": "examples/09-ai/04-with-collaboration", + "config": { + "playground": true, + "docs": false, + "author": "nperez0111", + "tags": [ + "AI", + "llm" + ], + "dependencies": { "@blocknote/xl-ai": "latest", "@mantine/core": "^8.3.4", - ai: "^5.0.45", + "ai": "^5.0.45", "y-partykit": "^0.0.25", - yjs: "^13.6.27", - zustand: "^5.0.3", - } as any, - }, - title: "AI + Ghost Writer", - group: { - pathFromRoot: "examples/09-ai", - slug: "ai", - }, - readme: - "This example combines the AI extension with the ghost writer example to show how to use the AI extension in a collaborative environment.\n\n**Relevant Docs:**\n\n- [Editor Setup](/docs/getting-started/editor-setup)\n- [Changing the Formatting Toolbar](/docs/react/components/formatting-toolbar#changing-the-formatting-toolbar)\n- [Changing Slash Menu Items](/docs/react/components/suggestion-menus#changing-slash-menu-items)\n- [Getting Stared with BlockNote AI](/docs/features/ai/setup)", - }, - { - projectSlug: "manual-execution", - fullSlug: "ai/manual-execution", - pathFromRoot: "examples/09-ai/05-manual-execution", - config: { - playground: true, - docs: false, - author: "yousefed", - tags: ["AI", "llm"], - dependencies: { + "yjs": "^13.6.27", + "zustand": "^5.0.3" + } as any + }, + "title": "AI + Ghost Writer", + "group": { + "pathFromRoot": "examples/09-ai", + "slug": "ai" + }, + "readme": "This example combines the AI extension with the ghost writer example to show how to use the AI extension in a collaborative environment.\n\n**Relevant Docs:**\n\n- [Editor Setup](/docs/getting-started/editor-setup)\n- [Changing the Formatting Toolbar](/docs/react/components/formatting-toolbar#changing-the-formatting-toolbar)\n- [Changing Slash Menu Items](/docs/react/components/suggestion-menus#changing-slash-menu-items)\n- [Getting Stared with BlockNote AI](/docs/features/ai/setup)" + }, + { + "projectSlug": "manual-execution", + "fullSlug": "ai/manual-execution", + "pathFromRoot": "examples/09-ai/05-manual-execution", + "config": { + "playground": true, + "docs": false, + "author": "yousefed", + "tags": [ + "AI", + "llm" + ], + "dependencies": { "@blocknote/xl-ai": "latest", "@mantine/core": "^8.3.4", - ai: "^5.0.45", + "ai": "^5.0.45", "y-partykit": "^0.0.25", - yjs: "^13.6.27", - zustand: "^5.0.3", - } as any, - }, - title: "AI manual execution", - group: { - pathFromRoot: "examples/09-ai", - slug: "ai", - }, - readme: - "Instead of calling AI models directly, this example shows how you can use an existing stream of responses and apply them to the editor.", - }, - { - projectSlug: "client-side-transport", - fullSlug: "ai/client-side-transport", - pathFromRoot: "examples/09-ai/06-client-side-transport", - config: { - playground: true, - docs: true, - author: "yousefed", - tags: ["AI", "llm"], - dependencies: { + "yjs": "^13.6.27", + "zustand": "^5.0.3" + } as any + }, + "title": "AI manual execution", + "group": { + "pathFromRoot": "examples/09-ai", + "slug": "ai" + }, + "readme": "Instead of calling AI models directly, this example shows how you can use an existing stream of responses and apply them to the editor." + }, + { + "projectSlug": "client-side-transport", + "fullSlug": "ai/client-side-transport", + "pathFromRoot": "examples/09-ai/06-client-side-transport", + "config": { + "playground": true, + "docs": true, + "author": "yousefed", + "tags": [ + "AI", + "llm" + ], + "dependencies": { "@ai-sdk/groq": "^2.0.16", "@blocknote/xl-ai": "latest", "@mantine/core": "^8.3.4", - ai: "^5.0.45", - zustand: "^5.0.3", - } as any, - }, - title: "AI Integration with ClientSideTransport", - group: { - pathFromRoot: "examples/09-ai", - slug: "ai", - }, - readme: - "The standard setup is to have BlockNote AI call your server, which then calls an LLM of your choice. In this example, we show how you can use the `ClientSideTransport` to make calls directly to your LLM provider.\n\nTo hide API keys of our LLM provider, we do still route calls through a proxy server using `fetchViaProxy` (this is optional).", - }, - { - projectSlug: "server-promptbuilder", - fullSlug: "ai/server-promptbuilder", - pathFromRoot: "examples/09-ai/07-server-promptbuilder", - config: { - playground: true, - docs: false, - author: "yousefed", - tags: ["AI", "llm"], - dependencies: { + "ai": "^5.0.45", + "zustand": "^5.0.3" + } as any + }, + "title": "AI Integration with ClientSideTransport", + "group": { + "pathFromRoot": "examples/09-ai", + "slug": "ai" + }, + "readme": "The standard setup is to have BlockNote AI call your server, which then calls an LLM of your choice. In this example, we show how you can use the `ClientSideTransport` to make calls directly to your LLM provider.\n\nTo hide API keys of our LLM provider, we do still route calls through a proxy server using `fetchViaProxy` (this is optional)." + }, + { + "projectSlug": "server-promptbuilder", + "fullSlug": "ai/server-promptbuilder", + "pathFromRoot": "examples/09-ai/07-server-promptbuilder", + "config": { + "playground": true, + "docs": false, + "author": "yousefed", + "tags": [ + "AI", + "llm" + ], + "dependencies": { "@blocknote/xl-ai": "latest", "@mantine/core": "^8.3.4", - ai: "^5.0.45", - zustand: "^5.0.3", - } as any, - }, - title: "AI Integration with server LLM execution + promptbuilder", - group: { - pathFromRoot: "examples/09-ai", - slug: "ai", - }, - readme: - "This example shows how to setup to add AI integration while handling the LLM calls (in this case, using the Vercel AI SDK) on your server, using a custom executor.\n\nPrompt building is done on the server as well", - }, - ], + "ai": "^5.0.45", + "zustand": "^5.0.3" + } as any + }, + "title": "AI Integration with server LLM execution + promptbuilder", + "group": { + "pathFromRoot": "examples/09-ai", + "slug": "ai" + }, + "readme": "This example shows how to setup to add AI integration while handling the LLM calls (in this case, using the Vercel AI SDK) on your server, using a custom executor.\n\nPrompt building is done on the server as well" + } + ] }, "vanilla-js": { - pathFromRoot: "examples/vanilla-js", - slug: "vanilla-js", - projects: [ - { - projectSlug: "react-vanilla-custom-blocks", - fullSlug: "vanilla-js/react-vanilla-custom-blocks", - pathFromRoot: "examples/vanilla-js/react-vanilla-custom-blocks", - config: { - playground: true, - docs: false, - author: "matthewlipski", - tags: [], - }, - title: "Custom Blocks - Vanilla JS API", - group: { - pathFromRoot: "examples/vanilla-js", - slug: "vanilla-js", - }, - readme: "", - }, - { - projectSlug: "react-vanilla-custom-inline-content", - fullSlug: "vanilla-js/react-vanilla-custom-inline-content", - pathFromRoot: "examples/vanilla-js/react-vanilla-custom-inline-content", - config: { - playground: true, - docs: false, - author: "matthewlipski", - tags: [], - }, - title: "Custom Inline Content - Vanilla JS API", - group: { - pathFromRoot: "examples/vanilla-js", - slug: "vanilla-js", - }, - readme: "", - }, - { - projectSlug: "react-vanilla-custom-styles", - fullSlug: "vanilla-js/react-vanilla-custom-styles", - pathFromRoot: "examples/vanilla-js/react-vanilla-custom-styles", - config: { - playground: true, - docs: false, - author: "matthewlipski", - tags: [], - }, - title: "Custom Styles - Vanilla JS API", - group: { - pathFromRoot: "examples/vanilla-js", - slug: "vanilla-js", - }, - readme: "", - }, - ], - }, -}; + "pathFromRoot": "examples/vanilla-js", + "slug": "vanilla-js", + "projects": [ + { + "projectSlug": "react-vanilla-custom-blocks", + "fullSlug": "vanilla-js/react-vanilla-custom-blocks", + "pathFromRoot": "examples/vanilla-js/react-vanilla-custom-blocks", + "config": { + "playground": true, + "docs": false, + "author": "matthewlipski", + "tags": [] + }, + "title": "Custom Blocks - Vanilla JS API", + "group": { + "pathFromRoot": "examples/vanilla-js", + "slug": "vanilla-js" + }, + "readme": "" + }, + { + "projectSlug": "react-vanilla-custom-inline-content", + "fullSlug": "vanilla-js/react-vanilla-custom-inline-content", + "pathFromRoot": "examples/vanilla-js/react-vanilla-custom-inline-content", + "config": { + "playground": true, + "docs": false, + "author": "matthewlipski", + "tags": [] + }, + "title": "Custom Inline Content - Vanilla JS API", + "group": { + "pathFromRoot": "examples/vanilla-js", + "slug": "vanilla-js" + }, + "readme": "" + }, + { + "projectSlug": "react-vanilla-custom-styles", + "fullSlug": "vanilla-js/react-vanilla-custom-styles", + "pathFromRoot": "examples/vanilla-js/react-vanilla-custom-styles", + "config": { + "playground": true, + "docs": false, + "author": "matthewlipski", + "tags": [] + }, + "title": "Custom Styles - Vanilla JS API", + "group": { + "pathFromRoot": "examples/vanilla-js", + "slug": "vanilla-js" + }, + "readme": "" + } + ] + } +}; \ No newline at end of file From 28b5dae20fd52b968a824ca1b9fa0034497e464d Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Mon, 13 Oct 2025 18:39:04 +0200 Subject: [PATCH 2/7] Updated package lock --- pnpm-lock.yaml | 46 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 01a96da9da..f30d1bfbad 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1014,6 +1014,52 @@ importers: specifier: ^5.3.4 version: 5.4.15(@types/node@22.15.2)(lightningcss@1.30.1)(terser@5.44.0) + examples/01-basic/14-configuring-blocks: + dependencies: + '@blocknote/ariakit': + specifier: latest + version: link:../../../packages/ariakit + '@blocknote/core': + specifier: latest + version: link:../../../packages/core + '@blocknote/mantine': + specifier: latest + version: link:../../../packages/mantine + '@blocknote/react': + specifier: latest + version: link:../../../packages/react + '@blocknote/shadcn': + specifier: latest + version: link:../../../packages/shadcn + '@mantine/core': + specifier: ^8.3.4 + version: 8.3.4(@mantine/hooks@8.3.4(react@19.1.0))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) + '@mantine/hooks': + specifier: ^8.3.4 + version: 8.3.4(react@19.1.0) + '@mantine/utils': + specifier: ^6.0.22 + version: 6.0.22(react@19.1.0) + react: + specifier: ^19.1.0 + version: 19.1.0 + react-dom: + specifier: ^19.1.0 + version: 19.1.0(react@19.1.0) + devDependencies: + '@types/react': + specifier: ^19.1.0 + version: 19.1.8 + '@types/react-dom': + specifier: ^19.1.0 + version: 19.1.6(@types/react@19.1.8) + '@vitejs/plugin-react': + specifier: ^4.3.1 + version: 4.4.1(vite@5.4.15(@types/node@22.15.2)(lightningcss@1.30.1)(terser@5.44.0)) + vite: + specifier: ^5.3.4 + version: 5.4.15(@types/node@22.15.2)(lightningcss@1.30.1)(terser@5.44.0) + examples/01-basic/testing: dependencies: '@blocknote/ariakit': From 55c086b6d911538d32939ea1612d2f4f68c849cf Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Mon, 13 Oct 2025 18:39:28 +0200 Subject: [PATCH 3/7] Regenerated example files --- examples/01-basic/01-minimal/package.json | 2 +- examples/01-basic/02-block-objects/package.json | 2 +- examples/01-basic/03-multi-column/package.json | 2 +- examples/01-basic/04-default-blocks/package.json | 2 +- examples/01-basic/05-removing-default-blocks/package.json | 2 +- examples/01-basic/06-block-manipulation/package.json | 2 +- examples/01-basic/07-selection-blocks/package.json | 2 +- examples/01-basic/08-ariakit/package.json | 2 +- examples/01-basic/09-shadcn/package.json | 2 +- examples/01-basic/10-localization/package.json | 2 +- examples/01-basic/11-custom-placeholder/package.json | 2 +- examples/01-basic/12-multi-editor/package.json | 2 +- examples/01-basic/13-custom-paste-handler/package.json | 2 +- examples/01-basic/testing/package.json | 2 +- examples/02-backend/01-file-uploading/package.json | 2 +- examples/02-backend/02-saving-loading/package.json | 2 +- examples/02-backend/03-s3/package.json | 2 +- .../02-backend/04-rendering-static-documents/package.json | 2 +- examples/03-ui-components/01-ui-elements-remove/package.json | 2 +- .../02-formatting-toolbar-buttons/package.json | 2 +- .../03-formatting-toolbar-block-type-items/package.json | 2 +- examples/03-ui-components/04-side-menu-buttons/package.json | 2 +- .../05-side-menu-drag-handle-items/package.json | 2 +- .../06-suggestion-menus-slash-menu-items/package.json | 2 +- .../07-suggestion-menus-slash-menu-component/package.json | 2 +- .../08-suggestion-menus-emoji-picker-columns/package.json | 2 +- .../09-suggestion-menus-emoji-picker-component/package.json | 2 +- .../10-suggestion-menus-grid-mentions/package.json | 2 +- examples/03-ui-components/11-uppy-file-panel/package.json | 2 +- .../12-static-formatting-toolbar/package.json | 2 +- examples/03-ui-components/13-custom-ui/package.json | 2 +- .../14-experimental-mobile-formatting-toolbar/package.json | 2 +- examples/03-ui-components/15-advanced-tables/package.json | 2 +- .../03-ui-components/16-link-toolbar-buttons/package.json | 2 +- examples/03-ui-components/17-advanced-tables-2/package.json | 2 +- examples/04-theming/01-theming-dom-attributes/package.json | 2 +- examples/04-theming/02-changing-font/package.json | 2 +- examples/04-theming/03-theming-css/package.json | 2 +- examples/04-theming/04-theming-css-variables/package.json | 2 +- .../04-theming/05-theming-css-variables-code/package.json | 2 +- examples/04-theming/06-code-block/package.json | 2 +- examples/04-theming/07-custom-code-block/package.json | 4 ++-- .../01-converting-blocks-to-html/package.json | 2 +- .../02-converting-blocks-from-html/package.json | 2 +- .../03-converting-blocks-to-md/package.json | 2 +- .../04-converting-blocks-from-md/package.json | 2 +- .../05-converting-blocks-to-pdf/package.json | 2 +- .../06-converting-blocks-to-docx/package.json | 2 +- .../07-converting-blocks-to-odt/package.json | 2 +- .../08-converting-blocks-to-react-email/package.json | 2 +- examples/06-custom-schema/01-alert-block/package.json | 2 +- .../02-suggestion-menus-mentions/package.json | 2 +- examples/06-custom-schema/03-font-style/package.json | 2 +- examples/06-custom-schema/04-pdf-file-block/package.json | 2 +- examples/06-custom-schema/05-alert-block-full-ux/package.json | 2 +- examples/06-custom-schema/06-toggleable-blocks/package.json | 2 +- .../06-custom-schema/draggable-inline-content/package.json | 2 +- examples/06-custom-schema/react-custom-blocks/package.json | 2 +- .../06-custom-schema/react-custom-inline-content/package.json | 2 +- examples/06-custom-schema/react-custom-styles/package.json | 2 +- examples/07-collaboration/01-partykit/package.json | 2 +- examples/07-collaboration/02-liveblocks/package.json | 2 +- examples/07-collaboration/03-y-sweet/package.json | 2 +- examples/07-collaboration/04-electric-sql/package.json | 2 +- examples/07-collaboration/05-comments/package.json | 2 +- .../07-collaboration/06-comments-with-sidebar/package.json | 2 +- examples/07-collaboration/07-ghost-writer/package.json | 2 +- examples/07-collaboration/08-forking/package.json | 2 +- .../08-extensions/01-tiptap-arrow-conversion/package.json | 2 +- examples/09-ai/01-minimal/package.json | 2 +- examples/09-ai/02-playground/package.json | 2 +- examples/09-ai/03-custom-ai-menu-items/package.json | 2 +- examples/09-ai/04-with-collaboration/package.json | 2 +- examples/09-ai/05-manual-execution/package.json | 2 +- examples/09-ai/06-client-side-transport/package.json | 2 +- examples/09-ai/07-server-promptbuilder/package.json | 2 +- examples/vanilla-js/react-vanilla-custom-blocks/package.json | 2 +- .../react-vanilla-custom-inline-content/package.json | 2 +- examples/vanilla-js/react-vanilla-custom-styles/package.json | 2 +- 79 files changed, 80 insertions(+), 80 deletions(-) diff --git a/examples/01-basic/01-minimal/package.json b/examples/01-basic/01-minimal/package.json index a5587664fa..55f1708433 100644 --- a/examples/01-basic/01-minimal/package.json +++ b/examples/01-basic/01-minimal/package.json @@ -28,4 +28,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/01-basic/02-block-objects/package.json b/examples/01-basic/02-block-objects/package.json index db448522ce..b85767f648 100644 --- a/examples/01-basic/02-block-objects/package.json +++ b/examples/01-basic/02-block-objects/package.json @@ -28,4 +28,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/01-basic/03-multi-column/package.json b/examples/01-basic/03-multi-column/package.json index 17dccda528..6325d98509 100644 --- a/examples/01-basic/03-multi-column/package.json +++ b/examples/01-basic/03-multi-column/package.json @@ -29,4 +29,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/01-basic/04-default-blocks/package.json b/examples/01-basic/04-default-blocks/package.json index 9f52f1d047..9fa6079de5 100644 --- a/examples/01-basic/04-default-blocks/package.json +++ b/examples/01-basic/04-default-blocks/package.json @@ -28,4 +28,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/01-basic/05-removing-default-blocks/package.json b/examples/01-basic/05-removing-default-blocks/package.json index 22a74bfc9e..82670e93e3 100644 --- a/examples/01-basic/05-removing-default-blocks/package.json +++ b/examples/01-basic/05-removing-default-blocks/package.json @@ -28,4 +28,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/01-basic/06-block-manipulation/package.json b/examples/01-basic/06-block-manipulation/package.json index 327107e373..172018f16a 100644 --- a/examples/01-basic/06-block-manipulation/package.json +++ b/examples/01-basic/06-block-manipulation/package.json @@ -28,4 +28,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/01-basic/07-selection-blocks/package.json b/examples/01-basic/07-selection-blocks/package.json index 87a2fd49fc..3a9895da9c 100644 --- a/examples/01-basic/07-selection-blocks/package.json +++ b/examples/01-basic/07-selection-blocks/package.json @@ -28,4 +28,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/01-basic/08-ariakit/package.json b/examples/01-basic/08-ariakit/package.json index dd57b904b6..dae9fa1cb4 100644 --- a/examples/01-basic/08-ariakit/package.json +++ b/examples/01-basic/08-ariakit/package.json @@ -28,4 +28,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/01-basic/09-shadcn/package.json b/examples/01-basic/09-shadcn/package.json index 76f9ec8d77..bc313b8280 100644 --- a/examples/01-basic/09-shadcn/package.json +++ b/examples/01-basic/09-shadcn/package.json @@ -31,4 +31,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/01-basic/10-localization/package.json b/examples/01-basic/10-localization/package.json index 15d8a5d3fd..371e66ef52 100644 --- a/examples/01-basic/10-localization/package.json +++ b/examples/01-basic/10-localization/package.json @@ -28,4 +28,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/01-basic/11-custom-placeholder/package.json b/examples/01-basic/11-custom-placeholder/package.json index 44c7aff232..f075f51fcf 100644 --- a/examples/01-basic/11-custom-placeholder/package.json +++ b/examples/01-basic/11-custom-placeholder/package.json @@ -28,4 +28,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/01-basic/12-multi-editor/package.json b/examples/01-basic/12-multi-editor/package.json index 2371871d10..84951af20e 100644 --- a/examples/01-basic/12-multi-editor/package.json +++ b/examples/01-basic/12-multi-editor/package.json @@ -28,4 +28,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/01-basic/13-custom-paste-handler/package.json b/examples/01-basic/13-custom-paste-handler/package.json index cbc582c6e4..4a4bdf971e 100644 --- a/examples/01-basic/13-custom-paste-handler/package.json +++ b/examples/01-basic/13-custom-paste-handler/package.json @@ -28,4 +28,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/01-basic/testing/package.json b/examples/01-basic/testing/package.json index 0e0ecf1ffd..7dbe982b6d 100644 --- a/examples/01-basic/testing/package.json +++ b/examples/01-basic/testing/package.json @@ -28,4 +28,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/02-backend/01-file-uploading/package.json b/examples/02-backend/01-file-uploading/package.json index 815493fea1..10168fb193 100644 --- a/examples/02-backend/01-file-uploading/package.json +++ b/examples/02-backend/01-file-uploading/package.json @@ -28,4 +28,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/02-backend/02-saving-loading/package.json b/examples/02-backend/02-saving-loading/package.json index c28d0d343e..5315f46e05 100644 --- a/examples/02-backend/02-saving-loading/package.json +++ b/examples/02-backend/02-saving-loading/package.json @@ -28,4 +28,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/02-backend/03-s3/package.json b/examples/02-backend/03-s3/package.json index 1d3721f9de..ef3f03d825 100644 --- a/examples/02-backend/03-s3/package.json +++ b/examples/02-backend/03-s3/package.json @@ -30,4 +30,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/02-backend/04-rendering-static-documents/package.json b/examples/02-backend/04-rendering-static-documents/package.json index fd7863f446..4649140e22 100644 --- a/examples/02-backend/04-rendering-static-documents/package.json +++ b/examples/02-backend/04-rendering-static-documents/package.json @@ -29,4 +29,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/03-ui-components/01-ui-elements-remove/package.json b/examples/03-ui-components/01-ui-elements-remove/package.json index 4131e2b495..91dd917d33 100644 --- a/examples/03-ui-components/01-ui-elements-remove/package.json +++ b/examples/03-ui-components/01-ui-elements-remove/package.json @@ -28,4 +28,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/03-ui-components/02-formatting-toolbar-buttons/package.json b/examples/03-ui-components/02-formatting-toolbar-buttons/package.json index f11cea29e4..194785d079 100644 --- a/examples/03-ui-components/02-formatting-toolbar-buttons/package.json +++ b/examples/03-ui-components/02-formatting-toolbar-buttons/package.json @@ -28,4 +28,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/03-ui-components/03-formatting-toolbar-block-type-items/package.json b/examples/03-ui-components/03-formatting-toolbar-block-type-items/package.json index d5f111e964..7057e0aeb1 100644 --- a/examples/03-ui-components/03-formatting-toolbar-block-type-items/package.json +++ b/examples/03-ui-components/03-formatting-toolbar-block-type-items/package.json @@ -29,4 +29,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/03-ui-components/04-side-menu-buttons/package.json b/examples/03-ui-components/04-side-menu-buttons/package.json index 75961329ca..1afbdfab7f 100644 --- a/examples/03-ui-components/04-side-menu-buttons/package.json +++ b/examples/03-ui-components/04-side-menu-buttons/package.json @@ -29,4 +29,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/03-ui-components/05-side-menu-drag-handle-items/package.json b/examples/03-ui-components/05-side-menu-drag-handle-items/package.json index d5e793d03e..b9477a2df1 100644 --- a/examples/03-ui-components/05-side-menu-drag-handle-items/package.json +++ b/examples/03-ui-components/05-side-menu-drag-handle-items/package.json @@ -29,4 +29,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/03-ui-components/06-suggestion-menus-slash-menu-items/package.json b/examples/03-ui-components/06-suggestion-menus-slash-menu-items/package.json index 8f8211bbd7..d51469eaba 100644 --- a/examples/03-ui-components/06-suggestion-menus-slash-menu-items/package.json +++ b/examples/03-ui-components/06-suggestion-menus-slash-menu-items/package.json @@ -29,4 +29,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/03-ui-components/07-suggestion-menus-slash-menu-component/package.json b/examples/03-ui-components/07-suggestion-menus-slash-menu-component/package.json index fe5e56270e..8bd52c92f0 100644 --- a/examples/03-ui-components/07-suggestion-menus-slash-menu-component/package.json +++ b/examples/03-ui-components/07-suggestion-menus-slash-menu-component/package.json @@ -28,4 +28,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/03-ui-components/08-suggestion-menus-emoji-picker-columns/package.json b/examples/03-ui-components/08-suggestion-menus-emoji-picker-columns/package.json index 690ee28fb7..27784fed86 100644 --- a/examples/03-ui-components/08-suggestion-menus-emoji-picker-columns/package.json +++ b/examples/03-ui-components/08-suggestion-menus-emoji-picker-columns/package.json @@ -28,4 +28,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/03-ui-components/09-suggestion-menus-emoji-picker-component/package.json b/examples/03-ui-components/09-suggestion-menus-emoji-picker-component/package.json index efa3358002..4abb010d91 100644 --- a/examples/03-ui-components/09-suggestion-menus-emoji-picker-component/package.json +++ b/examples/03-ui-components/09-suggestion-menus-emoji-picker-component/package.json @@ -28,4 +28,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/03-ui-components/10-suggestion-menus-grid-mentions/package.json b/examples/03-ui-components/10-suggestion-menus-grid-mentions/package.json index 4015427ded..52bc6fd7d7 100644 --- a/examples/03-ui-components/10-suggestion-menus-grid-mentions/package.json +++ b/examples/03-ui-components/10-suggestion-menus-grid-mentions/package.json @@ -28,4 +28,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/03-ui-components/11-uppy-file-panel/package.json b/examples/03-ui-components/11-uppy-file-panel/package.json index 8cb13ef237..2e98d0df70 100644 --- a/examples/03-ui-components/11-uppy-file-panel/package.json +++ b/examples/03-ui-components/11-uppy-file-panel/package.json @@ -40,4 +40,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/03-ui-components/12-static-formatting-toolbar/package.json b/examples/03-ui-components/12-static-formatting-toolbar/package.json index 94b3ed3ea0..ca2be8dc1d 100644 --- a/examples/03-ui-components/12-static-formatting-toolbar/package.json +++ b/examples/03-ui-components/12-static-formatting-toolbar/package.json @@ -28,4 +28,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/03-ui-components/13-custom-ui/package.json b/examples/03-ui-components/13-custom-ui/package.json index 7984a938e7..3a9a094df6 100644 --- a/examples/03-ui-components/13-custom-ui/package.json +++ b/examples/03-ui-components/13-custom-ui/package.json @@ -32,4 +32,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/03-ui-components/14-experimental-mobile-formatting-toolbar/package.json b/examples/03-ui-components/14-experimental-mobile-formatting-toolbar/package.json index 5a2bb2b98b..2884272035 100644 --- a/examples/03-ui-components/14-experimental-mobile-formatting-toolbar/package.json +++ b/examples/03-ui-components/14-experimental-mobile-formatting-toolbar/package.json @@ -28,4 +28,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/03-ui-components/15-advanced-tables/package.json b/examples/03-ui-components/15-advanced-tables/package.json index a59221667d..0c7dd7415f 100644 --- a/examples/03-ui-components/15-advanced-tables/package.json +++ b/examples/03-ui-components/15-advanced-tables/package.json @@ -28,4 +28,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/03-ui-components/16-link-toolbar-buttons/package.json b/examples/03-ui-components/16-link-toolbar-buttons/package.json index 72c024313d..f1decfe330 100644 --- a/examples/03-ui-components/16-link-toolbar-buttons/package.json +++ b/examples/03-ui-components/16-link-toolbar-buttons/package.json @@ -28,4 +28,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/03-ui-components/17-advanced-tables-2/package.json b/examples/03-ui-components/17-advanced-tables-2/package.json index f0ac5db99f..606e9ebd59 100644 --- a/examples/03-ui-components/17-advanced-tables-2/package.json +++ b/examples/03-ui-components/17-advanced-tables-2/package.json @@ -28,4 +28,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/04-theming/01-theming-dom-attributes/package.json b/examples/04-theming/01-theming-dom-attributes/package.json index 6583f46fca..22b0388aa7 100644 --- a/examples/04-theming/01-theming-dom-attributes/package.json +++ b/examples/04-theming/01-theming-dom-attributes/package.json @@ -28,4 +28,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/04-theming/02-changing-font/package.json b/examples/04-theming/02-changing-font/package.json index 26ef101636..28cf430851 100644 --- a/examples/04-theming/02-changing-font/package.json +++ b/examples/04-theming/02-changing-font/package.json @@ -28,4 +28,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/04-theming/03-theming-css/package.json b/examples/04-theming/03-theming-css/package.json index cf5ef374f9..10e76f2928 100644 --- a/examples/04-theming/03-theming-css/package.json +++ b/examples/04-theming/03-theming-css/package.json @@ -28,4 +28,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/04-theming/04-theming-css-variables/package.json b/examples/04-theming/04-theming-css-variables/package.json index 2293089147..526b7d0f9d 100644 --- a/examples/04-theming/04-theming-css-variables/package.json +++ b/examples/04-theming/04-theming-css-variables/package.json @@ -28,4 +28,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/04-theming/05-theming-css-variables-code/package.json b/examples/04-theming/05-theming-css-variables-code/package.json index 35eb09652d..840f0b502c 100644 --- a/examples/04-theming/05-theming-css-variables-code/package.json +++ b/examples/04-theming/05-theming-css-variables-code/package.json @@ -28,4 +28,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/04-theming/06-code-block/package.json b/examples/04-theming/06-code-block/package.json index 3a23269493..060fafc9f2 100644 --- a/examples/04-theming/06-code-block/package.json +++ b/examples/04-theming/06-code-block/package.json @@ -29,4 +29,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/04-theming/07-custom-code-block/package.json b/examples/04-theming/07-custom-code-block/package.json index 8e1ad439af..027b3ba5f8 100644 --- a/examples/04-theming/07-custom-code-block/package.json +++ b/examples/04-theming/07-custom-code-block/package.json @@ -22,7 +22,7 @@ "react": "^19.1.0", "react-dom": "^19.1.0", "@blocknote/code-block": "latest", - "@shikijs/types": "^3.13.0", + "@shikijs/types": "^3.2.1", "@shikijs/core": "^3.2.1", "@shikijs/engine-javascript": "^3.2.1", "@shikijs/langs-precompiled": "^3.2.1", @@ -34,4 +34,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/05-interoperability/01-converting-blocks-to-html/package.json b/examples/05-interoperability/01-converting-blocks-to-html/package.json index f0c145afa7..00ff1d58ef 100644 --- a/examples/05-interoperability/01-converting-blocks-to-html/package.json +++ b/examples/05-interoperability/01-converting-blocks-to-html/package.json @@ -28,4 +28,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/05-interoperability/02-converting-blocks-from-html/package.json b/examples/05-interoperability/02-converting-blocks-from-html/package.json index cdb28a2071..4a8bba899e 100644 --- a/examples/05-interoperability/02-converting-blocks-from-html/package.json +++ b/examples/05-interoperability/02-converting-blocks-from-html/package.json @@ -28,4 +28,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/05-interoperability/03-converting-blocks-to-md/package.json b/examples/05-interoperability/03-converting-blocks-to-md/package.json index 1f5e6850ea..6a5fc20527 100644 --- a/examples/05-interoperability/03-converting-blocks-to-md/package.json +++ b/examples/05-interoperability/03-converting-blocks-to-md/package.json @@ -28,4 +28,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/05-interoperability/04-converting-blocks-from-md/package.json b/examples/05-interoperability/04-converting-blocks-from-md/package.json index cd7a0a094a..713a51c2f4 100644 --- a/examples/05-interoperability/04-converting-blocks-from-md/package.json +++ b/examples/05-interoperability/04-converting-blocks-from-md/package.json @@ -28,4 +28,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/05-interoperability/05-converting-blocks-to-pdf/package.json b/examples/05-interoperability/05-converting-blocks-to-pdf/package.json index a8886d0e08..0427332d05 100644 --- a/examples/05-interoperability/05-converting-blocks-to-pdf/package.json +++ b/examples/05-interoperability/05-converting-blocks-to-pdf/package.json @@ -31,4 +31,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/05-interoperability/06-converting-blocks-to-docx/package.json b/examples/05-interoperability/06-converting-blocks-to-docx/package.json index d45050c289..6b3d45ef02 100644 --- a/examples/05-interoperability/06-converting-blocks-to-docx/package.json +++ b/examples/05-interoperability/06-converting-blocks-to-docx/package.json @@ -31,4 +31,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/05-interoperability/07-converting-blocks-to-odt/package.json b/examples/05-interoperability/07-converting-blocks-to-odt/package.json index 2cebd33385..efd544f877 100644 --- a/examples/05-interoperability/07-converting-blocks-to-odt/package.json +++ b/examples/05-interoperability/07-converting-blocks-to-odt/package.json @@ -30,4 +30,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/05-interoperability/08-converting-blocks-to-react-email/package.json b/examples/05-interoperability/08-converting-blocks-to-react-email/package.json index 183882baf4..9afa1cb184 100644 --- a/examples/05-interoperability/08-converting-blocks-to-react-email/package.json +++ b/examples/05-interoperability/08-converting-blocks-to-react-email/package.json @@ -30,4 +30,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/06-custom-schema/01-alert-block/package.json b/examples/06-custom-schema/01-alert-block/package.json index 6ed43c4d79..40c8951181 100644 --- a/examples/06-custom-schema/01-alert-block/package.json +++ b/examples/06-custom-schema/01-alert-block/package.json @@ -29,4 +29,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/06-custom-schema/02-suggestion-menus-mentions/package.json b/examples/06-custom-schema/02-suggestion-menus-mentions/package.json index 67460161f0..7104e1e3af 100644 --- a/examples/06-custom-schema/02-suggestion-menus-mentions/package.json +++ b/examples/06-custom-schema/02-suggestion-menus-mentions/package.json @@ -28,4 +28,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/06-custom-schema/03-font-style/package.json b/examples/06-custom-schema/03-font-style/package.json index 9c8393ade2..398f4ab300 100644 --- a/examples/06-custom-schema/03-font-style/package.json +++ b/examples/06-custom-schema/03-font-style/package.json @@ -29,4 +29,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/06-custom-schema/04-pdf-file-block/package.json b/examples/06-custom-schema/04-pdf-file-block/package.json index f44804938b..37261d07c3 100644 --- a/examples/06-custom-schema/04-pdf-file-block/package.json +++ b/examples/06-custom-schema/04-pdf-file-block/package.json @@ -29,4 +29,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/06-custom-schema/05-alert-block-full-ux/package.json b/examples/06-custom-schema/05-alert-block-full-ux/package.json index 832ef91e3d..693be812c3 100644 --- a/examples/06-custom-schema/05-alert-block-full-ux/package.json +++ b/examples/06-custom-schema/05-alert-block-full-ux/package.json @@ -29,4 +29,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/06-custom-schema/06-toggleable-blocks/package.json b/examples/06-custom-schema/06-toggleable-blocks/package.json index 2d0e478002..950ddbc597 100644 --- a/examples/06-custom-schema/06-toggleable-blocks/package.json +++ b/examples/06-custom-schema/06-toggleable-blocks/package.json @@ -28,4 +28,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/06-custom-schema/draggable-inline-content/package.json b/examples/06-custom-schema/draggable-inline-content/package.json index e10ef77ef4..52ee19346e 100644 --- a/examples/06-custom-schema/draggable-inline-content/package.json +++ b/examples/06-custom-schema/draggable-inline-content/package.json @@ -28,4 +28,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/06-custom-schema/react-custom-blocks/package.json b/examples/06-custom-schema/react-custom-blocks/package.json index 75191f6872..7de4ff6d3a 100644 --- a/examples/06-custom-schema/react-custom-blocks/package.json +++ b/examples/06-custom-schema/react-custom-blocks/package.json @@ -28,4 +28,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/06-custom-schema/react-custom-inline-content/package.json b/examples/06-custom-schema/react-custom-inline-content/package.json index 69602dc891..43c6df97d0 100644 --- a/examples/06-custom-schema/react-custom-inline-content/package.json +++ b/examples/06-custom-schema/react-custom-inline-content/package.json @@ -28,4 +28,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/06-custom-schema/react-custom-styles/package.json b/examples/06-custom-schema/react-custom-styles/package.json index 6f2af9bc7b..0f3fbcbe8f 100644 --- a/examples/06-custom-schema/react-custom-styles/package.json +++ b/examples/06-custom-schema/react-custom-styles/package.json @@ -28,4 +28,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/07-collaboration/01-partykit/package.json b/examples/07-collaboration/01-partykit/package.json index adfa77b583..1fd98ac744 100644 --- a/examples/07-collaboration/01-partykit/package.json +++ b/examples/07-collaboration/01-partykit/package.json @@ -30,4 +30,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/07-collaboration/02-liveblocks/package.json b/examples/07-collaboration/02-liveblocks/package.json index 5765f1a1c0..2e2610c8dc 100644 --- a/examples/07-collaboration/02-liveblocks/package.json +++ b/examples/07-collaboration/02-liveblocks/package.json @@ -34,4 +34,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/07-collaboration/03-y-sweet/package.json b/examples/07-collaboration/03-y-sweet/package.json index f72cf7cc8c..d009983711 100644 --- a/examples/07-collaboration/03-y-sweet/package.json +++ b/examples/07-collaboration/03-y-sweet/package.json @@ -29,4 +29,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/07-collaboration/04-electric-sql/package.json b/examples/07-collaboration/04-electric-sql/package.json index 17812ae5d2..f7af4aa9a1 100644 --- a/examples/07-collaboration/04-electric-sql/package.json +++ b/examples/07-collaboration/04-electric-sql/package.json @@ -28,4 +28,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/07-collaboration/05-comments/package.json b/examples/07-collaboration/05-comments/package.json index c753d61acb..12e37e484b 100644 --- a/examples/07-collaboration/05-comments/package.json +++ b/examples/07-collaboration/05-comments/package.json @@ -29,4 +29,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/07-collaboration/06-comments-with-sidebar/package.json b/examples/07-collaboration/06-comments-with-sidebar/package.json index 938cf18bea..e51b43fbef 100644 --- a/examples/07-collaboration/06-comments-with-sidebar/package.json +++ b/examples/07-collaboration/06-comments-with-sidebar/package.json @@ -29,4 +29,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/07-collaboration/07-ghost-writer/package.json b/examples/07-collaboration/07-ghost-writer/package.json index 184232e240..272d257dd4 100644 --- a/examples/07-collaboration/07-ghost-writer/package.json +++ b/examples/07-collaboration/07-ghost-writer/package.json @@ -30,4 +30,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/07-collaboration/08-forking/package.json b/examples/07-collaboration/08-forking/package.json index 72aeaa6010..b0ebe88b86 100644 --- a/examples/07-collaboration/08-forking/package.json +++ b/examples/07-collaboration/08-forking/package.json @@ -30,4 +30,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/08-extensions/01-tiptap-arrow-conversion/package.json b/examples/08-extensions/01-tiptap-arrow-conversion/package.json index 1867e47262..c7ad8efa2a 100644 --- a/examples/08-extensions/01-tiptap-arrow-conversion/package.json +++ b/examples/08-extensions/01-tiptap-arrow-conversion/package.json @@ -29,4 +29,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/09-ai/01-minimal/package.json b/examples/09-ai/01-minimal/package.json index 6cc7f7872c..dcb9350c9d 100644 --- a/examples/09-ai/01-minimal/package.json +++ b/examples/09-ai/01-minimal/package.json @@ -31,4 +31,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/09-ai/02-playground/package.json b/examples/09-ai/02-playground/package.json index 18a6910412..813f59df1a 100644 --- a/examples/09-ai/02-playground/package.json +++ b/examples/09-ai/02-playground/package.json @@ -31,4 +31,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/09-ai/03-custom-ai-menu-items/package.json b/examples/09-ai/03-custom-ai-menu-items/package.json index 8a77c0549b..de8cbfc64d 100644 --- a/examples/09-ai/03-custom-ai-menu-items/package.json +++ b/examples/09-ai/03-custom-ai-menu-items/package.json @@ -32,4 +32,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/09-ai/04-with-collaboration/package.json b/examples/09-ai/04-with-collaboration/package.json index 8328d5c2e0..b1b1c207aa 100644 --- a/examples/09-ai/04-with-collaboration/package.json +++ b/examples/09-ai/04-with-collaboration/package.json @@ -33,4 +33,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/09-ai/05-manual-execution/package.json b/examples/09-ai/05-manual-execution/package.json index 2c34c59455..b92f6c8a58 100644 --- a/examples/09-ai/05-manual-execution/package.json +++ b/examples/09-ai/05-manual-execution/package.json @@ -33,4 +33,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/09-ai/06-client-side-transport/package.json b/examples/09-ai/06-client-side-transport/package.json index a2934b9f44..b6ed7db6da 100644 --- a/examples/09-ai/06-client-side-transport/package.json +++ b/examples/09-ai/06-client-side-transport/package.json @@ -32,4 +32,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/09-ai/07-server-promptbuilder/package.json b/examples/09-ai/07-server-promptbuilder/package.json index d096fdd456..c0d53881e3 100644 --- a/examples/09-ai/07-server-promptbuilder/package.json +++ b/examples/09-ai/07-server-promptbuilder/package.json @@ -31,4 +31,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/vanilla-js/react-vanilla-custom-blocks/package.json b/examples/vanilla-js/react-vanilla-custom-blocks/package.json index 54ac1d5268..56c9c9c40d 100644 --- a/examples/vanilla-js/react-vanilla-custom-blocks/package.json +++ b/examples/vanilla-js/react-vanilla-custom-blocks/package.json @@ -28,4 +28,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/vanilla-js/react-vanilla-custom-inline-content/package.json b/examples/vanilla-js/react-vanilla-custom-inline-content/package.json index d4acea1f2c..6665b60a32 100644 --- a/examples/vanilla-js/react-vanilla-custom-inline-content/package.json +++ b/examples/vanilla-js/react-vanilla-custom-inline-content/package.json @@ -28,4 +28,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file diff --git a/examples/vanilla-js/react-vanilla-custom-styles/package.json b/examples/vanilla-js/react-vanilla-custom-styles/package.json index 7da889171f..28490f758e 100644 --- a/examples/vanilla-js/react-vanilla-custom-styles/package.json +++ b/examples/vanilla-js/react-vanilla-custom-styles/package.json @@ -28,4 +28,4 @@ "@vitejs/plugin-react": "^4.3.1", "vite": "^5.3.4" } -} +} \ No newline at end of file From 703990cdcd35360ee3548e3ebe966c516f0d00c4 Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Mon, 13 Oct 2025 19:44:02 +0200 Subject: [PATCH 4/7] Updated docs --- .../docs/features/blocks/code-blocks.mdx | 56 +++++++++++-------- docs/content/docs/features/blocks/embeds.mdx | 28 ++++++++++ docs/content/docs/features/blocks/index.mdx | 32 ++++++++++- .../docs/features/blocks/typography.mdx | 16 ++++++ 4 files changed, 107 insertions(+), 25 deletions(-) diff --git a/docs/content/docs/features/blocks/code-blocks.mdx b/docs/content/docs/features/blocks/code-blocks.mdx index 78038aa692..4236c40d0e 100644 --- a/docs/content/docs/features/blocks/code-blocks.mdx +++ b/docs/content/docs/features/blocks/code-blocks.mdx @@ -17,38 +17,46 @@ Code blocks by default are a simple way to display code. But, BlockNote also sup These features are disabled by default to keep the default code block - experience easy to use and reduce bundle size. + experience easy to use and reduce bundle size. The can be individually added + when [configuring the + block](/docs/features/blocks#configuring-default-blocks). -You can enable more advanced features by extending the editor's default schema with a new `codeBlock`, which you can pass options into when creating. For more on extending the editor schema, see [Custom Schemas](/docs/features/custom-schemas). +**Configuration Options** ```ts -const editor = new BlockNoteEditor({ - schema: BlockNoteSchema.create().extend({ - codeBlock: createCodeBlockSpec({ - indentLineWithTab: true, - defaultLanguage: "typescript", - supportedLanguages: { - typescript: { - name: "TypeScript", - aliases: ["ts"], - }, - }, - createHighlighter: () => - createHighlighter({ - themes: ["light-plus", "dark-plus"], - langs: [], - }), - }), - }), -}); +type CodeBlockOptions = { + indentLineWithTab?: boolean; + defaultLanguage?: string; + supportedLanguages?: Record< + string, + { + name: string; + aliases?: string[]; + } + >; + createHighlighter?: () => Promise>; +}; ``` -You can choose to enable only certain features, or none at all. Giving you the flexibility to use code blocks how you need in your app. +`indentLineWithTab:` Whether the Tab key should indent lines, or be handled by the editor's default key handlers. Defaults to `true`. + +`defaultLanguage:` The syntax highlighting default language for code blocks which are created/inserted without a set language, which is `text` by default (no syntax highlighting). + +`supportedLanguages:` The syntax highlighting languages supported by the code block, or an empty array by default. + +`createHighlighter:` The Shiki highliter to use for syntax highlighting. -## Block Shape +BlockNote also provides a generic set of options for syntax highlighting in the `@blocknote/code-block` package, which support a wide range of languages: + +```ts +import { createCodeBlockSpec } from "@blocknote/core"; +import { codeBlockOptions } from "@blocknote/code-block"; + +const codeBlock = createCodeBlockSpec(codeBlockOptions); +``` -This describes the shape of a code block in BlockNote. +**Type & Props** ```ts type CodeBlock = { diff --git a/docs/content/docs/features/blocks/embeds.mdx b/docs/content/docs/features/blocks/embeds.mdx index 7f5a19bc76..c363cac714 100644 --- a/docs/content/docs/features/blocks/embeds.mdx +++ b/docs/content/docs/features/blocks/embeds.mdx @@ -38,6 +38,14 @@ type FileBlock = { An image block is a block that displays an image. +```ts +type ImageBlockOptions = { + icon?: string; +}; +``` + +`icon:` The HTML string for an icon SVG. If no URL is given, the image block displays a button to add one using a link or file, and the provided SVG replaces the generic file icon in that button. + **Type & Props** ```typescript @@ -64,8 +72,18 @@ type ImageBlock = { ## Video +**Configuration Options** + A video block is a block that displays a video. +```ts +type VideoBlockOptions = { + icon?: string; +}; +``` + +`icon:` The HTML string for an icon SVG. If no URL is given, the video block displays a button to add one using a link or file, and the provided SVG replaces the generic file icon in that button. + **Type & Props** ```ts @@ -98,6 +116,16 @@ type VideoBlock = { An audio block is a block that displays an audio file. +**Configuration Options** + +```ts +type AudioBlockOptions = { + icon?: string; +}; +``` + +`icon:` The HTML string for an icon SVG. If no URL is given, the audio block displays a button to add one using a link or file, and the provided SVG replaces the generic file icon in that button. + **Type & Props** ```ts diff --git a/docs/content/docs/features/blocks/index.mdx b/docs/content/docs/features/blocks/index.mdx index df23167e94..1f342c74bb 100644 --- a/docs/content/docs/features/blocks/index.mdx +++ b/docs/content/docs/features/blocks/index.mdx @@ -12,7 +12,7 @@ The demo below showcases each of BlockNote's built-in block and inline content t -### Default Block Properties +## Default Block Properties There are some default block props that BlockNote uses for the built-in blocks: @@ -36,6 +36,36 @@ type DefaultProps = { }; ``` +## Configuring Default Blocks + +Some default blocks can be configured with options. For example, headings can be configured to have different available levels: + +```ts +// Creates a new instance of the default heading block. +const heading = createHeadingBlockSpec({ + // Sets the block to support only heading levels 1-3. + levels: [1, 2, 3], +}); +``` + +Each default block type can be instantiated using their respective `create...BlockSpec` function. If the block can be configured, i.e. if it has options, you can pass them in an object to the function. To see which options each block type supports, read on to the next pages. + +To add your configured block to the editor, you must pass in a [custom schema](/docs/features/custom-schemas) with it. The simplest way to do this is by [extending the default schema](/docs/features/custom-schemas#extending-an-existing-schema): + +```ts +const editor = useCreateBlockNote({ + // Creates a default schema and extends it with the configured heading block. + schema: BlockNoteSchema.create().extend({ + blockSpecs: { + heading: createHeadingBlockSpec({ + // Sets the allowed heading levels. + levels: [1, 2, 3], + }), + }, + }), +}); +``` + ## Explore diff --git a/docs/content/docs/features/blocks/typography.mdx b/docs/content/docs/features/blocks/typography.mdx index 7f690f767d..c88ecb0093 100644 --- a/docs/content/docs/features/blocks/typography.mdx +++ b/docs/content/docs/features/blocks/typography.mdx @@ -24,6 +24,22 @@ type ParagraphBlock = { ## Heading +**Configuration Options** + +```typescript +type HeadingBlockOptions = Partial<{ + defaultLevel?: number; + levels?: number[]; + allowToggleHeadings?: boolean; +}>; +``` + +`defaultLevel:` The default level for headings which are created/inserted without a set level, which is `1` by default. + +`levels:` The heading levels that the block supports, or '1'-'6' by default. + +`allowToggleHeadings:` Whether toggle headings should be supported, `true` by default. Toggle headings have a button which toggles between hiding and showing the block's children. + **Type & Props** ```typescript From 7b9c2949d38ae8fe18f234601dea894566680016 Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Mon, 13 Oct 2025 19:58:49 +0200 Subject: [PATCH 5/7] Docs fixes --- .../docs/features/blocks/code-blocks.mdx | 46 ++------- docs/content/docs/features/blocks/embeds.mdx | 8 +- docs/content/docs/features/blocks/index.mdx | 2 + docs/package.json | 4 +- pnpm-lock.yaml | 96 +++++++++---------- 5 files changed, 61 insertions(+), 95 deletions(-) diff --git a/docs/content/docs/features/blocks/code-blocks.mdx b/docs/content/docs/features/blocks/code-blocks.mdx index 4236c40d0e..029118445b 100644 --- a/docs/content/docs/features/blocks/code-blocks.mdx +++ b/docs/content/docs/features/blocks/code-blocks.mdx @@ -17,7 +17,7 @@ Code blocks by default are a simple way to display code. But, BlockNote also sup These features are disabled by default to keep the default code block - experience easy to use and reduce bundle size. The can be individually added + experience easy to use and reduce bundle size. They can be individually added when [configuring the block](/docs/features/blocks#configuring-default-blocks). @@ -45,7 +45,7 @@ type CodeBlockOptions = { `supportedLanguages:` The syntax highlighting languages supported by the code block, or an empty array by default. -`createHighlighter:` The Shiki highliter to use for syntax highlighting. +`createHighlighter:` The [Shiki](https://shiki.style) highliter to use for syntax highlighting. BlockNote also provides a generic set of options for syntax highlighting in the `@blocknote/code-block` package, which support a wide range of languages: @@ -56,6 +56,8 @@ import { codeBlockOptions } from "@blocknote/code-block"; const codeBlock = createCodeBlockSpec(codeBlockOptions); ``` +See [this example](/examples/theming/code-block) to see it in action. + **Type & Props** ```ts @@ -70,45 +72,13 @@ type CodeBlock = { }; ``` -## Options - -### Basic Setup - -To enable code block syntax highlighting, you can extend the editor's default schema with a new `codeBlock`. - -First, install the package: - -```sh -npm install @blocknote/code-block -``` - -Then use it like this: - -```tsx -import { codeBlockOptions } from "@blocknote/code-block"; - -export default function App() { - const editor = useCreateBlockNote({ - schema: BlockNoteSchema.create().extend({ - codeBlock: createCodeBlockSpec(codeBlockOptions), - }), - }); - - return ; -} -``` - -This will extend the default schema with a custom `codeBlock` that includes options from `@blocknote/code-block`, enabling syntax highlighting. - -### Custom Themes & Languages - -To configure a code block highlighting theme and language, you can again extend the editor's default schema with a new `codeBlock`. +`language:` The syntax highlighting language to use. Defaults to `text`, which has no highlighting. -This allows you to configure a [shiki](https://shiki.style) highlighter for the code blocks of your editor, allowing you to tailor the themes and languages you would like to use. +## Custom Syntax Highlighting -To create a syntax highlighter, you can use the [shiki-codegen](https://shiki.style/packages/codegen) CLI for generating the code to create a syntax highlighter for your languages and themes. +To create your own syntax highlighter, you can use the [shiki-codegen](https://shiki.style/packages/codegen) CLI for generating the code to create one for your chosen languages and themes. -For example to create a syntax highlighter using the optimized javascript engine, javascript, typescript, vue, with light and dark themes, you can run the following command: +For example, to create a syntax highlighter using the optimized javascript engine, javascript, typescript, vue, with light and dark themes, you can run the following command: ```bash npx shiki-codegen --langs javascript,typescript,vue --themes light,dark --engine javascript --precompiled ./shiki.bundle.ts diff --git a/docs/content/docs/features/blocks/embeds.mdx b/docs/content/docs/features/blocks/embeds.mdx index c363cac714..4845cca191 100644 --- a/docs/content/docs/features/blocks/embeds.mdx +++ b/docs/content/docs/features/blocks/embeds.mdx @@ -10,8 +10,6 @@ Embeds are a way to display content from external sources in your documents. Blo ## File -A file block is a block that displays a file. - **Type & Props** ```ts @@ -36,7 +34,7 @@ type FileBlock = { ## Image -An image block is a block that displays an image. +**Configuration Options** ```ts type ImageBlockOptions = { @@ -74,8 +72,6 @@ type ImageBlock = { **Configuration Options** -A video block is a block that displays a video. - ```ts type VideoBlockOptions = { icon?: string; @@ -114,8 +110,6 @@ type VideoBlock = { ## Audio -An audio block is a block that displays an audio file. - **Configuration Options** ```ts diff --git a/docs/content/docs/features/blocks/index.mdx b/docs/content/docs/features/blocks/index.mdx index 1f342c74bb..18c25bba5a 100644 --- a/docs/content/docs/features/blocks/index.mdx +++ b/docs/content/docs/features/blocks/index.mdx @@ -66,6 +66,8 @@ const editor = useCreateBlockNote({ }); ``` +You can see this in action in a working demo [here](/examples/custom-schema/configuring-blocks). + ## Explore diff --git a/docs/package.json b/docs/package.json index ea6e879688..33e04732df 100644 --- a/docs/package.json +++ b/docs/package.json @@ -55,7 +55,7 @@ "@shikijs/engine-javascript": "^3.2.1", "@shikijs/langs-precompiled": "^3.2.1", "@shikijs/themes": "^3.2.1", - "@shikijs/types": "^3.13.0", + "@shikijs/types": "^3.2.1", "@tiptap/core": "^3.4.3", "@uppy/core": "^3.13.1", "@uppy/dashboard": "^3.9.1", @@ -142,4 +142,4 @@ "y-partykit": "^0.0.33", "yjs": "^13.6.27" } -} +} \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f30d1bfbad..316744c761 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -190,7 +190,7 @@ importers: specifier: ^3.2.1 version: 3.7.0 '@shikijs/types': - specifier: ^3.13.0 + specifier: ^3.2.1 version: 3.13.0 '@tiptap/core': specifier: https://pkg.pr.new/@tiptap/core@5e777c9 @@ -1014,52 +1014,6 @@ importers: specifier: ^5.3.4 version: 5.4.15(@types/node@22.15.2)(lightningcss@1.30.1)(terser@5.44.0) - examples/01-basic/14-configuring-blocks: - dependencies: - '@blocknote/ariakit': - specifier: latest - version: link:../../../packages/ariakit - '@blocknote/core': - specifier: latest - version: link:../../../packages/core - '@blocknote/mantine': - specifier: latest - version: link:../../../packages/mantine - '@blocknote/react': - specifier: latest - version: link:../../../packages/react - '@blocknote/shadcn': - specifier: latest - version: link:../../../packages/shadcn - '@mantine/core': - specifier: ^8.3.4 - version: 8.3.4(@mantine/hooks@8.3.4(react@19.1.0))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) - '@mantine/hooks': - specifier: ^8.3.4 - version: 8.3.4(react@19.1.0) - '@mantine/utils': - specifier: ^6.0.22 - version: 6.0.22(react@19.1.0) - react: - specifier: ^19.1.0 - version: 19.1.0 - react-dom: - specifier: ^19.1.0 - version: 19.1.0(react@19.1.0) - devDependencies: - '@types/react': - specifier: ^19.1.0 - version: 19.1.8 - '@types/react-dom': - specifier: ^19.1.0 - version: 19.1.6(@types/react@19.1.8) - '@vitejs/plugin-react': - specifier: ^4.3.1 - version: 4.4.1(vite@5.4.15(@types/node@22.15.2)(lightningcss@1.30.1)(terser@5.44.0)) - vite: - specifier: ^5.3.4 - version: 5.4.15(@types/node@22.15.2)(lightningcss@1.30.1)(terser@5.44.0) - examples/01-basic/testing: dependencies: '@blocknote/ariakit': @@ -2462,7 +2416,7 @@ importers: specifier: ^3.2.1 version: 3.2.1 '@shikijs/types': - specifier: ^3.13.0 + specifier: ^3.2.1 version: 3.13.0 react: specifier: ^19.1.0 @@ -3170,6 +3124,52 @@ importers: specifier: ^5.3.4 version: 5.4.15(@types/node@22.15.2)(lightningcss@1.30.1)(terser@5.44.0) + examples/06-custom-schema/07-configuring-blocks: + dependencies: + '@blocknote/ariakit': + specifier: latest + version: link:../../../packages/ariakit + '@blocknote/core': + specifier: latest + version: link:../../../packages/core + '@blocknote/mantine': + specifier: latest + version: link:../../../packages/mantine + '@blocknote/react': + specifier: latest + version: link:../../../packages/react + '@blocknote/shadcn': + specifier: latest + version: link:../../../packages/shadcn + '@mantine/core': + specifier: ^8.3.4 + version: 8.3.4(@mantine/hooks@8.3.4(react@19.1.0))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) + '@mantine/hooks': + specifier: ^8.3.4 + version: 8.3.4(react@19.1.0) + '@mantine/utils': + specifier: ^6.0.22 + version: 6.0.22(react@19.1.0) + react: + specifier: ^19.1.0 + version: 19.1.0 + react-dom: + specifier: ^19.1.0 + version: 19.1.0(react@19.1.0) + devDependencies: + '@types/react': + specifier: ^19.1.0 + version: 19.1.8 + '@types/react-dom': + specifier: ^19.1.0 + version: 19.1.6(@types/react@19.1.8) + '@vitejs/plugin-react': + specifier: ^4.3.1 + version: 4.4.1(vite@5.4.15(@types/node@22.15.2)(lightningcss@1.30.1)(terser@5.44.0)) + vite: + specifier: ^5.3.4 + version: 5.4.15(@types/node@22.15.2)(lightningcss@1.30.1)(terser@5.44.0) + examples/06-custom-schema/draggable-inline-content: dependencies: '@blocknote/ariakit': From 71eddd82a09242f836c4c392f4afe7deb7e1c655 Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Mon, 13 Oct 2025 20:03:41 +0200 Subject: [PATCH 6/7] Updated example --- .../07-configuring-blocks/src/App.tsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/examples/06-custom-schema/07-configuring-blocks/src/App.tsx b/examples/06-custom-schema/07-configuring-blocks/src/App.tsx index 3564940e4f..476f0401f1 100644 --- a/examples/06-custom-schema/07-configuring-blocks/src/App.tsx +++ b/examples/06-custom-schema/07-configuring-blocks/src/App.tsx @@ -18,6 +18,24 @@ export default function App() { }), }, }), + initialContent: [ + { + type: "paragraph", + content: "Welcome to this demo!", + }, + { + type: "paragraph", + content: "Press the '/' key to open the Slash Menu", + }, + { + type: "paragraph", + content: + "Notice how only heading levels 1-3 are avaiable, and toggle headings are not shown.", + }, + { + type: "paragraph", + }, + ], }); // Renders the editor instance using a React component. From 2deb465496fc188c9967692a2433f9800c2e483e Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Thu, 16 Oct 2025 12:51:54 +0200 Subject: [PATCH 7/7] Implemented PR feedback --- docs/content/docs/features/blocks/code-blocks.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/content/docs/features/blocks/code-blocks.mdx b/docs/content/docs/features/blocks/code-blocks.mdx index 029118445b..c900b10b86 100644 --- a/docs/content/docs/features/blocks/code-blocks.mdx +++ b/docs/content/docs/features/blocks/code-blocks.mdx @@ -39,13 +39,13 @@ type CodeBlockOptions = { }; ``` -`indentLineWithTab:` Whether the Tab key should indent lines, or be handled by the editor's default key handlers. Defaults to `true`. +`indentLineWithTab:` Whether the Tab key should indent lines, or not be handled by the code block specially. Defaults to `true`. `defaultLanguage:` The syntax highlighting default language for code blocks which are created/inserted without a set language, which is `text` by default (no syntax highlighting). -`supportedLanguages:` The syntax highlighting languages supported by the code block, or an empty array by default. +`supportedLanguages:` The syntax highlighting languages supported by the code block, which is an empty array by default. -`createHighlighter:` The [Shiki](https://shiki.style) highliter to use for syntax highlighting. +`createHighlighter:` The [Shiki highliter](https://shiki.style/guide/load-theme) to use for syntax highlighting. BlockNote also provides a generic set of options for syntax highlighting in the `@blocknote/code-block` package, which support a wide range of languages: