easy-email-extensions 4.7.0 → 4.7.1

package/lib/index2.js

@@ -34364,33 +34364,109 @@ function VerticalAlign({
     }));
   }, [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: 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(Background, 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 options$9 = [
+  {
+    value: "left",
+    get label() {
+      return t("left");
+    }
+  },
+  {
+    value: "center",
+    get label() {
+      return t("center");
+    }
+  },
+  {
+    value: "right",
+    get label() {
+      return t("right");
+    }
+  }
+];
+function Align({ inline }) {
+  const { focusIdx: focusIdx2 } = useFocusIdx();
+  return /* @__PURE__ */ React__default.createElement(RadioGroupField, {
+    label: t("Align"),
+    name: `${focusIdx2}.attributes.align`,
+    options: options$9
+  });
+}
+function Color({ title: title2 = t("Color") }) {
+  const { focusIdx: focusIdx2 } = useFocusIdx();
+  return /* @__PURE__ */ React__default.createElement(ColorPickerField, {
+    label: title2,
+    name: `${focusIdx2}.attributes.color`
+  });
+}
+function Height({
+  inline,
+  config: config2
+}) {
+  const { focusIdx: focusIdx2 } = useFocusIdx();
+  return useMemo(() => {
+    return /* @__PURE__ */ React__default.createElement(Stack$4, {
+      wrap: false
+    }, /* @__PURE__ */ React__default.createElement(Stack$4.Item, {
+      fill: true
+    }, /* @__PURE__ */ React__default.createElement(TextField, {
+      label: t("Height"),
+      name: `${focusIdx2}.attributes.height`,
+      quickchange: true,
+      inline,
+      config: config2
+    })));
+  }, [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 = t("Container background color")
+}) {
+  const { focusIdx: focusIdx2 } = useFocusIdx();
+  return useMemo(() => {
+    return /* @__PURE__ */ React__default.createElement(ColorPickerField, {
+      label: title2,
+      name: `${focusIdx2}.attributes.container-background-color`
+    });
+  }, [focusIdx2, title2]);
+}
+function LetterSpacing({ name: name2 }) {
+  const { focusIdx: focusIdx2 } = useFocusIdx();
+  return /* @__PURE__ */ React__default.createElement(InputWithUnitField, {
+    label: t("Letter spacing"),
+    name: name2 || `${focusIdx2}.attributes.letter-spacing`
+  });
+}
+const options$7 = [
   {
     value: "",
     get label() {
@@ -34434,121 +34510,186 @@ function TextDecoration({ name: name2 }) {
     return /* @__PURE__ */ React__default.createElement(SelectField, {
       label: t("Text decoration"),
       name: name2 || `${focusIdx2}.attributes.text-decoration`,
-      options: options$9
+      options: options$7
     });
   }, [focusIdx2, name2]);
 }
-const options$8 = [
+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: t("Line height"),
+    unitOptions: "percent",
+    name: name2 || `${focusIdx2}.attributes.line-height`
+  });
+}
+const options$6 = [
   {
-    value: "normal",
+    value: "initial",
     get label() {
-      return t("Normal");
+      return t("None");
     }
   },
   {
-    value: "bold",
+    value: "uppercase",
     get label() {
-      return t("Bold");
+      return t("uppercase");
     }
   },
   {
-    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: "lowercase",
+    get label() {
+      return t("lowercase");
+    }
   },
   {
-    value: "900",
-    label: "900"
+    value: "capitalize",
+    get label() {
+      return t("capitalize");
+    }
   }
 ];
-function FontWeight({ name: name2 }) {
+function TextTransform({ 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$8
+      label: t("Text transform"),
+      name: name2 || `${focusIdx2}.attributes.text-transform`,
+      options: options$6
     });
   }, [focusIdx2, name2]);
 }
