Pasting | Tiptap Diagrams Docs

What pasted text becomes

Pasted text	Becomes
Rows, as in the chart syntax, or CSV with at least two columns	A chart
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

Mermaid is recognized bare, in a ```mermaid fence, or as a code block with the language mermaid.
Bare Mermaid needs its kind 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.
The Quick Input reads text the same way when it is confirmed.

In a field of your own

detectDiagramInput

detectDiagramInput(text) says what a text would become, for a field of your own that takes anything. It 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 unreadable XML are null.
The paste handling and confirmDiagramInput use the same function, so a field built on it agrees with them.

Onto a selected chart

Rows copied from a spreadsheet are lines of cells separated by tabs, as spreadsheet applications put them on the clipboard.

Pasted while a chart is selected, they go through updateChartFromGrid: they replace the chart's data and keep its spec.
Pasted on a read-only chart, they change nothing.
Pasted anywhere else, they paste as they would without the Extension.

Commands

insertFromText

Inserts whatever the text is, read as a paste would read it with detectDiagramInput.

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

The text becomes:

a chart, from Mermaid chart source or from rows,
or a diagram, from Mermaid, draw.io XML or BPMN XML.

Returns false for text that is none of them.

PreviouslyChart syntax

Next upTables