@elementor/editor-canvas 0.18.0 → 0.19.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @elementor/editor-canvas@0.18.0 build
+> @elementor/editor-canvas@0.19.0 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.07 KB
-ESM dist/index.mjs.map 83.22 KB
-ESM ⚡️ Build success in 299ms
-CJS dist/index.js     42.18 KB
-CJS dist/index.js.map 83.28 KB
-CJS ⚡️ Build success in 301ms
+CJS dist/index.js     44.01 KB
+CJS dist/index.js.map 86.67 KB
+CJS ⚡️ Build success in 279ms
+ESM dist/index.mjs     40.87 KB
+ESM dist/index.mjs.map 86.66 KB
+ESM ⚡️ Build success in 281ms
 DTS Build start
-DTS ⚡️ Build success in 19889ms
+DTS ⚡️ Build success in 20898ms
 DTS dist/index.d.mts 1.28 KB
 DTS dist/index.d.ts  1.28 KB

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @elementor/editor-canvas
 
+## 0.19.0
+
+### Minor Changes
+
+- 10cbbe9: update `@elementor/ui` version
+
+### Patch Changes
+
+- ce1852b: Styles are rendered reversed in the editor
+- Updated dependencies [10cbbe9]
+  - @elementor/editor-notifications@1.1.0
+  - @elementor/editor@0.19.0
+
+## 0.18.1
+
+### Patch Changes
+
+- 2b77932: Fix legacy CSS links not prioritized correctly
+
 ## 0.18.0
 
 ### Minor Changes

package/dist/index.js

@@ -168,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) {
@@ -461,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);
     });
@@ -470,7 +525,7 @@ function useStyleItems() {
 }
 function createProviderSubscriber({ provider, renderStyles, setStyleItems }) {
   return abortPreviousRuns(
-    (abortController) => signalizedProcess(abortController.signal).then((_, signal) => renderStyles({ styles: provider.actions.all(), signal })).then((items) => {
+    (abortController) => signalizedProcess(abortController.signal).then((_, signal) => renderStyles({ styles: [...provider.actions.all()].reverse(), signal })).then((items) => {
       setStyleItems((prev) => ({
         ...prev,
         [provider.getKey()]: { provider, items }
@@ -479,23 +534,18 @@ function createProviderSubscriber({ provider, renderStyles, setStyleItems }) {
   );
 }
 
-// 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 }, 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
@@ -679,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");
@@ -882,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();
@@ -899,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
   });
@@ -980,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
@@ -1031,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) => {
@@ -1106,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)
   );
 }
@@ -1135,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) => {
@@ -1186,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)
   );
 }