feat: enhance ArticleEditorCanvas with new icons and table insertion functionality

apps/admin-web/src/components/ArticleEditorCanvas.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
 import {
   BoldOutlined,
+  CodeOutlined,
   ItalicOutlined,
+  StrikethroughOutlined,
   OrderedListOutlined,
-  PicCenterOutlined,
+  MinusOutlined,
   PictureOutlined,
   RedoOutlined,
+  TableOutlined,
   UndoOutlined,
   UnorderedListOutlined,
 } from "@ant-design/icons-vue";
@@ -15,11 +18,13 @@ import {
   insertImageCommand,
   toggleEmphasisCommand,
   toggleStrongCommand,
+  toggleInlineCodeCommand,
   wrapInBlockquoteCommand,
   wrapInBulletListCommand,
   wrapInHeadingCommand,
   wrapInOrderedListCommand,
 } from "@milkdown/kit/preset/commonmark";
+import { insertTableCommand, toggleStrikethroughCommand } from "@milkdown/kit/preset/gfm";
 import { callCommand, replaceAll } from "@milkdown/kit/utils";
 import { Crepe, CrepeFeature } from "@milkdown/crepe";
 import "@milkdown/crepe/theme/common/style.css";
@@ -142,16 +147,20 @@ function insertImage(): void {
 
   runCommand(insertImageCommand, { src: src.trim() });
 }
+
+function insertTable(): void {
+  runCommand(insertTableCommand, { row: 3, col: 3 });
+}
 </script>
 
 <template>
   <div class="article-editor-canvas" :class="{ 'article-editor-canvas--disabled': disabled }">
     <div class="article-editor-canvas__toolbar">
       <a-button size="small" type="text" @click="runCommand(undoCommand)">
-        <template #icon><UndoOutlined /></template>
+        <template #icon><IconFont type="icon-Undo" /></template>
       </a-button>
       <a-button size="small" type="text" @click="runCommand(redoCommand)">
-        <template #icon><RedoOutlined /></template>
+        <template #icon><IconFont type="icon-redo" /></template>
       </a-button>
       <span class="article-editor-canvas__divider"></span>
       <a-button size="small" type="text" @click="runCommand(wrapInHeadingCommand, 1)">H1</a-button>
@@ -164,18 +173,28 @@ function insertImage(): void {
       <a-button size="small" type="text" @click="runCommand(toggleEmphasisCommand)">
         <template #icon><ItalicOutlined /></template>
       </a-button>
-      <a-button size="small" type="text" @click="runCommand(wrapInBlockquoteCommand)">
+      <a-button size="small" type="text" @click="runCommand(toggleStrikethroughCommand)">
-        “ ”
+        <template #icon><StrikethroughOutlined /></template>
       </a-button>
+      <span class="article-editor-canvas__divider"></span>
+      <a-button size="small" type="text" style="font-size: 16px; font-weight: bold; line-height: 1" @click="runCommand(wrapInBlockquoteCommand)">
+        "
+      </a-button>
+      <a-button size="small" type="text" @click="runCommand(insertHrCommand)">
+        <template #icon><MinusOutlined /></template>
+      </a-button>
+      <span class="article-editor-canvas__divider"></span>
       <a-button size="small" type="text" @click="runCommand(wrapInBulletListCommand)">
         <template #icon><UnorderedListOutlined /></template>
       </a-button>
       <a-button size="small" type="text" @click="runCommand(wrapInOrderedListCommand)">
         <template #icon><OrderedListOutlined /></template>
       </a-button>
-      <a-button size="small" type="text" @click="runCommand(insertHrCommand)">
+    
-        <template #icon><PicCenterOutlined /></template>
+      <a-button size="small" type="text" @click="insertTable">
+        <template #icon><TableOutlined /></template>
       </a-button>
+      <span class="article-editor-canvas__divider"></span>
       <a-button size="small" type="text" @click="insertImage">
         <template #icon><PictureOutlined /></template>
       </a-button>

apps/admin-web/src/main.ts

@@ -1,3 +1,4 @@
+import { createFromIconfontCN } from "@ant-design/icons-vue";
 import { QueryClient, VueQueryPlugin } from "@tanstack/vue-query";
 import { createApp } from "vue";
 import {
@@ -65,6 +66,13 @@ const queryClient = new QueryClient({
 });
 
 const app = createApp(App);
+
+const IconFont = createFromIconfontCN({ 
+  // 需要替换为你自己真实项目的 js 地址，才能显示出你的 '#icon-line-global_undo'。
+  scriptUrl: "//at.alicdn.com/t/c/font_5154382_bf9lssq7ar.js",
+});
+app.component("IconFont", IconFont);
+
 app.component("ATextarea", Input.TextArea);
 
 [