easy-email-extensions 4.6.0 → 4.7.1

package/lib/index2.js

@@ -30803,7 +30803,7 @@ function ImageUploader(props) {
   const onChange = props.onChange;
   const onUpload = useCallback(() => {
     if (isUploading) {
-      return Message$1.warning("Uploading...");
+      return Message$1.warning(t("Uploading..."));
     }
     if (!uploadHandlerRef.current)
       return;
@@ -30842,7 +30842,7 @@ function ImageUploader(props) {
           props.onChange(picture);
           setIsUploading(false);
         } catch (error2) {
-          Message$1.error((error2 == null ? void 0 : error2.message) || error2 || "Upload failed");
+          Message$1.error((error2 == null ? void 0 : error2.message) || error2 || t("Upload failed"));
           setIsUploading(false);
         }
       }
@@ -30876,10 +30876,10 @@ function ImageUploader(props) {
     }), /* @__PURE__ */ React__default.createElement("div", {
       className: styles$8["btn-wrap"]
     }, /* @__PURE__ */ React__default.createElement("a", {
-      title: "Preview",
+      title: t("Preview"),
       onClick: () => setPreview(true)
     }, /* @__PURE__ */ React__default.createElement(IconEye$1, null)), /* @__PURE__ */ React__default.createElement("a", {
-      title: "Remove",
+      title: t("Remove"),
       onClick: () => onRemove()
     }, /* @__PURE__ */ React__default.createElement(IconDelete$1, null)))));
   }, [isUploading, onRemove, onUpload, props.value]);
@@ -30936,7 +30936,7 @@ function ImageUploader(props) {
     footer: null,
     onCancel: () => setPreview(false)
   }, /* @__PURE__ */ React__default.createElement("img", {
-    alt: "Preview",
+    alt: t("Preview"),
     style: { width: "100%" },
     src: props.value
   })));
@@ -31264,7 +31264,7 @@ function EditTab(props) {
     onChange: setActiveTab
   }, (Array.isArray(value) ? value : []).map((item2, index2) => /* @__PURE__ */ React__default.createElement(TabPane$1, {
     style: { paddingLeft: 12 },
-    title: `${props.label || "Tab"} ${index2 + 1}`,
+    title: `${props.label || t("Tab")} ${index2 + 1}`,
     key: index2
   }, props.renderItem(item2, index2))));
 }
@@ -31284,7 +31284,7 @@ function EditGridTab(props) {
     style: { width: "100%" },
     key: index2
   }, /* @__PURE__ */ React__default.createElement(Card$1, {
-    title: /* @__PURE__ */ React__default.createElement(Space$1, null, /* @__PURE__ */ React__default.createElement(Typography$1.Text, null, "Item ", index2 + 1)),
+    title: /* @__PURE__ */ React__default.createElement(Space$1, null, /* @__PURE__ */ React__default.createElement(Typography$1.Text, null, t("Item"), " ", index2 + 1)),
     extra: /* @__PURE__ */ React__default.createElement(Space$1, {
       size: "large"
     }, /* @__PURE__ */ React__default.createElement(IconPlus$1, {
@@ -33101,7 +33101,7 @@ function ColorPickerContent(props) {
       paddingLeft: 10,
       position: "relative"
     }
-  }, /* @__PURE__ */ React__default.createElement("span", null, "Picker..."), /* @__PURE__ */ React__default.createElement("input", {
+  }, /* @__PURE__ */ React__default.createElement("span", null, t("Picker...")), /* @__PURE__ */ React__default.createElement("input", {
     style: {
       position: "absolute",
       width: "100%",
@@ -33296,10 +33296,10 @@ function Link$1(props) {
       }, /* @__PURE__ */ React__default.createElement(SearchField, {
         size: "small",
         name: "link",
-        label: "Link",
+        label: t("Link"),
         labelHidden: true,
-        searchButton: "Apply",
-        placeholder: "https://www.example.com",
+        searchButton: t("Apply"),
+        placeholder: t("https://www.example.com"),
         onSearch: () => handleSubmit()
       })), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
         span: 12
@@ -33308,13 +33308,13 @@ function Link$1(props) {
         size: "mini"
       }, /* @__PURE__ */ React__default.createElement(TextStyle, {
         size: "smallest"
-      }, "Target"), /* @__PURE__ */ React__default.createElement(SwitchField, {
+      }, t("Target")), /* @__PURE__ */ React__default.createElement(SwitchField, {
         size: "small",
-        label: "Target",
+        label: t("Target"),
         labelHidden: true,
         name: "blank",
-        checkedText: "blank",
-        uncheckedText: "self",
+        checkedText: t("blank"),
+        uncheckedText: t("self"),
         inline: true
       }))), /* @__PURE__ */ React__default.createElement(Grid.Col, {
         span: 12
@@ -33323,18 +33323,18 @@ function Link$1(props) {
         size: "mini"
       }, /* @__PURE__ */ React__default.createElement(TextStyle, {
         size: "smallest"
-      }, "Underline"), /* @__PURE__ */ React__default.createElement(SwitchField, {
+      }, t("Underline")), /* @__PURE__ */ React__default.createElement(SwitchField, {
         size: "small",
-        label: "Underline",
+        label: t("Underline"),
         labelHidden: true,
         name: "underline",
-        checkedText: "off",
-        uncheckedText: "on",
+        checkedText: t("off"),
+        uncheckedText: t("on"),
         inline: true
       })))))
     }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
       isActive: Boolean(initialValues.link),
-      title: "Link",
+      title: t("Link"),
       icon: /* @__PURE__ */ React__default.createElement(IconFont, {
         iconName: "icon-link"
       })
@@ -33577,12 +33577,12 @@ function AddFont() {
           fill: true
         }, /* @__PURE__ */ React__default.createElement(TextField, {
           name: `${focusIdx2}.data.value.fonts.${index2}.name`,
-          label: "Name"
+          label: t("Name")
         })), /* @__PURE__ */ React__default.createElement(Stack$4.Item, {
           fill: true
         }, /* @__PURE__ */ React__default.createElement(TextField, {
           name: `${focusIdx2}.data.value.fonts.${index2}.href`,
-          label: "Href"
+          label: t("Href")
         })), /* @__PURE__ */ React__default.createElement(Stack$4, {
           vertical: true,
           spacing: "loose"
@@ -33666,7 +33666,7 @@ function FontFamily({ name: name2 }) {
     });
   }, [focusIdx2, fontList2, name2]);
 }
-function Page() {
+function Page({ hideSubTitle, hideSubject }) {
   const { focusIdx: focusIdx2 } = useFocusIdx();
   if (!focusIdx2)
     return null;
@@ -33681,11 +33681,11 @@ function Page() {
     header: t("Email Setting")
   }, /* @__PURE__ */ React__default.createElement(Space$1, {
     direction: "vertical"
-  }, /* @__PURE__ */ React__default.createElement(TextField, {
+  }, !hideSubject && /* @__PURE__ */ React__default.createElement(TextField, {
     label: t("Subject"),
     name: "subject",
     inline: true
-  }), /* @__PURE__ */ React__default.createElement(TextField, {
+  }), !hideSubTitle && /* @__PURE__ */ React__default.createElement(TextField, {
     label: t("SubTitle"),
     name: "subTitle",
     inline: true
@@ -33719,7 +33719,7 @@ function Page() {
   }))), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 11
   }, /* @__PURE__ */ React__default.createElement(InputWithUnitField, {
-    label: "Line height",
+    label: t("Line height"),
     unitOptions: "percent",
     name: `${focusIdx2}.data.value.line-height`
   })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
@@ -33820,31 +33820,31 @@ function Padding(props = {}) {
       })
     }))), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
       span: 11
-    }, /* @__PURE__ */ React__default.createElement(NumberField, {
-      label: "Top (px)",
+    }, /* @__PURE__ */ React__default.createElement(InputWithUnitField, {
+      label: t("Top (px)"),
       name: "top",
       autoComplete: "off",
       config: pixelAdapter
     })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
       offset: 1,
       span: 11
-    }, /* @__PURE__ */ React__default.createElement(NumberField, {
-      label: "Left (px)",
+    }, /* @__PURE__ */ React__default.createElement(InputWithUnitField, {
+      label: t("Left (px)"),
       name: "left",
       autoComplete: "off",
       config: pixelAdapter
     }))), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
       span: 11
-    }, /* @__PURE__ */ React__default.createElement(NumberField, {
-      label: "Bottom (px)",
+    }, /* @__PURE__ */ React__default.createElement(InputWithUnitField, {
+      label: t("Bottom (px)"),
       name: "bottom",
       config: pixelAdapter,
       autoComplete: "off"
     })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
       offset: 1,
       span: 11
-    }, /* @__PURE__ */ React__default.createElement(NumberField, {
-      label: "Right (px)",
+    }, /* @__PURE__ */ React__default.createElement(InputWithUnitField, {
+      label: t("Right (px)"),
       name: "right",
       autoComplete: "off",
       config: pixelAdapter
@@ -33863,7 +33863,7 @@ const PaddingChangeWrapper = (props) => {
   }, [top, right, bottom, left, onChange]);
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
 };
-function BackgroundColor({ title: title2 = "Background color" }) {
+function BackgroundColor({ title: title2 = t("Background color") }) {
   const { focusIdx: focusIdx2 } = useFocusIdx();
   return useMemo(() => {
     return /* @__PURE__ */ React__default.createElement(ColorPickerField, {
@@ -33875,19 +33875,27 @@ function BackgroundColor({ title: title2 = "Background color" }) {
 const backgroundRepeatOptions = [
   {
     value: "no-repeat",
-    label: "No repeat"
+    get label() {
+      return t("No repeat");
+    }
   },
   {
     value: "repeat",
-    label: "Repeat"
+    get label() {
+      return t("Repeat");
+    }
   },
   {
     value: "repeat-x",
-    label: "Repeat X"
+    get label() {
+      return t("Repeat X");
+    }
   },
   {
     value: "repeat-y",
-    label: "Repeat Y"
+    get label() {
+      return t("Repeat Y");
+    }
   }
 ];
 function Background() {
@@ -33898,9 +33906,9 @@ function Background() {
       key: focusIdx2,
       direction: "vertical"
     }, /* @__PURE__ */ React__default.createElement(ImageUploaderField, {
-      label: "Background image",
+      label: t("Background image"),
       name: `${focusIdx2}.attributes.background-url`,
-      helpText: "The image suffix should be .jpg, jpeg, png, gif, etc. Otherwise, the picture may not be displayed normally.",
+      helpText: t("The image suffix should be .jpg, jpeg, png, gif, etc. Otherwise, the picture may not be displayed normally."),
       uploadHandler: onUploadImage
     }), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
       span: 11
@@ -33908,11 +33916,11 @@ function Background() {
       offset: 1,
       span: 11
     }, /* @__PURE__ */ React__default.createElement(SelectField, {
-      label: "Background repeat",
+      label: t("Background repeat"),
       name: `${focusIdx2}.attributes.background-repeat`,
       options: backgroundRepeatOptions
     }))), /* @__PURE__ */ React__default.createElement(TextField, {
-      label: "Background size",
+      label: t("Background size"),
       name: `${focusIdx2}.attributes.background-size`
     }));
   }, [focusIdx2, onUploadImage]);
@@ -33923,13 +33931,13 @@ function Border() {
     return /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
       span: 11
     }, /* @__PURE__ */ React__default.createElement(TextField, {
-      label: "Border",
+      label: t("Border"),
       name: `${focusIdx2}.attributes.border`
     })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
       offset: 1,
       span: 11
     }, /* @__PURE__ */ React__default.createElement(InputWithUnitField, {
-      label: "Border radius",
+      label: t("Border radius"),
       name: `${focusIdx2}.attributes.border-radius`,
       unitOptions: "percent"
     })));
@@ -33939,7 +33947,7 @@ function ClassName() {
   const { focusIdx: focusIdx2 } = useFocusIdx();
   return useMemo(() => {
     return /* @__PURE__ */ React__default.createElement(TextField, {
-      label: "Class name",
+      label: t("Class name"),
       name: `${focusIdx2}.attributes.css-class`
     });
   }, [focusIdx2]);
@@ -33971,7 +33979,7 @@ function Iteration() {
     className: "iteration",
     destroyOnHide: true,
     name: "Iteration",
-    header: "Iteration",
+    header: t("Iteration"),
     extra: /* @__PURE__ */ React__default.createElement("div", {
       style: { marginRight: 10 }
     }, /* @__PURE__ */ React__default.createElement(Switch$1, {
@@ -33983,18 +33991,18 @@ function Iteration() {
   }, /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 11
   }, /* @__PURE__ */ React__default.createElement(TextField, {
-    label: "Data source",
+    label: t("Data source"),
     name: `${focusIdx2}.data.value.iteration.dataSource`
   })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
     offset: 1,
     span: 11
   }, /* @__PURE__ */ React__default.createElement(TextField, {
-    label: "Item name",
+    label: t("Item name"),
     name: `${focusIdx2}.data.value.iteration.itemName`
   }))), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 11
   }, /* @__PURE__ */ React__default.createElement(TextField, {
-    label: "Limit",
+    label: t("Limit"),
     name: `${focusIdx2}.data.value.iteration.limit`,
     quickchange: true,
     type: "number",
@@ -34003,7 +34011,7 @@ function Iteration() {
     offset: 1,
     span: 11
   }, /* @__PURE__ */ React__default.createElement(TextField, {
-    label: "Mock quantity",
+    label: t("Mock quantity"),
     max: iteration == null ? void 0 : iteration.limit,
     name: `${focusIdx2}.data.value.iteration.mockQuantity`,
     type: "number",
@@ -34072,7 +34080,7 @@ function Condition() {
     subGroups.splice(ggIndex, 1);
     if (subGroups.length === 0) {
       if (groups.length === 1) {
-        Message$1.warning("At least one condition");
+        Message$1.warning(t("At least one condition"));
         return;
       }
       groups.splice(gIndex, 1);
@@ -34092,7 +34100,7 @@ function Condition() {
     className: "condition",
     destroyOnHide: true,
     name: "Condition",
-    header: "Condition",
+    header: t("Condition"),
     extra: /* @__PURE__ */ React__default.createElement("div", {
       style: { marginRight: 10 }
     }, /* @__PURE__ */ React__default.createElement(Switch$1, {
@@ -34110,14 +34118,14 @@ function Condition() {
     }, condition.groups.length > 1 && /* @__PURE__ */ React__default.createElement(SelectField, {
       inline: true,
       name: `${focusIdx2}.data.value.condition.symbol`,
-      label: "Symbol",
+      label: t("Symbol"),
       options: [
         {
-          label: "And",
+          label: t("And"),
           value: OperatorSymbol.AND
         },
         {
-          label: "Or",
+          label: t("Or"),
           value: OperatorSymbol.OR
         }
       ]
@@ -34137,14 +34145,14 @@ function Condition() {
       }, group.groups.length > 1 && /* @__PURE__ */ React__default.createElement(SelectField, {
         inline: true,
         name: `${focusIdx2}.data.value.condition.symbol`,
-        label: "Symbol",
+        label: t("Symbol"),
         options: [
           {
-            label: "And",
+            label: t("And"),
             value: OperatorSymbol.AND
           },
           {
-            label: "Or",
+            label: t("Or"),
             value: OperatorSymbol.OR
           }
         ]
@@ -34172,12 +34180,12 @@ function ConditionItem({ path, onDelete, gIndex, ggIndex }) {
   }, /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 7
   }, " ", /* @__PURE__ */ React__default.createElement(TextField, {
-    label: "Variable path",
+    label: t("Variable path"),
     name: `${name2}.left`
   })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 7
   }, " ", /* @__PURE__ */ React__default.createElement(SelectField, {
-    label: "Operator",
+    label: t("Operator"),
     name: `${name2}.operator`,
     options: options$b
   })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
@@ -34267,7 +34275,7 @@ function Section() {
     defaultActiveKey: ["0", "1", "2"]
   }, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "0",
-    header: "Dimension"
+    header: t("Dimension")
   }, /* @__PURE__ */ React__default.createElement(Space$1, {
     direction: "vertical"
   }, /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
@@ -34276,25 +34284,25 @@ function Section() {
     style: { width: "100%", display: "flex" }
   }, /* @__PURE__ */ React__default.createElement("div", {
     style: { flex: 1 }
-  }, "Group")), /* @__PURE__ */ React__default.createElement(Switch$1, {
+  }, t("Group"))), /* @__PURE__ */ React__default.createElement(Switch$1, {
     checked: noWrap,
-    checkedText: "True",
-    uncheckedText: "False",
+    checkedText: t("True"),
+    uncheckedText: t("False"),
     onChange
   })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 12
   })), /* @__PURE__ */ React__default.createElement(Padding, null))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "1",
-    header: "Background"
+    header: t("Background")
   }, /* @__PURE__ */ React__default.createElement(Stack$4, {
     vertical: true,
     spacing: "tight"
   }, /* @__PURE__ */ React__default.createElement(Background, null))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "2",
-    header: "Border"
+    header: t("Border")
   }, /* @__PURE__ */ React__default.createElement(Border, null)), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "4",
-    header: "Extra"
+    header: t("Extra")
   }, /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 24
   }, /* @__PURE__ */ React__default.createElement(ClassName, null)))));
