@elementor/editor-canvas 0.12.0 → 0.13.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @elementor/editor-canvas@0.12.0 build
+> @elementor/editor-canvas@0.13.1 build
 > tsup --config=../../tsup.build.ts
 
 CLI Building entry: src/index.ts
@@ -10,13 +10,13 @@
 CLI Cleaning output folder
 ESM Build start
 CJS Build start
-ESM dist/index.mjs     17.96 KB
-ESM dist/index.mjs.map 39.31 KB
-ESM ⚡️ Build success in 193ms
-CJS dist/index.js     20.07 KB
-CJS dist/index.js.map 39.36 KB
-CJS ⚡️ Build success in 195ms
+ESM dist/index.mjs     29.82 KB
+ESM dist/index.mjs.map 62.58 KB
+ESM ⚡️ Build success in 181ms
+CJS dist/index.js     32.49 KB
+CJS dist/index.js.map 62.41 KB
+CJS ⚡️ Build success in 184ms
 DTS Build start
-DTS ⚡️ Build success in 22077ms
-DTS dist/index.d.mts 561.00 B
-DTS dist/index.d.ts  561.00 B
+DTS ⚡️ Build success in 20884ms
+DTS dist/index.d.mts 751.00 B
+DTS dist/index.d.ts  751.00 B

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # @elementor/editor-canvas
 
+## 0.13.1
+
+### Patch Changes
+
+- Updated dependencies [14610ee]
+  - @elementor/editor-elements@0.6.4
+  - @elementor/editor-styles-repository@0.7.7
+
+## 0.13.0
+
+### Minor Changes
+
+- b8a7725: Add settings transformers
+- 98d2a8e: Added support to atomic elements for command "document/elements/paste-style"
+- 4c2935b: Added support to atomic elements for command "document/elements/reset-style"
+- 4510821: Remove 'save' options from the editor context menu.
+- c002cba: Change background color overlay shape to support variables
+- 070b92c: Register legacy views
+
+### Patch Changes
+
+- 51432b9: The editor loader disappears before the styles finish rendering
+- Updated dependencies [b8a7725]
+- Updated dependencies [e798985]
+- Updated dependencies [4c2935b]
+- Updated dependencies [8231e7c]
+- Updated dependencies [19f5dfe]
+- Updated dependencies [c002cba]
+- Updated dependencies [51432b9]
+- Updated dependencies [070b92c]
+- Updated dependencies [0909b4b]
+  - @elementor/wp-media@0.6.0
+  - @elementor/editor-v1-adapters@0.11.0
+  - @elementor/editor-props@0.11.0
+  - @elementor/editor-elements@0.6.3
+  - @elementor/editor@0.18.3
+  - @elementor/editor-styles-repository@0.7.6
+  - @elementor/editor-responsive@0.13.3
+  - @elementor/editor-styles@0.6.3
+
 ## 0.12.0
 
 ### Minor Changes

package/dist/index.d.mts

@@ -15,4 +15,9 @@ declare const styleTransformersRegistry: {
     all(): TransformersMap;
 };
 
-export { styleTransformersRegistry };
+declare const settingsTransformersRegistry: {
+    register(name: TransformerName, transformer: AnyTransformer): /*elided*/ any;
+    all(): TransformersMap;
+};
+
+export { settingsTransformersRegistry, styleTransformersRegistry };

package/dist/index.d.ts

@@ -15,4 +15,9 @@ declare const styleTransformersRegistry: {
     all(): TransformersMap;
 };
 
-export { styleTransformersRegistry };
+declare const settingsTransformersRegistry: {
+    register(name: TransformerName, transformer: AnyTransformer): /*elided*/ any;
+    all(): TransformersMap;
+};
+
+export { settingsTransformersRegistry, styleTransformersRegistry };

package/dist/index.js

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  settingsTransformersRegistry: () => settingsTransformersRegistry,
   styleTransformersRegistry: () => styleTransformersRegistry
 });
 module.exports = __toCommonJS(index_exports);
@@ -175,18 +176,81 @@ 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
+var import_wp_media = require("@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 (0, import_wp_media.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) => {
@@ -203,8 +267,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
@@ -261,42 +326,6 @@ var createMultiPropsTransformer = (keys, keyGenerator) => {
   });
 };
 
