feat: add flowchart and mindmap

README.md

@@ -1,7 +1,9 @@
 # TinyEditor
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+
 [![All Contributors](https://img.shields.io/badge/all_contributors-10-orange.svg?style=flat-square)](#contributors-)
+
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 [![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/opentiny/tiny-editor)

README.zh-CN.md

@@ -1,7 +1,9 @@
 # TinyEditor 富文本编辑器
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+
 [![All Contributors](https://img.shields.io/badge/all_contributors-10-orange.svg?style=flat-square)](#contributors-)
+
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 [![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/opentiny/tiny-editor)

packages/docs/fluent-editor/.vitepress/sidebar.ts

@@ -27,6 +27,8 @@ export function sidebar() {
         { text: '模拟语雀文档', link: 'https://opentiny.github.io/tiny-editor/projects' },
         { text: '图片工具栏', link: '/docs/demo/image-tool' },
         { text: 'AI', link: '/docs/demo/ai' },
+        { text: '思维导图', link: '/docs/demo/mind-map' },
+        { text: '流程图', link: '/docs/demo/flow-chart' },
       ],
     },
     {

packages/docs/fluent-editor/demos/flow-chart-background.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type FluentEditor from '@opentiny/fluent-editor'
+import { onMounted, ref } from 'vue'
+
+let editor: FluentEditor
+const editorRef = ref<HTMLElement>()
+
+const TOOLBAR_CONFIG = [
+  [{ header: [] }],
+  ['bold', 'italic', 'underline', 'link'],
+  [{ align: [] }, { list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
+  ['clean'],
+  ['flow-chart'],
+]
+
+onMounted(() => {
+  import('@opentiny/fluent-editor').then(({ default: FluentEditor }) => {
+    if (!editorRef.value) return
+    editor = new FluentEditor(editorRef.value, {
+      theme: 'snow',
+      modules: {
+        'toolbar': TOOLBAR_CONFIG,
+        'flow-chart': {
+          background: {
+            color: '#98FB98',
+            // image: 'url(path/to/image.png)',
+            repeat: 'repeat',
+            position: 'center',
+            size: 'auto',
+            opacity: 0.1,
+          },
+        },
+      },
+    })
+    const ops = [{ insert: '\n' }, { insert: { 'flow-chart': { nodes: [{ id: 'node1', type: 'rect', x: 100, y: 150, text: '开始' }, { id: 'node2', type: 'rect', x: 300, y: 150, text: '结束' }], edges: [{ id: 'edge1', sourceNodeId: 'node1', targetNodeId: 'node2', type: 'polyline' }] } } }, { insert: '\n\n' }]
+    editor.setContents(ops)
+  })
+})
+</script>
+
+<template>
+  <div ref="editorRef" />
+</template>

packages/docs/fluent-editor/demos/flow-chart-grid.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type FluentEditor from '@opentiny/fluent-editor'
+import { onMounted, ref } from 'vue'
+
+let editor: FluentEditor
+const editorRef = ref<HTMLElement>()
+
+const TOOLBAR_CONFIG = [
+  [{ header: [] }],
+  ['bold', 'italic', 'underline', 'link'],
+  [{ align: [] }, { list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
+  ['clean'],
+  ['flow-chart'],
+]
+
+onMounted(() => {
+  import('@opentiny/fluent-editor').then(({ default: FluentEditor }) => {
+    if (!editorRef.value) return
+    editor = new FluentEditor(editorRef.value, {
+      theme: 'snow',
+      modules: {
+        'toolbar': TOOLBAR_CONFIG,
+        'flow-chart': { grid: {
+          size: 15,
+          visible: true,
+          type: 'mesh',
+          config: {
+            color: '#98FB98',
+            thickness: 5,
+          },
+        } },
+      },
+    })
+    const ops = [{ insert: '\n' }, { insert: { 'flow-chart': { nodes: [{ id: 'node1', type: 'rect', x: 100, y: 150, text: '开始' }, { id: 'node2', type: 'rect', x: 300, y: 150, text: '结束' }], edges: [{ id: 'edge1', sourceNodeId: 'node1', targetNodeId: 'node2', type: 'polyline' }] } } }, { insert: '\n\n' }]
+    editor.setContents(ops)
+  })
+})
+</script>
+
+<template>
+  <div ref="editorRef" />
+</template>

packages/docs/fluent-editor/demos/flow-chart-resize.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type FluentEditor from '@opentiny/fluent-editor'
+import { onMounted, ref } from 'vue'
+
+let editor: FluentEditor
+const editorRef = ref<HTMLElement>()
+
+const TOOLBAR_CONFIG = [
+  [{ header: [] }],
+  ['bold', 'italic', 'underline', 'link'],
+  [{ align: [] }, { list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
+  ['clean'],
+  ['flow-chart'],
+]
+
+onMounted(() => {
+  import('@opentiny/fluent-editor').then(({ default: FluentEditor }) => {
+    if (!editorRef.value) return
+    editor = new FluentEditor(editorRef.value, {
+      theme: 'snow',
+      modules: {
+        'toolbar': TOOLBAR_CONFIG,
+        'flow-chart': {
+          resize: true,
+        },
+      },
+    })
+    const ops = [{ insert: '\n' }, { insert: { 'flow-chart': { nodes: [{ id: 'node1', type: 'rect', x: 100, y: 150, text: '开始' }, { id: 'node2', type: 'rect', x: 300, y: 150, text: '结束' }], edges: [{ id: 'edge1', sourceNodeId: 'node1', targetNodeId: 'node2', type: 'polyline' }] } } }, { insert: '\n\n' }]
+    editor.setContents(ops)
+  })
+})
+</script>
+
+<template>
+  <div ref="editorRef" />
+</template>

packages/docs/fluent-editor/demos/flow-chart.spec.ts

@@ -0,0 +1,55 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('FlowChart.vue', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('http://localhost:5173/tiny-editor/docs/demo/flow-chart')
+  })
+
+  test('should render the editor', async ({ page }) => {
+    const editor = page.locator('.ql-editor')
+    await expect(editor).toBeVisible()
+  })
+
+  test('should have flow-chart button in toolbar', async ({ page }) => {
+    const toolbar = page.locator('.ql-toolbar')
+    await expect(toolbar).toBeVisible()
+
+    const flowChartButton = toolbar.locator('.ql-flow-chart')
+    await expect(flowChartButton).toBeVisible()
+  })
+
+  test('should initialize editor with flow chart content', async ({ page }) => {
+    const editor = page.locator('.ql-editor')
+    await expect(editor).toBeVisible()
+
+    await page.waitForTimeout(1000)
+
+    const flowChartElement = editor.locator('.ql-flow-chart-item')
+    await expect(flowChartElement).toBeVisible()
+  })
+
+  test('should contain initial flow chart nodes and edges', async ({ page }) => {
+    await page.waitForTimeout(2000)
+
+    const flowChartContainer = page.locator('.ql-flow-chart-item')
+    await expect(flowChartContainer).toBeVisible()
+
+    const nodes = page.locator('.lf-node')
+    await expect(nodes).toHaveCount(2)
+
+    const edges = page.locator('.lf-edge')
+    await expect(edges).toHaveCount(1)
+  })
+
+  test('should activate flow-chart when button is clicked', async ({ page }) => {
+    const flowChartButton = page.locator('.ql-toolbar .ql-flow-chart')
+    await expect(flowChartButton).toBeVisible()
+
+    await flowChartButton.click()
+
+    await page.waitForTimeout(500)
+
+    const editor = page.locator('.ql-editor')
+    await expect(editor).toBeVisible()
+  })
+})

packages/docs/fluent-editor/demos/flow-chart.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type FluentEditor from '@opentiny/fluent-editor'
+import { onMounted, ref } from 'vue'
+
+let editor: FluentEditor
+const editorRef = ref<HTMLElement>()
+
+const TOOLBAR_CONFIG = [
+  [{ header: [] }],
+  ['bold', 'italic', 'underline', 'link'],
+  [{ align: [] }, { list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
+  ['clean'],
+  ['flow-chart'],
+]
+
+onMounted(() => {
+  import('@opentiny/fluent-editor').then(({ default: FluentEditor }) => {
+    if (!editorRef.value) return
+    editor = new FluentEditor(editorRef.value, {
+      theme: 'snow',
+      modules: {
+        'toolbar': TOOLBAR_CONFIG,
+        'flow-chart': true,
+      },
+    })
+    const ops = [{ insert: '\n' }, { insert: { 'flow-chart': { nodes: [{ id: 'node1', type: 'rect', x: 100, y: 150, text: '开始' }, { id: 'node2', type: 'rect', x: 300, y: 150, text: '结束' }], edges: [{ id: 'edge1', sourceNodeId: 'node1', targetNodeId: 'node2', type: 'polyline' }] } } }, { insert: '\n\n' }]
+    editor.setContents(ops)
+  })
+})
+</script>
+
+<template>
+  <div ref="editorRef" />
+</template>

packages/docs/fluent-editor/demos/mind-map-background.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type FluentEditor from '@opentiny/fluent-editor'
+import { onMounted, ref } from 'vue'
+
+let editor: FluentEditor
+const editorRef = ref<HTMLElement>()
+
+const TOOLBAR_CONFIG = [
+  [{ header: [] }],
+  ['bold', 'italic', 'underline', 'link'],
+  [{ align: [] }, { list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
+  ['clean'],
+  ['mind-map'],
+]
+
+onMounted(() => {
+  import('@opentiny/fluent-editor').then(({ default: FluentEditor }) => {
+    if (!editorRef.value) return
+    editor = new FluentEditor(editorRef.value, {
+      theme: 'snow',
+      modules: {
+        'toolbar': TOOLBAR_CONFIG,
+        'mind-map': {
+          background: {
+            color: '#A4DD00',
+            // image: 'url(path/to/image.png)',
+            repeat: 'repeat',
+            position: 'center',
+            size: 'auto',
+          },
+        },
+      },
+    })
+    const ops = [{ insert: '\n' }, { insert: { 'mind-map': { layout: 'logicalStructure', root: { data: { text: '根节点', expand: true, uid: '36bae545-da0b-4c08-be14-ff05f7f05d0a', isActive: false }, children: [{ data: { text: '二级节点', uid: 'ef0895d2-b5cc-4214-b0ee-e29f8f02420d', expand: true, richText: false, isActive: false }, children: [] }], smmVersion: '0.14.0-fix.1' }, theme: { template: 'default', config: { backgroundColor: '#A4DD00', backgroundRepeat: 'repeat', backgroundPosition: 'center', backgroundSize: 'auto' } }, view: { transform: { scaleX: 1, scaleY: 1, shear: 0, rotate: 0, translateX: 0, translateY: 0, originX: 0, originY: 0, a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 }, state: { scale: 1, x: 0, y: 0, sx: 0, sy: 0 } } } } }, { insert: '\n\n' }]
+    editor.setContents(ops)
+  })
+})
+</script>
+
+<template>
+  <div ref="editorRef" />
+</template>

packages/docs/fluent-editor/demos/mind-map-line.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type FluentEditor from '@opentiny/fluent-editor'
+import { onMounted, ref } from 'vue'
+
+let editor: FluentEditor
+const editorRef = ref<HTMLElement>()
+
+const TOOLBAR_CONFIG = [
+  [{ header: [] }],
+  ['bold', 'italic', 'underline', 'link'],
+  [{ align: [] }, { list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
+  ['clean'],
+  ['mind-map'],
+]
+
+onMounted(() => {
+  import('@opentiny/fluent-editor').then(({ default: FluentEditor }) => {
+    if (!editorRef.value) return
+    editor = new FluentEditor(editorRef.value, {
+      theme: 'snow',
+      modules: {
+        'toolbar': TOOLBAR_CONFIG,
+        'mind-map': {
+          line: {
+            color: '#009CE0',
+            width: 3,
+            dasharray: '15, 10, 5, 10, 15',
+            style: 'curve',
+          },
+        },
+      },
+    })
+    const ops = [{ insert: '\n' }, { insert: { 'mind-map': { layout: 'logicalStructure', root: { data: { text: '根节点', expand: true, uid: '36bae545-da0b-4c08-be14-ff05f7f05d0a', isActive: false }, children: [{ data: { text: '二级节点', uid: 'ef0895d2-b5cc-4214-b0ee-e29f8f02420d', expand: true, richText: false, isActive: false }, children: [] }], smmVersion: '0.14.0-fix.1' }, theme: { template: 'default', config: { lineColor: '#009CE0', lineWidth: 3, lineDasharray: '15, 10, 5, 10, 15', lineStyle: 'curve' } }, view: { transform: { scaleX: 1, scaleY: 1, shear: 0, rotate: 0, translateX: 0, translateY: 0, originX: 0, originY: 0, a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 }, state: { scale: 1, x: 0, y: 0, sx: 0, sy: 0 } } } } }, { insert: '\n\n' }]
+    editor.setContents(ops)
+  })
+})
+</script>
+
+<template>
+  <div ref="editorRef" />
+</template>

packages/docs/fluent-editor/demos/mind-map-resize.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type FluentEditor from '@opentiny/fluent-editor'
+import { onMounted, ref } from 'vue'
+
+let editor: FluentEditor
+const editorRef = ref<HTMLElement>()
+
+const TOOLBAR_CONFIG = [
+  [{ header: [] }],
+  ['bold', 'italic', 'underline', 'link'],
+  [{ align: [] }, { list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
+  ['clean'],
+  ['mind-map'],
+]
+
+onMounted(() => {
+  import('@opentiny/fluent-editor').then(({ default: FluentEditor }) => {
+    if (!editorRef.value) return
+    editor = new FluentEditor(editorRef.value, {
+      theme: 'snow',
+      modules: {
+        'toolbar': TOOLBAR_CONFIG,
+        'mind-map': {
+          resize: true,
+        },
+      },
+    })
+    const ops = [{ insert: '\n' }, { insert: { 'mind-map': { layout: 'logicalStructure', root: { data: { text: '根节点', expand: true, uid: '36bae545-da0b-4c08-be14-ff05f7f05d0a', isActive: false }, children: [{ data: { text: '二级节点', uid: 'ef0895d2-b5cc-4214-b0ee-e29f8f02420d', expand: true, richText: false, isActive: false }, children: [] }], smmVersion: '0.14.0-fix.1' }, theme: { template: 'default', config: {} }, view: { transform: { scaleX: 1, scaleY: 1, shear: 0, rotate: 0, translateX: 0, translateY: 0, originX: 0, originY: 0, a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 }, state: { scale: 1, x: 0, y: 0, sx: 0, sy: 0 } } } } }, { insert: '\n\n' }]
+    editor.setContents(ops)
+  })
+})
+</script>
+
+<template>
+  <div ref="editorRef" />
+</template>