@elementor/editor-elements 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @elementor/editor-elements
 
+## 0.3.0
+
+### Minor Changes
+
+- e7f4706: save style props to session
+
+### Patch Changes
+
+- 7781969: Create basic UI for the class selector
+- d21c5c3: Introduce editor canvas to render element overlays for atomic elements
+- 7781969: Update `@elementor/ui` version
+- Updated dependencies [7781969]
+- Updated dependencies [6e240a8]
+- Updated dependencies [7781969]
+- Updated dependencies [0c6bcb6]
+  - @elementor/editor-styles@0.2.1
+  - @elementor/editor-props@0.3.0
+  - @elementor/editor-v1-adapters@0.8.4
+
 ## 0.2.0
 
 ### Minor Changes

package/dist/index.d.mts

@@ -1,5 +1,6 @@
 import { PropType, PropValue, PropKey, Props } from '@elementor/editor-props';
-import { StyleDefinitionID, StyleVariant, StyleDefinition } from '@elementor/editor-styles';
+import * as _elementor_editor_styles from '@elementor/editor-styles';
+import { StyleDefinitionID, StyleDefinition, StyleVariant } from '@elementor/editor-styles';
 
 type ElementID = string;
 type Element = {
@@ -33,20 +34,29 @@ type Control = {
 type ControlItem = ControlsSection | Control;
 type PropsSchema = Record<Control['value']['bind'], PropType>;
 
-declare function useSelectedElement(): {
-    element: null;
-    elementType: null;
-} | {
-    element: Element;
-    elementType: ElementType;
+type V1Element = {
+    id: string;
+    model: V1Model<V1ElementModelProps>;
+    settings?: V1Model<V1ElementSettingsProps>;
+    children?: V1Element[];
+    view?: {
+        el: HTMLElement;
+    };
+};
+type V1ElementModelProps = {
+    widgetType?: string;
+    elType: string;
+    id: string;
+    styles?: Record<StyleDefinitionID, StyleDefinition>;
+};
+type V1ElementSettingsProps = Record<string, PropValue>;
+type V1Model<T> = {
+    get: <K extends keyof T>(key: K) => T[K];
 };
 
-declare function useElementType(type?: string): ElementType | null;
+declare function useElementsDomRef(): HTMLElement[];
 
-declare const useElementSetting: ({ id, bind }: {
-    id: string;
-    bind: string;
-}) => PropValue;
+declare const useElementSetting: <TValue>(elementId: ElementID, settingKey: string) => TValue | null;
 
 type UseElementStylePropArgs = {
     elementID: ElementID;
@@ -55,20 +65,23 @@ type UseElementStylePropArgs = {
     propName: PropKey;
 };
 declare const useElementStyleProp: <T extends PropValue>({ elementID, styleDefID, meta, propName, }: UseElementStylePropArgs) => T | null;
+declare function getVariantByMeta(styleDef: StyleDefinition, meta: StyleVariant['meta']): StyleVariant | undefined;
 
-declare const updateSettings: ({ id, props }: {
-    id: ElementID;
-    props: Props;
-}) => void;
+declare function useElementStyles(elementId: ElementID): Record<string, _elementor_editor_styles.StyleDefinition>;
 
-type UpdateStyleProps = {
-    elementID: ElementID;
-    styleDefID?: StyleDefinitionID;
-    meta: StyleVariant['meta'];
-    props: Props;
-    bind: PropKey;
+declare function useElementType(type?: string): ElementType | null;
+
+declare function useSelectedElement(): {
+    element: null;
+    elementType: null;
+} | {
+    element: Element;
+    elementType: ElementType;
 };
-declare const updateStyle: ({ elementID, styleDefID, meta, props, bind }: UpdateStyleProps) => Promise<void>;
+
+declare const getElementSetting: <TValue>(elementId: ElementID, settingKey: string) => TValue | null;
+
+declare const getElementStyles: (elementID: ElementID) => Record<string, StyleDefinition> | null;
 
 declare function getSelectedElements(): Element[];
 
@@ -79,8 +92,20 @@ declare function getWidgetsCache(): Record<string, {
     title: string;
 }> | null;
 
-declare const getElementStyles: (elementID: ElementID) => Record<string, StyleDefinition> | null;
+declare const isElementInContainer: (element: Element, container: V1Element) => boolean;
+
+declare const updateSettings: ({ id, props }: {
+    id: ElementID;
+    props: Props;
+}) => void;
 
-declare const getElementSetting: <TValue>(elementID: ElementID, setting: string) => TValue | null;
+type UpdateStyleProps = {
+    elementID: ElementID;
+    styleDefID?: StyleDefinitionID;
+    meta: StyleVariant['meta'];
+    props: Props;
+    bind: PropKey;
+};
+declare const updateStyle: ({ elementID, styleDefID, meta, props, bind }: UpdateStyleProps) => Promise<void>;
 
-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 };
+export { type Control, type ControlItem, type ControlsSection, type Element, type ElementID, type ElementType, type PropsSchema, type V1Element, type V1ElementModelProps, type V1ElementSettingsProps, getElementSetting, getElementStyles, getSelectedElements, getVariantByMeta, getWidgetsCache, isElementInContainer, updateSettings, updateStyle, useElementSetting, useElementStyleProp, useElementStyles, useElementType, useElementsDomRef, useSelectedElement };

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import { PropType, PropValue, PropKey, Props } from '@elementor/editor-props';
-import { StyleDefinitionID, StyleVariant, StyleDefinition } from '@elementor/editor-styles';
+import * as _elementor_editor_styles from '@elementor/editor-styles';
+import { StyleDefinitionID, StyleDefinition, StyleVariant } from '@elementor/editor-styles';
 
 type ElementID = string;
 type Element = {
@@ -33,20 +34,29 @@ type Control = {
 type ControlItem = ControlsSection | Control;
 type PropsSchema = Record<Control['value']['bind'], PropType>;
 
-declare function useSelectedElement(): {
-    element: null;
-    elementType: null;
-} | {
-    element: Element;
-    elementType: ElementType;
+type V1Element = {
+    id: string;
+    model: V1Model<V1ElementModelProps>;
+    settings?: V1Model<V1ElementSettingsProps>;
+    children?: V1Element[];
+    view?: {
+        el: HTMLElement;
+    };
+};
+type V1ElementModelProps = {
+    widgetType?: string;
+    elType: string;
+    id: string;
+    styles?: Record<StyleDefinitionID, StyleDefinition>;
+};
+type V1ElementSettingsProps = Record<string, PropValue>;
+type V1Model<T> = {
+    get: <K extends keyof T>(key: K) => T[K];
 };
 
-declare function useElementType(type?: string): ElementType | null;
+declare function useElementsDomRef(): HTMLElement[];
 
-declare const useElementSetting: ({ id, bind }: {
-    id: string;
-    bind: string;
-}) => PropValue;
+declare const useElementSetting: <TValue>(elementId: ElementID, settingKey: string) => TValue | null;
 
 type UseElementStylePropArgs = {
     elementID: ElementID;
@@ -55,20 +65,23 @@ type UseElementStylePropArgs = {
     propName: PropKey;
 };
 declare const useElementStyleProp: <T extends PropValue>({ elementID, styleDefID, meta, propName, }: UseElementStylePropArgs) => T | null;
+declare function getVariantByMeta(styleDef: StyleDefinition, meta: StyleVariant['meta']): StyleVariant | undefined;
 
-declare const updateSettings: ({ id, props }: {
-    id: ElementID;
-    props: Props;
-}) => void;
+declare function useElementStyles(elementId: ElementID): Record<string, _elementor_editor_styles.StyleDefinition>;
 
-type UpdateStyleProps = {
-    elementID: ElementID;
-    styleDefID?: StyleDefinitionID;
-    meta: StyleVariant['meta'];
-    props: Props;
-    bind: PropKey;
+declare function useElementType(type?: string): ElementType | null;
+
+declare function useSelectedElement(): {
+    element: null;
+    elementType: null;
+} | {
+    element: Element;
+    elementType: ElementType;
 };
-declare const updateStyle: ({ elementID, styleDefID, meta, props, bind }: UpdateStyleProps) => Promise<void>;
+
+declare const getElementSetting: <TValue>(elementId: ElementID, settingKey: string) => TValue | null;
+
+declare const getElementStyles: (elementID: ElementID) => Record<string, StyleDefinition> | null;
 
 declare function getSelectedElements(): Element[];
 
@@ -79,8 +92,20 @@ declare function getWidgetsCache(): Record<string, {
     title: string;
 }> | null;
 
-declare const getElementStyles: (elementID: ElementID) => Record<string, StyleDefinition> | null;
+declare const isElementInContainer: (element: Element, container: V1Element) => boolean;
+
+declare const updateSettings: ({ id, props }: {
+    id: ElementID;
+    props: Props;
+}) => void;
 
-declare const getElementSetting: <TValue>(elementID: ElementID, setting: string) => TValue | null;
+type UpdateStyleProps = {
+    elementID: ElementID;
+    styleDefID?: StyleDefinitionID;
+    meta: StyleVariant['meta'];
+    props: Props;
+    bind: PropKey;
+};
+declare const updateStyle: ({ elementID, styleDefID, meta, props, bind }: UpdateStyleProps) => Promise<void>;
 
-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 };
+export { type Control, type ControlItem, type ControlsSection, type Element, type ElementID, type ElementType, type PropsSchema, type V1Element, type V1ElementModelProps, type V1ElementSettingsProps, getElementSetting, getElementStyles, getSelectedElements, getVariantByMeta, getWidgetsCache, isElementInContainer, updateSettings, updateStyle, useElementSetting, useElementStyleProp, useElementStyles, useElementType, useElementsDomRef, useSelectedElement };

package/dist/index.js

@@ -23,87 +23,52 @@ __export(src_exports, {
   getElementSetting: () => getElementSetting,
   getElementStyles: () => getElementStyles,
   getSelectedElements: () => getSelectedElements,
+  getVariantByMeta: () => getVariantByMeta,
   getWidgetsCache: () => getWidgetsCache,
+  isElementInContainer: () => isElementInContainer,
   updateSettings: () => updateSettings,
   updateStyle: () => updateStyle,
   useElementSetting: () => useElementSetting,
   useElementStyleProp: () => useElementStyleProp,
+  useElementStyles: () => useElementStyles,
   useElementType: () => useElementType,
+  useElementsDomRef: () => useElementsDomRef,
   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
+// src/hooks/use-elements-dom-ref.ts
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
 
-// src/sync/get-widgets-cache.ts
-function getWidgetsCache() {
+// src/sync/get-current-document-container.ts
+function getCurrentDocumentContainer() {
   const extendedWindow = window;
-  return extendedWindow?.elementor?.widgetsCache || null;
+  return extendedWindow.elementor?.documents?.getCurrent?.()?.container ?? null;
 }
 
-// src/hooks/use-element-type.ts
-function useElementType(type) {
+// src/hooks/use-elements-dom-ref.ts
+var ELEMENTS_DATA_ATTR = "data-atomic";
+function useElementsDomRef() {
   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]
+    [
+      (0, import_editor_v1_adapters.windowEvent)("elementor/preview/atomic-widget/render"),
+      (0, import_editor_v1_adapters.windowEvent)("elementor/preview/atomic-widget/destroy"),
+      (0, import_editor_v1_adapters.windowEvent)("elementor/editor/element-rendered"),
+      (0, import_editor_v1_adapters.windowEvent)("elementor/editor/element-destroyed")
+    ],
+    () => getElementsDom()
   );
 }
-
-// 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 };
+function getElementsDom() {
+  const root = getCurrentDocumentContainer();
+  if (!root?.view) {
+    return [];
   }
-  return { element, elementType };
+  return [...root.view.el.querySelectorAll(`[${ELEMENTS_DATA_ATTR}]`)];
 }
 
 // src/hooks/use-element-setting.ts
-var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
 
 // src/sync/get-container.ts
 function getContainer(id) {
@@ -113,22 +78,23 @@ function getContainer(id) {
 }
 
 // src/sync/get-element-setting.ts
-var getElementSetting = (elementID, setting) => {
-  const container = getContainer(elementID);
-  const value = container?.settings?.get(setting);
+var getElementSetting = (elementId, settingKey) => {
+  const container = getContainer(elementId);
+  const value = container?.settings?.get(settingKey);
   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
-  ]);
+var useElementSetting = (elementId, settingKey) => {
+  return (0, import_editor_v1_adapters2.__privateUseListenTo)(
+    (0, import_editor_v1_adapters2.commandEndEvent)("document/elements/set-settings"),
+    () => getElementSetting(elementId, settingKey),
+    [elementId, settingKey]
+  );
 };
 
 // src/hooks/use-element-style-prop.ts
-var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
 
 // src/sync/get-element-styles.ts
 var getElementStyles = (elementID) => {
@@ -143,8 +109,8 @@ var useElementStyleProp = ({
   meta,
   propName
 }) => {
-  return (0, import_editor_v1_adapters4.__privateUseListenTo)(
-    (0, import_editor_v1_adapters4.commandEndEvent)("document/atomic-widgets/styles"),
+  return (0, import_editor_v1_adapters3.__privateUseListenTo)(
+    (0, import_editor_v1_adapters3.commandEndEvent)("document/atomic-widgets/styles"),
     () => {
       if (!styleDefID) {
         return null;
@@ -165,11 +131,101 @@ function getVariantByMeta(styleDef, meta) {
   });
 }
 
-// src/sync/update-settings.ts
+// src/hooks/use-element-styles.ts
+var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
+function useElementStyles(elementId) {
+  return (0, import_editor_v1_adapters4.__privateUseListenTo)(
+    (0, import_editor_v1_adapters4.commandEndEvent)("document/atomic-widgets/styles"),
+    () => getElementStyles(elementId) ?? {},
+    [elementId]
+  );
+}
+
+// src/hooks/use-element-type.ts
 var import_editor_v1_adapters5 = 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_adapters5.__privateUseListenTo)(
+    (0, import_editor_v1_adapters5.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
+var import_editor_v1_adapters6 = 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-selected-element.ts
+function useSelectedElement() {
+  const elements = (0, import_editor_v1_adapters6.__privateUseListenTo)(
+    [(0, import_editor_v1_adapters6.commandEndEvent)("document/elements/select"), (0, import_editor_v1_adapters6.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/sync/is-element-in-container.ts
+var isElementInContainer = (element, container) => {
+  if (container.model.get("id") === element.id && container.model.get("widgetType") === element.type) {
+    return true;
+  }
+  if (container.children && container.children.length > 0) {
+    return container.children.some((child) => isElementInContainer(element, child));
+  }
+  return false;
+};
+
+// src/sync/update-settings.ts
+var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
 var updateSettings = ({ id, props }) => {
   const container = getContainer(id);
-  (0, import_editor_v1_adapters5.__privateRunCommand)("document/elements/settings", {
+  (0, import_editor_v1_adapters7.__privateRunCommand)("document/elements/settings", {
     container,
     settings: {
       ...props
@@ -178,10 +234,10 @@ var updateSettings = ({ id, props }) => {
 };
 
 // src/sync/update-styles.ts
-var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters8 = 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", {
+  await (0, import_editor_v1_adapters8.__privateRunCommand)("document/atomic-widgets/styles", {
     container,
     styleDefID,
     bind,
@@ -194,12 +250,16 @@ var updateStyle = async ({ elementID, styleDefID, meta, props, bind }) => {
   getElementSetting,
   getElementStyles,
   getSelectedElements,
+  getVariantByMeta,
   getWidgetsCache,
+  isElementInContainer,
   updateSettings,
   updateStyle,
   useElementSetting,
   useElementStyleProp,
+  useElementStyles,
   useElementType,
+  useElementsDomRef,
   useSelectedElement
 });
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +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"]}
+{"version":3,"sources":["../src/index.ts","../src/hooks/use-elements-dom-ref.ts","../src/sync/get-current-document-container.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/hooks/use-element-styles.ts","../src/hooks/use-element-type.ts","../src/sync/get-widgets-cache.ts","../src/hooks/use-selected-element.ts","../src/sync/get-selected-elements.ts","../src/sync/is-element-in-container.ts","../src/sync/update-settings.ts","../src/sync/update-styles.ts"],"sourcesContent":["// types\nexport * from './types';\nexport type { V1Element, V1ElementModelProps, V1ElementSettingsProps } from './sync/types';\n\n// hooks\nexport { useElementsDomRef } from './hooks/use-elements-dom-ref';\nexport { useElementSetting } from './hooks/use-element-setting';\nexport { useElementStyleProp, getVariantByMeta } from './hooks/use-element-style-prop';\nexport { useElementStyles } from './hooks/use-element-styles';\nexport { useElementType } from './hooks/use-element-type';\nexport { useSelectedElement } from './hooks/use-selected-element';\n\n// utils\nexport { getElementSetting } from './sync/get-element-setting';\nexport { getElementStyles } from './sync/get-element-styles';\nexport { getSelectedElements } from './sync/get-selected-elements';\nexport { getWidgetsCache } from './sync/get-widgets-cache';\nexport { isElementInContainer } from './sync/is-element-in-container';\nexport { updateSettings } from './sync/update-settings';\nexport { updateStyle } from './sync/update-styles';\n","import { __privateUseListenTo as useListenTo, windowEvent } from '@elementor/editor-v1-adapters';\n\nimport getCurrentDocumentContainer from '../sync/get-current-document-container';\n\nconst ELEMENTS_DATA_ATTR = 'data-atomic';\n\nexport function useElementsDomRef(): HTMLElement[] {\n\treturn useListenTo(\n\t\t[\n\t\t\twindowEvent( 'elementor/preview/atomic-widget/render' ),\n\t\t\twindowEvent( 'elementor/preview/atomic-widget/destroy' ),\n\t\t\twindowEvent( 'elementor/editor/element-rendered' ),\n\t\t\twindowEvent( 'elementor/editor/element-destroyed' ),\n\t\t],\n\t\t() => getElementsDom()\n\t);\n}\n\nfunction getElementsDom(): HTMLElement[] {\n\tconst root = getCurrentDocumentContainer();\n\n\tif ( ! root?.view ) {\n\t\treturn [];\n\t}\n\n\treturn [ ...root.view.el.querySelectorAll< HTMLElement >( `[${ ELEMENTS_DATA_ATTR }]` ) ];\n}\n","import { type ExtendedWindow } from './types';\n\nexport default function getCurrentDocumentContainer() {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\treturn extendedWindow.elementor?.documents?.getCurrent?.()?.container ?? null;\n}\n","import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\n\nimport { getElementSetting } from '../sync/get-element-setting';\nimport { type ElementID } from '../types';\n\nexport const useElementSetting = < TValue >( elementId: ElementID, settingKey: string ) => {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'document/elements/set-settings' ),\n\t\t() => getElementSetting< TValue >( elementId, settingKey ),\n\t\t[ elementId, settingKey ]\n\t);\n};\n","import { type 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 { type ElementID } from '../types';\nimport getContainer from './get-container';\n\nexport const getElementSetting = < TValue >( elementId: ElementID, settingKey: string ): TValue | null => {\n\tconst container = getContainer( elementId );\n\tconst value = container?.settings?.get( settingKey ) as TValue;\n\n\treturn value ?? null;\n};\n","import { type PropKey, type PropValue } from '@elementor/editor-props';\nimport { type StyleDefinition, type StyleDefinitionID, type StyleVariant } from '@elementor/editor-styles';\nimport { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\n\nimport { getElementStyles } from '../sync/get-element-styles';\nimport { type 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\nexport function 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 { type StyleDefinition } from '@elementor/editor-styles';\n\nimport { type 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 { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\n\nimport { getElementStyles } from '../sync/get-element-styles';\nimport { type ElementID } from '../types';\n\nexport function useElementStyles( elementId: ElementID ) {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'document/atomic-widgets/styles' ),\n\t\t() => getElementStyles( elementId ) ?? {},\n\t\t[ elementId ]\n\t);\n}\n","import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\n\nimport { getWidgetsCache } from '../sync/get-widgets-cache';\nimport { type 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 { type 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 { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\n\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 { type Element } from '../types';\nimport { type ExtendedWindow } 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 { type Element } from '../types';\nimport { type V1Element } from './types';\n\nexport const isElementInContainer = ( element: Element, container: V1Element ): boolean => {\n\tif ( container.model.get( 'id' ) === element.id && container.model.get( 'widgetType' ) === element.type ) {\n\t\treturn true;\n\t}\n\n\tif ( container.children && container.children.length > 0 ) {\n\t\treturn container.children.some( ( child ) => isElementInContainer( element, child ) );\n\t}\n\n\treturn false;\n};\n","import { type Props } from '@elementor/editor-props';\nimport { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';\n\nimport { type ElementID } from '../types';\nimport getContainer from './get-container';\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 { type PropKey, type Props } from '@elementor/editor-props';\nimport { type StyleDefinitionID, type StyleVariant } from '@elementor/editor-styles';\nimport { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';\n\nimport { type ElementID } from '../types';\nimport getContainer from './get-container';\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":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,gCAAiE;;;ACElD,SAAR,8BAA+C;AACrD,QAAM,iBAAiB;AAEvB,SAAO,eAAe,WAAW,WAAW,aAAa,GAAG,aAAa;AAC1E;;;ADFA,IAAM,qBAAqB;AAEpB,SAAS,oBAAmC;AAClD,aAAO,0BAAAA;AAAA,IACN;AAAA,UACC,uCAAa,wCAAyC;AAAA,UACtD,uCAAa,yCAA0C;AAAA,UACvD,uCAAa,mCAAoC;AAAA,UACjD,uCAAa,oCAAqC;AAAA,IACnD;AAAA,IACA,MAAM,eAAe;AAAA,EACtB;AACD;AAEA,SAAS,iBAAgC;AACxC,QAAM,OAAO,4BAA4B;AAEzC,MAAK,CAAE,MAAM,MAAO;AACnB,WAAO,CAAC;AAAA,EACT;AAEA,SAAO,CAAE,GAAG,KAAK,KAAK,GAAG,iBAAiC,IAAK,kBAAmB,GAAI,CAAE;AACzF;;;AE1BA,IAAAC,6BAAqE;;;ACEtD,SAAR,aAA+B,IAAa;AAClD,QAAM,iBAAiB;AACvB,QAAM,YAAY,eAAe,WAAW,eAAgB,EAAG;AAE/D,SAAO,aAAa;AACrB;;;ACJO,IAAM,oBAAoB,CAAY,WAAsB,eAAuC;AACzG,QAAM,YAAY,aAAc,SAAU;AAC1C,QAAM,QAAQ,WAAW,UAAU,IAAK,UAAW;AAEnD,SAAO,SAAS;AACjB;;;AFHO,IAAM,oBAAoB,CAAY,WAAsB,eAAwB;AAC1F,aAAO,2BAAAC;AAAA,QACN,4CAAiB,gCAAiC;AAAA,IAClD,MAAM,kBAA6B,WAAW,UAAW;AAAA,IACzD,CAAE,WAAW,UAAW;AAAA,EACzB;AACD;;;AGTA,IAAAC,6BAAqE;;;ACG9D,IAAM,mBAAmB,CAAE,cAAoE;AACrG,QAAM,YAAY,aAAc,SAAU;AAE1C,SAAO,WAAW,MAAM,IAAK,QAAS,KAAK;AAC5C;;;ADKO,IAAM,sBAAsB,CAAyB;AAAA,EAC3D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,MAA0C;AACzC,aAAO,2BAAAC;AAAA,QACN,4CAAiB,gCAAiC;AAAA,IAClD,MAAM;AAEL,UAAK,CAAE,YAAa;AACnB,eAAO;AAAA,MACR;AAEA,YAAM,WAAW,iBAAkB,SAAU,IAAK,UAAW;AAE7D,UAAK,CAAE,UAAW;AACjB,eAAO;AAAA,MACR;AAEA,YAAM,UAAU,iBAAkB,UAAU,IAAK;AAEjD,aAAO,SAAS,MAAO,QAAS,KAAK;AAAA,IACtC;AAAA,IACA,CAAE,WAAW,YAAY,UAAU,IAAK;AAAA,EACzC;AACD;AAEO,SAAS,iBAAkB,UAA2B,MAA+B;AAC3F,SAAO,SAAS,SAAS,KAAM,CAAE,YAAa;AAC7C,WAAO,QAAQ,KAAK,eAAe,KAAK,cAAc,QAAQ,KAAK,UAAU,KAAK;AAAA,EACnF,CAAE;AACH;;;AE9CA,IAAAC,6BAAqE;AAK9D,SAAS,iBAAkB,WAAuB;AACxD,aAAO,2BAAAC;AAAA,QACN,4CAAiB,gCAAiC;AAAA,IAClD,MAAM,iBAAkB,SAAU,KAAK,CAAC;AAAA,IACxC,CAAE,SAAU;AAAA,EACb;AACD;;;ACXA,IAAAC,6BAAqE;;;ACE9D,SAAS,kBAAkB;AACjC,QAAM,iBAAiB;AAEvB,SAAO,gBAAgB,WAAW,gBAAgB;AACnD;;;ADDO,SAAS,eAAgB,MAAgB;AAC/C,aAAO,2BAAAC;AAAA,QACN,4CAAiB,uBAAwB;AAAA,IACzC,MAA0B;AACzB,UAAK,CAAE,MAAO;AACb,eAAO;AAAA,MACR;AAEA,YAAM,eAAe,gBAAgB;AACrC,YAAM,cAAc,eAAgB,IAAK;AAEzC,UAAK,CAAE,aAAa,iBAAkB;AACrC,eAAO;AAAA,MACR;AAEA,UAAK,CAAE,aAAa,qBAAsB;AACzC,eAAO;AAAA,MACR;AAEA,aAAO;AAAA,QACN,KAAK;AAAA,QACL,UAAU,YAAY;AAAA,QACtB,aAAa,YAAY;AAAA,QACzB,OAAO,YAAY;AAAA,MACpB;AAAA,IACD;AAAA,IACA,CAAE,IAAK;AAAA,EACR;AACD;;;AEjCA,IAAAC,6BAAqE;;;ACG9D,SAAS,sBAAiC;AAChD,QAAM,iBAAiB;AAEvB,QAAM,mBAAmB,eAAe,WAAW,WAAW,cAAc,KAAK,CAAC;AAElF,SAAO,iBAAiB,OAAqB,CAAE,KAAK,OAAQ;AAC3D,UAAM,OAAO,GAAG,MAAM,IAAK,YAAa,KAAK,GAAG,MAAM,IAAK,QAAS;AAEpE,QAAK,MAAO;AACX,UAAI,KAAM;AAAA,QACT,IAAI,GAAG,MAAM,IAAK,IAAK;AAAA,QACvB;AAAA,MACD,CAAE;AAAA,IACH;AAEA,WAAO;AAAA,EACR,GAAG,CAAC,CAAE;AACP;;;ADfO,SAAS,qBAAqB;AACpC,QAAM,eAAW,2BAAAC;AAAA,IAChB,KAAE,4CAAiB,0BAA2B,OAAG,4CAAiB,4BAA6B,CAAE;AAAA,IACjG;AAAA,EACD;AAEA,QAAM,CAAE,OAAQ,IAAI;AAEpB,QAAM,cAAc,eAAgB,SAAS,IAAK;AAElD,MAAK,SAAS,WAAW,KAAK,CAAE,aAAc;AAC7C,WAAO,EAAE,SAAS,MAAM,aAAa,KAAK;AAAA,EAC3C;AAEA,SAAO,EAAE,SAAS,YAAY;AAC/B;;;AEjBO,IAAM,uBAAuB,CAAE,SAAkB,cAAmC;AAC1F,MAAK,UAAU,MAAM,IAAK,IAAK,MAAM,QAAQ,MAAM,UAAU,MAAM,IAAK,YAAa,MAAM,QAAQ,MAAO;AACzG,WAAO;AAAA,EACR;AAEA,MAAK,UAAU,YAAY,UAAU,SAAS,SAAS,GAAI;AAC1D,WAAO,UAAU,SAAS,KAAM,CAAE,UAAW,qBAAsB,SAAS,KAAM,CAAE;AAAA,EACrF;AAEA,SAAO;AACR;;;ACZA,IAAAC,6BAAkD;AAK3C,IAAM,iBAAiB,CAAE,EAAE,IAAI,MAAM,MAAwC;AACnF,QAAM,YAAY,aAAc,EAAG;AAEnC,iCAAAC,qBAAY,8BAA8B;AAAA,IACzC;AAAA,IACA,UAAU;AAAA,MACT,GAAG;AAAA,IACJ;AAAA,EACD,CAAE;AACH;;;ACbA,IAAAC,6BAAkD;AAa3C,IAAM,cAAc,OAAQ,EAAE,WAAW,YAAY,MAAM,OAAO,KAAK,MAAyB;AACtG,QAAM,YAAY,aAAc,SAAU;AAE1C,YAAM,2BAAAC,qBAAY,kCAAkC;AAAA,IACnD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AACH;","names":["useListenTo","import_editor_v1_adapters","useListenTo","import_editor_v1_adapters","useListenTo","import_editor_v1_adapters","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

@@ -1,74 +1,35 @@
-// 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/hooks/use-elements-dom-ref.ts
+import { __privateUseListenTo as useListenTo, windowEvent } from "@elementor/editor-v1-adapters";
 
-// src/sync/get-widgets-cache.ts
-function getWidgetsCache() {
+// src/sync/get-current-document-container.ts
+function getCurrentDocumentContainer() {
   const extendedWindow = window;
-  return extendedWindow?.elementor?.widgetsCache || null;
+  return extendedWindow.elementor?.documents?.getCurrent?.()?.container ?? null;
 }
 
-// src/hooks/use-element-type.ts
-function useElementType(type) {
+// src/hooks/use-elements-dom-ref.ts
+var ELEMENTS_DATA_ATTR = "data-atomic";
+function useElementsDomRef() {
   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]
+    [
+      windowEvent("elementor/preview/atomic-widget/render"),
+      windowEvent("elementor/preview/atomic-widget/destroy"),
+      windowEvent("elementor/editor/element-rendered"),
+      windowEvent("elementor/editor/element-destroyed")
+    ],
+    () => getElementsDom()
   );
 }
-
-// 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 };
+function getElementsDom() {
+  const root = getCurrentDocumentContainer();
+  if (!root?.view) {
+    return [];
   }
-  return { element, elementType };
+  return [...root.view.el.querySelectorAll(`[${ELEMENTS_DATA_ATTR}]`)];
 }
 
 // src/hooks/use-element-setting.ts
-import { commandEndEvent as commandEndEvent3, __privateUseListenTo as useListenTo3 } from "@elementor/editor-v1-adapters";
+import { __privateUseListenTo as useListenTo2, commandEndEvent } from "@elementor/editor-v1-adapters";
 
 // src/sync/get-container.ts
 function getContainer(id) {
@@ -78,22 +39,23 @@ function getContainer(id) {
 }
 
 // src/sync/get-element-setting.ts
-var getElementSetting = (elementID, setting) => {
-  const container = getContainer(elementID);
-  const value = container?.settings?.get(setting);
+var getElementSetting = (elementId, settingKey) => {
+  const container = getContainer(elementId);
+  const value = container?.settings?.get(settingKey);
   return value ?? null;
 };
 
 // src/hooks/use-element-setting.ts
-var useElementSetting = ({ id, bind }) => {
-  return useListenTo3(commandEndEvent3("document/elements/settings"), () => getElementSetting(id, bind), [
-    id,
-    bind
-  ]);
+var useElementSetting = (elementId, settingKey) => {
+  return useListenTo2(
+    commandEndEvent("document/elements/set-settings"),
+    () => getElementSetting(elementId, settingKey),
+    [elementId, settingKey]
+  );
 };
 
 // src/hooks/use-element-style-prop.ts
-import { commandEndEvent as commandEndEvent4, __privateUseListenTo as useListenTo4 } from "@elementor/editor-v1-adapters";
+import { __privateUseListenTo as useListenTo3, commandEndEvent as commandEndEvent2 } from "@elementor/editor-v1-adapters";
 
 // src/sync/get-element-styles.ts
 var getElementStyles = (elementID) => {
@@ -108,8 +70,8 @@ var useElementStyleProp = ({
   meta,
   propName
 }) => {
-  return useListenTo4(
-    commandEndEvent4("document/atomic-widgets/styles"),
+  return useListenTo3(
+    commandEndEvent2("document/atomic-widgets/styles"),
     () => {
       if (!styleDefID) {
         return null;
@@ -130,6 +92,96 @@ function getVariantByMeta(styleDef, meta) {
   });
 }
 
+// src/hooks/use-element-styles.ts
+import { __privateUseListenTo as useListenTo4, commandEndEvent as commandEndEvent3 } from "@elementor/editor-v1-adapters";
+function useElementStyles(elementId) {
+  return useListenTo4(
+    commandEndEvent3("document/atomic-widgets/styles"),
+    () => getElementStyles(elementId) ?? {},
+    [elementId]
+  );
+}
+
+// src/hooks/use-element-type.ts
+import { __privateUseListenTo as useListenTo5, commandEndEvent as commandEndEvent4 } 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 useListenTo5(
+    commandEndEvent4("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
+import { __privateUseListenTo as useListenTo6, commandEndEvent as commandEndEvent5 } 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-selected-element.ts
+function useSelectedElement() {
+  const elements = useListenTo6(
+    [commandEndEvent5("document/elements/select"), commandEndEvent5("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/sync/is-element-in-container.ts
+var isElementInContainer = (element, container) => {
+  if (container.model.get("id") === element.id && container.model.get("widgetType") === element.type) {
+    return true;
+  }
+  if (container.children && container.children.length > 0) {
+    return container.children.some((child) => isElementInContainer(element, child));
+  }
+  return false;
+};
+
 // src/sync/update-settings.ts
 import { __privateRunCommand as runCommand } from "@elementor/editor-v1-adapters";
 var updateSettings = ({ id, props }) => {
@@ -158,12 +210,16 @@ export {
   getElementSetting,
   getElementStyles,
   getSelectedElements,
+  getVariantByMeta,
   getWidgetsCache,
+  isElementInContainer,
   updateSettings,
   updateStyle,
   useElementSetting,
   useElementStyleProp,
+  useElementStyles,
   useElementType,
+  useElementsDomRef,
   useSelectedElement
 };
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +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"]}
+{"version":3,"sources":["../src/hooks/use-elements-dom-ref.ts","../src/sync/get-current-document-container.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/hooks/use-element-styles.ts","../src/hooks/use-element-type.ts","../src/sync/get-widgets-cache.ts","../src/hooks/use-selected-element.ts","../src/sync/get-selected-elements.ts","../src/sync/is-element-in-container.ts","../src/sync/update-settings.ts","../src/sync/update-styles.ts"],"sourcesContent":["import { __privateUseListenTo as useListenTo, windowEvent } from '@elementor/editor-v1-adapters';\n\nimport getCurrentDocumentContainer from '../sync/get-current-document-container';\n\nconst ELEMENTS_DATA_ATTR = 'data-atomic';\n\nexport function useElementsDomRef(): HTMLElement[] {\n\treturn useListenTo(\n\t\t[\n\t\t\twindowEvent( 'elementor/preview/atomic-widget/render' ),\n\t\t\twindowEvent( 'elementor/preview/atomic-widget/destroy' ),\n\t\t\twindowEvent( 'elementor/editor/element-rendered' ),\n\t\t\twindowEvent( 'elementor/editor/element-destroyed' ),\n\t\t],\n\t\t() => getElementsDom()\n\t);\n}\n\nfunction getElementsDom(): HTMLElement[] {\n\tconst root = getCurrentDocumentContainer();\n\n\tif ( ! root?.view ) {\n\t\treturn [];\n\t}\n\n\treturn [ ...root.view.el.querySelectorAll< HTMLElement >( `[${ ELEMENTS_DATA_ATTR }]` ) ];\n}\n","import { type ExtendedWindow } from './types';\n\nexport default function getCurrentDocumentContainer() {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\treturn extendedWindow.elementor?.documents?.getCurrent?.()?.container ?? null;\n}\n","import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\n\nimport { getElementSetting } from '../sync/get-element-setting';\nimport { type ElementID } from '../types';\n\nexport const useElementSetting = < TValue >( elementId: ElementID, settingKey: string ) => {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'document/elements/set-settings' ),\n\t\t() => getElementSetting< TValue >( elementId, settingKey ),\n\t\t[ elementId, settingKey ]\n\t);\n};\n","import { type 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 { type ElementID } from '../types';\nimport getContainer from './get-container';\n\nexport const getElementSetting = < TValue >( elementId: ElementID, settingKey: string ): TValue | null => {\n\tconst container = getContainer( elementId );\n\tconst value = container?.settings?.get( settingKey ) as TValue;\n\n\treturn value ?? null;\n};\n","import { type PropKey, type PropValue } from '@elementor/editor-props';\nimport { type StyleDefinition, type StyleDefinitionID, type StyleVariant } from '@elementor/editor-styles';\nimport { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\n\nimport { getElementStyles } from '../sync/get-element-styles';\nimport { type 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\nexport function 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 { type StyleDefinition } from '@elementor/editor-styles';\n\nimport { type 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 { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\n\nimport { getElementStyles } from '../sync/get-element-styles';\nimport { type ElementID } from '../types';\n\nexport function useElementStyles( elementId: ElementID ) {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'document/atomic-widgets/styles' ),\n\t\t() => getElementStyles( elementId ) ?? {},\n\t\t[ elementId ]\n\t);\n}\n","import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\n\nimport { getWidgetsCache } from '../sync/get-widgets-cache';\nimport { type 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 { type 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 { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\n\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 { type Element } from '../types';\nimport { type ExtendedWindow } 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 { type Element } from '../types';\nimport { type V1Element } from './types';\n\nexport const isElementInContainer = ( element: Element, container: V1Element ): boolean => {\n\tif ( container.model.get( 'id' ) === element.id && container.model.get( 'widgetType' ) === element.type ) {\n\t\treturn true;\n\t}\n\n\tif ( container.children && container.children.length > 0 ) {\n\t\treturn container.children.some( ( child ) => isElementInContainer( element, child ) );\n\t}\n\n\treturn false;\n};\n","import { type Props } from '@elementor/editor-props';\nimport { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';\n\nimport { type ElementID } from '../types';\nimport getContainer from './get-container';\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 { type PropKey, type Props } from '@elementor/editor-props';\nimport { type StyleDefinitionID, type StyleVariant } from '@elementor/editor-styles';\nimport { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';\n\nimport { type ElementID } from '../types';\nimport getContainer from './get-container';\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","useListenTo","useListenTo","commandEndEvent","useListenTo","commandEndEvent","useListenTo","commandEndEvent","useListenTo","commandEndEvent","useListenTo","commandEndEvent","useListenTo","commandEndEvent","useListenTo","commandEndEvent","useListenTo","commandEndEvent","runCommand","runCommand"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-elements",
   "description": "This package contains the elements model for the Elementor editor",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,9 +40,9 @@
     "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"
+    "@elementor/editor-props": "^0.3.0",
+    "@elementor/editor-styles": "0.2.1",
+    "@elementor/editor-v1-adapters": "^0.8.4"
   },
   "peerDependencies": {
     "react": "^18.3.1"

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

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

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

@@ -1,8 +1,9 @@
-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 { type PropKey, type PropValue } from '@elementor/editor-props';
+import { type StyleDefinition, type StyleDefinitionID, type StyleVariant } from '@elementor/editor-styles';
+import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';
+
 import { getElementStyles } from '../sync/get-element-styles';
-import { ElementID } from '../types';
+import { type ElementID } from '../types';
 
 export type UseElementStylePropArgs = {
 	elementID: ElementID;
@@ -39,7 +40,7 @@ export const useElementStyleProp = < T extends PropValue >( {
 	) as T;
 };
 
-function getVariantByMeta( styleDef: StyleDefinition, meta: StyleVariant[ 'meta' ] ) {
+export 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-styles.ts

@@ -0,0 +1,12 @@
+import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';
+
+import { getElementStyles } from '../sync/get-element-styles';
+import { type ElementID } from '../types';
+
+export function useElementStyles( elementId: ElementID ) {
+	return useListenTo(
+		commandEndEvent( 'document/atomic-widgets/styles' ),
+		() => getElementStyles( elementId ) ?? {},
+		[ elementId ]
+	);
+}

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

@@ -1,6 +1,7 @@
 import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';
+
 import { getWidgetsCache } from '../sync/get-widgets-cache';
-import { ElementType } from '../types';
+import { type ElementType } from '../types';
 
 export function useElementType( type?: string ) {
 	return useListenTo(

package/src/hooks/use-elements-dom-ref.ts

@@ -0,0 +1,27 @@
+import { __privateUseListenTo as useListenTo, windowEvent } from '@elementor/editor-v1-adapters';
+
+import getCurrentDocumentContainer from '../sync/get-current-document-container';
+
+const ELEMENTS_DATA_ATTR = 'data-atomic';
+
+export function useElementsDomRef(): HTMLElement[] {
+	return useListenTo(
+		[
+			windowEvent( 'elementor/preview/atomic-widget/render' ),
+			windowEvent( 'elementor/preview/atomic-widget/destroy' ),
+			windowEvent( 'elementor/editor/element-rendered' ),
+			windowEvent( 'elementor/editor/element-destroyed' ),
+		],
+		() => getElementsDom()
+	);
+}
+
+function getElementsDom(): HTMLElement[] {
+	const root = getCurrentDocumentContainer();
+
+	if ( ! root?.view ) {
+		return [];
+	}
+
+	return [ ...root.view.el.querySelectorAll< HTMLElement >( `[${ ELEMENTS_DATA_ATTR }]` ) ];
+}

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

@@ -1,4 +1,5 @@
 import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';
+
 import { getSelectedElements } from '../sync/get-selected-elements';
 import { useElementType } from './use-element-type';
 

package/src/index.ts

@@ -1,16 +1,20 @@
 // types
 export * from './types';
+export type { V1Element, V1ElementModelProps, V1ElementSettingsProps } from './sync/types';
 
 // hooks
-export { useSelectedElement } from './hooks/use-selected-element';
-export { useElementType } from './hooks/use-element-type';
+export { useElementsDomRef } from './hooks/use-elements-dom-ref';
 export { useElementSetting } from './hooks/use-element-setting';
-export { useElementStyleProp } from './hooks/use-element-style-prop';
+export { useElementStyleProp, getVariantByMeta } from './hooks/use-element-style-prop';
+export { useElementStyles } from './hooks/use-element-styles';
+export { useElementType } from './hooks/use-element-type';
+export { useSelectedElement } from './hooks/use-selected-element';
 
 // utils
-export { updateSettings } from './sync/update-settings';
-export { updateStyle } from './sync/update-styles';
+export { getElementSetting } from './sync/get-element-setting';
+export { getElementStyles } from './sync/get-element-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';
+export { isElementInContainer } from './sync/is-element-in-container';
+export { updateSettings } from './sync/update-settings';
+export { updateStyle } from './sync/update-styles';

package/src/sync/get-container.ts

@@ -1,4 +1,4 @@
-import { ExtendedWindow } from './types';
+import { type ExtendedWindow } from './types';
 
 export default function getContainer( id: string ) {
 	const extendedWindow = window as unknown as ExtendedWindow;

package/src/sync/get-current-document-container.ts

@@ -0,0 +1,7 @@
+import { type ExtendedWindow } from './types';
+
+export default function getCurrentDocumentContainer() {
+	const extendedWindow = window as unknown as ExtendedWindow;
+
+	return extendedWindow.elementor?.documents?.getCurrent?.()?.container ?? null;
+}

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

@@ -1,9 +1,9 @@
-import { ElementID } from '../types';
+import { type 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;
+export const getElementSetting = < TValue >( elementId: ElementID, settingKey: string ): TValue | null => {
+	const container = getContainer( elementId );
+	const value = container?.settings?.get( settingKey ) as TValue;
 
 	return value ?? null;
 };

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

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

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

@@ -1,5 +1,5 @@
-import { ExtendedWindow } from './types';
-import { Element } from '../types';
+import { type Element } from '../types';
+import { type ExtendedWindow } from './types';
 
 export function getSelectedElements(): Element[] {
 	const extendedWindow = window as unknown as ExtendedWindow;

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

@@ -1,4 +1,4 @@
-import { ExtendedWindow } from './types';
+import { type ExtendedWindow } from './types';
 
 export function getWidgetsCache() {
 	const extendedWindow = window as unknown as ExtendedWindow;

package/src/sync/is-element-in-container.ts

@@ -0,0 +1,14 @@
+import { type Element } from '../types';
+import { type V1Element } from './types';
+
+export const isElementInContainer = ( element: Element, container: V1Element ): boolean => {
+	if ( container.model.get( 'id' ) === element.id && container.model.get( 'widgetType' ) === element.type ) {
+		return true;
+	}
+
+	if ( container.children && container.children.length > 0 ) {
+		return container.children.some( ( child ) => isElementInContainer( element, child ) );
+	}
+
+	return false;
+};

package/src/sync/types.ts

@@ -1,6 +1,7 @@
-import { PropValue } from '@elementor/editor-props';
-import { StyleDefinition, StyleDefinitionID } from '@elementor/editor-styles';
-import { ControlItem, PropsSchema } from '../types';
+import { type PropValue } from '@elementor/editor-props';
+import { type StyleDefinition, type StyleDefinitionID } from '@elementor/editor-styles';
+
+import { type ControlItem, type PropsSchema } from '../types';
 
 export type ExtendedWindow = Window & {
 	elementor?: {
@@ -16,13 +17,25 @@ export type ExtendedWindow = Window & {
 				title: string;
 			}
 		>;
-		getContainer?: ( id: string ) => V1Element;
+		documents?: {
+			getCurrent?: () =>
+				| {
+						container: V1Element;
+				  }
+				| undefined;
+		};
+		getContainer?: ( id: string ) => V1Element | undefined;
 	};
 };
 
 export type V1Element = {
+	id: string;
 	model: V1Model< V1ElementModelProps >;
 	settings?: V1Model< V1ElementSettingsProps >;
+	children?: V1Element[];
+	view?: {
+		el: HTMLElement;
+	};
 };
 
 export type V1ElementModelProps = {

package/src/sync/update-settings.ts

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

package/src/sync/update-styles.ts

@@ -1,8 +1,9 @@
-import { PropKey, Props } from '@elementor/editor-props';
-import { StyleDefinitionID, StyleVariant } from '@elementor/editor-styles';
+import { type PropKey, type Props } from '@elementor/editor-props';
+import { type StyleDefinitionID, type StyleVariant } from '@elementor/editor-styles';
 import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';
+
+import { type ElementID } from '../types';
 import getContainer from './get-container';
-import { ElementID } from '../types';
 
 export type UpdateStyleProps = {
 	elementID: ElementID;

package/src/types.ts

@@ -1,4 +1,4 @@
-import { PropType } from '@elementor/editor-props';
+import { type PropType } from '@elementor/editor-props';
 
 export type ElementID = string;