@elementor/editor-elements 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,19 @@
+# @elementor/editor-elements
+
+## 0.2.0
+
+### Minor Changes
+
+- a46ac3a: Created the `editor-elements` packages.
+
+### Patch Changes
+
+- Updated dependencies [9abdfaf]
+- Updated dependencies [2b28089]
+- Updated dependencies [036b439]
+- Updated dependencies [6cf7ba1]
+- Updated dependencies [e69bdae]
+- Updated dependencies [bf12c4d]
+  - @elementor/editor-v1-adapters@0.8.3
+  - @elementor/editor-styles@0.2.0
+  - @elementor/editor-props@0.2.0

package/README.md

@@ -0,0 +1,4 @@
+# Editor Elements
+
+> [!WARNING]
+> This package is under development and not ready for production use.

package/dist/index.d.mts

@@ -0,0 +1,86 @@
+import { PropType, PropValue, PropKey, Props } from '@elementor/editor-props';
+import { StyleDefinitionID, StyleVariant, StyleDefinition } from '@elementor/editor-styles';
+
+type ElementID = string;
+type Element = {
+    id: ElementID;
+    type: string;
+};
+type ElementType = {
+    key: string;
+    controls: ControlItem[];
+    propsSchema: PropsSchema;
+    title: string;
+};
+type ControlsSection = {
+    type: 'section';
+    value: {
+        description?: string;
+        label: string;
+        items: ControlItem[];
+    };
+};
+type Control = {
+    type: 'control';
+    value: {
+        bind: string;
+        label?: string;
+        description?: string;
+        type: string;
+        props: Record<string, unknown>;
+    };
+};
+type ControlItem = ControlsSection | Control;
+type PropsSchema = Record<Control['value']['bind'], PropType>;
+
+declare function useSelectedElement(): {
+    element: null;
+    elementType: null;
+} | {
+    element: Element;
+    elementType: ElementType;
+};
+
+declare function useElementType(type?: string): ElementType | null;
+
+declare const useElementSetting: ({ id, bind }: {
+    id: string;
+    bind: string;
+}) => PropValue;
+
+type UseElementStylePropArgs = {
+    elementID: ElementID;
+    styleDefID?: StyleDefinitionID;
+    meta: StyleVariant['meta'];
+    propName: PropKey;
+};
+declare const useElementStyleProp: <T extends PropValue>({ elementID, styleDefID, meta, propName, }: UseElementStylePropArgs) => T | null;
+
+declare const updateSettings: ({ id, props }: {
+    id: ElementID;
+    props: Props;
+}) => void;
+
+type UpdateStyleProps = {
+    elementID: ElementID;
+    styleDefID?: StyleDefinitionID;
+    meta: StyleVariant['meta'];
+    props: Props;
+    bind: PropKey;
+};
+declare const updateStyle: ({ elementID, styleDefID, meta, props, bind }: UpdateStyleProps) => Promise<void>;
+
+declare function getSelectedElements(): Element[];
+
+declare function getWidgetsCache(): Record<string, {
+    atomic_controls?: ControlItem[];
+    atomic_props_schema?: PropsSchema;
+    controls: object;
+    title: string;
+}> | null;
+
+declare const getElementStyles: (elementID: ElementID) => Record<string, StyleDefinition> | null;
+
+declare const getElementSetting: <TValue>(elementID: ElementID, setting: string) => TValue | null;
+
+export { type Control, type ControlItem, type ControlsSection, type Element, type ElementID, type ElementType, type PropsSchema, getElementSetting, getElementStyles, getSelectedElements, getWidgetsCache, updateSettings, updateStyle, useElementSetting, useElementStyleProp, useElementType, useSelectedElement };

package/dist/index.d.ts

@@ -0,0 +1,86 @@
+import { PropType, PropValue, PropKey, Props } from '@elementor/editor-props';
+import { StyleDefinitionID, StyleVariant, StyleDefinition } from '@elementor/editor-styles';
+
+type ElementID = string;
+type Element = {
+    id: ElementID;
+    type: string;
+};
+type ElementType = {
+    key: string;
+    controls: ControlItem[];
+    propsSchema: PropsSchema;
+    title: string;
+};
+type ControlsSection = {
+    type: 'section';
+    value: {
+        description?: string;
+        label: string;
+        items: ControlItem[];
+    };
+};
+type Control = {
+    type: 'control';
+    value: {
+        bind: string;
+        label?: string;
+        description?: string;
+        type: string;
+        props: Record<string, unknown>;
+    };
+};
+type ControlItem = ControlsSection | Control;
+type PropsSchema = Record<Control['value']['bind'], PropType>;
+
+declare function useSelectedElement(): {
+    element: null;
+    elementType: null;
+} | {
+    element: Element;
+    elementType: ElementType;
+};
+
+declare function useElementType(type?: string): ElementType | null;
+
+declare const useElementSetting: ({ id, bind }: {
+    id: string;
+    bind: string;
+}) => PropValue;
+
+type UseElementStylePropArgs = {
+    elementID: ElementID;
+    styleDefID?: StyleDefinitionID;
+    meta: StyleVariant['meta'];
+    propName: PropKey;
+};
+declare const useElementStyleProp: <T extends PropValue>({ elementID, styleDefID, meta, propName, }: UseElementStylePropArgs) => T | null;
+
+declare const updateSettings: ({ id, props }: {
+    id: ElementID;
+    props: Props;
+}) => void;
+
+type UpdateStyleProps = {
+    elementID: ElementID;
+    styleDefID?: StyleDefinitionID;
+    meta: StyleVariant['meta'];
+    props: Props;
+    bind: PropKey;
+};
+declare const updateStyle: ({ elementID, styleDefID, meta, props, bind }: UpdateStyleProps) => Promise<void>;
+
+declare function getSelectedElements(): Element[];
+
+declare function getWidgetsCache(): Record<string, {
+    atomic_controls?: ControlItem[];
+    atomic_props_schema?: PropsSchema;
+    controls: object;
+    title: string;
+}> | null;
+
+declare const getElementStyles: (elementID: ElementID) => Record<string, StyleDefinition> | null;
+
+declare const getElementSetting: <TValue>(elementID: ElementID, setting: string) => TValue | null;
+
+export { type Control, type ControlItem, type ControlsSection, type Element, type ElementID, type ElementType, type PropsSchema, getElementSetting, getElementStyles, getSelectedElements, getWidgetsCache, updateSettings, updateStyle, useElementSetting, useElementStyleProp, useElementType, useSelectedElement };

