Pasting | Tiptap Diagrams Docs

What pasted text becomes

Pasted text	Becomes
Rows, as in the Chart syntax, or CSV with at least two columns	No chart, they paste as usual. To make a chart, use `insertFromText`
A Mermaid chart, such as `pie` or `sankey-beta`	A chart, with its data to edit (`importMermaidChart`)
Any other Mermaid kind	A diagram (Formats)
draw.io XML or BPMN XML	A diagram (Formats)
Rows from a spreadsheet, while a chart is selected	That chart's new data, see Onto a selected chart
Anything, into a code block	The text, unchanged

How pasted text is read

The extension finds pasted Mermaid in three forms:

Bare, which means the Mermaid text alone, with nothing around it.
In a ```mermaid fence.
As a code block with the language mermaid.

Bare Mermaid needs its kind, such as flowchart, on the first line, and more than one line. So a sentence that starts with "pie" stays a sentence.

A code block that already holds diagram source becomes the diagram with convertCodeBlockToDiagram, or with Mod-Enter.

Detecting text in a field of your own

To find out what the text in a field of your own, outside the editor, would become, call detectDiagramInput.

detectDiagramInput

detectDiagramInput(text, options?) returns { kind, source }, or null.

import { detectDiagramInput } from '@tiptap-pro/extension-diagrams'

const detected = detectDiagramInput(text)
if (detected?.kind === 'mermaid-diagram')
  editor.commands.insertFlowDiagram({ source: detected.source })

`kind`	Text	Command to call
`'mermaid-chart'`	A Mermaid chart, such as `pie` or `sankey-beta`, with at least one row	`importMermaidChart({ source })`
`'mermaid-diagram'`	Any other Mermaid kind, on more than one line or in a fence	`insertFlowDiagram({ source })`
`'drawio'`	An `<mxfile>` or `<mxGraphModel>`	`insertFlowDiagram({ source, format: 'drawio' })`
`'bpmn'`	BPMN 2.0 `<definitions>`	`insertFlowDiagram({ source, format: 'bpmn' })`
`'chart-syntax'`	Rows with a delimiter, as the Chart syntax or CSV, with at least two columns	`insertChartFrom({ format: 'chart-syntax', content: source })`

source is the text with a ```mermaid fence removed.
A sentence, a lone Mermaid keyword and XML that cannot be read return null.
If you set the delimiters or decimalSeparator options, pass the same values as the second argument: detectDiagramInput(text, { delimiters, decimalSeparator }).
A paste uses this function only for Mermaid, draw.io and BPMN, so pasted rows stay rows. insertFromText uses it for every kind, rows included.

Onto a selected chart

Spreadsheet apps copy rows as lines of cells separated by tabs.

When a chart is selected, the pasted rows replace its data and keep its spec, through updateChartFromGrid.
When the selected chart is read-only, the paste changes nothing.
Anywhere else, the rows paste as they would without the extension.

Commands

insertFromText

Inserts a chart or a diagram from a text. It reads the text with detectDiagramInput and the editor's delimiters and decimalSeparator. Unlike a paste, it also makes a chart from rows.

editor.commands.insertFromText({ text: 'Month | Sales\nJan | 2\nFeb | 3' })

Option	Type	Description
`text`	`string`	The text, as it would be pasted
`pos`	`number`	The position to insert at. Defaults to the selection

Returns false for text that becomes neither a chart nor a diagram.

PreviouslyChart syntax

Next upTables