@elementor/editor-canvas 0.11.1 → 0.13.0

package/dist/index.mjs

@@ -139,18 +139,89 @@ function createTransformersRegistry() {
   };
 }
 
-// src/style-transformers-registry.ts
-var styleTransformersRegistry = createTransformersRegistry();
+// src/settings-transformers-registry.ts
+var settingsTransformersRegistry = createTransformersRegistry();
 
 // src/transformers/create-transformer.ts
 function createTransformer(cb) {
   return cb;
 }
 
+// src/transformers/settings/array-transformer.ts
+var arrayTransformer = createTransformer((value) => {
+  return value.filter(Boolean);
+});
+
+// src/transformers/settings/link-transformer.ts
+var linkTransformer = createTransformer(({ destination, isTargetBlank }) => {
+  return {
+    // The real post URL is not relevant in the Editor.
+    href: typeof destination === "number" ? "#post-id-" + destination : destination,
+    target: isTargetBlank ? "_blank" : "_self"
+  };
+});
+
+// src/transformers/shared/image-src-transformer.ts
+var imageSrcTransformer = createTransformer((value) => ({
+  id: value.id ?? null,
+  url: value.url ?? null
+}));
+
+// src/transformers/shared/image-transformer.ts
+import { getMediaAttachment } from "@elementor/wp-media";
+var imageTransformer = createTransformer(async (value) => {
+  const { src, size: size2 } = value;
+  if (!src?.id) {
+    return src?.url ? { src: src.url } : null;
+  }
+  const attachment = await getMediaAttachment({ id: src.id });
+  const sizedAttachment = attachment?.sizes?.[size2 ?? ""];
+  if (sizedAttachment) {
+    return {
+      src: sizedAttachment.url,
+      height: sizedAttachment.height,
+      width: sizedAttachment.width
+    };
+  }
+  if (attachment) {
+    return {
+      src: attachment.url,
+      height: attachment.height,
+      width: attachment.width
+    };
+  }
+  return null;
+});
+
+// src/transformers/shared/plain-transformer.ts
+var plainTransformer = createTransformer((value) => {
+  return value;
+});
+
+// src/init-settings-transformers.ts
+function initSettingsTransformers() {
+  settingsTransformersRegistry.register("string", plainTransformer).register("url", plainTransformer).register("number", plainTransformer).register("boolean", plainTransformer).register("classes", arrayTransformer).register("link", linkTransformer).register("image", imageTransformer).register("image-src", imageSrcTransformer).register("image-attachment-id", plainTransformer);
+}
+
+// src/style-transformers-registry.ts
+var styleTransformersRegistry = createTransformersRegistry();
+
 // src/transformers/styles/background-color-overlay-transformer.ts
-var backgroundColorOverlayTransformer = createTransformer(
-  (value) => `linear-gradient(${value}, ${value})`
-);
+var backgroundColorOverlayTransformer = createTransformer((value) => {
+  const { color = null } = value;
+  if (!color) {
+    return null;
+  }
+  return `linear-gradient(${color}, ${color})`;
+});
+
+// src/transformers/styles/background-gradient-overlay-transformer.ts
+var backgroundGradientOverlayTransformer = createTransformer((value) => {
+  if (value.type === "radial") {
+    return `radial-gradient(circle at ${value.positions}, ${value.stops})`;
+  }
+  return `linear-gradient(${value.angle}deg, ${value.stops})`;
+});
 
 // src/transformers/styles/background-image-overlay-transformer.ts
 var DEFAULT_POSITION_VALUE = "0% 0%";
