fix: add CreateNodeFromContentOptions to insertContent (#1678)
* ✨ Add CreateNodeFromContentOptions to insertContent * 📝 Add it to the doc
This commit is contained in:
@@ -32,6 +32,31 @@ const CustomTableCell = TableCell.extend({
|
|||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
|
export const tableHTML = `
|
||||||
|
<table style="width:100%">
|
||||||
|
<tr>
|
||||||
|
<th>Firstname</th>
|
||||||
|
<th>Lastname</th>
|
||||||
|
<th>Age</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jill</td>
|
||||||
|
<td>Smith</td>
|
||||||
|
<td>50</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Eve</td>
|
||||||
|
<td>Jackson</td>
|
||||||
|
<td>94</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>John</td>
|
||||||
|
<td>Doe</td>
|
||||||
|
<td>80</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
`
|
||||||
|
|
||||||
const MenuBar = ({ editor }) => {
|
const MenuBar = ({ editor }) => {
|
||||||
if (!editor) {
|
if (!editor) {
|
||||||
return null
|
return null
|
||||||
@@ -42,6 +67,13 @@ const MenuBar = ({ editor }) => {
|
|||||||
<button onClick={() => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()}>
|
<button onClick={() => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()}>
|
||||||
insertTable
|
insertTable
|
||||||
</button>
|
</button>
|
||||||
|
<button onClick={() => editor.chain().focus().insertContent(tableHTML, {
|
||||||
|
parseOptions: {
|
||||||
|
preserveWhitespace: false,
|
||||||
|
},
|
||||||
|
}).run()}>
|
||||||
|
insertHTMLTable
|
||||||
|
</button>
|
||||||
<button onClick={() => editor.chain().focus().addColumnBefore().run()} disabled={!editor.can().addColumnBefore()}>
|
<button onClick={() => editor.chain().focus().addColumnBefore().run()} disabled={!editor.can().addColumnBefore()}>
|
||||||
addColumnBefore
|
addColumnBefore
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@@ -16,6 +16,14 @@ editor.commands.insertContent('Example Text')
|
|||||||
// HTML
|
// HTML
|
||||||
editor.commands.insertContent('<h1>Example Text</h1>')
|
editor.commands.insertContent('<h1>Example Text</h1>')
|
||||||
|
|
||||||
|
// HTML with trim white space
|
||||||
|
editor.commands.insertContent('<h1>Example Text</h1>',
|
||||||
|
{
|
||||||
|
parseOptions: {
|
||||||
|
preserveWhitespace: false,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
// JSON/Nodes
|
// JSON/Nodes
|
||||||
editor.commands.insertContent({
|
editor.commands.insertContent({
|
||||||
type: 'heading',
|
type: 'heading',
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
import { CreateNodeFromContentOptions } from '../helpers/createNodeFromContent'
|
||||||
import { RawCommands, Content } from '../types'
|
import { RawCommands, Content } from '../types'
|
||||||
|
|
||||||
declare module '@tiptap/core' {
|
declare module '@tiptap/core' {
|
||||||
@@ -6,11 +7,11 @@ declare module '@tiptap/core' {
|
|||||||
/**
|
/**
|
||||||
* Insert a node or string of HTML at the current position.
|
* Insert a node or string of HTML at the current position.
|
||||||
*/
|
*/
|
||||||
insertContent: (value: Content) => ReturnType,
|
insertContent: (value: Content, options?: CreateNodeFromContentOptions) => ReturnType,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export const insertContent: RawCommands['insertContent'] = value => ({ tr, commands }) => {
|
export const insertContent: RawCommands['insertContent'] = (value, options) => ({ tr, commands }) => {
|
||||||
return commands.insertContentAt({ from: tr.selection.from, to: tr.selection.to }, value)
|
return commands.insertContentAt({ from: tr.selection.from, to: tr.selection.to }, value, options)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import createNodeFromContent from '../helpers/createNodeFromContent'
|
import createNodeFromContent, { CreateNodeFromContentOptions } from '../helpers/createNodeFromContent'
|
||||||
import selectionToInsertionEnd from '../helpers/selectionToInsertionEnd'
|
import selectionToInsertionEnd from '../helpers/selectionToInsertionEnd'
|
||||||
import {
|
import {
|
||||||
RawCommands,
|
RawCommands,
|
||||||
@@ -12,17 +12,18 @@ declare module '@tiptap/core' {
|
|||||||
/**
|
/**
|
||||||
* Insert a node or string of HTML at a specific position.
|
* Insert a node or string of HTML at a specific position.
|
||||||
*/
|
*/
|
||||||
insertContentAt: (position: number | Range, value: Content) => ReturnType,
|
insertContentAt: (position: number | Range, value: Content, options?: CreateNodeFromContentOptions) => ReturnType,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export const insertContentAt: RawCommands['insertContentAt'] = (position, value) => ({ tr, dispatch, editor }) => {
|
export const insertContentAt: RawCommands['insertContentAt'] = (position, value, options) => ({ tr, dispatch, editor }) => {
|
||||||
if (dispatch) {
|
if (dispatch) {
|
||||||
const content = createNodeFromContent(value, editor.schema, {
|
const content = createNodeFromContent(value, editor.schema, {
|
||||||
parseOptions: {
|
parseOptions: {
|
||||||
preserveWhitespace: 'full',
|
preserveWhitespace: 'full',
|
||||||
},
|
},
|
||||||
|
...(options || {}),
|
||||||
})
|
})
|
||||||
|
|
||||||
// don’t dispatch an empty fragment because this can lead to strange errors
|
// don’t dispatch an empty fragment because this can lead to strange errors
|
||||||
|
|||||||
Reference in New Issue
Block a user