@elementor/editor-components 4.2.0-935 → 4.2.0-936

package/dist/index.mjs

@@ -7,7 +7,7 @@ import {
 import { getV1CurrentDocument } from "@elementor/editor-documents";
 import { registerEditingPanelReplacement } from "@elementor/editor-editing-panel";
 import { injectTab } from "@elementor/editor-elements-panel";
-import { stylesRepository } from "@elementor/editor-styles-repository";
+import { embeddedDocumentsManager as embeddedDocumentsManager2 } from "@elementor/editor-embedded-documents-manager";
 import { registerDataHook as registerDataHook2 } from "@elementor/editor-v1-adapters";
 import { __registerSlice as registerSlice } from "@elementor/store";
 import { __ as __16 } from "@wordpress/i18n";
@@ -24,7 +24,6 @@ var initialState = {
   data: [],
   unpublishedData: [],
   loadStatus: "idle",
-  styles: {},
   createdThisSession: [],
   archivedThisSession: [],
   path: [],
@@ -148,13 +147,6 @@ var baseSlice = createSlice({
     resetUnpublished: (state) => {
       state.unpublishedData = [];
     },
-    removeStyles(state, { payload }) {
-      const { [payload.id]: _, ...rest } = state.styles;
-      state.styles = rest;
-    },
-    addStyles: (state, { payload }) => {
-      state.styles = { ...state.styles, ...payload };
-    },
     addCreatedThisSession: (state, { payload }) => {
       state.createdThisSession.push(payload);
     },
@@ -249,7 +241,6 @@ var slice = {
 var selectData = (state) => state[SLICE_NAME].data;
 var selectArchivedThisSession = (state) => state[SLICE_NAME].archivedThisSession;
 var selectLoadStatus = (state) => state[SLICE_NAME].loadStatus;
-var selectStylesDefinitions = (state) => state[SLICE_NAME].styles ?? {};
 var selectUnpublishedData = (state) => state[SLICE_NAME].unpublishedData;
 var getCreatedThisSession = (state) => state[SLICE_NAME].createdThisSession;
 var getPath = (state) => state[SLICE_NAME].path;
@@ -277,17 +268,6 @@ var selectUnpublishedComponents = createSelector(
 );
 var selectLoadIsPending = createSelector(selectLoadStatus, (status) => status === "pending");
 var selectLoadIsError = createSelector(selectLoadStatus, (status) => status === "error");
-var selectStyles = (state) => state[SLICE_NAME].styles ?? {};
-var selectFlatStyles = createSelector(
-  selectStylesDefinitions,
-  (_state, excludeComponentId = null) => excludeComponentId,
-  (data, excludeComponentId) => {
-    if (excludeComponentId === null) {
-      return Object.values(data).flat();
-    }
-    return Object.entries(data).filter(([id]) => id !== String(excludeComponentId)).map(([, styles]) => styles).flat();
-  }
-);
 var selectCreatedThisSession = createSelector(
   getCreatedThisSession,
   (createdThisSession) => createdThisSession
@@ -1682,12 +1662,6 @@ var componentsActions = {
   resetUnpublished() {
     dispatch2(slice.actions.resetUnpublished());
   },
-  removeStyles(id) {
-    dispatch2(slice.actions.removeStyles({ id }));
-  },
-  addStyles(styles) {
-    dispatch2(slice.actions.addStyles(styles));
-  },
   addCreatedThisSession(uid) {
     dispatch2(slice.actions.addCreatedThisSession(uid));
   },
@@ -2516,13 +2490,18 @@ import { isHandlingTemplateStyles, useLoadedTemplates } from "@elementor/editor-
 
 // src/store/actions/load-components-assets.ts
 import { isDocumentDirty, setDocumentModifiedStatus } from "@elementor/editor-documents";
+import { embeddedDocumentsManager } from "@elementor/editor-embedded-documents-manager";
 
 // src/utils/get-component-documents.ts
-async function getComponentDocuments(elements, cache = /* @__PURE__ */ new Map()) {
-  const componentIds = await getComponentIds(elements, cache);
+async function getComponentDocuments({
+  elements,
+  cache = /* @__PURE__ */ new Map(),
+  isRecursive = true
+}) {
+  const componentIds = await getComponentIds(elements, cache, isRecursive);
   return getDocumentsMap(componentIds, cache);
 }
-async function getComponentIds(elements, cache) {
+async function getComponentIds(elements, cache, isRecursive) {
   const results = await Promise.all(
     elements.map(async ({ widgetType, elType, elements: childElements, settings }) => {
       const ids = [];
@@ -2538,8 +2517,8 @@ async function getComponentIds(elements, cache) {
         const doc = await cache.get(componentId);
         childElements = doc?.elements;
       }
-      if (childElements?.length) {
-        const childIds = await getComponentIds(childElements, cache);
+      if (isRecursive && childElements?.length) {
+        const childIds = await getComponentIds(childElements, cache, isRecursive);
         ids.push(...childIds);
       }
       return ids;
@@ -2571,47 +2550,13 @@ async function loadComponentsOverridableProps(componentIds) {
   dispatch3(slice.actions.loadOverridableProps(data));
 }
 
-// src/store/actions/load-components-styles.ts
-import { addDocumentClasses } from "@elementor/editor-global-classes";
-import { __dispatch as dispatch4, __getState as getState7 } from "@elementor/store";
-function loadComponentsStyles(documents) {
-  if (!documents.size) {
-    return;
-  }
-  const knownComponents = selectStyles(getState7());
-  const unknownDocuments = new Map([...documents.entries()].filter(([id]) => !knownComponents[id]));
-  if (!unknownDocuments.size) {
-    return;
-  }
-  addStyles(unknownDocuments);
-}
-function addStyles(documents) {
-  const styles = Object.fromEntries(
-    [...documents.entries()].map(([id, document2]) => {
-      addDocumentClasses(id);
-      return [id, extractStylesFromDocument(document2)];
-    })
-  );
-  dispatch4(slice.actions.addStyles(styles));
-}
-function extractStylesFromDocument(document2) {
-  if (!document2.elements?.length) {
-    return [];
-  }
-  return document2.elements.flatMap(extractStylesFromElement);
-}
-function extractStylesFromElement(element) {
-  return [
-    ...Object.values(element.styles ?? {}),
-    ...(element.elements ?? []).flatMap(extractStylesFromElement)
-  ];
-}
-
 // src/store/actions/load-components-assets.ts
 async function loadComponentsAssets(elements) {
-  const documents = await getComponentDocuments(elements);
+  const documents = await getComponentDocuments({ elements, isRecursive: false });
   updateDocumentState(documents);
-  loadComponentsStyles(documents);
+  documents.forEach((document2, id) => {
+    embeddedDocumentsManager.setDocument(id, document2);
+  });
   await loadComponentsOverridableProps([...documents.keys()]);
 }
 function updateDocumentState(documents) {
@@ -2642,7 +2587,7 @@ import {
 } from "@elementor/editor-canvas";
 import { getCurrentDocument } from "@elementor/editor-documents";
 import { notify as notify2 } from "@elementor/editor-notifications";
-import { __getState as getState8 } from "@elementor/store";
+import { __getState as getState7 } from "@elementor/store";
 import { hasProInstalled as hasProInstalled2 } from "@elementor/utils";
 import { __ as __13 } from "@wordpress/i18n";
 
@@ -3033,7 +2978,7 @@ function createComponentModel() {
       }
       const componentUid = editorSettings?.component_uid;
       if (componentUid) {
-        const component = selectComponentByUid(getState8(), componentUid);
+        const component = selectComponentByUid(getState7(), componentUid);
         if (component?.name) {
           return component.name;
         }
@@ -3055,10 +3000,10 @@ function createComponentModel() {
 
 // src/populate-store.ts
 import { useEffect as useEffect2 } from "react";
-import { __dispatch as dispatch5 } from "@elementor/store";
+import { __dispatch as dispatch4 } from "@elementor/store";
 function PopulateStore() {
   useEffect2(() => {
-    dispatch5(loadComponents());
+    dispatch4(loadComponents());
   }, []);
   return null;
 }
@@ -3067,7 +3012,7 @@ function PopulateStore() {
 import { getAllDescendants } from "@elementor/editor-elements";
 import { notify as notify3 } from "@elementor/editor-notifications";
 import { blockCommand } from "@elementor/editor-v1-adapters";
-import { __getState as getState9 } from "@elementor/store";
+import { __getState as getState8 } from "@elementor/store";
 import { __ as __14 } from "@wordpress/i18n";
 var COMPONENT_TYPE = "e-component";
 var COMPONENT_CIRCULAR_NESTING_ALERT = {
@@ -3093,7 +3038,7 @@ function wouldCreateCircularNesting(componentIdToAdd) {
   if (componentIdToAdd === void 0) {
     return false;
   }
-  const state = getState9();
+  const state = getState8();
   const currentComponentId = selectCurrentComponentId(state);
   const path = selectPath(state);
   if (currentComponentId === null) {
@@ -3191,35 +3136,9 @@ function blockCircularPaste(args) {
 }
 
 // src/store/actions/remove-component-styles.ts
-import { __dispatch as dispatch6 } from "@elementor/store";
 function removeComponentStyles(id) {
   apiClient.invalidateComponentConfigCache(id);
-  dispatch6(slice.actions.removeStyles({ id }));
-}
-
-// src/store/components-styles-provider.ts
-import { getCurrentDocumentId } from "@elementor/editor-elements";
-import { createStylesProvider } from "@elementor/editor-styles-repository";
-import { __getState as getState10, __subscribeWithSelector as subscribeWithSelector } from "@elementor/store";
-var componentsStylesProvider = createStylesProvider({
-  key: "components-styles",
-  priority: 100,
-  subscribe: (cb) => subscribeWithSelector(
-    (state) => state[SLICE_NAME],
-    () => {
-      cb();
-    }
-  ),
-  actions: {
-    all: () => {
-      const currentDocumentId = getCurrentDocumentId();
-      return selectFlatStyles(getState10(), currentDocumentId);
-    },
-    get: (id) => {
-      return selectFlatStyles(getState10()).find((style) => style.id === id) ?? null;
-    }
-  }
-});
+}
 
 // src/sync/publish-draft-components-in-page-before-save.ts
 import { invalidateDocumentData as invalidateDocumentData2, isDocumentDirty as isDocumentDirty2 } from "@elementor/editor-documents";
@@ -3233,7 +3152,7 @@ async function publishDraftComponentsInPageBeforeSave({ status, elements }) {
   if (status !== "publish") {
     return;
   }
-  const documents = await getComponentDocuments(elements);
+  const documents = await getComponentDocuments({ elements });
   const draftIds = [...documents.values()].filter(isDocumentDirty2).map((document2) => document2.id);
   if (draftIds.length === 0) {
     return;
@@ -3296,7 +3215,6 @@ function load(result) {
 
 // src/init.ts
 function init() {
-  stylesRepository.register(componentsStylesProvider);
   registerSlice(slice);
   registerElementType(
     COMPONENT_WIDGET_TYPE2,
@@ -3317,12 +3235,16 @@ function init() {
     id: "components-populate-store",
     component: PopulateStore
   });
-  registerDataHook2("after", "editor/documents/attach-preview", async () => {
-    const { id, config } = getV1CurrentDocument();
-    if (id) {
-      removeComponentStyles(id);
+  registerDataHook2("after", "editor/documents/attach-preview", () => {
+    const { id, config } = getV1CurrentDocument() ?? {};
+    if (!id) {
+      return;
     }
-    await loadComponentsAssets(config?.elements ?? []);
+    removeComponentStyles(id);
+    void loadComponentsAssets(config?.elements ?? []);
+  });
+  embeddedDocumentsManager2.onDocumentLoad((_documentId, data) => {
+    void loadComponentsAssets(data.elements ?? []);
   });
   injectIntoLogic({
     id: "templates",