@@ -159,8 +230,9 @@ var backgroundImageOverlayTransformer = createTransformer((value) => {
   if (!image) {
     return null;
   }
+  const src = image.src ? `url(${image.src})` : null;
   const backgroundStyles = [
-    image,
+    src,
     repeat,
     attachment,
     size2 ? `${position || DEFAULT_POSITION_VALUE} / ${size2}` : position
@@ -185,6 +257,11 @@ var backgroundTransformer = createTransformer((value) => {
   return `${overlays} ${color}`.trim();
 });
 
+// src/transformers/styles/color-stop-transformer.ts
+var colorStopTransformer = createTransformer(
+  (value) => `${value?.color} ${value?.offset ?? 0}%`
+);
+
 // src/transformers/styles/create-combine-array-transformer.ts
 var createCombineArrayTransformer = (delimiter) => {
   return createTransformer((value) => value.filter(Boolean).join(delimiter));
@@ -212,42 +289,6 @@ var createMultiPropsTransformer = (keys, keyGenerator) => {
   });
 };
 
-// src/transformers/styles/image-attachment-transformer.ts
-import { getMediaAttachment } from "@elementor/wp-media";
-var imageAttachmentTransformer = createTransformer(async (value) => {
-  const attachment = await getMediaAttachment({ id: value });
-  if (!attachment) {
-    return null;
-  }
-  return attachment;
-});
-
-// src/transformers/styles/image-src-transformer.ts
-var imageSrcTransformer = createTransformer((value) => ({
-  attachment: value.id,
-  url: value.url
-}));
-
-// src/transformers/styles/image-transformer.ts
-var imageTransformer = createTransformer((value) => {
-  const { src, size: size2 } = value;
-  if (src?.url) {
-    return `url(${src.url})`;
-  }
-  const sizeUrl = src?.attachment?.sizes?.[size2 ?? ""]?.url;
-  if (sizeUrl) {
-    return `url(${sizeUrl})`;
-  }
-  const attachmentUrl = src?.attachment?.url;
-  if (attachmentUrl) {
-    return `url(${attachmentUrl})`;
-  }
-  return null;
-});
-
-// src/transformers/styles/primitive-transformer.ts
-var primitiveTransformer = createTransformer((value) => value);
-
 // src/transformers/styles/shadow-transformer.ts
 var shadowTransformer = createTransformer((value) => {
   return [value.hOffset, value.vOffset, value.blur, value.spread, value.color, value.position].filter(Boolean).join(" ");
@@ -276,7 +317,7 @@ function initStyleTransformers() {
       ["block-start", "block-end", "inline-start", "inline-end"],
       ({ propKey, key }) => `${propKey}-${key}`
     )
-  ).register("color", primitiveTransformer).register("number", primitiveTransformer).register("string", primitiveTransformer).register("url", primitiveTransformer).register("box-shadow", createCombineArrayTransformer(",")).register("background", backgroundTransformer).register("background-overlay", createCombineArrayTransformer(",")).register("background-color-overlay", backgroundColorOverlayTransformer).register("background-image-overlay", backgroundImageOverlayTransformer).register("background-image-position-offset", backgroundImagePositionOffsetTransformer).register("background-image-size-scale", backgroundImageSizeScaleTransformer).register("image-attachment-id", imageAttachmentTransformer).register("image-src", imageSrcTransformer).register("image", imageTransformer).register(
+  ).register("color", plainTransformer).register("number", plainTransformer).register("string", plainTransformer).register("url", plainTransformer).register("box-shadow", createCombineArrayTransformer(",")).register("background", backgroundTransformer).register("background-overlay", createCombineArrayTransformer(",")).register("background-color-overlay", backgroundColorOverlayTransformer).register("background-image-overlay", backgroundImageOverlayTransformer).register("background-gradient-overlay", backgroundGradientOverlayTransformer).register("gradient-color-stop", createCombineArrayTransformer(",")).register("color-stop", colorStopTransformer).register("background-image-position-offset", backgroundImagePositionOffsetTransformer).register("background-image-size-scale", backgroundImageSizeScaleTransformer).register("image-attachment-id", plainTransformer).register("image-src", imageSrcTransformer).register("image", imageTransformer).register(
     "layout-direction",
     createMultiPropsTransformer(["row", "column"], ({ propKey, key }) => `${key}-${propKey}`)
   ).register(
@@ -298,7 +339,7 @@ function initStyleTransformers() {
 import { getBreakpointsMap } from "@elementor/editor-responsive";
 import { getStylesSchema } from "@elementor/editor-styles";
 import { stylesRepository } from "@elementor/editor-styles-repository";
-import { __privateListenTo as listenTo, v1ReadyEvent } from "@elementor/editor-v1-adapters";
+import { __privateListenTo as listenTo, registerDataHook, v1ReadyEvent } from "@elementor/editor-v1-adapters";
 
 // src/renderers/create-props-resolver.ts
 import {
@@ -462,7 +503,7 @@ function initStylesRenderer() {
       schema: getStylesSchema(),
       onPropResolve: enqueueUsedFonts
     });
-    stylesRepository.subscribe(async () => {
+    const injectStyleElements = async () => {
       const styleContainer = getStylesContainer();
       const styles = stylesRepository.all().reverse();
       const breakpoints = getBreakpointsMap();
@@ -477,7 +518,9 @@ function initStylesRenderer() {
         selectorPrefix: SELECTOR_PREFIX,
         signal: abortController.signal
       });
-    });
+    };
+    stylesRepository.subscribe(injectStyleElements);
+    registerDataHook("after", "editor/documents/attach-preview", injectStyleElements);
   });
 }
 function getStylesContainer() {
@@ -503,10 +546,339 @@ function enqueueUsedFonts({ key, value }) {
   enqueueFont(value);
 }
 
+// src/legacy/init-legacy-views.ts
+import { getWidgetsCache } from "@elementor/editor-elements";
+import { __privateListenTo, v1ReadyEvent as v1ReadyEvent2 } from "@elementor/editor-v1-adapters";
+
+// src/legacy/create-element-type.ts
+function createElementType(type) {
+  const legacyWindow = window;
+  return class extends legacyWindow.elementor.modules.elements.types.Widget {
+    getType() {
+      return type;
+    }
+    getView() {
+      return createElementView();
+    }
+  };
+}
+function createElementView() {
+  const legacyWindow = window;
+  return class extends legacyWindow.elementor.modules.elements.views.Widget {
+    // Dispatch `render` event so the overlay layer will be updated
+    onRender(...args) {
+      super.onRender(...args);
+      this.#dispatchEvent("elementor/preview/atomic-widget/render");
+    }
+    // Dispatch `destroy` event so the overlay layer will be updated
+    onDestroy(...args) {
+      super.onDestroy(...args);
+      this.#dispatchEvent("elementor/preview/atomic-widget/destroy");
+    }
+    attributes() {
+      return {
+        ...super.attributes(),
+        // Mark the widget as atomic, so external APIs (such as the overlay layer) can reference it.
+        "data-atomic": "",
+        // Make the wrapper is non-existent in terms of CSS to mimic the frontend DOM tree.
+        style: "display: contents !important;"
+      };
+    }
+    // Removes behaviors that are not needed for atomic widgets (that are implemented in the overlay layer).
+    behaviors() {
+      const disabledBehaviors = ["InlineEditing", "Draggable", "Resizable"];
+      const behaviorsAsEntries = Object.entries(super.behaviors()).filter(
+        ([key]) => !disabledBehaviors.includes(key)
+      );
+      return Object.fromEntries(behaviorsAsEntries);
+    }
+    // Change the drag handle because the $el is not the draggable element (`display: contents`).
+    getDomElement() {
+      return this.$el.find(":first-child");
+    }
+    // Remove the overlay, so we can use the new overlay layer.
+    getHandlesOverlay() {
+      return null;
+    }
+    #dispatchEvent(eventType) {
+      window.top?.dispatchEvent(
+        new CustomEvent(eventType, {
+          detail: { id: this.model.get("id") }
+        })
+      );
+    }
+    getContextMenuGroups() {
+      return super.getContextMenuGroups().filter((group) => group.name !== "save");
+    }
+  };
+}
+
+// src/legacy/init-legacy-views.ts
+function initLegacyViews() {
+  __privateListenTo(v1ReadyEvent2(), () => {
+    const config = getWidgetsCache() ?? {};
+    const legacyWindow = window;
+    Object.entries(config).forEach(([type, element]) => {
+      if (!element.atomic) {
+        return;
+      }
+      const ElementType = createElementType(type);
+      legacyWindow.elementor.elementsManager.registerElementType(new ElementType());
+    });
+  });
+}
+
+// src/style-commands/paste-style.ts
+import {
+  __privateListenTo as listenTo2,
+  blockCommand,
+  commandStartEvent
+} from "@elementor/editor-v1-adapters";
+
+// src/style-commands/undoable-actions/paste-element-style.ts
+import {
+  createElementStyle,
+  deleteElementStyle,
+  getElementStyles,
+  updateElementStyle
+} from "@elementor/editor-elements";
+import { LOCAL_STYLES_RESERVED_LABEL } from "@elementor/editor-styles-repository";
+import { undoable } from "@elementor/editor-v1-adapters";
+import { __ as __2 } from "@wordpress/i18n";
+
+// src/style-commands/utils.ts
+import { getElementLabel, getWidgetsCache as getWidgetsCache2 } from "@elementor/editor-elements";
+import { CLASSES_PROP_KEY } from "@elementor/editor-props";
+import { __ } from "@wordpress/i18n";
+function hasAtomicWidgets(args) {
+  const { containers = [args.container] } = args;
+  return containers.some(isAtomicWidget);
+}
+function isAtomicWidget(container) {
+  if (!container) {
+    return false;
+  }
+  return Boolean(getContainerSchema(container));
+}
+function getClassesProp(container) {
+  const propsSchema = getContainerSchema(container);
+  if (!propsSchema) {
+    return null;
+  }
+  const [propKey] = Object.entries(propsSchema).find(
+    ([, propType]) => propType.kind === "plain" && propType.key === CLASSES_PROP_KEY
+  ) ?? [];
+  return propKey ?? null;
+}
+function getContainerSchema(container) {
+  const type = container?.model.get("widgetType") || container?.model.get("elType");
+  const widgetsCache = getWidgetsCache2();
+  const elementType = widgetsCache?.[type];
+  return elementType?.atomic_props_schema ?? null;
+}
+function getClipboardElements(storageKey = "clipboard") {
+  try {
+    const storedData = JSON.parse(localStorage.getItem("elementor") ?? "{}");
+    return storedData[storageKey]?.elements;
+  } catch {
+    return void 0;
+  }
+}
+function getTitleForContainers(containers) {
+  return containers.length > 1 ? __("Elements", "elementor") : getElementLabel(containers[0].id);
+}
+
+// src/style-commands/undoable-actions/paste-element-style.ts
+var undoablePasteElementStyle = () => undoable(
+  {
+    do: ({ containers, newStyle }) => {
+      return containers.map((container) => {
+        const elementId = container.id;
+        const classesProp = getClassesProp(container);
+        if (!classesProp) {
+          return null;
+        }
+        const originalStyles = getElementStyles(container.id);
+        const [styleId, styleDef] = Object.entries(originalStyles ?? {})[0] ?? [];
+        const originalStyle = Object.keys(styleDef ?? {}).length ? styleDef : null;
+        const revertData = {
+          styleId,
+          originalStyle
+        };
+        if (styleId) {
+          newStyle.variants.forEach(({ meta, props }) => {
+            updateElementStyle({
+              elementId,
+              styleId,
+              meta,
+              props
+            });
+          });
+        } else {
+          const [firstVariant] = newStyle.variants;
+          const additionalVariants = newStyle.variants.slice(1);
+          revertData.styleId = createElementStyle({
+            elementId,
+            classesProp,
+            label: LOCAL_STYLES_RESERVED_LABEL,
+            ...firstVariant,
+            additionalVariants
+          });
+        }
+        return revertData;
+      });
+    },
+    undo: ({ containers }, revertDataItems) => {
+      containers.forEach((container, index) => {
+        const revertData = revertDataItems[index];
+        if (!revertData) {
+          return;
+        }
+        if (!revertData.originalStyle) {
+          deleteElementStyle(container.id, revertData.styleId);
+          return;
+        }
+        const classesProp = getClassesProp(container);
+        if (!classesProp) {
+          return;
+        }
+        const [firstVariant] = revertData.originalStyle.variants;
+        const additionalVariants = revertData.originalStyle.variants.slice(1);
+        createElementStyle({
+          elementId: container.id,
+          classesProp,
+          label: LOCAL_STYLES_RESERVED_LABEL,
+          styleId: revertData.styleId,
+          ...firstVariant,
+          additionalVariants
+        });
+      });
+    }
+  },
+  {
+    title: ({ containers }) => getTitleForContainers(containers),
+    subtitle: __2("Style Pasted", "elementor")
+  }
+);
+
+// src/style-commands/paste-style.ts
+function initPasteStyleCommand() {
+  const pasteElementStyleCommand = undoablePasteElementStyle();
+  blockCommand({
+    command: "document/elements/paste-style",
+    condition: hasAtomicWidgets
+  });
+  listenTo2(
+    commandStartEvent("document/elements/paste-style"),
+    (e) => pasteStyles(e.args, pasteElementStyleCommand)
+  );
+}
+function pasteStyles(args, pasteCallback) {
+  const { containers = [args.container], storageKey } = args;
+  const clipboardElements = getClipboardElements(storageKey);
+  const [clipboardElement] = clipboardElements ?? [];
+  if (!clipboardElement) {
+    return;
+  }
+  const elementStyles = clipboardElement.styles;
+  const elementStyle = Object.values(elementStyles ?? {})[0];
+  if (!elementStyle) {
+    return;
+  }
+  const atomicContainers = containers.filter(isAtomicWidget);
+  if (!atomicContainers.length) {
+    return;
+  }
+  pasteCallback({ containers: atomicContainers, newStyle: elementStyle });
+}
+
+// src/style-commands/reset-style.ts
+import {
+  __privateListenTo as listenTo3,
+  blockCommand as blockCommand2,
+  commandStartEvent as commandStartEvent2
+} from "@elementor/editor-v1-adapters";
+
+// src/style-commands/undoable-actions/reset-element-style.ts
+import { createElementStyle as createElementStyle2, deleteElementStyle as deleteElementStyle2, getElementStyles as getElementStyles2 } from "@elementor/editor-elements";
+import { LOCAL_STYLES_RESERVED_LABEL as LOCAL_STYLES_RESERVED_LABEL2 } from "@elementor/editor-styles-repository";
+import { undoable as undoable2 } from "@elementor/editor-v1-adapters";
+import { __ as __3 } from "@wordpress/i18n";
+var undoableResetElementStyle = () => undoable2(
+  {
+    do: ({ containers }) => {
+      return containers.map((container) => {
+        const elementId = container.model.get("id");
+        const containerStyles = getElementStyles2(elementId);
+        Object.keys(containerStyles ?? {}).forEach(
+          (styleId) => deleteElementStyle2(elementId, styleId)
+        );
+        return containerStyles;
+      });
+    },
+    undo: ({ containers }, revertDataItems) => {
+      containers.forEach((container, index) => {
+        const classesProp = getClassesProp(container);
+        if (!classesProp) {
+          return;
+        }
+        const elementId = container.model.get("id");
+        const containerStyles = revertDataItems[index];
+        Object.entries(containerStyles ?? {}).forEach(([styleId, style]) => {
+          const [firstVariant] = style.variants;
+          const additionalVariants = style.variants.slice(1);
+          createElementStyle2({
+            elementId,
+            classesProp,
+            styleId,
+            label: LOCAL_STYLES_RESERVED_LABEL2,
+            ...firstVariant,
+            additionalVariants
+          });
+        });
+      });
+    }
+  },
+  {
+    title: ({ containers }) => getTitleForContainers(containers),
+    subtitle: __3("Style Reset", "elementor")
+  }
+);
+
+// src/style-commands/reset-style.ts
+function initResetStyleCommand() {
+  const resetElementStyles = undoableResetElementStyle();
+  blockCommand2({
+    command: "document/elements/reset-style",
+    condition: hasAtomicWidgets
+  });
+  listenTo3(
+    commandStartEvent2("document/elements/reset-style"),
+    (e) => resetStyles(e.args, resetElementStyles)
+  );
+}
+function resetStyles(args, resetElementStyles) {
+  const { containers = [args.container] } = args;
+  const atomicContainers = containers.filter(isAtomicWidget);
+  if (!atomicContainers.length) {
+    return;
+  }
+  resetElementStyles({ containers: atomicContainers });
+}
+
+// src/style-commands/init-style-commands.ts
+function initStyleCommands() {
+  initPasteStyleCommand();
+  initResetStyleCommand();
+}
+
 // src/init.tsx
 function init() {
   initStyleTransformers();
   initStylesRenderer();
+  initStyleCommands();
+  initLegacyViews();
+  initSettingsTransformers();
   injectIntoTop({
     id: "elements-overlays",
     component: ElementsOverlays
@@ -516,6 +888,7 @@ function init() {
 // src/index.ts
 init();
 export {
+  settingsTransformersRegistry,
   styleTransformersRegistry
 };
 //# sourceMappingURL=index.mjs.map