-const options$7 = [
+const options$5 = [
   {
-    value: "normal",
+    value: "ltr",
     get label() {
-      return t("Normal");
+      return t("ltr");
     }
   },
   {
-    value: "italic",
+    value: "rtl",
     get label() {
-      return t("Italic");
+      return t("rtl");
     }
   }
 ];
-function FontStyle({ name: name2 }) {
+function Direction() {
   const { focusIdx: focusIdx2 } = useFocusIdx();
-  return /* @__PURE__ */ React__default.createElement(RadioGroupField, {
-    label: t("Font style"),
-    name: name2 || `${focusIdx2}.attributes.font-style`,
-    options: options$7
-  });
+  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 Height({
-  inline,
-  config: config2
-}) {
+function Link() {
   const { focusIdx: focusIdx2 } = useFocusIdx();
   return useMemo(() => {
-    return /* @__PURE__ */ React__default.createElement(Stack$4, {
-      wrap: false
-    }, /* @__PURE__ */ React__default.createElement(Stack$4.Item, {
-      fill: true
+    return /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
+      span: 11
     }, /* @__PURE__ */ React__default.createElement(TextField, {
-      label: t("Height"),
-      name: `${focusIdx2}.attributes.height`,
-      quickchange: true,
-      inline,
-      config: config2
+      prefix: /* @__PURE__ */ React__default.createElement(IconLink$1, null),
+      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: t("Target"),
+      name: `${focusIdx2}.attributes.target`,
+      options: [
+        {
+          value: "",
+          label: t("_self")
+        },
+        {
+          value: "_blank",
+          label: t("_blank")
+        }
+      ]
     })));
-  }, [focusIdx2, inline]);
+  }, [focusIdx2]);
 }
-function ContainerBackgroundColor({
-  title: title2 = t("Container background color")
-}) {
+function Margin() {
+  const { focusIdx: focusIdx2 } = useFocusIdx();
+  return useMemo(() => {
+    return /* @__PURE__ */ React__default.createElement(Stack$4, {
+      vertical: true,
+      spacing: "extraTight"
+    }, /* @__PURE__ */ React__default.createElement(TextStyle, {
+      size: "large"
+    }, 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: 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: t("Bottom"),
+      quickchange: true,
+      name: `${focusIdx2}.attributes.marginBottom`,
+      inline: true
+    }))), /* @__PURE__ */ React__default.createElement(Stack$4, {
+      wrap: false
+    }, /* @__PURE__ */ React__default.createElement(Stack$4.Item, {
+      fill: true
+    }, /* @__PURE__ */ React__default.createElement(TextField, {
+      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: t("Right"),
+      quickchange: true,
+      name: `${focusIdx2}.attributes.marginRight`,
+      inline: true
+    }))));
+  }, [focusIdx2]);
+}
+function BorderColor() {
   const { focusIdx: focusIdx2 } = useFocusIdx();
   return useMemo(() => {
     return /* @__PURE__ */ React__default.createElement(ColorPickerField, {
-      label: title2,
-      name: `${focusIdx2}.attributes.container-background-color`
+      label: t("Color"),
+      name: `${focusIdx2}.attributes.border-color`
     });
-  }, [focusIdx2, title2]);
+  }, [focusIdx2]);
 }
 function FontSize$1() {
   const { focusIdx: focusIdx2 } = useFocusIdx();
@@ -34559,56 +34700,304 @@ function FontSize$1() {
     autoComplete: "off"
   });
 }
-function Color({ title: title2 = t("Color") }) {
-  const { focusIdx: focusIdx2 } = useFocusIdx();
-  return /* @__PURE__ */ React__default.createElement(ColorPickerField, {
-    label: title2,
-    name: `${focusIdx2}.attributes.color`
-  });
+function getContextMergeTags(mergeTags2, context, idx) {
+  const loop = (currentIdx, combineMergeTags) => {
+    var _a, _b;
+    const parentBlockData = lodash.exports.get(context, currentIdx);
+    if (!parentBlockData)
+      return combineMergeTags;
+    const parentBlock = BlockManager.getBlockByType(parentBlockData.type);
+    if (parentBlock && parentBlock.render) {
+      const dataSource = (_b = (_a = parentBlockData.data) == null ? void 0 : _a.value) == null ? void 0 : _b.dataSource;
+      if (!dataSource)
+        return combineMergeTags;
+      Object.keys(dataSource).forEach((key) => {
+        let formatKey = dataSource[key];
+        const loopFormatKey = (currentLoopKeyIdx) => {
+          const currentParentIdx = getParentIdx(currentLoopKeyIdx);
+          if (currentParentIdx) {
+            const currentBlockData = lodash.exports.get(context, currentParentIdx);
+            if (!currentBlockData)
+              return formatKey;
+            currentBlockData.data.value.dataSource && Object.keys(currentBlockData.data.value.dataSource).forEach((item2) => {
+              formatKey = formatKey.replace(item2, currentBlockData.data.value.dataSource[item2].replace(/{{([^}}]+)}}/g, "$1"));
+            });
+            loopFormatKey(currentParentIdx);
+          }
+        };
+        loopFormatKey(currentIdx);
+        const dataSourcePath = formatKey.replace(/{{([^}}]+)}}/g, "$1");
+        combineMergeTags = __spreadValues({
+          [key]: lodash.exports.get(combineMergeTags, dataSourcePath)
+        }, combineMergeTags);
+      });
+    }
+    const parentIdx = getParentIdx(currentIdx);
+    if (!parentIdx)
+      return combineMergeTags;
+    return loop(parentIdx, combineMergeTags);
+  };
+  return loop(idx, lodash.exports.cloneDeep(mergeTags2));
 }
