@elementor/editor-styles-repository 0.1.0

package/.turbo/turbo-build.log

@@ -0,0 +1,22 @@
+
+> @elementor/editor-styles-repository@0.1.0 build
+> tsup --config=../../tsup.build.ts
+
+CLI Building entry: src/index.ts
+CLI Using tsconfig: ../../../tsconfig.json
+CLI tsup v8.3.5
+CLI Using tsup config: /home/runner/work/elementor-packages/elementor-packages/tsup.build.ts
+CLI Target: esnext
+CLI Cleaning output folder
+ESM Build start
+CJS Build start
+ESM dist/index.mjs     1.62 KB
+ESM dist/index.mjs.map 3.55 KB
+ESM ⚡️ Build success in 30ms
+CJS dist/index.js     2.74 KB
+CJS dist/index.js.map 3.59 KB
+CJS ⚡️ Build success in 31ms
+DTS Build start
+DTS ⚡️ Build success in 11031ms
+DTS dist/index.d.mts 519.00 B
+DTS dist/index.d.ts  519.00 B

package/CHANGELOG.md

@@ -0,0 +1,15 @@
+# @elementor/editor-styles-repository
+
+## 0.1.0
+
+### Minor Changes
+
+- 081bae8: Move the style renderer into editor-canvas and register the elements styles provider in editor-styles-repository
+- f584292: Create editor styles repository
+
+### Patch Changes
+
+- Updated dependencies [081bae8]
+- Updated dependencies [f584292]
+  - @elementor/editor-elements@0.3.1
+  - @elementor/editor-styles@0.3.0

package/dist/index.d.mts

@@ -0,0 +1,15 @@
+import * as _elementor_editor_styles from '@elementor/editor-styles';
+import { StyleDefinitionsMap } from '@elementor/editor-styles';
+
+type StylesProvider = {
+    get: () => StyleDefinitionsMap;
+    subscribe: (callback: () => void) => () => void;
+};
+
+declare const stylesRepository: {
+    registerProvider: (key: string, provider: StylesProvider) => void;
+    all: () => _elementor_editor_styles.StyleDefinitionsMap;
+    subscribe: (cb: () => void) => () => void;
+};
+
+export { type StylesProvider, stylesRepository };

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+import * as _elementor_editor_styles from '@elementor/editor-styles';
+import { StyleDefinitionsMap } from '@elementor/editor-styles';
+
+type StylesProvider = {
+    get: () => StyleDefinitionsMap;
+    subscribe: (callback: () => void) => () => void;
+};
+
+declare const stylesRepository: {
+    registerProvider: (key: string, provider: StylesProvider) => void;
+    all: () => _elementor_editor_styles.StyleDefinitionsMap;
+    subscribe: (cb: () => void) => () => void;
+};
+
+export { type StylesProvider, stylesRepository };

package/dist/index.js

