From 718434b40c7c13616c7ebde438e1b2576edf74f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E4=BA=91=E9=A3=9E?= <huangyunfeihufe@hotmail.com>
Date: Wed, 23 Nov 2022 17:31:23 +0800
Subject: [PATCH] feat:add placeholder for contextmenu display name

---
 src/editor/assets/css/index.css            |  4 ++++
 src/editor/core/contextmenu/ContextMenu.ts | 19 ++++++++++++++++++-
 src/editor/dataset/constant/ContextMenu.ts |  3 +++
 3 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 src/editor/dataset/constant/ContextMenu.ts

diff --git a/src/editor/assets/css/index.css b/src/editor/assets/css/index.css
index 1720cf1..161fa99 100644
--- a/src/editor/assets/css/index.css
+++ b/src/editor/assets/css/index.css
@@ -341,8 +341,12 @@
 }
 
 .contextmenu-content .contextmenu-item span {
+  max-width: 300px;
   font-size: 12px;
   color: #3d4757;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .contextmenu-content .contextmenu-item span.shortcut {
diff --git a/src/editor/core/contextmenu/ContextMenu.ts b/src/editor/core/contextmenu/ContextMenu.ts
index d0cada5..961fbb8 100644
--- a/src/editor/core/contextmenu/ContextMenu.ts
+++ b/src/editor/core/contextmenu/ContextMenu.ts
@@ -1,3 +1,4 @@
+import { NAME_PLACEHOLDER } from '../../dataset/constant/ContextMenu'
 import { EDITOR_COMPONENT } from '../../dataset/constant/Editor'
 import { EditorComponent } from '../../dataset/enum/Editor'
 import { IContextMenuContext, IRegisterContextMenu } from '../../interface/contextmenu/ContextMenu'
@@ -202,7 +203,8 @@ export class ContextMenu {
         }
         // 文本
         const span = document.createElement('span')
-        span.append(document.createTextNode(menu.name!))
+        const name = this._formatName(menu.name!)
+        span.append(document.createTextNode(name))
         menuItem.append(span)
         // 快捷方式提示
         if (menu.shortCut) {
@@ -241,6 +243,21 @@ export class ContextMenu {
     }
   }
 
+  private _formatName(name: string): string {
+    const placeholderValues = Object.values(NAME_PLACEHOLDER)
+    const placeholderReg = new RegExp(`${placeholderValues.join('|')}`)
+    let formatName = name
+    if (placeholderReg.test(formatName)) {
+      // 选区名称
+      const selectedReg = new RegExp(NAME_PLACEHOLDER.SELECTED_TEXT, 'g')
+      if (selectedReg.test(formatName)) {
+        const selectedText = this.range.toString()
+        formatName = formatName.replace(selectedReg, selectedText)
+      }
+    }
+    return formatName
+  }
+
   public registerContextMenuList(payload: IRegisterContextMenu[]) {
     this.contextMenuList.push(...payload)
   }
diff --git a/src/editor/dataset/constant/ContextMenu.ts b/src/editor/dataset/constant/ContextMenu.ts
new file mode 100644
index 0000000..48a0c9a
--- /dev/null
+++ b/src/editor/dataset/constant/ContextMenu.ts
@@ -0,0 +1,3 @@
+export const NAME_PLACEHOLDER = {
+  SELECTED_TEXT: '%s'
+}
\ No newline at end of file