@@ -34310,13 +34318,13 @@ function Width({
   const parentType = (_a = getParentByIdx(values2, focusIdx2)) == null ? void 0 : _a.type;
   const validate3 = useCallback((val) => {
     if ((focusBlock2 == null ? void 0 : focusBlock2.type) === BasicType.COLUMN && parentType === BasicType.GROUP) {
-      return /(\d)*%/.test(val) ? void 0 : "Column inside a group must have a width in percentage, not in pixel";
+      return /(\d)*%/.test(val) ? void 0 : t("Column inside a group must have a width in percentage, not in pixel");
     }
     return void 0;
   }, [focusBlock2 == null ? void 0 : focusBlock2.type, parentType]);
   return /* @__PURE__ */ React__default.createElement(InputWithUnitField, {
     validate: validate3,
-    label: "Width",
+    label: t("Width"),
     inline,
     name: `${focusIdx2}.attributes.width`,
     unitOptions,
@@ -34326,15 +34334,21 @@ function Width({
 const options$a = [
   {
     value: "top",
-    label: "top"
+    get label() {
+      return t("top");
+    }
   },
   {
     value: "middle",
-    label: "middle"
+    get label() {
+      return t("middle");
+    }
   },
   {
     value: "bottom",
-    label: "bottom"
+    get label() {
+      return t("bottom");
+    }
   }
 ];
 function VerticalAlign({
@@ -34344,146 +34358,45 @@ function VerticalAlign({
   return useMemo(() => {
     return /* @__PURE__ */ React__default.createElement(Stack$4, null, /* @__PURE__ */ React__default.createElement(SelectField, {
       style: { width: 120 },
-      label: "Vertical align",
+      label: t("Vertical align"),
       name: `${focusIdx2}.attributes.${attributeName}`,
       options: options$a
     }));
   }, [attributeName, focusIdx2]);
 }
-function Column() {
-  return /* @__PURE__ */ React__default.createElement(AttributesPanelWrapper, null, /* @__PURE__ */ React__default.createElement(CollapseWrapper, {
-    defaultActiveKey: ["0", "1", "2"]
-  }, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
-    name: "0",
-    header: "Dimension"
-  }, /* @__PURE__ */ React__default.createElement(Space$1, {
-    direction: "vertical"
-  }, /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
-    span: 11
-  }, /* @__PURE__ */ React__default.createElement(Width, null)), /* @__PURE__ */ React__default.createElement(Grid.Col, {
-    offset: 1,
-    span: 11
-  }, /* @__PURE__ */ React__default.createElement(VerticalAlign, null))), /* @__PURE__ */ React__default.createElement(Padding, null))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
-    name: "1",
-    header: "Background"
-  }, /* @__PURE__ */ React__default.createElement(Background, null)), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
-    name: "2",
-    header: "Border"
-  }, /* @__PURE__ */ React__default.createElement(Border, null)), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
-    name: "4",
-    header: "Extra"
-  }, /* @__PURE__ */ React__default.createElement(Grid.Col, {
-    span: 24
-  }, /* @__PURE__ */ React__default.createElement(ClassName, null)))));
-}
 const options$9 = [
   {
-    value: "",
-    label: "None"
-  },
-  {
-    value: "underline",
-    label: "Underline"
-  },
-  {
-    value: "overline",
-    label: "Overline"
-  },
-  {
-    value: "line-through",
-    label: "Line through"
-  },
-  {
-    value: "blink",
-    label: "Blink"
-  },
-  {
-    value: "inherit",
-    label: "Inherit"
-  }
-];
-function TextDecoration({ name: name2 }) {
-  const { focusIdx: focusIdx2 } = useFocusIdx();
-  return useMemo(() => {
-    return /* @__PURE__ */ React__default.createElement(SelectField, {
-      label: "Text decoration",
-      name: name2 || `${focusIdx2}.attributes.text-decoration`,
-      options: options$9
-    });
-  }, [focusIdx2, name2]);
-}
-const options$8 = [
-  {
-    value: "normal",
-    label: "Normal"
-  },
-  {
-    value: "bold",
-    label: "Bold"
-  },
-  {
-    value: "100",
-    label: "100"
-  },
-  {
-    value: "200",
-    label: "200"
-  },
-  {
-    value: "300",
-    label: "300"
-  },
-  {
-    value: "400",
-    label: "400"
-  },
-  {
-    value: "500",
-    label: "500"
-  },
-  {
-    value: "600",
-    label: "600"
-  },
-  {
-    value: "700",
-    label: "700"
+    value: "left",
+    get label() {
+      return t("left");
+    }
   },
   {
-    value: "800",
-    label: "800"
+    value: "center",
+    get label() {
+      return t("center");
+    }
   },
   {
-    value: "900",
-    label: "900"
+    value: "right",
+    get label() {
+      return t("right");
+    }
   }
 ];
-function FontWeight({ name: name2 }) {
+function Align({ inline }) {
   const { focusIdx: focusIdx2 } = useFocusIdx();
-  return useMemo(() => {
-    return /* @__PURE__ */ React__default.createElement(SelectField, {
-      label: "Font weight",
-      name: name2 || `${focusIdx2}.attributes.font-weight`,
-      options: options$8
-    });
-  }, [focusIdx2, name2]);
+  return /* @__PURE__ */ React__default.createElement(RadioGroupField, {
+    label: t("Align"),
+    name: `${focusIdx2}.attributes.align`,
+    options: options$9
+  });
 }
-const options$7 = [
-  {
-    value: "normal",
-    label: "Normal"
-  },
-  {
-    value: "italic",
-    label: "Italic"
-  }
-];
-function FontStyle({ name: name2 }) {
+function Color({ title: title2 = t("Color") }) {
   const { focusIdx: focusIdx2 } = useFocusIdx();
-  return /* @__PURE__ */ React__default.createElement(RadioGroupField, {
-    label: "Font style",
-    name: name2 || `${focusIdx2}.attributes.font-style`,
-    options: options$7
+  return /* @__PURE__ */ React__default.createElement(ColorPickerField, {
+    label: title2,
+    name: `${focusIdx2}.attributes.color`
   });
 }
 function Height({
@@ -34497,7 +34410,7 @@ function Height({
     }, /* @__PURE__ */ React__default.createElement(Stack$4.Item, {
       fill: true
     }, /* @__PURE__ */ React__default.createElement(TextField, {
-      label: "Height",
+      label: t("Height"),
       name: `${focusIdx2}.attributes.height`,
       quickchange: true,
       inline,
@@ -34505,8 +34418,38 @@ function Height({
     })));
   }, [focusIdx2, inline]);
 }
+const options$8 = [
+  {
+    value: "left",
+    get label() {
+      return t("Left");
+    }
+  },
+  {
+    value: "center",
+    get label() {
+      return t("Center");
+    }
+  },
+  {
+    value: "right",
+    get label() {
+      return t("Right");
+    }
+  }
+];
+function TextAlign({ name: name2 }) {
+  const { focusIdx: focusIdx2 } = useFocusIdx();
+  return useMemo(() => {
+    return /* @__PURE__ */ React__default.createElement(Stack$4, null, /* @__PURE__ */ React__default.createElement(RadioGroupField, {
+      label: t("Text align"),
+      name: name2 || `${focusIdx2}.attributes.text-align`,
+      options: options$8
+    }));
+  }, [focusIdx2, name2]);
+}
 function ContainerBackgroundColor({
-  title: title2 = "Container background color"
+  title: title2 = t("Container background color")
 }) {
   const { focusIdx: focusIdx2 } = useFocusIdx();
   return useMemo(() => {
@@ -34516,228 +34459,157 @@ function ContainerBackgroundColor({
     });
   }, [focusIdx2, title2]);
 }
-function FontSize$1() {
-  const { focusIdx: focusIdx2 } = useFocusIdx();
-  return /* @__PURE__ */ React__default.createElement(NumberField, {
-    label: "Font size (px)",
-    name: `${focusIdx2}.attributes.font-size`,
-    config: pixelAdapter,
-    autoComplete: "off"
-  });
-}
-function Color({ title: title2 = "Color" }) {
+function LetterSpacing({ name: name2 }) {
   const { focusIdx: focusIdx2 } = useFocusIdx();
-  return /* @__PURE__ */ React__default.createElement(ColorPickerField, {
-    label: title2,
-    name: `${focusIdx2}.attributes.color`
+  return /* @__PURE__ */ React__default.createElement(InputWithUnitField, {
+    label: t("Letter spacing"),
+    name: name2 || `${focusIdx2}.attributes.letter-spacing`
   });
 }
-const options$6 = [
+const options$7 = [
   {
-    value: "left",
+    value: "",
     get label() {
-      return t("left");
+      return t("None");
     }
   },
   {
-    value: "center",
+    value: "underline",
     get label() {
-      return t("center");
+      return t("Underline");
     }
   },
   {
-    value: "right",
+    value: "overline",
     get label() {
-      return t("right");
+      return t("Overline");
+    }
+  },
+  {
+    value: "line-through",
+    get label() {
+      return t("Line through");
+    }
+  },
+  {
+    value: "blink",
+    get label() {
+      return t("Blink");
+    }
+  },
+  {
+    value: "inherit",
+    get label() {
+      return t("Inherit");
     }
   }
 ];
-function Align({ inline }) {
+function TextDecoration({ name: name2 }) {
   const { focusIdx: focusIdx2 } = useFocusIdx();
-  return /* @__PURE__ */ React__default.createElement(RadioGroupField, {
-    label: t("Align"),
-    name: `${focusIdx2}.attributes.align`,
-    options: options$6
-  });
+  return useMemo(() => {
+    return /* @__PURE__ */ React__default.createElement(SelectField, {
+      label: t("Text decoration"),
+      name: name2 || `${focusIdx2}.attributes.text-decoration`,
+      options: options$7
+    });
+  }, [focusIdx2, name2]);
+}
+function Decoration() {
+  const { focusIdx: focusIdx2 } = useFocusIdx();
+  return useMemo(() => {
+    return /* @__PURE__ */ React__default.createElement(Stack$4, {
+      key: focusIdx2,
+      vertical: true,
+      spacing: "extraTight"
+    }, /* @__PURE__ */ React__default.createElement(TextStyle, {
+      variation: "strong",
+      size: "large"
+    }, "Decoration"), /* @__PURE__ */ React__default.createElement(TextField, {
+      label: t("Border radius"),
+      name: `${focusIdx2}.attributes.borderRadius`,
+      inline: true
+    }), /* @__PURE__ */ React__default.createElement(TextField, {
+      label: t("Border"),
+      name: `${focusIdx2}.attributes.border`,
+      inline: true
+    }), /* @__PURE__ */ React__default.createElement(NumberField, {
+      label: t("Opacity"),
+      max: 1,
+      min: 0,
+      step: 0.1,
+      name: `${focusIdx2}.attributes.opacity`,
+      inline: true
+    }));
+  }, [focusIdx2]);
 }
 function LineHeight({ name: name2 }) {
   const { focusIdx: focusIdx2 } = useFocusIdx();
   return /* @__PURE__ */ React__default.createElement(InputWithUnitField, {
-    label: "Line height",
+    label: t("Line height"),
     unitOptions: "percent",
     name: name2 || `${focusIdx2}.attributes.line-height`
   });
 }
-function LetterSpacing({ name: name2 }) {
-  const { focusIdx: focusIdx2 } = useFocusIdx();
-  return /* @__PURE__ */ React__default.createElement(InputWithUnitField, {
-    label: "Letter spacing",
-    name: name2 || `${focusIdx2}.attributes.letter-spacing`
-  });
-}
-const ShadowDom = (props) => {
-  const [root2, setRoot] = useState(null);
-  const [ref, setRef] = useState(null);
-  useEffect(() => {
-    if (ref) {
-      const root22 = ref.attachShadow({ mode: "open" });
-      setRoot(root22);
+const options$6 = [
+  {
+    value: "initial",
+    get label() {
+      return t("None");
     }
-  }, [ref]);
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", __spreadProps(__spreadValues({}, props), {
-    ref: setRef
-  }), root2 && ReactDOM.createPortal(props.children, root2)));
-};
-const CodeMirrorEditorPromise = import("./index3.js");
-const CodeMirrorEditor = React__default.lazy(() => CodeMirrorEditorPromise);
-const HtmlEditor = (props) => {
-  const { visible, setVisible } = props;
-  const { focusBlock: focusBlock2, setValueByIdx: setValueByIdx2 } = useBlock();
-  const { pageData: pageData2 } = useEditorContext();
+  },
+  {
+    value: "uppercase",
+    get label() {
+      return t("uppercase");
+    }
+  },
+  {
+    value: "lowercase",
+    get label() {
+      return t("lowercase");
+    }
+  },
+  {
+    value: "capitalize",
+    get label() {
+      return t("capitalize");
+    }
+  }
+];
+function TextTransform({ name: name2 }) {
   const { focusIdx: focusIdx2 } = useFocusIdx();
-  const [content, setContent] = useState(focusBlock2 == null ? void 0 : focusBlock2.data.value.content);
-  const isTable = (focusBlock2 == null ? void 0 : focusBlock2.type) === BasicType.TABLE;
-  useEffect(() => {
-    setContent(focusBlock2 == null ? void 0 : focusBlock2.data.value.content);
-  }, [focusBlock2 == null ? void 0 : focusBlock2.data.value.content]);
-  const onClose = () => {
-    setVisible(false);
-  };
-  const onSave = () => {
-    if (!focusBlock2)
-      return;
-    focusBlock2.data.value.content = content;
-    setValueByIdx2(focusIdx2, __spreadValues({}, focusBlock2));
-    onClose();
-  };
-  const styles2 = useMemo(() => {
-    if (!focusBlock2)
-      return {};
-    const attributes = focusBlock2.attributes;
-    return {
-      color: attributes.color || pageData2.data.value["text-color"],
-      fontSize: attributes["font-size"] || pageData2.data.value["font-size"],
-      fontFamily: attributes["font-family"] || pageData2.data.value["font-family"],
-      fontWeight: attributes["font-weight"] || pageData2.data.value["font-weight"],
-      backgroundColor: attributes["container-background-color"],
-      padding: attributes.padding
-    };
-  }, [focusBlock2, pageData2.data.value]);
-  return /* @__PURE__ */ React__default.createElement(Drawer$1, {
-    placement: "left",
-    headerStyle: { display: "block", lineHeight: "48px" },
-    title: /* @__PURE__ */ React__default.createElement(Stack$4, {
-      distribution: "equalSpacing"
-    }, /* @__PURE__ */ React__default.createElement(TextStyle, {
-      variation: "strong",
-      size: "large"
-    }, "Html"), /* @__PURE__ */ React__default.createElement(Stack$4, null, /* @__PURE__ */ React__default.createElement(Button$4, {
-      type: "primary",
-      onClick: onSave
-    }, "Save"))),
-    closable: false,
-    escToExit: false,
-    width: "100vw",
-    visible,
-    footer: null,
-    bodyStyle: { padding: 0, overflow: "hidden" }
-  }, /* @__PURE__ */ React__default.createElement("div", {
-    style: { display: "flex", height: "100%" }
-  }, /* @__PURE__ */ React__default.createElement("div", {
-    style: { flex: 1, height: "100%" }
-  }, /* @__PURE__ */ React__default.createElement(Suspense, {
-    fallback: /* @__PURE__ */ React__default.createElement("div", {
-      style: {
-        height: "100%",
-        width: "100%",
-        display: "flex",
-        alignItems: "center",
-        backgroundColor: "#263238",
-        justifyContent: "center",
-        fontSize: 24,
-        color: "#fff"
-      }
-    }, "Editor Loading...")
-  }, /* @__PURE__ */ React__default.createElement(CodeMirrorEditor, {
-    value: content,
-    onChange: setContent
-  }))), /* @__PURE__ */ React__default.createElement("div", {
-    style: { flex: 1, height: "100%", overflow: "auto", marginRight: 10 }
-  }, /* @__PURE__ */ React__default.createElement(ShadowDom, {
-    style: __spreadProps(__spreadValues({}, styles2), {
-      width: pageData2.attributes.width || "600px",
-      margin: "auto"
-    })
-  }, isTable ? /* @__PURE__ */ React__default.createElement("table", null, /* @__PURE__ */ React__default.createElement("tbody", {
-    dangerouslySetInnerHTML: { __html: content }
-  })) : /* @__PURE__ */ React__default.createElement("div", {
-    dangerouslySetInnerHTML: { __html: content }
-  })))));
-};
-function Text() {
-  const [visible, setVisible] = useState(false);
-  return /* @__PURE__ */ React__default.createElement(AttributesPanelWrapper, {
-    extra: /* @__PURE__ */ React__default.createElement(Tooltip$1, {
-      content: "Html mode"
-    }, /* @__PURE__ */ React__default.createElement(Button$4, {
-      onClick: () => setVisible(true),
-      icon: /* @__PURE__ */ React__default.createElement(IconFont, {
-        iconName: "icon-html"
-      })
-    }))
-  }, /* @__PURE__ */ React__default.createElement(CollapseWrapper, {
-    defaultActiveKey: ["0", "1", "2"]
-  }, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
-    name: "0",
-    header: "Dimension"
-  }, /* @__PURE__ */ React__default.createElement(Space$1, {
-    direction: "vertical"
-  }, /* @__PURE__ */ React__default.createElement(Height, null), /* @__PURE__ */ React__default.createElement(Padding, {
-    showResetAll: true
-  }))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
-    name: "1",
-    header: "Color"
-  }, /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
-    span: 11
-  }, /* @__PURE__ */ React__default.createElement(Color, null)), /* @__PURE__ */ React__default.createElement(Grid.Col, {
-    offset: 1,
-    span: 11
-  }, /* @__PURE__ */ React__default.createElement(ContainerBackgroundColor, {
-    title: "Background color"
-  })))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
-    name: "2",
-    header: "Typography"
-  }, /* @__PURE__ */ React__default.createElement(Space$1, {
-    direction: "vertical"
-  }, /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
-    span: 11
-  }, /* @__PURE__ */ React__default.createElement(FontFamily, null)), /* @__PURE__ */ React__default.createElement(Grid.Col, {
-    offset: 1,
-    span: 11
-  }, /* @__PURE__ */ React__default.createElement(FontSize$1, null))), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
-    span: 11
-  }, /* @__PURE__ */ React__default.createElement(LineHeight, null)), /* @__PURE__ */ React__default.createElement(Grid.Col, {
-    offset: 1,
-    span: 11
-  }, /* @__PURE__ */ React__default.createElement(LetterSpacing, null))), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
-    span: 11
-  }, /* @__PURE__ */ React__default.createElement(TextDecoration, null)), /* @__PURE__ */ React__default.createElement(Grid.Col, {
-    offset: 1,
-    span: 11
-  }, /* @__PURE__ */ React__default.createElement(FontWeight, null))), /* @__PURE__ */ React__default.createElement(Align, null), /* @__PURE__ */ React__default.createElement(FontStyle, null), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
-    span: 11
-  }), /* @__PURE__ */ React__default.createElement(Grid.Col, {
-    offset: 1,
-    span: 11
-  })))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
-    name: "4",
-    header: "Extra"
-  }, /* @__PURE__ */ React__default.createElement(Grid.Col, {
-    span: 24
-  }, /* @__PURE__ */ React__default.createElement(ClassName, null)))), /* @__PURE__ */ React__default.createElement(HtmlEditor, {
-    visible,
-    setVisible
-  }));
+  return useMemo(() => {
+    return /* @__PURE__ */ React__default.createElement(SelectField, {
+      label: t("Text transform"),
+      name: name2 || `${focusIdx2}.attributes.text-transform`,
+      options: options$6
+    });
+  }, [focusIdx2, name2]);
+}
+const options$5 = [
+  {
+    value: "ltr",
+    get label() {
+      return t("ltr");
+    }
+  },
+  {
+    value: "rtl",
+    get label() {
+      return t("rtl");
+    }
+  }
+];
+function Direction() {
+  const { focusIdx: focusIdx2 } = useFocusIdx();
+  return useMemo(() => {
+    return /* @__PURE__ */ React__default.createElement(Stack$4, null, /* @__PURE__ */ React__default.createElement(RadioGroupField, {
+      label: t("Direction"),
+      name: `${focusIdx2}.attributes.direction`,
+      options: options$5,
+      inline: true
+    }));
+  }, [focusIdx2]);
 }
 function Link() {
   const { focusIdx: focusIdx2 } = useFocusIdx();
@@ -34746,226 +34618,28 @@ function Link() {
       span: 11
     }, /* @__PURE__ */ React__default.createElement(TextField, {
       prefix: /* @__PURE__ */ React__default.createElement(IconLink$1, null),
-      label: /* @__PURE__ */ React__default.createElement("span", null, "Href\xA0\xA0\xA0"),
+      label: /* @__PURE__ */ React__default.createElement("span", null, t("Href"), "\xA0\xA0\xA0"),
       name: `${focusIdx2}.attributes.href`
     })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
       offset: 1,
       span: 11
     }, /* @__PURE__ */ React__default.createElement(SelectField, {
-      label: "Target",
+      label: t("Target"),
       name: `${focusIdx2}.attributes.target`,
       options: [
         {
           value: "",
-          label: "_self"
+          label: t("_self")
         },
         {
           value: "_blank",
-          label: "_blank"
+          label: t("_blank")
         }
       ]
     })));
   }, [focusIdx2]);
 }
