PDF 导出

可以将 BlockNote 文档完全在客户端导出为 PDF。导出器由 Typst 排版引擎（编译为 WebAssembly）驱动，并生成可访问的带标签文档；请参见 PDF/UA 一致性。

此功能由 @blocknote/xl-pdf-exporter 提供。xl- 系列包完全开源，但采用了强制开源许可证。商业许可证适用于闭源专有产品，包含在商业订阅中。

首先，安装 @blocknote/xl-pdf-exporter 包：

npm install @blocknote/xl-pdf-exporter

然后，创建 PDFExporter 类的实例并导出文档：

import {
  PDFExporter,
  typstDefaultSchemaMappings,
} from "@blocknote/xl-pdf-exporter";

// Create the exporter
const exporter = new PDFExporter(editor.schema, typstDefaultSchemaMappings);

// Export the document; the result carries the PDF as bytes and as a Blob
const result = await exporter.toPDF(editor.document, {
  title: "My document",
  lang: "en",
});
if (!result.error) {
  const url = URL.createObjectURL(result.blob);
  // e.g. open or download `url`
}

这开箱即用且完全离线：导出结果与编辑器的外观一致，所需的一切（默认字体和编译器本身）都包含在包中。不会从 CDN 获取任何内容。

下面是带有实时 PDF 预览的完整示例：

GitHub

StackBlitz

import { testDocumentBlocks } from "./testDocumentBlocks";import {  Block,  BlockNoteSchema,  combineByGroup,  withPageBreak,} from "@blocknote/core";import { filterSuggestionItems } from "@blocknote/core/extensions";import "@blocknote/core/fonts/inter.css";import * as locales from "@blocknote/core/locales";import { BlockNoteView } from "@blocknote/mantine";import "@blocknote/mantine/style.css";import { createReactDiagramBlockSpec } from "@blocknote/diagram-block";import { diagramBlockMapping } from "@blocknote/diagram-block/typst-exporter";import {  createReactInlineMathSpec,  createReactMathBlockSpec,} from "@blocknote/math-block";import {  inlineMathMapping,  mathBlockMapping,} from "@blocknote/math-block/typst-exporter";import {  SuggestionMenuController,  getDefaultReactSlashMenuItems,  getPageBreakReactSlashMenuItems,  useCreateBlockNote,} from "@blocknote/react";import {  PDFExporter,  typstDefaultSchemaMappings,} from "@blocknote/xl-pdf-exporter";import {  getMultiColumnSlashMenuItems,  locales as multiColumnLocales,  multiColumnDropCursor,  withMultiColumn,} from "@blocknote/xl-multi-column";// Bundle the Typst compiler wasm explicitly (it would otherwise load from// the package's own files - also CDN-free - but an explicit URL keeps the// bundling visible in this example).// Fonts need no setup: the exporter's bundled defaults (Inter, Geist Mono,// math, emoji - matching the editor) load lazily from the package.import compilerWasmUrl from "@blocknote/xl-typst-compiler/wasm?url";import { useCallback, useEffect, useMemo, useRef, useState } from "react";import "./styles.css";/** * Exports the given document to a PDF/UA object URL, re-exporting whenever * `blocks` changes. * * The effect-with-cleanup idiom keeps only the newest result: when a newer * version (or unmount) invalidates the effect, the cleanup marks the running * export stale and its result is dropped. Overlapping exports are *safe* - * the exporter serializes its shared compile stage internally - but like any * async calls they may complete out of call order, and which result to * display is this component's concern, not the exporter's. */function usePdfUA(  makeExporter: () => PDFExporter<any, any, any>,  blocks: Block<any, any, any>[],) {  const [pdfUrl, setPdfUrl] = useState<string>();  const [status, setStatus] = useState<    "loading" | "ready" | "unclaimed" | "error"  >("loading");  useEffect(() => {    let stale = false;    setStatus("loading");    void (async () => {      try {        const result = await makeExporter().toPDF(blocks, {          title: "BlockNote document",          lang: "en",        });        if (stale) {          return;        }        // A document that fails to compile (e.g. text no supplied font        // covers) is an expected outcome, reported in the result.        if (result.error) {          // eslint-disable-next-line no-console          console.error(            "PDF export failed:",            result.compileErrors.map((d) => d.message).join("; "),          );          setStatus("error");          return;        }        // A nonconforming document (e.g. one not starting with an H1) still        // exports - tagged but without the PDF/UA-1 claim; surface why, and        // show a distinct status instead of claiming conformance.        if (!result.pdfUA.declared && result.pdfUA.reason === "nonconforming") {          // eslint-disable-next-line no-console          console.info(            "Exported without PDF/UA-1 declaration:",            result.pdfUA.violations.map((v) => v.message).join("; "),          );        }        setPdfUrl(URL.createObjectURL(result.blob));        setStatus(result.pdfUA.declared ? "ready" : "unclaimed");      } catch (e) {        if (stale) {          return;        }        // eslint-disable-next-line no-console        console.error(e);        setStatus("error");      }    })();    return () => {      stale = true;    };  }, [makeExporter, blocks]);  // Each object URL is revoked when replaced by the next one (and the last  // one on unmount).  useEffect(() => {    return () => {      if (pdfUrl) {        URL.revokeObjectURL(pdfUrl);      }    };  }, [pdfUrl]);  return { pdfUrl, status };}export default function App() {  // Creates a new editor instance with support for page breaks.  const editor = useCreateBlockNote({    // Adds support for math & diagram blocks.    schema: withMultiColumn(withPageBreak(BlockNoteSchema.create())).extend({      blockSpecs: {        mathBlock: createReactMathBlockSpec(),        diagram: createReactDiagramBlockSpec(),      },      inlineContentSpecs: {        math: createReactInlineMathSpec(),      },    }),    dropCursor: multiColumnDropCursor,    dictionary: {      ...locales.en,      multi_column: multiColumnLocales.en,    },    tables: {      splitCells: true,      cellBackgroundColor: true,      cellTextColor: true,      headers: true,    },    initialContent: [      ...testDocumentBlocks,      // The math & diagram blocks aren't part of the shared test document,      // since the exporter unit tests' schemas don't register them, so they're      // appended here instead.      {        type: "mathBlock",        content: "a^2 = \\sqrt{b^2 + c^2}",      },      {        type: "diagram",        content: `graph TD  A[Start] --> B{Works?}  B -->|Yes| C[Ship it]  B -->|No| A`,      },      {        type: "paragraph",        content: [          {            type: "text",            text: "Inline math: ",            styles: {},          },          {            type: "math",            content: "e^{i\\pi} + 1 = 0",          },        ],      },    ],  });  // Additional Slash Menu items for page breaks.  const getSlashMenuItems = useMemo(    () => async (query: string) =>      filterSuggestionItems(        combineByGroup(          getDefaultReactSlashMenuItems(editor),          getPageBreakReactSlashMenuItems(editor),          getMultiColumnSlashMenuItems(editor),        ),        query,      ),    [editor],  );  // A fresh exporter per export: its asset registry is append-only for the  // exporter's lifetime, so reusing one across re-exports would accumulate  // every image/diagram variant it has ever rendered.  const makeExporter = useCallback(    () =>      new PDFExporter(        editor.schema,        {          ...typstDefaultSchemaMappings,          blockMapping: {            ...typstDefaultSchemaMappings.blockMapping,            // Renders math blocks as native Typst equations, and diagrams as            // embedded images - both carrying alt text for PDF/UA.            mathBlock: mathBlockMapping,            diagram: diagramBlockMapping,          },          inlineContentMapping: {            ...typstDefaultSchemaMappings.inlineContentMapping,            math: inlineMathMapping,          },        },        {          // The bundled compiler wasm (see the import above) - engine setup          // belongs to the exporter, per-document facts go to toPDF.          wasm: compilerWasmUrl,        },      ),    [editor],  );  // The document snapshot driving the export - the export effect depends on  // the data it exports. Updated debounced: reading `editor.document`  // converts the whole document to blocks, so it shouldn't run (and the  // export shouldn't restart) on every keystroke.  const [blocks, setBlocks] = useState(() => editor.document);  const { pdfUrl, status } = usePdfUA(makeExporter, blocks);  const debounceTimer = useRef<ReturnType<typeof setTimeout>>(undefined);  useEffect(() => () => clearTimeout(debounceTimer.current), []);  const onChange = () => {    clearTimeout(debounceTimer.current);    debounceTimer.current = setTimeout(() => setBlocks(editor.document), 600);  };  const onDownloadClick = () => {    if (!pdfUrl) {      return;    }    const link = document.createElement("a");    link.href = pdfUrl;    link.download = "blocknote (pdf-ua).pdf";    document.body.appendChild(link);    link.click();    link.remove();  };  const label =    status === "loading"      ? "Generating…"      : status === "error"        ? "Export failed (see console)"        : status === "unclaimed"          ? "Tagged PDF, no UA-1 claim (see console)"          : "✓ Tagged PDF/UA-1";  return (    <div className="views">      <div className="view-wrapper">        <div className="view-label">Editor Input</div>        <div className="view">          <BlockNoteView editor={editor} slashMenu={false} onChange={onChange}>            <SuggestionMenuController              triggerCharacter={"/"}              getItems={getSlashMenuItems}            />          </BlockNoteView>        </div>      </div>      <div className="view-wrapper">        <div className="view-label">          {label}          <button            type="button"            className="view-label-download"            onClick={onDownloadClick}          >            Download          </button>        </div>        <div className="view">          {pdfUrl ? (            <iframe              title="PDF/UA output"              height="100%"              width="100%"              src={pdfUrl}            />          ) : null}        </div>      </div>    </div>  );}

