easy-email-extensions 3.1.6 → 3.1.10

package/lib/index2.js

@@ -55,7 +55,7 @@ var __async = (__this, __arguments, generator) => {
 };
 import * as React from "react";
 import React__default, { Children, isValidElement, cloneElement, createContext, useContext, Component, useMemo, memo, forwardRef, useEffect, useRef, useLayoutEffect, useState, createRef, useImperativeHandle, PureComponent, useCallback, useReducer, Fragment, createElement, Suspense } from "react";
-import { IconFont, Stack as Stack$6, TextStyle, getBlockNodeByIdx, useBlock, getEditNode, getEditContent, useEditorProps, useFocusIdx, useEditorContext, getShadowRoot, FIXED_CONTAINER_ID, scrollBlockEleIntoView, useHoverIdx, useDataTransfer, getBlockNodeByChildEle, getDirectionPosition, DATA_ATTRIBUTE_DROP_CONTAINER, BlockAvatarWrapper, getEditorRoot, useActiveTab, ActiveTabKeys } from "easy-email-editor";
+import { IconFont, useEditorProps, Stack as Stack$6, getBlockNodeByIdx, useBlock, getEditNode, getEditContent, useFocusIdx, TextStyle, useEditorContext, getShadowRoot, FIXED_CONTAINER_ID, scrollBlockEleIntoView, useHoverIdx, useDataTransfer, getBlockNodeByChildEle, getDirectionPosition, DATA_ATTRIBUTE_DROP_CONTAINER, BlockAvatarWrapper, getEditorRoot, useActiveTab, ActiveTabKeys } from "easy-email-editor";
 import { BasicType, ImageManager, BlockManager, getParentIdx, createBlockDataByType, getParentByIdx, getValueByIdx, getIndexByIdx, getSiblingIdx, getNodeIdxFromClassName, getNodeIdxClassName, getPageIdx, getChildIdx, MjmlToJson, JsonToMjml, getNodeTypeFromClassName } from "easy-email-core";
 import ReactDOM, { findDOMNode, createPortal } from "react-dom";
 import { useField, Field, useForm as useForm$1, Form as Form$3, version as version$2, useFormState } from "react-final-form";
@@ -31309,6 +31309,7 @@ function getImg$1(name) {
   return ImageManager.get(name);
 }
 function ImageUploader(props) {
+  const { mergeTags: mergeTags2 } = useEditorProps();
   const [isUploading, setIsUploading] = useState(false);
   const [preview, setPreview] = useState(false);
   const uploadHandlerRef = useRef(props.uploadHandler);
@@ -31408,12 +31409,25 @@ function ImageUploader(props) {
     className: styles$4.wrap
   }, /* @__PURE__ */ React__default.createElement("div", {
     className: styles$4["container"]
-  }, content, /* @__PURE__ */ React__default.createElement(Input$5, {
+  }, content, /* @__PURE__ */ React__default.createElement(Grid.Row, {
+    style: { width: "100%" }
+  }, mergeTags2 && /* @__PURE__ */ React__default.createElement(Popover$1, {
+    trigger: "click",
+    content: /* @__PURE__ */ React__default.createElement(MergeTags, {
+      value: props.value,
+      onChange
+    })
+  }, /* @__PURE__ */ React__default.createElement(Button$4, {
+    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+      iconName: "icon-merge-tags"
+    })
+  })), /* @__PURE__ */ React__default.createElement(Input$5, {
+    style: { flex: 1 },
     onPaste,
     value: props.value,
     onChange,
     disabled: isUploading
-  })), /* @__PURE__ */ React__default.createElement(Modal$1, {
+  }))), /* @__PURE__ */ React__default.createElement(Modal$1, {
     visible: preview,
     footer: null,
     onCancel: () => setPreview(false)
@@ -38532,12 +38546,13 @@ function enhancer(Component2, changeAdapter) {
         style: { textAlign: wrapperStyle.textAlign }
       }, /* @__PURE__ */ React__default.createElement("label", {
         className: labelHidden2 ? styles$3["label-hidden"] : void 0,
+        style: { width: "100%", display: "flex" },
         htmlFor: id
-      }, /* @__PURE__ */ React__default.createElement(Space$1, null, required && /* @__PURE__ */ React__default.createElement("span", {
+      }, required && /* @__PURE__ */ React__default.createElement("span", {
         style: { color: "#ff4d4f", marginRight: 4 }
-      }, "*", " "), /* @__PURE__ */ React__default.createElement(TextStyle, {
-        size: size === "small" ? "smallest" : "small"
-      }, label)))), /* @__PURE__ */ React__default.createElement(Grid.Col, {
+      }, "*", " "), /* @__PURE__ */ React__default.createElement("div", {
+        style: { flex: 1 }
+      }, " ", label))), /* @__PURE__ */ React__default.createElement(Grid.Col, {
         style: {
           textAlign: "left"
         },
@@ -39233,7 +39248,11 @@ const MergeTags = React__default.memo((props) => {
   const onSelect = useCallback((value) => {
     return props.onChange(value);
   }, [props]);
-  const mergeTagContent = useMemo(() => renderMergeTagContent({ onChange: props.onChange }), [renderMergeTagContent, props.onChange]);
+  const mergeTagContent = useMemo(() => renderMergeTagContent ? renderMergeTagContent({
+    onChange: props.onChange,
+    isSelect: props.isSelect,
+    value: props.value
+  }) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null), [renderMergeTagContent, props.onChange, props.isSelect, props.value]);
   if (renderMergeTagContent) {
     return mergeTagContent;
   }
@@ -40151,8 +40170,289 @@ function Group() {
     span: 11
   })))));
 }