-function Image$1() {
-  const { focusIdx: focusIdx2 } = useFocusIdx();
-  const { onUploadImage } = useEditorProps();
-  return /* @__PURE__ */ React__default.createElement(AttributesPanelWrapper, {
-    style: { padding: 0 }
-  }, /* @__PURE__ */ React__default.createElement(CollapseWrapper, {
-    defaultActiveKey: ["0", "1", "2", "3", "4"]
-  }, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
-    name: "1",
-    header: "Setting"
-  }, /* @__PURE__ */ React__default.createElement(Stack$4, {
-    vertical: true,
-    spacing: "tight"
-  }, /* @__PURE__ */ React__default.createElement(ImageUploaderField, {
-    label: "src",
-    labelHidden: true,
-    name: `${focusIdx2}.attributes.src`,
-    helpText: "The image suffix should be .jpg, jpeg, png, gif, etc. Otherwise, the picture may not be displayed normally.",
-    uploadHandler: onUploadImage
-  }), /* @__PURE__ */ React__default.createElement(ColorPickerField, {
-    label: "Background color",
-    name: `${focusIdx2}.attributes.container-background-color`,
-    inline: true
-  }))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
-    name: "0",
-    header: "Dimension"
-  }, /* @__PURE__ */ React__default.createElement(Space$1, {
-    direction: "vertical"
-  }, /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
-    span: 11
-  }, /* @__PURE__ */ React__default.createElement(Width, {
-    config: pixelAdapter
-  })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
-    offset: 1,
-    span: 11
-  }, /* @__PURE__ */ React__default.createElement(Height, {
-    config: imageHeightAdapter
-  }))), /* @__PURE__ */ React__default.createElement(Padding, {
-    showResetAll: true
-  }), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
-    span: 24
-  }, /* @__PURE__ */ React__default.createElement(Align, null))))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
-    name: "2",
-    header: "Link"
-  }, /* @__PURE__ */ React__default.createElement(Stack$4, {
-    vertical: true,
-    spacing: "tight"
-  }, /* @__PURE__ */ React__default.createElement(Link, null))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
-    name: "3",
-    header: "Border"
-  }, /* @__PURE__ */ React__default.createElement(Border, null)), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
-    name: "4",
-    header: "Extra"
-  }, /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
-    span: 11
-  }, /* @__PURE__ */ React__default.createElement(TextField, {
-    label: "title",
-    name: `${focusIdx2}.attributes.title`
-  })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
-    offset: 1,
-    span: 11
-  }, /* @__PURE__ */ React__default.createElement(TextField, {
-    label: "alt",
-    name: `${focusIdx2}.attributes.alt`
-  }))), /* @__PURE__ */ React__default.createElement(Grid.Col, {
-    span: 24
-  }, /* @__PURE__ */ React__default.createElement(TextField, {
-    label: "class name",
-    name: `${focusIdx2}.attributes.css-class`
-  })))));
-}
-function Group() {
-  return /* @__PURE__ */ React__default.createElement(AttributesPanelWrapper, null, /* @__PURE__ */ React__default.createElement(CollapseWrapper, {
-    defaultActiveKey: ["0", "1", "2"]
-  }, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
-    name: "0",
-    header: "Dimension"
-  }, /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
-    span: 11
-  }, /* @__PURE__ */ React__default.createElement(Width, null)), /* @__PURE__ */ React__default.createElement(Grid.Col, {
-    offset: 1,
-    span: 11
-  }, /* @__PURE__ */ React__default.createElement(VerticalAlign, null)))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
-    name: "1",
-    header: "Background"
-  }, /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
-    span: 11
-  }, /* @__PURE__ */ React__default.createElement(BackgroundColor, null)), /* @__PURE__ */ React__default.createElement(Grid.Col, {
-    offset: 1,
-    span: 11
-  }))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
-    name: "4",
-    header: "Extra"
-  }, /* @__PURE__ */ React__default.createElement(Grid.Col, {
-    span: 24
-  }, /* @__PURE__ */ React__default.createElement(ClassName, null)))));
-}
-const options$5 = [
-  {
-    value: "left",
-    label: "Left"
-  },
-  {
-    value: "center",
-    label: "Center"
-  },
-  {
-    value: "right",
-    label: "Right"
-  }
-];
-function TextAlign({ name: name2 }) {
-  const { focusIdx: focusIdx2 } = useFocusIdx();
-  return useMemo(() => {
-    return /* @__PURE__ */ React__default.createElement(Stack$4, null, /* @__PURE__ */ React__default.createElement(RadioGroupField, {
-      label: t("Text align"),
-      name: name2 || `${focusIdx2}.attributes.text-align`,
-      options: options$5
-    }));
-  }, [focusIdx2, name2]);
-}
-function Decoration() {
-  const { focusIdx: focusIdx2 } = useFocusIdx();
-  return useMemo(() => {
-    return /* @__PURE__ */ React__default.createElement(Stack$4, {
-      key: focusIdx2,
-      vertical: true,
-      spacing: "extraTight"
-    }, /* @__PURE__ */ React__default.createElement(TextStyle, {
-      variation: "strong",
-      size: "large"
-    }, "Decoration"), /* @__PURE__ */ React__default.createElement(TextField, {
-      label: "Border radius",
-      name: `${focusIdx2}.attributes.borderRadius`,
-      inline: true
-    }), /* @__PURE__ */ React__default.createElement(TextField, {
-      label: "Border",
-      name: `${focusIdx2}.attributes.border`,
-      inline: true
-    }), /* @__PURE__ */ React__default.createElement(NumberField, {
-      label: "Opacity",
-      max: 1,
-      min: 0,
-      step: 0.1,
-      name: `${focusIdx2}.attributes.opacity`,
-      inline: true
-    }));
-  }, [focusIdx2]);
-}
-const options$4 = [
-  {
-    value: "initial",
-    label: "none"
-  },
-  {
-    value: "uppercase",
-    label: "uppercase"
-  },
-  {
-    value: "lowercase",
-    label: "lowercase"
-  },
-  {
-    value: "capitalize",
-    label: "capitalize"
-  }
-];
-function TextTransform({ name: name2 }) {
-  const { focusIdx: focusIdx2 } = useFocusIdx();
-  return useMemo(() => {
-    return /* @__PURE__ */ React__default.createElement(SelectField, {
-      label: "Text transform",
-      name: name2 || `${focusIdx2}.attributes.text-transform`,
-      options: options$4
-    });
-  }, [focusIdx2, name2]);
-}
-const options$3 = [
-  {
-    value: "ltr",
-    label: "ltr"
-  },
-  {
-    value: "rtl",
-    label: "rtl"
-  }
-];
-function Direction() {
-  const { focusIdx: focusIdx2 } = useFocusIdx();
-  return useMemo(() => {
-    return /* @__PURE__ */ React__default.createElement(Stack$4, null, /* @__PURE__ */ React__default.createElement(RadioGroupField, {
-      label: "Direction",
-      name: `${focusIdx2}.attributes.direction`,
-      options: options$3,
-      inline: true
-    }));
-  }, [focusIdx2]);
-}
-function Margin() {
+function Margin() {
   const { focusIdx: focusIdx2 } = useFocusIdx();
   return useMemo(() => {
     return /* @__PURE__ */ React__default.createElement(Stack$4, {
@@ -34973,19 +34647,19 @@ function Margin() {
       spacing: "extraTight"
     }, /* @__PURE__ */ React__default.createElement(TextStyle, {
       size: "large"
-    }, "Margin"), /* @__PURE__ */ React__default.createElement(Stack$4, {
+    }, t("Margin")), /* @__PURE__ */ React__default.createElement(Stack$4, {
       wrap: false
     }, /* @__PURE__ */ React__default.createElement(Stack$4.Item, {
       fill: true
     }, /* @__PURE__ */ React__default.createElement(TextField, {
-      label: "Top",
+      label: t("Top"),
       quickchange: true,
       name: `${focusIdx2}.attributes.marginTop`,
       inline: true
     })), /* @__PURE__ */ React__default.createElement(Stack$4.Item, {
       fill: true
     }, /* @__PURE__ */ React__default.createElement(TextField, {
-      label: "Bottom",
+      label: t("Bottom"),
       quickchange: true,
       name: `${focusIdx2}.attributes.marginBottom`,
       inline: true
@@ -34994,14 +34668,14 @@ function Margin() {
     }, /* @__PURE__ */ React__default.createElement(Stack$4.Item, {
       fill: true
     }, /* @__PURE__ */ React__default.createElement(TextField, {
-      label: "Left",
+      label: t("Left"),
       quickchange: true,
       name: `${focusIdx2}.attributes.marginLeft`,
       inline: true
     })), /* @__PURE__ */ React__default.createElement(Stack$4.Item, {
       fill: true
     }, /* @__PURE__ */ React__default.createElement(TextField, {
-      label: "Right",
+      label: t("Right"),
       quickchange: true,
       name: `${focusIdx2}.attributes.marginRight`,
       inline: true
@@ -35012,11 +34686,20 @@ function BorderColor() {
   const { focusIdx: focusIdx2 } = useFocusIdx();
   return useMemo(() => {
     return /* @__PURE__ */ React__default.createElement(ColorPickerField, {
-      label: "Color",
+      label: t("Color"),
       name: `${focusIdx2}.attributes.border-color`
     });
   }, [focusIdx2]);
 }
+function FontSize$1() {
+  const { focusIdx: focusIdx2 } = useFocusIdx();
+  return /* @__PURE__ */ React__default.createElement(InputWithUnitField, {
+    label: t("Font size (px)"),
+    name: `${focusIdx2}.attributes.font-size`,
+    config: pixelAdapter,
+    autoComplete: "off"
+  });
+}
 function getContextMergeTags(mergeTags2, context, idx) {
   const loop = (currentIdx, combineMergeTags) => {
     var _a, _b;
@@ -35112,7 +34795,7 @@ const MergeTags$1 = React__default.memo((props) => {
     value: props.value,
     size: "small",
     dropdownMenuStyle: { maxHeight: 400, overflow: "auto" },
-    placeholder: "Please select",
+    placeholder: t("Please select"),
     treeData: treeOptions,
     onChange: (val) => onSelect(val)
   }) : /* @__PURE__ */ React__default.createElement(Tree$1, {
@@ -35126,70 +34809,455 @@ const MergeTags$1 = React__default.memo((props) => {
       overflow: "auto"
     }
   }));
-});
-const borderStyleOptions = [
-  {
-    value: "dashed",
-    label: "Dashed"
-  },
-  {
-    value: "dotted",
-    label: "Dotted"
-  },
-  {
-    value: "solid",
-    label: "Solid"
-  },
-  {
-    value: "double",
-    label: "double"
-  },
-  {
-    value: "ridge",
-    label: "ridge"
-  },
-  {
-    value: "groove",
-    label: "groove"
-  },
-  {
-    value: "inset",
-    label: "inset"
-  },
-  {
-    value: "outset",
-    label: "outset"
-  }
-];
-function BorderStyle() {
-  const { focusIdx: focusIdx2 } = useFocusIdx();
-  return useMemo(() => {
-    return /* @__PURE__ */ React__default.createElement(SelectField, {
-      label: "Style",
-      name: `${focusIdx2}.attributes.border-style`,
-      options: borderStyleOptions
-    });
-  }, [focusIdx2]);
-}
-function NavbarLinkPadding({ name: name2 }) {
-  return useMemo(() => {
-    return /* @__PURE__ */ React__default.createElement(Stack$4, {
-      vertical: true,
-      spacing: "extraTight"
-    }, /* @__PURE__ */ React__default.createElement(Padding, {
-      name: name2
-    }));
-  }, [name2]);
+});
+const borderStyleOptions = [
+  {
+    value: "dashed",
+    get label() {
+      return t("Dashed");
+    }
+  },
+  {
+    value: "dotted",
+    get label() {
+      return t("Dotted");
+    }
+  },
+  {
+    value: "solid",
+    get label() {
+      return t("Solid");
+    }
+  },
+  {
+    value: "double",
+    get label() {
+      return t("double");
+    }
+  },
+  {
+    value: "ridge",
+    get label() {
+      return t("ridge");
+    }
+  },
+  {
+    value: "groove",
+    get label() {
+      return t("groove");
+    }
+  },
+  {
+    value: "inset",
+    get label() {
+      return t("inset");
+    }
+  },
+  {
+    value: "outset",
+    get label() {
+      return t("outset");
+    }
+  }
+];
+function BorderStyle() {
+  const { focusIdx: focusIdx2 } = useFocusIdx();
+  return useMemo(() => {
+    return /* @__PURE__ */ React__default.createElement(SelectField, {
+      label: t("Style"),
+      name: `${focusIdx2}.attributes.border-style`,
+      options: borderStyleOptions
+    });
+  }, [focusIdx2]);
+}
+const options$4 = [
+  {
+    value: "normal",
+    get label() {
+      return t("Normal");
+    }
+  },
+  {
+    value: "italic",
+    get label() {
+      return t("Italic");
+    }
+  }
+];
+function FontStyle({ name: name2 }) {
+  const { focusIdx: focusIdx2 } = useFocusIdx();
+  return /* @__PURE__ */ React__default.createElement(RadioGroupField, {
+    label: t("Font style"),
+    name: name2 || `${focusIdx2}.attributes.font-style`,
+    options: options$4
+  });
+}
+function NavbarLinkPadding({ name: name2 }) {
+  return useMemo(() => {
+    return /* @__PURE__ */ React__default.createElement(Stack$4, {
+      vertical: true,
+      spacing: "extraTight"
+    }, /* @__PURE__ */ React__default.createElement(Padding, {
+      name: name2
+    }));
+  }, [name2]);
+}
+function BorderWidth() {
+  const { focusIdx: focusIdx2 } = useFocusIdx();
+  return useMemo(() => {
+    return /* @__PURE__ */ React__default.createElement(TextField, {
+      label: t("Width"),
+      quickchange: true,
+      name: `${focusIdx2}.attributes.border-width`
+    });
+  }, [focusIdx2]);
+}
+const options$3 = [
+  {
+    value: "normal",
+    get label() {
+      return t("Normal");
+    }
+  },
+  {
+    value: "bold",
+    get label() {
+      return t("Bold");
+    }
+  },
+  {
+    value: "100",
+    label: "100"
+  },
+  {
+    value: "200",
+    label: "200"
+  },
+  {
+    value: "300",
+    label: "300"
+  },
+  {
+    value: "400",
+    label: "400"
+  },
+  {
+    value: "500",
+    label: "500"
+  },
+  {
+    value: "600",
+    label: "600"
+  },
+  {
+    value: "700",
+    label: "700"
+  },
+  {
+    value: "800",
+    label: "800"
+  },
+  {
+    value: "900",
+    label: "900"
+  }
+];
+function FontWeight({ name: name2 }) {
+  const { focusIdx: focusIdx2 } = useFocusIdx();
+  return useMemo(() => {
+    return /* @__PURE__ */ React__default.createElement(SelectField, {
+      label: t("Font weight"),
+      name: name2 || `${focusIdx2}.attributes.font-weight`,
+      options: options$3
+    });
+  }, [focusIdx2, name2]);
+}
+function Column() {
+  return /* @__PURE__ */ React__default.createElement(AttributesPanelWrapper, null, /* @__PURE__ */ React__default.createElement(CollapseWrapper, {
+    defaultActiveKey: ["0", "1", "2"]
+  }, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+    name: "0",
+    header: t("Dimension")
+  }, /* @__PURE__ */ React__default.createElement(Space$1, {
+    direction: "vertical"
+  }, /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    span: 11
+  }, /* @__PURE__ */ React__default.createElement(Width, null)), /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    offset: 1,
+    span: 11
+  }, /* @__PURE__ */ React__default.createElement(VerticalAlign, null))), /* @__PURE__ */ React__default.createElement(Padding, null))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+    name: "1",
+    header: t("Background")
+  }, /* @__PURE__ */ React__default.createElement(BackgroundColor, null)), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+    name: "2",
+    header: t("Border")
+  }, /* @__PURE__ */ React__default.createElement(Border, null)), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+    name: "4",
+    header: t("Extra")
+  }, /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    span: 24
+  }, /* @__PURE__ */ React__default.createElement(ClassName, null)))));
+}
+const ShadowDom = (props) => {
+  const [root2, setRoot] = useState(null);
+  const [ref, setRef] = useState(null);
+  useEffect(() => {
+    if (ref) {
+      const root22 = ref.attachShadow({ mode: "open" });
+      setRoot(root22);
+    }
+  }, [ref]);
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", __spreadProps(__spreadValues({}, props), {
+    ref: setRef
+  }), root2 && ReactDOM.createPortal(props.children, root2)));
+};
+const CodeMirrorEditorPromise = import("./index3.js");
+const CodeMirrorEditor = React__default.lazy(() => CodeMirrorEditorPromise);
+const HtmlEditor = (props) => {
+  const { visible, setVisible } = props;
+  const { focusBlock: focusBlock2, setValueByIdx: setValueByIdx2 } = useBlock();
+  const { pageData: pageData2 } = useEditorContext();
+  const { focusIdx: focusIdx2 } = useFocusIdx();
+  const [content, setContent] = useState(focusBlock2 == null ? void 0 : focusBlock2.data.value.content);
+  const isTable = (focusBlock2 == null ? void 0 : focusBlock2.type) === BasicType.TABLE;
+  useEffect(() => {
+    setContent(focusBlock2 == null ? void 0 : focusBlock2.data.value.content);
+  }, [focusBlock2 == null ? void 0 : focusBlock2.data.value.content]);
+  const onClose = () => {
+    setVisible(false);
+  };
+  const onSave = () => {
+    if (!focusBlock2)
+      return;
+    focusBlock2.data.value.content = content;
+    setValueByIdx2(focusIdx2, __spreadValues({}, focusBlock2));
+    onClose();
+  };
+  const styles2 = useMemo(() => {
+    if (!focusBlock2)
+      return {};
+    const attributes = focusBlock2.attributes;
+    return {
+      color: attributes.color || pageData2.data.value["text-color"],
+      fontSize: attributes["font-size"] || pageData2.data.value["font-size"],
+      fontFamily: attributes["font-family"] || pageData2.data.value["font-family"],
+      fontWeight: attributes["font-weight"] || pageData2.data.value["font-weight"],
+      backgroundColor: attributes["container-background-color"],
+      padding: attributes.padding
+    };
+  }, [focusBlock2, pageData2.data.value]);
+  return /* @__PURE__ */ React__default.createElement(Drawer$1, {
+    placement: "left",
+    headerStyle: { display: "block", lineHeight: "48px" },
+    title: /* @__PURE__ */ React__default.createElement(Stack$4, {
+      distribution: "equalSpacing"
+    }, /* @__PURE__ */ React__default.createElement(TextStyle, {
+      variation: "strong",
+      size: "large"
+    }, t("Html")), /* @__PURE__ */ React__default.createElement(Stack$4, null, /* @__PURE__ */ React__default.createElement(Button$4, {
+      type: "primary",
+      onClick: onSave
+    }, t("Save")))),
+    closable: false,
+    escToExit: false,
+    width: "100vw",
+    visible,
+    footer: null,
+    bodyStyle: { padding: 0, overflow: "hidden" }
+  }, /* @__PURE__ */ React__default.createElement("div", {
+    style: { display: "flex", height: "100%" }
+  }, /* @__PURE__ */ React__default.createElement("div", {
+    style: { flex: 1, height: "100%" }
+  }, /* @__PURE__ */ React__default.createElement(Suspense, {
+    fallback: /* @__PURE__ */ React__default.createElement("div", {
+      style: {
+        height: "100%",
+        width: "100%",
+        display: "flex",
+        alignItems: "center",
+        backgroundColor: "#263238",
+        justifyContent: "center",
+        fontSize: 24,
+        color: "#fff"
+      }
+    }, t("Editor Loading..."))
+  }, /* @__PURE__ */ React__default.createElement(CodeMirrorEditor, {
+    value: content,
+    onChange: setContent
+  }))), /* @__PURE__ */ React__default.createElement("div", {
+    style: { flex: 1, height: "100%", overflow: "auto", marginRight: 10 }
+  }, /* @__PURE__ */ React__default.createElement(ShadowDom, {
+    style: __spreadProps(__spreadValues({}, styles2), {
+      width: pageData2.attributes.width || "600px",
+      margin: "auto"
+    })
+  }, isTable ? /* @__PURE__ */ React__default.createElement("table", null, /* @__PURE__ */ React__default.createElement("tbody", {
+    dangerouslySetInnerHTML: { __html: content }
+  })) : /* @__PURE__ */ React__default.createElement("div", {
+    dangerouslySetInnerHTML: { __html: content }
+  })))));
+};
+function Text() {
+  const [visible, setVisible] = useState(false);
+  return /* @__PURE__ */ React__default.createElement(AttributesPanelWrapper, {
+    extra: /* @__PURE__ */ React__default.createElement(Tooltip$1, {
+      content: t("Html mode")
+    }, /* @__PURE__ */ React__default.createElement(Button$4, {
+      onClick: () => setVisible(true),
+      icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+        iconName: "icon-html"
+      })
+    }))
+  }, /* @__PURE__ */ React__default.createElement(CollapseWrapper, {
+    defaultActiveKey: ["0", "1", "2"]
+  }, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+    name: "0",
+    header: t("Dimension")
+  }, /* @__PURE__ */ React__default.createElement(Space$1, {
+    direction: "vertical"
+  }, /* @__PURE__ */ React__default.createElement(Height, null), /* @__PURE__ */ React__default.createElement(Padding, {
+    showResetAll: true
+  }))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+    name: "1",
+    header: t("Color")
+  }, /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    span: 11
+  }, /* @__PURE__ */ React__default.createElement(Color, null)), /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    offset: 1,
+    span: 11
+  }, /* @__PURE__ */ React__default.createElement(ContainerBackgroundColor, {
+    title: t("Background color")
+  })))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+    name: "2",
+    header: t("Typography")
+  }, /* @__PURE__ */ React__default.createElement(Space$1, {
+    direction: "vertical"
+  }, /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    span: 11
+  }, /* @__PURE__ */ React__default.createElement(FontFamily, null)), /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    offset: 1,
+    span: 11
+  }, /* @__PURE__ */ React__default.createElement(FontSize$1, null))), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    span: 11
+  }, /* @__PURE__ */ React__default.createElement(LineHeight, null)), /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    offset: 1,
+    span: 11
+  }, /* @__PURE__ */ React__default.createElement(LetterSpacing, null))), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    span: 11
+  }, /* @__PURE__ */ React__default.createElement(TextDecoration, null)), /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    offset: 1,
+    span: 11
+  }, /* @__PURE__ */ React__default.createElement(FontWeight, null))), /* @__PURE__ */ React__default.createElement(Align, null), /* @__PURE__ */ React__default.createElement(FontStyle, null), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    span: 11
+  }), /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    offset: 1,
+    span: 11
+  })))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+    name: "4",
+    header: t("Extra")
+  }, /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    span: 24
+  }, /* @__PURE__ */ React__default.createElement(ClassName, null)))), /* @__PURE__ */ React__default.createElement(HtmlEditor, {
+    visible,
+    setVisible
+  }));
 }
