TypeCellOS · nperez0111 · Mar 11, 2025 · Mar 13, 2025 · Mar 14, 2025 · Mar 14, 2025
diff --git a/examples/01-basic/01-minimal/App.tsx b/examples/01-basic/01-minimal/App.tsx
@@ -5,7 +5,7 @@ import { useCreateBlockNote } from "@blocknote/react";
 
 export default function App() {
   // Creates a new editor instance.
-  const editor = useCreateBlockNote({});
+  const editor = useCreateBlockNote();
 
   // Renders the editor instance using a React component.
   return <BlockNoteView editor={editor} />;

diff --git a/examples/04-theming/06-code-block/.bnexample.json b/examples/04-theming/06-code-block/.bnexample.json
@@ -0,0 +1,6 @@
+{
+  "playground": true,
+  "docs": true,
+  "author": "matthewlipski",
+  "tags": ["Basic"]
+}
diff --git a/examples/04-theming/06-code-block/App.tsx b/examples/04-theming/06-code-block/App.tsx
@@ -0,0 +1,16 @@
+import "@blocknote/core/fonts/inter.css";
+import { BlockNoteView } from "@blocknote/mantine";
+import "@blocknote/mantine/style.css";
+import { useCreateBlockNote } from "@blocknote/react";
+// This packages some of the most used languages in on-demand bundle
+import { codeBlock } from "@blocknote/code-block";
+
+export default function App() {
+  // Creates a new editor instance.
+  const editor = useCreateBlockNote({
+    codeBlock,
+  });
+
+  // Renders the editor instance using a React component.
+  return <BlockNoteView editor={editor} />;
+}
diff --git a/examples/04-theming/06-code-block/README.md b/examples/04-theming/06-code-block/README.md
@@ -0,0 +1,27 @@
+# Code Block Highlighting
+
+To enable code block syntax highlighting, you can use the `codeBlock` option in the `useCreateBlockNote` hook. This is excluded by default to reduce bundle size
+
+We've created a default setup which automatically includes some of the most common languages in the most optimized way possible. The language syntaxes are loaded on-demand to ensure the smallest bundle size for your users.
+
+To use it, you can do the following:
+
+```tsx
+import { codeBlock } from "@blocknote/code-block";
+
+export default function App() {
+  // Creates a new editor instance.
+  const editor = useCreateBlockNote({
+    codeBlock,
+  });
+
+  // Renders the editor instance using a React component.
+  return <BlockNoteView editor={editor} />;
+}
+```
+
+If you need to configure the themes or support more languages, you can provide your own codeBlock highlighting like described in [the custom code block docs](./custom-code-block/)
+
+**Relevant Docs:**
+
+- [Editor Setup](/docs/editor-basics/setup)
diff --git a/examples/04-theming/06-code-block/index.html b/examples/04-theming/06-code-block/index.html
@@ -0,0 +1,14 @@
+<html lang="en">
+  <head>
+    <script>
+      <!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY -->
+    </script>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Code Block Highlighting</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/04-theming/06-code-block/main.tsx b/examples/04-theming/06-code-block/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 "./App";
+
+const root = createRoot(document.getElementById("root")!);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/examples/04-theming/06-code-block/package.json b/examples/04-theming/06-code-block/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "@blocknote/example-code-block",
+  "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "private": true,
+  "version": "0.12.4",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --max-warnings 0"
+  },
+  "dependencies": {
+    "@blocknote/core": "latest",
+    "@blocknote/react": "latest",
+    "@blocknote/ariakit": "latest",
+    "@blocknote/mantine": "latest",
+    "@blocknote/shadcn": "latest",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "@vitejs/plugin-react": "^4.3.1",
+    "eslint": "^8.10.0",
+    "vite": "^5.3.4"
+  },
+  "eslintConfig": {
+    "extends": [
+      "../../../.eslintrc.js"
+    ]
+  },
+  "eslintIgnore": [
+    "dist"
+  ]
+}
diff --git a/examples/04-theming/06-code-block/tsconfig.json b/examples/04-theming/06-code-block/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/"
+    }
+  ]
+}
diff --git a/examples/04-theming/06-code-block/vite.config.ts b/examples/04-theming/06-code-block/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/examples/04-theming/07-custom-code-block/.bnexample.json b/examples/04-theming/07-custom-code-block/.bnexample.json
@@ -0,0 +1,6 @@
+{
+  "playground": true,
+  "docs": true,
+  "author": "matthewlipski",
+  "tags": ["Basic"]
+}
diff --git a/examples/04-theming/07-custom-code-block/App.tsx b/examples/04-theming/07-custom-code-block/App.tsx
@@ -0,0 +1,95 @@
+import "@blocknote/core/fonts/inter.css";
+import { BlockNoteView } from "@blocknote/mantine";
+import "@blocknote/mantine/style.css";
+import { useCreateBlockNote } from "@blocknote/react";
+// Bundle created from `npx shiki-codegen --langs typescript,javascript,react --themes light-plus,dark-plus --engine javascript --precompiled ./shiki.bundle.ts`
+import { createHighlighter } from "./shiki.bundle.js";
+
+export default function App() {
+  // Creates a new editor instance.
+  const editor = useCreateBlockNote({
+    codeBlock: {
+      indentLineWithTab: true,
+      defaultLanguage: "typescript",
+      supportedLanguages: {
+        typescript: {
+          name: "TypeScript",
+          aliases: ["ts"],
+        },
+        javascript: {
+          name: "JavaScript",
+          aliases: ["js"],
+        },
+        vue: {
+          name: "Vue",
+        },
+      },
+      // This creates a highlighter, it can be asynchronous to load it afterwards
+      createHighlighter: () =>
+        createHighlighter({
+          themes: ["dark-plus", "light-plus"],
+          langs: [],
+        }),
+    },
+    initialContent: [
+      {
+        id: "fc832df4-bd15-49d2-8d64-140c27f29692",
+        type: "codeBlock",
+        props: {
+          language: "typescript",
+        },
+        content: [
+          {
+            type: "text",
+            text: "const x = 3 * 4;",
+            styles: {},
+          },
+        ],
+        children: [],
+      },
+      {
+        id: "aecf786b-cbde-4915-b86c-b4c8264fc8f7",
+        type: "paragraph",
+        props: {
+          textColor: "default",
+          backgroundColor: "default",
+          textAlignment: "left",
+        },
+        content: [],
+        children: [],
+      },
+      {
+        id: "f85ab261-dfe8-47f0-929f-533808a4184d",
+        type: "heading",
+        props: {
+          textColor: "default",
+          backgroundColor: "default",
+          textAlignment: "left",
+          level: 3,
+        },
+        content: [
+          {
+            type: "text",
+            text: 'Click on "Typescript" above to see the different supported languages',
+            styles: {},
+          },
+        ],
+        children: [],
+      },
+      {
+        id: "dec03378-6b49-442a-89f0-b2551ce0f60c",
+        type: "paragraph",
+        props: {
+          textColor: "default",
+          backgroundColor: "default",
+          textAlignment: "left",
+        },
+        content: [],
+        children: [],
+      },
+    ],
+  });
+
+  // Renders the editor instance using a React component.
+  return <BlockNoteView editor={editor} />;
+}
diff --git a/examples/04-theming/07-custom-code-block/README.md b/examples/04-theming/07-custom-code-block/README.md
@@ -0,0 +1,49 @@
+# Custom Code Block Theme & Language
+
+To configure a code block highlighting theme and language, you can use the `codeBlock` option in the `useCreateBlockNote` hook.
+
+This allows you to configure a shiki highlighter for the code blocks of your editor, allowing you to tailor the themes and languages you would like to use.
+
+To create a highlighter, you can use the [shiki-codegen](https://shiki.style/packages/codegen) CLI for generating the code to create a highlighter for your languages and themes.
+
+For example to create a highlighter using the optimized javascript engine, javascript, typescript, vue, and 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
+```
+
+This will generate a `shiki.bundle.ts` file that you can use to create a highlighter for your editor.
+
+Like this:
+
+```ts
+import { createHighlighter } from "./shiki.bundle.js";
+
+export default function App() {
+  // Creates a new editor instance.
+  const editor = useCreateBlockNote({
+    codeBlock: {
+      indentLineWithTab: true,
+      defaultLanguage: "typescript",
+      supportedLanguages: {
+        typescript: {
+          name: "TypeScript",
+          aliases: ["ts"],
+        },
+      },
+      createHighlighter: () =>
+        createHighlighter({
+          themes: ["light-plus", "dark-plus"],
+          langs: [],
+        }),
+    },
+  });
+
+  return <BlockNoteView editor={editor} />;
+}
+```
+
+**Relevant Docs:**
+
+- [Editor Setup](/docs/editor-basics/setup)
+- [shiki-codegen](https://shiki.style/packages/codegen)
diff --git a/examples/04-theming/07-custom-code-block/index.html b/examples/04-theming/07-custom-code-block/index.html
@@ -0,0 +1,14 @@
+<html lang="en">
+  <head>
+    <script>
+      <!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY -->
+    </script>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Custom Code Block Theme &amp; Language</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/04-theming/07-custom-code-block/main.tsx b/examples/04-theming/07-custom-code-block/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 "./App";
+
+const root = createRoot(document.getElementById("root")!);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);