.views {  container-name: views;  container-type: inline-size;  display: flex;  flex-direction: row;  flex-wrap: wrap;  gap: 8px;  height: 100%;  padding: 8px;}.view-wrapper {  display: flex;  flex-direction: column;  height: calc(50% - 4px);  width: 100%;}@container views (width > 1024px) {  .view-wrapper {    height: 100%;    width: calc(50% - 4px);  }}.view-label {  color: #0090ff;  display: flex;  font-size: 12px;  font-weight: bold;  justify-content: space-between;  margin-inline: 16px;}/* A real <button> (keyboard-focusable), restyled to match the label text. */.view-label-download {  background: none;  border: none;  color: inherit;  font: inherit;  padding: 0;  cursor: pointer;  text-decoration: underline;}.view {  border: solid #0090ff 1px;  border-radius: 16px;  flex: 1;  height: 0;  padding: 8px;}.view .bn-container {  height: 100%;  margin: 0;  max-width: none;  padding: 0;}.view .bn-editor {  height: 100%;  overflow: auto;}.view iframe {  border: none;  border-radius: 8px;}

// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY.// Generated from shared/testDocumentBlocks.ts — run `pnpm run gen` to update.import type { PartialBlock } from "@blocknote/core";/** * The shared example/test document, as partial blocks. * * This file is intentionally self-contained — it has only a type-only import * from `@blocknote/core` (no runtime imports) — so the example generator can * copy it verbatim into each exporter playground example and the examples stay * runnable on their own (e.g. opened directly in StackBlitz). * * It is the single source of truth for both the playground examples' editor * `initialContent` and the exporters' `testDocument` unit-test fixture. */export const testDocumentBlocks: PartialBlock<any, any, any>[] = [  {    type: "paragraph",    content: [      {        type: "text",        text: "Welcome to this ",        styles: {          italic: true,        },      },      {        type: "text",        text: "demo 🙌!",        styles: {          italic: true,          bold: true,        },      },    ],    children: [      {        type: "paragraph",        content: "Hello World nested",        children: [          {            type: "paragraph",            content: "Hello World double nested",          },        ],      },    ],  },  {    type: "paragraph",    content: [      {        type: "text",        text: "This paragraph has a background color",        styles: { bold: true },      },    ],    props: {      backgroundColor: "red",    },  },  {    type: "paragraph",    content: "Paragraph",  },  // An empty paragraph: a blank line in the editor, which exporters must  // preserve as vertical space rather than dropping the block.  {    type: "paragraph",  },  {    type: "heading",    content: "Heading",  },  {    type: "heading",    content: "Heading right",    props: {      textAlignment: "right",    },  },  {    type: "heading",    content: "Heading 2",    props: { level: 2 },  },  {    type: "heading",    content: "Heading 3",    props: { level: 3 },  },  {    type: "heading",    content: "Heading 4",    props: { level: 4 },  },  {    type: "heading",    content: "Heading 5",    props: { level: 5 },  },  {    type: "heading",    content: "Heading 6",    props: { level: 6 },  },  {    type: "paragraph",    content: "Emojis: 😀 🎉 🚀 👍 👍🏽 🌍 🚶‍♀️",  },  {    type: "paragraph",    content: "Centered paragraph",    props: {      textAlignment: "center",    },  },  {    type: "paragraph",    content:      "justified paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",    props: {      textAlignment: "justify",    },  },  { type: "pageBreak" },  {    type: "bulletListItem",    content:      "Bullet List Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",    children: [      {        type: "bulletListItem",        content:          "Bullet List Item.  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",      },      {        type: "bulletListItem",        content:          "Bullet List Item right. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",        props: {          textAlignment: "right",        },      },      {        type: "numberedListItem",        content: "Numbered List Item 1",      },      {        type: "numberedListItem",        content: "Numbered List Item 2",        children: [          {            type: "numberedListItem",            content: "Numbered List Item Nested 1",          },          {            type: "numberedListItem",            content: "Numbered List Item Nested 2",          },          {            type: "numberedListItem",            content: "Numbered List Item Nested funky right",            props: {              textAlignment: "right",              backgroundColor: "red",              textColor: "blue",            },          },          {            type: "numberedListItem",            content: "Numbered List Item Nested funky center",            props: {              textAlignment: "center",              backgroundColor: "red",              textColor: "blue",            },          },        ],      },    ],  },  {    type: "numberedListItem",    content: "Numbered List Item",  },  {    type: "checkListItem",    content: "Check List Item",  },  {    type: "checkListItem",    content: "Checked List Item",    props: {      checked: true,    },  },  {    type: "numberedListItem",    content: "Numbered List Item starting at 5",    props: {      start: 5,    },  },  {    type: "numberedListItem",    content: "Numbered List Item 6",  },  {    type: "toggleListItem",    content: "Toggle List Item",    children: [      {        type: "paragraph",        content: "Content nested inside the toggle list item.",      },      {        type: "bulletListItem",        content: "A nested bullet inside the toggle",      },    ],  },  {    type: "heading",    content: "Toggle Heading",    props: {      level: 2,      isToggleable: true,    },    children: [      {        type: "paragraph",        content: "Content nested inside the toggle heading.",      },    ],  },  {    type: "table",    content: {      type: "tableContent",      columnWidths: [200, undefined, undefined],      rows: [        {          cells: ["Wide Cell", "Table Cell", "Table Cell"],        },        {          cells: ["Wide Cell", "Table Cell", "Table Cell"],        },        {          cells: ["Wide Cell", "Table Cell", "Table Cell"],        },      ],    },  },  {    type: "file",  },  {    type: "image",    props: {      url: "https://placehold.co/332x322.jpg",      caption: "From https://placehold.co/332x322.jpg",    },  },  {    type: "image",    props: {      previewWidth: 200,      url: "https://placehold.co/332x322.jpg",      textAlignment: "right",    },  },  {    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: "audio",    props: {      caption: "Audio file caption",      name: "audio.mp3",    },  },  {    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: "text",        text: "underlined",        styles: { underline: true },      },      {        type: "text",        text: " ",        styles: {},      },      {        type: "text",        text: "strikethrough",        styles: { strike: true },      },      {        type: "text",        text: " ",        styles: {},      },      {        type: "link",        content: "Link",        href: "https://www.blocknotejs.org",      },    ],  },  {    type: "table",    content: {      type: "tableContent",      headerRows: 1,      rows: [        {          cells: ["Table Header 1", "Table Header 2", "Table Header 3"],        },        {          cells: [            "Table Cell 4",            [              {                type: "text",                text: "Table Cell Bold Colored 5",                styles: {                  bold: true,                  textColor: "red",                  backgroundColor: "blue",                },              },            ],            "Table Cell 6",          ],        },        {          cells: ["Table Cell 7", "Table Cell 8", "Table Cell 9"],        },      ],    },  },  // An "advanced" table: two header rows and merged cells (colspan /  // rowspan) - the features behind the editor's `splitCells` /  // `headers` table options, which exporters must place correctly.  {    type: "table",    content: {      type: "tableContent",      // Explicit widths for all three tracks: the merged first-row cell      // means the row alone doesn't reveal the column count.      columnWidths: [undefined, undefined, undefined],      headerRows: 2,      rows: [        {          cells: [            {              type: "tableCell",              content: "Merged Header",              props: { colspan: 2 },            },            { type: "tableCell", content: "Header C" },          ],        },        {          cells: ["Header A", "Header B", "Header C2"],        },        {          cells: [            {              type: "tableCell",              content: "Merged Rows",              props: { rowspan: 2 },            },            { type: "tableCell", content: "Cell B1" },            { type: "tableCell", content: "Cell C1" },          ],        },        {          cells: ["Cell B2", "Cell C2"],        },      ],    },  },  // A hard line break (shift+enter) inside one paragraph - a single block  // whose text spans two lines.  {    type: "paragraph",    content: "A hard line break\nwithin a single paragraph",  },  {    type: "codeBlock",    props: {      language: "javascript",    },    content: `const helloWorld = (message) => {  console.log("Hello World", message);};`,  },  {    type: "paragraph",    content: [      {        type: "text",        text: "Some inline code: ",        styles: { bold: true },      },      {        type: "text",        text: "var foo = 'bar';",        styles: { code: true },      },    ],  },  {    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" },        ],      },    ],  },  { type: "divider" },  {    type: "quote",    content: "All those moments will be lost in time, like tears in rain.",  },];

PDF 自定义

toPDF 接受每次导出的选项，用于设置文档元数据和页面布局。

const result = await exporter.toPDF(editor.document, {
  // Document title, shown in the viewer's title bar
  title: "My document",
  // Document author, written to the PDF metadata
  author: "John Doe",
  // BCP-47 language tag of the document's natural language
  lang: "en",
  // Typst paper name, e.g. "a4" (default) or "us-letter"
  paper: "a4",
  // Page margin as a Typst length
  margin: "48pt",
  // Raw Typst markup for the running page header / footer, e.g. a
  // page counter: "#context counter(page).display()"
  header: "My document",
  footer: "#context counter(page).display()",
});

其余导出选项包括 tryDeclarePdfUA、assets（供调用方提供的页眉/页脚标记使用的额外文件）以及 creationTimestamp（用于生成字节可复现输出的固定 Unix 时间戳）。

如果文档编译失败（例如，文本使用了已加载字体不支持的文字），结果会报告 { error: "compile-failed" } 及编译器诊断信息，而不是抛出异常。

PDF/UA 一致性

生成的 PDF 始终带有标签：它包含逻辑结构树（标题、段落、列表、表格、带替代文本的图形、链接），屏幕阅读器可以使用它进行导航。此外，只有当文档满足条件时，导出器才会声明 PDF/UA-1 一致性：Typst 会在编译期间验证一致性；不符合要求的文档会以带标签但未声明的形式导出，并在结果中报告违规内容：

const result = await exporter.toPDF(editor.document, {
  title: "My document",
  lang: "en",
});
if (
  !result.error &&
  !result.pdfUA.declared &&
  result.pdfUA.reason === "nonconforming"
) {
  // e.g. "PDF/UA-1 error: the first heading must be of level 1"
  console.info(result.pdfUA.violations.map((v) => v.message));
}

该文档要满足的一致性要求：

标题和语言：在导出选项中传入 title 和 lang。lang 是尝试声明一致性的必要参数：错误的语言声明属于任何验证器都无法捕获的可访问性缺陷，因此不传入它会抛出异常。
标题层级：第一个标题必须为 1 级，且层级必须连续（不能从 H1 跳到 H3）。

图像始终会获得 PDF/UA 要求的替代文本，该文本取自标题，文件名作为后备。标题通常是更好的替代文本，因此应鼓励用户添加标题。

在导出选项中传入 tryDeclarePdfUA: false 可以完全跳过验证和声明，例如用于实时预览时，避免浪费验证编译的开销。对于实时预览，还应为每次导出创建新的导出器，因为一个实例会累积其解析的图像资源。

自定义映射 / 自定义 Schema

PDFExporter 构造函数接受 schema 和 mappings 参数。一个 mapping 会将 BlockNote schema 元素转换为 Typst 标记字符串，这些映射与独立的 Typst 导出共用。请参阅其中的自定义映射；关于编写映射的所有内容同样适用于此导出器。

数学和图表区块

数学和图表区块自带 Typst 映射：数学内容会导出为原生 Typst 公式（真实文本，而非图像），图表会导出为嵌入式矢量图形。有关设置，请参阅导出数学公式和导出图表。

字体

默认情况下，导出使用与编辑器匹配的内置字体集：Inter（正文）、Geist Mono（代码）、New Computer Modern Math（数学）和 Noto Color Emoji。若要改用自己的字体，请将字体字节和对应的字体系列名称传递给构造函数：

const exporter = new PDFExporter(editor.schema, typstDefaultSchemaMappings, {
  fontFamily: "My Font",
  monoFontFamily: "My Mono Font",
  // Uint8Array[], or a promise of them
  fonts: [myFontBytes, myMonoFontBytes],
  // An emoji-capable font; replaces the default independently of `fonts`
  emojiFont: myEmojiFontBytes,
});

Typst 会根据字体文件本身嵌入的字体系列名称选择字体，因此 fontFamily 选项必须与文件声明的名称匹配。不匹配时，结果的 compileWarnings 中会出现 unknown font family 条目。

要扩展默认字体而不是替换它们（例如添加 CJK 字体作为逐字形后备），请展开导出的默认加载器：

import {
  DEFAULT_FONT_FAMILY,
  loadDefaultBodyFonts,
  PDFExporter,
  typstDefaultSchemaMappings,
} from "@blocknote/xl-pdf-exporter";

const exporter = new PDFExporter(editor.schema, typstDefaultSchemaMappings, {
  fontFamily: [DEFAULT_FONT_FAMILY, "Noto Sans SC"],
  fonts: loadDefaultBodyFonts().then((fonts) => [...fonts, notoSansSCBytes]),
});

自托管编译器

Typst 编译器是来自 @blocknote/xl-typst-compiler 的约 25 MB wasm 文件，默认情况下由你的 bundler 作为资源输出。要控制其提供位置（例如设置缓存标头），请传入其 URL 或字节：

import compilerWasmUrl from "@blocknote/xl-typst-compiler/wasm?url";

const exporter = new PDFExporter(editor.schema, typstDefaultSchemaMappings, {
  wasm: compilerWasmUrl,
});

导出器选项

PDFExporter 构造函数接受一个可选的第三个 options 参数：

const defaultOptions = {
  // a function to resolve external resources (e.g. images) in order to avoid
  // CORS issues; by default, this calls a BlockNote hosted server-side proxy
  resolveFileUrl: corsProxyResolveFileUrl,
  // the strings rendered into the exported document (file link texts, error
  // placeholders); pass a locale from @blocknote/core/locales (or your
  // editor's dictionary) to export in another language
  dictionary: locales.en,
  // the colors used for highlighting, background colors and font colors
  colors: COLORS_DEFAULT, // defaults from @blocknote/core
  // font families (DEFAULT_FONT_FAMILY / DEFAULT_MONO_FONT_FAMILY) and the
  // font bytes they resolve against - see "Fonts" above
  fontFamily: "Inter 18pt",
  monoFontFamily: "Geist Mono",
  fonts: loadDefaultBodyFonts(),
  emojiFont: loadDefaultEmojiFont(),
  // base font size in points
  fontSize: 12,
  // where the compiler wasm loads from - see "Self-hosting the compiler"
  wasm: undefined, // the packaged wasm
};

导出 Typst 标记

底层 Typst 源代码导出可以独立使用（例如使用你自己的 Typst 工具链，包括在服务端进行编译）；请参阅 Typst 导出。

已弃用：react-pdf 导出器

之前版本的 @blocknote/xl-pdf-exporter 使用 react-pdf 导出 PDF，生成不带标签（不可访问）的文档。该导出器已弃用，并将在几个版本后移除；在此之前，它仍可通过 @blocknote/xl-pdf-exporter/react-pdf 子路径保持原样使用：

import {
  PDFExporter,
  pdfDefaultSchemaMappings,
} from "@blocknote/xl-pdf-exporter/react-pdf";

请注意，它的映射是 react-pdf 映射；迁移到新导出器时，自定义区块需要改用 Typst 映射。旧导出器的示例仍位于此处。

import { testDocumentBlocks } from "./testDocumentBlocks"; import { Block, BlockNoteSchema, combineByGroup, withPageBreak, } from "@blocknote/core"; import { filterSuggestionItems } from "@blocknote/core/extensions"; import "@blocknote/core/fonts/inter.css"; import * as locales from "@blocknote/core/locales"; import { BlockNoteView } from "@blocknote/mantine"; import "@blocknote/mantine/style.css"; import { createReactDiagramBlockSpec } from "@blocknote/diagram-block"; import { diagramBlockMapping } from "@blocknote/diagram-block/typst-exporter"; import { createReactInlineMathSpec, createReactMathBlockSpec, } from "@blocknote/math-block"; import { inlineMathMapping, mathBlockMapping, } from "@blocknote/math-block/typst-exporter"; import { SuggestionMenuController, getDefaultReactSlashMenuItems, getPageBreakReactSlashMenuItems, useCreateBlockNote, } from "@blocknote/react"; import { PDFExporter, typstDefaultSchemaMappings, } from "@blocknote/xl-pdf-exporter"; import { getMultiColumnSlashMenuItems, locales as multiColumnLocales, multiColumnDropCursor, withMultiColumn, } from "@blocknote/xl-multi-column"; // Bundle the Typst compiler wasm explicitly (it would otherwise load from // the package's own files - also CDN-free - but an explicit URL keeps the // bundling visible in this example). // Fonts need no setup: the exporter's bundled defaults (Inter, Geist Mono, // math, emoji - matching the editor) load lazily from the package. import compilerWasmUrl from "@blocknote/xl-typst-compiler/wasm?url"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import "./styles.css"; /** * Exports the given document to a PDF/UA object URL, re-exporting whenever * `blocks` changes. * * The effect-with-cleanup idiom keeps only the newest result: when a newer * version (or unmount) invalidates the effect, the cleanup marks the running * export stale and its result is dropped. Overlapping exports are *safe* - * the exporter serializes its shared compile stage internally - but like any * async calls they may complete out of call order, and which result to * display is this component's concern, not the exporter's. */ function usePdfUA( makeExporter: () => PDFExporter<any, any, any>, blocks: Block<any, any, any>[], ) { const [pdfUrl, setPdfUrl] = useState<string>(); const [status, setStatus] = useState< "loading" | "ready" | "unclaimed" | "error" >("loading"); useEffect(() => { let stale = false; setStatus("loading"); void (async () => { try { const result = await makeExporter().toPDF(blocks, { title: "BlockNote document", lang: "en", }); if (stale) { return; } // A document that fails to compile (e.g. text no supplied font // covers) is an expected outcome, reported in the result. if (result.error) { // eslint-disable-next-line no-console console.error( "PDF export failed:", result.compileErrors.map((d) => d.message).join("; "), ); setStatus("error"); return; } // A nonconforming document (e.g. one not starting with an H1) still // exports - tagged but without the PDF/UA-1 claim; surface why, and // show a distinct status instead of claiming conformance. if (!result.pdfUA.declared && result.pdfUA.reason === "nonconforming") { // eslint-disable-next-line no-console console.info( "Exported without PDF/UA-1 declaration:", result.pdfUA.violations.map((v) => v.message).join("; "), ); } setPdfUrl(URL.createObjectURL(result.blob)); setStatus(result.pdfUA.declared ? "ready" : "unclaimed"); } catch (e) { if (stale) { return; } // eslint-disable-next-line no-console console.error(e); setStatus("error"); } })(); return () => { stale = true; }; }, [makeExporter, blocks]); // Each object URL is revoked when replaced by the next one (and the last // one on unmount). useEffect(() => { return () => { if (pdfUrl) { URL.revokeObjectURL(pdfUrl); } }; }, [pdfUrl]); return { pdfUrl, status }; } export default function App() { // Creates a new editor instance with support for page breaks. const editor = useCreateBlockNote({ // Adds support for math & diagram blocks. schema: withMultiColumn(withPageBreak(BlockNoteSchema.create())).extend({ blockSpecs: { mathBlock: createReactMathBlockSpec(), diagram: createReactDiagramBlockSpec(), }, inlineContentSpecs: { math: createReactInlineMathSpec(), }, }), dropCursor: multiColumnDropCursor, dictionary: { ...locales.en, multi_column: multiColumnLocales.en, }, tables: { splitCells: true, cellBackgroundColor: true, cellTextColor: true, headers: true, }, initialContent: [ ...testDocumentBlocks, // The math & diagram blocks aren't part of the shared test document, // since the exporter unit tests' schemas don't register them, so they're // appended here instead. { type: "mathBlock", content: "a^2 = \\sqrt{b^2 + c^2}", }, { type: "diagram", content: `graph TD A[Start] --> B{Works?} B -->|Yes| C[Ship it] B -->|No| A`, }, { type: "paragraph", content: [ { type: "text", text: "Inline math: ", styles: {}, }, { type: "math", content: "e^{i\\pi} + 1 = 0", }, ], }, ], }); // Additional Slash Menu items for page breaks. const getSlashMenuItems = useMemo( () => async (query: string) => filterSuggestionItems( combineByGroup( getDefaultReactSlashMenuItems(editor), getPageBreakReactSlashMenuItems(editor), getMultiColumnSlashMenuItems(editor), ), query, ), [editor], ); // A fresh exporter per export: its asset registry is append-only for the // exporter's lifetime, so reusing one across re-exports would accumulate // every image/diagram variant it has ever rendered. const makeExporter = useCallback( () => new PDFExporter( editor.schema, { ...typstDefaultSchemaMappings, blockMapping: { ...typstDefaultSchemaMappings.blockMapping, // Renders math blocks as native Typst equations, and diagrams as // embedded images - both carrying alt text for PDF/UA. mathBlock: mathBlockMapping, diagram: diagramBlockMapping, }, inlineContentMapping: { ...typstDefaultSchemaMappings.inlineContentMapping, math: inlineMathMapping, }, }, { // The bundled compiler wasm (see the import above) - engine setup // belongs to the exporter, per-document facts go to toPDF. wasm: compilerWasmUrl, }, ), [editor], ); // The document snapshot driving the export - the export effect depends on // the data it exports. Updated debounced: reading `editor.document` // converts the whole document to blocks, so it shouldn't run (and the // export shouldn't restart) on every keystroke. const [blocks, setBlocks] = useState(() => editor.document); const { pdfUrl, status } = usePdfUA(makeExporter, blocks); const debounceTimer = useRef<ReturnType<typeof setTimeout>>(undefined); useEffect(() => () => clearTimeout(debounceTimer.current), []); const onChange = () => { clearTimeout(debounceTimer.current); debounceTimer.current = setTimeout(() => setBlocks(editor.document), 600); }; const onDownloadClick = () => { if (!pdfUrl) { return; } const link = document.createElement("a"); link.href = pdfUrl; link.download = "blocknote (pdf-ua).pdf"; document.body.appendChild(link); link.click(); link.remove(); }; const label = status === "loading" ? "Generating…" : status === "error" ? "Export failed (see console)" : status === "unclaimed" ? "Tagged PDF, no UA-1 claim (see console)" : "✓ Tagged PDF/UA-1"; return ( <div className="views"> <div className="view-wrapper"> <div className="view-label">Editor Input</div> <div className="view"> <BlockNoteView editor={editor} slashMenu={false} onChange={onChange}> <SuggestionMenuController triggerCharacter={"/"} getItems={getSlashMenuItems} /> </BlockNoteView> </div> </div> <div className="view-wrapper"> <div className="view-label"> {label} <button type="button" className="view-label-download" onClick={onDownloadClick} > Download </button> </div> <div className="view"> {pdfUrl ? ( <iframe title="PDF/UA output" height="100%" width="100%" src={pdfUrl} /> ) : null} </div> </div> </div> ); }

import { testDocumentBlocks } from "./testDocumentBlocks";import { Block, BlockNoteSchema, combineByGroup, withPageBreak,} from "@blocknote/core";import { filterSuggestionItems } from "@blocknote/core/extensions";import "@blocknote/core/fonts/inter.css";import * as locales from "@blocknote/core/locales";import { BlockNoteView } from "@blocknote/mantine";import "@blocknote/mantine/style.css";import { createReactDiagramBlockSpec } from "@blocknote/diagram-block";import { diagramBlockMapping } from "@blocknote/diagram-block/typst-exporter";import { createReactInlineMathSpec, createReactMathBlockSpec,} from "@blocknote/math-block";import { inlineMathMapping, mathBlockMapping,} from "@blocknote/math-block/typst-exporter";import { SuggestionMenuController, getDefaultReactSlashMenuItems, getPageBreakReactSlashMenuItems, useCreateBlockNote,} from "@blocknote/react";import { PDFExporter, typstDefaultSchemaMappings,} from "@blocknote/xl-pdf-exporter";import { getMultiColumnSlashMenuItems, locales as multiColumnLocales, multiColumnDropCursor, withMultiColumn,} from "@blocknote/xl-multi-column";// Bundle the Typst compiler wasm explicitly (it would otherwise load from// the package's own files - also CDN-free - but an explicit URL keeps the// bundling visible in this example).// Fonts need no setup: the exporter's bundled defaults (Inter, Geist Mono,// math, emoji - matching the editor) load lazily from the package.import compilerWasmUrl from "@blocknote/xl-typst-compiler/wasm?url";import { useCallback, useEffect, useMemo, useRef, useState } from "react";import "./styles.css";/** * Exports the given document to a PDF/UA object URL, re-exporting whenever * `blocks` changes. * * The effect-with-cleanup idiom keeps only the newest result: when a newer * version (or unmount) invalidates the effect, the cleanup marks the running * export stale and its result is dropped. Overlapping exports are *safe* - * the exporter serializes its shared compile stage internally - but like any * async calls they may complete out of call order, and which result to * display is this component's concern, not the exporter's. */function usePdfUA( makeExporter: () => PDFExporter<any, any, any>, blocks: Block<any, any, any>[],) { const [pdfUrl, setPdfUrl] = useState<string>(); const [status, setStatus] = useState< "loading" | "ready" | "unclaimed" | "error" >("loading"); useEffect(() => { let stale = false; setStatus("loading"); void (async () => { try { const result = await makeExporter().toPDF(blocks, { title: "BlockNote document", lang: "en", }); if (stale) { return; } // A document that fails to compile (e.g. text no supplied font // covers) is an expected outcome, reported in the result. if (result.error) { // eslint-disable-next-line no-console console.error( "PDF export failed:", result.compileErrors.map((d) => d.message).join("; "), ); setStatus("error"); return; } // A nonconforming document (e.g. one not starting with an H1) still // exports - tagged but without the PDF/UA-1 claim; surface why, and // show a distinct status instead of claiming conformance. if (!result.pdfUA.declared && result.pdfUA.reason === "nonconforming") { // eslint-disable-next-line no-console console.info( "Exported without PDF/UA-1 declaration:", result.pdfUA.violations.map((v) => v.message).join("; "), ); } setPdfUrl(URL.createObjectURL(result.blob)); setStatus(result.pdfUA.declared ? "ready" : "unclaimed"); } catch (e) { if (stale) { return; } // eslint-disable-next-line no-console console.error(e); setStatus("error"); } })(); return () => { stale = true; }; }, [makeExporter, blocks]); // Each object URL is revoked when replaced by the next one (and the last // one on unmount). useEffect(() => { return () => { if (pdfUrl) { URL.revokeObjectURL(pdfUrl); } }; }, [pdfUrl]); return { pdfUrl, status };}export default function App() { // Creates a new editor instance with support for page breaks. const editor = useCreateBlockNote({ // Adds support for math & diagram blocks. schema: withMultiColumn(withPageBreak(BlockNoteSchema.create())).extend({ blockSpecs: { mathBlock: createReactMathBlockSpec(), diagram: createReactDiagramBlockSpec(), }, inlineContentSpecs: { math: createReactInlineMathSpec(), }, }), dropCursor: multiColumnDropCursor, dictionary: { ...locales.en, multi_column: multiColumnLocales.en, }, tables: { splitCells: true, cellBackgroundColor: true, cellTextColor: true, headers: true, }, initialContent: [ ...testDocumentBlocks, // The math & diagram blocks aren't part of the shared test document, // since the exporter unit tests' schemas don't register them, so they're // appended here instead. { type: "mathBlock", content: "a^2 = \\sqrt{b^2 + c^2}", }, { type: "diagram", content: `graph TD A[Start] --> B{Works?} B -->|Yes| C[Ship it] B -->|No| A`, }, { type: "paragraph", content: [ { type: "text", text: "Inline math: ", styles: {}, }, { type: "math", content: "e^{i\\pi} + 1 = 0", }, ], }, ], }); // Additional Slash Menu items for page breaks. const getSlashMenuItems = useMemo( () => async (query: string) => filterSuggestionItems( combineByGroup( getDefaultReactSlashMenuItems(editor), getPageBreakReactSlashMenuItems(editor), getMultiColumnSlashMenuItems(editor), ), query, ), [editor], ); // A fresh exporter per export: its asset registry is append-only for the // exporter's lifetime, so reusing one across re-exports would accumulate // every image/diagram variant it has ever rendered. const makeExporter = useCallback( () => new PDFExporter( editor.schema, { ...typstDefaultSchemaMappings, blockMapping: { ...typstDefaultSchemaMappings.blockMapping, // Renders math blocks as native Typst equations, and diagrams as // embedded images - both carrying alt text for PDF/UA. mathBlock: mathBlockMapping, diagram: diagramBlockMapping, }, inlineContentMapping: { ...typstDefaultSchemaMappings.inlineContentMapping, math: inlineMathMapping, }, }, { // The bundled compiler wasm (see the import above) - engine setup // belongs to the exporter, per-document facts go to toPDF. wasm: compilerWasmUrl, }, ), [editor], ); // The document snapshot driving the export - the export effect depends on // the data it exports. Updated debounced: reading `editor.document` // converts the whole document to blocks, so it shouldn't run (and the // export shouldn't restart) on every keystroke. const [blocks, setBlocks] = useState(() => editor.document); const { pdfUrl, status } = usePdfUA(makeExporter, blocks); const debounceTimer = useRef<ReturnType<typeof setTimeout>>(undefined); useEffect(() => () => clearTimeout(debounceTimer.current), []); const onChange = () => { clearTimeout(debounceTimer.current); debounceTimer.current = setTimeout(() => setBlocks(editor.document), 600); }; const onDownloadClick = () => { if (!pdfUrl) { return; } const link = document.createElement("a"); link.href = pdfUrl; link.download = "blocknote (pdf-ua).pdf"; document.body.appendChild(link); link.click(); link.remove(); }; const label = status === "loading" ? "Generating…" : status === "error" ? "Export failed (see console)" : status === "unclaimed" ? "Tagged PDF, no UA-1 claim (see console)" : "✓ Tagged PDF/UA-1"; return ( <div className="views"> <div className="view-wrapper"> <div className="view-label">Editor Input</div> <div className="view"> <BlockNoteView editor={editor} slashMenu={false} onChange={onChange}> <SuggestionMenuController triggerCharacter={"/"} getItems={getSlashMenuItems} /> </BlockNoteView> </div> </div> <div className="view-wrapper"> <div className="view-label"> {label} <button type="button" className="view-label-download" onClick={onDownloadClick} > Download </button> </div> <div className="view"> {pdfUrl ? ( <iframe title="PDF/UA output" height="100%" width="100%" src={pdfUrl} /> ) : null} </div> </div> </div> );}

.views { container-name: views; container-type: inline-size; display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; height: 100%; padding: 8px; } .view-wrapper { display: flex; flex-direction: column; height: calc(50% - 4px); width: 100%; } @container views (width > 1024px) { .view-wrapper { height: 100%; width: calc(50% - 4px); } } .view-label { color: #0090ff; display: flex; font-size: 12px; font-weight: bold; justify-content: space-between; margin-inline: 16px; } /* A real <button> (keyboard-focusable), restyled to match the label text. */ .view-label-download { background: none; border: none; color: inherit; font: inherit; padding: 0; cursor: pointer; text-decoration: underline; } .view { border: solid #0090ff 1px; border-radius: 16px; flex: 1; height: 0; padding: 8px; } .view .bn-container { height: 100%; margin: 0; max-width: none; padding: 0; } .view .bn-editor { height: 100%; overflow: auto; } .view iframe { border: none; border-radius: 8px; }

.views { container-name: views; container-type: inline-size; display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; height: 100%; padding: 8px;}.view-wrapper { display: flex; flex-direction: column; height: calc(50% - 4px); width: 100%;}@container views (width > 1024px) { .view-wrapper { height: 100%; width: calc(50% - 4px); }}.view-label { color: #0090ff; display: flex; font-size: 12px; font-weight: bold; justify-content: space-between; margin-inline: 16px;}/* A real <button> (keyboard-focusable), restyled to match the label text. */.view-label-download { background: none; border: none; color: inherit; font: inherit; padding: 0; cursor: pointer; text-decoration: underline;}.view { border: solid #0090ff 1px; border-radius: 16px; flex: 1; height: 0; padding: 8px;}.view .bn-container { height: 100%; margin: 0; max-width: none; padding: 0;}.view .bn-editor { height: 100%; overflow: auto;}.view iframe { border: none; border-radius: 8px;}

// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY. // Generated from shared/testDocumentBlocks.ts — run `pnpm run gen` to update. import type { PartialBlock } from "@blocknote/core"; /** * The shared example/test document, as partial blocks. * * This file is intentionally self-contained — it has only a type-only import * from `@blocknote/core` (no runtime imports) — so the example generator can * copy it verbatim into each exporter playground example and the examples stay * runnable on their own (e.g. opened directly in StackBlitz). * * It is the single source of truth for both the playground examples' editor * `initialContent` and the exporters' `testDocument` unit-test fixture. */ export const testDocumentBlocks: PartialBlock<any, any, any>[] = [ { type: "paragraph", content: [ { type: "text", text: "Welcome to this ", styles: { italic: true, }, }, { type: "text", text: "demo 🙌!", styles: { italic: true, bold: true, }, }, ], children: [ { type: "paragraph", content: "Hello World nested", children: [ { type: "paragraph", content: "Hello World double nested", }, ], }, ], }, { type: "paragraph", content: [ { type: "text", text: "This paragraph has a background color", styles: { bold: true }, }, ], props: { backgroundColor: "red", }, }, { type: "paragraph", content: "Paragraph", }, // An empty paragraph: a blank line in the editor, which exporters must // preserve as vertical space rather than dropping the block. { type: "paragraph", }, { type: "heading", content: "Heading", }, { type: "heading", content: "Heading right", props: { textAlignment: "right", }, }, { type: "heading", content: "Heading 2", props: { level: 2 }, }, { type: "heading", content: "Heading 3", props: { level: 3 }, }, { type: "heading", content: "Heading 4", props: { level: 4 }, }, { type: "heading", content: "Heading 5", props: { level: 5 }, }, { type: "heading", content: "Heading 6", props: { level: 6 }, }, { type: "paragraph", content: "Emojis: 😀 🎉 🚀 👍 👍🏽 🌍 🚶‍♀️", }, { type: "paragraph", content: "Centered paragraph", props: { textAlignment: "center", }, }, { type: "paragraph", content: "justified paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", props: { textAlignment: "justify", }, }, { type: "pageBreak" }, { type: "bulletListItem", content: "Bullet List Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", children: [ { type: "bulletListItem", content: "Bullet List Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", }, { type: "bulletListItem", content: "Bullet List Item right. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", props: { textAlignment: "right", }, }, { type: "numberedListItem", content: "Numbered List Item 1", }, { type: "numberedListItem", content: "Numbered List Item 2", children: [ { type: "numberedListItem", content: "Numbered List Item Nested 1", }, { type: "numberedListItem", content: "Numbered List Item Nested 2", }, { type: "numberedListItem", content: "Numbered List Item Nested funky right", props: { textAlignment: "right", backgroundColor: "red", textColor: "blue", }, }, { type: "numberedListItem", content: "Numbered List Item Nested funky center", props: { textAlignment: "center", backgroundColor: "red", textColor: "blue", }, }, ], }, ], }, { type: "numberedListItem", content: "Numbered List Item", }, { type: "checkListItem", content: "Check List Item", }, { type: "checkListItem", content: "Checked List Item", props: { checked: true, }, }, { type: "numberedListItem", content: "Numbered List Item starting at 5", props: { start: 5, }, }, { type: "numberedListItem", content: "Numbered List Item 6", }, { type: "toggleListItem", content: "Toggle List Item", children: [ { type: "paragraph", content: "Content nested inside the toggle list item.", }, { type: "bulletListItem", content: "A nested bullet inside the toggle", }, ], }, { type: "heading", content: "Toggle Heading", props: { level: 2, isToggleable: true, }, children: [ { type: "paragraph", content: "Content nested inside the toggle heading.", }, ], }, { type: "table", content: { type: "tableContent", columnWidths: [200, undefined, undefined], rows: [ { cells: ["Wide Cell", "Table Cell", "Table Cell"], }, { cells: ["Wide Cell", "Table Cell", "Table Cell"], }, { cells: ["Wide Cell", "Table Cell", "Table Cell"], }, ], }, }, { type: "file", }, { type: "image", props: { url: "https://placehold.co/332x322.jpg", caption: "From https://placehold.co/332x322.jpg", }, }, { type: "image", props: { previewWidth: 200, url: "https://placehold.co/332x322.jpg", textAlignment: "right", }, }, { 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: "audio", props: { caption: "Audio file caption", name: "audio.mp3", }, }, { 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: "text", text: "underlined", styles: { underline: true }, }, { type: "text", text: " ", styles: {}, }, { type: "text", text: "strikethrough", styles: { strike: true }, }, { type: "text", text: " ", styles: {}, }, { type: "link", content: "Link", href: "https://www.blocknotejs.org", }, ], }, { type: "table", content: { type: "tableContent", headerRows: 1, rows: [ { cells: ["Table Header 1", "Table Header 2", "Table Header 3"], }, { cells: [ "Table Cell 4", [ { type: "text", text: "Table Cell Bold Colored 5", styles: { bold: true, textColor: "red", backgroundColor: "blue", }, }, ], "Table Cell 6", ], }, { cells: ["Table Cell 7", "Table Cell 8", "Table Cell 9"], }, ], }, }, // An "advanced" table: two header rows and merged cells (colspan / // rowspan) - the features behind the editor's `splitCells` / // `headers` table options, which exporters must place correctly. { type: "table", content: { type: "tableContent", // Explicit widths for all three tracks: the merged first-row cell // means the row alone doesn't reveal the column count. columnWidths: [undefined, undefined, undefined], headerRows: 2, rows: [ { cells: [ { type: "tableCell", content: "Merged Header", props: { colspan: 2 }, }, { type: "tableCell", content: "Header C" }, ], }, { cells: ["Header A", "Header B", "Header C2"], }, { cells: [ { type: "tableCell", content: "Merged Rows", props: { rowspan: 2 }, }, { type: "tableCell", content: "Cell B1" }, { type: "tableCell", content: "Cell C1" }, ], }, { cells: ["Cell B2", "Cell C2"], }, ], }, }, // A hard line break (shift+enter) inside one paragraph - a single block // whose text spans two lines. { type: "paragraph", content: "A hard line break\nwithin a single paragraph", }, { type: "codeBlock", props: { language: "javascript", }, content: `const helloWorld = (message) => { console.log("Hello World", message); };`, }, { type: "paragraph", content: [ { type: "text", text: "Some inline code: ", styles: { bold: true }, }, { type: "text", text: "var foo = 'bar';", styles: { code: true }, }, ], }, { 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" }, ], }, ], }, { type: "divider" }, { type: "quote", content: "All those moments will be lost in time, like tears in rain.", }, ];

// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY.// Generated from shared/testDocumentBlocks.ts — run `pnpm run gen` to update.import type { PartialBlock } from "@blocknote/core";/** * The shared example/test document, as partial blocks. * * This file is intentionally self-contained — it has only a type-only import * from `@blocknote/core` (no runtime imports) — so the example generator can * copy it verbatim into each exporter playground example and the examples stay * runnable on their own (e.g. opened directly in StackBlitz). * * It is the single source of truth for both the playground examples' editor * `initialContent` and the exporters' `testDocument` unit-test fixture. */export const testDocumentBlocks: PartialBlock<any, any, any>[] = [ { type: "paragraph", content: [ { type: "text", text: "Welcome to this ", styles: { italic: true, }, }, { type: "text", text: "demo 🙌!", styles: { italic: true, bold: true, }, }, ], children: [ { type: "paragraph", content: "Hello World nested", children: [ { type: "paragraph", content: "Hello World double nested", }, ], }, ], }, { type: "paragraph", content: [ { type: "text", text: "This paragraph has a background color", styles: { bold: true }, }, ], props: { backgroundColor: "red", }, }, { type: "paragraph", content: "Paragraph", }, // An empty paragraph: a blank line in the editor, which exporters must // preserve as vertical space rather than dropping the block. { type: "paragraph", }, { type: "heading", content: "Heading", }, { type: "heading", content: "Heading right", props: { textAlignment: "right", }, }, { type: "heading", content: "Heading 2", props: { level: 2 }, }, { type: "heading", content: "Heading 3", props: { level: 3 }, }, { type: "heading", content: "Heading 4", props: { level: 4 }, }, { type: "heading", content: "Heading 5", props: { level: 5 }, }, { type: "heading", content: "Heading 6", props: { level: 6 }, }, { type: "paragraph", content: "Emojis: 😀 🎉 🚀 👍 👍🏽 🌍 🚶‍♀️", }, { type: "paragraph", content: "Centered paragraph", props: { textAlignment: "center", }, }, { type: "paragraph", content: "justified paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", props: { textAlignment: "justify", }, }, { type: "pageBreak" }, { type: "bulletListItem", content: "Bullet List Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", children: [ { type: "bulletListItem", content: "Bullet List Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", }, { type: "bulletListItem", content: "Bullet List Item right. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", props: { textAlignment: "right", }, }, { type: "numberedListItem", content: "Numbered List Item 1", }, { type: "numberedListItem", content: "Numbered List Item 2", children: [ { type: "numberedListItem", content: "Numbered List Item Nested 1", }, { type: "numberedListItem", content: "Numbered List Item Nested 2", }, { type: "numberedListItem", content: "Numbered List Item Nested funky right", props: { textAlignment: "right", backgroundColor: "red", textColor: "blue", }, }, { type: "numberedListItem", content: "Numbered List Item Nested funky center", props: { textAlignment: "center", backgroundColor: "red", textColor: "blue", }, }, ], }, ], }, { type: "numberedListItem", content: "Numbered List Item", }, { type: "checkListItem", content: "Check List Item", }, { type: "checkListItem", content: "Checked List Item", props: { checked: true, }, }, { type: "numberedListItem", content: "Numbered List Item starting at 5", props: { start: 5, }, }, { type: "numberedListItem", content: "Numbered List Item 6", }, { type: "toggleListItem", content: "Toggle List Item", children: [ { type: "paragraph", content: "Content nested inside the toggle list item.", }, { type: "bulletListItem", content: "A nested bullet inside the toggle", }, ], }, { type: "heading", content: "Toggle Heading", props: { level: 2, isToggleable: true, }, children: [ { type: "paragraph", content: "Content nested inside the toggle heading.", }, ], }, { type: "table", content: { type: "tableContent", columnWidths: [200, undefined, undefined], rows: [ { cells: ["Wide Cell", "Table Cell", "Table Cell"], }, { cells: ["Wide Cell", "Table Cell", "Table Cell"], }, { cells: ["Wide Cell", "Table Cell", "Table Cell"], }, ], }, }, { type: "file", }, { type: "image", props: { url: "https://placehold.co/332x322.jpg", caption: "From https://placehold.co/332x322.jpg", }, }, { type: "image", props: { previewWidth: 200, url: "https://placehold.co/332x322.jpg", textAlignment: "right", }, }, { 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: "audio", props: { caption: "Audio file caption", name: "audio.mp3", }, }, { 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: "text", text: "underlined", styles: { underline: true }, }, { type: "text", text: " ", styles: {}, }, { type: "text", text: "strikethrough", styles: { strike: true }, }, { type: "text", text: " ", styles: {}, }, { type: "link", content: "Link", href: "https://www.blocknotejs.org", }, ], }, { type: "table", content: { type: "tableContent", headerRows: 1, rows: [ { cells: ["Table Header 1", "Table Header 2", "Table Header 3"], }, { cells: [ "Table Cell 4", [ { type: "text", text: "Table Cell Bold Colored 5", styles: { bold: true, textColor: "red", backgroundColor: "blue", }, }, ], "Table Cell 6", ], }, { cells: ["Table Cell 7", "Table Cell 8", "Table Cell 9"], }, ], }, }, // An "advanced" table: two header rows and merged cells (colspan / // rowspan) - the features behind the editor's `splitCells` / // `headers` table options, which exporters must place correctly. { type: "table", content: { type: "tableContent", // Explicit widths for all three tracks: the merged first-row cell // means the row alone doesn't reveal the column count. columnWidths: [undefined, undefined, undefined], headerRows: 2, rows: [ { cells: [ { type: "tableCell", content: "Merged Header", props: { colspan: 2 }, }, { type: "tableCell", content: "Header C" }, ], }, { cells: ["Header A", "Header B", "Header C2"], }, { cells: [ { type: "tableCell", content: "Merged Rows", props: { rowspan: 2 }, }, { type: "tableCell", content: "Cell B1" }, { type: "tableCell", content: "Cell C1" }, ], }, { cells: ["Cell B2", "Cell C2"], }, ], }, }, // A hard line break (shift+enter) inside one paragraph - a single block // whose text spans two lines. { type: "paragraph", content: "A hard line break\nwithin a single paragraph", }, { type: "codeBlock", props: { language: "javascript", }, content: `const helloWorld = (message) => { console.log("Hello World", message);};`, }, { type: "paragraph", content: [ { type: "text", text: "Some inline code: ", styles: { bold: true }, }, { type: "text", text: "var foo = 'bar';", styles: { code: true }, }, ], }, { 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" }, ], }, ], }, { type: "divider" }, { type: "quote", content: "All those moments will be lost in time, like tears in rain.", },];