@@ -0,0 +1,91 @@
+"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 src_exports = {};
+__export(src_exports, {
+  stylesRepository: () => stylesRepository
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/utils/create-styles-repository.ts
+var createStylesRepository = () => {
+  const providers = /* @__PURE__ */ new Map();
+  const registerProvider = (key, provider) => {
+    providers.set(key, provider);
+  };
+  const all = () => {
+    return Array.from(providers.values()).reduce((acc, provider) => {
+      const styles = provider.get();
+      return { ...acc, ...styles };
+    }, {});
+  };
+  const subscribe = (cb) => {
+    const unsubscribes = Array.from(providers.values()).map((provider) => {
+      return provider.subscribe(cb);
+    });
+    return () => {
+      unsubscribes.forEach((unsubscribe) => unsubscribe());
+    };
+  };
+  return {
+    registerProvider,
+    all,
+    subscribe
+  };
+};
+
+// src/styles-repository.ts
+var stylesRepository = createStylesRepository();
+
+// src/elements-styles-provider.ts
+var import_editor_elements = require("@elementor/editor-elements");
+var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
+var elementsStylesProvider = {
+  get: () => {
+    const elements = (0, import_editor_elements.getElements)();
+    const entries = elements.flatMap((element) => {
+      const styles = element.model.get("styles");
+      return styles ? Object.entries(styles) : [];
+    });
+    return Object.fromEntries(entries);
+  },
+  subscribe: (cb) => {
+    return (0, import_editor_v1_adapters.__privateListenTo)(
+      [
+        (0, import_editor_v1_adapters.commandEndEvent)("editor/documents/attach-preview"),
+        (0, import_editor_v1_adapters.commandEndEvent)("document/atomic-widgets/styles")
+      ],
+      cb
+    );
+  }
+};
+
+// src/init.ts
+function init() {
+  stylesRepository.registerProvider("elements", elementsStylesProvider);
+}
+
+// src/index.ts
+init();
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  stylesRepository
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/utils/create-styles-repository.ts","../src/styles-repository.ts","../src/elements-styles-provider.ts","../src/init.ts"],"sourcesContent":["export { type StylesProvider } from './utils/create-styles-repository';\n\nexport { stylesRepository } from './styles-repository';\n\nimport { init } from './init';\n\ninit();\n","import { type StyleDefinitionsMap } from '@elementor/editor-styles';\n\nexport type StylesProvider = {\n\tget: () => StyleDefinitionsMap;\n\tsubscribe: ( callback: () => void ) => () => void;\n};\n\nexport const createStylesRepository = () => {\n\tconst providers = new Map< string, StylesProvider >();\n\n\tconst registerProvider = ( key: string, provider: StylesProvider ) => {\n\t\tproviders.set( key, provider );\n\t};\n\n\tconst all = () => {\n\t\treturn Array.from( providers.values() ).reduce< StyleDefinitionsMap >( ( acc, provider ) => {\n\t\t\tconst styles = provider.get();\n\n\t\t\treturn { ...acc, ...styles };\n\t\t}, {} );\n\t};\n\n\tconst subscribe = ( cb: () => void ) => {\n\t\tconst unsubscribes = Array.from( providers.values() ).map( ( provider ) => {\n\t\t\treturn provider.subscribe( cb );\n\t\t} );\n\n\t\treturn () => {\n\t\t\tunsubscribes.forEach( ( unsubscribe ) => unsubscribe() );\n\t\t};\n\t};\n\n\treturn {\n\t\tregisterProvider,\n\t\tall,\n\t\tsubscribe,\n\t};\n};\n","import { createStylesRepository } from './utils/create-styles-repository';\n\nexport const stylesRepository = createStylesRepository();\n","import { getElements } from '@elementor/editor-elements';\nimport { __privateListenTo as listenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\n\nimport { type StylesProvider } from './utils/create-styles-repository';\n\nexport const elementsStylesProvider: StylesProvider = {\n\tget: () => {\n\t\tconst elements = getElements();\n\n\t\tconst entries = elements.flatMap( ( element ) => {\n\t\t\tconst styles = element.model.get( 'styles' );\n\n\t\t\treturn styles ? Object.entries( styles ) : [];\n\t\t} );\n\n\t\treturn Object.fromEntries( entries );\n\t},\n\tsubscribe: ( cb ) => {\n\t\treturn listenTo(\n\t\t\t[\n\t\t\t\tcommandEndEvent( 'editor/documents/attach-preview' ),\n\t\t\t\tcommandEndEvent( 'document/atomic-widgets/styles' ),\n\t\t\t],\n\t\t\tcb\n\t\t);\n\t},\n};\n","import { elementsStylesProvider } from './elements-styles-provider';\nimport { stylesRepository } from './styles-repository';\n\nexport function init() {\n\tstylesRepository.registerProvider( 'elements', elementsStylesProvider );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACOO,IAAM,yBAAyB,MAAM;AAC3C,QAAM,YAAY,oBAAI,IAA8B;AAEpD,QAAM,mBAAmB,CAAE,KAAa,aAA8B;AACrE,cAAU,IAAK,KAAK,QAAS;AAAA,EAC9B;AAEA,QAAM,MAAM,MAAM;AACjB,WAAO,MAAM,KAAM,UAAU,OAAO,CAAE,EAAE,OAA+B,CAAE,KAAK,aAAc;AAC3F,YAAM,SAAS,SAAS,IAAI;AAE5B,aAAO,EAAE,GAAG,KAAK,GAAG,OAAO;AAAA,IAC5B,GAAG,CAAC,CAAE;AAAA,EACP;AAEA,QAAM,YAAY,CAAE,OAAoB;AACvC,UAAM,eAAe,MAAM,KAAM,UAAU,OAAO,CAAE,EAAE,IAAK,CAAE,aAAc;AAC1E,aAAO,SAAS,UAAW,EAAG;AAAA,IAC/B,CAAE;AAEF,WAAO,MAAM;AACZ,mBAAa,QAAS,CAAE,gBAAiB,YAAY,CAAE;AAAA,IACxD;AAAA,EACD;AAEA,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD;;;ACnCO,IAAM,mBAAmB,uBAAuB;;;ACFvD,6BAA4B;AAC5B,gCAA+D;AAIxD,IAAM,yBAAyC;AAAA,EACrD,KAAK,MAAM;AACV,UAAM,eAAW,oCAAY;AAE7B,UAAM,UAAU,SAAS,QAAS,CAAE,YAAa;AAChD,YAAM,SAAS,QAAQ,MAAM,IAAK,QAAS;AAE3C,aAAO,SAAS,OAAO,QAAS,MAAO,IAAI,CAAC;AAAA,IAC7C,CAAE;AAEF,WAAO,OAAO,YAAa,OAAQ;AAAA,EACpC;AAAA,EACA,WAAW,CAAE,OAAQ;AACpB,eAAO,0BAAAA;AAAA,MACN;AAAA,YACC,2CAAiB,iCAAkC;AAAA,YACnD,2CAAiB,gCAAiC;AAAA,MACnD;AAAA,MACA;AAAA,IACD;AAAA,EACD;AACD;;;ACvBO,SAAS,OAAO;AACtB,mBAAiB,iBAAkB,YAAY,sBAAuB;AACvE;;;AJCA,KAAK;","names":["listenTo"]}

package/dist/index.mjs

@@ -0,0 +1,64 @@
+// src/utils/create-styles-repository.ts
+var createStylesRepository = () => {
+  const providers = /* @__PURE__ */ new Map();
+  const registerProvider = (key, provider) => {
+    providers.set(key, provider);
+  };
+  const all = () => {
+    return Array.from(providers.values()).reduce((acc, provider) => {
+      const styles = provider.get();
+      return { ...acc, ...styles };
+    }, {});
+  };
+  const subscribe = (cb) => {
+    const unsubscribes = Array.from(providers.values()).map((provider) => {
+      return provider.subscribe(cb);
+    });
+    return () => {
+      unsubscribes.forEach((unsubscribe) => unsubscribe());
+    };
+  };
+  return {
+    registerProvider,
+    all,
+    subscribe
+  };
+};
+
+// src/styles-repository.ts
+var stylesRepository = createStylesRepository();
+
+// src/elements-styles-provider.ts
+import { getElements } from "@elementor/editor-elements";
+import { __privateListenTo as listenTo, commandEndEvent } from "@elementor/editor-v1-adapters";
+var elementsStylesProvider = {
+  get: () => {
+    const elements = getElements();
+    const entries = elements.flatMap((element) => {
+      const styles = element.model.get("styles");
+      return styles ? Object.entries(styles) : [];
+    });
+    return Object.fromEntries(entries);
+  },
+  subscribe: (cb) => {
+    return listenTo(
+      [
+        commandEndEvent("editor/documents/attach-preview"),
+        commandEndEvent("document/atomic-widgets/styles")
+      ],
+      cb
+    );
+  }
+};
+
+// src/init.ts
+function init() {
+  stylesRepository.registerProvider("elements", elementsStylesProvider);
+}
+
+// src/index.ts
+init();
+export {
+  stylesRepository
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/create-styles-repository.ts","../src/styles-repository.ts","../src/elements-styles-provider.ts","../src/init.ts","../src/index.ts"],"sourcesContent":["import { type StyleDefinitionsMap } from '@elementor/editor-styles';\n\nexport type StylesProvider = {\n\tget: () => StyleDefinitionsMap;\n\tsubscribe: ( callback: () => void ) => () => void;\n};\n\nexport const createStylesRepository = () => {\n\tconst providers = new Map< string, StylesProvider >();\n\n\tconst registerProvider = ( key: string, provider: StylesProvider ) => {\n\t\tproviders.set( key, provider );\n\t};\n\n\tconst all = () => {\n\t\treturn Array.from( providers.values() ).reduce< StyleDefinitionsMap >( ( acc, provider ) => {\n\t\t\tconst styles = provider.get();\n\n\t\t\treturn { ...acc, ...styles };\n\t\t}, {} );\n\t};\n\n\tconst subscribe = ( cb: () => void ) => {\n\t\tconst unsubscribes = Array.from( providers.values() ).map( ( provider ) => {\n\t\t\treturn provider.subscribe( cb );\n\t\t} );\n\n\t\treturn () => {\n\t\t\tunsubscribes.forEach( ( unsubscribe ) => unsubscribe() );\n\t\t};\n\t};\n\n\treturn {\n\t\tregisterProvider,\n\t\tall,\n\t\tsubscribe,\n\t};\n};\n","import { createStylesRepository } from './utils/create-styles-repository';\n\nexport const stylesRepository = createStylesRepository();\n","import { getElements } from '@elementor/editor-elements';\nimport { __privateListenTo as listenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\n\nimport { type StylesProvider } from './utils/create-styles-repository';\n\nexport const elementsStylesProvider: StylesProvider = {\n\tget: () => {\n\t\tconst elements = getElements();\n\n\t\tconst entries = elements.flatMap( ( element ) => {\n\t\t\tconst styles = element.model.get( 'styles' );\n\n\t\t\treturn styles ? Object.entries( styles ) : [];\n\t\t} );\n\n\t\treturn Object.fromEntries( entries );\n\t},\n\tsubscribe: ( cb ) => {\n\t\treturn listenTo(\n\t\t\t[\n\t\t\t\tcommandEndEvent( 'editor/documents/attach-preview' ),\n\t\t\t\tcommandEndEvent( 'document/atomic-widgets/styles' ),\n\t\t\t],\n\t\t\tcb\n\t\t);\n\t},\n};\n","import { elementsStylesProvider } from './elements-styles-provider';\nimport { stylesRepository } from './styles-repository';\n\nexport function init() {\n\tstylesRepository.registerProvider( 'elements', elementsStylesProvider );\n}\n","export { type StylesProvider } from './utils/create-styles-repository';\n\nexport { stylesRepository } from './styles-repository';\n\nimport { init } from './init';\n\ninit();\n"],"mappings":";AAOO,IAAM,yBAAyB,MAAM;AAC3C,QAAM,YAAY,oBAAI,IAA8B;AAEpD,QAAM,mBAAmB,CAAE,KAAa,aAA8B;AACrE,cAAU,IAAK,KAAK,QAAS;AAAA,EAC9B;AAEA,QAAM,MAAM,MAAM;AACjB,WAAO,MAAM,KAAM,UAAU,OAAO,CAAE,EAAE,OAA+B,CAAE,KAAK,aAAc;AAC3F,YAAM,SAAS,SAAS,IAAI;AAE5B,aAAO,EAAE,GAAG,KAAK,GAAG,OAAO;AAAA,IAC5B,GAAG,CAAC,CAAE;AAAA,EACP;AAEA,QAAM,YAAY,CAAE,OAAoB;AACvC,UAAM,eAAe,MAAM,KAAM,UAAU,OAAO,CAAE,EAAE,IAAK,CAAE,aAAc;AAC1E,aAAO,SAAS,UAAW,EAAG;AAAA,IAC/B,CAAE;AAEF,WAAO,MAAM;AACZ,mBAAa,QAAS,CAAE,gBAAiB,YAAY,CAAE;AAAA,IACxD;AAAA,EACD;AAEA,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD;;;ACnCO,IAAM,mBAAmB,uBAAuB;;;ACFvD,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB,UAAU,uBAAuB;AAIxD,IAAM,yBAAyC;AAAA,EACrD,KAAK,MAAM;AACV,UAAM,WAAW,YAAY;AAE7B,UAAM,UAAU,SAAS,QAAS,CAAE,YAAa;AAChD,YAAM,SAAS,QAAQ,MAAM,IAAK,QAAS;AAE3C,aAAO,SAAS,OAAO,QAAS,MAAO,IAAI,CAAC;AAAA,IAC7C,CAAE;AAEF,WAAO,OAAO,YAAa,OAAQ;AAAA,EACpC;AAAA,EACA,WAAW,CAAE,OAAQ;AACpB,WAAO;AAAA,MACN;AAAA,QACC,gBAAiB,iCAAkC;AAAA,QACnD,gBAAiB,gCAAiC;AAAA,MACnD;AAAA,MACA;AAAA,IACD;AAAA,EACD;AACD;;;ACvBO,SAAS,OAAO;AACtB,mBAAiB,iBAAkB,YAAY,sBAAuB;AACvE;;;ACCA,KAAK;","names":[]}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@elementor/editor-styles-repository",
+  "description": "Elementor Editor Styles Repository",
+  "version": "0.1.0",
+  "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": "https://github.com/elementor/elementor-packages.git",
+    "directory": "packages/core/editor-styles-repository"
+  },
+  "bugs": {
+    "url": "https://github.com/elementor/elementor-packages/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup --config=../../tsup.build.ts",
+    "dev": "tsup --config=../../tsup.dev.ts"
+  },
+  "dependencies": {
+    "@elementor/editor-elements": "^0.3.1",
+    "@elementor/editor-styles": "^0.3.0",
+    "@elementor/editor-v1-adapters": "^0.8.4"
+  }
+}

package/src/__tests__/elements-styles-provider.test.ts

@@ -0,0 +1,41 @@
+import { createMockElement, createMockStyleDefinition } from 'test-utils';
+import { getElements } from '@elementor/editor-elements';
+
+import { elementsStylesProvider } from '../elements-styles-provider';
+
+jest.mock( '@elementor/editor-elements' );
+
+describe( 'elementsStylesProvider', () => {
+	it( 'should return all the styles attached to all the document elements', () => {
+		// Arrange.
+		jest.mocked( getElements ).mockReturnValue( [
+			createMockElement( {
+				model: {
+					id: '1',
+					styles: {
+						's-1': createMockStyleDefinition( { id: 's-1' } ),
+						's-2': createMockStyleDefinition( { id: 's-2' } ),
+					},
+				},
+			} ),
+			createMockElement( {
+				model: {
+					id: '2',
+					styles: {
+						's-3': createMockStyleDefinition( { id: 's-3' } ),
+					},
+				},
+			} ),
+		] );
+
+		// Act.
+		const styles = elementsStylesProvider.get();
+
+		// Assert.
+		expect( styles ).toEqual( {
+			's-1': expect.objectContaining( { id: 's-1' } ),
+			's-2': expect.objectContaining( { id: 's-2' } ),
+			's-3': expect.objectContaining( { id: 's-3' } ),
+		} );
+	} );
+} );

package/src/elements-styles-provider.ts

@@ -0,0 +1,27 @@
+import { getElements } from '@elementor/editor-elements';
+import { __privateListenTo as listenTo, commandEndEvent } from '@elementor/editor-v1-adapters';
+
+import { type StylesProvider } from './utils/create-styles-repository';
+
+export const elementsStylesProvider: StylesProvider = {
+	get: () => {
+		const elements = getElements();
+
+		const entries = elements.flatMap( ( element ) => {
+			const styles = element.model.get( 'styles' );
+
+			return styles ? Object.entries( styles ) : [];
+		} );
+
+		return Object.fromEntries( entries );
+	},
+	subscribe: ( cb ) => {
+		return listenTo(
+			[
+				commandEndEvent( 'editor/documents/attach-preview' ),
+				commandEndEvent( 'document/atomic-widgets/styles' ),
+			],
+			cb
+		);
+	},
+};

package/src/index.ts

@@ -0,0 +1,7 @@
+export { type StylesProvider } from './utils/create-styles-repository';
+
+export { stylesRepository } from './styles-repository';
+
+import { init } from './init';
+
+init();

package/src/init.ts

@@ -0,0 +1,6 @@
+import { elementsStylesProvider } from './elements-styles-provider';
+import { stylesRepository } from './styles-repository';
+
+export function init() {
+	stylesRepository.registerProvider( 'elements', elementsStylesProvider );
+}

package/src/styles-repository.ts

@@ -0,0 +1,3 @@
+import { createStylesRepository } from './utils/create-styles-repository';
+
+export const stylesRepository = createStylesRepository();

package/src/utils/__tests__/create-styles-repository.test.ts

@@ -0,0 +1,84 @@
+import { createMockStyleDefinition } from 'test-utils';
+import { type StyleDefinitionsMap } from '@elementor/editor-styles';
+
+import { createStylesRepository, type StylesProvider } from '../create-styles-repository';
+
+const styleDef1 = createMockStyleDefinition( { props: { color: { $$type: 'color', value: '#dddddd' } } } );
+const styleDef2 = createMockStyleDefinition( { props: { color: { $$type: 'color', value: '#eeeeee' } } } );
+
+describe( 'createStylesRepository', () => {
+	it( 'should register and get all styles from all providers', () => {
+		// Arrange
+		const repo = createStylesRepository();
+
+		repo.registerProvider( 'mock1', createMockProvider( { [ styleDef1.id ]: styleDef1 } ).provider );
+		repo.registerProvider( 'mock2', createMockProvider( { [ styleDef2.id ]: styleDef2 } ).provider );
+
+		// Assert
+		expect( repo.all() ).toEqual( {
+			[ styleDef1.id ]: styleDef1,
+			[ styleDef2.id ]: styleDef2,
+		} );
+	} );
+
+	it( 'should subscribe and unsubscribe to all style providers', () => {
+		// Arrange
+		const repo = createStylesRepository();
+
+		const { provider: mockStylesProvider1, notify: notify1 } = createMockProvider( {
+			[ styleDef1.id ]: styleDef1,
+		} );
+
+		const { provider: mockStylesProvider2, notify: notify2 } = createMockProvider( {
+			[ styleDef2.id ]: styleDef2,
+		} );
+
+		repo.registerProvider( 'mock1', mockStylesProvider1 );
+		repo.registerProvider( 'mock2', mockStylesProvider2 );
+
+		const cb = jest.fn();
+		const unsubscribe = repo.subscribe( cb );
+
+		// Act
+		notify1();
+
+		// Assert
+		expect( cb ).toHaveBeenCalledTimes( 1 );
+
+		// Act
+		notify2();
+
+		// Assert
+		expect( cb ).toHaveBeenCalledTimes( 2 );
+
+		// Act
+		unsubscribe();
+
+		notify1();
+		notify2();
+
+		// Assert
+		expect( cb ).toHaveBeenCalledTimes( 2 );
+	} );
+} );
+
+const createMockProvider = ( styleDefinitions: StyleDefinitionsMap ) => {
+	const subscribers = new Set< () => void >();
+
+	const notify = () => {
+		subscribers.forEach( ( cb ) => cb() );
+	};
+
+	const provider: StylesProvider = {
+		get: () => styleDefinitions,
+		subscribe: ( cb ) => {
+			subscribers.add( cb );
+
+			return () => {
+				subscribers.delete( cb );
+			};
+		},
+	};
+
+	return { provider, notify };
+};

package/src/utils/create-styles-repository.ts

@@ -0,0 +1,38 @@
+import { type StyleDefinitionsMap } from '@elementor/editor-styles';
+
+export type StylesProvider = {
+	get: () => StyleDefinitionsMap;
+	subscribe: ( callback: () => void ) => () => void;
+};
+
+export const createStylesRepository = () => {
+	const providers = new Map< string, StylesProvider >();
+
+	const registerProvider = ( key: string, provider: StylesProvider ) => {
+		providers.set( key, provider );
+	};
+
+	const all = () => {
+		return Array.from( providers.values() ).reduce< StyleDefinitionsMap >( ( acc, provider ) => {
+			const styles = provider.get();
+
+			return { ...acc, ...styles };
+		}, {} );
+	};
+
+	const subscribe = ( cb: () => void ) => {
+		const unsubscribes = Array.from( providers.values() ).map( ( provider ) => {
+			return provider.subscribe( cb );
+		} );
+
+		return () => {
+			unsubscribes.forEach( ( unsubscribe ) => unsubscribe() );
+		};
+	};
+
+	return {
+		registerProvider,
+		all,
+		subscribe,
+	};
+};