粘贴

将 Mermaid、draw.io XML 或 BPMN XML 粘贴到文档时,扩展会把文本转换为流程图。粘贴到所选图表上的行会成为该图表的新数据。快速输入也使用相同规则读取文本,并根据行内容生成图表。
新标签页

粘贴的文本将变为

粘贴的文本变为
至少两列、符合图表语法或 CSV 格式的行未选中图表时按原样粘贴。要据此创建图表,请使用 insertFromText
Mermaid 图表,例如 pie 或 sankey-beta带可编辑数据的图表(importMermaidChart)
其他 Mermaid 类型流程图(格式)
draw.io XML 或 BPMN XML流程图(格式)
选中图表时粘贴的表格行该图表的新数据,参见粘贴到选中的图表
任何内容,放入代码块中文本,未更改

如何读取粘贴的文本

该扩展以三种形式识别粘贴的 Mermaid 文本:

  • 纯 Mermaid 文本,周围没有其他内容。
  • 位于 Mermaid 代码围栏中。
  • 作为语言为 mermaid 的代码块。

纯 Mermaid 文本必须以类型关键字(例如 flowchart)开头,且至少包含两行。因此,以 pie 开头的普通句子不会被识别为图表。

包含已保存流程图源码的代码块可通过 convertCodeBlockToDiagram 或 Mod-Enter 转换为流程图。

检测您自己的字段中的文本

要了解编辑器之外您自己的字段中的文本将变成什么,请调用 detectDiagramInput。

detectDiagramInput

detectDiagramInput(text, options?) 返回 { kind, source } 或 null。

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

const detected = detectDiagramInput(text)
if (detected?.kind === 'mermaid-diagram')
  editor.commands.insertFlowDiagram({ source: detected.source })
kind文本调用命令
'mermaid-chart'Mermaid 图表,例如 pie 或 sankey-beta,且至少包含一行数据importMermaidChart({ source })
'mermaid-diagram'多行或位于代码围栏中的其他 Mermaid 类型insertFlowDiagram({ source })
'drawio'<mxfile> 或 <mxGraphModel>insertFlowDiagram({ source, format: 'drawio' })
'bpmn'BPMN 2.0 <definitions>insertFlowDiagram({ source, format: 'bpmn' })
'chart-syntax'带有分隔符的行,如图表语法或 CSV,至少有两列insertChartFrom({ format: 'chart-syntax', content: source })
  • source 是移除了 Mermaid 代码围栏后的文本。
  • 一个句子、一个单独的 Mermaid 关键字和无法读取的 XML 返回 null。
  • 如果设置 delimiters 或 decimalSeparator 选项,请传递与第二个参数相同的值:detectDiagramInput(text, { delimiters, decimalSeparator })。
  • 粘贴仅对 Mermaid、draw.io 和 BPMN 使用此函数,因此粘贴的行仍保留行。 insertFromText 将其用于每种类型,包括行。

到选定的图表上

电子表格应用程序将行复制为由制表符分隔的单元格行。

  • 选中图表时,粘贴的行会替换其数据并保留图表规格,调用 updateChartFromGrid。
  • 当所选图表为只读时,粘贴不会发生任何变化。
  • 在其他地方,行将像没有扩展名一样粘贴。

命令

insertFromText

从文本插入图表或流程图。该命令使用 detectDiagramInput 识别文本,并采用编辑器的 delimiters 和 decimalSeparator 设置。与粘贴不同,它也能根据行数据创建图表。

editor.commands.insertFromText({ text: 'Month | Sales\nJan | 2\nFeb | 3' })
选项类型说明
textstring粘贴的文本
posnumber插入的位置。默认选择

文本既不是图表数据也不是流程图源码时,返回 false。