docs: Update exporter examples

examples/05-interoperability/05-converting-blocks-to-pdf/README.md

@@ -2,4 +2,4 @@
 
 This example exports the current document (all blocks) as an PDF file and downloads it to your computer.
 
-**Try it out:** Edit the document and click "Download .pdf" in top-left corner, to download the PDF file.
+**Try it out:** Edit the document and click "Download .pdf" at the top to download the PDF file.

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

@@ -24,30 +24,29 @@ import {
   locales as multiColumnLocales,
   withMultiColumn,
 } from "@blocknote/xl-multi-column";
-import { PDFViewer } from "@react-pdf/renderer";
-import { useEffect, useMemo, useReducer, useState } from "react";
+import { pdf } from "@react-pdf/renderer";
+import { JSX, useMemo, useState } from "react";
 
 import "./styles.css";
 
 export default function App() {
-  // Stores the editor's contents as HTML.
-  const [pdfDocument, setPDFDocument] = useState<any>();
-  const [renders, forceRerender] = useReducer((s) => s + 1, 0);
-
-  // Creates a new editor instance with some initial content.
+  // Creates a new editor instance.
   const editor = useCreateBlockNote({
+    // Adds support for page breaks & multi-column blocks.
     schema: withMultiColumn(withPageBreak(BlockNoteSchema.create())),
     dropCursor: multiColumnDropCursor,
     dictionary: {
       ...locales.en,
       multi_column: multiColumnLocales.en,
     },
+    // Adds support for advanced table features.
     tables: {
       splitCells: true,
       cellBackgroundColor: true,
       cellTextColor: true,
       headers: true,
     },
+    // Sets initial editor content.
     initialContent: [
       {
         type: "paragraph",
@@ -381,6 +380,8 @@ export default function App() {
       },
     ],
   });
+
+  // Additional Slash Menu items for page breaks and multi-column blocks.
   const getSlashMenuItems = useMemo(() => {
     return async (query: string) =>
       filterSuggestionItems(
@@ -392,37 +393,37 @@ export default function App() {
         query,
       );
   }, [editor]);
-  const onChange = async () => {
+
+  // Exports the editor content to PDF and downloads it.
+  const onDownloadClick = async () => {
     const exporter = new PDFExporter(editor.schema, pdfDefaultSchemaMappings);
-    // Converts the editor's contents from Block objects to HTML and store to state.
-    const pdfDocument = await exporter.toReactPDFDocument(editor.document);
-    setPDFDocument(pdfDocument);
-    forceRerender();
+    const pdfDocument: JSX.Element = await exporter.toReactPDFDocument(
+      editor.document,
+    );
+    const blob = await pdf(pdfDocument).toBlob();
 
-    // const blob = await ReactPDF.pdf(pdfDocument).toBlob();
+    const link = document.createElement("a");
+    link.href = window.URL.createObjectURL(blob);
+    link.download = "My Document (blocknote export).pdf";
+    document.body.appendChild(link);
+    link.dispatchEvent(
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true,
+        view: window,
+      }),
+    );
+    link.remove();
+    window.URL.revokeObjectURL(link.href);
   };
 
-  useEffect(() => {
-    onChange();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // Renders the editor instance, and its contents as HTML below.
+  // Renders the editor instance, and a download button above.
   return (
-    <div className="wrapper">
-      <div className="editor">
-        <BlockNoteView editor={editor} slashMenu={false} onChange={onChange}>
-          <SuggestionMenuController
-            triggerCharacter={"/"}
-            getItems={getSlashMenuItems}
-          />
-        </BlockNoteView>
-      </div>
-      <div className="pdf">
-        <PDFViewer width={"100%"} key={renders}>
-          {pdfDocument}
-        </PDFViewer>
-      </div>
+    <div className="download-wrapper">
+      <button className="download-button" onClick={onDownloadClick}>
+        Download .pdf
+      </button>
+      <BlockNoteView editor={editor} />
     </div>
   );
 }

examples/05-interoperability/05-converting-blocks-to-pdf/src/styles.css

@@ -1,30 +1,21 @@
-.wrapper {
+.download-wrapper {
+  align-items: center;
   display: flex;
-  flex-direction: row;
-  height: 100%;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px;
+  width: 100%;
 }
 
-@media (max-width: 800px) {
-  .wrapper {
-    flex-direction: column;
-  }
-
-  .editor {
-    max-height: 500px;
-    overflow-y: scroll;
-  }
-}
-
-.wrapper > div {
-  flex: 1;
-}
-
-.pdf {
-  min-height: 500px;
-  display: flex;
-  align-items: stretch;
+.download-button {
+  background-color: #0090ff;
+  border: none;
+  border-radius: 4px;
+  color: white;
+  cursor: pointer;
+  width: 100%;
 }
 
-.editor.bordered {
-  border: 1px solid gray;
+.download-button:hover {
+  background-color: #30b0ff;
 }

examples/05-interoperability/06-converting-blocks-to-docx/README.md

@@ -1,5 +1,5 @@
-# Exporting documents to .docx (Office Open XML)
+# Exporting documents to DOCX (Office Open XML)
 
 This example exports the current document (all blocks) as an Microsoft Word Document (DOCX) file and downloads it to your computer.
 
-**Try it out:** Edit the document and click "Download .docx" in top-left corner, to download the DOCX file.
+**Try it out:** Edit the document and click "Download .docx" at the top to download the DOCX file.

examples/05-interoperability/06-converting-blocks-to-docx/index.html

@@ -2,7 +2,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Exporting documents to .docx (Office Open XML)</title>
+    <title>Exporting documents to DOCX (Office Open XML)</title>
     <script>
       <!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY -->
     </script>

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

@@ -29,20 +29,23 @@ import { useMemo } from "react";
 import "./styles.css";
 
 export default function App() {
-  // Creates a new editor instance with some initial content.
+  // Creates a new editor instance.
   const editor = useCreateBlockNote({
+    // Adds support for page breaks & multi-column blocks.
     schema: withMultiColumn(withPageBreak(BlockNoteSchema.create())),
     dropCursor: multiColumnDropCursor,
     dictionary: {
       ...locales.en,
       multi_column: multiColumnLocales.en,
     },
+    // Adds support for advanced table features.
     tables: {
       splitCells: true,
       cellBackgroundColor: true,
       cellTextColor: true,
       headers: true,
     },
+    // Sets initial editor content.
     initialContent: [
       {
         type: "paragraph",
@@ -377,6 +380,8 @@ export default function App() {
       },
     ],
   });
+
+  // Additional Slash Menu items for page breaks and multi-column blocks.
   const getSlashMenuItems = useMemo(() => {
     return async (query: string) =>
       filterSuggestionItems(
@@ -388,9 +393,10 @@ export default function App() {
         query,
       );
   }, [editor]);
+
+  // Exports the editor content to DOCX and downloads it.
   const onDownloadClick = async () => {
     const exporter = new DOCXExporter(editor.schema, docxDefaultSchemaMappings);
-
     const blob = await exporter.toBlob(editor.document);
 
     const link = document.createElement("a");
@@ -408,22 +414,13 @@ export default function App() {
     window.URL.revokeObjectURL(link.href);
   };
 
-  // Renders the editor instance, and its contents as HTML below.
+  // Renders the editor instance, and a download button above.
   return (
-    <div>
-      <div className={"edit-buttons"}>
-        <button className={"edit-button"} onClick={onDownloadClick}>
-          Download .docx
-        </button>
-      </div>
-      <div className="item">
-        <BlockNoteView editor={editor} slashMenu={false}>
-          <SuggestionMenuController
-            triggerCharacter={"/"}
-            getItems={getSlashMenuItems}
-          />
-        </BlockNoteView>
-      </div>
+    <div className="download-wrapper">
+      <button className="download-button" onClick={onDownloadClick}>
+        Download .docx
+      </button>
+      <BlockNoteView editor={editor} />
     </div>
   );
 }

examples/05-interoperability/06-converting-blocks-to-docx/src/styles.css

@@ -1,25 +1,21 @@
-.wrapper {
+.download-wrapper {
+  align-items: center;
   display: flex;
   flex-direction: column;
-  height: 100%;
-}
-
-.item {
-  border-radius: 0.5rem;
-  flex: 1;
-  overflow: hidden;
+  gap: 8px;
+  padding: 8px;
+  width: 100%;
 }
 
-.item.bordered {
-  border: 1px solid gray;
+.download-button {
+  background-color: #0090ff;
+  border: none;
+  border-radius: 4px;
+  color: white;
+  cursor: pointer;
+  width: 100%;
 }
 
-.item pre {
-  border-radius: 0.5rem;
-  height: 100%;
-  overflow: auto;
-  padding-block: 1rem;
-  padding-inline: 54px;
-  width: 100%;
-  white-space: pre-wrap;
+.download-button:hover {
+  background-color: #30b0ff;
 }

examples/05-interoperability/07-converting-blocks-to-odt/README.md

@@ -1,5 +1,5 @@
-# Exporting documents to .odt (Open Document Text)
+# Exporting documents to ODT (Open Document Text)
 
 This example exports the current document (all blocks) as an Open Document Text (ODT) file and downloads it to your computer.
 
-**Try it out:** Edit the document and click "Download .odt" in top-left corner, to download the ODT file.
+**Try it out:** Edit the document and click "Download .odt" at the top to download the ODT file.

examples/05-interoperability/07-converting-blocks-to-odt/index.html

@@ -2,7 +2,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Exporting documents to .odt (Open Document Text)</title>
+    <title>Exporting documents to ODT (Open Document Text)</title>
     <script>
       <!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY -->
     </script>

examples/05-interoperability/07-converting-blocks-to-odt/src/App.tsx

@@ -29,19 +29,23 @@ import { useMemo } from "react";
 import "./styles.css";
 
 export default function App() {
-  // Creates a new editor instance with some initial content.
+  // Creates a new editor instance.
   const editor = useCreateBlockNote({
+    // Adds support for page breaks & multi-column blocks.
     schema: withMultiColumn(withPageBreak(BlockNoteSchema.create())),
     dropCursor: multiColumnDropCursor,
     dictionary: {
       ...locales.en,
       multi_column: multiColumnLocales.en,
     },
+    // Adds support for advanced table features.
     tables: {
       splitCells: true,
-      cellTextColor: true,
       cellBackgroundColor: true,
+      cellTextColor: true,
+      headers: true,
     },
+    // Sets initial editor content.
     initialContent: [
       {
         type: "paragraph",
@@ -375,6 +379,8 @@ export default function App() {
       },
     ],
   });
+
+  // Additional Slash Menu items for page breaks and multi-column blocks.
   const getSlashMenuItems = useMemo(() => {
     return async (query: string) =>
       filterSuggestionItems(
@@ -386,9 +392,10 @@ export default function App() {
         query,
       );
   }, [editor]);
+
+  // Exports the editor content to ODT and downloads it.
   const onDownloadClick = async () => {
     const exporter = new ODTExporter(editor.schema, odtDefaultSchemaMappings);
-
     const blob = await exporter.toODTDocument(editor.document);
 
     const link = document.createElement("a");
@@ -406,22 +413,13 @@ export default function App() {
     window.URL.revokeObjectURL(link.href);
   };
 
-  // Renders the editor instance, and its contents as HTML below.
+  // Renders the editor instance, and a download button above.
   return (
-    <div>
-      <div className={"edit-buttons"}>
-        <button className={"edit-button"} onClick={onDownloadClick}>
-          Download .odt
-        </button>
-      </div>
-      <div className="item">
-        <BlockNoteView editor={editor} slashMenu={false}>
-          <SuggestionMenuController
-            triggerCharacter={"/"}
-            getItems={getSlashMenuItems}
-          />
-        </BlockNoteView>
-      </div>
+    <div className="download-wrapper">
+      <button className="download-button" onClick={onDownloadClick}>
+        Download .odt
+      </button>
+      <BlockNoteView editor={editor} />
     </div>
   );
 }