-function BorderWidth() {
+function Image$1() {
   const { focusIdx: focusIdx2 } = useFocusIdx();
-  return useMemo(() => {
-    return /* @__PURE__ */ React__default.createElement(TextField, {
-      label: "Width",
-      quickchange: true,
-      name: `${focusIdx2}.attributes.border-width`
-    });
-  }, [focusIdx2]);
+  const { onUploadImage } = useEditorProps();
+  return /* @__PURE__ */ React__default.createElement(AttributesPanelWrapper, {
+    style: { padding: 0 }
+  }, /* @__PURE__ */ React__default.createElement(CollapseWrapper, {
+    defaultActiveKey: ["0", "1", "2", "3", "4"]
+  }, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+    name: "1",
+    header: t("Setting")
+  }, /* @__PURE__ */ React__default.createElement(Stack$4, {
+    vertical: true,
+    spacing: "tight"
+  }, /* @__PURE__ */ React__default.createElement(ImageUploaderField, {
+    label: t("src"),
+    labelHidden: true,
+    name: `${focusIdx2}.attributes.src`,
+    helpText: t("The image suffix should be .jpg, jpeg, png, gif, etc. Otherwise, the picture may not be displayed normally."),
+    uploadHandler: onUploadImage
+  }), /* @__PURE__ */ React__default.createElement(ColorPickerField, {
+    label: t("Background color"),
+    name: `${focusIdx2}.attributes.container-background-color`,
+    inline: true
+  }))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+    name: "0",
+    header: t("Dimension")
+  }, /* @__PURE__ */ React__default.createElement(Space$1, {
+    direction: "vertical"
+  }, /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    span: 11
+  }, /* @__PURE__ */ React__default.createElement(Width, {
+    config: pixelAdapter
+  })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    offset: 1,
+    span: 11
+  }, /* @__PURE__ */ React__default.createElement(Height, {
+    config: imageHeightAdapter
+  }))), /* @__PURE__ */ React__default.createElement(Padding, {
+    showResetAll: true
+  }), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    span: 24
+  }, /* @__PURE__ */ React__default.createElement(Align, null))))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+    name: "2",
+    header: t("Link")
+  }, /* @__PURE__ */ React__default.createElement(Stack$4, {
+    vertical: true,
+    spacing: "tight"
+  }, /* @__PURE__ */ React__default.createElement(Link, null))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+    name: "3",
+    header: t("Border")
+  }, /* @__PURE__ */ React__default.createElement(Border, null)), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+    name: "4",
+    header: t("Extra")
+  }, /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    span: 11
+  }, /* @__PURE__ */ React__default.createElement(TextField, {
+    label: t("title"),
+    name: `${focusIdx2}.attributes.title`
+  })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    offset: 1,
+    span: 11
+  }, /* @__PURE__ */ React__default.createElement(TextField, {
+    label: t("alt"),
+    name: `${focusIdx2}.attributes.alt`
+  }))), /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    span: 24
+  }, /* @__PURE__ */ React__default.createElement(TextField, {
+    label: t("class name"),
+    name: `${focusIdx2}.attributes.css-class`
+  })))));
+}
+function Group() {
+  return /* @__PURE__ */ React__default.createElement(AttributesPanelWrapper, null, /* @__PURE__ */ React__default.createElement(CollapseWrapper, {
+    defaultActiveKey: ["0", "1", "2"]
+  }, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+    name: "0",
+    header: t("Dimension")
+  }, /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    span: 11
+  }, /* @__PURE__ */ React__default.createElement(Width, null)), /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    offset: 1,
+    span: 11
+  }, /* @__PURE__ */ React__default.createElement(VerticalAlign, null)))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+    name: "1",
+    header: t("Background")
+  }, /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    span: 11
+  }, /* @__PURE__ */ React__default.createElement(BackgroundColor, null)), /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    offset: 1,
+    span: 11
+  }))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+    name: "4",
+    header: t("Extra")
+  }, /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    span: 24
+  }, /* @__PURE__ */ React__default.createElement(ClassName, null)))));
 }
 function Button() {
   const { focusIdx: focusIdx2 } = useFocusIdx();
@@ -35201,11 +35269,11 @@ function Button() {
     defaultActiveKey: ["-1", "0", "1", "2", "3"]
   }, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "-1",
-    header: "Setting"
+    header: t("Setting")
   }, /* @__PURE__ */ React__default.createElement(Space$1, {
     direction: "vertical"
   }, /* @__PURE__ */ React__default.createElement(TextField, {
-    label: /* @__PURE__ */ React__default.createElement(Space$1, null, /* @__PURE__ */ React__default.createElement("span", null, "Content"), mergeTags2 && /* @__PURE__ */ React__default.createElement(Popover$1, {
+    label: /* @__PURE__ */ React__default.createElement(Space$1, null, /* @__PURE__ */ React__default.createElement("span", null, t("Content")), mergeTags2 && /* @__PURE__ */ React__default.createElement(Popover$1, {
       trigger: "click",
       content: /* @__PURE__ */ React__default.createElement(MergeTags$1, {
         value: input.value,
@@ -35220,7 +35288,7 @@ function Button() {
     name: `${focusIdx2}.data.value.content`
   }), /* @__PURE__ */ React__default.createElement(Link, null))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "0",
-    header: "Dimension"
+    header: t("Dimension")
   }, /* @__PURE__ */ React__default.createElement(Space$1, {
     direction: "vertical"
   }, /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
@@ -35229,33 +35297,33 @@ function Button() {
     offset: 1,
     span: 11
   }, /* @__PURE__ */ React__default.createElement(FontWeight, null))), /* @__PURE__ */ React__default.createElement(Padding, {
-    title: "Padding",
+    title: t("Padding"),
     attributeName: "padding",
     showResetAll: true
   }), /* @__PURE__ */ React__default.createElement(Padding, {
-    title: "Inner padding",
+    title: t("Inner padding"),
     attributeName: "inner-padding"
   }))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "1",
-    header: "Color"
+    header: t("Color")
   }, /* @__PURE__ */ React__default.createElement(Space$1, {
     direction: "vertical"
   }, /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 11
   }, /* @__PURE__ */ React__default.createElement(Color, {
-    title: "Text color"
+    title: t("Text color")
   })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
     offset: 1,
     span: 11
   }, /* @__PURE__ */ React__default.createElement(BackgroundColor, {
-    title: "Button color"
+    title: t("Button color")
   })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 11
   }, /* @__PURE__ */ React__default.createElement(ContainerBackgroundColor, {
-    title: "Background color"
+    title: t("Background color")
   }))))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "2",
