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 }) => {
|
||||
if (!editor) {
|
||||
return null
|
||||
@@ -42,6 +67,13 @@ const MenuBar = ({ editor }) => {
|
||||
<button onClick={() => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()}>
|
||||
insertTable
|
||||
</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()}>
|
||||
addColumnBefore
|
||||
</button>
|
||||
|
||||
@@ -16,6 +16,14 @@ editor.commands.insertContent('Example Text')
|
||||
// HTML
|
||||
editor.commands.insertContent('<h1>Example Text</h1>')
|
||||
|
||||
// HTML with trim white space
|
||||
editor.commands.insertContent('<h1>Example Text</h1>',
|
||||
{
|
||||
parseOptions: {
|
||||
preserveWhitespace: false,
|
||||
}
|
||||
})
|
||||
|
||||
// JSON/Nodes
|
||||
editor.commands.insertContent({
|
||||
type: 'heading',
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { CreateNodeFromContentOptions } from '../helpers/createNodeFromContent'
|
||||
import { RawCommands, Content } from '../types'
|
||||
|
||||
declare module '@tiptap/core' {
|
||||
@@ -6,11 +7,11 @@ declare module '@tiptap/core' {
|
||||
/**
|
||||
* 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 }) => {
|
||||
return commands.insertContentAt({ from: tr.selection.from, to: tr.selection.to }, value)
|
||||
export const insertContent: RawCommands['insertContent'] = (value, options) => ({ tr, commands }) => {
|
||||
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 {
|
||||
RawCommands,
|
||||
@@ -12,17 +12,18 @@ declare module '@tiptap/core' {
|
||||
/**
|
||||
* 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) {
|
||||
const content = createNodeFromContent(value, editor.schema, {
|
||||
parseOptions: {
|
||||
preserveWhitespace: 'full',
|
||||
},
|
||||
...(options || {}),
|
||||
})
|
||||
|
||||
// don’t dispatch an empty fragment because this can lead to strange errors
|
||||
|
||||
Reference in New Issue
Block a user