+const options$5 = [
+  {
+    value: "left",
+    label: "Left"
+  },
+  {
+    value: "center",
+    label: "Center"
+  },
+  {
+    value: "right",
+    label: "Right"
+  }
+];
+function TextAlign() {
+  const { focusIdx: focusIdx2 } = useFocusIdx();
+  return useMemo(() => {
+    return /* @__PURE__ */ React__default.createElement(Stack$6, null, /* @__PURE__ */ React__default.createElement(RadioGroupField, {
+      label: "Text align",
+      name: `${focusIdx2}.attributes.text-align`,
+      options: options$5
+    }));
+  }, [focusIdx2]);
+}
+function Decoration() {
+  const { focusIdx: focusIdx2 } = useFocusIdx();
+  return useMemo(() => {
+    return /* @__PURE__ */ React__default.createElement(Stack$6, {
+      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,
+      alignment: "center"
+    }), /* @__PURE__ */ React__default.createElement(NumberField, {
+      label: "Opacity",
+      max: 1,
+      min: 0,
+      step: 0.1,
+      name: `${focusIdx2}.attributes.opacity`,
+      inline: true,
+      alignment: "center"
+    }));
+  }, [focusIdx2]);
+}
+const options$4 = [
+  {
+    value: "",
+    label: "none"
+  },
+  {
+    value: "uppercase",
+    label: "uppercase"
+  },
+  {
+    value: "lowercase",
+    label: "lowercase"
+  },
+  {
+    value: "capitalize",
+    label: "capitalize"
+  }
+];
+function TextTransform() {
+  const { focusIdx: focusIdx2 } = useFocusIdx();
+  return useMemo(() => {
+    return /* @__PURE__ */ React__default.createElement(SelectField, {
+      label: "Text transform",
+      name: `${focusIdx2}.attributes.text-transform`,
+      options: options$4
+    });
+  }, [focusIdx2]);
+}
+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$6, null, /* @__PURE__ */ React__default.createElement(RadioGroupField, {
+      label: "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$6, {
+      vertical: true,
+      spacing: "extraTight"
+    }, /* @__PURE__ */ React__default.createElement(TextStyle, {
+      size: "large"
+    }, "Margin"), /* @__PURE__ */ React__default.createElement(Stack$6, {
+      wrap: false
+    }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
+      fill: true
+    }, /* @__PURE__ */ React__default.createElement(TextField, {
+      label: "Top",
+      quickchange: true,
+      name: `${focusIdx2}.attributes.marginTop`,
+      inline: true
+    })), /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
+      fill: true
+    }, /* @__PURE__ */ React__default.createElement(TextField, {
+      label: "Bottom",
+      quickchange: true,
+      name: `${focusIdx2}.attributes.marginBottom`,
+      inline: true
+    }))), /* @__PURE__ */ React__default.createElement(Stack$6, {
+      wrap: false
+    }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
+      fill: true
+    }, /* @__PURE__ */ React__default.createElement(TextField, {
+      label: "Left",
+      quickchange: true,
+      name: `${focusIdx2}.attributes.marginLeft`,
+      inline: true
+    })), /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
+      fill: true
+    }, /* @__PURE__ */ React__default.createElement(TextField, {
+      label: "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: "Color",
+      name: `${focusIdx2}.attributes.border-color`
+    });
+  }, [focusIdx2]);
+}
+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 }) {
+  const { values: values2 } = useBlock();
+  const getVal = useCallback((index2) => {
+    return () => {
+      var _a;
+      return ((_a = lodash.exports.get(values2, name)) == null ? void 0 : _a.split(" ")[index2]) || "";
+    };
+  }, [name, values2]);
+  const setVal = useCallback((index2) => {
+    return (newVal) => {
+      if (newVal === "") {
+        newVal = "0px";
+      }
+      const vals = [
+        getVal(0)(),
+        getVal(1)(),
+        getVal(2)(),
+        getVal(3)()
+      ];
+      vals[index2] = newVal;
+      return vals.join(" ");
+    };
+  }, [getVal]);
+  return useMemo(() => {
+    return /* @__PURE__ */ React__default.createElement(Stack$6, {
+      vertical: true,
+      spacing: "extraTight"
+    }, /* @__PURE__ */ React__default.createElement(TextStyle, {
+      variation: "strong"
+    }, "Padding"), /* @__PURE__ */ React__default.createElement(Stack$6, {
+      wrap: false
+    }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
+      fill: true
+    }, /* @__PURE__ */ React__default.createElement(TextField, {
+      label: /* @__PURE__ */ React__default.createElement("span", null, "Top"),
+      quickchange: true,
+      name,
+      valueAdapter: getVal(0),
+      onChangeAdapter: setVal(0)
+    })), /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
+      fill: true
+    }, /* @__PURE__ */ React__default.createElement(TextField, {
+      label: "Bottom",
+      quickchange: true,
+      name,
+      valueAdapter: getVal(2),
+      onChangeAdapter: setVal(2)
+    }))), /* @__PURE__ */ React__default.createElement(Stack$6, {
+      wrap: false
+    }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
+      fill: true
+    }, /* @__PURE__ */ React__default.createElement(TextField, {
+      label: /* @__PURE__ */ React__default.createElement("span", null, "Left"),
+      quickchange: true,
+      name,
+      valueAdapter: getVal(3),
+      onChangeAdapter: setVal(3)
+    })), /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
+      fill: true
+    }, /* @__PURE__ */ React__default.createElement(TextField, {
+      label: /* @__PURE__ */ React__default.createElement("span", null, "Right\xA0"),
+      quickchange: true,
+      name,
+      valueAdapter: getVal(1),
+      onChangeAdapter: setVal(1)
+    }))));
+  }, [getVal, name, setVal]);
+}
+function BorderWidth() {
+  const { focusIdx: focusIdx2 } = useFocusIdx();
+  return useMemo(() => {
+    return /* @__PURE__ */ React__default.createElement(TextField, {
+      label: "Width",
+      quickchange: true,
+      name: `${focusIdx2}.attributes.border-width`
+    });
+  }, [focusIdx2]);
+}
 function Button() {
   const { focusIdx: focusIdx2 } = useFocusIdx();
+  const { input } = useField(`${focusIdx2}.data.value.content`, {
+    parse: (v) => v
+  });
+  const { mergeTags: mergeTags2 } = useEditorProps();
   return /* @__PURE__ */ React__default.createElement(AttributesPanelWrapper, null, /* @__PURE__ */ React__default.createElement(Collapse$1, {
     defaultActiveKey: ["-1", "0", "1", "2", "3"]
   }, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
@@ -40161,7 +40461,18 @@ function Button() {
   }, /* @__PURE__ */ React__default.createElement(Space$1, {
     direction: "vertical"
   }, /* @__PURE__ */ React__default.createElement(TextField, {
-    label: "Content",
+    label: /* @__PURE__ */ React__default.createElement(Space$1, null, /* @__PURE__ */ React__default.createElement("span", null, "Content"), mergeTags2 && /* @__PURE__ */ React__default.createElement(Popover$1, {
+      trigger: "click",
+      content: /* @__PURE__ */ React__default.createElement(MergeTags, {
+        value: input.value,
+        onChange: input.onChange
+      })
+    }, /* @__PURE__ */ React__default.createElement(Button$4, {
+      type: "text",
+      icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+        iconName: "icon-merge-tags"
+      })
+    }))),
     name: `${focusIdx2}.data.value.content`
   }), /* @__PURE__ */ React__default.createElement(Link, null))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "0",
@@ -40222,69 +40533,6 @@ function Button() {
     header: "Border"
   }, /* @__PURE__ */ React__default.createElement(Border, null))));
 }