-    header: "Typography"
+    header: t("Typography")
   }, /* @__PURE__ */ React__default.createElement(Space$1, {
     direction: "vertical"
   }, /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
@@ -35275,10 +35343,10 @@ function Button() {
     span: 11
   }, /* @__PURE__ */ React__default.createElement(LetterSpacing, null))), /* @__PURE__ */ React__default.createElement(Align, null), /* @__PURE__ */ React__default.createElement(FontStyle, null))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "3",
-    header: "Border"
+    header: t("Border")
   }, /* @__PURE__ */ React__default.createElement(Border, null)), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "4",
-    header: "Extra"
+    header: t("Extra")
   }, /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 24
   }, /* @__PURE__ */ React__default.createElement(ClassName, null)))));
@@ -35288,7 +35356,7 @@ function Divider() {
     defaultActiveKey: ["-1", "0", "1", "2", "3"]
   }, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "1",
-    header: "Dimension"
+    header: t("Dimension")
   }, /* @__PURE__ */ React__default.createElement(Space$1, {
     direction: "vertical"
   }, /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
@@ -35300,7 +35368,7 @@ function Divider() {
     span: 11
   })), /* @__PURE__ */ React__default.createElement(Align, null), /* @__PURE__ */ React__default.createElement(Padding, null))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "2",
-    header: "Border"
+    header: t("Border")
   }, /* @__PURE__ */ React__default.createElement(Stack$4, {
     wrap: false,
     spacing: "tight"
@@ -35312,17 +35380,17 @@ function Divider() {
     style: { width: 100 }
   }, /* @__PURE__ */ React__default.createElement(BorderColor, null)))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "3",
-    header: "Background"
+    header: t("Background")
   }, /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 11
   }, /* @__PURE__ */ React__default.createElement(ContainerBackgroundColor, {
-    title: "Background"
+    title: t("Background")
   })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
     offset: 1,
     span: 11
   }))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "4",
-    header: "Extra"
+    header: t("Extra")
   }, /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 24
   }, /* @__PURE__ */ React__default.createElement(ClassName, null)))));
@@ -35335,33 +35403,33 @@ function Wrapper() {
     defaultActiveKey: ["0", "1", "2"]
   }, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "0",
-    header: "Dimension"
+    header: t("Dimension")
   }, /* @__PURE__ */ React__default.createElement(Stack$4, {
     vertical: true,
     spacing: "tight"
   }, /* @__PURE__ */ React__default.createElement(Padding, null))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "1",
-    header: "Background"
+    header: t("Background")
   }, /* @__PURE__ */ React__default.createElement(Stack$4, {
     vertical: true,
     spacing: "tight"
   }, /* @__PURE__ */ React__default.createElement(Background, null))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "2",
-    header: "Border"
+    header: t("Border")
   }, /* @__PURE__ */ React__default.createElement(Stack$4, {
     vertical: true,
     spacing: "tight"
   }, /* @__PURE__ */ React__default.createElement(TextField, {
-    label: "Border",
+    label: t("Border"),
     name: `${focusIdx2}.attributes.border`,
     inline: true
   }), /* @__PURE__ */ React__default.createElement(TextField, {
-    label: "Background border radius",
+    label: t("Background border radius"),
     name: `${focusIdx2}.attributes.border-radius`,
     inline: true
   }))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "4",
-    header: "Extra"
+    header: t("Extra")
   }, /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 24
   }, /* @__PURE__ */ React__default.createElement(ClassName, null)))));
@@ -35371,17 +35439,17 @@ function Spacer() {
     defaultActiveKey: ["-1", "0", "1", "2", "3"]
   }, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "1",
-    header: "Dimension"
+    header: t("Dimension")
   }, /* @__PURE__ */ React__default.createElement(Space$1, {
     direction: "vertical"
   }, /* @__PURE__ */ React__default.createElement(Height, null), /* @__PURE__ */ React__default.createElement(Padding, null))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "2",
-    header: "Background"
+    header: t("Background")
   }, /* @__PURE__ */ React__default.createElement(ContainerBackgroundColor, {
-    title: "Background color"
+    title: t("Background color")
   })), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "4",
-    header: "Extra"
+    header: t("Extra")
   }, /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 24
   }, /* @__PURE__ */ React__default.createElement(ClassName, null)))));
@@ -35392,7 +35460,7 @@ function Raw() {
   return /* @__PURE__ */ React__default.createElement(AttributesPanelWrapper, {
     style: { padding: 20 },
     extra: /* @__PURE__ */ React__default.createElement(Tooltip$1, {
-      content: "Html mode"
+      content: t("Html mode")
     }, /* @__PURE__ */ React__default.createElement(Button$4, {
       onClick: () => setVisible(true),
       icon: /* @__PURE__ */ React__default.createElement(IconFont, {
@@ -35411,25 +35479,35 @@ function Raw() {
 const positionOptions = [
   {
     value: "left",
-    label: "Left"
+    get label() {
+      return t("Left");
+    }
   },
   {
     value: "right",
-    label: "Right"
+    get label() {
+      return t("Right");
+    }
   }
 ];
 const alignOptions = [
   {
     value: "top",
-    label: "top"
+    get label() {
+      return t("top");
+    }
   },
   {
     value: "middle",
-    label: "middle"
+    get label() {
+      return t("middle");
+    }
   },
   {
     value: "bottom",
-    label: "bottom"
+    get label() {
+      return t("bottom");
+    }
   }
 ];
 function Accordion() {
@@ -35439,7 +35517,7 @@ function Accordion() {
     defaultActiveKey: ["0", "1", "2"]
   }, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "0",
-    header: "Setting"
+    header: t("Setting")
   }, /* @__PURE__ */ React__default.createElement(Space$1, {
     direction: "vertical"
   }, /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
@@ -35450,31 +35528,31 @@ function Accordion() {
   }, /* @__PURE__ */ React__default.createElement(FontFamily, null))), /* @__PURE__ */ React__default.createElement(Padding, null), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 11
   }, /* @__PURE__ */ React__default.createElement(InputWithUnitField, {
-    label: "Icon width",
+    label: t("Icon width"),
     name: `${focusIdx2}.attributes.icon-width`
   })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
     offset: 1,
     span: 11
   }, /* @__PURE__ */ React__default.createElement(InputWithUnitField, {
-    label: "Icon height",
+    label: t("Icon height"),
     name: `${focusIdx2}.attributes.icon-height`
   }))), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 11
   }, /* @__PURE__ */ React__default.createElement(ImageUploaderField, {
-    label: "Unwrapped icon",
+    label: t("Unwrapped icon"),
     name: `${focusIdx2}.attributes.icon-unwrapped-url`,
     uploadHandler: onUploadImage
   })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
     offset: 1,
     span: 11
   }, /* @__PURE__ */ React__default.createElement(ImageUploaderField, {
-    label: "Wrapped icon",
+    label: t("Wrapped icon"),
     name: `${focusIdx2}.attributes.icon-wrapped-url`,
     uploadHandler: onUploadImage
   }))), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 11
   }, /* @__PURE__ */ React__default.createElement(RadioGroupField, {
-    label: "Icon position",
+    label: t("Icon position"),
     name: `${focusIdx2}.attributes.icon-position`,
     options: positionOptions
   })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
@@ -35482,15 +35560,15 @@ function Accordion() {
     span: 11
   }, /* @__PURE__ */ React__default.createElement(SelectField, {
     style: { width: 120 },
-    label: "Icon align",
+    label: t("Icon align"),
     name: `${focusIdx2}.attributes.icon-align`,
     options: alignOptions
   }))), /* @__PURE__ */ React__default.createElement(TextField, {
-    label: "border",
+    label: t("Border"),
     name: `${focusIdx2}.attributes.border`
   }))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "4",
-    header: "Extra"
+    header: t("Extra")
   }, /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 24
   }, /* @__PURE__ */ React__default.createElement(ClassName, null)))));
@@ -35501,7 +35579,7 @@ function AccordionElement() {
     defaultActiveKey: ["0", "1", "2"]
   }, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "0",
-    header: "Setting"
+    header: t("Setting")
   }, /* @__PURE__ */ React__default.createElement(Space$1, {
     direction: "vertical"
   }, /* @__PURE__ */ React__default.createElement(Border, null), /* @__PURE__ */ React__default.createElement(BackgroundColor, null), /* @__PURE__ */ React__default.createElement(FontFamily, null)))));
@@ -35512,11 +35590,11 @@ function AccordionTitle() {
     defaultActiveKey: ["0", "1", "2"]
   }, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "0",
-    header: "Setting"
+    header: t("Setting")
   }, /* @__PURE__ */ React__default.createElement(Space$1, {
     direction: "vertical"
   }, /* @__PURE__ */ React__default.createElement(TextAreaField, {
-    label: "Content",
+    label: t("Content"),
     name: `${focusIdx2}.data.value.content`
   }), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 11
@@ -35534,7 +35612,7 @@ function AccordionTitle() {
     offset: 1,
     span: 11
   })), /* @__PURE__ */ React__default.createElement(Padding, {
-    title: "Padding",
+    title: t("Padding"),
     attributeName: "padding"
   })))));
 }
@@ -35544,11 +35622,11 @@ function AccordionText() {
     defaultActiveKey: ["0", "1", "2"]
   }, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "0",
