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 }) => { 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>

View File

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

View File

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

View File

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