-function BorderWidth() {
-  const { focusIdx: focusIdx2 } = useFocusIdx();
-  return useMemo(() => {
-    return /* @__PURE__ */ React__default.createElement(TextField, {
-      label: "Width",
-      quickchange: true,
-      name: `${focusIdx2}.attributes.border-width`
-    });
-  }, [focusIdx2]);
-}
-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 BorderColor() {
-  const { focusIdx: focusIdx2 } = useFocusIdx();
-  return useMemo(() => {
-    return /* @__PURE__ */ React__default.createElement(ColorPickerField, {
-      label: "Color",
-      name: `${focusIdx2}.attributes.border-color`
-    });
-  }, [focusIdx2]);
-}
 function Divider() {
   return /* @__PURE__ */ React__default.createElement(AttributesPanelWrapper, null, /* @__PURE__ */ React__default.createElement(Collapse$1, {
     defaultActiveKey: ["-1", "0", "1", "2", "3"]
@@ -40463,58 +40711,6 @@ function Accordion() {
     name: `${focusIdx2}.attributes.border`
   })))));
 }
-const options$5 = [
-  {
-    value: "left",
-    label: "Left"
-  },
-  {
-    value: "center",
-    label: "Center"
-  },
-  {
-    value: "right",
-    label: "Right"
-  }
-];
-function TextAlign() {
-  const { focusIdx: focusIdx2 } = useFocusIdx();
-  return useMemo(() => {
-    return /* @__PURE__ */ React__default.createElement(Stack$6, null, /* @__PURE__ */ React__default.createElement(RadioGroupField, {
-      label: "Text align",
-      name: `${focusIdx2}.attributes.text-align`,
-      options: options$5
-    }));
-  }, [focusIdx2]);
-}
-const options$4 = [
-  {
-    value: "",
-    label: "none"
-  },
-  {
-    value: "uppercase",
-    label: "uppercase"
-  },
-  {
-    value: "lowercase",
-    label: "lowercase"
-  },
-  {
-    value: "capitalize",
-    label: "capitalize"
-  }
-];
-function TextTransform() {
-  const { focusIdx: focusIdx2 } = useFocusIdx();
-  return useMemo(() => {
-    return /* @__PURE__ */ React__default.createElement(SelectField, {
-      label: "Text transform",
-      name: `${focusIdx2}.attributes.text-transform`,
-      options: options$4
-    });
-  }, [focusIdx2]);
-}
 function AccordionElement() {
   const { focusIdx: focusIdx2 } = useFocusIdx();
   return /* @__PURE__ */ React__default.createElement(AttributesPanelWrapper, null, /* @__PURE__ */ React__default.createElement(Collapse$1, {
@@ -40634,7 +40830,7 @@ function AccordionText() {
     attributeName: "padding"
   })))));
 }