-    header: "Setting"
+    header: t("Setting")
   }, /* @__PURE__ */ React__default.createElement(Space$1, {
     direction: "vertical"
   }, /* @__PURE__ */ React__default.createElement(TextAreaField, {
-    label: "Content",
+    label: t("Content"),
     name: `${focusIdx2}.data.value.content`,
     autoSize: { minRows: 5 }
   }), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
@@ -35567,18 +35645,22 @@ function AccordionText() {
     offset: 1,
     span: 11
   }, /* @__PURE__ */ React__default.createElement(BackgroundColor, null))), /* @__PURE__ */ React__default.createElement(Padding, {
-    title: "Padding",
+    title: t("Padding"),
     attributeName: "padding"
   })))));
 }
 const options$2 = [
   {
     value: "hidden",
-    label: "hidden"
+    get label() {
+      return t("hidden");
+    }
   },
   {
     value: "visible",
-    label: "visible"
+    get label() {
+      return t("visible");
+    }
   }
 ];
 function Carousel() {
@@ -35589,16 +35671,16 @@ function Carousel() {
     defaultActiveKey: ["0", "1", "2", "3", "4"]
   }, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "0",
-    header: "Dimension"
+    header: t("Dimension")
   }, /* @__PURE__ */ React__default.createElement(Space$1, {
     direction: "vertical"
   }, /* @__PURE__ */ React__default.createElement(InputWithUnitField, {
-    label: "Thumbnail width",
+    label: t("Thumbnail width"),
     name: `${focusIdx2}.attributes.tb-width`,
     quickchange: true,
     inline: true
   }), /* @__PURE__ */ React__default.createElement(RadioGroupField, {
-    label: "Thumbnails",
+    label: t("Thumbnails"),
     name: `${focusIdx2}.attributes.thumbnails`,
     options: options$2,
     inline: true
@@ -35607,7 +35689,7 @@ function Carousel() {
   }))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "4",
     contentStyle: { padding: 0 },
-    header: "Images"
+    header: t("Images")
   }, /* @__PURE__ */ React__default.createElement(Stack$4, {
     vertical: true,
     spacing: "tight"
@@ -35626,54 +35708,54 @@ function Carousel() {
     }
   }))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "3",
-    header: "Icon"
+    header: t("Icon")
   }, /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 11
   }, /* @__PURE__ */ React__default.createElement(TextField, {
-    label: "Left icon",
+    label: t("Left icon"),
     name: `${focusIdx2}.attributes.left-icon`
   })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
     offset: 1,
     span: 11
   }, /* @__PURE__ */ React__default.createElement(TextField, {
-    label: "Right icon",
+    label: t("Right icon"),
     name: `${focusIdx2}.attributes.right-icon`
   }))), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 11
   }, /* @__PURE__ */ React__default.createElement(InputWithUnitField, {
-    label: "Icon width",
+    label: t("Icon width"),
     name: `${focusIdx2}.attributes.icon-width`
   })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
     offset: 1,
     span: 11
   }))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "1",
-    header: "Border"
+    header: t("Border")
   }, /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 11
   }, /* @__PURE__ */ React__default.createElement(ColorPickerField, {
-    label: "Hovered border",
+    label: t("Hovered border"),
     name: `${focusIdx2}.attributes.tb-hover-border-color`
   })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
     offset: 1,
     span: 11
   }, /* @__PURE__ */ React__default.createElement(ColorPickerField, {
-    label: "Selected Border",
+    label: t("Selected Border"),
     name: `${focusIdx2}.attributes.tb-selected-border-color`
   }))), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 11
   }, /* @__PURE__ */ React__default.createElement(TextField, {
-    label: "Border of the thumbnails",
+    label: t("Border of the thumbnails"),
     name: `${focusIdx2}.attributes.tb-border`
   })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
     offset: 1,
     span: 11
   }, /* @__PURE__ */ React__default.createElement(TextField, {
-    label: "Border radius of the thumbnails",
+    label: t("Border radius of the thumbnails"),
     name: `${focusIdx2}.attributes.tb-border-radius`
   })))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "4",
-    header: "Extra"
+    header: t("Extra")
   }, /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 24
   }, /* @__PURE__ */ React__default.createElement(ClassName, null)))));
@@ -35687,46 +35769,50 @@ function CarouselImage({
   return /* @__PURE__ */ React__default.createElement(Space$1, {
     direction: "vertical"
   }, /* @__PURE__ */ React__default.createElement(ImageUploaderField, {
-    label: "Image",
+    label: t("Image"),
     labelHidden: true,
     name: `${focusIdx2}.data.value.images.[${index2}].src`,
-    helpText: "The image suffix should be .jpg, jpeg, png, gif, etc. Otherwise, the picture may not be displayed normally.",
+    helpText: t("The image suffix should be .jpg, jpeg, png, gif, etc. Otherwise, the picture may not be displayed normally."),
     uploadHandler: onUploadImage
   }), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 11
   }, /* @__PURE__ */ React__default.createElement(TextField, {
     prefix: /* @__PURE__ */ React__default.createElement(IconLink$1, null),
-    label: "Url",
+    label: t("Url"),
     name: `${focusIdx2}.data.value.images.[${index2}].href`
   })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
     offset: 1,
     span: 11
   }, /* @__PURE__ */ React__default.createElement(SelectField, {
-    label: "Target",
+    label: t("Target"),
     name: `${focusIdx2}.data.value.images.[${index2}].target`,
     options: [
       {
         value: "",
-        label: "_self"
+        label: t("_self")
       },
       {
         value: "_blank",
-        label: "_blank"
+        label: t("_blank")
       }
     ]
   }))), /* @__PURE__ */ React__default.createElement(TextField, {
-    label: "Title",
+    label: t("Title"),
     name: `${focusIdx2}.data.value.image.[${index2}].title`
   }));
 }
 const options$1 = [
   {
     value: "fluid-height",
-    label: "Fluid height"
+    get label() {
+      return t("Fluid height");
+    }
   },
   {
     value: "fixed-height",
-    label: "Fixed height"
+    get label() {
+      return t("Fixed height");
+    }
   }
 ];
 function Hero() {
@@ -35736,11 +35822,11 @@ function Hero() {
     defaultActiveKey: ["0", "1", "2"]
   }, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "0",
-    header: "Dimension"
+    header: t("Dimension")
   }, /* @__PURE__ */ React__default.createElement(Space$1, {
     direction: "vertical"
   }, /* @__PURE__ */ React__default.createElement(RadioGroupField, {
-    label: "Mode",
+    label: t("Mode"),
     name: `${focusIdx2}.attributes.mode`,
     options: options$1
   }), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
@@ -35750,42 +35836,42 @@ function Hero() {
     span: 11
   }, /* @__PURE__ */ React__default.createElement(Height, null))), /* @__PURE__ */ React__default.createElement(Padding, null), /* @__PURE__ */ React__default.createElement(VerticalAlign, null))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "1",
-    header: "Background"
+    header: t("Background")
   }, /* @__PURE__ */ React__default.createElement(Space$1, {
     direction: "vertical"
   }, /* @__PURE__ */ React__default.createElement(ImageUploaderField, {
-    label: "src",
+    label: t("src"),
     name: `${focusIdx2}.attributes.background-url`,
-    helpText: "The image suffix should be .jpg, jpeg, png, gif, etc. Otherwise, the picture may not be displayed normally.",
+    helpText: t("The image suffix should be .jpg, jpeg, png, gif, etc. Otherwise, the picture may not be displayed normally."),
     uploadHandler: onUploadImage
   }), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 11
   }, /* @__PURE__ */ React__default.createElement(InputWithUnitField, {
-    label: "Background width",
+    label: t("Background width"),
     name: `${focusIdx2}.attributes.background-width`
   })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
     offset: 1,
     span: 11
   }, /* @__PURE__ */ React__default.createElement(InputWithUnitField, {
-    label: "Background height",
+    label: t("Background height"),
     name: `${focusIdx2}.attributes.background-height`
   }))), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 11
   }, /* @__PURE__ */ React__default.createElement(TextField, {
-    label: "Background position",
+    label: t("Background position"),
     name: `${focusIdx2}.attributes.background-position`
   })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
     offset: 1,
     span: 11
   }, /* @__PURE__ */ React__default.createElement(InputWithUnitField, {
-    label: "Border radius",
+    label: t("Border radius"),
     name: `${focusIdx2}.attributes.border-radius`,
     unitOptions: "percent"
   })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 11
   }, /* @__PURE__ */ React__default.createElement(BackgroundColor, null))))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "4",
-    header: "Extra"
+    header: t("Extra")
   }, /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 24
   }, /* @__PURE__ */ React__default.createElement(ClassName, null)))));
@@ -35798,21 +35884,21 @@ function Navbar() {
     defaultActiveKey: ["0", "1", "2"]
   }, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "0",
-    header: "Layout"
+    header: t("Layout")
   }, /* @__PURE__ */ React__default.createElement(Stack$4, {
     vertical: true,
     spacing: "tight"
   }, /* @__PURE__ */ React__default.createElement(Align, null))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     contentStyle: { padding: 0 },
     name: "1",
-    header: "Navbar links"
+    header: t("Navbar links")
   }, /* @__PURE__ */ React__default.createElement(Space$1, {
     direction: "vertical",
     style: { width: "100%" }
   }, /* @__PURE__ */ React__default.createElement(EditTabField, {
     tabPosition: "top",
     name: `${focusIdx2}.data.value.links`,
-    label: "Links",
+    label: t("Links"),
     labelHidden: true,
     renderItem: (item2, index2) => /* @__PURE__ */ React__default.createElement(NavbarLink, {
       item: item2,
@@ -35827,7 +35913,7 @@ function Navbar() {
     }
   }), /* @__PURE__ */ React__default.createElement("div", null))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "4",
-    header: "Extra"
+    header: t("Extra")
   }, /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 24
   }, /* @__PURE__ */ React__default.createElement(ClassName, null)))));
@@ -35845,13 +35931,13 @@ function NavbarLink({
   }, /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 11
   }, /* @__PURE__ */ React__default.createElement(TextField, {
-    label: "Content",
+    label: t("Content"),
     name: `${focusIdx2}.data.value.links.[${index2}].content`
   })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
     offset: 1,
     span: 11
   }, /* @__PURE__ */ React__default.createElement(ColorPickerField, {
-    label: "Color",
+    label: t("Color"),
     name: `${focusIdx2}.data.value.links.[${index2}].color`
   }))), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 11
@@ -35860,8 +35946,8 @@ function NavbarLink({
   })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
     offset: 1,
     span: 11
-  }, /* @__PURE__ */ React__default.createElement(NumberField, {
-    label: "Font size (px)",
+  }, /* @__PURE__ */ React__default.createElement(TextField, {
+    label: t("Font size (px)"),
     name: `${focusIdx2}.data.value.links.[${index2}].font-size`,
     config: pixelAdapter,
     autoComplete: "off"
@@ -35896,23 +35982,23 @@ function NavbarLink({
     span: 11
   }, /* @__PURE__ */ React__default.createElement(TextField, {
     prefix: /* @__PURE__ */ React__default.createElement(IconLink$1, null),
-    label: /* @__PURE__ */ React__default.createElement("span", null, "Url"),
+    label: /* @__PURE__ */ React__default.createElement("span", null, t("Url")),
     name: `${focusIdx2}.data.value.links.[${index2}].href`
   })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
     offset: 1,
     span: 11
   }, /* @__PURE__ */ React__default.createElement(SelectField, {
     style: { minWidth: 65 },
-    label: "Target",
+    label: t("Target"),
     name: `${focusIdx2}.data.value.links.[${index2}].target`,
     options: [
       {
         value: "_blank",
-        label: "_blank"
+        label: t("_blank")
       },
       {
         value: "_self",
-        label: "_self"
+        label: t("_self")
       }
     ]
   }))), /* @__PURE__ */ React__default.createElement(NavbarLinkPadding, {
@@ -35923,11 +36009,15 @@ function NavbarLink({
 const options = [
   {
     value: "vertical",
-    label: "vertical"
+    get label() {
+      return t("vertical");
+    }
   },
   {
     value: "horizontal",
-    label: "horizontal"
+    get label() {
+      return t("horizontal");
+    }
   }
 ];
 function Social() {
@@ -35942,16 +36032,16 @@ function Social() {
     defaultActiveKey: ["0", "1", "2", "3"]
   }, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "1",
-    header: "Setting"
+    header: t("Setting")
   }, /* @__PURE__ */ React__default.createElement(Space$1, {
     direction: "vertical"
   }, /* @__PURE__ */ React__default.createElement(RadioGroupField, {
-    label: "Mode",
+    label: t("Mode"),
     name: `${focusIdx2}.attributes.mode`,
     options
   }), /* @__PURE__ */ React__default.createElement(Align, null))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "3",
-    header: "Typography"
+    header: t("Typography")
   }, /* @__PURE__ */ React__default.createElement(Space$1, {
     direction: "vertical"
   }, /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
@@ -35970,7 +36060,7 @@ function Social() {
     offset: 1,
     span: 11
   }, /* @__PURE__ */ React__default.createElement(ContainerBackgroundColor, {
-    title: "Background color"
+    title: t("Background color")
   }))), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 11
   }, /* @__PURE__ */ React__default.createElement(TextDecoration, null)), /* @__PURE__ */ React__default.createElement(Grid.Col, {
@@ -35978,7 +36068,7 @@ function Social() {
     span: 11
   }, /* @__PURE__ */ React__default.createElement(FontStyle, null))))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "2",
-    header: "Social item",
+    header: t("Social item"),
     contentStyle: { padding: 10 }
   }, /* @__PURE__ */ React__default.createElement(EditGridTabField, {
     tabPosition: "top",
@@ -35991,30 +36081,30 @@ function Social() {
     })
   })), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "0",
-    header: "Dimension"
+    header: t("Dimension")
   }, /* @__PURE__ */ React__default.createElement(Space$1, {
     direction: "vertical",
     size: "large"
   }, /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 11
   }, /* @__PURE__ */ React__default.createElement(InputWithUnitField, {
-    label: "Icon width",
+    label: t("Icon width"),
     name: `${focusIdx2}.attributes.icon-size`
   })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
     offset: 1,
     span: 11
   }, /* @__PURE__ */ React__default.createElement(TextField, {
-    label: "Border radius",
+    label: t("Border radius"),
     name: `${focusIdx2}.attributes.border-radius`
   }))), /* @__PURE__ */ React__default.createElement(Padding, null), /* @__PURE__ */ React__default.createElement(Padding, {
     attributeName: "inner-padding",
-    title: "Icon padding"
+    title: t("Icon padding")
   }), /* @__PURE__ */ React__default.createElement(Padding, {
     attributeName: "text-padding",
-    title: "Text padding"
+    title: t("Text padding")
   }))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "4",
-    header: "Extra"
+    header: t("Extra")
   }, /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 24
   }, /* @__PURE__ */ React__default.createElement(ClassName, null)))));
