easy-email-pro-theme 1.23.1 → 1.24.0

package/lib/index.js

@@ -54,7 +54,7 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-import { classnames, useEditorState, useEditorProps, useRefState, isDOMElement, useMergeTagsData, useEventCallback, useSelectedNode, validation, CustomEvent, ActiveTabKeys, EmailEditorProvider, EmailEditor, useForceUpdate, IframeComponent, toggleFormat, TextFormat, HtmlStringToReactNodes, isFormatActive } from "easy-email-pro-editor";
+import { classnames, useEditorState, useEditorProps, useRefState, isDOMElement, useMergeTagsData, useEventCallback, useSelectedNode, validation, CustomEvent, ActiveTabKeys, EmailEditorProvider, EmailEditor, useForceUpdate, IframeComponent, toggleFormat, TextFormat, isFormatActive, HtmlStringToReactNodes } from "easy-email-pro-editor";
 import { useSlate, ReactEditor, useSlateStatic } from "slate-react";
 import * as React$2 from "react";
 import React__default, { useRef, useState, useEffect, useCallback as useCallback$1, useMemo as useMemo$1, createContext, useContext, useLayoutEffect, useReducer, Suspense, memo, cloneElement, forwardRef, Component } from "react";
@@ -62,7 +62,7 @@ import { NodeUtils, BlockManager, ElementType, EditorCore, t, ElementCategory, c
 import { Editor, Node as Node$1, Transforms, Path, createEditor, Range, Text as Text$3 } from "slate";
 import ReactDOM, { createPortal, unstable_batchedUpdates } from "react-dom";
 import { cloneDeep, get, isEqual as isEqual$3, set, omit as omit$2, merge as merge$1, debounce as debounce$2, isUndefined as isUndefined$1, isString as isString$1, isNumber as isNumber$1, uniqueId, camelCase, upperFirst, isFunction as isFunction$4, flatMap } from "lodash";
-import { Form, Input, Modal, Collapse as Collapse$1, Space, Empty, Card, Grid, Button as Button$2, Radio, Message, Popover, Spin, Select as Select$1, Drawer, Divider as Divider$2, Switch, Tabs, Slider, Typography as Typography$1, InputNumber, Tooltip, Tag, Link as Link$2, List, Alert, Popconfirm, PageHeader, Skeleton, Layout as Layout$2 } from "@arco-design/web-react";
+import { Form, Input, Modal, Collapse as Collapse$1, Space, Empty, Card, Grid, Button as Button$2, Radio, Message, Popover, Spin, Select as Select$1, Drawer, Divider as Divider$2, Switch, Tabs, Slider, Typography as Typography$1, InputNumber, Tooltip, Tag, Link as Link$2, List, Alert, Popconfirm, PageHeader, Layout as Layout$2, Skeleton } from "@arco-design/web-react";
 import { IconDelete, IconClose, IconPlus, IconCopy, IconDragArrow, IconLock, IconUnlock, IconQuestionCircle, IconLink, IconCloud, IconRefresh, IconEdit, IconLeft, IconUndo, IconRedo, IconMinus, IconEye, IconSubscribeAdd, IconCheckCircleFill } from "@arco-design/web-react/icon";
 import mjml from "mjml-browser";
 import { HistoryEditor } from "slate-history";
@@ -498,7 +498,12 @@ const withTheme$1 = (editor) => {
       const isVoid = NodeUtils.isVoidBlockElement(contentElementEntry[0]);
       const textElement = contentElementEntry[0];
       if (textElement.children.length === 1 && !isVoid) {
-        if (((_a = editor.selection) == null ? void 0 : _a.focus.offset) === 0) {
+        const isEmpty = Editor.string(editor, contentElementEntry[1]) === "";
+        if (isEmpty && ((_a = editor.selection) == null ? void 0 : _a.focus.offset) === 0) {
+          editor.replaceNode({
+            path: [...contentElementEntry[1], 0],
+            node: { text: "" }
+          });
           return;
         }
       }
@@ -14515,7 +14520,12 @@ function previewLoadImage(url) {
     img.setAttribute("crossOrigin", "Anonymous");
     img.src = url;
     img.onload = () => resolve(img);
-    img.onerror = () => resolve(img);
+    img.onerror = () => {
+      const img2 = new Image();
+      img2.src = url;
+      img2.onload = () => resolve(img2);
+      img2.onerror = () => resolve(img2);
+    };
   });
 }
 function bind(fn, thisArg) {
@@ -16542,10 +16552,75 @@ axios.getAdapter = adapters.getAdapter;
 axios.HttpStatusCode = HttpStatusCode$1;
 axios.default = axios;
 const axios$1 = axios;
+const blockLevelTags = [
+  "div",
+  "p",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "ol",
+  "ul",
+  "li",
+  "table",
+  "hr",
+  "dl"
+];
+const formateChildNotes = (node) => {
+  const childNodes = Array.from(node.childNodes);
+  const hasBlockElement = childNodes.some((item2) => {
+    return item2.nodeType === Node.ELEMENT_NODE && isBlockNode({ item: item2 });
+  });
+  if (!hasBlockElement) {
+    return childNodes;
+  }
+  function groupNodesByDisplay(node2) {
+    const result2 = [];
+    let currentGroup = null;
+    for (const child of node2.childNodes) {
+      let display = "inline";
+      if (child.nodeType === Node.ELEMENT_NODE && isBlockNode({ item: child })) {
+        display = "block";
+      }
+      if (!currentGroup || currentGroup.display !== display) {
+        currentGroup = { display, children: [] };
+        result2.push(currentGroup);
+      }
+      currentGroup.children.push(child);
+    }
+    return result2;
+  }
+  const result = groupNodesByDisplay(node);
+  const list = [];
+  result.forEach((item2) => {
+    if (item2.display === "inline") {
+      const div = document.createElement("div");
+      item2.children.forEach((child) => {
+        var _a;
+        if ((_a = child.textContent) == null ? void 0 : _a.trim()) {
+          div.appendChild(child);
+        }
+      });
+      if (div.childNodes.length > 0) {
+        list.push(div);
+      }
+    } else {
+      list.push(...item2.children);
+    }
+  });
+  return list;
+};
+const isBlockNode = ({ item: item2 }) => {
+  if (!(item2 instanceof Element))
+    return false;
+  return blockLevelTags.includes(item2.tagName.toLowerCase());
+};
 const HtmlNodeAdapter = (content) => {
   const div = document.createElement("div");
   div.innerHTML = content;
-  return Array.from(div.childNodes).map((node) => {
+  return formateChildNotes(div).map((node) => {
     return getItemNode(node);
   });
 };
@@ -16553,7 +16628,7 @@ const getItemNode = (node) => {
   var _a;
   if (node.nodeType === Node.TEXT_NODE) {
     return {
-      text: ((_a = node.textContent) == null ? void 0 : _a.trim().replace(/\s+/g, " ").replace(/\n/g, "")) || ""
+      text: ((_a = node.textContent) == null ? void 0 : _a.replace(/\s+/g, " ").replace(/\n/g, "")) || ""
     };
   } else if (node.nodeType === Node.ELEMENT_NODE && node instanceof Element) {
     const attrs = {};
@@ -16572,12 +16647,21 @@ const getItemNode = (node) => {
         children: [{ text: "" }]
       });
     }
+    if (blockLevelTags.includes(tagName)) {
+      return BlockManager.getBlockByType(ElementType.HTML_BLOCK_NODE).create({
+        attributes: attrs,
+        data: {
+          tagName
+        },
+        children: formateChildNotes(node).map((child) => getItemNode(child))
+      });
+    }
     return BlockManager.getBlockByType(ElementType.HTML_NODE).create({
       attributes: attrs,
       data: {
         tagName
       },
-      children: Array.from(node.childNodes).map((child) => getItemNode(child))
+      children: formateChildNotes(node).map((child) => getItemNode(child))
     });
   }
   throw new Error("Invalid node");
@@ -16644,6 +16728,7 @@ function basicElementToStandardElement(element) {
     case ElementType.SPACER:
     case ElementType.SOCIAL_ELEMENT:
     case ElementType.NAVBAR_LINK:
+    case ElementType.TABLE:
       const standardElement = __spreadValues({}, element);
       if ([ElementType.HERO, ElementType.SECTION].includes(
         element.type
@@ -16785,6 +16870,9 @@ function mjmlTransform(data) {
           case ElementType.SOCIAL_ELEMENT:
             payload.children = HtmlNodeAdapter(item2.content || "");
             break;
+          case ElementType.TABLE:
+            payload.data.code = item2.content || "";
+            break;
           default:
             if (item2.children) {
               payload.children = item2.children.map(transform);
@@ -16797,7 +16885,8 @@ function mjmlTransform(data) {
         return basicElementToStandardElement(blockData);
     }
   };
-  return transform(data);
+  const result = transform(data);
+  return result;
 }
 const getMergeTagsByType = (mergetags, type) => {
   const list = [];
@@ -20142,14 +20231,14 @@ const Text$2 = ({ nodePath }) => {
     ResponsiveTabs,
     {
       desktop: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$b,
+        AttributesContainer$c,
         {
           mode: ActiveTabKeys.DESKTOP,
           nodePath
         }
       ),
       mobile: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$b,
+        AttributesContainer$c,
         {
           mode: ActiveTabKeys.MOBILE,
           nodePath
@@ -20158,7 +20247,7 @@ const Text$2 = ({ nodePath }) => {
     }
   ));
 };
-function AttributesContainer$b({
+function AttributesContainer$c({
   nodePath,
   mode
 }) {
@@ -20180,7 +20269,7 @@ function AttributesContainer$b({
       path: nodePath,
       name: ""
     }
-  )), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, { name: "1", header: t("Typography") }, mode === ActiveTabKeys.DESKTOP && /* @__PURE__ */ React__default.createElement(
+  )), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, { name: "1", header: t("Typography") }, mode === ActiveTabKeys.DESKTOP && !NodeUtils.isTextListElement(selectedNode) && /* @__PURE__ */ React__default.createElement(
     AttributeField.Heading,
     {
       path: nodePath,
@@ -20219,14 +20308,14 @@ const Section$1 = ({ nodePath }) => {
     ResponsiveTabs,
     {
       desktop: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$a,
+        AttributesContainer$b,
         {
           mode: ActiveTabKeys.DESKTOP,
           nodePath
         }
       ),
       mobile: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$a,
+        AttributesContainer$b,
         {
           mode: ActiveTabKeys.MOBILE,
           nodePath
@@ -20235,7 +20324,7 @@ const Section$1 = ({ nodePath }) => {
     }
   ));
 };
-function AttributesContainer$a({
+function AttributesContainer$b({
   nodePath,
   mode
 }) {
@@ -20382,14 +20471,14 @@ const Button$1 = ({ nodePath }) => {
     ResponsiveTabs,
     {
       desktop: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$9,
+        AttributesContainer$a,
         {
           mode: ActiveTabKeys.DESKTOP,
           nodePath
         }
       ),
       mobile: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$9,
+        AttributesContainer$a,
         {
           mode: ActiveTabKeys.MOBILE,
           nodePath
@@ -20398,7 +20487,7 @@ const Button$1 = ({ nodePath }) => {
     }
   ));
 };
-function AttributesContainer$9({
+function AttributesContainer$a({
   nodePath,
   mode
 }) {
@@ -20504,14 +20593,14 @@ const Image$3 = ({ nodePath }) => {
     ResponsiveTabs,
     {
       desktop: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$8,
+        AttributesContainer$9,
         {
           mode: ActiveTabKeys.DESKTOP,
           nodePath
         }
       ),
       mobile: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$8,
+        AttributesContainer$9,
         {
           mode: ActiveTabKeys.MOBILE,
           nodePath
@@ -20520,7 +20609,7 @@ const Image$3 = ({ nodePath }) => {
     }
   ));
 };
-function AttributesContainer$8({
+function AttributesContainer$9({
   nodePath,
   mode
 }) {
@@ -20628,14 +20717,14 @@ const Divider$1 = ({ nodePath }) => {
     ResponsiveTabs,
     {
       desktop: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$7,
+        AttributesContainer$8,
         {
           mode: ActiveTabKeys.DESKTOP,
           nodePath
         }
       ),
       mobile: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$7,
+        AttributesContainer$8,
         {
           mode: ActiveTabKeys.MOBILE,
           nodePath
@@ -20644,7 +20733,7 @@ const Divider$1 = ({ nodePath }) => {
     }
   ));
 };
-function AttributesContainer$7({
+function AttributesContainer$8({
   nodePath,
   mode
 }) {
@@ -20710,14 +20799,14 @@ const Spacer$1 = ({ nodePath }) => {
     ResponsiveTabs,
     {
       desktop: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$6,
+        AttributesContainer$7,
         {
           mode: ActiveTabKeys.DESKTOP,
           nodePath
         }
       ),
       mobile: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$6,
+        AttributesContainer$7,
         {
           mode: ActiveTabKeys.MOBILE,
           nodePath
@@ -20726,7 +20815,7 @@ const Spacer$1 = ({ nodePath }) => {
     }
   ));
 };
-function AttributesContainer$6({
+function AttributesContainer$7({
   nodePath,
   mode
 }) {
@@ -20751,14 +20840,14 @@ const Navbar$1 = ({ nodePath }) => {
     ResponsiveTabs,
     {
       desktop: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$5,
+        AttributesContainer$6,
         {
           mode: ActiveTabKeys.DESKTOP,
           nodePath
         }
       ),
       mobile: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$5,
+        AttributesContainer$6,
         {
           mode: ActiveTabKeys.MOBILE,
           nodePath
@@ -20767,7 +20856,7 @@ const Navbar$1 = ({ nodePath }) => {
     }
   ));
 };
-function AttributesContainer$5({
+function AttributesContainer$6({
   nodePath,
   mode
 }) {
@@ -20947,14 +21036,14 @@ const Social$1 = ({ nodePath }) => {
     ResponsiveTabs,
     {
       desktop: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$4,
+        AttributesContainer$5,
         {
           mode: ActiveTabKeys.DESKTOP,
           nodePath
         }
       ),
       mobile: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$4,
+        AttributesContainer$5,
         {
           mode: ActiveTabKeys.MOBILE,
           nodePath
@@ -20963,7 +21052,7 @@ const Social$1 = ({ nodePath }) => {
     }
   ));
 };
-function AttributesContainer$4({
+function AttributesContainer$5({
   nodePath,
   mode
 }) {
@@ -21183,14 +21272,14 @@ const Hero = ({ nodePath }) => {
     ResponsiveTabs,
     {
       desktop: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$3,
+        AttributesContainer$4,
         {
           mode: ActiveTabKeys.DESKTOP,
           nodePath
         }
       ),
       mobile: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$3,
+        AttributesContainer$4,
         {
           mode: ActiveTabKeys.MOBILE,
           nodePath
@@ -21199,7 +21288,7 @@ const Hero = ({ nodePath }) => {
     }
   ));
 };
-function AttributesContainer$3({
+function AttributesContainer$4({
   nodePath,
   mode
 }) {
@@ -21341,14 +21430,14 @@ const Column = ({ nodePath }) => {
     ResponsiveTabs,
     {
       desktop: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$2,
+        AttributesContainer$3,
         {
           mode: ActiveTabKeys.DESKTOP,
           nodePath
         }
       ),
       mobile: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$2,
+        AttributesContainer$3,
         {
           mode: ActiveTabKeys.MOBILE,
           nodePath
@@ -21357,7 +21446,7 @@ const Column = ({ nodePath }) => {
     }
   ));
 };
-function AttributesContainer$2({
+function AttributesContainer$3({
   nodePath,
   mode
 }) {
@@ -21399,14 +21488,14 @@ const Wrapper$1 = ({ nodePath }) => {
     ResponsiveTabs,
     {
       desktop: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$1,
+        AttributesContainer$2,
         {
           mode: ActiveTabKeys.DESKTOP,
           nodePath
         }
       ),
       mobile: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$1,
+        AttributesContainer$2,
         {
           mode: ActiveTabKeys.MOBILE,
           nodePath
@@ -21415,7 +21504,7 @@ const Wrapper$1 = ({ nodePath }) => {
     }
   ));
 };
-function AttributesContainer$1({
+function AttributesContainer$2({
   nodePath,
   mode
 }) {
@@ -21491,14 +21580,14 @@ const Widget = ({ nodePath }) => {
     ResponsiveTabs,
     {
       desktop: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer,
+        AttributesContainer$1,
         {
           mode: ActiveTabKeys.DESKTOP,
           nodePath
         }
       ),
       mobile: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer,
+        AttributesContainer$1,
         {
           mode: ActiveTabKeys.MOBILE,
           nodePath
@@ -21507,7 +21596,7 @@ const Widget = ({ nodePath }) => {
     }
   ));
 };
-function AttributesContainer({
+function AttributesContainer$1({
   nodePath,
   mode
 }) {
@@ -21636,6 +21725,117 @@ const Code = ({ nodePath }) => {
     /* @__PURE__ */ React__default.createElement(Button$2, { type: "primary" }, "Edit")
   ))))));
 };
+const Blockquote = ({ nodePath }) => {
+  return /* @__PURE__ */ React__default.createElement(AttributesPanelWrapper, null, /* @__PURE__ */ React__default.createElement(
+    ResponsiveTabs,
+    {
+      desktop: /* @__PURE__ */ React__default.createElement(
+        AttributesContainer,
+        {
+          mode: ActiveTabKeys.DESKTOP,
+          nodePath
+        }
+      ),
+      mobile: /* @__PURE__ */ React__default.createElement(
+        AttributesContainer,
+        {
+          mode: ActiveTabKeys.MOBILE,
+          nodePath
+        }
+      )
+    }
+  ));
+};
+function AttributesContainer({
+  nodePath,
+  mode
+}) {
+  const { selectedNode } = useSelectedNode();
+  if (!selectedNode)
+    return null;
+  return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(CollapseWrapper, { defaultActiveKey: ["0", "1", "2", "style"] }, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, { name: "style", header: t("Style") }, /* @__PURE__ */ React__default.createElement(
+    ResponsiveField,
+    {
+      component: AttributeField.SliderField,
+      formItem: __spreadValues({}, pixelNumberAdapter),
+      path: nodePath,
+      name: "border-width",
+      label: t("Border width"),
+      showLimit: true,
+      min: 1,
+      max: 10
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    ResponsiveField,
+    {
+      component: AttributeField.ColorPickerField,
+      path: nodePath,
+      name: "border-color",
+      label: t("Border color")
+    }
+  )), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, { name: "0", header: t("Dimension") }, /* @__PURE__ */ React__default.createElement(
+    ResponsiveField,
+    {
+      component: AttributeField.Padding,
+      path: nodePath,
+      name: ""
+    }
+  )), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, { name: "1", header: t("Typography") }, mode === ActiveTabKeys.DESKTOP && !NodeUtils.isTextListElement(selectedNode) && /* @__PURE__ */ React__default.createElement(
+    AttributeField.Heading,
+    {
+      path: nodePath,
+      formItem: {
+        labelCol: { span: 8, style: { lineHeight: 1.15 } },
+        wrapperCol: { span: 14, offset: 0 }
+      }
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    ResponsiveField,
+    {
+      mode,
+      component: AttributeField.Typography,
+      path: nodePath,
+      name: "",
+      type: selectedNode.type
+    }
+  )), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, { name: "2", header: t("Block") }, /* @__PURE__ */ React__default.createElement(
+    ResponsiveField,
+    {
+      component: AttributeField.BackgroundColor,
+      path: nodePath,
+      name: "container-background-color"
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    ResponsiveField,
+    {
+      component: AttributeField.TextAlign,
+      path: nodePath,
+      name: `align`
+    }
+  ))));
+}
+const Table = ({ nodePath }) => {
+  const { selectedNode } = useSelectedNode();
+  const { setFieldValue } = useEditorContext();
+  const onChange = (val) => {
+    setFieldValue(nodePath, "data.code", val);
+  };
+  return /* @__PURE__ */ React__default.createElement(AttributesPanelWrapper, null, /* @__PURE__ */ React__default.createElement(Grid.Row, { style: { paddingTop: 30 } }, /* @__PURE__ */ React__default.createElement(Grid.Col, { span: 22, offset: 1 }, /* @__PURE__ */ React__default.createElement(Space, { direction: "vertical", style: { width: "100%" } }, /* @__PURE__ */ React__default.createElement(
+    Input.TextArea,
+    {
+      disabled: true,
+      rows: 5,
+      value: (selectedNode == null ? void 0 : selectedNode.data.code) || ""
+    }
+  ), /* @__PURE__ */ React__default.createElement(Grid.Row, { justify: "end" }, /* @__PURE__ */ React__default.createElement(
+    HTMLEditor,
+    {
+      initialValue: (selectedNode == null ? void 0 : selectedNode.data.code) || "",
+      onChange
+    },
+    /* @__PURE__ */ React__default.createElement(Button$2, { type: "primary" }, "Edit")
+  ))))));
+};
 const ConfigPanelsMap = {
   [ElementType.PAGE]: Page$1,
   [ElementType.STANDARD_NAVBAR]: Navbar$1,
@@ -21659,7 +21859,9 @@ const ConfigPanelsMap = {
   [ElementType.STANDARD_H1]: Text$2,
   [ElementType.STANDARD_H2]: Text$2,
   [ElementType.STANDARD_H3]: Text$2,
-  [ElementType.STANDARD_H4]: Text$2
+  [ElementType.STANDARD_H4]: Text$2,
+  [ElementType.STANDARD_TABLE]: Table,
+  [ElementType.STANDARD_BLOCK_QUOTE]: Blockquote
 };
 const AttributePanel = () => {
   const { selectedNode, selectedNodePath } = useSelectedNode();
@@ -27842,224 +28044,6 @@ const UniversalElementEditorDrawer = ({ children }) => {
     visible && children
   ));
 };
-const DesktopEmailPreview = ({
-  html,
-  isActive
-}) => {
-  const [ref2, setRef] = useState(null);
-  useEffect(() => {
-    var _a;
-    if (ref2 && ref2.contentWindow) {
-      (_a = ref2.contentWindow) == null ? void 0 : _a.postMessage({ type: "email-render", html }, "*");
-    }
-  }, [html, ref2, ref2 == null ? void 0 : ref2.contentWindow]);
-  const onLoad = (ev) => {
-    setRef(ev.target);
-  };
-  return useMemo$1(() => {
-    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
-      IframeComponent,
-      {
-        style: {
-          width: "100%",
-          height: "calc(100%)",
-          position: ref2 ? "relative" : "absolute",
-          opacity: ref2 ? 1 : 0,
-          display: isActive ? "flex" : "none"
-        },
-        onLoad
-      },
-      /* @__PURE__ */ React__default.createElement(HtmlStringToReactNodes, { content: html })
-    ), !ref2 && /* @__PURE__ */ React__default.createElement("div", { style: { width: 600, margin: "30px auto" } }, /* @__PURE__ */ React__default.createElement(Space, { direction: "vertical", size: "large", style: { width: "100%" } }, /* @__PURE__ */ React__default.createElement(
-      Skeleton,
-      {
-        animation: true,
-        image: {
-          size: "large"
-        },
-        text: {
-          rows: 3
-        }
-      }
-    ), /* @__PURE__ */ React__default.createElement(
-      Skeleton,
-      {
-        animation: true,
-        text: {
-          rows: 3
-        }
-      }
-    ), /* @__PURE__ */ React__default.createElement(
-      Skeleton,
-      {
-        animation: true,
-        text: {
-          rows: 4
-        }
-      }
-    ), /* @__PURE__ */ React__default.createElement(
-      Skeleton,
-      {
-        animation: true,
-        text: {
-          rows: 5
-        }
-      }
-    ))));
-  }, [html, isActive, ref2]);
-};
-const iphoneFrame = "data:image/png;base64,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ggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAeAApBDwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBAB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";
-const MOBILE_WIDTH = 375;
-const MOBILE_Height = 750;
-const MobilePreview = ({
-  html,
-  isActive
-}) => {
-  const [ref2, setRef] = useState(null);
-  const onLoad = (ev) => {
-    setRef(ev.target);
-  };
-  return useMemo$1(() => {
-    return /* @__PURE__ */ React__default.createElement(
-      "div",
-      {
-        style: {
-          height: "100%",
-          display: isActive ? "flex" : "none",
-          alignItems: "center",
-          justifyContent: "center",
-          overflow: "auto",
-          padding: "10px 0px",
-          boxSizing: "border-box"
-        }
-      },
-      /* @__PURE__ */ React__default.createElement(
-        "div",
-        {
-          style: {
-            position: "relative",
-            margin: "auto",
-            padding: "6px 6.8px 2px 6.8px",
-            boxSizing: "border-box"
-          }
-        },
-        /* @__PURE__ */ React__default.createElement(
-          "div",
-          {
-            style: {
-              left: 0,
-              top: 0,
-              width: "100%",
-              height: "100%",
-              position: "absolute",
-              padding: "6px 6.8px 2px 6.8px",
-              boxSizing: "border-box",
-              backgroundImage: `url(${iphoneFrame})`,
-              backgroundSize: "100% 100%",
-              zIndex: 10,
-              pointerEvents: "none"
-            }
-          }
-        ),
-        /* @__PURE__ */ React__default.createElement(
-          "div",
-          {
-            style: {
-              width: MOBILE_WIDTH,
-              height: MOBILE_Height
-            }
-          },
-          /* @__PURE__ */ React__default.createElement(
-            "div",
-            {
-              style: {
-                height: MOBILE_Height,
-                width: MOBILE_WIDTH,
-                boxSizing: "content-box",
-                borderRadius: 30,
-                border: "none",
-                overflow: "hidden",
-                position: "relative"
-              }
-            },
-            !ref2 && /* @__PURE__ */ React__default.createElement("div", { style: { width: 600, margin: "30px auto" } }, /* @__PURE__ */ React__default.createElement(
-              Space,
-              {
-                direction: "vertical",
-                size: "large",
-                style: { width: "100%" }
-              },
-              /* @__PURE__ */ React__default.createElement(
-                Skeleton,
-                {
-                  animation: true,
-                  image: {
-                    size: "large"
-                  },
-                  text: {
-                    rows: 3
-                  }
-                }
-              ),
-              /* @__PURE__ */ React__default.createElement(
-                Skeleton,
-                {
-                  animation: true,
-                  text: {
-                    rows: 3
-                  }
-                }
-              ),
-              /* @__PURE__ */ React__default.createElement(
-                Skeleton,
-                {
-                  animation: true,
-                  text: {
-                    rows: 4
-                  }
-                }
-              ),
-              /* @__PURE__ */ React__default.createElement(
-                Skeleton,
-                {
-                  animation: true,
-                  text: {
-                    rows: 5
-                  }
-                }
-              )
-            )),
-            /* @__PURE__ */ React__default.createElement(
-              IframeComponent,
-              {
-                onLoad,
-                style: {
-                  width: "100%",
-                  height: "calc(100%)",
-                  position: ref2 ? "relative" : "absolute",
-                  opacity: ref2 ? 1 : 0
-                }
-              },
-              /* @__PURE__ */ React__default.createElement(HtmlStringToReactNodes, { content: html }),
-              /* @__PURE__ */ React__default.createElement("style", null, `.mjbody {
-                        height: 100vh;
-                      }
-                *::-webkit-scrollbar {
-                  -webkit-appearance: none;
-                  width: 0px;
-                }
-                *::-webkit-scrollbar-thumb {
-                  background-color: rgba(0, 0, 0, 0.5);
-                  box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
-                  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
-                }`)
-            )
-          )
-        )
-      )
-    );
-  }, [html, isActive, ref2]);
-};
 const PreviewEmail = ({
   isDesktop,
   universalElementSetting,
@@ -28092,7 +28076,13 @@ const PreviewEmail = ({
     return finalHtml;
   }, [mergetagsData, mjmlString]);
   return useMemo$1(() => {
-    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(MobilePreview, { html, isActive: !isDesktop }), /* @__PURE__ */ React__default.createElement(DesktopEmailPreview, { html, isActive: isDesktop }));
+    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(SharedComponents.MobilePreview, { html, isActive: !isDesktop }), /* @__PURE__ */ React__default.createElement(
+      SharedComponents.DesktopEmailPreview,
+      {
+        html,
+        isActive: isDesktop
+      }
+    ));
   }, [html, isDesktop]);
 };
 const VariablesEditorContent = React__default.lazy(
@@ -42486,6 +42476,224 @@ const ConfigurationToolbar = () => {
     return /* @__PURE__ */ React__default.createElement(Com, { nodePath, key: selectedNode.type + nodePath.toString() });
   }, [nodePath, selectedNode]);
 };
+const DesktopEmailPreview = ({
+  html,
+  isActive
+}) => {
+  const [ref2, setRef] = useState(null);
+  useEffect(() => {
+    var _a;
+    if (ref2 && ref2.contentWindow) {
+      (_a = ref2.contentWindow) == null ? void 0 : _a.postMessage({ type: "email-render", html }, "*");
+    }
+  }, [html, ref2, ref2 == null ? void 0 : ref2.contentWindow]);
+  const onLoad = (ev) => {
+    setRef(ev.target);
+  };
+  return useMemo$1(() => {
+    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+      IframeComponent,
+      {
+        style: {
+          width: "100%",
+          height: "calc(100%)",
+          position: ref2 ? "relative" : "absolute",
+          opacity: ref2 ? 1 : 0,
+          display: isActive ? "flex" : "none"
+        },
+        onLoad
+      },
+      /* @__PURE__ */ React__default.createElement(HtmlStringToReactNodes, { content: html })
+    ), !ref2 && /* @__PURE__ */ React__default.createElement("div", { style: { width: 600, margin: "30px auto" } }, /* @__PURE__ */ React__default.createElement(Space, { direction: "vertical", size: "large", style: { width: "100%" } }, /* @__PURE__ */ React__default.createElement(
+      Skeleton,
+      {
+        animation: true,
+        image: {
+          size: "large"
+        },
+        text: {
+          rows: 3
+        }
+      }
+    ), /* @__PURE__ */ React__default.createElement(
+      Skeleton,
+      {
+        animation: true,
+        text: {
+          rows: 3
+        }
+      }
+    ), /* @__PURE__ */ React__default.createElement(
+      Skeleton,
+      {
+        animation: true,
+        text: {
+          rows: 4
+        }
+      }
+    ), /* @__PURE__ */ React__default.createElement(
+      Skeleton,
+      {
+        animation: true,
+        text: {
+          rows: 5
+        }
+      }
+    ))));
+  }, [html, isActive, ref2]);
+};
+const iphoneFrame = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAvAAAAUgCAYAAAAmP2PbAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAACkySURBVHgB7d0/X1znmcfhZ4ZmtwL0BjKgJp1xly64285Kl1SWX4HtciujareL9QokVVta7nYrky5bBXdpBONXoHGXLQT7POigIAvESOfMnx9c1+czYpAwkrCK79zc5zmjcsdNqvpmrz62xuPxJ+3t2dlZ+7mt0Wi0dfFhBQCAZZi2H2qPnb+tPdbe/lwfs9PT06P2djqdHpU7bFTukNrqezXS9+vTT+o/ir36D2JSn28VAACi1JY7qi3XQv6nFvY16g/LHXGrA74G+34N9r36P/jz+j/4fMpeAAC4jWZd1P9Qg/7wNk/pb1XA12Bvgd6m7J/Xtw+LYAcAuKum9XFYY/6HGvPPyy1yKwK+m7SLdgAArjKrj+c15p/dhlWb2IBv0/Ya7V/Vp18X0Q4AwHymo9Ho0atXr9qazbQEigv4btr+RX36oAh3AAA+3tM6lX+UFvIxAd/Cvb5a+rY+9gsAAAzk7OzssD4epazXrH3AC3cAAJahC/kv130iv7YB326wVKP9iXAHAGDJ1nq1Zu0C/tLFqQcFAABW56CG/OPa8bOyRjbKGqnx/qDG+/fl9QWqAACwSm2V+4/37t375eXLl2tzY6i1mMB3U/cnRbgDALCe1matZuUT+G7q/mN9ulcAAGA97dVp/IN1mMavbALfTd2/La9vxAQAACm+66bxK9mNX0nAtxNmuqn7pAAAQJ5pjfjPVrFSs/SAv3///hdnZ2fflfW6i+qs/pmO6rdFpvX5T/V/Rns1Ne0e57++blcfAwDcRm3QW1534vmjDn3bmvVWbbVPaqvtlTVryPpn+ubFixdPyxItNeB3d3fbysxBWbF2SH/9YrdQP6zvHqXdPhcA4K7qAn+vhv1+F/X7ZfUOjo+PH5UlWUrAd/vuf65PH5bVaNPzZzXYn5fXwW6aDgBwC7TOLK+Pe3xQH78vq1vR/q5G/DdlCRYe8O2LWr+YP3bf8limN9Feg/2wAABw69X2bDH/cBUx31ay6+MPi97uWGjAr+Ji1bYeU3/PZ69evXpu0g4AcHfVFG0h/8WS12wWfnHrwgJ+2fHewr0+Hpm2AwBwWc3Sdob71y3my3IsNOIXEvDLjPcu3L90ISoAAO/TGrVG/MGSQn5hET94wC8r3k3cAQD4GF3IP1nCas1CIn7QgF9SvLcvxJfCHQCAPtqOfG3Xdsz5pCxOa9dPh7w2c1wGVF/FfF8W+wV43H0BDgsAAPRQm/Jpa8v6dJFnuLdp/4/dcZeDGGwCv7u7+6Qs7px3U3cAABZmCZskT4+Pj78sA9goA+jusPp1WYw2df9Tjfe/FwAAWIBZtbm5+axOy/+1vvu7Mry97e3t8vLly7+UnnoHfHe+5ndleG1P6N/rK5WD+vX8RwEAgAVqzVkD+79raP9SXkf8v5Rh7d+7d29af4+fSg+9Vmi6bzX8rT4dbKen01Zm2l2sjgoAACzZAldqZt01ndPykT464NsifhfvkzKgZd2CFgAA3meBEd/rZJqPPoVmQUfuPK/x/pl4BwBg1VqTdqfUPC/DmnQt/VE+agLfnZn5pAyohvuzk5OThwUAANbMzs7O06Hv4NqtjH/wi4MPDvhFfCtBvAMAsO4WEPFtH37nQ1dpPniFZujVGfEOAECC1qytXctwtj5mq+WDjpHsjow8KMN5Xr8QfyoAABBgNps9397e3qtPf1uG8dvNzc2f6ued+55Hc0/gu1NnPnrZ/grnd1ctAAAQpDVsOzmxDKQ29p9ba8/98XN/4Hj8VRludabF+2cfe3QOAACsSmvYdux5e1qG0a4x/XreD57rItbuwtWTMpBuWX9aAAAgVE3kve5wl0FuajpvI881gR94deYb8Q4AQLqatG2N5lEZyGg0muuC1hsvYm3T9/rJnpZhPD4+Pj4oAABwC7x8+fKv21V9+rvSU23uyebm5l9ms9n0fR934wR+3lcCc2h77wcFAABuka5xp2UAtb1v3Hx5b8DX4ft+/ST7ZQAuWgUA4DZqjTvU6YqtvVuDv+9jxjd8gqF23x/ZewcA4LaqqXtY3zwuA7ipwa8N+G73fb/011ZnvisAAHCLDbVKc9MU/tqAH+rkmfoHeGR1BgCA227IVZra4l9c92tXngM/1LnvZ2dnhycnJ58VAAC4I3Z2dn4cYJNl1p0L/84g/LoJ/H4ZQA34QV6BAABAitrAQ5wNv3Xd3VmvDPiB1meeunAVAIC7pl3Q2jZRSn9fXfWT7wR8tzA/KT3Vkf9gd6UCAIAkA22ibF11Mes7Af++hfkPYPoOAMCd1Vp4iCl8bfMH7/zcFR/3oPRUp++DnIEJAACpBtqF/6JO4bcu/8RbAX///v0W71ulh/ZKo77gOCoAAHCHDbQL39p87/JPvBXw9Tf4vPRUx/zPCgAA0Pq6dxv/eo3m1ys0+6Wf6YsXL54WAACgeV4ffW9q+tY1qm8CfjKZtNH8pPRzWAAAgHPdjZj6TuHfOo3mTcDX0fx+6en09NT6DAAAXFIb+Xnpqbb6mz34NwE/wP57Oy3nsAAAAG90jdxrjeZyq78J+NFotFf6OSwAAMBVem2qXG7184Dvdmp6HR9ZvzXwQwEAAN4xwBrNVnfN6uuAv7xT08NhAQAArtL7PkkX16xerNB8Unrobt7U93gcAAC4lVorD3BTp/Nmvwj4XhP40Wj0UwEAAK7Vt5nrC4B/rtCUngF/enp6WAAAgGvVgD8sPdT/ftLeji+W4XvqvdMDAAC32atXr/o289bOzs5v2gS+1+kz1awdAF8AAIBrdc3c9zz4T8d9T6Cpn8T0HQAA5tC3nTc2NrZ6T+BdwAoAAHP7ufTQLmQd1x8mpR/HRwIAwBzq8Lvv9spmm8D/pvRwenpqhQYAAOZQ27nvDvxkXPozgQcAgPlMSz9b44vzJHsQ8AAAMJ9p6aG2+1bvCXz9JC8LAACwFC3gJ6WHk5OTXlfSAgDAHdJ3e2WQHXgAAGAO0+m09/q5gAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAcAgCACHgAAggh4AAAIIuABACCIgAeAApBDwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBABDwAAQQQ8AAAEEfAAABBEwAMAQBAB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";
+const MOBILE_WIDTH = 375;
+const MOBILE_Height = 750;
+const MobilePreview = ({
+  html,
+  isActive
+}) => {
+  const [ref2, setRef] = useState(null);
+  const onLoad = (ev) => {
+    setRef(ev.target);
+  };
+  return useMemo$1(() => {
+    return /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        style: {
+          height: "100%",
+          display: isActive ? "flex" : "none",
+          alignItems: "center",
+          justifyContent: "center",
+          overflow: "auto",
+          padding: "10px 0px",
+          boxSizing: "border-box"
+        }
+      },
+      /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          style: {
+            position: "relative",
+            margin: "auto",
+            padding: "6px 6.8px 2px 6.8px",
+            boxSizing: "border-box"
+          }
+        },
+        /* @__PURE__ */ React__default.createElement(
+          "div",
+          {
+            style: {
+              left: 0,
+              top: 0,
+              width: "100%",
+              height: "100%",
+              position: "absolute",
+              padding: "6px 6.8px 2px 6.8px",
+              boxSizing: "border-box",
+              backgroundImage: `url(${iphoneFrame})`,
+              backgroundSize: "100% 100%",
+              zIndex: 10,
+              pointerEvents: "none"
+            }
+          }
+        ),
+        /* @__PURE__ */ React__default.createElement(
+          "div",
+          {
+            style: {
+              width: MOBILE_WIDTH,
+              height: MOBILE_Height
+            }
+          },
+          /* @__PURE__ */ React__default.createElement(
+            "div",
+            {
+              style: {
+                height: MOBILE_Height,
+                width: MOBILE_WIDTH,
+                boxSizing: "content-box",
+                borderRadius: 30,
+                border: "none",
+                overflow: "hidden",
+                position: "relative"
+              }
+            },
+            !ref2 && /* @__PURE__ */ React__default.createElement("div", { style: { width: 600, margin: "30px auto" } }, /* @__PURE__ */ React__default.createElement(
+              Space,
+              {
+                direction: "vertical",
+                size: "large",
+                style: { width: "100%" }
+              },
+              /* @__PURE__ */ React__default.createElement(
+                Skeleton,
+                {
+                  animation: true,
+                  image: {
+                    size: "large"
+                  },
+                  text: {
+                    rows: 3
+                  }
+                }
+              ),
+              /* @__PURE__ */ React__default.createElement(
+                Skeleton,
+                {
+                  animation: true,
+                  text: {
+                    rows: 3
+                  }
+                }
+              ),
+              /* @__PURE__ */ React__default.createElement(
+                Skeleton,
+                {
+                  animation: true,
+                  text: {
+                    rows: 4
+                  }
+                }
+              ),
+              /* @__PURE__ */ React__default.createElement(
+                Skeleton,
+                {
+                  animation: true,
+                  text: {
+                    rows: 5
+                  }
+                }
+              )
+            )),
+            /* @__PURE__ */ React__default.createElement(
+              IframeComponent,
+              {
+                onLoad,
+                style: {
+                  width: "100%",
+                  height: "calc(100%)",
+                  position: ref2 ? "relative" : "absolute",
+                  opacity: ref2 ? 1 : 0
+                }
+              },
+              /* @__PURE__ */ React__default.createElement(HtmlStringToReactNodes, { content: html }),
+              /* @__PURE__ */ React__default.createElement("style", null, `.mjbody {
+                        height: 100vh;
+                      }
+                *::-webkit-scrollbar {
+                  -webkit-appearance: none;
+                  width: 0px;
+                }
+                *::-webkit-scrollbar-thumb {
+                  background-color: rgba(0, 0, 0, 0.5);
+                  box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
+                  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
+                }`)
+            )
+          )
+        )
+      )
+    );
+  }, [html, isActive, ref2]);
+};
 const SharedComponents = {
   PreviewEmailDrawer,
   PreviewEmail,
@@ -42510,6 +42718,8 @@ const SharedComponents = {
   UniversalList,
   MergeTagComponent,
   ImageAction,
+  DesktopEmailPreview,
+  MobilePreview,
   MinimalistEditorTopBar: EditorTopBar,
   ConfigurationToolbar
 };
@@ -43239,7 +43449,7 @@ const minimaliststyleText = `[data-slate-block=page] {
   position: relative;
 }
 
-[data-slate-block=text] [data-slate-node=text] .text-empty::before {
+[data-slate-block=text] [data-slate-node=text] .text-empty-focus::before {
   content: "Type '/' for commands";
   position: absolute;
   font-size: 14px;
@@ -43252,12 +43462,12 @@ const minimaliststyleText = `[data-slate-block=page] {
   font-weight: normal;
 }
 
-[data-text-align=left] .text-empty::before {
+[data-text-align=left] .text-empty-focus::before {
   left: 0;
   text-align: left;
 }
 
-[data-text-align=right] .text-empty::before {
+[data-text-align=right] .text-empty-focus::before {
   right: 0;
   text-align: right;
 }

package/lib/typings/components/ConfigurationPanel/Elements/Blockquote/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { Path } from "slate";
+export declare const Blockquote: ({ nodePath }: {
+    nodePath: Path;
+}) => React.JSX.Element;

package/lib/typings/components/ConfigurationPanel/Elements/Table/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { Path } from "slate";
+export declare const Table: ({ nodePath }: {
+    nodePath: Path;
+}) => React.JSX.Element;

package/lib/typings/components/index.d.ts

@@ -88,6 +88,14 @@ export declare const SharedComponents: {
         isSelected: boolean;
         nodeElement: HTMLElement;
     }>;
+    DesktopEmailPreview: ({ html, isActive, }: {
+        html: string;
+        isActive: boolean;
+    }) => import("react").JSX.Element;
+    MobilePreview: ({ html, isActive, }: {
+        html: string;
+        isActive: boolean;
+    }) => import("react").JSX.Element;
     MinimalistEditorTopBar: () => import("react").JSX.Element;
     ConfigurationToolbar: () => import("react").JSX.Element | null;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "easy-email-pro-theme",
-  "version": "1.23.1",
+  "version": "1.24.0",
   "description": "",
   "files": [
     "lib"