-const options$6 = [
+const MergeTags$1 = React__default.memo((props) => {
+  const [expandedKeys, setExpandedKeys] = useState([]);
+  const { focusIdx: focusIdx2 } = useFocusIdx();
+  const {
+    mergeTags: mergeTags2 = {},
+    mergeTagGenerate,
+    renderMergeTagContent
+  } = useEditorProps();
+  const { values: values2 } = useBlock();
+  const contextMergeTags = useMemo(() => getContextMergeTags(mergeTags2, values2, focusIdx2), [mergeTags2, values2, focusIdx2]);
+  const treeOptions = useMemo(() => {
+    const treeData = [];
+    const deep = (key, title2, parent2, mapData = []) => {
+      const currentMapData = {
+        key,
+        value: key,
+        title: title2,
+        children: []
+      };
+      mapData.push(currentMapData);
+      const current = parent2[title2];
+      if (current && typeof current === "object") {
+        Object.keys(current).map((childKey) => deep(key + "." + childKey, childKey, current, currentMapData.children));
+      }
+    };
+    Object.keys(contextMergeTags).map((key) => deep(key, key, contextMergeTags, treeData));
+    return treeData;
+  }, [contextMergeTags]);
+  const onSelect = useCallback((key) => {
+    const value = lodash.exports.get(contextMergeTags, key);
+    if (lodash.exports.isObject(value)) {
+      setExpandedKeys((keys2) => {
+        if (keys2.includes(key)) {
+          return keys2.filter((k) => k !== key);
+        } else {
+          return [...keys2, key];
+        }
+      });
+      return;
+    }
+    return props.onChange(mergeTagGenerate(key));
+  }, [contextMergeTags, props, mergeTagGenerate]);
+  const mergeTagContent = useMemo(() => renderMergeTagContent ? renderMergeTagContent({
+    onChange: props.onChange,
+    isSelect: Boolean(props.isSelect),
+    value: props.value
+  }) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null), [renderMergeTagContent, props.onChange, props.isSelect, props.value]);
+  if (renderMergeTagContent) {
+    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, mergeTagContent);
+  }
+  return /* @__PURE__ */ React__default.createElement("div", {
+    style: { color: "#333" }
+  }, props.isSelect ? /* @__PURE__ */ React__default.createElement(TreeSelect$1, {
+    value: props.value,
+    size: "small",
+    dropdownMenuStyle: { maxHeight: 400, overflow: "auto" },
+    placeholder: t("Please select"),
+    treeData: treeOptions,
+    onChange: (val) => onSelect(val)
+  }) : /* @__PURE__ */ React__default.createElement(Tree$1, {
+    expandedKeys,
+    onExpand: setExpandedKeys,
+    selectedKeys: [],
+    treeData: treeOptions,
+    onSelect: (vals) => onSelect(vals[0]),
+    style: {
+      maxHeight: 400,
+      overflow: "auto"
+    }
+  }));
+});
+const borderStyleOptions = [
   {
-    value: "left",
+    value: "dashed",
     get label() {
-      return t("left");
+      return t("Dashed");
     }
   },
   {
-    value: "center",
+    value: "dotted",
     get label() {
-      return t("center");
+      return t("Dotted");
     }
   },
   {
-    value: "right",
+    value: "solid",
     get label() {
-      return t("right");
+      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 Align({ inline }) {
-  const { focusIdx: focusIdx2 } = useFocusIdx();
-  return /* @__PURE__ */ React__default.createElement(RadioGroupField, {
-    label: t("Align"),
-    name: `${focusIdx2}.attributes.align`,
-    options: options$6
-  });
-}
-function LineHeight({ name: name2 }) {
+function BorderStyle() {
   const { focusIdx: focusIdx2 } = useFocusIdx();
-  return /* @__PURE__ */ React__default.createElement(InputWithUnitField, {
-    label: t("Line height"),
-    unitOptions: "percent",
-    name: name2 || `${focusIdx2}.attributes.line-height`
-  });
+  return useMemo(() => {
+    return /* @__PURE__ */ React__default.createElement(SelectField, {
+      label: t("Style"),
+      name: `${focusIdx2}.attributes.border-style`,
+      options: borderStyleOptions
+    });
+  }, [focusIdx2]);
 }
-function LetterSpacing({ name: name2 }) {
+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(InputWithUnitField, {
-    label: t("Letter spacing"),
-    name: name2 || `${focusIdx2}.attributes.letter-spacing`
+  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);
@@ -34690,574 +35079,185 @@ const HtmlEditor = (props) => {
         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 Link() {
-  const { focusIdx: focusIdx2 } = useFocusIdx();
-  return useMemo(() => {
-    return /* @__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: /* @__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: t("Target"),
-      name: `${focusIdx2}.attributes.target`,
-      options: [
-        {
-          value: "",
-          label: t("_self")
-        },
-        {
-          value: "_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: 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)))));
-}
-const options$5 = [
-  {
-    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$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: 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]);
-}
-const options$4 = [
-  {
-    value: "initial",
-    get label() {
-      return t("None");
-    }
-  },
-  {
-    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();
-  return useMemo(() => {
-    return /* @__PURE__ */ React__default.createElement(SelectField, {
-      label: t("Text transform"),
-      name: name2 || `${focusIdx2}.attributes.text-transform`,
-      options: options$4
-    });
-  }, [focusIdx2, name2]);
-}
-const options$3 = [
-  {
-    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$3,
-      inline: true
-    }));
-  }, [focusIdx2]);
-}
-function Margin() {
-  const { focusIdx: focusIdx2 } = useFocusIdx();
-  return useMemo(() => {
-    return /* @__PURE__ */ React__default.createElement(Stack$4, {
-      vertical: true,
-      spacing: "extraTight"
-    }, /* @__PURE__ */ React__default.createElement(TextStyle, {
-      size: "large"
-    }, 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: 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: t("Bottom"),
-      quickchange: true,
-      name: `${focusIdx2}.attributes.marginBottom`,
-      inline: true
-    }))), /* @__PURE__ */ React__default.createElement(Stack$4, {
-      wrap: false
-    }, /* @__PURE__ */ React__default.createElement(Stack$4.Item, {
-      fill: true
-    }, /* @__PURE__ */ React__default.createElement(TextField, {
-      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: t("Right"),
-      quickchange: true,
-      name: `${focusIdx2}.attributes.marginRight`,
-      inline: true
-    }))));
-  }, [focusIdx2]);
-}
-function BorderColor() {
-  const { focusIdx: focusIdx2 } = useFocusIdx();
-  return useMemo(() => {
-    return /* @__PURE__ */ React__default.createElement(ColorPickerField, {
-      label: t("Color"),
-      name: `${focusIdx2}.attributes.border-color`
-    });
-  }, [focusIdx2]);
-}
-function getContextMergeTags(mergeTags2, context, idx) {
-  const loop = (currentIdx, combineMergeTags) => {
-    var _a, _b;
-    const parentBlockData = lodash.exports.get(context, currentIdx);
-    if (!parentBlockData)
-      return combineMergeTags;
-    const parentBlock = BlockManager.getBlockByType(parentBlockData.type);
-    if (parentBlock && parentBlock.render) {
-      const dataSource = (_b = (_a = parentBlockData.data) == null ? void 0 : _a.value) == null ? void 0 : _b.dataSource;
-      if (!dataSource)
-        return combineMergeTags;
-      Object.keys(dataSource).forEach((key) => {
-        let formatKey = dataSource[key];
-        const loopFormatKey = (currentLoopKeyIdx) => {
-          const currentParentIdx = getParentIdx(currentLoopKeyIdx);
-          if (currentParentIdx) {
-            const currentBlockData = lodash.exports.get(context, currentParentIdx);
-            if (!currentBlockData)
-              return formatKey;
-            currentBlockData.data.value.dataSource && Object.keys(currentBlockData.data.value.dataSource).forEach((item2) => {
-              formatKey = formatKey.replace(item2, currentBlockData.data.value.dataSource[item2].replace(/{{([^}}]+)}}/g, "$1"));
-            });
-            loopFormatKey(currentParentIdx);
-          }
-        };
-        loopFormatKey(currentIdx);
-        const dataSourcePath = formatKey.replace(/{{([^}}]+)}}/g, "$1");
-        combineMergeTags = __spreadValues({
-          [key]: lodash.exports.get(combineMergeTags, dataSourcePath)
-        }, combineMergeTags);
-      });
-    }
-    const parentIdx = getParentIdx(currentIdx);
-    if (!parentIdx)
-      return combineMergeTags;
-    return loop(parentIdx, combineMergeTags);
-  };
-  return loop(idx, lodash.exports.cloneDeep(mergeTags2));
-}
-const MergeTags$1 = React__default.memo((props) => {
-  const [expandedKeys, setExpandedKeys] = useState([]);
-  const { focusIdx: focusIdx2 } = useFocusIdx();
-  const {
-    mergeTags: mergeTags2 = {},
-    mergeTagGenerate,
-    renderMergeTagContent
-  } = useEditorProps();
-  const { values: values2 } = useBlock();
-  const contextMergeTags = useMemo(() => getContextMergeTags(mergeTags2, values2, focusIdx2), [mergeTags2, values2, focusIdx2]);
-  const treeOptions = useMemo(() => {
-    const treeData = [];
-    const deep = (key, title2, parent2, mapData = []) => {
-      const currentMapData = {
-        key,
-        value: key,
-        title: title2,
-        children: []
-      };
-      mapData.push(currentMapData);
-      const current = parent2[title2];
-      if (current && typeof current === "object") {
-        Object.keys(current).map((childKey) => deep(key + "." + childKey, childKey, current, currentMapData.children));
-      }
-    };
-    Object.keys(contextMergeTags).map((key) => deep(key, key, contextMergeTags, treeData));
-    return treeData;
-  }, [contextMergeTags]);
-  const onSelect = useCallback((key) => {
-    const value = lodash.exports.get(contextMergeTags, key);
-    if (lodash.exports.isObject(value)) {
-      setExpandedKeys((keys2) => {
-        if (keys2.includes(key)) {
-          return keys2.filter((k) => k !== key);
-        } else {
-          return [...keys2, key];
-        }
-      });
-      return;
-    }
-    return props.onChange(mergeTagGenerate(key));
-  }, [contextMergeTags, props, mergeTagGenerate]);
-  const mergeTagContent = useMemo(() => renderMergeTagContent ? renderMergeTagContent({
-    onChange: props.onChange,
-    isSelect: Boolean(props.isSelect),
-    value: props.value
-  }) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null), [renderMergeTagContent, props.onChange, props.isSelect, props.value]);
-  if (renderMergeTagContent) {
-    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, mergeTagContent);
-  }
-  return /* @__PURE__ */ React__default.createElement("div", {
-    style: { color: "#333" }
-  }, props.isSelect ? /* @__PURE__ */ React__default.createElement(TreeSelect$1, {
-    value: props.value,
-    size: "small",
-    dropdownMenuStyle: { maxHeight: 400, overflow: "auto" },
-    placeholder: t("Please select"),
-    treeData: treeOptions,
-    onChange: (val) => onSelect(val)
-  }) : /* @__PURE__ */ React__default.createElement(Tree$1, {
-    expandedKeys,
-    onExpand: setExpandedKeys,
-    selectedKeys: [],
-    treeData: treeOptions,
-    onSelect: (vals) => onSelect(vals[0]),
-    style: {
-      maxHeight: 400,
-      overflow: "auto"
-    }
+      }
+    }, 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
   }));
-});
-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]);
-}
-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() {
+function Image$1() {
   const { focusIdx: focusIdx2 } = useFocusIdx();
-  return useMemo(() => {
-    return /* @__PURE__ */ React__default.createElement(TextField, {
-      label: t("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();
@@ -36307,6 +36307,11 @@ 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