Table Workflows
HybricMark ships a Typora-style table workflow: resize handles, top-left quick controls, and dedicated table context menu actions.Built-in behavior
- Resizable columns (`Table.configure({ resizable: true })`).
- Table alignment controls (left / center / right).
- Row and column insert/delete operations from context menu.
- Merge cells helper for adjacent selections.
Programmatic commands
editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()
editor.chain().focus().addColumnBefore().run()
editor.chain().focus().addColumnAfter().run()
editor.chain().focus().deleteColumn().run()
editor.chain().focus().addRowBefore().run()
editor.chain().focus().addRowAfter().run()
editor.chain().focus().deleteRow().run()
editor.chain().focus().mergeCells().run()
editor.chain().focus().deleteTable().run()Cell alignment
HybricMark extends table cell/header attributes with `textAlign`, so alignment is persisted in document JSON.{
"type": "tableCell",
"attrs": {
"colspan": 1,
"rowspan": 1,
"colwidth": null,
"textAlign": "center"
}
}Best practices
- For large tables, keep horizontal scrolling enabled on `.tableWrapper`.
- Keep zebra row contrast readable in both light and dark mode.
- Use `editor.isActive('table')` to switch UI into table mode.