diff --git a/examples/01-basic/14-shadowdom/.bnexample.json b/examples/01-basic/15-shadowdom/.bnexample.json similarity index 100% rename from examples/01-basic/14-shadowdom/.bnexample.json rename to examples/01-basic/15-shadowdom/.bnexample.json diff --git a/examples/01-basic/14-shadowdom/README.md b/examples/01-basic/15-shadowdom/README.md similarity index 100% rename from examples/01-basic/14-shadowdom/README.md rename to examples/01-basic/15-shadowdom/README.md diff --git a/examples/01-basic/14-shadowdom/index.html b/examples/01-basic/15-shadowdom/index.html similarity index 100% rename from examples/01-basic/14-shadowdom/index.html rename to examples/01-basic/15-shadowdom/index.html diff --git a/examples/01-basic/14-shadowdom/main.tsx b/examples/01-basic/15-shadowdom/main.tsx similarity index 100% rename from examples/01-basic/14-shadowdom/main.tsx rename to examples/01-basic/15-shadowdom/main.tsx diff --git a/examples/01-basic/14-shadowdom/package.json b/examples/01-basic/15-shadowdom/package.json similarity index 100% rename from examples/01-basic/14-shadowdom/package.json rename to examples/01-basic/15-shadowdom/package.json diff --git a/examples/01-basic/14-shadowdom/src/App.tsx b/examples/01-basic/15-shadowdom/src/App.tsx similarity index 100% rename from examples/01-basic/14-shadowdom/src/App.tsx rename to examples/01-basic/15-shadowdom/src/App.tsx diff --git a/examples/01-basic/14-shadowdom/src/vite-env.d.ts b/examples/01-basic/15-shadowdom/src/vite-env.d.ts similarity index 100% rename from examples/01-basic/14-shadowdom/src/vite-env.d.ts rename to examples/01-basic/15-shadowdom/src/vite-env.d.ts diff --git a/examples/01-basic/14-shadowdom/tsconfig.json b/examples/01-basic/15-shadowdom/tsconfig.json similarity index 100% rename from examples/01-basic/14-shadowdom/tsconfig.json rename to examples/01-basic/15-shadowdom/tsconfig.json diff --git a/examples/01-basic/14-shadowdom/vite.config.ts b/examples/01-basic/15-shadowdom/vite.config.ts similarity index 100% rename from examples/01-basic/14-shadowdom/vite.config.ts rename to examples/01-basic/15-shadowdom/vite.config.ts diff --git a/examples/01-basic/16-read-only-editor/.bnexample.json b/examples/01-basic/16-read-only-editor/.bnexample.json new file mode 100644 index 0000000000..6d4a02dd52 --- /dev/null +++ b/examples/01-basic/16-read-only-editor/.bnexample.json @@ -0,0 +1,6 @@ +{ + "playground": true, + "docs": true, + "author": "matthewlipski", + "tags": ["Basic"] +} diff --git a/examples/01-basic/16-read-only-editor/README.md b/examples/01-basic/16-read-only-editor/README.md new file mode 100644 index 0000000000..38d6b91fef --- /dev/null +++ b/examples/01-basic/16-read-only-editor/README.md @@ -0,0 +1,9 @@ +# Read-only Editor + +This example makes the editor read-only while showing the same content as the [Default Schema Showcase](/examples/basic/default-blocks) example. + +**Relevant Docs:** + +- [Editor Setup](/docs/getting-started/editor-setup) +- [Document Structure](/docs/foundations/document-structure) +- [Default Schema](/docs/foundations/schemas) diff --git a/examples/01-basic/16-read-only-editor/index.html b/examples/01-basic/16-read-only-editor/index.html new file mode 100644 index 0000000000..66836dd166 --- /dev/null +++ b/examples/01-basic/16-read-only-editor/index.html @@ -0,0 +1,14 @@ + + + + + Read-only Editor + + + +
+ + + diff --git a/examples/01-basic/16-read-only-editor/main.tsx b/examples/01-basic/16-read-only-editor/main.tsx new file mode 100644 index 0000000000..677c7f7eed --- /dev/null +++ b/examples/01-basic/16-read-only-editor/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/01-basic/16-read-only-editor/package.json b/examples/01-basic/16-read-only-editor/package.json new file mode 100644 index 0000000000..bfefd7dc58 --- /dev/null +++ b/examples/01-basic/16-read-only-editor/package.json @@ -0,0 +1,31 @@ +{ + "name": "@blocknote/example-basic-read-only-editor", + "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/ariakit": "latest", + "@blocknote/core": "latest", + "@blocknote/mantine": "latest", + "@blocknote/react": "latest", + "@blocknote/shadcn": "latest", + "@mantine/core": "^8.3.11", + "@mantine/hooks": "^8.3.11", + "@mantine/utils": "^6.0.22", + "react": "^19.2.3", + "react-dom": "^19.2.3" + }, + "devDependencies": { + "@types/react": "^19.2.3", + "@types/react-dom": "^19.2.3", + "@vitejs/plugin-react": "^4.7.0", + "vite": "^5.4.20" + } +} \ No newline at end of file diff --git a/examples/01-basic/16-read-only-editor/src/App.tsx b/examples/01-basic/16-read-only-editor/src/App.tsx new file mode 100644 index 0000000000..ab0ae5cfb4 --- /dev/null +++ b/examples/01-basic/16-read-only-editor/src/App.tsx @@ -0,0 +1,156 @@ +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({ + initialContent: [ + { + type: "paragraph", + content: "Welcome to this demo!", + }, + { + type: "paragraph", + }, + { + type: "paragraph", + content: [ + { + type: "text", + text: "Blocks:", + styles: { bold: true }, + }, + ], + }, + { + type: "paragraph", + content: "Paragraph", + }, + { + type: "heading", + content: "Heading", + }, + { + id: "toggle-heading", + type: "heading", + props: { isToggleable: true }, + content: "Toggle Heading", + }, + { + type: "quote", + content: "Quote", + }, + { + type: "bulletListItem", + content: "Bullet List Item", + }, + { + type: "numberedListItem", + content: "Numbered List Item", + }, + { + type: "checkListItem", + content: "Check List Item", + }, + { + id: "toggle-list-item", + type: "toggleListItem", + content: "Toggle List Item", + }, + { + type: "codeBlock", + props: { language: "javascript" }, + content: "console.log('Hello, world!');", + }, + { + type: "table", + content: { + type: "tableContent", + rows: [ + { + cells: ["Table Cell", "Table Cell", "Table Cell"], + }, + { + cells: ["Table Cell", "Table Cell", "Table Cell"], + }, + { + cells: ["Table Cell", "Table Cell", "Table Cell"], + }, + ], + }, + }, + { + type: "file", + }, + { + type: "image", + props: { + url: "https://placehold.co/332x322.jpg", + caption: "From https://placehold.co/332x322.jpg", + }, + }, + { + type: "video", + props: { + url: "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm", + caption: + "From https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm", + }, + }, + { + type: "audio", + props: { + url: "https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3", + caption: + "From https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3", + }, + }, + { + type: "paragraph", + }, + { + type: "paragraph", + content: [ + { + type: "text", + text: "Inline Content:", + styles: { bold: true }, + }, + ], + }, + { + type: "paragraph", + content: [ + { + type: "text", + text: "Styled Text", + styles: { + bold: true, + italic: true, + textColor: "red", + backgroundColor: "blue", + }, + }, + { + type: "text", + text: " ", + styles: {}, + }, + { + type: "link", + content: "Link", + href: "https://www.blocknotejs.org", + }, + ], + }, + { + type: "paragraph", + }, + ], + }); + + // Renders the editor instance using a React component and makes it read-only. + return ; +} diff --git a/examples/01-basic/16-read-only-editor/tsconfig.json b/examples/01-basic/16-read-only-editor/tsconfig.json new file mode 100644 index 0000000000..dbe3e6f62d --- /dev/null +++ b/examples/01-basic/16-read-only-editor/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/01-basic/16-read-only-editor/vite.config.ts b/examples/01-basic/16-read-only-editor/vite.config.ts new file mode 100644 index 0000000000..f62ab20bc2 --- /dev/null +++ b/examples/01-basic/16-read-only-editor/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 aea664f288..a27ffce51e 100644 --- a/playground/src/examples.gen.tsx +++ b/playground/src/examples.gen.tsx @@ -288,7 +288,7 @@ { "projectSlug": "shadowdom", "fullSlug": "basic/shadowdom", - "pathFromRoot": "examples/01-basic/14-shadowdom", + "pathFromRoot": "examples/01-basic/15-shadowdom", "config": { "playground": true, "docs": false, @@ -304,6 +304,25 @@ }, "readme": "This example shows how to render the BlockNote editor inside a Shadow DOM.\n\n**Relevant Docs:**\n\n- [Editor Setup](/docs/getting-started/editor-setup)" }, + { + "projectSlug": "read-only-editor", + "fullSlug": "basic/read-only-editor", + "pathFromRoot": "examples/01-basic/16-read-only-editor", + "config": { + "playground": true, + "docs": true, + "author": "matthewlipski", + "tags": [ + "Basic" + ] + }, + "title": "Read-only Editor", + "group": { + "pathFromRoot": "examples/01-basic", + "slug": "basic" + }, + "readme": "This example makes the editor read-only while showing the same content as the [Default Schema Showcase](/examples/01-basic/04-default-blocks/) example.\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": "testing", "fullSlug": "basic/testing", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 34c8277730..489f775557 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1019,7 +1019,53 @@ importers: specifier: ^5.4.20 version: 5.4.20(@types/node@25.3.3)(lightningcss@1.30.2)(terser@5.46.0) - examples/01-basic/14-shadowdom: + examples/01-basic/15-shadowdom: + 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.11 + version: 8.3.11(@mantine/hooks@8.3.11(react@19.2.3))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) + '@mantine/hooks': + specifier: ^8.3.11 + version: 8.3.11(react@19.2.3) + '@mantine/utils': + specifier: ^6.0.22 + version: 6.0.22(react@19.2.3) + react: + specifier: ^19.2.3 + version: 19.2.3 + react-dom: + specifier: ^19.2.3 + version: 19.2.3(react@19.2.3) + devDependencies: + '@types/react': + specifier: ^19.2.3 + version: 19.2.8 + '@types/react-dom': + specifier: ^19.2.3 + version: 19.2.3(@types/react@19.2.8) + '@vitejs/plugin-react': + specifier: ^4.7.0 + version: 4.7.0(vite@5.4.20(@types/node@25.3.3)(lightningcss@1.30.2)(terser@5.46.0)) + vite: + specifier: ^5.4.20 + version: 5.4.20(@types/node@25.3.3)(lightningcss@1.30.2)(terser@5.46.0) + + examples/01-basic/16-read-only-editor: dependencies: '@blocknote/ariakit': specifier: latest