Merge branch 'main' of https://github.com/opentiny/fluent-editor into…

… feat-export-quill

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

@@ -15,7 +15,9 @@ export function sidebar() {
         { text: '格式刷', link: '/docs/format-painter' },
         { text: '公式', link: '/docs/formula' },
         { text: 'Markdown', link: '/docs/markdown' },
-      ]
-    }
+        { text: '字符统计', link: '/docs/counter' },
+        { text: '视频', link: '/docs/video' },
+      ],
+    },
   ]
 }

packages/docs/fluent-editor/demos/counter-count.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import FluentEditor from '@opentiny/fluent-editor'
+
+let editor
+
+onMounted(() => {
+  // ssr compat, reference: https://vitepress.dev/guide/ssr-compat#importing-in-mounted-hook
+  import('@opentiny/fluent-editor').then((module) => {
+    const FluentEditor = module.default
+
+    editor = new FluentEditor('#editor-counter-count', {
+      theme: 'snow',
+      modules: {
+        counter: {
+          count: 2000,
+        },
+      },
+    })
+  })
+})
+</script>
+
+<template>
+  <div id="editor-counter-count" />
+</template>

packages/docs/fluent-editor/demos/counter.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import FluentEditor from '@opentiny/fluent-editor'
+
+let editor
+
+onMounted(() => {
+  // ssr compat, reference: https://vitepress.dev/guide/ssr-compat#importing-in-mounted-hook
+  import('@opentiny/fluent-editor').then((module) => {
+    const FluentEditor = module.default
+
+    editor = new FluentEditor('#editor', {
+      theme: 'snow',
+      modules: {
+        counter: true,
+      },
+    })
+  })
+})
+</script>
+
+<template>
+  <div id="editor" />
+</template>

packages/docs/fluent-editor/demos/format-painter.vue

@@ -10,7 +10,6 @@ const TOOLBAR_CONFIG = [
   ['bold', 'italic', 'underline', 'link'],
   [{ list: 'ordered' }, { list: 'bullet' }],
   ['clean'],
-  ['image'],
   ['format-painter'],
 ]
 

packages/docs/fluent-editor/demos/image-upload.spec.ts

@@ -1,35 +1,35 @@
-import { test, expect } from '@playwright/test';
-import path from 'path';
-import { fileURLToPath } from 'node:url';
+import { test, expect } from '@playwright/test'
+import path from 'path'
+import { fileURLToPath } from 'node:url'
 const __filename = fileURLToPath(import.meta.url)
-const currentDirectory = path.dirname(__filename);
+const currentDirectory = path.dirname(__filename)
 const baseUrl = path.dirname(currentDirectory)
 
 test('image-upload', async ({ page }) => {
-  await page.goto('http://localhost:5173/fluent-editor/docs/image-upload');
+  await page.goto('http://localhost:5173/fluent-editor/docs/image-upload')
 
   // upload
-  await page.getByLabel('image').click();
-  await page.locator('.ql-toolbar input').setInputFiles(path.join(baseUrl, "public", "logo.png"));
-  await expect(page.locator('#editor').getByRole('img')).toBeVisible();
+  await page.getByLabel('image').first().click()
+  await page.locator('.ql-toolbar input').setInputFiles(path.join(baseUrl, 'public', 'logo.png'))
+  await expect(page.locator('#editor').getByRole('img')).toBeVisible()
 
   // overlay
-  await page.locator('#editor').getByRole('img').click();
-  await expect(page.locator('.blot-formatter__overlay')).toBeVisible();
+  await page.locator('#editor').getByRole('img').click()
+  await expect(page.locator('.blot-formatter__overlay')).toBeVisible()
 
   // zoom
-  const move_Distance = 100
-  const imageElement = page.locator('#editor').getByRole('img');
-  const oldBox = await imageElement.boundingBox() as { x: number, y: number, width: number; height: number; };
-  await page.mouse.move(oldBox.x, oldBox.y);
+  const moveDistance = 100
+  const imageElement = page.locator('#editor').getByRole('img')
+  const oldBox = await imageElement.boundingBox() as { x: number, y: number, width: number, height: number }
+  await page.mouse.move(oldBox.x, oldBox.y)
   await page.mouse.down()
-  await page.mouse.move(oldBox.x + move_Distance, oldBox.y + move_Distance)
-  await page.mouse.up();
-  const newBox = await imageElement.boundingBox() as { x: number, y: number, width: number; height: number; };
-  expect(newBox.width + move_Distance).toEqual(oldBox.width)
-  expect(newBox.height + move_Distance).toEqual(oldBox.height)
+  await page.mouse.move(oldBox.x + moveDistance, oldBox.y + moveDistance)
+  await page.mouse.up()
+  const newBox = await imageElement.boundingBox() as { x: number, y: number, width: number, height: number }
+  expect(newBox.width + moveDistance).toEqual(oldBox.width)
+  expect(newBox.height + moveDistance).toEqual(oldBox.height)
 
   // remove overlay
-  await page.mouse.click(newBox.x + newBox.width + 2, newBox.y + newBox.height + 2);
-  await expect(page.locator('.blot-formatter__overlay')).not.toBeVisible();
-});
+  await page.mouse.click(newBox.x + newBox.width + 2, newBox.y + newBox.height + 2)
+  await expect(page.locator('.blot-formatter__overlay')).not.toBeVisible()
+})

packages/docs/fluent-editor/demos/video.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import FluentEditor from '@opentiny/fluent-editor'
+
+let editor
+
+const TOOLBAR_CONFIG = [
+  [{ header: [] }],
+  ['bold', 'italic', 'underline', 'link'],
+  [{ list: 'ordered' }, { list: 'bullet' }],
+  ['clean'],
+  ['video'],
+]
+
+onMounted(() => {
+  // ssr compat, reference: https://vitepress.dev/guide/ssr-compat#importing-in-mounted-hook
+  import('@opentiny/fluent-editor').then((module) => {
+    const FluentEditor = module.default
+
+    editor = new FluentEditor('#editor', {
+      theme: 'snow',
+      modules: {
+        toolbar: TOOLBAR_CONFIG,
+      },
+    })
+  })
+})
+</script>
+
+<template>
+  <div id="editor" />
+</template>

packages/docs/fluent-editor/docs/counter.md

@@ -0,0 +1,31 @@
+# 字符统计
+
+实时显示编辑器中的字符数。
+
+## 基本用法
+
+通过配置 `counter` 为 true，可以开启字符统计功能。
+
+:::demo src=demos/counter.vue
+:::
+
+## 最大字符数
+
+默认最大字符数为 500，通过配置 `count` 属性，可以自定义最大字符数。
+
+:::demo src=demos/counter-count.vue
+:::
+
+## API
+
+`counter` 模块配置项：
+
+```typescript
+interface ICounterOption {
+  format?: 'text' | 'html'
+  unit?: 'char' | 'word'
+  count?: number // 默认为 500
+  template?: string | Function
+  errorTemplate?: string | Function
+}
+```

packages/docs/fluent-editor/docs/video.md

@@ -0,0 +1,8 @@
+# 视频
+
+通过配置工具栏按钮 `video`，可以开启插入视频功能。
+
+测试视频链接：[https://media.w3.org/2010/05/sintel/trailer.mp4](https://media.w3.org/2010/05/sintel/trailer.mp4)
+
+:::demo src=demos/video.vue
+:::