Hi, I’m using tiptap in a VueJS project to provide a WYSIWYG report editor for my users. I believe that my issue lies in my use of prosemirror functions rather than tiptap though, so I’m posting here. I want to give my user the ability to insert section templates into their reports, so they don’t have to worry about styling on components that are repeated through a document, and should be standardised.
I’m trying to do this by a node that extends Table from tiptap-extensions, and adding extra commands to that to use when they want to insert a special table type.
My node file looks like this:
import { Table } from 'tiptap-extensions'
import {
findParentNodeOfType,
createTable,
setCellAttrs,
forEachCellInColumn
} from 'prosemirror-utils'
export default class SectionTable extends Table {
get name () {
return 'section_table'
}
commands ({ schema }) {
const cmds = super.commands({ schema })
// Command to create custom table
cmds.createSectionTable = (options) => {
const rowsCount = options.rowsCount
const colsCount = options.colsCount
const withHeaderRow = options.withHeaderRow
const labelColWidth = 200
return (state, dispatch) => {
const tableNode = createTable(schema, rowsCount, colsCount, withHeaderRow)
const heading = schema.nodes.heading.create({ level: 4 })
const attrs = { colwidth: [labelColWidth] }
// Function to set cells in 0th column to have h4 content, and be 200px wide
const cellTransform = (cell, tr) => setCellAttrs(cell, attrs)(tr.replaceWith(cell.start, cell.start + 2, heading))
dispatch(
forEachCellInColumn(0, cellTransform, false)(
state.tr.replaceSelectionWith(tableNode).scrollIntoView()
)
)
}
}
return cmds
}
}
The intention is to create a table that has a set width of 200 on the first column, and the content of this column should be in heading level 4 (<h4>) tags rather than paragraph (<p>) tags.
When I use this command to insert a table in the middle of the document, it just creates a standard table where my custom width and the headers are not applied, and I am able to undo the creation of this table with CTRL + Z (I am using the History from tiptap).
But when I use the command to insert the table at the end of the document, my styles are applied, and I cannot undo the table.
Lastly, if I create a table in the middle of the document, and then another of these tables above it, the table I created first (the lower one) will then have the h4 and correct width applied to it, and the most recent table will not.
The cursor will also default to the last cell in the table instead of the first in all these instances.
I feel like I’m doing something wrong with my transactions, or I should be manually setting the selection somehow, but I can’t for the life of me figure out what I need to do to fix this to make the table always undo-able, and always inserted with the correct column widths.
It’s also possible that I’m going about this completely the wrong way. If that’s the case, please let me know how this should be done.