insertContentAt command
The insertContentAt
will insert an HTML string or a node at a given position or range. If a range is given, the new content will replace the content in the given range with the new content.
Parameters
position: number | Range
The position or range the content will be inserted in.
value: Content
The content to be inserted. Can be plain text, an HTML string or JSON node(s).
options: Record<string, any>
- updateSelection: controls if the selection should be moved to the newly inserted content.
- parseOptions: Passed content is parsed by ProseMirror. To hook into the parsing, you can pass
parseOptions
which are then handled by ProseMirror.
Use the insertContentAt command
// Plain text
editor.commands.insertContentAt(12, 'Example Text')
// Plain text, replacing a range
editor.commands.insertContentAt({ from: 12, to: 16 }, 'Example Text')
// HTML
editor.commands.insertContentAt(12, '<h1>Example Text</h1>')
// HTML with trim white space
editor.commands.insertContentAt(12, '<p>Hello world</p>', {
updateSelection: true,
parseOptions: {
preserveWhitespace: 'full',
},
})
// JSON/Nodes
editor.commands.insertContentAt(12, {
type: 'heading',
attrs: {
level: 1,
},
content: [
{
type: 'text',
text: 'Example Text',
},
],
})
// Multiple nodes at once
editor.commands.insertContentAt(12, [
{
type: 'paragraph',
content: [
{
type: 'text',
text: 'First paragraph',
},
],
},
{
type: 'paragraph',
content: [
{
type: 'text',
text: 'Second paragraph',
},
],
},
])