@elementor/editor-templates 4.0.0-591

package/dist/index.d.mts

@@ -0,0 +1,7 @@
+import * as _elementor_editor_elements from '@elementor/editor-elements';
+
+declare function init(): void;
+
+declare function useLoadedTemplates(): _elementor_editor_elements.V1ElementData[][];
+
+export { init, useLoadedTemplates };

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+import * as _elementor_editor_elements from '@elementor/editor-elements';
+
+declare function init(): void;
+
+declare function useLoadedTemplates(): _elementor_editor_elements.V1ElementData[][];
+
+export { init, useLoadedTemplates };

package/dist/index.js

@@ -0,0 +1,182 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  init: () => init,
+  useLoadedTemplates: () => useLoadedTemplates
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/init.ts
+var import_editor = require("@elementor/editor");
+var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
+var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
+var import_store6 = require("@elementor/store");
+
+// src/load-templates.ts
+var import_editor_documents = require("@elementor/editor-documents");
+var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
+var import_store2 = require("@elementor/store");
+
+// src/store.ts
+var import_store = require("@elementor/store");
+var initialState = {
+  entities: {}
+};
+var slice = (0, import_store.__createSlice)({
+  name: "templates",
+  initialState,
+  reducers: {
+    setTemplates(state, action) {
+      action.payload.forEach((doc) => {
+        state.entities[doc.id] = doc.elements ?? [];
+      });
+    },
+    clearTemplates(state) {
+      state.entities = {};
+    }
+  }
+});
+var selectEntities = (state) => state.templates.entities;
+var selectTemplates = (0, import_store.__createSelector)(
+  [selectEntities],
+  (entities) => Object.values(entities)
+);
+
+// src/load-templates.ts
+var TEMPLATE_ATTRIBUTE = 'data-elementor-post-type="elementor_library"';
+var DOCUMENT_WRAPPER_ATTR = "data-elementor-id";
+async function loadTemplates() {
+  const iframeDocument = (0, import_editor_v1_adapters.getCanvasIframeDocument)();
+  if (!iframeDocument) {
+    return;
+  }
+  const currentDocumentId = (0, import_editor_documents.getV1CurrentDocument)()?.id;
+  const templateIds = getTemplateIds(iframeDocument, currentDocumentId);
+  if (!templateIds.length) {
+    return;
+  }
+  const documents = await fetchDocuments(templateIds);
+  (0, import_store2.__dispatch)(slice.actions.setTemplates(documents));
+}
+function unloadTemplates() {
+  (0, import_store2.__dispatch)(slice.actions.clearTemplates());
+}
+function getTemplateIds(iframeDocument, currentDocumentId) {
+  const elements = [...iframeDocument.body.querySelectorAll(`[${TEMPLATE_ATTRIBUTE}]`)];
+  const ids = elements.map((el) => Number(el.getAttribute(DOCUMENT_WRAPPER_ATTR))).filter((id) => !isNaN(id) && id !== currentDocumentId);
+  return [...new Set(ids)];
+}
+async function fetchDocuments(ids) {
+  const results = await Promise.all(
+    ids.map(async (id) => {
+      try {
+        return await import_editor_v1_adapters.ajax.load({
+          data: { id },
+          action: "get_document_config",
+          unique_id: `template-${id}`
+        });
+      } catch {
+        return null;
+      }
+    })
+  );
+  return results.filter((doc) => doc !== null);
+}
+
+// src/render-template-styles.tsx
+var import_react = require("react");
+
+// src/templates-styles-provider.ts
+var import_editor_styles_repository = require("@elementor/editor-styles-repository");
+var styles = [];
+var listeners = /* @__PURE__ */ new Set();
+function addTemplateStyles(newStyles) {
+  styles = [...styles, ...newStyles];
+  listeners.forEach((cb) => cb());
+}
+function clearTemplatesStyles() {
+  styles = [];
+  listeners.forEach((cb) => cb());
+}
+var templatesStylesProvider = (0, import_editor_styles_repository.createStylesProvider)({
+  key: "templates-styles",
+  priority: 50,
+  subscribe: (cb) => {
+    listeners.add(cb);
+    return () => {
+      listeners.delete(cb);
+    };
+  },
+  actions: {
+    all: () => styles,
+    get: (id) => styles.find((style) => style.id === id) ?? null
+  }
+});
+
+// src/use-loaded-templates.ts
+var import_store4 = require("@elementor/store");
+function useLoadedTemplates() {
+  return (0, import_store4.__useSelector)(selectTemplates);
+}
+
+// src/render-template-styles.tsx
+var RenderTemplateStyles = () => {
+  const templates = useLoadedTemplates();
+  (0, import_react.useEffect)(() => {
+    const styles2 = templates.flatMap(extractStylesFromDocument);
+    addTemplateStyles(styles2);
+  }, [templates]);
+  return null;
+};
+function extractStylesFromDocument(elements) {
+  if (!elements.length) {
+    return [];
+  }
+  return elements.flatMap(extractStylesFromElement);
+}
+function extractStylesFromElement(element) {
+  return [
+    ...Object.values(element.styles ?? {}),
+    ...(element.elements ?? []).flatMap(extractStylesFromElement)
+  ];
+}
+
+// src/init.ts
+function init() {
+  (0, import_store6.__registerSlice)(slice);
+  import_editor_styles_repository2.stylesRepository.register(templatesStylesProvider);
+  (0, import_editor_v1_adapters2.registerDataHook)("after", "editor/documents/attach-preview", async () => {
+    unloadTemplates();
+    clearTemplatesStyles();
+    await loadTemplates();
+  });
+  (0, import_editor.injectIntoLogic)({
+    id: "templates-styles",
+    component: RenderTemplateStyles
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  init,
+  useLoadedTemplates
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/init.ts","../src/load-templates.ts","../src/store.ts","../src/render-template-styles.tsx","../src/templates-styles-provider.ts","../src/use-loaded-templates.ts"],"sourcesContent":["export { init } from './init';\nexport { useLoadedTemplates } from './use-loaded-templates';\n","import { injectIntoLogic } from '@elementor/editor';\nimport { stylesRepository } from '@elementor/editor-styles-repository';\nimport { registerDataHook } from '@elementor/editor-v1-adapters';\nimport { __registerSlice as registerSlice } from '@elementor/store';\n\nimport { loadTemplates, unloadTemplates } from './load-templates';\nimport { RenderTemplateStyles } from './render-template-styles';\nimport { slice } from './store';\nimport { clearTemplatesStyles, templatesStylesProvider } from './templates-styles-provider';\n\nexport function init() {\n\tregisterSlice( slice );\n\tstylesRepository.register( templatesStylesProvider );\n\n\tregisterDataHook( 'after', 'editor/documents/attach-preview', async () => {\n\t\tunloadTemplates();\n\t\tclearTemplatesStyles();\n\n\t\tawait loadTemplates();\n\t} );\n\n\tinjectIntoLogic( {\n\t\tid: 'templates-styles',\n\t\tcomponent: RenderTemplateStyles,\n\t} );\n}\n","import { type Document, getV1CurrentDocument } from '@elementor/editor-documents';\nimport { ajax, getCanvasIframeDocument } from '@elementor/editor-v1-adapters';\nimport { __dispatch as dispatch } from '@elementor/store';\n\nimport { slice } from './store';\n\nconst TEMPLATE_ATTRIBUTE = 'data-elementor-post-type=\"elementor_library\"';\nconst DOCUMENT_WRAPPER_ATTR = 'data-elementor-id';\n\nexport async function loadTemplates() {\n\tconst iframeDocument = getCanvasIframeDocument();\n\n\tif ( ! iframeDocument ) {\n\t\treturn;\n\t}\n\n\tconst currentDocumentId = getV1CurrentDocument()?.id;\n\tconst templateIds = getTemplateIds( iframeDocument, currentDocumentId );\n\n\tif ( ! templateIds.length ) {\n\t\treturn;\n\t}\n\n\tconst documents = await fetchDocuments( templateIds );\n\n\tdispatch( slice.actions.setTemplates( documents ) );\n}\n\nexport function unloadTemplates() {\n\tdispatch( slice.actions.clearTemplates() );\n}\n\nfunction getTemplateIds( iframeDocument: globalThis.Document, currentDocumentId?: number ): number[] {\n\tconst elements = [ ...iframeDocument.body.querySelectorAll< HTMLElement >( `[${ TEMPLATE_ATTRIBUTE }]` ) ];\n\n\tconst ids = elements\n\t\t.map( ( el ) => Number( el.getAttribute( DOCUMENT_WRAPPER_ATTR ) ) )\n\t\t.filter( ( id ) => ! isNaN( id ) && id !== currentDocumentId );\n\n\treturn [ ...new Set( ids ) ];\n}\n\nasync function fetchDocuments( ids: number[] ): Promise< Document[] > {\n\tconst results = await Promise.all(\n\t\tids.map( async ( id ) => {\n\t\t\ttry {\n\t\t\t\t// using ajax.load instead of the document-manager as the latter causes an issue when trying to edit a template\n\t\t\t\treturn await ajax.load< { id: number }, Document >( {\n\t\t\t\t\tdata: { id },\n\t\t\t\t\taction: 'get_document_config',\n\t\t\t\t\tunique_id: `template-${ id }`,\n\t\t\t\t} );\n\t\t\t} catch {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t} )\n\t);\n\n\treturn results.filter( ( doc ): doc is Document => doc !== null );\n}\n","import { type Document } from '@elementor/editor-documents';\nimport { type V1ElementData } from '@elementor/editor-elements';\nimport { __createSelector, __createSlice, type PayloadAction, type SliceState } from '@elementor/store';\n\ntype State = {\n\tentities: Record< Document[ 'id' ], V1ElementData[] >;\n};\n\nconst initialState: State = {\n\tentities: {},\n};\n\nexport const slice = __createSlice( {\n\tname: 'templates',\n\tinitialState,\n\treducers: {\n\t\tsetTemplates( state, action: PayloadAction< Document[] > ) {\n\t\t\taction.payload.forEach( ( doc ) => {\n\t\t\t\tstate.entities[ doc.id ] = doc.elements ?? [];\n\t\t\t} );\n\t\t},\n\n\t\tclearTemplates( state ) {\n\t\t\tstate.entities = {};\n\t\t},\n\t},\n} );\n\nexport type Slice = SliceState< typeof slice >;\n\nconst selectEntities = ( state: Slice ) => state.templates.entities;\n\nexport const selectTemplates = __createSelector( [ selectEntities ], ( entities ): V1ElementData[][] =>\n\tObject.values( entities )\n);\n","import { useEffect } from 'react';\nimport { type V1ElementData } from '@elementor/editor-elements';\nimport { type StyleDefinition } from '@elementor/editor-styles';\n\nimport { addTemplateStyles } from './templates-styles-provider';\nimport { useLoadedTemplates } from './use-loaded-templates';\n\nexport const RenderTemplateStyles = () => {\n\tconst templates = useLoadedTemplates();\n\n\tuseEffect( () => {\n\t\tconst styles = templates.flatMap( extractStylesFromDocument );\n\n\t\taddTemplateStyles( styles );\n\t}, [ templates ] );\n\n\treturn null;\n};\n\nfunction extractStylesFromDocument( elements: V1ElementData[] ): StyleDefinition[] {\n\tif ( ! elements.length ) {\n\t\treturn [];\n\t}\n\n\treturn elements.flatMap( extractStylesFromElement );\n}\n\nfunction extractStylesFromElement( element: V1ElementData ): StyleDefinition[] {\n\treturn [\n\t\t...Object.values( element.styles ?? {} ),\n\t\t...( element.elements ?? [] ).flatMap( extractStylesFromElement ),\n\t];\n}\n","import { type StyleDefinition } from '@elementor/editor-styles';\nimport { createStylesProvider } from '@elementor/editor-styles-repository';\n\nlet styles: StyleDefinition[] = [];\nconst listeners = new Set< () => void >();\n\nexport function addTemplateStyles( newStyles: StyleDefinition[] ) {\n\tstyles = [ ...styles, ...newStyles ];\n\tlisteners.forEach( ( cb ) => cb() );\n}\n\nexport function clearTemplatesStyles() {\n\tstyles = [];\n\tlisteners.forEach( ( cb ) => cb() );\n}\n\nexport const templatesStylesProvider = createStylesProvider( {\n\tkey: 'templates-styles',\n\tpriority: 50,\n\tsubscribe: ( cb ) => {\n\t\tlisteners.add( cb );\n\n\t\treturn () => {\n\t\t\tlisteners.delete( cb );\n\t\t};\n\t},\n\tactions: {\n\t\tall: () => styles,\n\t\tget: ( id ) => styles.find( ( style ) => style.id === id ) ?? null,\n\t},\n} );\n","import { __useSelector as useSelector } from '@elementor/store';\n\nimport { selectTemplates } from './store';\n\nexport function useLoadedTemplates() {\n\treturn useSelector( selectTemplates );\n}\n"],"mappings":"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","names":["import_editor_styles_repository","import_editor_v1_adapters","import_store","import_store","dispatch","import_store","useSelector","styles","registerSlice"]}

package/dist/index.mjs

@@ -0,0 +1,154 @@
+// src/init.ts
+import { injectIntoLogic } from "@elementor/editor";
+import { stylesRepository } from "@elementor/editor-styles-repository";
+import { registerDataHook } from "@elementor/editor-v1-adapters";
+import { __registerSlice as registerSlice } from "@elementor/store";
+
+// src/load-templates.ts
+import { getV1CurrentDocument } from "@elementor/editor-documents";
+import { ajax, getCanvasIframeDocument } from "@elementor/editor-v1-adapters";
+import { __dispatch as dispatch } from "@elementor/store";
+
+// src/store.ts
+import { __createSelector, __createSlice } from "@elementor/store";
+var initialState = {
+  entities: {}
+};
+var slice = __createSlice({
+  name: "templates",
+  initialState,
+  reducers: {
+    setTemplates(state, action) {
+      action.payload.forEach((doc) => {
+        state.entities[doc.id] = doc.elements ?? [];
+      });
+    },
+    clearTemplates(state) {
+      state.entities = {};
+    }
+  }
+});
+var selectEntities = (state) => state.templates.entities;
+var selectTemplates = __createSelector(
+  [selectEntities],
+  (entities) => Object.values(entities)
+);
+
+// src/load-templates.ts
+var TEMPLATE_ATTRIBUTE = 'data-elementor-post-type="elementor_library"';
+var DOCUMENT_WRAPPER_ATTR = "data-elementor-id";
+async function loadTemplates() {
+  const iframeDocument = getCanvasIframeDocument();
+  if (!iframeDocument) {
+    return;
+  }
+  const currentDocumentId = getV1CurrentDocument()?.id;
+  const templateIds = getTemplateIds(iframeDocument, currentDocumentId);
+  if (!templateIds.length) {
+    return;
+  }
+  const documents = await fetchDocuments(templateIds);
+  dispatch(slice.actions.setTemplates(documents));
+}
+function unloadTemplates() {
+  dispatch(slice.actions.clearTemplates());
+}
+function getTemplateIds(iframeDocument, currentDocumentId) {
+  const elements = [...iframeDocument.body.querySelectorAll(`[${TEMPLATE_ATTRIBUTE}]`)];
+  const ids = elements.map((el) => Number(el.getAttribute(DOCUMENT_WRAPPER_ATTR))).filter((id) => !isNaN(id) && id !== currentDocumentId);
+  return [...new Set(ids)];
+}
+async function fetchDocuments(ids) {
+  const results = await Promise.all(
+    ids.map(async (id) => {
+      try {
+        return await ajax.load({
+          data: { id },
+          action: "get_document_config",
+          unique_id: `template-${id}`
+        });
+      } catch {
+        return null;
+      }
+    })
+  );
+  return results.filter((doc) => doc !== null);
+}
+
+// src/render-template-styles.tsx
+import { useEffect } from "react";
+
+// src/templates-styles-provider.ts
+import { createStylesProvider } from "@elementor/editor-styles-repository";
+var styles = [];
+var listeners = /* @__PURE__ */ new Set();
+function addTemplateStyles(newStyles) {
+  styles = [...styles, ...newStyles];
+  listeners.forEach((cb) => cb());
+}
+function clearTemplatesStyles() {
+  styles = [];
+  listeners.forEach((cb) => cb());
+}
+var templatesStylesProvider = createStylesProvider({
+  key: "templates-styles",
+  priority: 50,
+  subscribe: (cb) => {
+    listeners.add(cb);
+    return () => {
+      listeners.delete(cb);
+    };
+  },
+  actions: {
+    all: () => styles,
+    get: (id) => styles.find((style) => style.id === id) ?? null
+  }
+});
+
+// src/use-loaded-templates.ts
+import { __useSelector as useSelector } from "@elementor/store";
+function useLoadedTemplates() {
+  return useSelector(selectTemplates);
+}
+
+// src/render-template-styles.tsx
+var RenderTemplateStyles = () => {
+  const templates = useLoadedTemplates();
+  useEffect(() => {
+    const styles2 = templates.flatMap(extractStylesFromDocument);
+    addTemplateStyles(styles2);
+  }, [templates]);
+  return null;
+};
+function extractStylesFromDocument(elements) {
+  if (!elements.length) {
+    return [];
+  }
+  return elements.flatMap(extractStylesFromElement);
+}
+function extractStylesFromElement(element) {
+  return [
+    ...Object.values(element.styles ?? {}),
+    ...(element.elements ?? []).flatMap(extractStylesFromElement)
+  ];
+}
+
+// src/init.ts
+function init() {
+  registerSlice(slice);
+  stylesRepository.register(templatesStylesProvider);
+  registerDataHook("after", "editor/documents/attach-preview", async () => {
+    unloadTemplates();
+    clearTemplatesStyles();
+    await loadTemplates();
+  });
+  injectIntoLogic({
+    id: "templates-styles",
+    component: RenderTemplateStyles
+  });
+}
+export {
+  init,
+  useLoadedTemplates
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/init.ts","../src/load-templates.ts","../src/store.ts","../src/render-template-styles.tsx","../src/templates-styles-provider.ts","../src/use-loaded-templates.ts"],"sourcesContent":["import { injectIntoLogic } from '@elementor/editor';\nimport { stylesRepository } from '@elementor/editor-styles-repository';\nimport { registerDataHook } from '@elementor/editor-v1-adapters';\nimport { __registerSlice as registerSlice } from '@elementor/store';\n\nimport { loadTemplates, unloadTemplates } from './load-templates';\nimport { RenderTemplateStyles } from './render-template-styles';\nimport { slice } from './store';\nimport { clearTemplatesStyles, templatesStylesProvider } from './templates-styles-provider';\n\nexport function init() {\n\tregisterSlice( slice );\n\tstylesRepository.register( templatesStylesProvider );\n\n\tregisterDataHook( 'after', 'editor/documents/attach-preview', async () => {\n\t\tunloadTemplates();\n\t\tclearTemplatesStyles();\n\n\t\tawait loadTemplates();\n\t} );\n\n\tinjectIntoLogic( {\n\t\tid: 'templates-styles',\n\t\tcomponent: RenderTemplateStyles,\n\t} );\n}\n","import { type Document, getV1CurrentDocument } from '@elementor/editor-documents';\nimport { ajax, getCanvasIframeDocument } from '@elementor/editor-v1-adapters';\nimport { __dispatch as dispatch } from '@elementor/store';\n\nimport { slice } from './store';\n\nconst TEMPLATE_ATTRIBUTE = 'data-elementor-post-type=\"elementor_library\"';\nconst DOCUMENT_WRAPPER_ATTR = 'data-elementor-id';\n\nexport async function loadTemplates() {\n\tconst iframeDocument = getCanvasIframeDocument();\n\n\tif ( ! iframeDocument ) {\n\t\treturn;\n\t}\n\n\tconst currentDocumentId = getV1CurrentDocument()?.id;\n\tconst templateIds = getTemplateIds( iframeDocument, currentDocumentId );\n\n\tif ( ! templateIds.length ) {\n\t\treturn;\n\t}\n\n\tconst documents = await fetchDocuments( templateIds );\n\n\tdispatch( slice.actions.setTemplates( documents ) );\n}\n\nexport function unloadTemplates() {\n\tdispatch( slice.actions.clearTemplates() );\n}\n\nfunction getTemplateIds( iframeDocument: globalThis.Document, currentDocumentId?: number ): number[] {\n\tconst elements = [ ...iframeDocument.body.querySelectorAll< HTMLElement >( `[${ TEMPLATE_ATTRIBUTE }]` ) ];\n\n\tconst ids = elements\n\t\t.map( ( el ) => Number( el.getAttribute( DOCUMENT_WRAPPER_ATTR ) ) )\n\t\t.filter( ( id ) => ! isNaN( id ) && id !== currentDocumentId );\n\n\treturn [ ...new Set( ids ) ];\n}\n\nasync function fetchDocuments( ids: number[] ): Promise< Document[] > {\n\tconst results = await Promise.all(\n\t\tids.map( async ( id ) => {\n\t\t\ttry {\n\t\t\t\t// using ajax.load instead of the document-manager as the latter causes an issue when trying to edit a template\n\t\t\t\treturn await ajax.load< { id: number }, Document >( {\n\t\t\t\t\tdata: { id },\n\t\t\t\t\taction: 'get_document_config',\n\t\t\t\t\tunique_id: `template-${ id }`,\n\t\t\t\t} );\n\t\t\t} catch {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t} )\n\t);\n\n\treturn results.filter( ( doc ): doc is Document => doc !== null );\n}\n","import { type Document } from '@elementor/editor-documents';\nimport { type V1ElementData } from '@elementor/editor-elements';\nimport { __createSelector, __createSlice, type PayloadAction, type SliceState } from '@elementor/store';\n\ntype State = {\n\tentities: Record< Document[ 'id' ], V1ElementData[] >;\n};\n\nconst initialState: State = {\n\tentities: {},\n};\n\nexport const slice = __createSlice( {\n\tname: 'templates',\n\tinitialState,\n\treducers: {\n\t\tsetTemplates( state, action: PayloadAction< Document[] > ) {\n\t\t\taction.payload.forEach( ( doc ) => {\n\t\t\t\tstate.entities[ doc.id ] = doc.elements ?? [];\n\t\t\t} );\n\t\t},\n\n\t\tclearTemplates( state ) {\n\t\t\tstate.entities = {};\n\t\t},\n\t},\n} );\n\nexport type Slice = SliceState< typeof slice >;\n\nconst selectEntities = ( state: Slice ) => state.templates.entities;\n\nexport const selectTemplates = __createSelector( [ selectEntities ], ( entities ): V1ElementData[][] =>\n\tObject.values( entities )\n);\n","import { useEffect } from 'react';\nimport { type V1ElementData } from '@elementor/editor-elements';\nimport { type StyleDefinition } from '@elementor/editor-styles';\n\nimport { addTemplateStyles } from './templates-styles-provider';\nimport { useLoadedTemplates } from './use-loaded-templates';\n\nexport const RenderTemplateStyles = () => {\n\tconst templates = useLoadedTemplates();\n\n\tuseEffect( () => {\n\t\tconst styles = templates.flatMap( extractStylesFromDocument );\n\n\t\taddTemplateStyles( styles );\n\t}, [ templates ] );\n\n\treturn null;\n};\n\nfunction extractStylesFromDocument( elements: V1ElementData[] ): StyleDefinition[] {\n\tif ( ! elements.length ) {\n\t\treturn [];\n\t}\n\n\treturn elements.flatMap( extractStylesFromElement );\n}\n\nfunction extractStylesFromElement( element: V1ElementData ): StyleDefinition[] {\n\treturn [\n\t\t...Object.values( element.styles ?? {} ),\n\t\t...( element.elements ?? [] ).flatMap( extractStylesFromElement ),\n\t];\n}\n","import { type StyleDefinition } from '@elementor/editor-styles';\nimport { createStylesProvider } from '@elementor/editor-styles-repository';\n\nlet styles: StyleDefinition[] = [];\nconst listeners = new Set< () => void >();\n\nexport function addTemplateStyles( newStyles: StyleDefinition[] ) {\n\tstyles = [ ...styles, ...newStyles ];\n\tlisteners.forEach( ( cb ) => cb() );\n}\n\nexport function clearTemplatesStyles() {\n\tstyles = [];\n\tlisteners.forEach( ( cb ) => cb() );\n}\n\nexport const templatesStylesProvider = createStylesProvider( {\n\tkey: 'templates-styles',\n\tpriority: 50,\n\tsubscribe: ( cb ) => {\n\t\tlisteners.add( cb );\n\n\t\treturn () => {\n\t\t\tlisteners.delete( cb );\n\t\t};\n\t},\n\tactions: {\n\t\tall: () => styles,\n\t\tget: ( id ) => styles.find( ( style ) => style.id === id ) ?? null,\n\t},\n} );\n","import { __useSelector as useSelector } from '@elementor/store';\n\nimport { selectTemplates } from './store';\n\nexport function useLoadedTemplates() {\n\treturn useSelector( selectTemplates );\n}\n"],"mappings":"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","names":["styles"]}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@elementor/editor-templates",
+  "version": "4.0.0-591",
+  "private": false,
+  "author": "Elementor Team",
+  "homepage": "https://elementor.com/",
+  "license": "GPL-3.0-or-later",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/elementor/elementor.git",
+    "directory": "packages/core/editor-templates"
+  },
+  "bugs": {
+    "url": "https://github.com/elementor/elementor/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "README.md",
+    "CHANGELOG.md",
+    "/dist",
+    "/src",
+    "!**/__tests__"
+  ],
+  "scripts": {
+    "build": "tsup --config=../../tsup.build.ts",
+    "dev": "tsup --config=../../tsup.dev.ts"
+  },
+  "dependencies": {
+    "@elementor/editor": "4.0.0-591",
+    "@elementor/editor-documents": "4.0.0-591",
+    "@elementor/editor-styles-repository": "4.0.0-591",
+    "@elementor/editor-v1-adapters": "4.0.0-591",
+    "@elementor/store": "4.0.0-591"
+  },
+  "devDependencies": {
+    "tsup": "^8.3.5"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1"
+  }
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { init } from './init';
+export { useLoadedTemplates } from './use-loaded-templates';

package/src/init.ts

@@ -0,0 +1,26 @@
+import { injectIntoLogic } from '@elementor/editor';
+import { stylesRepository } from '@elementor/editor-styles-repository';
+import { registerDataHook } from '@elementor/editor-v1-adapters';
+import { __registerSlice as registerSlice } from '@elementor/store';
+
+import { loadTemplates, unloadTemplates } from './load-templates';
+import { RenderTemplateStyles } from './render-template-styles';
+import { slice } from './store';
+import { clearTemplatesStyles, templatesStylesProvider } from './templates-styles-provider';
+
+export function init() {
+	registerSlice( slice );
+	stylesRepository.register( templatesStylesProvider );
+
+	registerDataHook( 'after', 'editor/documents/attach-preview', async () => {
+		unloadTemplates();
+		clearTemplatesStyles();
+
+		await loadTemplates();
+	} );
+
+	injectIntoLogic( {
+		id: 'templates-styles',
+		component: RenderTemplateStyles,
+	} );
+}

package/src/load-templates.ts

@@ -0,0 +1,60 @@
+import { type Document, getV1CurrentDocument } from '@elementor/editor-documents';
+import { ajax, getCanvasIframeDocument } from '@elementor/editor-v1-adapters';
+import { __dispatch as dispatch } from '@elementor/store';
+
+import { slice } from './store';
+
+const TEMPLATE_ATTRIBUTE = 'data-elementor-post-type="elementor_library"';
+const DOCUMENT_WRAPPER_ATTR = 'data-elementor-id';
+
+export async function loadTemplates() {
+	const iframeDocument = getCanvasIframeDocument();
+
+	if ( ! iframeDocument ) {
+		return;
+	}
+
+	const currentDocumentId = getV1CurrentDocument()?.id;
+	const templateIds = getTemplateIds( iframeDocument, currentDocumentId );
+
+	if ( ! templateIds.length ) {
+		return;
+	}
+
+	const documents = await fetchDocuments( templateIds );
+
+	dispatch( slice.actions.setTemplates( documents ) );
+}
+
+export function unloadTemplates() {
+	dispatch( slice.actions.clearTemplates() );
+}
+
+function getTemplateIds( iframeDocument: globalThis.Document, currentDocumentId?: number ): number[] {
+	const elements = [ ...iframeDocument.body.querySelectorAll< HTMLElement >( `[${ TEMPLATE_ATTRIBUTE }]` ) ];
+
+	const ids = elements
+		.map( ( el ) => Number( el.getAttribute( DOCUMENT_WRAPPER_ATTR ) ) )
+		.filter( ( id ) => ! isNaN( id ) && id !== currentDocumentId );
+
+	return [ ...new Set( ids ) ];
+}
+
+async function fetchDocuments( ids: number[] ): Promise< Document[] > {
+	const results = await Promise.all(
+		ids.map( async ( id ) => {
+			try {
+				// using ajax.load instead of the document-manager as the latter causes an issue when trying to edit a template
+				return await ajax.load< { id: number }, Document >( {
+					data: { id },
+					action: 'get_document_config',
+					unique_id: `template-${ id }`,
+				} );
+			} catch {
+				return null;
+			}
+		} )
+	);
+
+	return results.filter( ( doc ): doc is Document => doc !== null );
+}

package/src/render-template-styles.tsx

@@ -0,0 +1,33 @@
+import { useEffect } from 'react';
+import { type V1ElementData } from '@elementor/editor-elements';
+import { type StyleDefinition } from '@elementor/editor-styles';
+
+import { addTemplateStyles } from './templates-styles-provider';
+import { useLoadedTemplates } from './use-loaded-templates';
+
+export const RenderTemplateStyles = () => {
+	const templates = useLoadedTemplates();
+
+	useEffect( () => {
+		const styles = templates.flatMap( extractStylesFromDocument );
+
+		addTemplateStyles( styles );
+	}, [ templates ] );
+
+	return null;
+};
+
+function extractStylesFromDocument( elements: V1ElementData[] ): StyleDefinition[] {
+	if ( ! elements.length ) {
+		return [];
+	}
+
+	return elements.flatMap( extractStylesFromElement );
+}
+
+function extractStylesFromElement( element: V1ElementData ): StyleDefinition[] {
+	return [
+		...Object.values( element.styles ?? {} ),
+		...( element.elements ?? [] ).flatMap( extractStylesFromElement ),
+	];
+}

package/src/store.ts

@@ -0,0 +1,35 @@
+import { type Document } from '@elementor/editor-documents';
+import { type V1ElementData } from '@elementor/editor-elements';
+import { __createSelector, __createSlice, type PayloadAction, type SliceState } from '@elementor/store';
+
+type State = {
+	entities: Record< Document[ 'id' ], V1ElementData[] >;
+};
+
+const initialState: State = {
+	entities: {},
+};
+
+export const slice = __createSlice( {
+	name: 'templates',
+	initialState,
+	reducers: {
+		setTemplates( state, action: PayloadAction< Document[] > ) {
+			action.payload.forEach( ( doc ) => {
+				state.entities[ doc.id ] = doc.elements ?? [];
+			} );
+		},
+
+		clearTemplates( state ) {
+			state.entities = {};
+		},
+	},
+} );
+
+export type Slice = SliceState< typeof slice >;
+
+const selectEntities = ( state: Slice ) => state.templates.entities;
+
+export const selectTemplates = __createSelector( [ selectEntities ], ( entities ): V1ElementData[][] =>
+	Object.values( entities )
+);

package/src/templates-styles-provider.ts

@@ -0,0 +1,31 @@
+import { type StyleDefinition } from '@elementor/editor-styles';
+import { createStylesProvider } from '@elementor/editor-styles-repository';
+
+let styles: StyleDefinition[] = [];
+const listeners = new Set< () => void >();
+
+export function addTemplateStyles( newStyles: StyleDefinition[] ) {
+	styles = [ ...styles, ...newStyles ];
+	listeners.forEach( ( cb ) => cb() );
+}
+
+export function clearTemplatesStyles() {
+	styles = [];
+	listeners.forEach( ( cb ) => cb() );
+}
+
+export const templatesStylesProvider = createStylesProvider( {
+	key: 'templates-styles',
+	priority: 50,
+	subscribe: ( cb ) => {
+		listeners.add( cb );
+
+		return () => {
+			listeners.delete( cb );
+		};
+	},
+	actions: {
+		all: () => styles,
+		get: ( id ) => styles.find( ( style ) => style.id === id ) ?? null,
+	},
+} );

package/src/use-loaded-templates.ts

@@ -0,0 +1,7 @@
+import { __useSelector as useSelector } from '@elementor/store';
+
+import { selectTemplates } from './store';
+
+export function useLoadedTemplates() {
+	return useSelector( selectTemplates );
+}