fix: add CreateNodeFromContentOptions to insertContent (#1678)

*  Add CreateNodeFromContentOptions  to insertContent

* 📝 Add it to the doc
This commit is contained in:
castroCrea
2021-08-09 14:40:17 +01:00
committed by GitHub
parent a0444b5ec3
commit aabdfd6f7d
4 changed files with 48 additions and 6 deletions

View File

@@ -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>

View File

@@ -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',

View File

@@ -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)
}

View File

@@ -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 || {}),
})
// dont dispatch an empty fragment because this can lead to strange errors