docs: update plugin markdown

docs/.vitepress/config.ts

@@ -21,6 +21,10 @@ export default defineConfig({
       {
         text: 'Demo',
         link: 'https://hufe.club/canvas-editor'
+      },
+      {
+        text: '官方插件',
+        link: '/guide/plugin-internal.html'
       }
     ],
     sidebar: [
@@ -71,7 +75,10 @@ export default defineConfig({
       },
       {
         text: '插件',
-        items: [{ text: '自定义插件', link: '/guide/plugin' }]
+        items: [
+          { text: '自定义插件', link: '/guide/plugin-custom' },
+          { text: '官方插件', link: '/guide/plugin-internal' }
+        ]
       }
     ],
     socialLinks: [
@@ -104,6 +111,10 @@ export default defineConfig({
           {
             text: 'Demo',
             link: 'https://hufe.club/canvas-editor'
+          },
+          {
+            text: 'Official plugin',
+            link: '/en/guide/plugin-internal.html'
           }
         ],
         sidebar: [
@@ -154,7 +165,10 @@ export default defineConfig({
           },
           {
             text: 'Plugin',
-            items: [{ text: 'plugin', link: '/en/guide/plugin' }]
+            items: [
+              { text: 'custom', link: '/en/guide/plugin-custom' },
+              { text: 'official', link: '/en/guide/plugin-internal' }
+            ]
           }
         ]
       }

docs/en/guide/plugin.md → docs/en/guide/plugin-custom.md

@@ -1,8 +1,7 @@
 # Custom Plugin
 
 ::: tip
-1. Currently, only methods can be added and modified to the editor instance, and more functions will be extended in the future
-2. Official maintenance plugin: https://github.com/Hufe921/canvas-editor-plugin
+Official plugin: https://github.com/Hufe921/canvas-editor-plugin
 :::
 
 ## Write a Plugin
@@ -14,6 +13,8 @@ export function myPlugin(editor: Editor, options?: Option) {
 
   // 2. add，see more：src/plugins/markdown
   editor.command.addFunction = () => {}
+
+  // 3. listener, eventbus, shortcut, contextmenu, override...
 }
 ```
 

docs/en/guide/plugin-internal.md

@@ -0,0 +1,109 @@
+# Official plugin
+
+::: tip
+Official plugin: https://github.com/Hufe921/canvas-editor-plugin
+:::
+
+## Barcode1d
+
+```javascript
+import Editor from "@hufe921/canvas-editor"
+import barcode1DPlugin from "@hufe921/canvas-editor-plugin-barcode1d"
+
+const instance = new Editor()
+instance.use(barcode1DPlugin)
+
+instance.executeInsertBarcode1D(
+  content: string,
+  width: number,
+  height: number,
+  options?: JsBarcode.Options
+)
+```
+
+## Barcode2d
+
+```javascript
+import Editor from "@hufe921/canvas-editor"
+import barcode2DPlugin from "@hufe921/canvas-editor-plugin-barcode2d"
+
+const instance = new Editor()
+instance.use(barcode2DPlugin, options?: IBarcode2DOption)
+
+instance.executeInsertBarcode2D(
+  content: string,
+  width: number,
+  height: number,
+  hints?: Map<EncodeHintType, any>
+)
+```
+
+## Code block
+
+```javascript
+import Editor from "@hufe921/canvas-editor"
+import codeblockPlugin from "@hufe921/canvas-editor-plugin-codeblock"
+
+const instance = new Editor()
+instance.use(codeblockPlugin)
+
+instance.executeInsertCodeblock(content: string)
+```
+
+## Word
+
+```javascript
+import Editor from '@hufe921/canvas-editor'
+import docxPlugin from '@hufe921/canvas-editor-plugin-docx'
+
+const instance = new Editor()
+instance.use(docxPlugin)
+
+command.executeImportDocx({
+  arrayBuffer: buffer
+})
+
+instance.executeExportDocx({
+  fileName: string
+})
+```
+
+## Excel
+
+```javascript
+import Editor from '@hufe921/canvas-editor'
+import excelPlugin from '@hufe921/canvas-editor-plugin-excel'
+
+const instance = new Editor()
+instance.use(excelPlugin)
+
+command.executeImportExcel({
+  arrayBuffer: buffer
+})
+```
+
+## Floating toolbar
+
+```javascript
+import Editor from '@hufe921/canvas-editor'
+import floatingToolbarPlugin from '@hufe921/canvas-editor-plugin-floating-toolbar'
+
+const instance = new Editor()
+instance.use(floatingToolbarPlugin)
+```
+
+## Diagram
+
+```javascript
+import Editor from '@hufe921/canvas-editor'
+import diagramPlugin from '@hufe921/canvas-editor-plugin-diagram'
+
+const instance = new Editor()
+instance.use(diagramPlugin)
+
+command.executeLoadDiagram({
+  lang?: Lang
+  data?: string
+  onDestroy?: (message?: any) => void
+})
+```

docs/guide/plugin.md → docs/guide/plugin-custom.md

@@ -1,8 +1,7 @@
 # 自定义插件
 
 ::: tip
-1. 目前仅支持对编辑器实例进行方法的增加及修改，后续扩展更多功能
-2. 官方维护插件：https://github.com/Hufe921/canvas-editor-plugin
+官方维护插件仓库：https://github.com/Hufe921/canvas-editor-plugin
 :::
 
 ## 开发插件
@@ -14,6 +13,8 @@ export function myPlugin(editor: Editor, options?: Option) {
 
   // 2. 增加方法，详见：src/plugins/markdown
   editor.command.addFunction = () => {}
+
+  // 3. 事件监听、快捷键、右键菜单、重写方法等组合处理
 }
 ```
 

docs/guide/plugin-internal.md

@@ -0,0 +1,109 @@
+# 官方插件
+
+::: tip
+官方维护插件仓库：https://github.com/Hufe921/canvas-editor-plugin
+:::
+
+## 条形码
+
+```javascript
+import Editor from "@hufe921/canvas-editor"
+import barcode1DPlugin from "@hufe921/canvas-editor-plugin-barcode1d"
+
+const instance = new Editor()
+instance.use(barcode1DPlugin)
+
+instance.executeInsertBarcode1D(
+  content: string,
+  width: number,
+  height: number,
+  options?: JsBarcode.Options
+)
+```
+
+## 二维码
+
+```javascript
+import Editor from "@hufe921/canvas-editor"
+import barcode2DPlugin from "@hufe921/canvas-editor-plugin-barcode2d"
+
+const instance = new Editor()
+instance.use(barcode2DPlugin, options?: IBarcode2DOption)
+
+instance.executeInsertBarcode2D(
+  content: string,
+  width: number,
+  height: number,
+  hints?: Map<EncodeHintType, any>
+)
+```
+
+## 代码块
+
+```javascript
+import Editor from "@hufe921/canvas-editor"
+import codeblockPlugin from "@hufe921/canvas-editor-plugin-codeblock"
+
+const instance = new Editor()
+instance.use(codeblockPlugin)
+
+instance.executeInsertCodeblock(content: string)
+```
+
+## Word
+
+```javascript
+import Editor from '@hufe921/canvas-editor'
+import docxPlugin from '@hufe921/canvas-editor-plugin-docx'
+
+const instance = new Editor()
+instance.use(docxPlugin)
+
+command.executeImportDocx({
+  arrayBuffer: buffer
+})
+
+instance.executeExportDocx({
+  fileName: string
+})
+```
+
+## Excel
+
+```javascript
+import Editor from '@hufe921/canvas-editor'
+import excelPlugin from '@hufe921/canvas-editor-plugin-excel'
+
+const instance = new Editor()
+instance.use(excelPlugin)
+
+command.executeImportExcel({
+  arrayBuffer: buffer
+})
+```
+
+## 悬浮工具
+
+```javascript
+import Editor from '@hufe921/canvas-editor'
+import floatingToolbarPlugin from '@hufe921/canvas-editor-plugin-floating-toolbar'
+
+const instance = new Editor()
+instance.use(floatingToolbarPlugin)
+```
+
+## 流程图
+
+```javascript
+import Editor from '@hufe921/canvas-editor'
+import diagramPlugin from '@hufe921/canvas-editor-plugin-diagram'
+
+const instance = new Editor()
+instance.use(diagramPlugin)
+
+command.executeLoadDiagram({
+  lang?: Lang
+  data?: string
+  onDestroy?: (message?: any) => void
+})
+```