feat: Support for multi-column block in PDF, DOCX & ODT exporters

examples/05-interoperability/05-converting-blocks-to-pdf/.bnexample.json

@@ -5,6 +5,7 @@
   "tags": ["Interoperability"],
   "dependencies": {
     "@blocknote/xl-pdf-exporter": "latest",
+    "@blocknote/xl-multi-column": "latest",
     "@react-pdf/renderer": "^4.3.0"
   },
   "pro": true

examples/05-interoperability/05-converting-blocks-to-pdf/App.tsx

@@ -4,6 +4,7 @@ import {
   filterSuggestionItems,
   withPageBreak,
 } from "@blocknote/core";
+import * as locales from "@blocknote/core/locales";
 import "@blocknote/core/fonts/inter.css";
 import { BlockNoteView } from "@blocknote/mantine";
 import "@blocknote/mantine/style.css";
@@ -17,6 +18,12 @@ import {
   PDFExporter,
   pdfDefaultSchemaMappings,
 } from "@blocknote/xl-pdf-exporter";
+import {
+  getMultiColumnSlashMenuItems,
+  multiColumnDropCursor,
+  locales as multiColumnLocales,
+  withMultiColumn,
+} from "@blocknote/xl-multi-column";
 import { PDFViewer } from "@react-pdf/renderer";
 import { useEffect, useMemo, useState } from "react";
 
@@ -28,7 +35,12 @@ export default function App() {
 
   // Creates a new editor instance with some initial content.
   const editor = useCreateBlockNote({
-    schema: withPageBreak(BlockNoteSchema.create()),
+    schema: withMultiColumn(withPageBreak(BlockNoteSchema.create())),
+    dropCursor: multiColumnDropCursor,
+    dictionary: {
+      ...locales.en,
+      multi_column: multiColumnLocales.en,
+    },
     tables: {
       splitCells: true,
       cellBackgroundColor: true,
@@ -313,9 +325,72 @@ export default function App() {
   console.log("Hello World", message);
 };`,
       },
+      {
+        type: "columnList",
+        children: [
+          {
+            type: "column",
+            props: {
+              width: 0.8,
+            },
+            children: [
+              {
+                type: "paragraph",
+                content: "This paragraph is in a column!",
+              },
+            ],
+          },
+          {
+            type: "column",
+            props: {
+              width: 1.4,
+            },
+            children: [
+              {
+                type: "heading",
+                content: "So is this heading!",
+              },
+            ],
+          },
+          {
+            type: "column",
+            props: {
+              width: 0.8,
+            },
+            children: [
+              {
+                type: "paragraph",
+                content: "You can have multiple blocks in a column too",
+              },
+              {
+                type: "bulletListItem",
+                content: "Block 1",
+              },
+              {
+                type: "bulletListItem",
+                content: "Block 2",
+              },
+              {
+                type: "bulletListItem",
+                content: "Block 3",
+              },
+            ],
+          },
+        ],
+      },
     ],
   });
-
+  const getSlashMenuItems = useMemo(() => {
+    return async (query: string) =>
+      filterSuggestionItems(
+        combineByGroup(
+          getDefaultReactSlashMenuItems(editor),
+          getPageBreakReactSlashMenuItems(editor),
+          getMultiColumnSlashMenuItems(editor),
+        ),
+        query,
+      );
+  }, [editor]);
   const onChange = async () => {
     const exporter = new PDFExporter(editor.schema, pdfDefaultSchemaMappings);
     // Converts the editor's contents from Block objects to HTML and store to state.
@@ -330,23 +405,14 @@ export default function App() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const slashMenuItems = useMemo(() => {
-    return combineByGroup(
-      getDefaultReactSlashMenuItems(editor),
-      getPageBreakReactSlashMenuItems(editor),
-    );
-  }, [editor]);
-
   // Renders the editor instance, and its contents as HTML below.
   return (
     <div className="wrapper">
       <div className="editor">
         <BlockNoteView editor={editor} slashMenu={false} onChange={onChange}>
           <SuggestionMenuController
             triggerCharacter={"/"}
-            getItems={async (query) =>
-              filterSuggestionItems(slashMenuItems, query)
-            }
+            getItems={getSlashMenuItems}
           />
         </BlockNoteView>
       </div>

examples/05-interoperability/05-converting-blocks-to-pdf/package.json

@@ -18,6 +18,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "@blocknote/xl-pdf-exporter": "latest",
+    "@blocknote/xl-multi-column": "latest",
     "@react-pdf/renderer": "^4.3.0"
   },
   "devDependencies": {

examples/05-interoperability/06-converting-blocks-to-docx/.bnexample.json

@@ -5,6 +5,7 @@
   "tags": [""],
   "dependencies": {
     "@blocknote/xl-docx-exporter": "latest",
+    "@blocknote/xl-multi-column": "latest",
     "docx": "^9.0.2"
   },
   "pro": true

examples/05-interoperability/06-converting-blocks-to-docx/App.tsx

@@ -4,6 +4,7 @@ import {
   filterSuggestionItems,
   withPageBreak,
 } from "@blocknote/core";
+import * as locales from "@blocknote/core/locales";
 import "@blocknote/core/fonts/inter.css";
 import { BlockNoteView } from "@blocknote/mantine";
 import "@blocknote/mantine/style.css";
@@ -17,14 +18,25 @@ import {
   DOCXExporter,
   docxDefaultSchemaMappings,
 } from "@blocknote/xl-docx-exporter";
+import {
+  getMultiColumnSlashMenuItems,
+  multiColumnDropCursor,
+  locales as multiColumnLocales,
+  withMultiColumn,
+} from "@blocknote/xl-multi-column";
 import { useMemo } from "react";
 
 import "./styles.css";
 
 export default function App() {
   // Creates a new editor instance with some initial content.
   const editor = useCreateBlockNote({
-    schema: withPageBreak(BlockNoteSchema.create()),
+    schema: withMultiColumn(withPageBreak(BlockNoteSchema.create())),
+    dropCursor: multiColumnDropCursor,
+    dictionary: {
+      ...locales.en,
+      multi_column: multiColumnLocales.en,
+    },
     tables: {
       splitCells: true,
       cellBackgroundColor: true,
@@ -309,9 +321,73 @@ export default function App() {
   console.log("Hello World", message);
 };`,
       },
+
+      {
+        type: "columnList",
+        children: [
+          {
+            type: "column",
+            props: {
+              width: 0.8,
+            },
+            children: [
+              {
+                type: "paragraph",
+                content: "This paragraph is in a column!",
+              },
+            ],
+          },
+          {
+            type: "column",
+            props: {
+              width: 1.4,
+            },
+            children: [
+              {
+                type: "heading",
+                content: "So is this heading!",
+              },
+            ],
+          },
+          {
+            type: "column",
+            props: {
+              width: 0.8,
+            },
+            children: [
+              {
+                type: "paragraph",
+                content: "You can have multiple blocks in a column too",
+              },
+              {
+                type: "bulletListItem",
+                content: "Block 1",
+              },
+              {
+                type: "bulletListItem",
+                content: "Block 2",
+              },
+              {
+                type: "bulletListItem",
+                content: "Block 3",
+              },
+            ],
+          },
+        ],
+      },
     ],
   });
