Merge branch 'main' into releases

# Conflicts:
#	docs/package.json
#	lerna.json
#	package-lock.json
#	packages/ariakit/package.json
#	packages/core/package.json
#	packages/dev-scripts/package.json
#	packages/mantine/package.json
#	packages/react/package.json
#	packages/server-util/package.json
#	packages/shadcn/package.json
#	playground/package.json
#	tests/package.json

Author: matthewlipski

.eslintrc.js

@@ -33,8 +33,8 @@ module.exports = {
       "error",
       {
         devDependencies: true,
+        peerDependencies: true,
         optionalDependencies: false,
-        peerDependencies: false,
         bundledDependencies: false,
       },
     ],

.vscode/settings.json

@@ -11,5 +11,8 @@
     "packages/website/docs/.vitepress": false,
     "**/.*": false
   },
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "[xml]": {
+    "editor.defaultFormatter": "redhat.vscode-xml"
+  }
 }

README.md

@@ -121,3 +121,5 @@ BlockNote is built as part of [TypeCell](https://www.typecell.org). TypeCell is
 Hosting and deployments powered by Vercel:
 
 <a href="https://vercel.com/?utm_source=TypeCell&utm_campaign=oss"><img src="https://images.ctfassets.net/e5382hct74si/78Olo8EZRdUlcDUFQvnzG7/fa4cdb6dc04c40fceac194134788a0e2/1618983297-powered-by-vercel.svg" alt="NLNet" width="150"></a>
+
+This project is tested with BrowserStack

docs/components/example/styles.css

@@ -1,28 +1,34 @@
 :focus-visible {
-  box-shadow: unset !important;
+    box-shadow: unset !important;
 }
 
 .demo .nextra-code-block pre {
-  background-color: transparent !important;
-  margin: 0 !important;
-  padding: 0 !important;
+    background-color: transparent !important;
+    margin: 0 !important;
+    padding: 0 !important;
 }
 
 .demo .nextra-code-block code > span {
-  padding: 0 !important;
+    padding: 0 !important;
 }
 
 .demo .bn-container,
 .demo .bn-editor {
-  height: 100%;
+    height: 100%;
 }
 
 .demo .bn-editor {
-  overflow: auto;
-  padding-block: 1rem;
+    overflow: auto;
+    padding-block: 1rem;
 }
 
 .demo-contents a {
-  color: revert;
-  text-decoration: revert;
+    color: revert;
+    text-decoration: revert;
 }
+
+.demo code.bn-inline-content {
+    font-size: 1em;
+    line-height: 1.5;
+    display: block;
+}

docs/components/pages/landing/hero/DemoEditor.tsx

@@ -1,7 +1,23 @@
-import { uploadToTmpFilesDotOrg_DEV_ONLY } from "@blocknote/core";
+import {
+  BlockNoteSchema,
+  combineByGroup,
+  filterSuggestionItems,
+  locales,
+  uploadToTmpFilesDotOrg_DEV_ONLY,
+} from "@blocknote/core";
 import "@blocknote/core/fonts/inter.css";
-import { useCreateBlockNote } from "@blocknote/react";
+import {
+  getDefaultReactSlashMenuItems,
+  SuggestionMenuController,
+  useCreateBlockNote,
+} from "@blocknote/react";
 import { BlockNoteView } from "@blocknote/mantine";
+import {
+  getMultiColumnSlashMenuItems,
+  locales as multiColumnLocales,
+  multiColumnDropCursor,
+  withMultiColumn,
+} from "@blocknote/xl-multi-column";
 import "@blocknote/mantine/style.css";
 import { useCallback, useMemo, useState } from "react";
 import YPartyKitProvider from "y-partykit/provider";
@@ -67,6 +83,12 @@ export default function DemoEditor(props: { theme?: "light" | "dark" }) {
 
   const editor = useCreateBlockNote(
     {
+      dictionary: {
+        ...locales.en,
+        multi_column: multiColumnLocales.en,
+      },
+      schema: withMultiColumn(BlockNoteSchema.create()),
+      dropCursor: multiColumnDropCursor,
       collaboration: {
         provider,
         fragment: doc.getXmlFragment("blocknote"),
@@ -91,5 +113,27 @@ export default function DemoEditor(props: { theme?: "light" | "dark" }) {
     }
   }, [warningShown]);
 
-  return <BlockNoteView onFocus={focus} editor={editor} theme={props.theme} />;
+  const getSlashMenuItems = useMemo(() => {
+    return async (query: string) =>
+      filterSuggestionItems(
+        combineByGroup(
+          getDefaultReactSlashMenuItems(editor),
+          getMultiColumnSlashMenuItems(editor),
+        ),
+        query,
+      );
+  }, [editor]);
+
+  return (
+    <BlockNoteView
+      onFocus={focus}
+      editor={editor}
+      theme={props.theme}
+      slashMenu={false}>
+      <SuggestionMenuController
+        triggerCharacter={"/"}
+        getItems={getSlashMenuItems}
+      />
+    </BlockNoteView>
+  );
 }

docs/components/pages/pricing/faq.tsx

@@ -17,7 +17,7 @@ const faqs = [
     question:
       "What License is BlockNote using? Can I use it for commercial projects?",
     answer: `BlockNote is open source software licensed under the MPL 2.0 license, which allows you to use BlockNote in commercial (and closed-source) applications - even without a subscription. 
-    If you make changes to the BlockNote source files, you're expected to publish these changes so the wider community can benefit as well.`,
+    If you make changes to the BlockNote source files, you're expected to publish these changes so the wider community can benefit as well. \nThe XL packages are dual-licensed and available under AGPL-3.0 or a commercial license as part of the BlockNote Business subscription or above.`,
   },
   // More questions...
 ];

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docs",
-  "version": "0.17.0",
+  "version": "0.19.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -9,11 +9,12 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@blocknote/ariakit": "^0.17.0",
-    "@blocknote/core": "^0.17.0",
-    "@blocknote/mantine": "^0.17.0",
-    "@blocknote/react": "^0.17.0",
-    "@blocknote/shadcn": "^0.17.0",
+    "@blocknote/ariakit": "^0.19.0",
+    "@blocknote/core": "^0.19.0",
+    "@blocknote/mantine": "^0.19.0",
+    "@blocknote/react": "^0.19.0",
+    "@blocknote/shadcn": "^0.19.0",
+    "@blocknote/xl-multi-column": "^0.19.0",
     "@headlessui/react": "^1.7.18",
     "@heroicons/react": "^2.1.4",
     "@mantine/core": "^7.10.1",

docs/pages/docs/advanced/nextjs.mdx

@@ -29,14 +29,26 @@ export default function Editor() {
 
 ## Import as dynamic
 
-Now, you can use [Dynamic Imports](https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading) to make sure BlockNote is only imported on the client-side.
+In the same directory, create a new file called `DynamicEditor.tsx`:
+Here, we will use [Dynamic Imports](https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading) to make sure BlockNote is only imported on the client-side.
 
 You can import the component we just created above using `next/dynamic` in your page:
 
 ```typescript jsx
+"use client";
+
 import dynamic from "next/dynamic";
 
-const Editor = dynamic(() => import("../components/Editor"), { ssr: false });
+export const Editor = dynamic(() => import("./Editor"), { ssr: false });
+```
+
+## Import in a page / app
+
+Now, you can import the dynamic editor in your page or app:
+
+```typescript jsx
+import { Editor } from "../components/DynamicEditor";
+
 
 function App() {
   return (
@@ -47,4 +59,14 @@ function App() {
 }
 ```
 
+## React 19 / Next 15 StrictMode
+
+BlockNote is not yet compatible with React 19 / Next 15 StrictMode. For now, disable StrictMode in your `next.config.ts`:
+
+```typescript
+...
+reactStrictMode: false,
+...
+```
+
 This should resolve any issues you might run into when embedding BlockNote in your Next.js React app!

docs/pages/docs/editor-api/_meta.json

@@ -3,5 +3,7 @@
   "manipulating-inline-content": "",
   "cursor-selections": "",
   "converting-blocks": "",
-  "server-processing": ""
+  "server-processing": "",
+  "export-to-pdf": "",
+  "export-to-docx": ""
 }

docs/pages/docs/editor-api/export-to-docx.mdx

@@ -0,0 +1,129 @@
+---
+title: Export to docx (Office Open XML)
+description: Export BlockNote documents to a docx word (Office Open XML) file.
+imageTitle: Export to docx
+path: /docs/export-to-docx
+---
+
+import { Example } from "@/components/example";
+import { Callout } from "nextra/components";
+
+# Exporting blocks to docx
+
+It's possible to export BlockNote documents to docx, completely client-side.
+
+<Callout type={"info"}>
+  This feature is provided by the `@blocknote/xl-docx-exporter`. `xl-` packages
+  are fully open source, but released under a copyleft license. A commercial
+  license for usage in closed source, proprietary products comes as part of the
+  [Business subscription](/pricing).
+</Callout>
+
+First, install the `@blocknote/xl-docx-exporter` and `docx` packages:
+
+```bash
+npm install @blocknote/xl-docx-exporter docx
+```
+
+Then, create an instance of the `DOCXExporter` class. This exposes the following methods:
+
+```typescript
+import {
+  DOCXExporter,
+  docxDefaultSchemaMappings,
+} from "@blocknote/xl-docx-exporter";
+import { Packer } from "docx";
+
+// Create the exporter
+const exporter = new DOCXExporter(editor.schema, docxDefaultSchemaMappings);
+
+// Convert the blocks to a docxjs document
+const docxDocument = await exporter.toDocxJsDocument(editor.document);
+
+// Use docx to write to file:
+await Packer.toBuffer(docxDocument);
+```
+
+See the [full example](/examples/interoperability/converting-blocks-to-docx) below:
+
+<Example name="interoperability/converting-blocks-to-docx" />
+
+### Customizing the Docx output file
+
+`toDocxJsDocument` takes an optional `options` parameter, which allows you to customize document metadata (like the author) and section options (like headers and footers).
+
+Example usage:
+
+```typescript
+import { Paragraph, TextRun } from "docx";
+
+const doc = await exporter.toDocxJsDocument(testDocument, {
+  documentOptions: {
+    creator: "John Doe",
+  },
+  sectionOptions: {
+    headers: {
+      default: {
+        options: {
+          children: [new Paragraph({ children: [new TextRun("Header")] })],
+        },
+      },
+    },
+    footers: {
+      default: {
+        options: {
+          children: [new Paragraph({ children: [new TextRun("Footer")] })],
+        },
+      },
+    },
+  },
+});
+```
+
+### Custom mappings / custom schemas
+
+The `DOCXExporter` constructor takes a `schema`, `mappings` and `options` parameter.
+A _mapping_ defines how to convert a BlockNote schema element (a Block, Inline Content, or Style) to a [docxjs](https://docx.js.org/) element.
+If you're using a [custom schema](/docs/custom-schemas) in your editor, or if you want to overwrite how default BlockNote elements are converted to docx, you can pass your own `mappings`:
+
+For example, use the following code in case your schema has an `extraBlock` type:
+
+```typescript
+import {
+  DOCXExporter,
+  docxDefaultSchemaMappings,
+} from "@blocknote/xl-docx-exporter";
+import { Paragraph, TextRun } from "docx";
+
+new DOCXExporter(schema, {
+  blockMapping: {
+    ...docxDefaultSchemaMappings.blockMapping,
+    myCustomBlock: (block, exporter) => {
+      return new Paragraph({
+        children: [
+          new TextRun({
+            text: "My custom block",
+          }),
+        ],
+      });
+    },
+  },
+  inlineContentMapping: docxDefaultSchemaMappings.inlineContentMapping,
+  styleMapping: docxDefaultSchemaMappings.styleMapping,
+});
+```
+
+### Exporter options
+
+The `DOCXExporter` constructor takes an optional `options` parameter.
+While conversion happens on the client-side, the default setup uses a server hosted proxy to resolve files:
+
+```typescript
+const defaultOptions = {
+  // a function to resolve external resources in order to avoid CORS issues
+  // by default, this calls a BlockNote hosted server-side proxy to resolve files
+  resolveFileUrl: corsProxyResolveFileUrl,
+  // the colors to use in the Docx for things like highlighting, background colors and font colors.
+  colors: COLORS_DEFAULT, // defaults from @blocknote/core
+};
+```