---
title: "Pasting"
description: "Text pasted into the document becomes a chart or a diagram when it is one."
canonical_url: "https://tiptap.dev/docs/diagrams/data/pasting"
---

# Pasting

Text pasted into the document becomes a chart or a diagram when it is one.

## What pasted text becomes

| Pasted text                                                                                                             | Becomes                                                                                                                         |
| ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| Rows, as in the [chart syntax](https://tiptap.dev/docs/diagrams/data/chart-syntax.md), 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`](https://tiptap.dev/docs/diagrams/charts/overview.md#importmermaidchart)) |
| Any other Mermaid kind                                                                                                  | A diagram ([Formats](https://tiptap.dev/docs/diagrams/flow-diagrams/formats.md#mermaid-diagrams))                               |
| draw\.io XML or BPMN XML                                                                                                | A diagram ([Formats](https://tiptap.dev/docs/diagrams/flow-diagrams/formats.md))                                                |
| Rows from a spreadsheet, while a chart is selected                                                                      | That chart's new data, see [Onto a selected chart](https://tiptap.dev/docs/diagrams/data/pasting.md#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`](https://tiptap.dev/docs/diagrams/flow-diagrams/overview.md#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`.

```ts
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](https://tiptap.dev/docs/diagrams/flow-diagrams/overview.md#mermaid-kinds), 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`](https://tiptap.dev/docs/diagrams/data/overview.md#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`.

```ts
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](https://tiptap.dev/docs/diagrams/charts/overview.md#importmermaidchart) or from rows,
- or a diagram, from Mermaid, draw\.io XML or BPMN XML.

Returns `false` for text that is none of them.