@elementor/editor-canvas 0.17.0 → 0.18.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @elementor/editor-canvas@0.17.0 build
+> @elementor/editor-canvas@0.18.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     39.11 KB
-ESM dist/index.mjs.map 83.52 KB
-ESM ⚡️ Build success in 216ms
-CJS dist/index.js     42.21 KB
-CJS dist/index.js.map 83.29 KB
-CJS ⚡️ Build success in 220ms
+ESM dist/index.mjs     40.86 KB
+ESM dist/index.mjs.map 86.61 KB
+ESM ⚡️ Build success in 265ms
+CJS dist/index.js     43.99 KB
+CJS dist/index.js.map 86.63 KB
+CJS ⚡️ Build success in 265ms
 DTS Build start
-DTS ⚡️ Build success in 21039ms
-DTS dist/index.d.mts 1.24 KB
-DTS dist/index.d.ts  1.24 KB
+DTS ⚡️ Build success in 19913ms
+DTS dist/index.d.mts 1.28 KB
+DTS dist/index.d.ts  1.28 KB

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @elementor/editor-canvas
 
+## 0.18.1
+
+### Patch Changes
+
+- 2b77932: Fix legacy CSS links not prioritized correctly
+
+## 0.18.0
+
+### Minor Changes
+
+- f9d5d33: Change element selection overlay position
+
+### Patch Changes
+
+- 42c42ee: Remove side-effects
+- 5fa575c: Fix when switching documents it removes all the previous document styles
+- 64574e3: Refactor styles provider as a preparation for header/footer styles not being rendered
+- Updated dependencies [42c42ee]
+- Updated dependencies [5fa575c]
+- Updated dependencies [64574e3]
+- Updated dependencies [fe0ab45]
+- Updated dependencies [fd5251c]
+  - @elementor/editor-styles-repository@0.8.4
+  - @elementor/editor-notifications@1.0.1
+  - @elementor/editor@0.18.6
+  - @elementor/editor-elements@0.8.1
+  - @elementor/editor-props@0.12.0
+  - @elementor/editor-styles@0.6.6
+
 ## 0.17.0
 
 ### Minor Changes

package/dist/index.d.mts

@@ -1,6 +1,8 @@
 import * as _elementor_editor_props from '@elementor/editor-props';
 import { AnyTransformable } from '@elementor/editor-props';
 