-// src/transformers/styles/image-attachment-transformer.ts
-var import_wp_media = require("@elementor/wp-media");
-var imageAttachmentTransformer = createTransformer(async (value) => {
-  const attachment = await (0, import_wp_media.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(" ");
@@ -325,7 +354,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-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", 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(
@@ -509,7 +538,7 @@ function initStylesRenderer() {
       schema: (0, import_editor_styles.getStylesSchema)(),
       onPropResolve: enqueueUsedFonts
     });
-    import_editor_styles_repository.stylesRepository.subscribe(async () => {
+    const injectStyleElements = async () => {
       const styleContainer = getStylesContainer();
       const styles = import_editor_styles_repository.stylesRepository.all().reverse();
       const breakpoints = (0, import_editor_responsive.getBreakpointsMap)();
@@ -524,7 +553,9 @@ function initStylesRenderer() {
         selectorPrefix: SELECTOR_PREFIX,
         signal: abortController.signal
       });
-    });
+    };
+    import_editor_styles_repository.stylesRepository.subscribe(injectStyleElements);
+    (0, import_editor_v1_adapters2.registerDataHook)("after", "editor/documents/attach-preview", injectStyleElements);
   });
 }
 function getStylesContainer() {
@@ -550,10 +581,326 @@ function enqueueUsedFonts({ key, value }) {
   enqueueFont(value);
 }
 
+// src/legacy/init-legacy-views.ts
+var import_editor_elements2 = require("@elementor/editor-elements");
+var import_editor_v1_adapters3 = require("@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() {
+  (0, import_editor_v1_adapters3.__privateListenTo)((0, import_editor_v1_adapters3.v1ReadyEvent)(), () => {
+    const config = (0, import_editor_elements2.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
+var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
+
+// src/style-commands/undoable-actions/paste-element-style.ts
+var import_editor_elements4 = require("@elementor/editor-elements");
+var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
+var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
+var import_i18n2 = require("@wordpress/i18n");
+
+// src/style-commands/utils.ts
+var import_editor_elements3 = require("@elementor/editor-elements");
+var import_editor_props2 = require("@elementor/editor-props");
+var import_i18n = require("@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 === import_editor_props2.CLASSES_PROP_KEY
+  ) ?? [];
+  return propKey ?? null;
+}
+function getContainerSchema(container) {
+  const type = container?.model.get("widgetType") || container?.model.get("elType");
+  const widgetsCache = (0, import_editor_elements3.getWidgetsCache)();
+  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 ? (0, import_i18n.__)("Elements", "elementor") : (0, import_editor_elements3.getElementLabel)(containers[0].id);
+}
+
+// src/style-commands/undoable-actions/paste-element-style.ts
+var undoablePasteElementStyle = () => (0, import_editor_v1_adapters4.undoable)(
+  {
+    do: ({ containers, newStyle }) => {
+      return containers.map((container) => {
+        const elementId = container.id;
+        const classesProp = getClassesProp(container);
+        if (!classesProp) {
+          return null;
+        }
+        const originalStyles = (0, import_editor_elements4.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 }) => {
+            (0, import_editor_elements4.updateElementStyle)({
+              elementId,
+              styleId,
+              meta,
+              props
+            });
+          });
+        } else {
+          const [firstVariant] = newStyle.variants;
+          const additionalVariants = newStyle.variants.slice(1);
+          revertData.styleId = (0, import_editor_elements4.createElementStyle)({
+            elementId,
+            classesProp,
+            label: import_editor_styles_repository2.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) {
+          (0, import_editor_elements4.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);
+        (0, import_editor_elements4.createElementStyle)({
+          elementId: container.id,
+          classesProp,
+          label: import_editor_styles_repository2.LOCAL_STYLES_RESERVED_LABEL,
+          styleId: revertData.styleId,
+          ...firstVariant,
+          additionalVariants
+        });
+      });
+    }
+  },
+  {
+    title: ({ containers }) => getTitleForContainers(containers),
+    subtitle: (0, import_i18n2.__)("Style Pasted", "elementor")
+  }
+);
+
+// src/style-commands/paste-style.ts
+function initPasteStyleCommand() {
+  const pasteElementStyleCommand = undoablePasteElementStyle();
+  (0, import_editor_v1_adapters5.blockCommand)({
+    command: "document/elements/paste-style",
+    condition: hasAtomicWidgets
+  });
+  (0, import_editor_v1_adapters5.__privateListenTo)(
+    (0, import_editor_v1_adapters5.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
+var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
+
+// src/style-commands/undoable-actions/reset-element-style.ts
+var import_editor_elements5 = require("@elementor/editor-elements");
+var import_editor_styles_repository3 = require("@elementor/editor-styles-repository");
+var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
+var import_i18n3 = require("@wordpress/i18n");
+var undoableResetElementStyle = () => (0, import_editor_v1_adapters6.undoable)(
+  {
+    do: ({ containers }) => {
+      return containers.map((container) => {
+        const elementId = container.model.get("id");
+        const containerStyles = (0, import_editor_elements5.getElementStyles)(elementId);
+        Object.keys(containerStyles ?? {}).forEach(
+          (styleId) => (0, import_editor_elements5.deleteElementStyle)(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);
+          (0, import_editor_elements5.createElementStyle)({
+            elementId,
+            classesProp,
+            styleId,
+            label: import_editor_styles_repository3.LOCAL_STYLES_RESERVED_LABEL,
+            ...firstVariant,
+            additionalVariants
+          });
+        });
+      });
+    }
+  },
+  {
+    title: ({ containers }) => getTitleForContainers(containers),
+    subtitle: (0, import_i18n3.__)("Style Reset", "elementor")
+  }
+);
+
+// src/style-commands/reset-style.ts
+function initResetStyleCommand() {
+  const resetElementStyles = undoableResetElementStyle();
+  (0, import_editor_v1_adapters7.blockCommand)({
+    command: "document/elements/reset-style",
+    condition: hasAtomicWidgets
+  });
+  (0, import_editor_v1_adapters7.__privateListenTo)(
+    (0, import_editor_v1_adapters7.commandStartEvent)("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();
   (0, import_editor.injectIntoTop)({
     id: "elements-overlays",
     component: ElementsOverlays
@@ -564,6 +911,7 @@ function init() {
 init();
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  settingsTransformersRegistry,
   styleTransformersRegistry
 });
 //# sourceMappingURL=index.js.map