083a46e93b
Some checks failed
Verify / Install node dependencies (push) Failing after 2s
Verify / Build packages (push) Has been skipped
Verify / Check linting & formatting (push) Has been skipped
Verify / Run unit tests (push) Has been skipped
Verify / Run e2e tests (shard 1/4) (push) Has been skipped
Verify / Run e2e tests (shard 2/4) (push) Has been skipped
Verify / Run e2e tests (shard 3/4) (push) Has been skipped
Verify / Run e2e tests (shard 4/4) (push) Has been skipped
Publish / Resolve publish config (push) Failing after 2s
Publish / Send notification to Slack (push) Has been skipped
Publish / Send failure notification to Slack (push) Failing after 8s
Verify / Merge e2e reports (push) Has been skipped
Publish / Build (push) Has been skipped
Publish / Bump Versions OR Release to Registry (push) Has been skipped
52 lines
2.3 KiB
Markdown
52 lines
2.3 KiB
Markdown
# @tiptap/static-renderer
|
||
|
||
[](https://www.npmjs.com/package/@tiptap/static-renderer)
|
||
[](https://npmcharts.com/compare/tiptap?minimal=true)
|
||
[](https://www.npmjs.com/package/@tiptap/static-renderer)
|
||
[](https://github.com/sponsors/ueberdosis)
|
||
|
||
## Introduction
|
||
|
||
Tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as _New York Times_, _The Guardian_ or _Atlassian_.
|
||
|
||
## Official Documentation
|
||
|
||
Documentation can be found on the [Tiptap website](https://tiptap.dev).
|
||
|
||
## Limitations & workarounds
|
||
|
||
The static renderer builds the ProseMirror schema and runs each extension's
|
||
`renderHTML`, but it does **not** instantiate an `Editor`. As a result:
|
||
|
||
- `addProseMirrorPlugins`, `onCreate`, `onUpdate`, and transaction hooks do
|
||
not run.
|
||
- Extensions that assign attributes via those mechanisms — such as
|
||
`UniqueID` (`data-id`) and `TableOfContents` (`id`, `data-toc-id`) — will
|
||
not populate those attributes on their own.
|
||
|
||
For these cases, pre-process the JSON document before rendering:
|
||
|
||
```ts
|
||
import { generateUniqueIds } from '@tiptap/extension-unique-id'
|
||
import { generateTocIds } from '@tiptap/extension-table-of-contents'
|
||
import { renderToHTMLString } from '@tiptap/static-renderer/pm/html-string'
|
||
|
||
let doc = sourceJson
|
||
doc = generateUniqueIds(doc, extensions) // if using UniqueID
|
||
doc = generateTocIds(doc, extensions) // if using TableOfContents
|
||
|
||
const html = renderToHTMLString({
|
||
content: doc,
|
||
extensions,
|
||
staticEditorOptions: { textDirection: 'auto' }, // mirrors a subset of EditorOptions
|
||
})
|
||
```
|
||
|
||
Editor-level options that affect output are accepted via the
|
||
`staticEditorOptions` object (currently `textDirection`). Other editor options
|
||
that depend on a runtime view or transaction stream are out of scope.
|
||
|
||
## License
|
||
|
||
Tiptap is open sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap/blob/main/LICENSE.md).
|