+declare function init(): void;
+
 type UnbrandedTransformer<TValue> = (value: TValue, options: {
     key: string;
     signal?: AbortSignal;
@@ -24,4 +26,4 @@ declare const settingsTransformersRegistry: {
 
 declare function createTransformer<TValue = never>(cb: TValue extends AnyTransformable ? 'Transformable values are invalid, use the actual value instead.' : UnbrandedTransformer<TValue>): Transformer<NoInfer<TValue>>;
 
-export { createTransformer, settingsTransformersRegistry, styleTransformersRegistry };
+export { createTransformer, init, settingsTransformersRegistry, styleTransformersRegistry };

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 import * as _elementor_editor_props from '@elementor/editor-props';
 import { AnyTransformable } from '@elementor/editor-props';
 
+declare function init(): void;
+
 type UnbrandedTransformer<TValue> = (value: TValue, options: {
     key: string;
     signal?: AbortSignal;
@@ -24,4 +26,4 @@ declare const settingsTransformersRegistry: {
 
 declare function createTransformer<TValue = never>(cb: TValue extends AnyTransformable ? 'Transformable values are invalid, use the actual value instead.' : UnbrandedTransformer<TValue>): Transformer<NoInfer<TValue>>;
 
-export { createTransformer, settingsTransformersRegistry, styleTransformersRegistry };
+export { createTransformer, init, settingsTransformersRegistry, styleTransformersRegistry };

package/dist/index.js

@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   createTransformer: () => createTransformer,
+  init: () => init,
   settingsTransformersRegistry: () => settingsTransformersRegistry,
   styleTransformersRegistry: () => styleTransformersRegistry
 });
@@ -98,8 +99,8 @@ function useFloatingOnElement({ element, isSelected }) {
       (0, import_react3.size)({
         apply({ elements, rects }) {
           Object.assign(elements.floating.style, {
-            width: `${rects.reference.width}px`,
-            height: `${rects.reference.height}px`
+            width: `${rects.reference.width + 2}px`,
+            height: `${rects.reference.height + 2}px`
           });
         }
       }),
@@ -167,13 +168,68 @@ function useElementsDom() {
 
 // src/components/style-renderer.tsx
 var React3 = __toESM(require("react"));
-var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
 var import_ui2 = require("@elementor/ui");
 
+// src/hooks/use-documents-css-links.ts
+var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
+
+// src/sync/get-canvas-iframe-document.ts
+function getCanvasIframeDocument() {
+  const extendedWindow = window;
+  return extendedWindow.elementor?.$preview?.[0]?.contentDocument;
+}
+
+// src/hooks/use-documents-css-links.ts
+var REMOVED_ATTR = "data-e-removed";
+var DOCUMENT_WRAPPER_ATTR = "data-elementor-id";
+var CSS_LINK_ID_PREFIX = "elementor-post-";
+var CSS_LINK_ID_SUFFIX = "-css";
+function useDocumentsCssLinks() {
+  return (0, import_editor_v1_adapters2.__privateUseListenTo)((0, import_editor_v1_adapters2.commandEndEvent)("editor/documents/attach-preview"), () => {
+    const iframeDocument = getCanvasIframeDocument();
+    if (!iframeDocument) {
+      return [];
+    }
+    const relevantLinkIds = getDocumentsIdsInCanvas(iframeDocument).map(
+      (id) => `${CSS_LINK_ID_PREFIX}${id}${CSS_LINK_ID_SUFFIX}`
+    );
+    const links = getDocumentsCssLinks(iframeDocument).filter(
+      (link) => relevantLinkIds.includes(link.getAttribute("id") ?? "")
+    );
+    links.forEach((link) => {
+      if (!link.hasAttribute(REMOVED_ATTR)) {
+        link.remove();
+      }
+    });
+    return links.map((link) => ({
+      ...getLinkAttrs(link),
+      id: link.getAttribute("id") ?? "",
+      [REMOVED_ATTR]: true
+    }));
+  });
+}
+function getDocumentsIdsInCanvas(document) {
+  return [...document.body.querySelectorAll(`[${DOCUMENT_WRAPPER_ATTR}]`) ?? []].map(
+    (el) => el.getAttribute(DOCUMENT_WRAPPER_ATTR) || ""
+  );
+}
+function getDocumentsCssLinks(document) {
+  return [
+    ...document.head.querySelectorAll(
+      `link[rel="stylesheet"][id^=${CSS_LINK_ID_PREFIX}][id$=${CSS_LINK_ID_SUFFIX}]`
+    ) ?? []
+  ];
+}
+function getLinkAttrs(el) {
+  const entries = [...el.attributes].map((attr) => [attr.name, attr.value]);
+  return Object.fromEntries(entries);
+}
+
 // src/hooks/use-style-items.ts
 var import_react8 = require("react");
 var import_editor_styles_repository = require("@elementor/editor-styles-repository");
-var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
 
 // src/utils/abort-previous-runs.ts
 function abortPreviousRuns(cb) {
@@ -460,7 +516,7 @@ function useStyleItems() {
     };
   }, [providerAndSubscribers]);
   useOnMount(() => {
-    (0, import_editor_v1_adapters2.registerDataHook)("after", "editor/documents/attach-preview", async () => {
+    (0, import_editor_v1_adapters3.registerDataHook)("after", "editor/documents/attach-preview", async () => {
       const promises = providerAndSubscribers.map(async ({ subscriber }) => subscriber());
       await Promise.all(promises);
     });
@@ -469,32 +525,27 @@ function useStyleItems() {
 }
 function createProviderSubscriber({ provider, renderStyles, setStyleItems }) {
   return abortPreviousRuns(
-    (abortController) => signalizedProcess(abortController.signal).then((_, signal) => renderStyles({ styles: provider.actions.get(), signal })).then((items) => {
+    (abortController) => signalizedProcess(abortController.signal).then((_, signal) => renderStyles({ styles: provider.actions.all(), signal })).then((items) => {
       setStyleItems((prev) => ({
         ...prev,
-        [provider.key]: { provider, items }
+        [provider.getKey()]: { provider, items }
       }));
     }).execute()
   );
 }
 
-// src/sync/get-canvas-iframe-head.ts
-function getCanvasIframeHead() {
-  const extendedWindow = window;
-  return extendedWindow.elementor?.$preview?.[0]?.contentDocument?.head;
-}
-
 // src/components/style-renderer.tsx
 function StyleRenderer() {
   const container = usePortalContainer();
   const styleItems = useStyleItems();
+  const linksAttrs = useDocumentsCssLinks();
   if (!container) {
     return null;
   }
-  return /* @__PURE__ */ React3.createElement(import_ui2.Portal, { container }, /* @__PURE__ */ React3.createElement(React3.Fragment, null, styleItems.map((item) => /* @__PURE__ */ React3.createElement("style", { "data-e-style-id": item.id, key: item.id }, item.value))));
+  return /* @__PURE__ */ React3.createElement(import_ui2.Portal, { container }, styleItems.map((item) => /* @__PURE__ */ React3.createElement("style", { "data-e-style-id": item.id, key: item.id }, item.value)), linksAttrs.map((attrs) => /* @__PURE__ */ React3.createElement("link", { ...attrs, key: attrs.id })));
 }
 function usePortalContainer() {
-  return (0, import_editor_v1_adapters3.__privateUseListenTo)((0, import_editor_v1_adapters3.commandEndEvent)("editor/documents/attach-preview"), () => getCanvasIframeHead());
+  return (0, import_editor_v1_adapters4.__privateUseListenTo)((0, import_editor_v1_adapters4.commandEndEvent)("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
 }
 
 // src/settings-transformers-registry.ts
@@ -678,7 +729,7 @@ function initStyleTransformers() {
 
 // src/legacy/init-legacy-views.ts
 var import_editor_elements2 = require("@elementor/editor-elements");
-var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
 
 // src/renderers/create-dom-renderer.ts
 var import_twing = require("@elementor/twing");
@@ -881,7 +932,7 @@ function createTemplatedElementViewClassDeclaration({
 
 // src/legacy/init-legacy-views.ts
 function initLegacyViews() {
-  (0, import_editor_v1_adapters4.__privateListenTo)((0, import_editor_v1_adapters4.v1ReadyEvent)(), () => {
+  (0, import_editor_v1_adapters5.__privateListenTo)((0, import_editor_v1_adapters5.v1ReadyEvent)(), () => {
     const config = (0, import_editor_elements2.getWidgetsCache)() ?? {};
     const legacyWindow = window;
     const renderer = createDomRenderer();
@@ -898,14 +949,14 @@ function initLegacyViews() {
 // src/prevent-link-in-link-commands.ts
 var import_editor_elements3 = require("@elementor/editor-elements");
 var import_editor_notifications = require("@elementor/editor-notifications");
-var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
 var import_i18n = require("@wordpress/i18n");
 function initLinkInLinkPrevention() {
-  (0, import_editor_v1_adapters5.blockCommand)({
+  (0, import_editor_v1_adapters6.blockCommand)({
     command: "document/elements/paste",
     condition: blockLinkInLinkPaste
   });
-  (0, import_editor_v1_adapters5.blockCommand)({
+  (0, import_editor_v1_adapters6.blockCommand)({
     command: "document/elements/move",
     condition: blockLinkInLinkMove
   });
@@ -979,12 +1030,12 @@ function shouldBlock(sourceElements, targetElements) {
 }
 
 // src/style-commands/paste-style.ts
-var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
 
 // src/style-commands/undoable-actions/paste-element-style.ts
 var import_editor_elements5 = require("@elementor/editor-elements");
 var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
-var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
 var import_i18n3 = require("@wordpress/i18n");
 
 // src/style-commands/utils.ts
@@ -1030,7 +1081,7 @@ function getTitleForContainers(containers) {
 }
 
 // src/style-commands/undoable-actions/paste-element-style.ts
-var undoablePasteElementStyle = () => (0, import_editor_v1_adapters6.undoable)(
+var undoablePasteElementStyle = () => (0, import_editor_v1_adapters7.undoable)(
   {
     do: ({ containers, newStyle }) => {
       return containers.map((container) => {
@@ -1061,7 +1112,7 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters6.undoable)(
           revertData.styleId = (0, import_editor_elements5.createElementStyle)({
             elementId,
             classesProp,
-            label: import_editor_styles_repository2.LOCAL_STYLES_RESERVED_LABEL,
+            label: import_editor_styles_repository2.ELEMENTS_STYLES_RESERVED_LABEL,
             ...firstVariant,
             additionalVariants
           });
@@ -1088,7 +1139,7 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters6.undoable)(
         (0, import_editor_elements5.createElementStyle)({
           elementId: container.id,
           classesProp,
-          label: import_editor_styles_repository2.LOCAL_STYLES_RESERVED_LABEL,
+          label: import_editor_styles_repository2.ELEMENTS_STYLES_RESERVED_LABEL,
           styleId: revertData.styleId,
           ...firstVariant,
           additionalVariants
@@ -1105,12 +1156,12 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters6.undoable)(
 // src/style-commands/paste-style.ts
 function initPasteStyleCommand() {
   const pasteElementStyleCommand = undoablePasteElementStyle();
-  (0, import_editor_v1_adapters7.blockCommand)({
+  (0, import_editor_v1_adapters8.blockCommand)({
     command: "document/elements/paste-style",
     condition: hasAtomicWidgets
   });
-  (0, import_editor_v1_adapters7.__privateListenTo)(
-    (0, import_editor_v1_adapters7.commandStartEvent)("document/elements/paste-style"),
+  (0, import_editor_v1_adapters8.__privateListenTo)(
+    (0, import_editor_v1_adapters8.commandStartEvent)("document/elements/paste-style"),
     (e) => pasteStyles(e.args, pasteElementStyleCommand)
   );
 }
@@ -1134,14 +1185,14 @@ function pasteStyles(args, pasteCallback) {
 }
 
 // src/style-commands/reset-style.ts
-var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters10 = require("@elementor/editor-v1-adapters");
 
 // src/style-commands/undoable-actions/reset-element-style.ts
 var import_editor_elements6 = require("@elementor/editor-elements");
 var import_editor_styles_repository3 = require("@elementor/editor-styles-repository");
-var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
 var import_i18n4 = require("@wordpress/i18n");
-var undoableResetElementStyle = () => (0, import_editor_v1_adapters8.undoable)(
+var undoableResetElementStyle = () => (0, import_editor_v1_adapters9.undoable)(
   {
     do: ({ containers }) => {
       return containers.map((container) => {
@@ -1168,7 +1219,7 @@ var undoableResetElementStyle = () => (0, import_editor_v1_adapters8.undoable)(
             elementId,
             classesProp,
             styleId,
-            label: import_editor_styles_repository3.LOCAL_STYLES_RESERVED_LABEL,
+            label: import_editor_styles_repository3.ELEMENTS_STYLES_RESERVED_LABEL,
             ...firstVariant,
             additionalVariants
           });
@@ -1185,12 +1236,12 @@ var undoableResetElementStyle = () => (0, import_editor_v1_adapters8.undoable)(
 // src/style-commands/reset-style.ts
 function initResetStyleCommand() {
   const resetElementStyles = undoableResetElementStyle();
-  (0, import_editor_v1_adapters9.blockCommand)({
+  (0, import_editor_v1_adapters10.blockCommand)({
     command: "document/elements/reset-style",
     condition: hasAtomicWidgets
   });
-  (0, import_editor_v1_adapters9.__privateListenTo)(
-    (0, import_editor_v1_adapters9.commandStartEvent)("document/elements/reset-style"),
+  (0, import_editor_v1_adapters10.__privateListenTo)(
+    (0, import_editor_v1_adapters10.commandStartEvent)("document/elements/reset-style"),
     (e) => resetStyles(e.args, resetElementStyles)
   );
 }
@@ -1225,12 +1276,10 @@ function init() {
     component: StyleRenderer
   });
 }
-
-// src/index.ts
-init();
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   createTransformer,
+  init,
   settingsTransformersRegistry,
   styleTransformersRegistry
 });