package/dist/index.js

@@ -0,0 +1,205 @@
+"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, {
+  getElementSetting: () => getElementSetting,
+  getElementStyles: () => getElementStyles,
+  getSelectedElements: () => getSelectedElements,
+  getWidgetsCache: () => getWidgetsCache,
+  updateSettings: () => updateSettings,
+  updateStyle: () => updateStyle,
+  useElementSetting: () => useElementSetting,
+  useElementStyleProp: () => useElementStyleProp,
+  useElementType: () => useElementType,
+  useSelectedElement: () => useSelectedElement
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/hooks/use-selected-element.ts
+var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
+
+// src/sync/get-selected-elements.ts
+function getSelectedElements() {
+  const extendedWindow = window;
+  const selectedElements = extendedWindow.elementor?.selection?.getElements?.() ?? [];
+  return selectedElements.reduce((acc, el) => {
+    const type = el.model.get("widgetType") || el.model.get("elType");
+    if (type) {
+      acc.push({
+        id: el.model.get("id"),
+        type
+      });
+    }
+    return acc;
+  }, []);
+}
+
+// src/hooks/use-element-type.ts
+var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
+
+// src/sync/get-widgets-cache.ts
+function getWidgetsCache() {
+  const extendedWindow = window;
+  return extendedWindow?.elementor?.widgetsCache || null;
+}
+
+// src/hooks/use-element-type.ts
+function useElementType(type) {
+  return (0, import_editor_v1_adapters.__privateUseListenTo)(
+    (0, import_editor_v1_adapters.commandEndEvent)("editor/documents/load"),
+    () => {
+      if (!type) {
+        return null;
+      }
+      const widgetsCache = getWidgetsCache();
+      const elementType = widgetsCache?.[type];
+      if (!elementType?.atomic_controls) {
+        return null;
+      }
+      if (!elementType?.atomic_props_schema) {
+        return null;
+      }
+      return {
+        key: type,
+        controls: elementType.atomic_controls,
+        propsSchema: elementType.atomic_props_schema,
+        title: elementType.title
+      };
+    },
+    [type]
+  );
+}
+
+// src/hooks/use-selected-element.ts
+function useSelectedElement() {
+  const elements = (0, import_editor_v1_adapters2.__privateUseListenTo)(
+    [(0, import_editor_v1_adapters2.commandEndEvent)("document/elements/select"), (0, import_editor_v1_adapters2.commandEndEvent)("document/elements/deselect")],
+    getSelectedElements
+  );
+  const [element] = elements;
+  const elementType = useElementType(element?.type);
+  if (elements.length !== 1 || !elementType) {
+    return { element: null, elementType: null };
+  }
+  return { element, elementType };
+}
+
+// src/hooks/use-element-setting.ts
+var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
+
+// src/sync/get-container.ts
+function getContainer(id) {
+  const extendedWindow = window;
+  const container = extendedWindow.elementor?.getContainer?.(id);
+  return container ?? null;
+}
+
+// src/sync/get-element-setting.ts
+var getElementSetting = (elementID, setting) => {
+  const container = getContainer(elementID);
+  const value = container?.settings?.get(setting);
+  return value ?? null;
+};
+
+// src/hooks/use-element-setting.ts
+var useElementSetting = ({ id, bind }) => {
+  return (0, import_editor_v1_adapters3.__privateUseListenTo)((0, import_editor_v1_adapters3.commandEndEvent)("document/elements/settings"), () => getElementSetting(id, bind), [
+    id,
+    bind
+  ]);
+};
+
+// src/hooks/use-element-style-prop.ts
+var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
+
+// src/sync/get-element-styles.ts
+var getElementStyles = (elementID) => {
+  const container = getContainer(elementID);
+  return container?.model.get("styles") || null;
+};
+
+// src/hooks/use-element-style-prop.ts
+var useElementStyleProp = ({
+  elementID,
+  styleDefID,
+  meta,
+  propName
+}) => {
+  return (0, import_editor_v1_adapters4.__privateUseListenTo)(
+    (0, import_editor_v1_adapters4.commandEndEvent)("document/atomic-widgets/styles"),
+    () => {
+      if (!styleDefID) {
+        return null;
+      }
+      const styleDef = getElementStyles(elementID)?.[styleDefID];
+      if (!styleDef) {
+        return null;
+      }
+      const variant = getVariantByMeta(styleDef, meta);
+      return variant?.props[propName] ?? null;
+    },
+    [elementID, styleDefID, propName, meta]
+  );
+};
+function getVariantByMeta(styleDef, meta) {
+  return styleDef.variants.find((variant) => {
+    return variant.meta.breakpoint === meta.breakpoint && variant.meta.state === meta.state;
+  });
+}
+
+// src/sync/update-settings.ts
+var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
+var updateSettings = ({ id, props }) => {
+  const container = getContainer(id);
+  (0, import_editor_v1_adapters5.__privateRunCommand)("document/elements/settings", {
+    container,
+    settings: {
+      ...props
+    }
+  });
+};
+
+// src/sync/update-styles.ts
+var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
+var updateStyle = async ({ elementID, styleDefID, meta, props, bind }) => {
+  const container = getContainer(elementID);
+  await (0, import_editor_v1_adapters6.__privateRunCommand)("document/atomic-widgets/styles", {
+    container,
+    styleDefID,
+    bind,
+    meta,
+    props
+  });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getElementSetting,
+  getElementStyles,
+  getSelectedElements,
+  getWidgetsCache,
+  updateSettings,
+  updateStyle,
+  useElementSetting,
+  useElementStyleProp,
+  useElementType,
+  useSelectedElement
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/hooks/use-selected-element.ts","../src/sync/get-selected-elements.ts","../src/hooks/use-element-type.ts","../src/sync/get-widgets-cache.ts","../src/hooks/use-element-setting.ts","../src/sync/get-container.ts","../src/sync/get-element-setting.ts","../src/hooks/use-element-style-prop.ts","../src/sync/get-element-styles.ts","../src/sync/update-settings.ts","../src/sync/update-styles.ts"],"sourcesContent":["// types\nexport * from './types';\n\n// hooks\nexport { useSelectedElement } from './hooks/use-selected-element';\nexport { useElementType } from './hooks/use-element-type';\nexport { useElementSetting } from './hooks/use-element-setting';\nexport { useElementStyleProp } from './hooks/use-element-style-prop';\n\n// utils\nexport { updateSettings } from './sync/update-settings';\nexport { updateStyle } from './sync/update-styles';\nexport { getSelectedElements } from './sync/get-selected-elements';\nexport { getWidgetsCache } from './sync/get-widgets-cache';\nexport { getElementStyles } from './sync/get-element-styles';\nexport { getElementSetting } from './sync/get-element-setting';\n","import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\nimport { getSelectedElements } from '../sync/get-selected-elements';\nimport { useElementType } from './use-element-type';\n\nexport function useSelectedElement() {\n\tconst elements = useListenTo(\n\t\t[ commandEndEvent( 'document/elements/select' ), commandEndEvent( 'document/elements/deselect' ) ],\n\t\tgetSelectedElements\n\t);\n\n\tconst [ element ] = elements;\n\n\tconst elementType = useElementType( element?.type );\n\n\tif ( elements.length !== 1 || ! elementType ) {\n\t\treturn { element: null, elementType: null };\n\t}\n\n\treturn { element, elementType };\n}\n","import { ExtendedWindow } from './types';\nimport { Element } from '../types';\n\nexport function getSelectedElements(): Element[] {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\tconst selectedElements = extendedWindow.elementor?.selection?.getElements?.() ?? [];\n\n\treturn selectedElements.reduce< Element[] >( ( acc, el ) => {\n\t\tconst type = el.model.get( 'widgetType' ) || el.model.get( 'elType' );\n\n\t\tif ( type ) {\n\t\t\tacc.push( {\n\t\t\t\tid: el.model.get( 'id' ),\n\t\t\t\ttype,\n\t\t\t} );\n\t\t}\n\n\t\treturn acc;\n\t}, [] );\n}\n","import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\nimport { getWidgetsCache } from '../sync/get-widgets-cache';\nimport { ElementType } from '../types';\n\nexport function useElementType( type?: string ) {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'editor/documents/load' ),\n\t\t(): ElementType | null => {\n\t\t\tif ( ! type ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst widgetsCache = getWidgetsCache();\n\t\t\tconst elementType = widgetsCache?.[ type ];\n\n\t\t\tif ( ! elementType?.atomic_controls ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tif ( ! elementType?.atomic_props_schema ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tkey: type,\n\t\t\t\tcontrols: elementType.atomic_controls,\n\t\t\t\tpropsSchema: elementType.atomic_props_schema,\n\t\t\t\ttitle: elementType.title,\n\t\t\t};\n\t\t},\n\t\t[ type ]\n\t);\n}\n","import { ExtendedWindow } from './types';\n\nexport function getWidgetsCache() {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\treturn extendedWindow?.elementor?.widgetsCache || null;\n}\n","import { commandEndEvent, __privateUseListenTo as useListenTo } from '@elementor/editor-v1-adapters';\nimport { PropValue } from '@elementor/editor-props';\nimport { getElementSetting } from '../sync/get-element-setting';\n\nexport const useElementSetting = ( { id, bind }: { id: string; bind: string } ): PropValue => {\n\treturn useListenTo( commandEndEvent( 'document/elements/settings' ), () => getElementSetting( id, bind ), [\n\t\tid,\n\t\tbind,\n\t] );\n};\n","import { ExtendedWindow } from './types';\n\nexport default function getContainer( id: string ) {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\tconst container = extendedWindow.elementor?.getContainer?.( id );\n\n\treturn container ?? null;\n}\n","import { ElementID } from '../types';\nimport getContainer from './get-container';\n\nexport const getElementSetting = < TValue >( elementID: ElementID, setting: string ): TValue | null => {\n\tconst container = getContainer( elementID );\n\tconst value = container?.settings?.get( setting ) as TValue;\n\n\treturn value ?? null;\n};\n","import { PropKey, PropValue } from '@elementor/editor-props';\nimport { StyleDefinition, StyleDefinitionID, StyleVariant } from '@elementor/editor-styles';\nimport { commandEndEvent, __privateUseListenTo as useListenTo } from '@elementor/editor-v1-adapters';\nimport { getElementStyles } from '../sync/get-element-styles';\nimport { ElementID } from '../types';\n\nexport type UseElementStylePropArgs = {\n\telementID: ElementID;\n\tstyleDefID?: StyleDefinitionID;\n\tmeta: StyleVariant[ 'meta' ];\n\tpropName: PropKey;\n};\n\nexport const useElementStyleProp = < T extends PropValue >( {\n\telementID,\n\tstyleDefID,\n\tmeta,\n\tpropName,\n}: UseElementStylePropArgs ): T | null => {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'document/atomic-widgets/styles' ),\n\t\t() => {\n\t\t\t// TODO: return default value for style prop\n\t\t\tif ( ! styleDefID ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst styleDef = getElementStyles( elementID )?.[ styleDefID ];\n\n\t\t\tif ( ! styleDef ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst variant = getVariantByMeta( styleDef, meta );\n\n\t\t\treturn variant?.props[ propName ] ?? null;\n\t\t},\n\t\t[ elementID, styleDefID, propName, meta ]\n\t) as T;\n};\n\nfunction getVariantByMeta( styleDef: StyleDefinition, meta: StyleVariant[ 'meta' ] ) {\n\treturn styleDef.variants.find( ( variant ) => {\n\t\treturn variant.meta.breakpoint === meta.breakpoint && variant.meta.state === meta.state;\n\t} );\n}\n","import { StyleDefinition } from '@elementor/editor-styles';\nimport { ElementID } from '../types';\nimport getContainer from './get-container';\n\nexport const getElementStyles = ( elementID: ElementID ): Record< string, StyleDefinition > | null => {\n\tconst container = getContainer( elementID );\n\n\treturn container?.model.get( 'styles' ) || null;\n};\n","import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';\nimport { Props } from '@elementor/editor-props';\nimport getContainer from './get-container';\nimport { ElementID } from '../types';\n\nexport const updateSettings = ( { id, props }: { id: ElementID; props: Props } ) => {\n\tconst container = getContainer( id );\n\n\trunCommand( 'document/elements/settings', {\n\t\tcontainer,\n\t\tsettings: {\n\t\t\t...props,\n\t\t},\n\t} );\n};\n","import { PropKey, Props } from '@elementor/editor-props';\nimport { StyleDefinitionID, StyleVariant } from '@elementor/editor-styles';\nimport { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';\nimport getContainer from './get-container';\nimport { ElementID } from '../types';\n\nexport type UpdateStyleProps = {\n\telementID: ElementID;\n\tstyleDefID?: StyleDefinitionID;\n\tmeta: StyleVariant[ 'meta' ];\n\tprops: Props;\n\tbind: PropKey;\n};\n\nexport const updateStyle = async ( { elementID, styleDefID, meta, props, bind }: UpdateStyleProps ) => {\n\tconst container = getContainer( elementID );\n\n\tawait runCommand( 'document/atomic-widgets/styles', {\n\t\tcontainer,\n\t\tstyleDefID,\n\t\tbind,\n\t\tmeta,\n\t\tprops,\n\t} );\n};\n"],"mappings":"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","names":["import_editor_v1_adapters","useListenTo","useListenTo","import_editor_v1_adapters","useListenTo","import_editor_v1_adapters","useListenTo","import_editor_v1_adapters","runCommand","import_editor_v1_adapters","runCommand"]}

package/dist/index.mjs

@@ -0,0 +1,169 @@
+// src/hooks/use-selected-element.ts
+import { __privateUseListenTo as useListenTo2, commandEndEvent as commandEndEvent2 } from "@elementor/editor-v1-adapters";
+
+// src/sync/get-selected-elements.ts
+function getSelectedElements() {
+  const extendedWindow = window;
+  const selectedElements = extendedWindow.elementor?.selection?.getElements?.() ?? [];
+  return selectedElements.reduce((acc, el) => {
+    const type = el.model.get("widgetType") || el.model.get("elType");
+    if (type) {
+      acc.push({
+        id: el.model.get("id"),
+        type
+      });
+    }
+    return acc;
+  }, []);
+}
+
+// src/hooks/use-element-type.ts
+import { __privateUseListenTo as useListenTo, commandEndEvent } from "@elementor/editor-v1-adapters";
+
+// src/sync/get-widgets-cache.ts
+function getWidgetsCache() {
+  const extendedWindow = window;
+  return extendedWindow?.elementor?.widgetsCache || null;
+}
+
+// src/hooks/use-element-type.ts
+function useElementType(type) {
+  return useListenTo(
+    commandEndEvent("editor/documents/load"),
+    () => {
+      if (!type) {
+        return null;
+      }
+      const widgetsCache = getWidgetsCache();
+      const elementType = widgetsCache?.[type];
+      if (!elementType?.atomic_controls) {
+        return null;
+      }
+      if (!elementType?.atomic_props_schema) {
+        return null;
+      }
+      return {
+        key: type,
+        controls: elementType.atomic_controls,
+        propsSchema: elementType.atomic_props_schema,
+        title: elementType.title
+      };
+    },
+    [type]
+  );
+}
+
+// src/hooks/use-selected-element.ts
+function useSelectedElement() {
+  const elements = useListenTo2(
+    [commandEndEvent2("document/elements/select"), commandEndEvent2("document/elements/deselect")],
+    getSelectedElements
+  );
+  const [element] = elements;
+  const elementType = useElementType(element?.type);
+  if (elements.length !== 1 || !elementType) {
+    return { element: null, elementType: null };
+  }
+  return { element, elementType };
+}
+
+// src/hooks/use-element-setting.ts
+import { commandEndEvent as commandEndEvent3, __privateUseListenTo as useListenTo3 } from "@elementor/editor-v1-adapters";
+
+// src/sync/get-container.ts
+function getContainer(id) {
+  const extendedWindow = window;
+  const container = extendedWindow.elementor?.getContainer?.(id);
+  return container ?? null;
+}
+
+// src/sync/get-element-setting.ts
+var getElementSetting = (elementID, setting) => {
+  const container = getContainer(elementID);
+  const value = container?.settings?.get(setting);
+  return value ?? null;
+};
+
+// src/hooks/use-element-setting.ts
+var useElementSetting = ({ id, bind }) => {
+  return useListenTo3(commandEndEvent3("document/elements/settings"), () => getElementSetting(id, bind), [
+    id,
+    bind
+  ]);
+};
+
+// src/hooks/use-element-style-prop.ts
+import { commandEndEvent as commandEndEvent4, __privateUseListenTo as useListenTo4 } from "@elementor/editor-v1-adapters";
+
+// src/sync/get-element-styles.ts
+var getElementStyles = (elementID) => {
+  const container = getContainer(elementID);
+  return container?.model.get("styles") || null;
+};
+
+// src/hooks/use-element-style-prop.ts
+var useElementStyleProp = ({
+  elementID,
+  styleDefID,
+  meta,
+  propName
+}) => {
+  return useListenTo4(
+    commandEndEvent4("document/atomic-widgets/styles"),
+    () => {
+      if (!styleDefID) {
+        return null;
+      }
+      const styleDef = getElementStyles(elementID)?.[styleDefID];
+      if (!styleDef) {
+        return null;
+      }
+      const variant = getVariantByMeta(styleDef, meta);
+      return variant?.props[propName] ?? null;
+    },
+    [elementID, styleDefID, propName, meta]
+  );
+};
+function getVariantByMeta(styleDef, meta) {
+  return styleDef.variants.find((variant) => {
+    return variant.meta.breakpoint === meta.breakpoint && variant.meta.state === meta.state;
+  });
+}
+
+// src/sync/update-settings.ts
+import { __privateRunCommand as runCommand } from "@elementor/editor-v1-adapters";
+var updateSettings = ({ id, props }) => {
+  const container = getContainer(id);
+  runCommand("document/elements/settings", {
+    container,
+    settings: {
+      ...props
+    }
+  });
+};
+
+// src/sync/update-styles.ts
+import { __privateRunCommand as runCommand2 } from "@elementor/editor-v1-adapters";
+var updateStyle = async ({ elementID, styleDefID, meta, props, bind }) => {
+  const container = getContainer(elementID);
+  await runCommand2("document/atomic-widgets/styles", {
+    container,
+    styleDefID,
+    bind,
+    meta,
+    props
+  });
+};
+export {
+  getElementSetting,
+  getElementStyles,
+  getSelectedElements,
+  getWidgetsCache,
+  updateSettings,
+  updateStyle,
+  useElementSetting,
+  useElementStyleProp,
+  useElementType,
+  useSelectedElement
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/use-selected-element.ts","../src/sync/get-selected-elements.ts","../src/hooks/use-element-type.ts","../src/sync/get-widgets-cache.ts","../src/hooks/use-element-setting.ts","../src/sync/get-container.ts","../src/sync/get-element-setting.ts","../src/hooks/use-element-style-prop.ts","../src/sync/get-element-styles.ts","../src/sync/update-settings.ts","../src/sync/update-styles.ts"],"sourcesContent":["import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\nimport { getSelectedElements } from '../sync/get-selected-elements';\nimport { useElementType } from './use-element-type';\n\nexport function useSelectedElement() {\n\tconst elements = useListenTo(\n\t\t[ commandEndEvent( 'document/elements/select' ), commandEndEvent( 'document/elements/deselect' ) ],\n\t\tgetSelectedElements\n\t);\n\n\tconst [ element ] = elements;\n\n\tconst elementType = useElementType( element?.type );\n\n\tif ( elements.length !== 1 || ! elementType ) {\n\t\treturn { element: null, elementType: null };\n\t}\n\n\treturn { element, elementType };\n}\n","import { ExtendedWindow } from './types';\nimport { Element } from '../types';\n\nexport function getSelectedElements(): Element[] {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\tconst selectedElements = extendedWindow.elementor?.selection?.getElements?.() ?? [];\n\n\treturn selectedElements.reduce< Element[] >( ( acc, el ) => {\n\t\tconst type = el.model.get( 'widgetType' ) || el.model.get( 'elType' );\n\n\t\tif ( type ) {\n\t\t\tacc.push( {\n\t\t\t\tid: el.model.get( 'id' ),\n\t\t\t\ttype,\n\t\t\t} );\n\t\t}\n\n\t\treturn acc;\n\t}, [] );\n}\n","import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\nimport { getWidgetsCache } from '../sync/get-widgets-cache';\nimport { ElementType } from '../types';\n\nexport function useElementType( type?: string ) {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'editor/documents/load' ),\n\t\t(): ElementType | null => {\n\t\t\tif ( ! type ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst widgetsCache = getWidgetsCache();\n\t\t\tconst elementType = widgetsCache?.[ type ];\n\n\t\t\tif ( ! elementType?.atomic_controls ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tif ( ! elementType?.atomic_props_schema ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tkey: type,\n\t\t\t\tcontrols: elementType.atomic_controls,\n\t\t\t\tpropsSchema: elementType.atomic_props_schema,\n\t\t\t\ttitle: elementType.title,\n\t\t\t};\n\t\t},\n\t\t[ type ]\n\t);\n}\n","import { ExtendedWindow } from './types';\n\nexport function getWidgetsCache() {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\treturn extendedWindow?.elementor?.widgetsCache || null;\n}\n","import { commandEndEvent, __privateUseListenTo as useListenTo } from '@elementor/editor-v1-adapters';\nimport { PropValue } from '@elementor/editor-props';\nimport { getElementSetting } from '../sync/get-element-setting';\n\nexport const useElementSetting = ( { id, bind }: { id: string; bind: string } ): PropValue => {\n\treturn useListenTo( commandEndEvent( 'document/elements/settings' ), () => getElementSetting( id, bind ), [\n\t\tid,\n\t\tbind,\n\t] );\n};\n","import { ExtendedWindow } from './types';\n\nexport default function getContainer( id: string ) {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\tconst container = extendedWindow.elementor?.getContainer?.( id );\n\n\treturn container ?? null;\n}\n","import { ElementID } from '../types';\nimport getContainer from './get-container';\n\nexport const getElementSetting = < TValue >( elementID: ElementID, setting: string ): TValue | null => {\n\tconst container = getContainer( elementID );\n\tconst value = container?.settings?.get( setting ) as TValue;\n\n\treturn value ?? null;\n};\n","import { PropKey, PropValue } from '@elementor/editor-props';\nimport { StyleDefinition, StyleDefinitionID, StyleVariant } from '@elementor/editor-styles';\nimport { commandEndEvent, __privateUseListenTo as useListenTo } from '@elementor/editor-v1-adapters';\nimport { getElementStyles } from '../sync/get-element-styles';\nimport { ElementID } from '../types';\n\nexport type UseElementStylePropArgs = {\n\telementID: ElementID;\n\tstyleDefID?: StyleDefinitionID;\n\tmeta: StyleVariant[ 'meta' ];\n\tpropName: PropKey;\n};\n\nexport const useElementStyleProp = < T extends PropValue >( {\n\telementID,\n\tstyleDefID,\n\tmeta,\n\tpropName,\n}: UseElementStylePropArgs ): T | null => {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'document/atomic-widgets/styles' ),\n\t\t() => {\n\t\t\t// TODO: return default value for style prop\n\t\t\tif ( ! styleDefID ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst styleDef = getElementStyles( elementID )?.[ styleDefID ];\n\n\t\t\tif ( ! styleDef ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst variant = getVariantByMeta( styleDef, meta );\n\n\t\t\treturn variant?.props[ propName ] ?? null;\n\t\t},\n\t\t[ elementID, styleDefID, propName, meta ]\n\t) as T;\n};\n\nfunction getVariantByMeta( styleDef: StyleDefinition, meta: StyleVariant[ 'meta' ] ) {\n\treturn styleDef.variants.find( ( variant ) => {\n\t\treturn variant.meta.breakpoint === meta.breakpoint && variant.meta.state === meta.state;\n\t} );\n}\n","import { StyleDefinition } from '@elementor/editor-styles';\nimport { ElementID } from '../types';\nimport getContainer from './get-container';\n\nexport const getElementStyles = ( elementID: ElementID ): Record< string, StyleDefinition > | null => {\n\tconst container = getContainer( elementID );\n\n\treturn container?.model.get( 'styles' ) || null;\n};\n","import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';\nimport { Props } from '@elementor/editor-props';\nimport getContainer from './get-container';\nimport { ElementID } from '../types';\n\nexport const updateSettings = ( { id, props }: { id: ElementID; props: Props } ) => {\n\tconst container = getContainer( id );\n\n\trunCommand( 'document/elements/settings', {\n\t\tcontainer,\n\t\tsettings: {\n\t\t\t...props,\n\t\t},\n\t} );\n};\n","import { PropKey, Props } from '@elementor/editor-props';\nimport { StyleDefinitionID, StyleVariant } from '@elementor/editor-styles';\nimport { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';\nimport getContainer from './get-container';\nimport { ElementID } from '../types';\n\nexport type UpdateStyleProps = {\n\telementID: ElementID;\n\tstyleDefID?: StyleDefinitionID;\n\tmeta: StyleVariant[ 'meta' ];\n\tprops: Props;\n\tbind: PropKey;\n};\n\nexport const updateStyle = async ( { elementID, styleDefID, meta, props, bind }: UpdateStyleProps ) => {\n\tconst container = getContainer( elementID );\n\n\tawait runCommand( 'document/atomic-widgets/styles', {\n\t\tcontainer,\n\t\tstyleDefID,\n\t\tbind,\n\t\tmeta,\n\t\tprops,\n\t} );\n};\n"],"mappings":"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","names":["useListenTo","commandEndEvent","useListenTo","commandEndEvent","commandEndEvent","useListenTo","useListenTo","commandEndEvent","commandEndEvent","useListenTo","useListenTo","commandEndEvent","runCommand","runCommand"]}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@elementor/editor-elements",
+  "description": "This package contains the elements model for the Elementor editor",
+  "version": "0.2.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": "git+https://github.com/elementor/elementor-packages.git",
+    "directory": "packages/libs/editor-elements"
+  },
+  "bugs": {
+    "url": "https://github.com/elementor/elementor-packages/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-props": "^0.2.0",
+    "@elementor/editor-styles": "0.2.0",
+    "@elementor/editor-v1-adapters": "^0.8.3"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1"
+  }
+}

package/src/hooks/use-element-setting.ts

@@ -0,0 +1,10 @@
+import { commandEndEvent, __privateUseListenTo as useListenTo } from '@elementor/editor-v1-adapters';
+import { PropValue } from '@elementor/editor-props';
+import { getElementSetting } from '../sync/get-element-setting';
+
+export const useElementSetting = ( { id, bind }: { id: string; bind: string } ): PropValue => {
+	return useListenTo( commandEndEvent( 'document/elements/settings' ), () => getElementSetting( id, bind ), [
+		id,
+		bind,
+	] );
+};

package/src/hooks/use-element-style-prop.ts

@@ -0,0 +1,46 @@
+import { PropKey, PropValue } from '@elementor/editor-props';
+import { StyleDefinition, StyleDefinitionID, StyleVariant } from '@elementor/editor-styles';
+import { commandEndEvent, __privateUseListenTo as useListenTo } from '@elementor/editor-v1-adapters';
+import { getElementStyles } from '../sync/get-element-styles';
+import { ElementID } from '../types';
+
+export type UseElementStylePropArgs = {
+	elementID: ElementID;
+	styleDefID?: StyleDefinitionID;
+	meta: StyleVariant[ 'meta' ];
+	propName: PropKey;
+};
+
+export const useElementStyleProp = < T extends PropValue >( {
+	elementID,
+	styleDefID,
+	meta,
+	propName,
+}: UseElementStylePropArgs ): T | null => {
+	return useListenTo(
+		commandEndEvent( 'document/atomic-widgets/styles' ),
+		() => {
+			// TODO: return default value for style prop
+			if ( ! styleDefID ) {
+				return null;
+			}
+
+			const styleDef = getElementStyles( elementID )?.[ styleDefID ];
+
+			if ( ! styleDef ) {
+				return null;
+			}
+
+			const variant = getVariantByMeta( styleDef, meta );
+
+			return variant?.props[ propName ] ?? null;
+		},
+		[ elementID, styleDefID, propName, meta ]
+	) as T;
+};
+
+function getVariantByMeta( styleDef: StyleDefinition, meta: StyleVariant[ 'meta' ] ) {
+	return styleDef.variants.find( ( variant ) => {
+		return variant.meta.breakpoint === meta.breakpoint && variant.meta.state === meta.state;
+	} );
+}

package/src/hooks/use-element-type.ts

@@ -0,0 +1,33 @@
+import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';
+import { getWidgetsCache } from '../sync/get-widgets-cache';
+import { ElementType } from '../types';
+
+export function useElementType( type?: string ) {
+	return useListenTo(
+		commandEndEvent( 'editor/documents/load' ),
+		(): ElementType | null => {
+			if ( ! type ) {
+				return null;
+			}
+
+			const widgetsCache = getWidgetsCache();
+			const elementType = widgetsCache?.[ type ];
+
+			if ( ! elementType?.atomic_controls ) {
+				return null;
+			}
+
+			if ( ! elementType?.atomic_props_schema ) {
+				return null;
+			}
+
+			return {
+				key: type,
+				controls: elementType.atomic_controls,
+				propsSchema: elementType.atomic_props_schema,
+				title: elementType.title,
+			};
+		},
+		[ type ]
+	);
+}

package/src/hooks/use-selected-element.ts

@@ -0,0 +1,20 @@
+import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';
+import { getSelectedElements } from '../sync/get-selected-elements';
+import { useElementType } from './use-element-type';
+
+export function useSelectedElement() {
+	const elements = useListenTo(
+		[ commandEndEvent( 'document/elements/select' ), commandEndEvent( 'document/elements/deselect' ) ],
+		getSelectedElements
+	);
+
+	const [ element ] = elements;
+
+	const elementType = useElementType( element?.type );
+
+	if ( elements.length !== 1 || ! elementType ) {
+		return { element: null, elementType: null };
+	}
+
+	return { element, elementType };
+}

package/src/index.ts

@@ -0,0 +1,16 @@
+// types
+export * from './types';
+
+// hooks
+export { useSelectedElement } from './hooks/use-selected-element';
+export { useElementType } from './hooks/use-element-type';
+export { useElementSetting } from './hooks/use-element-setting';
+export { useElementStyleProp } from './hooks/use-element-style-prop';
+
+// utils
+export { updateSettings } from './sync/update-settings';
+export { updateStyle } from './sync/update-styles';
+export { getSelectedElements } from './sync/get-selected-elements';
+export { getWidgetsCache } from './sync/get-widgets-cache';
+export { getElementStyles } from './sync/get-element-styles';
+export { getElementSetting } from './sync/get-element-setting';

package/src/sync/get-container.ts

@@ -0,0 +1,8 @@
+import { ExtendedWindow } from './types';
+
+export default function getContainer( id: string ) {
+	const extendedWindow = window as unknown as ExtendedWindow;
+	const container = extendedWindow.elementor?.getContainer?.( id );
+
+	return container ?? null;
+}

package/src/sync/get-element-setting.ts

@@ -0,0 +1,9 @@
+import { ElementID } from '../types';
+import getContainer from './get-container';
+
+export const getElementSetting = < TValue >( elementID: ElementID, setting: string ): TValue | null => {
+	const container = getContainer( elementID );
+	const value = container?.settings?.get( setting ) as TValue;
+
+	return value ?? null;
+};

package/src/sync/get-element-styles.ts

@@ -0,0 +1,9 @@
+import { StyleDefinition } from '@elementor/editor-styles';
+import { ElementID } from '../types';
+import getContainer from './get-container';
+
+export const getElementStyles = ( elementID: ElementID ): Record< string, StyleDefinition > | null => {
+	const container = getContainer( elementID );
+
+	return container?.model.get( 'styles' ) || null;
+};

package/src/sync/get-selected-elements.ts

@@ -0,0 +1,21 @@
+import { ExtendedWindow } from './types';
+import { Element } from '../types';
+
+export function getSelectedElements(): Element[] {
+	const extendedWindow = window as unknown as ExtendedWindow;
+
+	const selectedElements = extendedWindow.elementor?.selection?.getElements?.() ?? [];
+
+	return selectedElements.reduce< Element[] >( ( acc, el ) => {
+		const type = el.model.get( 'widgetType' ) || el.model.get( 'elType' );
+
+		if ( type ) {
+			acc.push( {
+				id: el.model.get( 'id' ),
+				type,
+			} );
+		}
+
+		return acc;
+	}, [] );
+}

package/src/sync/get-widgets-cache.ts

@@ -0,0 +1,7 @@
+import { ExtendedWindow } from './types';
+
+export function getWidgetsCache() {
+	const extendedWindow = window as unknown as ExtendedWindow;
+
+	return extendedWindow?.elementor?.widgetsCache || null;
+}

package/src/sync/types.ts

@@ -0,0 +1,39 @@
+import { PropValue } from '@elementor/editor-props';
+import { StyleDefinition, StyleDefinitionID } from '@elementor/editor-styles';
+import { ControlItem, PropsSchema } from '../types';
+
+export type ExtendedWindow = Window & {
+	elementor?: {
+		selection?: {
+			getElements: () => V1Element[];
+		};
+		widgetsCache?: Record<
+			string,
+			{
+				atomic_controls?: ControlItem[];
+				atomic_props_schema?: PropsSchema;
+				controls: object;
+				title: string;
+			}
+		>;
+		getContainer?: ( id: string ) => V1Element;
+	};
+};
+
+export type V1Element = {
+	model: V1Model< V1ElementModelProps >;
+	settings?: V1Model< V1ElementSettingsProps >;
+};
+
+export type V1ElementModelProps = {
+	widgetType?: string;
+	elType: string;
+	id: string;
+	styles?: Record< StyleDefinitionID, StyleDefinition >;
+};
+
+export type V1ElementSettingsProps = Record< string, PropValue >;
+
+type V1Model< T > = {
+	get: < K extends keyof T >( key: K ) => T[ K ];
+};

package/src/sync/update-settings.ts

@@ -0,0 +1,15 @@
+import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';
+import { Props } from '@elementor/editor-props';
+import getContainer from './get-container';
+import { ElementID } from '../types';
+
+export const updateSettings = ( { id, props }: { id: ElementID; props: Props } ) => {
+	const container = getContainer( id );
+
+	runCommand( 'document/elements/settings', {
+		container,
+		settings: {
+			...props,
+		},
+	} );
+};

package/src/sync/update-styles.ts

@@ -0,0 +1,25 @@
+import { PropKey, Props } from '@elementor/editor-props';
+import { StyleDefinitionID, StyleVariant } from '@elementor/editor-styles';
+import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';
+import getContainer from './get-container';
+import { ElementID } from '../types';
+
+export type UpdateStyleProps = {
+	elementID: ElementID;
+	styleDefID?: StyleDefinitionID;
+	meta: StyleVariant[ 'meta' ];
+	props: Props;
+	bind: PropKey;
+};
+
+export const updateStyle = async ( { elementID, styleDefID, meta, props, bind }: UpdateStyleProps ) => {
+	const container = getContainer( elementID );
+
+	await runCommand( 'document/atomic-widgets/styles', {
+		container,
+		styleDefID,
+		bind,
+		meta,
+		props,
+	} );
+};

package/src/types.ts

@@ -0,0 +1,39 @@
+import { PropType } from '@elementor/editor-props';
+
+export type ElementID = string;
+
+export type Element = {
+	id: ElementID;
+	type: string;
+};
+
+export type ElementType = {
+	key: string;
+	controls: ControlItem[];
+	propsSchema: PropsSchema;
+	title: string;
+};
+
+export type ControlsSection = {
+	type: 'section';
+	value: {
+		description?: string;
+		label: string;
+		items: ControlItem[];
+	};
+};
+
+export type Control = {
+	type: 'control';
+	value: {
+		bind: string;
+		label?: string;
+		description?: string;
+		type: string;
+		props: Record< string, unknown >;
+	};
+};
+
+export type ControlItem = ControlsSection | Control;
+
+export type PropsSchema = Record< Control[ 'value' ][ 'bind' ], PropType >;