@@ -36037,7 +36127,7 @@ function SocialElement({
   return /* @__PURE__ */ React__default.createElement(Space$1, {
     direction: "vertical"
   }, /* @__PURE__ */ React__default.createElement(ImageUploaderField, {
-    label: "Image",
+    label: t("Image"),
     autoCompleteOptions,
     labelHidden: true,
     name: `${focusIdx2}.data.value.elements.[${index2}].src`,
@@ -36045,7 +36135,7 @@ function SocialElement({
   }), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 11
   }, /* @__PURE__ */ React__default.createElement(TextField, {
-    label: "Content",
+    label: t("Content"),
     name: `${focusIdx2}.data.value.elements.[${index2}].content`,
     quickchange: true
   })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
@@ -36053,7 +36143,7 @@ function SocialElement({
     span: 11
   }, /* @__PURE__ */ React__default.createElement(TextField, {
     prefix: /* @__PURE__ */ React__default.createElement(IconLink$1, null),
-    label: "Link",
+    label: t("Link"),
     name: `${focusIdx2}.data.value.elements.[${index2}].href`
   }))));
 }
@@ -36061,7 +36151,7 @@ function Table() {
   const [visible, setVisible] = useState(false);
   return /* @__PURE__ */ React__default.createElement(AttributesPanelWrapper, {
     extra: /* @__PURE__ */ React__default.createElement(Tooltip$1, {
-      content: "Edit"
+      content: t("Edit")
     }, /* @__PURE__ */ React__default.createElement(Button$4, {
       onClick: () => setVisible(true),
       icon: /* @__PURE__ */ React__default.createElement(IconFont, {
@@ -36072,15 +36162,15 @@ function Table() {
     defaultActiveKey: ["-1", "0", "1", "2", "3"]
   }, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "1",
-    header: "Dimension"
+    header: t("Dimension")
   }, /* @__PURE__ */ React__default.createElement(Stack$4, null, /* @__PURE__ */ React__default.createElement(Width, null), /* @__PURE__ */ React__default.createElement(Stack$4.Item, null)), /* @__PURE__ */ React__default.createElement(Stack$4, {
     vertical: true
   }, /* @__PURE__ */ React__default.createElement(Padding, null))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "2",
-    header: "Decoration"
+    header: t("Decoration")
   }, /* @__PURE__ */ React__default.createElement(Color, null), /* @__PURE__ */ React__default.createElement(ContainerBackgroundColor, null), /* @__PURE__ */ React__default.createElement(Border, null)), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "2",
-    header: "Typography"
+    header: t("Typography")
   }, /* @__PURE__ */ React__default.createElement(Stack$4, null, /* @__PURE__ */ React__default.createElement(FontFamily, null), /* @__PURE__ */ React__default.createElement(FontSize$1, null)), /* @__PURE__ */ React__default.createElement(FontStyle, null), /* @__PURE__ */ React__default.createElement(TextAlign, null))), /* @__PURE__ */ React__default.createElement(HtmlEditor, {
     visible,
     setVisible
@@ -36217,13 +36307,18 @@ function MergeTags(props) {
     popupVisible: visible,
     onVisibleChange,
     style: { zIndex: 10 },
+    triggerProps: {
+      popupStyle: {
+        backgroundColor: "var(--color-bg-5);"
+      }
+    },
     content: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(MergeTags$1, {
       value: "",
       onChange
     })),
     getPopupContainer: props.getPopupContainer
   }, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
-    title: "Merge tag",
+    title: t("Merge tag"),
     icon: /* @__PURE__ */ React__default.createElement(IconFont, {
       iconName: "icon-merge-tags"
     })
@@ -36283,7 +36378,7 @@ function IconBgColor({ selectionRange, execCommand, getPopoverMountNode }) {
     }), /* @__PURE__ */ React__default.createElement("div", {
       style: { borderBottom: `2px solid ${color2}`, position: "absolute", width: "130%", left: "-15%", top: 16 }
     })),
-    title: "Background color"
+    title: t("Background color")
   }));
 }
 function IconFontColor({ selectionRange, execCommand, getPopoverMountNode }) {
@@ -36315,7 +36410,7 @@ function IconFontColor({ selectionRange, execCommand, getPopoverMountNode }) {
     }), /* @__PURE__ */ React__default.createElement("div", {
       style: { borderBottom: `2px solid ${color2}`, position: "absolute", width: "130%", left: "-15%", top: 16 }
     })),
-    title: "Text color"
+    title: t("Text color")
   }));
 }
 function BasicTools() {
@@ -36353,25 +36448,25 @@ function BasicTools() {
     style: { position: "relative", marginRight: 10, color: "#fff", fontFamily: "-apple-system, BlinkMacSystemFont, San Francisco, Segoe UI" }
   }, "Text"), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
     onClick: handleSelectParent,
-    title: "Select parent block",
+    title: t("Select parent block"),
     icon: /* @__PURE__ */ React__default.createElement(IconFont, {
       iconName: "icon-back-parent"
     })
   }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
     onClick: handleCopy,
-    title: "Copy",
+    title: t("Copy"),
     icon: /* @__PURE__ */ React__default.createElement(IconFont, {
       iconName: "icon-copy"
     })
   }), onAddCollection && /* @__PURE__ */ React__default.createElement(ToolItem$1, {
     onClick: handleAddToCollection,
-    title: "Add to collection",
+    title: t("Add to collection"),
     icon: /* @__PURE__ */ React__default.createElement(IconFont, {
       iconName: "icon-collection"
     })
   }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
     onClick: handleDelete,
-    title: "Delete",
+    title: t("Delete"),
     icon: /* @__PURE__ */ React__default.createElement(IconFont, {
       iconName: "icon-delete"
     })
@@ -36408,9 +36503,9 @@ function Unlink(props) {
   return /* @__PURE__ */ React__default.createElement(Tooltip$1, {
     color: "#fff",
     position: "tl",
-    content: "Unlink"
+    content: t("Unlink")
   }, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
-    title: "Unlink",
+    title: t("Unlink"),
     icon: /* @__PURE__ */ React__default.createElement(IconFont, {
       iconName: "icon-unlink"
     }),
@@ -36442,9 +36537,9 @@ function StrikeThrough(props) {
   return /* @__PURE__ */ React__default.createElement(Tooltip$1, {
     color: "#fff",
     position: "tl",
-    content: "Strikethrough"
+    content: t("Strikethrough")
   }, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
-    title: "Strikethrough",
+    title: t("Strikethrough"),
     isActive: Boolean(node),
     icon: /* @__PURE__ */ React__default.createElement(IconFont, {
       iconName: "icon-strikethrough"
@@ -36477,9 +36572,9 @@ function Underline(props) {
   return /* @__PURE__ */ React__default.createElement(Tooltip$1, {
     color: "#fff",
     position: "tl",
-    content: "Underline"
+    content: t("Underline")
   }, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
-    title: "Underline",
+    title: t("Underline"),
     isActive: Boolean(node),
     icon: /* @__PURE__ */ React__default.createElement(IconFont, {
       iconName: "icon-underline"
@@ -36512,9 +36607,9 @@ function Italic(props) {
   return /* @__PURE__ */ React__default.createElement(Tooltip$1, {
     color: "#fff",
     position: "tl",
-    content: "Italic"
+    content: t("Italic")
   }, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
-    title: "Italic",
+    title: t("Italic"),
     isActive: Boolean(node),
     icon: /* @__PURE__ */ React__default.createElement(IconFont, {
       iconName: "icon-italic"
@@ -36547,9 +36642,9 @@ function Bold(props) {
   return /* @__PURE__ */ React__default.createElement(Tooltip$1, {
     color: "#fff",
     position: "tl",
-    content: "Bold"
+    content: t("Bold")
   }, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
-    title: "Bold",
+    title: t("Bold"),
     isActive: Boolean(node),
     icon: /* @__PURE__ */ React__default.createElement(IconFont, {
       iconName: "icon-bold"
@@ -36634,11 +36729,11 @@ function Tools(props) {
   const execCommand = useCallback((cmd, val) => {
     var _a;
     if (!selectionRange) {
-      console.error("No selectionRange");
+      console.error(t("No selectionRange"));
       return;
     }
     if (!(focusBlockNode == null ? void 0 : focusBlockNode.contains(selectionRange == null ? void 0 : selectionRange.commonAncestorContainer))) {
-      console.error("Not commonAncestorContainer");
+      console.error(t("Not commonAncestorContainer"));
       return;
     }
     restoreRange(selectionRange);
@@ -36769,19 +36864,19 @@ function Tools(props) {
     icon: /* @__PURE__ */ React__default.createElement(IconFont, {
       iconName: "icon-align-left"
     }),
-    title: "Align left"
+    title: t("Align left")
   }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
     onClick: () => execCommand("justifyCenter"),
     icon: /* @__PURE__ */ React__default.createElement(IconFont, {
       iconName: "icon-align-center"
     }),
-    title: "Align center"
+    title: t("Align center")
   }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
     onClick: () => execCommand("justifyRight"),
     icon: /* @__PURE__ */ React__default.createElement(IconFont, {
       iconName: "icon-align-right"
     }),
-    title: "Align right"
+    title: t("Align right")
   }), /* @__PURE__ */ React__default.createElement("div", {
     className: "easy-email-extensions-divider"
   }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
@@ -36789,13 +36884,13 @@ function Tools(props) {
     icon: /* @__PURE__ */ React__default.createElement(IconFont, {
       iconName: "icon-list-ol"
     }),
-    title: "Orderlist"
+    title: t("Orderlist")
   }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
     onClick: () => execCommand("insertUnorderedList"),
     icon: /* @__PURE__ */ React__default.createElement(IconFont, {
       iconName: "icon-list-ul"
     }),
-    title: "Unorderlist"
+    title: t("Unorderlist")
   }), /* @__PURE__ */ React__default.createElement("div", {
     className: "easy-email-extensions-divider"
   }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
@@ -36803,7 +36898,7 @@ function Tools(props) {
     icon: /* @__PURE__ */ React__default.createElement(IconFont, {
       iconName: "icon-line"
     }),
-    title: "Line"
+    title: t("Line")
   }), /* @__PURE__ */ React__default.createElement("div", {
     className: "easy-email-extensions-divider"
   }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
@@ -36811,7 +36906,7 @@ function Tools(props) {
     icon: /* @__PURE__ */ React__default.createElement(IconFont, {
       iconName: "icon-close"
     }),
-    title: "Remove format"
+    title: t("Remove format")
   }), /* @__PURE__ */ React__default.createElement("div", {
     className: "easy-email-extensions-divider"
   })));
@@ -36966,29 +37061,29 @@ const AddToCollection = ({ visible, setVisible }) => {
     maskClosable: false,
     style: { zIndex: 2e3 },
     visible,
-    title: "Add to collection",
+    title: t("Add to collection"),
     onOk: () => handleSubmit(),
     onCancel: () => setVisible(false)
   }, /* @__PURE__ */ React__default.createElement(Stack$4, {
     vertical: true
   }, /* @__PURE__ */ React__default.createElement(Stack$4.Item, null), /* @__PURE__ */ React__default.createElement(TextField, {
-    label: "Title",
+    label: t("Title"),
     name: "label",
     validate: (val) => {
       if (!val)
-        return "Title required!";
+        return t("Title required!");
       return void 0;
     }
   }), /* @__PURE__ */ React__default.createElement(TextAreaField, {
-    label: "Description",
+    label: t("Description"),
     name: "helpText"
   }), /* @__PURE__ */ React__default.createElement(ImageUploaderField, {
-    label: "Thumbnail",
+    label: t("Thumbnail"),
     name: "thumbnail",
     uploadHandler: onUploadImage,
     validate: (val) => {
       if (!val)
-        return "Thumbnail required!";
+        return t("Thumbnail required!");
       return void 0;
     }
   }))));
@@ -37062,19 +37157,19 @@ function ContextMenu({
   }, /* @__PURE__ */ React__default.createElement(IconFont, {
     iconName: "icon-top",
     style: { marginRight: 10 }
-  }), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, "Move up")), /* @__PURE__ */ React__default.createElement("div", {
+  }), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, t("Move up"))), /* @__PURE__ */ React__default.createElement("div", {
     className: styles$9.listItem,
     onClick: handleMoveDown
   }, /* @__PURE__ */ React__default.createElement(IconFont, {
     iconName: "icon-bottom",
     style: { marginRight: 10 }
-  }), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, "Move down")), /* @__PURE__ */ React__default.createElement("div", {
+  }), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, t("Move down"))), /* @__PURE__ */ React__default.createElement("div", {
     className: styles$9.listItem,
     onClick: handleCopy
   }, /* @__PURE__ */ React__default.createElement(IconFont, {
     iconName: "icon-copy",
     style: { marginRight: 10 }
-  }), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, "Copy")), props.onAddCollection && /* @__PURE__ */ React__default.createElement("div", {
+  }), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, t("Copy"))), props.onAddCollection && /* @__PURE__ */ React__default.createElement("div", {
     className: styles$9.listItem,
     onClick: handleAddToCollection
   }, /* @__PURE__ */ React__default.createElement(IconFont, {
@@ -37086,7 +37181,7 @@ function ContextMenu({
   }, /* @__PURE__ */ React__default.createElement(IconFont, {
     iconName: "icon-delete",
     style: { marginRight: 10 }
-  }), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, "Delete"))), /* @__PURE__ */ React__default.createElement("div", {
+  }), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, t("Delete")))), /* @__PURE__ */ React__default.createElement("div", {
     className: styles$9.contextmenuMark,
     onClick: onClose,
     onContextMenu: (e) => {
@@ -39477,119 +39572,171 @@ const list = [
 ];
 const defaultCategories$1 = [
   {
-    title: "Content",
+    get title() {
+      return t("Content");
+    },
     name: "CONTENT",
     blocks: [
       {
         type: AdvancedType.TEXT,
-        title: "Text",
-        description: "This block allows you to display text in your email.",
+        get title() {
+          return t("Text");
+        },
+        get description() {
+          return t("This block allows you to display text in your email");
+        },
         component: TextBlockItem
       },
       {
         type: AdvancedType.IMAGE,
-        title: "Image",
-        description: /* @__PURE__ */ React__default.createElement(Stack$4, {
-          vertical: true,
-          spacing: "none"
-        }, /* @__PURE__ */ React__default.createElement(TextStyle, null, 'Displays a responsive image in your email. It is similar to the HTML "<img/>" tag. Note that if no width is provided, the image will use the parent column width.')),
+        get title() {
+          return t("Image");
+        },
+        get description() {
+          return /* @__PURE__ */ React__default.createElement(Stack$4, {
+            vertical: true,
+            spacing: "none"
+          }, /* @__PURE__ */ React__default.createElement(TextStyle, null, t("Displays a responsive image in your email. It is similar to the HTML '&lt;img/&gt;' tag. Note that if no width is provided, the image will use the parent column width.")));
+        },
         component: ImageBlockItem
       },
       {
         type: AdvancedType.BUTTON,
-        title: "Button",
-        description: "Displays a customizable button.",
+        get title() {
+          return t("Button");
+        },
+        get description() {
+          return t("Displays a customizable button.");
+        },
         component: ButtonBlockItem
       },
       {
         type: AdvancedType.HERO,
-        title: "Hero",
-        description: `This block displays a hero image. It behaves like an
-        'section' with a single 'column'.`,
+        get title() {
+          return t("Hero");
+        },
+        get description() {
+          return t("This block displays a hero image. It behaves like an 'section' with a single 'column'.");
+        },
         component: HeroBlockItem
       },
       {
         type: AdvancedType.NAVBAR,
-        title: "Navbar",
-        description: `Displays a menu for navigation with an optional hamburger
-        mode for mobile devices.`,
+        get title() {
+          return t("Navbar");
+        },
+        get description() {
+          return t("Displays a menu for navigation with an optional hamburger mode for mobile devices.");
+        },
         component: NavbarBlockItem
       },
       {
         type: AdvancedType.SPACER,
-        title: "Spacer",
-        description: "Displays a blank space.",
+        get title() {
+          return t("Spacer");
+        },
+        get description() {
+          return t("Displays a blank space.");
+        },
         component: SpacerBlockItem
       },
       {
         type: AdvancedType.DIVIDER,
-        title: "Divider",
-        description: `Displays a horizontal divider that can be customized like a
-        HTML border.`,
+        get title() {
+          return t("Divider");
+        },
+        get description() {
+          return t("Displays a horizontal divider that can be customized like a HTML border.");
+        },
         component: DividerBlockItem
       },
       {
         type: AdvancedType.ACCORDION,
-        title: "Accordion",
-        description: `Accordion is an interactive component to stack content in
-        tabs, so the information is collapsed and only the titles
-        are visible. Readers can interact by clicking on the tabs
-        to reveal the content, providing a great experience on
-        mobile devices where space is scarce.`,
+        get title() {
+          return t("Accordion");
+        },
+        get description() {
+          return t("Accordion is an interactive component to stack content in tabs, so the information is collapsed and only the titles are visible. Readers can interact by clicking on the tabs to reveal the content, providing a great experience on mobile devices where space is scarce.");
+        },
         component: AccordionBlockItem
       },
       {
         type: AdvancedType.CAROUSEL,
-        title: "Carousel",
-        description: `This block displays a gallery of images or "carousel".
-        Readers can interact by hovering and clicking on
-        thumbnails depending on the email client they use.`,
+        get title() {
+          return t("Carousel");
+        },
+        get description() {
+          return t("This block displays a gallery of images or 'carousel'. Readers can interact by hovering and clicking on thumbnails depending on the email client they use.");
+        },
         component: CarouselBlockItem
       },
       {
         type: AdvancedType.SOCIAL,
-        title: "Social",
-        description: `Displays calls-to-action for various social networks with
-        their associated logo.`,
+        get title() {
+          return t("Social");
+        },
+        get description() {
+          return t("Displays calls-to-action for various social networks with their associated logo.");
+        },
         component: SocialBlockItem
       }
     ]
   },
   {
-    title: "Layout",
+    get title() {
+      return t("Layout");
+    },
     name: "LAYOUT",
     blocks: [
       {
         type: AdvancedType.WRAPPER,
-        title: "Wrapper",
-        description: `Wrapper enables to wrap multiple sections together. It's especially useful to achieve nested layouts with shared border or background images across sections.
-        `,
+        get title() {
+          return t("Wrapper");
+        },
+        get description() {
+          return t('Wrapper enables to wrap multiple sections together. It"s especially useful to achieve nested layouts with shared border or background images across sections.');
+        },
         component: WrapperBlockItem
       },
       {
         type: AdvancedType.SECTION,
-        title: "Section",
-        description: /* @__PURE__ */ React__default.createElement(Stack$4, {
-          vertical: true,
-          spacing: "none"
-        }, /* @__PURE__ */ React__default.createElement(TextStyle, null, "Sections are intended to be used as rows within your email. They will be used to structure the layout."), /* @__PURE__ */ React__default.createElement(TextStyle, null, "Sections cannot nest in sections. Columns can nest in sections; all content must be in a column.")),
+        get title() {
+          return t("Section");
+        },
+        get description() {
+          return /* @__PURE__ */ React__default.createElement(Stack$4, {
+            vertical: true,
+            spacing: "none"
+          }, /* @__PURE__ */ React__default.createElement(TextStyle, null, t("Sections are intended to be used as rows within your email. They will be used to structure the layout.")), /* @__PURE__ */ React__default.createElement(TextStyle, null, t("Sections cannot nest in sections. Columns can nest in sections; all content must be in a column.")));
+        },
         component: SectionBlockItem
       },
       {
         type: AdvancedType.GROUP,
-        title: "Group",
-        description: `Group allows you to prevent columns from stacking on
-          mobile. To do so, wrap the columns inside a group
-          block, so they'll stay side by side on mobile.`,
+        get title() {
+          return t("Group");
+        },
+        get description() {
+          return t('Group allows you to prevent columns from stacking on mobile. To do so, wrap the columns inside a group block, so they"ll stay side by side on mobile.');
+        },
         component: GroupBlockItem
       },
       {
         type: AdvancedType.COLUMN,
-        title: "Column",
-        description: /* @__PURE__ */ React__default.createElement(Stack$4, {
-          vertical: true,
-          spacing: "none"
-        }, /* @__PURE__ */ React__default.createElement(TextStyle, null, 'Columns enable you to horizontally organize the content within your sections. They must be located under "Section" block in order to be considered by the engine. To be responsive, columns are expressed in terms of percentage.'), /* @__PURE__ */ React__default.createElement(TextStyle, null, "Every single column has to contain something because they are responsive containers, and will be vertically stacked on a mobile view.")),
+        get title() {
+          return t("Column");
+        },
+        get description() {
+          return /* @__PURE__ */ React__default.createElement(Stack$4, {
+            vertical: true,
+            spacing: "none"
+          }, /* @__PURE__ */ React__default.createElement(TextStyle, null, t(`Columns enable you to horizontally organize the content within
+                your sections. They must be located under "Section" block in order
+                to be considered by the engine. To be responsive, columns are
+                expressed in terms of percentage.`)), /* @__PURE__ */ React__default.createElement(TextStyle, null, t(`Every single column has to contain something because they are
+                responsive containers, and will be vertically stacked on a mobile
+                view.`)));
+        },
         component: ColumnBlockItem
       }
     ]
@@ -39811,10 +39958,10 @@ function SourceCodePanel() {
       const parseValue = JSON.parse(JSON.stringify(eval("(" + event.target.value + ")")));
       const block = BlockManager.getBlockByType(parseValue.type);
       if (!block) {
-        throw new Error("Invalid content");
+        throw new Error(t("Invalid content"));
       }
       if (!parseValue.data || !parseValue.data.value || !parseValue.attributes || !Array.isArray(parseValue.children)) {
-        throw new Error("Invalid content");
+        throw new Error(t("Invalid content"));
       }
       setValueByIdx(focusIdx, parseValue);
     } catch (error2) {
@@ -39828,14 +39975,14 @@ function SourceCodePanel() {
         const parentBlock = getParentByIdx(values, focusIdx);
         const parseBlock = BlockManager.getBlockByType(parseValue2.type);
         if (!(parseBlock == null ? void 0 : parseBlock.validParentType.includes(parentBlock == null ? void 0 : parentBlock.type))) {
-          throw new Error("Invalid content");
+          throw new Error(t("Invalid content"));
         }
       } else if (focusIdx !== getPageIdx()) {
-        throw new Error("Invalid content");
+        throw new Error(t("Invalid content"));
       }
       setValueByIdx(focusIdx, parseValue2);
     } catch (error2) {
-      Message$1.error("Invalid content");
+      Message$1.error(t("Invalid content"));
     }
   }, [focusIdx, setValueByIdx, values]);
   const onChangeMjmlText = useCallback((value) => {
@@ -39854,7 +40001,7 @@ function SourceCodePanel() {
     return null;
   return /* @__PURE__ */ React__default.createElement(Collapse$1, null, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "json",
-    header: "Json source",
+    header: t("Json source"),
     contentStyle: { padding: "8px 13px" }
   }, /* @__PURE__ */ React__default.createElement(Input$4.TextArea, {
     key: code,
@@ -39863,7 +40010,7 @@ function SourceCodePanel() {
     onBlur: onChangeCode
   })), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "mjml",
-    header: "MJML source",
+    header: t("MJML source"),
     contentStyle: { padding: "8px 13px" }
   }, /* @__PURE__ */ React__default.createElement(Input$4.TextArea, {
     key: code,
@@ -40145,13 +40292,13 @@ function TipNode(props) {
   const { direction, title: title2, lineWidth, type } = props;
   const dragTitle = useMemo(() => {
     if (direction === "top" || direction === "noEnoughTop") {
-      return t(`Insert before`, title2);
+      return `${t("Insert before")} ${title2}`;
     } else if (direction === "bottom") {
-      return t(`Insert after`, title2);
+      return `${t("Insert after")} ${title2}`;
     } else if (direction === "right" || direction === "left") {
       return t("Drag here");
     }
-    return `Drag to ${title2}`;
+    return `${t("Drag to")} ${title2}`;
   }, [direction, title2]);
   const color2 = useMemo(() => {
     if (type === "drag") {
@@ -40585,13 +40732,13 @@ function MergeTagBadgePrompt() {
     className: classnames("easy-email-merge-tag-popover")
   }, /* @__PURE__ */ React__default.createElement("div", {
     className: "easy-email-merge-tag-popover-container"
-  }, /* @__PURE__ */ React__default.createElement("h3", null, /* @__PURE__ */ React__default.createElement("span", null, "Default value"), /* @__PURE__ */ React__default.createElement(IconFont, {
+  }, /* @__PURE__ */ React__default.createElement("h3", null, /* @__PURE__ */ React__default.createElement("span", null, t("Default value")), /* @__PURE__ */ React__default.createElement(IconFont, {
     style: { color: "rgb(92, 95, 98)" },
     iconName: "icon-close",
     onClick: onClose
   })), /* @__PURE__ */ React__default.createElement("div", {
     className: "easy-email-merge-tag-popover-desc"
-  }, /* @__PURE__ */ React__default.createElement("p", null, "If a personalized text value isn't available, then a default value is shown."), /* @__PURE__ */ React__default.createElement("div", {
+  }, /* @__PURE__ */ React__default.createElement("p", null, t('If a personalized text value isn"t available, then a default value is shown.')), /* @__PURE__ */ React__default.createElement("div", {
     className: "easy-email-merge-tag-popover-desc-label"
   }, /* @__PURE__ */ React__default.createElement("input", {
     autoFocus: true,
@@ -40606,7 +40753,7 @@ function MergeTagBadgePrompt() {
     className: "easy-email-merge-tag-popover-desc-label-button"
   }, /* @__PURE__ */ React__default.createElement("button", {
     onClick: onSave
-  }, "Save"))))), textContainer));
+  }, t("Save")))))), textContainer));
 }
 const SimpleLayout = (props) => {
   const { height: containerHeight } = useEditorProps();
@@ -40655,7 +40802,7 @@ const SimpleLayout = (props) => {
       overflowX: "hidden"
     }
   }, /* @__PURE__ */ React__default.createElement(Card$1, {
-    title: "Layout",
+    title: t("Layout"),
     style: { border: "none" },
     headerStyle: { height: 50 }
   }, !collapsed && /* @__PURE__ */ React__default.createElement(BlockLayer, {
@@ -40685,13 +40832,13 @@ const SimpleLayout = (props) => {
   }, /* @__PURE__ */ React__default.createElement(Tabs$1.TabPane, {
     title: /* @__PURE__ */ React__default.createElement("div", {
       style: { height: 31, lineHeight: "31px" }
-    }, "Configuration")
+    }, t("Configuration"))
   }, /* @__PURE__ */ React__default.createElement(AttributePanel, null)), showSourceCode && /* @__PURE__ */ React__default.createElement(Tabs$1.TabPane, {
     destroyOnHide: true,
     key: "Source code",
     title: /* @__PURE__ */ React__default.createElement("div", {
       style: { height: 31, lineHeight: "31px" }
-    }, "Source code")
+    }, t("Source code"))
   }, /* @__PURE__ */ React__default.createElement(SourceCodePanel, null))))), /* @__PURE__ */ React__default.createElement(InteractivePrompt, null), /* @__PURE__ */ React__default.createElement(MergeTagBadgePrompt, null)));
 };
 const StandardLayout$1 = "_StandardLayout_xv0bc_1";
