@hufe921/canvas-editor 0.9.13 → 0.9.14

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.13";
+const version = "0.9.14";
 const ZERO = "\u200B";
 const WRAP = "\n";
 var RowFlex;
@@ -3552,6 +3552,23 @@ function zipElementList(payload) {
   }
   return zipElementListData;
 }
+function getElementRowFlex(node) {
+  const textAlign = window.getComputedStyle(node).textAlign;
+  switch (textAlign) {
+    case "left":
+    case "start":
+      return RowFlex.LEFT;
+    case "center":
+      return RowFlex.CENTER;
+    case "right":
+    case "end":
+      return RowFlex.RIGHT;
+    case "justify":
+      return RowFlex.ALIGNMENT;
+    default:
+      return RowFlex.LEFT;
+  }
+}
 function writeClipboardItem(text, html) {
   if (!text || !html)
     return;
@@ -3642,7 +3659,8 @@ function writeElementList(elementList, options) {
         dom.innerText = text2.replace(new RegExp(`${ZERO}`, "g"), "\n");
         dom.style.fontFamily = element.font || options.defaultFont;
         if (element.rowFlex) {
-          dom.style.textAlign = element.rowFlex;
+          const isAlignment = element.rowFlex === RowFlex.ALIGNMENT;
+          dom.style.textAlign = isAlignment ? "justify" : element.rowFlex;
         }
         if (element.color) {
           dom.style.color = element.color;
@@ -3672,18 +3690,23 @@ function writeElementList(elementList, options) {
 function getElementListByHTML(htmlText, options) {
   const elementList = [];
   function findTextNode(dom) {
-    var _a;
     if (dom.nodeType === 3) {
-      const style = window.getComputedStyle(dom.parentNode);
+      const parentNode = dom.parentNode;
+      const rowFlex = getElementRowFlex(parentNode);
       const value = dom.textContent;
-      if (value && ((_a = dom.parentNode) == null ? void 0 : _a.nodeName) !== "STYLE") {
-        elementList.push({
+      const style = window.getComputedStyle(parentNode);
+      if (value && parentNode.nodeName !== "STYLE") {
+        const element = {
           value,
           color: style.color,
           bold: Number(style.fontWeight) > 500,
           italic: style.fontStyle.includes("italic"),
           size: Math.floor(Number(style.fontSize.replace("px", "")))
-        });
+        };
+        if (rowFlex !== RowFlex.LEFT) {
+          element.rowFlex = rowFlex;
+        }
+        elementList.push(element);
       }
     } else if (dom.nodeType === 1) {
       const childNodes = dom.childNodes;
@@ -3729,39 +3752,35 @@ function getElementListByHTML(htmlText, options) {
             colgroup: [],
             trList: []
           };
-          let tdCount = 0;
-          tableElement.querySelectorAll("tr").forEach((trElement, trIndex) => {
+          tableElement.querySelectorAll("tr").forEach((trElement) => {
             const trHeightStr = window.getComputedStyle(trElement).height.replace("px", "");
             const tr = {
               height: Number(trHeightStr),
               tdList: []
             };
-            trElement.querySelectorAll("td").forEach((tdElement) => {
-              const colspan = tdElement.colSpan;
-              const rowspan = tdElement.rowSpan;
-              if (trIndex === 0) {
-                tdCount += colspan;
-              }
+            trElement.querySelectorAll("th,td").forEach((tdElement) => {
+              const tableCell = tdElement;
               const td = {
-                colspan,
-                rowspan,
+                colspan: tableCell.colSpan,
+                rowspan: tableCell.rowSpan,
                 value: [{
-                  value: tdElement.innerText
+                  value: tableCell.innerText
                 }]
               };
               tr.tdList.push(td);
             });
-            element.trList.push(tr);
+            if (tr.tdList.length) {
+              element.trList.push(tr);
+            }
           });
-          if (tdCount) {
+          if (element.trList.length) {
+            const tdCount = element.trList[0].tdList.reduce((pre, cur) => pre + cur.colspan, 0);
             const width = Math.ceil(options.innerWidth / tdCount);
             for (let i = 0; i < tdCount; i++) {
               element.colgroup.push({
                 width
               });
             }
-          }
-          if (element.colgroup) {
             elementList.push(element);
           }
         } else if (node.nodeName === "INPUT" && node.type === ControlComponent.CHECKBOX) {
@@ -7699,6 +7718,69 @@ class Previewer {
     this.resizerSelection.style.display = "none";
   }
 }
+const contextmenu$1 = {
+  global: {
+    cut: "\u526A\u5207",
+    copy: "\u590D\u5236",
+    paste: "\u7C98\u8D34",
+    selectAll: "\u5168\u9009",
+    print: "\u6253\u5370"
+  },
+  control: {
+    "delete": "\u5220\u9664\u63A7\u4EF6"
+  },
+  hyperlink: {
+    "delete": "\u5220\u9664\u94FE\u63A5",
+    cancel: "\u53D6\u6D88\u94FE\u63A5",
+    edit: "\u7F16\u8F91\u94FE\u63A5"
+  },
+  image: {
+    change: "\u66F4\u6539\u56FE\u7247",
+    saveAs: "\u53E6\u5B58\u4E3A\u56FE\u7247",
+    textWrap: "\u6587\u5B57\u73AF\u7ED5",
+    textWrapType: {
+      embed: "\u5D4C\u5165\u578B",
+      upDown: "\u4E0A\u4E0B\u578B\u73AF\u7ED5"
+    }
+  },
+  table: {
+    insertRowCol: "\u63D2\u5165\u884C\u5217",
+    insertTopRow: "\u4E0A\u65B9\u63D2\u51651\u884C",
+    insertBottomRow: "\u4E0B\u65B9\u63D2\u51651\u884C",
+    insertLeftCol: "\u5DE6\u4FA7\u63D2\u51651\u5217",
+    insertRightCol: "\u53F3\u4FA7\u63D2\u51651\u5217",
+    deleteRowCol: "\u5220\u9664\u884C\u5217",
+    deleteRow: "\u5220\u96641\u884C",
+    deleteCol: "\u5220\u96641\u5217",
+    deleteTable: "\u5220\u9664\u6574\u4E2A\u8868\u683C",
+    mergeCell: "\u5408\u5E76\u5355\u5143\u683C",
+    mergeCancelCell: "\u53D6\u6D88\u5408\u5E76"
+  }
+};
+const datePicker$1 = {
+  now: "\u6B64\u523B",
+  confirm: "\u786E\u5B9A",
+  "return": "\u8FD4\u56DE\u65E5\u671F",
+  timeSelect: "\u65F6\u95F4\u9009\u62E9",
+  weeks: {
+    sun: "\u65E5",
+    mon: "\u4E00",
+    tue: "\u4E8C",
+    wed: "\u4E09",
+    thu: "\u56DB",
+    fri: "\u4E94",
+    sat: "\u516D"
+  },
+  year: "\u5E74",
+  month: "\u6708",
+  hour: "\u65F6",
+  minute: "\u5206",
+  second: "\u79D2"
+};
+var zhCN = {
+  contextmenu: contextmenu$1,
+  datePicker: datePicker$1
+};
 class DatePicker {
   constructor(options = {}) {
     __publicField(this, "options");
@@ -7707,9 +7789,11 @@ class DatePicker {
     __publicField(this, "renderOptions");
     __publicField(this, "isDatePicker");
     __publicField(this, "pickDate");
+    __publicField(this, "lang");
     this.options = __spreadValues({
       mountDom: document.body
     }, options);
+    this.lang = datePicker$1;
     this.now = new Date();
     this.dom = this._createDom();
     this.renderOptions = null;
@@ -7745,7 +7829,8 @@ class DatePicker {
     datePickerTitle.append(nextYearTitle);
     const datePickerWeek = document.createElement("div");
     datePickerWeek.classList.add(`${EDITOR_PREFIX}-date-week`);
-    const weekList = ["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"];
+    const { weeks: { sun, mon, tue, wed, thu, fri, sat } } = this.lang;
+    const weekList = [sun, mon, tue, wed, thu, fri, sat];
     weekList.forEach((week) => {
       const weekDom = document.createElement("span");
       weekDom.innerText = `${week}`;
@@ -7761,7 +7846,7 @@ class DatePicker {
     let hourTime;
     let minuteTime;
     let secondTime;
-    const timeList = ["\u65F6", "\u5206", "\u79D2"];
+    const timeList = [this.lang.hour, this.lang.minute, this.lang.second];
     timeList.forEach((t, i) => {
       const li = document.createElement("li");
       const timeText = document.createElement("span");
@@ -7791,13 +7876,13 @@ class DatePicker {
     datePickerMenu.classList.add(`${EDITOR_PREFIX}-date-menu`);
     const timeMenu = document.createElement("button");
     timeMenu.classList.add(`${EDITOR_PREFIX}-date-menu__time`);
-    timeMenu.innerText = "\u65F6\u95F4\u9009\u62E9";
+    timeMenu.innerText = this.lang.timeSelect;
     const nowMenu = document.createElement("button");
     nowMenu.classList.add(`${EDITOR_PREFIX}-date-menu__now`);
-    nowMenu.innerText = "\u6B64\u523B";
+    nowMenu.innerText = this.lang.now;
     const submitMenu = document.createElement("button");
     submitMenu.classList.add(`${EDITOR_PREFIX}-date-menu__submit`);
-    submitMenu.innerText = "\u786E\u5B9A";
+    submitMenu.innerText = this.lang.confirm;
     datePickerMenu.append(timeMenu);
     datePickerMenu.append(nowMenu);
     datePickerMenu.append(submitMenu);
@@ -7808,6 +7893,7 @@ class DatePicker {
     return {
       container: datePickerContainer,
       dateWrap,
+      datePickerWeek,
       timeWrap,
       title: {
         preYear: preYearTitle,
@@ -7906,6 +7992,22 @@ class DatePicker {
     }
     this.pickDate = new Date(this.now);
   }
+  _setLang() {
+    this.dom.menu.time.innerText = this.lang.timeSelect;
+    this.dom.menu.now.innerText = this.lang.now;
+    this.dom.menu.submit.innerText = this.lang.confirm;
+    const { weeks: { sun, mon, tue, wed, thu, fri, sat } } = this.lang;
+    const weekList = [sun, mon, tue, wed, thu, fri, sat];
+    this.dom.datePickerWeek.childNodes.forEach((child, i) => {
+      child.innerText = weekList[i];
+    });
+    const hourTitle = this.dom.time.hour.previousElementSibling;
+    hourTitle.innerText = this.lang.hour;
+    const minuteTitle = this.dom.time.minute.previousElementSibling;
+    minuteTitle.innerText = this.lang.minute;
+    const secondTitle = this.dom.time.second.previousElementSibling;
+    secondTitle.innerText = this.lang.second;
+  }
   _update() {
     const localDate = new Date();
     const localYear = localDate.getFullYear();
@@ -7921,7 +8023,7 @@ class DatePicker {
     }
     const year = this.now.getFullYear();
     const month = this.now.getMonth() + 1;
-    this.dom.title.now.innerText = `${year}\u5E74 ${String(month).padStart(2, "0")}\u6708`;
+    this.dom.title.now.innerText = `${year}${this.lang.year} ${String(month).padStart(2, "0")}${this.lang.month}`;
     const curDate = new Date(year, month, 0);
     const curDay = curDate.getDate();
     let curWeek = new Date(year, month - 1, 1).getDay();
@@ -7975,11 +8077,11 @@ class DatePicker {
     if (this.isDatePicker) {
       this.dom.dateWrap.classList.add("active");
       this.dom.timeWrap.classList.remove("active");
-      this.dom.menu.time.innerText = `\u65F6\u95F4\u9009\u62E9`;
+      this.dom.menu.time.innerText = this.lang.timeSelect;
     } else {
       this.dom.dateWrap.classList.remove("active");
       this.dom.timeWrap.classList.add("active");
-      this.dom.menu.time.innerText = `\u8FD4\u56DE\u65E5\u671F`;
+      this.dom.menu.time.innerText = this.lang.return;
       this._setTimePick();
     }
   }
@@ -8087,6 +8189,10 @@ class DatePicker {
   }
   render(option) {
     this.renderOptions = option;
+    if (this.options.getLang) {
+      this.lang = this.options.getLang();
+      this._setLang();
+    }
     this._setValue();
     this._update();
     this._setPosition();
@@ -8105,9 +8211,31 @@ class DateParticle {
     __publicField(this, "datePicker");
     this.draw = draw;
     this.range = draw.getRange();
+    const i18n = draw.getI18n();
+    const t = i18n.t.bind(i18n);
     this.datePicker = new DatePicker({
       mountDom: draw.getContainer(),
-      onSubmit: this._setValue.bind(this)
+      onSubmit: this._setValue.bind(this),
+      getLang: () => ({
+        now: t("datePicker.now"),
+        confirm: t("datePicker.confirm"),
+        return: t("datePicker.return"),
+        timeSelect: t("datePicker.timeSelect"),
+        weeks: {
+          sun: t("datePicker.weeks.sun"),
+          mon: t("datePicker.weeks.mon"),
+          tue: t("datePicker.weeks.tue"),
+          wed: t("datePicker.weeks.wed"),
+          thu: t("datePicker.weeks.thu"),
+          fri: t("datePicker.weeks.fri"),
+          sat: t("datePicker.weeks.sat")
+        },
+        year: t("datePicker.year"),
+        month: t("datePicker.month"),
+        hour: t("datePicker.hour"),
+        minute: t("datePicker.minute"),
+        second: t("datePicker.second")
+      })
     });
   }
   _setValue(date) {
@@ -8340,6 +8468,102 @@ class BlockParticle {
     });
   }
 }
+const contextmenu = {
+  global: {
+    cut: "Cut",
+    copy: "Copy",
+    paste: "Paste",
+    selectAll: "Select all",
+    print: "Print"
+  },
+  control: {
+    "delete": "Delete control"
+  },
+  hyperlink: {
+    "delete": "Delete hyperlink",
+    cancel: "Cancel hyperlink",
+    edit: "Edit hyperlink"
+  },
+  image: {
+    change: "Change image",
+    saveAs: "Save as image",
+    textWrap: "Text wrap",
+    textWrapType: {
+      embed: "Embed",
+      upDown: "Up down"
+    }
+  },
+  table: {
+    insertRowCol: "Insert row col",
+    insertTopRow: "Insert top 1 row",
+    insertBottomRow: "Insert bottom 1 row",
+    insertLeftCol: "Insert left 1 col",
+    insertRightCol: "Insert right 1 col",
+    deleteRowCol: "Delete row col",
+    deleteRow: "Delete 1 row",
+    deleteCol: "Delete 1 col",
+    deleteTable: "Delete table",
+    mergeCell: "Merge cell",
+    mergeCancelCell: "Cancel merge cell"
+  }
+};
+const datePicker = {
+  now: "Now",
+  confirm: "Confirm",
+  "return": "Return",
+  timeSelect: "Time select",
+  weeks: {
+    sun: "Sun",
+    mon: "Mon",
+    tue: "Tue",
+    wed: "Wed",
+    thu: "Thu",
+    fri: "Fri",
+    sat: "Sat"
+  },
+  year: " ",
+  month: " ",
+  hour: "Hour",
+  minute: "Minute",
+  second: "Second"
+};
+var en = {
+  contextmenu,
+  datePicker
+};
+class I18n {
+  constructor() {
+    __publicField(this, "langMap", new Map([
+      ["zhCN", zhCN],
+      ["en", en]
+    ]));
+    __publicField(this, "currentLocale", "zhCN");
+  }
+  registerLangMap(locale, lang) {
+    this.langMap.set(locale, lang);
+  }
+  setLocale(locale) {
+    this.currentLocale = locale;
+  }
+  getLang() {
+    return this.langMap.get(this.currentLocale) || zhCN;
+  }
+  t(path) {
+    const keyList = path.split(".");
+    let value = "";
+    let item = this.getLang();
+    for (let k = 0; k < keyList.length; k++) {
+      const key = keyList[k];
+      const currentValue = Reflect.get(item, key);
+      if (currentValue) {
+        value = item = currentValue;
+      } else {
+        return "";
+      }
+    }
+    return value;
+  }
+}
 class Draw {
   constructor(rootContainer, options, elementList, listener) {
     __publicField(this, "container");
@@ -8352,6 +8576,7 @@ class Draw {
     __publicField(this, "position");
     __publicField(this, "elementList");
     __publicField(this, "listener");
+    __publicField(this, "i18n");
     __publicField(this, "canvasEvent");
     __publicField(this, "globalEvent");
     __publicField(this, "cursor");
@@ -8400,6 +8625,7 @@ class Draw {
     this._formatContainer();
     this.pageContainer = this._createPageContainer();
     this._createPage(0);
+    this.i18n = new I18n();
     this.historyManager = new HistoryManager();
     this.position = new Position(this);
     this.range = new RangeManager(this);
@@ -8631,6 +8857,9 @@ class Draw {
   getWorkerManager() {
     return this.workerManager;
   }
+  getI18n() {
+    return this.i18n;
+  }
   getRowCount() {
     return this.rowList.length;
   }
@@ -8778,7 +9007,7 @@ class Draw {
     return `${el.italic ? "italic " : ""}${el.bold ? "bold " : ""}${size * scale}px ${font}`;
   }
   _computeRowList(innerWidth, elementList) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const { defaultSize, defaultRowMargin, scale, tdPadding, defaultTabWidth } = this.options;
     const defaultBasicRowMarginHeight = this.getDefaultBasicRowMarginHeight();
     const tdGap = tdPadding * 2;
@@ -8977,7 +9206,7 @@ class Draw {
           height,
           elementList: [rowElement],
           ascent,
-          rowFlex: rowElement.rowFlex,
+          rowFlex: (_d = elementList[i + 1]) == null ? void 0 : _d.rowFlex,
           isPageBreak: element.type === ElementType.PAGE_BREAK
         });
       } else {
@@ -9387,6 +9616,7 @@ const _Command = class {
     _Command.setPaperMargin = adapt.setPaperMargin.bind(adapt);
     _Command.insertElementList = adapt.insertElementList.bind(adapt);
     _Command.removeControl = adapt.removeControl.bind(adapt);
+    _Command.setLocale = adapt.setLocale.bind(adapt);
   }
   executeMode(payload) {
     return _Command.mode(payload);
@@ -9595,6 +9825,9 @@ const _Command = class {
   executeRemoveControl() {
     return _Command.removeControl();
   }
+  executeSetLocale(payload) {
+    return _Command.setLocale(payload);
+  }
 };
 let Command = _Command;
 __publicField(Command, "mode");
@@ -9666,6 +9899,7 @@ __publicField(Command, "getPaperMargin");
 __publicField(Command, "setPaperMargin");
 __publicField(Command, "insertElementList");
 __publicField(Command, "removeControl");
+__publicField(Command, "setLocale");
 const defaultWatermarkOption = {
   data: "",
   color: "#AEB5C0",
@@ -9721,6 +9955,7 @@ class CommandAdapt {
     __publicField(this, "control");
     __publicField(this, "workerManager");
     __publicField(this, "searchManager");
+    __publicField(this, "i18n");
     this.draw = draw;
     this.range = draw.getRange();
     this.position = draw.getPosition();
@@ -9731,6 +9966,7 @@ class CommandAdapt {
     this.control = draw.getControl();
     this.workerManager = draw.getWorkerManager();
     this.searchManager = draw.getSearch();
+    this.i18n = draw.getI18n();
   }
   mode(payload) {
     const mode = this.draw.getMode();
@@ -11095,6 +11331,9 @@ class CommandAdapt {
       curIndex: newIndex
     });
   }
+  setLocale(payload) {
+    this.i18n.setLocale(payload);
+  }
 }
 class Listener {
   constructor() {
@@ -11122,9 +11361,11 @@ class Register {
   constructor(payload) {
     __publicField(this, "contextMenuList");
     __publicField(this, "shortcutList");
-    const { contextMenu, shortcut } = payload;
+    __publicField(this, "langMap");
+    const { contextMenu, shortcut, i18n } = payload;
     this.contextMenuList = contextMenu.registerContextMenuList.bind(contextMenu);
     this.shortcutList = shortcut.registerShortcutList.bind(shortcut);
+    this.langMap = i18n.registerLangMap.bind(i18n);
   }
 }
 const NAME_PLACEHOLDER = {
@@ -11132,7 +11373,7 @@ const NAME_PLACEHOLDER = {
 };
 const controlMenus = [
   {
-    name: "\u5220\u9664\u63A7\u4EF6",
+    i18nPath: "contextmenu.control.delete",
     when: (payload) => {
       var _a;
       return !payload.editorHasSelection && ((_a = payload.startElement) == null ? void 0 : _a.type) === ElementType.CONTROL;
@@ -11144,7 +11385,7 @@ const controlMenus = [
 ];
 const globalMenus = [
   {
-    name: "\u526A\u5207",
+    i18nPath: "contextmenu.global.cut",
     shortCut: "Ctrl + X",
     when: (payload) => {
       return !payload.isReadonly;
@@ -11154,7 +11395,7 @@ const globalMenus = [
     }
   },
   {
-    name: "\u590D\u5236",
+    i18nPath: "contextmenu.global.copy",
     shortCut: "Ctrl + C",
     when: (payload) => {
       return payload.editorHasSelection;
@@ -11164,7 +11405,7 @@ const globalMenus = [
     }
   },
   {
-    name: "\u7C98\u8D34",
+    i18nPath: "contextmenu.global.paste",
     shortCut: "Ctrl + V",
     when: (payload) => {
       return !payload.isReadonly && payload.editorTextFocus;
@@ -11174,7 +11415,7 @@ const globalMenus = [
     }
   },
   {
-    name: "\u5168\u9009",
+    i18nPath: "contextmenu.global.selectAll",
     shortCut: "Ctrl + A",
     when: (payload) => {
       return payload.editorTextFocus;
@@ -11187,8 +11428,8 @@ const globalMenus = [
     isDivider: true
   },
   {
+    i18nPath: "contextmenu.global.print",
     icon: "print",
-    name: "\u6253\u5370",
     when: () => true,
     callback: (command) => {
       command.executePrint();
@@ -11197,7 +11438,7 @@ const globalMenus = [
 ];
 const hyperlinkMenus = [
   {
-    name: "\u5220\u9664\u94FE\u63A5",
+    i18nPath: "contextmenu.hyperlink.delete",
     when: (payload) => {
       var _a;
       return ((_a = payload.startElement) == null ? void 0 : _a.type) === ElementType.HYPERLINK;
@@ -11207,7 +11448,7 @@ const hyperlinkMenus = [
     }
   },
   {
-    name: "\u53D6\u6D88\u94FE\u63A5",
+    i18nPath: "contextmenu.hyperlink.cancel",
     when: (payload) => {
       var _a;
       return ((_a = payload.startElement) == null ? void 0 : _a.type) === ElementType.HYPERLINK;
@@ -11217,7 +11458,7 @@ const hyperlinkMenus = [
     }
   },
   {
-    name: "\u7F16\u8F91\u94FE\u63A5",
+    i18nPath: "contextmenu.hyperlink.edit",
     when: (payload) => {
       var _a;
       return ((_a = payload.startElement) == null ? void 0 : _a.type) === ElementType.HYPERLINK;
@@ -11233,7 +11474,7 @@ const hyperlinkMenus = [
 ];
 const imageMenus = [
   {
-    name: "\u66F4\u6539\u56FE\u7247",
+    i18nPath: "contextmenu.image.change",
     icon: "image-change",
     when: (payload) => {
       var _a;
@@ -11256,7 +11497,7 @@ const imageMenus = [
     }
   },
   {
-    name: "\u53E6\u5B58\u4E3A\u56FE\u7247",
+    i18nPath: "contextmenu.image.saveAs",
     icon: "image",
     when: (payload) => {
       var _a;
@@ -11267,21 +11508,21 @@ const imageMenus = [
     }
   },
   {
-    name: "\u6587\u5B57\u73AF\u7ED5",
+    i18nPath: "contextmenu.image.textWrap",
     when: (payload) => {
       var _a;
       return !payload.editorHasSelection && ((_a = payload.startElement) == null ? void 0 : _a.type) === ElementType.IMAGE;
     },
     childMenus: [
       {
-        name: "\u5D4C\u5165\u578B",
+        i18nPath: "contextmenu.image.textWrapType.embed",
         when: () => true,
         callback: (command, context) => {
           command.executeChangeImageDisplay(context.startElement, ImageDisplay.BLOCK);
         }
       },
       {
-        name: "\u4E0A\u4E0B\u578B\u73AF\u7ED5",
+        i18nPath: "contextmenu.image.textWrapType.upDown",
         when: () => true,
         callback: (command, context) => {
           command.executeChangeImageDisplay(context.startElement, ImageDisplay.INLINE);
@@ -11295,14 +11536,14 @@ const tableMenus = [
     isDivider: true
   },
   {
-    name: "\u63D2\u5165\u884C\u5217",
+    i18nPath: "contextmenu.table.insertRowCol",
     icon: "insert-row-col",
     when: (payload) => {
       return !payload.isReadonly && payload.isInTable;
     },
     childMenus: [
       {
-        name: "\u4E0A\u65B9\u63D2\u51651\u884C",
+        i18nPath: "contextmenu.table.insertTopRow",
         icon: "insert-top-row",
         when: () => true,
         callback: (command) => {
@@ -11310,7 +11551,7 @@ const tableMenus = [
         }
       },
       {
-        name: "\u4E0B\u65B9\u63D2\u51651\u884C",
+        i18nPath: "contextmenu.table.insertBottomRow",
         icon: "insert-bottom-row",
         when: () => true,
         callback: (command) => {
@@ -11318,7 +11559,7 @@ const tableMenus = [
         }
       },
       {
-        name: "\u5DE6\u4FA7\u63D2\u51651\u5217",
+        i18nPath: "contextmenu.table.insertLeftCol",
         icon: "insert-left-col",
         when: () => true,
         callback: (command) => {
@@ -11326,7 +11567,7 @@ const tableMenus = [
         }
       },
       {
-        name: "\u53F3\u4FA7\u63D2\u51651\u5217",
+        i18nPath: "contextmenu.table.insertRightCol",
         icon: "insert-right-col",
         when: () => true,
         callback: (command) => {
@@ -11336,14 +11577,14 @@ const tableMenus = [
     ]
   },
   {
-    name: "\u5220\u9664\u884C\u5217",
+    i18nPath: "contextmenu.table.deleteRowCol",
     icon: "delete-row-col",
     when: (payload) => {
       return !payload.isReadonly && payload.isInTable;
     },
     childMenus: [
       {
-        name: "\u5220\u96641\u884C",
+        i18nPath: "contextmenu.table.deleteRow",
         icon: "delete-row",
         when: () => true,
         callback: (command) => {
@@ -11351,7 +11592,7 @@ const tableMenus = [
         }
       },
       {
-        name: "\u5220\u9664\u4E00\u5217",
+        i18nPath: "contextmenu.table.deleteCol",
         icon: "delete-col",
         when: () => true,
         callback: (command) => {
@@ -11359,7 +11600,7 @@ const tableMenus = [
         }
       },
       {
-        name: "\u5220\u9664\u6574\u4E2A\u8868\u683C",
+        i18nPath: "contextmenu.table.deleteTable",
         icon: "delete-table",
         when: () => true,
         callback: (command) => {
@@ -11369,7 +11610,7 @@ const tableMenus = [
     ]
   },
   {
-    name: "\u5408\u5E76\u5355\u5143\u683C",
+    i18nPath: "contextmenu.table.mergeCell",
     icon: "merge-cell",
     when: (payload) => {
       return !payload.isReadonly && payload.isCrossRowCol;
@@ -11379,7 +11620,7 @@ const tableMenus = [
     }
   },
   {
-    name: "\u53D6\u6D88\u5408\u5E76",
+    i18nPath: "contextmenu.table.mergeCancelCell",
     icon: "merge-cancel-cell",
     when: (payload) => {
       return !payload.isReadonly && payload.isInTable;
@@ -11395,6 +11636,7 @@ class ContextMenu {
     __publicField(this, "command");
     __publicField(this, "range");
     __publicField(this, "position");
+    __publicField(this, "i18n");
     __publicField(this, "container");
     __publicField(this, "contextMenuList");
     __publicField(this, "contextMenuContainerList");
@@ -11439,6 +11681,7 @@ class ContextMenu {
     this.command = command;
     this.range = draw.getRange();
     this.position = draw.getPosition();
+    this.i18n = draw.getI18n();
     this.container = draw.getContainer();
     this.context = null;
     this.contextMenuList = [
@@ -11549,7 +11792,7 @@ class ContextMenu {
           icon.classList.add(`${EDITOR_PREFIX}-contextmenu-${menu.icon}`);
         }
         const span = document.createElement("span");
-        const name = this._formatName(menu.name);
+        const name = menu.i18nPath ? this._formatName(this.i18n.t(menu.i18nPath)) : this._formatName(menu.name || "");
         span.append(document.createTextNode(name));
         menuItem.append(span);
         if (menu.shortCut) {
@@ -11820,7 +12063,8 @@ class Editor {
     const shortcut = new Shortcut(draw, this.command);
     this.register = new Register({
       contextMenu,
-      shortcut
+      shortcut,
+      i18n: draw.getI18n()
     });
     this.destroy = () => {
       draw.destroy();