-
+  const getSlashMenuItems = useMemo(() => {
+    return async (query: string) =>
+      filterSuggestionItems(
+        combineByGroup(
+          getDefaultReactSlashMenuItems(editor),
+          getPageBreakReactSlashMenuItems(editor),
+          getMultiColumnSlashMenuItems(editor),
+        ),
+        query,
+      );
+  }, [editor]);
   const onDownloadClick = async () => {
     const exporter = new DOCXExporter(editor.schema, docxDefaultSchemaMappings);
 
@@ -332,13 +408,6 @@ export default function App() {
     window.URL.revokeObjectURL(link.href);
   };
 
-  const slashMenuItems = useMemo(() => {
-    return combineByGroup(
-      getDefaultReactSlashMenuItems(editor),
-      getPageBreakReactSlashMenuItems(editor),
-    );
-  }, [editor]);
-
   // Renders the editor instance, and its contents as HTML below.
   return (
     <div>
@@ -351,9 +420,7 @@ export default function App() {
         <BlockNoteView editor={editor} slashMenu={false}>
           <SuggestionMenuController
             triggerCharacter={"/"}
-            getItems={async (query) =>
-              filterSuggestionItems(slashMenuItems, query)
-            }
+            getItems={getSlashMenuItems}
           />
         </BlockNoteView>
       </div>

examples/05-interoperability/06-converting-blocks-to-docx/package.json

@@ -18,6 +18,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "@blocknote/xl-docx-exporter": "latest",
+    "@blocknote/xl-multi-column": "latest",
     "docx": "^9.0.2"
   },
   "devDependencies": {

examples/05-interoperability/07-converting-blocks-to-odt/.bnexample.json

@@ -4,7 +4,8 @@
   "author": "areknawo",
   "tags": [""],
   "dependencies": {
-    "@blocknote/xl-odt-exporter": "latest"
+    "@blocknote/xl-odt-exporter": "latest",
+    "@blocknote/xl-multi-column": "latest"
   },
   "pro": true
 }