@@ -45876,7 +46023,9 @@ function EditPanel({ showSourceCode }) {
 }
 const defaultCategories = [
   {
-    label: "Content",
+    get label() {
+      return t("Content");
+    },
     active: true,
     blocks: [
       {
@@ -45907,12 +46056,16 @@ const defaultCategories = [
     ]
   },
   {
-    label: "Layout",
+    get label() {
+      return t("Layout");
+    },
     active: true,
     displayType: "column",
     blocks: [
       {
-        title: "2 columns",
+        get title() {
+          return t("2 columns");
+        },
         payload: [
           ["50%", "50%"],
           ["33%", "67%"],
@@ -45922,7 +46075,9 @@ const defaultCategories = [
         ]
       },
       {
-        title: "3 columns",
+        get title() {
+          return t("3 columns");
+        },
         payload: [
           ["33.33%", "33.33%", "33.33%"],
           ["25%", "25%", "50%"],
@@ -45930,7 +46085,9 @@ const defaultCategories = [
         ]
       },
       {
-        title: "4 columns",
+        get title() {
+          return t("4 columns");
+        },
         payload: [[["25%", "25%", "25%", "25%"]]]
       }
     ]
@@ -45984,5 +46141,5 @@ const StandardLayout = (props) => {
     style: { width: 0, overflow: "hidden" }
   }))), /* @__PURE__ */ React__default.createElement(InteractivePrompt, null), /* @__PURE__ */ React__default.createElement(MergeTagBadgePrompt, null)));
 };
-export { TextAreaField as $, AttributePanel as A, BlockLayer as B, Color as C, Decoration as D, BlockMaskWrapper as E, FontFamily as F, SourceCodePanel as G, Height as H, InteractivePrompt as I, SimpleLayout as J, StandardLayout as K, LetterSpacing as L, Margin as M, NavbarLinkPadding as N, MergeTagBadgePrompt as O, Padding as P, ExtensionContext as Q, ExtensionProvider as R, ShortcutToolbar as S, TextAlign as T, useExtensionProps as U, VerticalAlign as V, Width as W, RICH_TEXT_TOOL_BAR as X, TextField as Y, InputWithUnitField as Z, SearchField as _, getIconNameByBlockType as a, NumberField as a0, SliderField as a1, UploadField as a2, ImageUploaderField as a3, SelectField as a4, TreeSelectField as a5, AutoCompleteField as a6, RadioGroupField as a7, SwitchField as a8, CheckboxField as a9, EditTabField as aa, EditGridTabField as ab, InlineTextField as ac, ColorPickerField as ad, enhancer as ae, RichTextField as af, getBlockTitle as b, commonjsGlobal as c, BlockAttributeConfigurationManager as d, Align as e, AttributesPanelWrapper as f, getContextMergeTags as g, CollapseWrapper as h, ContainerBackgroundColor as i, TextDecoration as j, Background as k, LineHeight as l, TextTransform as m, BackgroundColor as n, Direction as o, Link as p, Border as q, BorderColor as r, FontSize$1 as s, MergeTags$1 as t, BorderStyle as u, FontStyle as v, BorderWidth as w, FontWeight as x, ClassName as y, BlockMarketManager as z };
+export { SearchField as $, AttributePanel as A, BlockLayer as B, Color as C, Decoration as D, BlockMarketManager as E, FontFamily as F, BlockMaskWrapper as G, Height as H, SourceCodePanel as I, InteractivePrompt as J, SimpleLayout as K, LetterSpacing as L, Margin as M, NavbarLinkPadding as N, StandardLayout as O, Page as P, MergeTagBadgePrompt as Q, ExtensionContext as R, ShortcutToolbar as S, TextAlign as T, ExtensionProvider as U, VerticalAlign as V, Width as W, useExtensionProps as X, RICH_TEXT_TOOL_BAR as Y, TextField as Z, InputWithUnitField as _, getIconNameByBlockType as a, TextAreaField as a0, NumberField as a1, SliderField as a2, UploadField as a3, ImageUploaderField as a4, SelectField as a5, TreeSelectField as a6, AutoCompleteField as a7, RadioGroupField as a8, SwitchField as a9, CheckboxField as aa, EditTabField as ab, EditGridTabField as ac, InlineTextField as ad, ColorPickerField as ae, enhancer as af, RichTextField as ag, getBlockTitle as b, commonjsGlobal as c, BlockAttributeConfigurationManager as d, Align as e, AttributesPanelWrapper as f, getContextMergeTags as g, CollapseWrapper as h, ContainerBackgroundColor as i, TextDecoration as j, Background as k, LineHeight as l, TextTransform as m, BackgroundColor as n, Direction as o, Link as p, Border as q, BorderColor as r, FontSize$1 as s, MergeTags$1 as t, BorderStyle as u, FontStyle as v, BorderWidth as w, FontWeight as x, Padding as y, ClassName as z };
 //# sourceMappingURL=index2.js.map