Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 887077a

Browse files
committedMar 4, 2025··
Merge branch 'main' into parallelize
2 parents 5d26341 + 98cb419 commit 887077a

File tree

170 files changed

+24886
-5304
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

170 files changed

+24886
-5304
lines changed
 

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,6 @@
55
"converting-blocks": "",
66
"server-processing": "",
77
"export-to-pdf": "",
8-
"export-to-docx": ""
8+
"export-to-docx": "",
9+
"export-to-odt": ""
910
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
---
2+
title: Export to ODT (Open Document Text)
3+
description: Export BlockNote documents to an ODT (Open Document Text) file.
4+
imageTitle: Export to ODT
5+
path: /docs/export-to-odt
6+
---
7+
8+
import { Example } from "@/components/example";
9+
import { Callout } from "nextra/components";
10+
11+
# Exporting blocks to ODT
12+
13+
It's possible to export BlockNote documents to ODT, completely client-side.
14+
15+
<Callout type={"info"}>
16+
This feature is provided by the `@blocknote/xl-odt-exporter`. `xl-` packages
17+
are fully open source, but released under a copyleft license. A commercial
18+
license for usage in closed source, proprietary products comes as part of the
19+
[Business subscription](/pricing).
20+
</Callout>
21+
22+
First, install the `@blocknote/xl-odt-exporter` package:
23+
24+
```bash
25+
npm install @blocknote/xl-odt-exporter
26+
```
27+
28+
Then, create an instance of the `ODTExporter` class. This exposes the following methods:
29+
30+
```typescript
31+
import {
32+
ODTExporter,
33+
odtDefaultSchemaMappings,
34+
} from "@blocknote/xl-odt-exporter";
35+
36+
// Create the exporter
37+
const exporter = new ODTExporter(editor.schema, odtDefaultSchemaMappings);
38+
39+
// Convert the blocks to a ODT document (Blob)
40+
const odtDocument = await exporter.toODTDocument(editor.document);
41+
```
42+
43+
See the [full example](/examples/interoperability/converting-blocks-to-odt) below:
44+
45+
<Example name="interoperability/converting-blocks-to-odt" />
46+
47+
### Customizing the ODT output file
48+
49+
`toODTDocument` takes an optional `options` parameter, which allows you to customize different options (like headers and footers).
50+
51+
Example usage:
52+
53+
```typescript
54+
const odt = await exporter.toODTDocument(testDocument, {
55+
// XML string
56+
footer: "<text:p>FOOTER</text:p>",
57+
// XMLDocument
58+
header: new DOMParser().parseFromString(
59+
`<text:p xmlns:text="urn:oasis:names:tc:opendocument:xmlns:text:1.0">HEADER</text:p>`,
60+
"text/xml",
61+
),
62+
});
63+
```
64+
65+
### Custom mappings / custom schemas
66+
67+
The `ODTExporter` constructor takes a `schema`, `mappings` and `options` parameter.
68+
A _mapping_ defines how to convert a BlockNote schema element (a Block, Inline Content, or Style) to the [ODT](https://docs.oasis-open.org/office/OpenDocument/v1.3/os/part3-schema/OpenDocument-v1.3-os-part3-schema.html) XML element.
69+
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 ODT XML elements, you can pass your own `mappings`:
70+
71+
For example, use the following code in case your schema has an `extraBlock` type:
72+
73+
```tsx
74+
import {
75+
ODTExporter,
76+
odtDefaultSchemaMappings,
77+
} from "@blocknote/xl-odt-exporter";
78+
79+
new ODTExporter(schema, {
80+
blockMapping: {
81+
...odtDefaultSchemaMappings.blockMapping,
82+
myCustomBlock: (block, exporter) => {
83+
return <text:p>My custom block</text:p>;
84+
},
85+
},
86+
inlineContentMapping: odtDefaultSchemaMappings.inlineContentMapping,
87+
styleMapping: odtDefaultSchemaMappings.styleMapping,
88+
});
89+
```
90+
91+
### Exporter options
92+
93+
The `ODTExporter` constructor takes an optional `options` parameter.
94+
While conversion happens on the client-side, the default setup uses a server hosted proxy to resolve files:
95+
96+
```typescript
97+
const defaultOptions = {
98+
// a function to resolve external resources in order to avoid CORS issues
99+
// by default, this calls a BlockNote hosted server-side proxy to resolve files
100+
resolveFileUrl: corsProxyResolveFileUrl,
101+
// the colors to use in the ODT for things like highlighting, background colors and font colors.
102+
colors: COLORS_DEFAULT, // defaults from @blocknote/core
103+
};
104+
```

0 commit comments

Comments
 (0)