-const options$3 = [
+const options$2 = [
   {
     value: "hidden",
     label: "hidden"
@@ -40663,7 +40859,7 @@ function Carousel() {
   }), /* @__PURE__ */ React__default.createElement(RadioGroupField, {
     label: "Thumbnails",
     name: `${focusIdx2}.attributes.thumbnails`,
-    options: options$3,
+    options: options$2,
     inline: true
   }), /* @__PURE__ */ React__default.createElement(Align, {
     inline: true
@@ -40779,7 +40975,7 @@ function CarouselImage({
     name: `${focusIdx2}.data.value.image.[${index2}].title`
   }));
 }
-const options$2 = [
+const options$1 = [
   {
     value: "fluid-height",
     label: "Fluid height"
@@ -40802,7 +40998,7 @@ function Hero() {
   }, /* @__PURE__ */ React__default.createElement(RadioGroupField, {
     label: "Mode",
     name: `${focusIdx2}.attributes.mode`,
-    options: options$2
+    options: options$1
   }), /* @__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, {
@@ -40845,74 +41041,6 @@ function Hero() {
     span: 11
   }, /* @__PURE__ */ React__default.createElement(BackgroundColor, null)))))));
 }
-function NavbarLinkPadding({ name }) {
-  const { values: values2 } = useBlock();
-  const getVal = useCallback((index2) => {
-    return () => {
-      var _a;
-      return ((_a = lodash.exports.get(values2, name)) == null ? void 0 : _a.split(" ")[index2]) || "";
-    };
-  }, [name, values2]);
-  const setVal = useCallback((index2) => {
-    return (newVal) => {
-      if (newVal === "") {
-        newVal = "0px";
-      }
-      const vals = [
-        getVal(0)(),
-        getVal(1)(),
-        getVal(2)(),
-        getVal(3)()
-      ];
-      vals[index2] = newVal;
-      return vals.join(" ");
-    };
-  }, [getVal]);
-  return useMemo(() => {
-    return /* @__PURE__ */ React__default.createElement(Stack$6, {
-      vertical: true,
-      spacing: "extraTight"
-    }, /* @__PURE__ */ React__default.createElement(TextStyle, {
-      variation: "strong"
-    }, "Padding"), /* @__PURE__ */ React__default.createElement(Stack$6, {
-      wrap: false
-    }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
-      fill: true
-    }, /* @__PURE__ */ React__default.createElement(TextField, {
-      label: /* @__PURE__ */ React__default.createElement("span", null, "Top"),
-      quickchange: true,
-      name,
-      valueAdapter: getVal(0),
-      onChangeAdapter: setVal(0)
-    })), /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
-      fill: true
-    }, /* @__PURE__ */ React__default.createElement(TextField, {
-      label: "Bottom",
-      quickchange: true,
-      name,
-      valueAdapter: getVal(2),
-      onChangeAdapter: setVal(2)
-    }))), /* @__PURE__ */ React__default.createElement(Stack$6, {
-      wrap: false
-    }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
-      fill: true
-    }, /* @__PURE__ */ React__default.createElement(TextField, {
-      label: /* @__PURE__ */ React__default.createElement("span", null, "Left"),
-      quickchange: true,
-      name,
-      valueAdapter: getVal(3),
-      onChangeAdapter: setVal(3)
-    })), /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
-      fill: true
-    }, /* @__PURE__ */ React__default.createElement(TextField, {
-      label: /* @__PURE__ */ React__default.createElement("span", null, "Right\xA0"),
-      quickchange: true,
-      name,
-      valueAdapter: getVal(1),
-      onChangeAdapter: setVal(1)
-    }))));
-  }, [getVal, name, setVal]);
-}
 function Navbar() {
   const { focusIdx: focusIdx2 } = useFocusIdx();
   return /* @__PURE__ */ React__default.createElement(AttributesPanelWrapper, {
@@ -40997,7 +41125,7 @@ function NavbarLink({
     name: `${focusIdx2}.data.value.links.[${index2}].padding`
   }));
 }
-const options$1 = [
+const options = [
   {
     value: "vertical",
     label: "vertical"
@@ -41023,7 +41151,7 @@ function Social() {
   }, /* @__PURE__ */ React__default.createElement(RadioGroupField, {
     label: "Mode",
     name: `${focusIdx2}.attributes.mode`,
-    options: options$1
+    options
   })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
     offset: 1,
     span: 11
@@ -41232,100 +41360,6 @@ function AttributePanel() {
               }
               `), shadowRoot));
 }
-function Decoration() {
-  const { focusIdx: focusIdx2 } = useFocusIdx();
-  return useMemo(() => {
-    return /* @__PURE__ */ React__default.createElement(Stack$6, {
-      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,
-      alignment: "center"
-    }), /* @__PURE__ */ React__default.createElement(NumberField, {
-      label: "Opacity",
-      max: 1,
-      min: 0,
-      step: 0.1,
-      name: `${focusIdx2}.attributes.opacity`,
-      inline: true,
-      alignment: "center"
-    }));
-  }, [focusIdx2]);
-}
-const options = [
-  {
-    value: "ltr",
-    label: "ltr"
-  },
-  {
-    value: "rtl",
-    label: "rtl"
-  }
-];
-function Direction() {
-  const { focusIdx: focusIdx2 } = useFocusIdx();
-  return useMemo(() => {
-    return /* @__PURE__ */ React__default.createElement(Stack$6, null, /* @__PURE__ */ React__default.createElement(RadioGroupField, {
-      label: "Direction",
-      name: `${focusIdx2}.attributes.direction`,
-      options,
-      inline: true
-    }));
-  }, [focusIdx2]);
-}
-function Margin() {
-  const { focusIdx: focusIdx2 } = useFocusIdx();
-  return useMemo(() => {
-    return /* @__PURE__ */ React__default.createElement(Stack$6, {
-      vertical: true,
-      spacing: "extraTight"
-    }, /* @__PURE__ */ React__default.createElement(TextStyle, {
-      size: "large"
-    }, "Margin"), /* @__PURE__ */ React__default.createElement(Stack$6, {
-      wrap: false
-    }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
-      fill: true
-    }, /* @__PURE__ */ React__default.createElement(TextField, {
-      label: "Top",
-      quickchange: true,
-      name: `${focusIdx2}.attributes.marginTop`,
-      inline: true
-    })), /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
-      fill: true
-    }, /* @__PURE__ */ React__default.createElement(TextField, {
-      label: "Bottom",
-      quickchange: true,
-      name: `${focusIdx2}.attributes.marginBottom`,
-      inline: true
-    }))), /* @__PURE__ */ React__default.createElement(Stack$6, {
-      wrap: false
-    }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
-      fill: true
-    }, /* @__PURE__ */ React__default.createElement(TextField, {
-      label: "Left",
-      quickchange: true,
-      name: `${focusIdx2}.attributes.marginLeft`,
-      inline: true
-    })), /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
-      fill: true
-    }, /* @__PURE__ */ React__default.createElement(TextField, {
-      label: "Right",
-      quickchange: true,
-      name: `${focusIdx2}.attributes.marginRight`,
-      inline: true
-    }))));
-  }, [focusIdx2]);
-}
 function Tools(props) {
   const { container: container2 } = props;
   const { mergeTags: mergeTags2 } = useEditorProps();