@elementor/editor-editing-panel 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.4.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-editing-panel@0.3.0...@elementor/editor-editing-panel@0.4.0) (2024-07-16)
+
+
+### Features
+
+* **editor-editing-panel:** settings control infra for atomic controls [EDS-236] ([#201](https://github.com/elementor/elementor-packages/issues/201)) ([25214f3](https://github.com/elementor/elementor-packages/commit/25214f35970572be059fa3ea98c0905f4535f9f9))
+
+
+
+
+
 # [0.3.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-editing-panel@0.2.0...@elementor/editor-editing-panel@0.3.0) (2024-07-14)
 
 

package/dist/index.js

@@ -26,8 +26,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var import_editor_panels2 = require("@elementor/editor-panels");
 
 // src/components/editing-panel.tsx
-var React2 = __toESM(require("react"));
-var import_editor_panels = require("@elementor/editor-panels");
+var React5 = __toESM(require("react"));
 var import_i18n = require("@wordpress/i18n");
 
 // src/hooks/use-selected-elements.ts
@@ -92,16 +91,130 @@ function useElementType(type) {
   );
 }
 
-// src/contexts/settings-controls.tsx
+// src/components/editing-panel.tsx
+var import_editor_panels = require("@elementor/editor-panels");
+
+// src/components/controls/control-types/select-control.tsx
 var React = __toESM(require("react"));
+var import_ui = require("@elementor/ui");
+
+// src/components/controls/control-context.ts
 var import_react = require("react");
-var Context = (0, import_react.createContext)(null);
+var ControlContext = (0, import_react.createContext)(null);
+function useControl(defaultValue) {
+  const controlContext = (0, import_react.useContext)(ControlContext);
+  if (!controlContext) {
+    throw new Error("useControl must be used within a ControlContext");
+  }
+  return { ...controlContext, value: controlContext.value ?? defaultValue };
+}
+
+// src/components/controls/control-types/select-control.tsx
+var SelectControl = ({ options }) => {
+  const { value, setValue } = useControl();
+  const handleChange = (event) => {
+    setValue(event.target.value);
+  };
+  return /* @__PURE__ */ React.createElement(import_ui.Select, { size: "tiny", value: value ?? "", onChange: handleChange }, options.map((option) => /* @__PURE__ */ React.createElement(import_ui.MenuItem, { key: option.value, value: option.value, disabled: option.disabled }, option.label)));
+};
+
+// src/components/controls/control-types/text-control.tsx
+var React2 = __toESM(require("react"));
+var import_ui2 = require("@elementor/ui");
+var TextControl = ({ placeholder }) => {
+  const { value, setValue } = useControl("");
+  const handleChange = (event) => {
+    setValue(event.target.value);
+  };
+  return /* @__PURE__ */ React2.createElement(import_ui2.TextareaAutosize, { size: "tiny", minRows: 3, value, onChange: handleChange, placeholder });
+};
+
+// src/components/controls/settings-control.tsx
+var React3 = __toESM(require("react"));
+var import_ui3 = require("@elementor/ui");
+
+// src/sync/update-settings.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/update-settings.ts
+var updateSettings = ({ id, props }) => {
+  const container = getContainer(id);
+  (0, import_editor_v1_adapters3.__privateRunCommand)("document/elements/settings", {
+    container,
+    settings: {
+      ...props
+    }
+  });
+};
+
+// src/hooks/use-widget-settings.ts
+var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
+var useWidgetSettings = ({ id, bind }) => {
+  return (0, import_editor_v1_adapters4.__privateUseListenTo)(
+    (0, import_editor_v1_adapters4.commandEndEvent)("document/elements/settings"),
+    () => {
+      const container = getContainer(id);
+      const value = container?.settings?.get(bind) ?? null;
+      return value;
+    },
+    []
+  );
+};
+
+// src/components/controls/settings-control.tsx
+var SettingsControl = ({ bind, children, elementID }) => {
+  const value = useWidgetSettings({ id: elementID, bind });
+  const setValue = (newValue) => {
+    updateSettings({
+      id: elementID,
+      props: {
+        [bind]: newValue
+      }
+    });
+  };
+  return /* @__PURE__ */ React3.createElement(ControlContext.Provider, { value: { setValue, value, bind } }, children);
+};
+var Label = ({ children }) => {
+  return /* @__PURE__ */ React3.createElement(import_ui3.Typography, { component: "label", variant: "caption" }, children);
+};
+var Container = ({ children }) => /* @__PURE__ */ React3.createElement(
+  import_ui3.Stack,
+  {
+    spacing: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    flexWrap: "wrap",
+    sx: { px: 2 }
+  },
+  children
+);
+SettingsControl.Label = Label;
+SettingsControl.Container = Container;
+
+// src/components/editing-panel.tsx
+var import_ui4 = require("@elementor/ui");
+
+// src/contexts/settings-controls.tsx
+var React4 = __toESM(require("react"));
+var import_react2 = require("react");
+var Context = (0, import_react2.createContext)(null);
 function ElementContext({ children, element }) {
-  return /* @__PURE__ */ React.createElement(Context.Provider, { value: { element } }, children);
+  return /* @__PURE__ */ React4.createElement(Context.Provider, { value: { element } }, children);
 }
 
 // src/components/editing-panel.tsx
-var import_ui = require("@elementor/ui");
+var controlTypes = {
+  select: SelectControl,
+  text: TextControl
+};
 var EditingPanel = () => {
   const elements = useSelectedElements();
   const selectedElement = elements[0];
@@ -110,7 +223,16 @@ var EditingPanel = () => {
     return null;
   }
   const panelTitle = (0, import_i18n.__)("Edit %s", "elementor").replace("%s", elementType.title);
-  return /* @__PURE__ */ React2.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React2.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React2.createElement(import_editor_panels.PanelHeaderTitle, null, panelTitle)), /* @__PURE__ */ React2.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React2.createElement(ElementContext, { element: selectedElement }, /* @__PURE__ */ React2.createElement(import_ui.Box, { padding: 2 }, /* @__PURE__ */ React2.createElement(import_ui.Typography, null, "Here should be the controls.")))));
+  return /* @__PURE__ */ React5.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React5.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React5.createElement(import_editor_panels.PanelHeaderTitle, null, panelTitle)), /* @__PURE__ */ React5.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React5.createElement(ElementContext, { element: selectedElement }, /* @__PURE__ */ React5.createElement(import_ui4.Stack, { spacing: 2 }, elementType.controls.map((control) => {
+    if (control.type === "control") {
+      const ControlComponent = controlTypes[control.value.type];
+      if (!ControlComponent) {
+        return null;
+      }
+      return /* @__PURE__ */ React5.createElement(SettingsControl, { key: control.value.bind, bind: control.value.bind, elementID: elements[0].id }, /* @__PURE__ */ React5.createElement(SettingsControl.Container, null, /* @__PURE__ */ React5.createElement(SettingsControl.Label, null, control.value.label), /* @__PURE__ */ React5.createElement(ControlComponent, { ...control.value.props })));
+    }
+    return null;
+  })))));
 };
 
 // src/panel.ts
@@ -137,13 +259,13 @@ var shouldUseV2Panel = () => {
 };
 
 // src/hooks/use-open-editor-panel.ts
-var import_react2 = require("react");
-var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
+var import_react3 = require("react");
+var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
 var useOpenEditorPanel = () => {
   const { open } = usePanelActions();
-  (0, import_react2.useEffect)(() => {
-    return (0, import_editor_v1_adapters3.__privateListenTo)(
-      (0, import_editor_v1_adapters3.commandStartEvent)("panel/editor/open"),
+  (0, import_react3.useEffect)(() => {
+    return (0, import_editor_v1_adapters5.__privateListenTo)(
+      (0, import_editor_v1_adapters5.commandStartEvent)("panel/editor/open"),
       () => {
         if (shouldUseV2Panel()) {
           open();
@@ -161,7 +283,7 @@ var EditingPanelHooks = () => {
 
 // src/init.ts
 var import_editor_panels3 = require("@elementor/editor-panels");
-var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
 function init() {
   (0, import_editor_panels3.__registerPanel)(panel);
   blockV1Panel();
@@ -171,7 +293,7 @@ function init() {
   });
 }
 var blockV1Panel = () => {
-  (0, import_editor_v1_adapters4.__privateBlockDataCommand)({
+  (0, import_editor_v1_adapters6.__privateBlockDataCommand)({
     command: "panel/editor/open",
     condition: shouldUseV2Panel
   });

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/panel.ts","../src/components/editing-panel.tsx","../src/hooks/use-selected-elements.ts","../src/sync/get-selected-elements.ts","../src/hooks/use-element-type.ts","../src/sync/get-widgets-cache.ts","../src/contexts/settings-controls.tsx","../src/init.ts","../src/sync/should-use-v2-panel.ts","../src/hooks/use-open-editor-panel.ts","../src/components/editing-panel-hooks.tsx","../src/index.ts"],"sourcesContent":["import { __createPanel as createPanel } from '@elementor/editor-panels';\nimport { EditingPanel } from './components/editing-panel';\n\nexport const {\n\tpanel,\n\tusePanelActions,\n\tusePanelStatus,\n} = createPanel( {\n\tid: 'editing-panel',\n\tcomponent: EditingPanel,\n} );\n","import * as React from 'react';\nimport {\n\tPanel,\n\tPanelBody,\n\tPanelHeader,\n\tPanelHeaderTitle,\n} from '@elementor/editor-panels';\nimport { __ } from '@wordpress/i18n';\nimport useSelectedElements from '../hooks/use-selected-elements';\nimport useElementType from '../hooks/use-element-type';\nimport { ElementContext } from '../contexts/settings-controls';\nimport { Box, Typography } from '@elementor/ui';\n\nexport const EditingPanel = () => {\n\tconst elements = useSelectedElements();\n\n\tconst selectedElement = elements[ 0 ];\n\n\tconst elementType = useElementType( selectedElement?.type );\n\n\tif ( elements.length !== 1 || ! elementType ) {\n\t\treturn null;\n\t}\n\n\t/* translators: %s: Element type title. */\n\tconst panelTitle = __( 'Edit %s', 'elementor' ).replace( '%s', elementType.title );\n\n\treturn (\n\t\t<Panel>\n\t\t\t<PanelHeader>\n\t\t\t\t<PanelHeaderTitle>{ panelTitle }</PanelHeaderTitle>\n\t\t\t</PanelHeader>\n\t\t\t<PanelBody>\n\t\t\t\t<ElementContext element={ selectedElement }>\n\t\t\t\t\t<Box padding={ 2 }>\n\t\t\t\t\t\t<Typography>\n\t\t\t\t\t\t\tHere should be the controls.\n\t\t\t\t\t\t</Typography>\n\t\t\t\t\t</Box>\n\t\t\t\t</ElementContext>\n\t\t\t</PanelBody>\n\t\t</Panel>\n\t);\n};\n","import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\nimport getSelectedElements from '../sync/get-selected-elements';\n\nexport default function useSelectedElements() {\n\treturn useListenTo(\n\t\t[\n\t\t\tcommandEndEvent( 'document/elements/select' ),\n\t\t\tcommandEndEvent( 'document/elements/deselect' ),\n\t\t],\n\t\t() => getSelectedElements()\n\t);\n}\n","import { ExtendedWindow } from './types';\nimport { Element } from '../types';\n\nexport default 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 default 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\treturn {\n\t\t\t\tkey: type,\n\t\t\t\tcontrols: elementType.atomic_controls,\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 default function getWidgetsCache() {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\treturn extendedWindow?.elementor?.widgetsCache || null;\n}\n","import * as React from 'react';\nimport { createContext, ReactNode, useContext } from 'react';\nimport { Element } from '../types';\n\ntype ContextValue = {\n\telement: Element;\n}\n\nconst Context = createContext<ContextValue | null>( null );\n\ntype Props = {\n\telement: Element;\n\tchildren?: ReactNode;\n}\n\nexport function ElementContext( { children, element }: Props ) {\n\treturn (\n\t\t<Context.Provider value={ { element } }>\n\t\t\t{ children }\n\t\t</Context.Provider>\n\t);\n}\n\nexport function useElementContext() {\n\tconst context = useContext( Context );\n\n\tif ( ! context ) {\n\t\tthrow new Error( 'useElementContext must be used within a ElementContextProvider' );\n\t}\n\n\treturn context;\n}\n","import { panel } from './panel';\nimport { injectIntoLogic } from '@elementor/editor';\nimport { shouldUseV2Panel } from './sync/should-use-v2-panel';\nimport { EditingPanelHooks } from './components/editing-panel-hooks';\nimport { __registerPanel as registerPanel } from '@elementor/editor-panels';\nimport { __privateBlockDataCommand as blockDataCommand } from '@elementor/editor-v1-adapters';\n\nexport default function init() {\n\tregisterPanel( panel );\n\tblockV1Panel();\n\n\tinjectIntoLogic( {\n\t\tid: 'editing-panel-hooks',\n\t\tcomponent: EditingPanelHooks,\n\t} );\n}\n\nconst blockV1Panel = () => {\n\tblockDataCommand( {\n\t\tcommand: 'panel/editor/open',\n\t\tcondition: shouldUseV2Panel,\n\t} );\n};\n","import getSelectedElements from './get-selected-elements';\nimport getWidgetsCache from './get-widgets-cache';\n\nexport const shouldUseV2Panel = () => {\n\tconst selectedElements = getSelectedElements();\n\tconst widgetCache = getWidgetsCache();\n\n\tif ( selectedElements.length !== 1 ) {\n\t\treturn false;\n\t}\n\n\t// Check if the selected element has atomic controls, meaning it's a V2 element.\n\treturn !! widgetCache?.[ selectedElements[ 0 ].type ]?.atomic_controls;\n};\n","import { useEffect } from 'react';\nimport { commandStartEvent, __privateListenTo as listenTo } from '@elementor/editor-v1-adapters';\nimport { usePanelActions } from '../panel';\nimport { shouldUseV2Panel } from '../sync/should-use-v2-panel';\n\nexport const useOpenEditorPanel = () => {\n\tconst { open } = usePanelActions();\n\n\tuseEffect( () => {\n\t\treturn listenTo(\n\t\t\tcommandStartEvent( 'panel/editor/open' ),\n\t\t\t() => {\n\t\t\t\tif ( shouldUseV2Panel() ) {\n\t\t\t\t\topen();\n\t\t\t\t}\n\t\t\t}\n\t\t);\n\t}, [] ); // eslint-disable-line react-hooks/exhaustive-deps\n};\n","import { useOpenEditorPanel } from '../hooks/use-open-editor-panel';\n\nexport const EditingPanelHooks = () => {\n\tuseOpenEditorPanel();\n\n\treturn null;\n};\n","import init from './init';\n\ninit();\n"],"mappings":"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","names":["import_editor_panels","React","useListenTo","import_editor_v1_adapters","useListenTo","createPanel","import_react","import_editor_v1_adapters","listenTo","import_editor_panels","import_editor_v1_adapters","registerPanel","blockDataCommand"]}
+{"version":3,"sources":["../src/panel.ts","../src/components/editing-panel.tsx","../src/hooks/use-selected-elements.ts","../src/sync/get-selected-elements.ts","../src/hooks/use-element-type.ts","../src/sync/get-widgets-cache.ts","../src/components/controls/control-types/select-control.tsx","../src/components/controls/control-context.ts","../src/components/controls/control-types/text-control.tsx","../src/components/controls/settings-control.tsx","../src/sync/update-settings.ts","../src/sync/get-container.ts","../src/hooks/use-widget-settings.ts","../src/contexts/settings-controls.tsx","../src/init.ts","../src/sync/should-use-v2-panel.ts","../src/hooks/use-open-editor-panel.ts","../src/components/editing-panel-hooks.tsx","../src/index.ts"],"sourcesContent":["import { __createPanel as createPanel } from '@elementor/editor-panels';\nimport { EditingPanel } from './components/editing-panel';\n\nexport const {\n\tpanel,\n\tusePanelActions,\n\tusePanelStatus,\n} = createPanel( {\n\tid: 'editing-panel',\n\tcomponent: EditingPanel,\n} );\n","import * as React from 'react';\nimport { __ } from '@wordpress/i18n';\nimport useSelectedElements from '../hooks/use-selected-elements';\nimport useElementType from '../hooks/use-element-type';\nimport { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from '@elementor/editor-panels';\nimport { SelectControl } from './controls/control-types/select-control';\nimport { TextControl } from './controls/control-types/text-control';\nimport { SettingsControl } from '../components/controls/settings-control';\nimport { Stack } from '@elementor/ui';\nimport { ElementContext } from '../contexts/settings-controls';\n\nconst controlTypes = {\n\tselect: SelectControl,\n\ttext: TextControl,\n};\n\nexport const EditingPanel = () => {\n\tconst elements = useSelectedElements();\n\n\tconst selectedElement = elements[ 0 ];\n\n\tconst elementType = useElementType( selectedElement?.type );\n\n\tif ( elements.length !== 1 || ! elementType ) {\n\t\treturn null;\n\t}\n\n\t/* translators: %s: Element type title. */\n\tconst panelTitle = __( 'Edit %s', 'elementor' ).replace( '%s', elementType.title );\n\n\treturn (\n\t\t<Panel>\n\t\t\t<PanelHeader>\n\t\t\t\t<PanelHeaderTitle>{ panelTitle }</PanelHeaderTitle>\n\t\t\t</PanelHeader>\n\t\t\t<PanelBody>\n\t\t\t\t<ElementContext element={ selectedElement }>\n\t\t\t\t\t<Stack spacing={ 2 }>\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\telementType.controls.map( ( control ) => {\n\t\t\t\t\t\t\t\tif ( control.type === 'control' ) {\n\t\t\t\t\t\t\t\t\tconst ControlComponent = controlTypes[ control.value.type as keyof typeof controlTypes ];\n\n\t\t\t\t\t\t\t\t\tif ( ! ControlComponent ) {\n\t\t\t\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<SettingsControl key={ control.value.bind } bind={ control.value.bind } elementID={ elements[ 0 ].id }>\n\t\t\t\t\t\t\t\t\t\t\t<SettingsControl.Container>\n\t\t\t\t\t\t\t\t\t\t\t\t<SettingsControl.Label>{ control.value.label }</SettingsControl.Label>\n\t\t\t\t\t\t\t\t\t\t\t\t{ /* eslint-disable-next-line @typescript-eslint/no-explicit-any */ }\n\t\t\t\t\t\t\t\t\t\t\t\t<ControlComponent { ...control.value.props as any } />\n\t\t\t\t\t\t\t\t\t\t\t</SettingsControl.Container>\n\t\t\t\t\t\t\t\t\t\t</SettingsControl>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t}\n\t\t\t\t\t</Stack>\n\t\t\t\t</ElementContext>\n\t\t\t</PanelBody>\n\t\t</Panel>\n\t);\n};\n","import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\nimport getSelectedElements from '../sync/get-selected-elements';\n\nexport default function useSelectedElements() {\n\treturn useListenTo(\n\t\t[\n\t\t\tcommandEndEvent( 'document/elements/select' ),\n\t\t\tcommandEndEvent( 'document/elements/deselect' ),\n\t\t],\n\t\t() => getSelectedElements()\n\t);\n}\n","import { ExtendedWindow } from './types';\nimport { Element } from '../types';\n\nexport default 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 default 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\treturn {\n\t\t\t\tkey: type,\n\t\t\t\tcontrols: elementType.atomic_controls,\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 default function getWidgetsCache() {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\treturn extendedWindow?.elementor?.widgetsCache || null;\n}\n","import * as React from 'react';\nimport { MenuItem, Select, SelectChangeEvent } from '@elementor/ui';\nimport { useControl } from '../control-context';\nimport { PropValue } from '../../../types';\n\nexport type SelectControlProps<T> = {\n\toptions: Array<{ label: string; value: T; disabled?: boolean }>\n};\n\nexport const SelectControl = <T extends PropValue>( { options }: SelectControlProps<T> ) => {\n\tconst { value, setValue } = useControl<T>();\n\n\tconst handleChange = ( event: SelectChangeEvent<T> ) => {\n\t\tsetValue( event.target.value as T );\n\t};\n\n\treturn (\n\t\t<Select size=\"tiny\" value={ value ?? '' } onChange={ handleChange }>\n\t\t\t{ options.map( ( option ) => (\n\t\t\t\t<MenuItem key={ option.value } value={ option.value } disabled={ option.disabled }>\n\t\t\t\t\t{ option.label }\n\t\t\t\t</MenuItem>\n\t\t\t) ) }\n\t\t</Select>\n\t);\n};\n","import { createContext, useContext } from 'react';\nimport { PropKey, PropValue } from '../../types';\n\nexport type ControlContext<T extends PropValue> = null | {\n\tbind: PropKey;\n\tsetValue: ( value: T ) => void;\n\tvalue: T;\n};\n\nexport const ControlContext = createContext<ControlContext<PropValue>>( null );\n\nexport function useControl<T extends PropValue>( defaultValue?: T ) {\n\tconst controlContext = useContext<ControlContext<T>>( ControlContext as never );\n\n\tif ( ! controlContext ) {\n\t\tthrow new Error( 'useControl must be used within a ControlContext' );\n\t}\n\n\treturn { ...controlContext, value: controlContext.value ?? defaultValue };\n}\n","import * as React from 'react';\nimport { TextareaAutosize } from '@elementor/ui';\nimport { useControl } from '../control-context';\n\nexport type TextControlProps = {\n\tplaceholder?: string;\n}\n\nexport const TextControl = ( { placeholder }: TextControlProps ) => {\n\tconst { value, setValue } = useControl<string>( '' );\n\n\tconst handleChange = ( event: React.ChangeEvent<HTMLInputElement> ) => {\n\t\tsetValue( event.target.value );\n\t};\n\n\treturn (\n\t\t<TextareaAutosize size=\"tiny\" minRows={ 3 }value={ value } onChange={ handleChange } placeholder={ placeholder } />\n\t);\n};\n","import * as React from 'react';\nimport { ControlContext } from './control-context';\nimport { Stack, Typography } from '@elementor/ui';\nimport { updateSettings } from '../../sync/update-settings';\nimport { useWidgetSettings } from '../../hooks/use-widget-settings';\nimport { PropKey, PropValue } from '../../types';\n\ntype Props = {\n\tbind: PropKey;\n\tchildren: React.ReactNode;\n\telementID: Element['id'];\n}\n\nconst SettingsControl = ( { bind, children, elementID }: Props ) => {\n\tconst value = useWidgetSettings( { id: elementID, bind } );\n\n\tconst setValue = ( newValue: PropValue ) => {\n\t\tupdateSettings( {\n\t\t\tid: elementID,\n\t\t\tprops: {\n\t\t\t\t[ bind ]: newValue,\n\t\t\t},\n\t\t} );\n\t};\n\n\treturn (\n\t\t<ControlContext.Provider value={ { setValue, value, bind } }>\n\t\t\t{ children }\n\t\t</ControlContext.Provider>\n\t);\n};\n\nconst Label = ( { children }: { children: React.ReactNode } ) => {\n\treturn <Typography component=\"label\" variant=\"caption\">{ children }</Typography>;\n};\n\nconst Container = ( { children }: { children: React.ReactNode} ) => (\n\t<Stack\n\t\tspacing={ 1 }\n\t\tflexDirection=\"row\"\n\t\talignItems=\"center\"\n\t\tjustifyContent=\"space-between\"\n\t\tflexWrap=\"wrap\"\n\t\tsx={ { px: 2 } }\n\t>\n\t\t{ children }\n\t</Stack>\n);\n\nSettingsControl.Label = Label;\nSettingsControl.Container = Container;\n\nexport { SettingsControl };\n","import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';\nimport { Props } from '../types';\nimport getContainer from './get-container';\n\nexport const updateSettings = ( { id, props }: { id: string, 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 { 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 { commandEndEvent, __privateUseListenTo as useListenTo } from '@elementor/editor-v1-adapters';\nimport { PropValue } from '../types';\nimport getContainer from '../sync/get-container';\n\nexport const useWidgetSettings = ( { id, bind }: { id: string; bind: string } ): PropValue => {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'document/elements/settings' ),\n\t\t() => {\n\t\t\tconst container = getContainer( id );\n\t\t\tconst value = container?.settings?.get( bind ) ?? null;\n\n\t\t\treturn value;\n\t\t},\n\t\t[]\n\t);\n};\n","import * as React from 'react';\nimport { createContext, ReactNode, useContext } from 'react';\nimport { Element } from '../types';\n\ntype ContextValue = {\n\telement: Element;\n}\n\nconst Context = createContext<ContextValue | null>( null );\n\ntype Props = {\n\telement: Element;\n\tchildren?: ReactNode;\n}\n\nexport function ElementContext( { children, element }: Props ) {\n\treturn (\n\t\t<Context.Provider value={ { element } }>\n\t\t\t{ children }\n\t\t</Context.Provider>\n\t);\n}\n\nexport function useElementContext() {\n\tconst context = useContext( Context );\n\n\tif ( ! context ) {\n\t\tthrow new Error( 'useElementContext must be used within a ElementContextProvider' );\n\t}\n\n\treturn context;\n}\n","import { panel } from './panel';\nimport { injectIntoLogic } from '@elementor/editor';\nimport { shouldUseV2Panel } from './sync/should-use-v2-panel';\nimport { EditingPanelHooks } from './components/editing-panel-hooks';\nimport { __registerPanel as registerPanel } from '@elementor/editor-panels';\nimport { __privateBlockDataCommand as blockDataCommand } from '@elementor/editor-v1-adapters';\n\nexport default function init() {\n\tregisterPanel( panel );\n\tblockV1Panel();\n\n\tinjectIntoLogic( {\n\t\tid: 'editing-panel-hooks',\n\t\tcomponent: EditingPanelHooks,\n\t} );\n}\n\nconst blockV1Panel = () => {\n\tblockDataCommand( {\n\t\tcommand: 'panel/editor/open',\n\t\tcondition: shouldUseV2Panel,\n\t} );\n};\n","import getSelectedElements from './get-selected-elements';\nimport getWidgetsCache from './get-widgets-cache';\n\nexport const shouldUseV2Panel = () => {\n\tconst selectedElements = getSelectedElements();\n\tconst widgetCache = getWidgetsCache();\n\n\tif ( selectedElements.length !== 1 ) {\n\t\treturn false;\n\t}\n\n\t// Check if the selected element has atomic controls, meaning it's a V2 element.\n\treturn !! widgetCache?.[ selectedElements[ 0 ].type ]?.atomic_controls;\n};\n","import { useEffect } from 'react';\nimport { commandStartEvent, __privateListenTo as listenTo } from '@elementor/editor-v1-adapters';\nimport { usePanelActions } from '../panel';\nimport { shouldUseV2Panel } from '../sync/should-use-v2-panel';\n\nexport const useOpenEditorPanel = () => {\n\tconst { open } = usePanelActions();\n\n\tuseEffect( () => {\n\t\treturn listenTo(\n\t\t\tcommandStartEvent( 'panel/editor/open' ),\n\t\t\t() => {\n\t\t\t\tif ( shouldUseV2Panel() ) {\n\t\t\t\t\topen();\n\t\t\t\t}\n\t\t\t}\n\t\t);\n\t}, [] ); // eslint-disable-line react-hooks/exhaustive-deps\n};\n","import { useOpenEditorPanel } from '../hooks/use-open-editor-panel';\n\nexport const EditingPanelHooks = () => {\n\tuseOpenEditorPanel();\n\n\treturn null;\n};\n","import init from './init';\n\ninit();\n"],"mappings":"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","names":["import_editor_panels","React","useListenTo","import_editor_v1_adapters","useListenTo","React","import_ui","React","import_ui","import_editor_v1_adapters","runCommand","import_editor_v1_adapters","useListenTo","import_ui","React","import_react","createPanel","import_react","import_editor_v1_adapters","listenTo","import_editor_panels","import_editor_v1_adapters","registerPanel","blockDataCommand"]}

package/dist/index.mjs

@@ -2,13 +2,7 @@
 import { __createPanel as createPanel } from "@elementor/editor-panels";
 
 // src/components/editing-panel.tsx
-import * as React2 from "react";
-import {
-  Panel,
-  PanelBody,
-  PanelHeader,
-  PanelHeaderTitle
-} from "@elementor/editor-panels";
+import * as React5 from "react";
 import { __ } from "@wordpress/i18n";
 
 // src/hooks/use-selected-elements.ts
@@ -73,16 +67,130 @@ function useElementType(type) {
   );
 }
 
-// src/contexts/settings-controls.tsx
+// src/components/editing-panel.tsx
+import { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from "@elementor/editor-panels";
+
+// src/components/controls/control-types/select-control.tsx
 import * as React from "react";
+import { MenuItem, Select } from "@elementor/ui";
+
+// src/components/controls/control-context.ts
 import { createContext, useContext } from "react";
-var Context = createContext(null);
+var ControlContext = createContext(null);
+function useControl(defaultValue) {
+  const controlContext = useContext(ControlContext);
+  if (!controlContext) {
+    throw new Error("useControl must be used within a ControlContext");
+  }
+  return { ...controlContext, value: controlContext.value ?? defaultValue };
+}
+
+// src/components/controls/control-types/select-control.tsx
+var SelectControl = ({ options }) => {
+  const { value, setValue } = useControl();
+  const handleChange = (event) => {
+    setValue(event.target.value);
+  };
+  return /* @__PURE__ */ React.createElement(Select, { size: "tiny", value: value ?? "", onChange: handleChange }, options.map((option) => /* @__PURE__ */ React.createElement(MenuItem, { key: option.value, value: option.value, disabled: option.disabled }, option.label)));
+};
+
+// src/components/controls/control-types/text-control.tsx
+import * as React2 from "react";
+import { TextareaAutosize } from "@elementor/ui";
+var TextControl = ({ placeholder }) => {
+  const { value, setValue } = useControl("");
+  const handleChange = (event) => {
+    setValue(event.target.value);
+  };
+  return /* @__PURE__ */ React2.createElement(TextareaAutosize, { size: "tiny", minRows: 3, value, onChange: handleChange, placeholder });
+};
+
+// src/components/controls/settings-control.tsx
+import * as React3 from "react";
+import { Stack, Typography } from "@elementor/ui";
+
+// src/sync/update-settings.ts
+import { __privateRunCommand as runCommand } 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/update-settings.ts
+var updateSettings = ({ id, props }) => {
+  const container = getContainer(id);
+  runCommand("document/elements/settings", {
+    container,
+    settings: {
+      ...props
+    }
+  });
+};
+
+// src/hooks/use-widget-settings.ts
+import { commandEndEvent as commandEndEvent3, __privateUseListenTo as useListenTo3 } from "@elementor/editor-v1-adapters";
+var useWidgetSettings = ({ id, bind }) => {
+  return useListenTo3(
+    commandEndEvent3("document/elements/settings"),
+    () => {
+      const container = getContainer(id);
+      const value = container?.settings?.get(bind) ?? null;
+      return value;
+    },
+    []
+  );
+};
+
+// src/components/controls/settings-control.tsx
+var SettingsControl = ({ bind, children, elementID }) => {
+  const value = useWidgetSettings({ id: elementID, bind });
+  const setValue = (newValue) => {
+    updateSettings({
+      id: elementID,
+      props: {
+        [bind]: newValue
+      }
+    });
+  };
+  return /* @__PURE__ */ React3.createElement(ControlContext.Provider, { value: { setValue, value, bind } }, children);
+};
+var Label = ({ children }) => {
+  return /* @__PURE__ */ React3.createElement(Typography, { component: "label", variant: "caption" }, children);
+};
+var Container = ({ children }) => /* @__PURE__ */ React3.createElement(
+  Stack,
+  {
+    spacing: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    flexWrap: "wrap",
+    sx: { px: 2 }
+  },
+  children
+);
+SettingsControl.Label = Label;
+SettingsControl.Container = Container;
+
+// src/components/editing-panel.tsx
+import { Stack as Stack2 } from "@elementor/ui";
+
+// src/contexts/settings-controls.tsx
+import * as React4 from "react";
+import { createContext as createContext2, useContext as useContext2 } from "react";
+var Context = createContext2(null);
 function ElementContext({ children, element }) {
-  return /* @__PURE__ */ React.createElement(Context.Provider, { value: { element } }, children);
+  return /* @__PURE__ */ React4.createElement(Context.Provider, { value: { element } }, children);
 }
 
 // src/components/editing-panel.tsx
-import { Box, Typography } from "@elementor/ui";
+var controlTypes = {
+  select: SelectControl,
+  text: TextControl
+};
 var EditingPanel = () => {
   const elements = useSelectedElements();
   const selectedElement = elements[0];
@@ -91,7 +199,16 @@ var EditingPanel = () => {
     return null;
   }
   const panelTitle = __("Edit %s", "elementor").replace("%s", elementType.title);
-  return /* @__PURE__ */ React2.createElement(Panel, null, /* @__PURE__ */ React2.createElement(PanelHeader, null, /* @__PURE__ */ React2.createElement(PanelHeaderTitle, null, panelTitle)), /* @__PURE__ */ React2.createElement(PanelBody, null, /* @__PURE__ */ React2.createElement(ElementContext, { element: selectedElement }, /* @__PURE__ */ React2.createElement(Box, { padding: 2 }, /* @__PURE__ */ React2.createElement(Typography, null, "Here should be the controls.")))));
+  return /* @__PURE__ */ React5.createElement(Panel, null, /* @__PURE__ */ React5.createElement(PanelHeader, null, /* @__PURE__ */ React5.createElement(PanelHeaderTitle, null, panelTitle)), /* @__PURE__ */ React5.createElement(PanelBody, null, /* @__PURE__ */ React5.createElement(ElementContext, { element: selectedElement }, /* @__PURE__ */ React5.createElement(Stack2, { spacing: 2 }, elementType.controls.map((control) => {
+    if (control.type === "control") {
+      const ControlComponent = controlTypes[control.value.type];
+      if (!ControlComponent) {
+        return null;
+      }
+      return /* @__PURE__ */ React5.createElement(SettingsControl, { key: control.value.bind, bind: control.value.bind, elementID: elements[0].id }, /* @__PURE__ */ React5.createElement(SettingsControl.Container, null, /* @__PURE__ */ React5.createElement(SettingsControl.Label, null, control.value.label), /* @__PURE__ */ React5.createElement(ControlComponent, { ...control.value.props })));
+    }
+    return null;
+  })))));
 };
 
 // src/panel.ts

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/panel.ts","../src/components/editing-panel.tsx","../src/hooks/use-selected-elements.ts","../src/sync/get-selected-elements.ts","../src/hooks/use-element-type.ts","../src/sync/get-widgets-cache.ts","../src/contexts/settings-controls.tsx","../src/init.ts","../src/sync/should-use-v2-panel.ts","../src/hooks/use-open-editor-panel.ts","../src/components/editing-panel-hooks.tsx","../src/index.ts"],"sourcesContent":["import { __createPanel as createPanel } from '@elementor/editor-panels';\nimport { EditingPanel } from './components/editing-panel';\n\nexport const {\n\tpanel,\n\tusePanelActions,\n\tusePanelStatus,\n} = createPanel( {\n\tid: 'editing-panel',\n\tcomponent: EditingPanel,\n} );\n","import * as React from 'react';\nimport {\n\tPanel,\n\tPanelBody,\n\tPanelHeader,\n\tPanelHeaderTitle,\n} from '@elementor/editor-panels';\nimport { __ } from '@wordpress/i18n';\nimport useSelectedElements from '../hooks/use-selected-elements';\nimport useElementType from '../hooks/use-element-type';\nimport { ElementContext } from '../contexts/settings-controls';\nimport { Box, Typography } from '@elementor/ui';\n\nexport const EditingPanel = () => {\n\tconst elements = useSelectedElements();\n\n\tconst selectedElement = elements[ 0 ];\n\n\tconst elementType = useElementType( selectedElement?.type );\n\n\tif ( elements.length !== 1 || ! elementType ) {\n\t\treturn null;\n\t}\n\n\t/* translators: %s: Element type title. */\n\tconst panelTitle = __( 'Edit %s', 'elementor' ).replace( '%s', elementType.title );\n\n\treturn (\n\t\t<Panel>\n\t\t\t<PanelHeader>\n\t\t\t\t<PanelHeaderTitle>{ panelTitle }</PanelHeaderTitle>\n\t\t\t</PanelHeader>\n\t\t\t<PanelBody>\n\t\t\t\t<ElementContext element={ selectedElement }>\n\t\t\t\t\t<Box padding={ 2 }>\n\t\t\t\t\t\t<Typography>\n\t\t\t\t\t\t\tHere should be the controls.\n\t\t\t\t\t\t</Typography>\n\t\t\t\t\t</Box>\n\t\t\t\t</ElementContext>\n\t\t\t</PanelBody>\n\t\t</Panel>\n\t);\n};\n","import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\nimport getSelectedElements from '../sync/get-selected-elements';\n\nexport default function useSelectedElements() {\n\treturn useListenTo(\n\t\t[\n\t\t\tcommandEndEvent( 'document/elements/select' ),\n\t\t\tcommandEndEvent( 'document/elements/deselect' ),\n\t\t],\n\t\t() => getSelectedElements()\n\t);\n}\n","import { ExtendedWindow } from './types';\nimport { Element } from '../types';\n\nexport default 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 default 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\treturn {\n\t\t\t\tkey: type,\n\t\t\t\tcontrols: elementType.atomic_controls,\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 default function getWidgetsCache() {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\treturn extendedWindow?.elementor?.widgetsCache || null;\n}\n","import * as React from 'react';\nimport { createContext, ReactNode, useContext } from 'react';\nimport { Element } from '../types';\n\ntype ContextValue = {\n\telement: Element;\n}\n\nconst Context = createContext<ContextValue | null>( null );\n\ntype Props = {\n\telement: Element;\n\tchildren?: ReactNode;\n}\n\nexport function ElementContext( { children, element }: Props ) {\n\treturn (\n\t\t<Context.Provider value={ { element } }>\n\t\t\t{ children }\n\t\t</Context.Provider>\n\t);\n}\n\nexport function useElementContext() {\n\tconst context = useContext( Context );\n\n\tif ( ! context ) {\n\t\tthrow new Error( 'useElementContext must be used within a ElementContextProvider' );\n\t}\n\n\treturn context;\n}\n","import { panel } from './panel';\nimport { injectIntoLogic } from '@elementor/editor';\nimport { shouldUseV2Panel } from './sync/should-use-v2-panel';\nimport { EditingPanelHooks } from './components/editing-panel-hooks';\nimport { __registerPanel as registerPanel } from '@elementor/editor-panels';\nimport { __privateBlockDataCommand as blockDataCommand } from '@elementor/editor-v1-adapters';\n\nexport default function init() {\n\tregisterPanel( panel );\n\tblockV1Panel();\n\n\tinjectIntoLogic( {\n\t\tid: 'editing-panel-hooks',\n\t\tcomponent: EditingPanelHooks,\n\t} );\n}\n\nconst blockV1Panel = () => {\n\tblockDataCommand( {\n\t\tcommand: 'panel/editor/open',\n\t\tcondition: shouldUseV2Panel,\n\t} );\n};\n","import getSelectedElements from './get-selected-elements';\nimport getWidgetsCache from './get-widgets-cache';\n\nexport const shouldUseV2Panel = () => {\n\tconst selectedElements = getSelectedElements();\n\tconst widgetCache = getWidgetsCache();\n\n\tif ( selectedElements.length !== 1 ) {\n\t\treturn false;\n\t}\n\n\t// Check if the selected element has atomic controls, meaning it's a V2 element.\n\treturn !! widgetCache?.[ selectedElements[ 0 ].type ]?.atomic_controls;\n};\n","import { useEffect } from 'react';\nimport { commandStartEvent, __privateListenTo as listenTo } from '@elementor/editor-v1-adapters';\nimport { usePanelActions } from '../panel';\nimport { shouldUseV2Panel } from '../sync/should-use-v2-panel';\n\nexport const useOpenEditorPanel = () => {\n\tconst { open } = usePanelActions();\n\n\tuseEffect( () => {\n\t\treturn listenTo(\n\t\t\tcommandStartEvent( 'panel/editor/open' ),\n\t\t\t() => {\n\t\t\t\tif ( shouldUseV2Panel() ) {\n\t\t\t\t\topen();\n\t\t\t\t}\n\t\t\t}\n\t\t);\n\t}, [] ); // eslint-disable-line react-hooks/exhaustive-deps\n};\n","import { useOpenEditorPanel } from '../hooks/use-open-editor-panel';\n\nexport const EditingPanelHooks = () => {\n\tuseOpenEditorPanel();\n\n\treturn null;\n};\n","import init from './init';\n\ninit();\n"],"mappings":"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","names":["React","useListenTo","commandEndEvent","useListenTo","commandEndEvent"]}
+{"version":3,"sources":["../src/panel.ts","../src/components/editing-panel.tsx","../src/hooks/use-selected-elements.ts","../src/sync/get-selected-elements.ts","../src/hooks/use-element-type.ts","../src/sync/get-widgets-cache.ts","../src/components/controls/control-types/select-control.tsx","../src/components/controls/control-context.ts","../src/components/controls/control-types/text-control.tsx","../src/components/controls/settings-control.tsx","../src/sync/update-settings.ts","../src/sync/get-container.ts","../src/hooks/use-widget-settings.ts","../src/contexts/settings-controls.tsx","../src/init.ts","../src/sync/should-use-v2-panel.ts","../src/hooks/use-open-editor-panel.ts","../src/components/editing-panel-hooks.tsx","../src/index.ts"],"sourcesContent":["import { __createPanel as createPanel } from '@elementor/editor-panels';\nimport { EditingPanel } from './components/editing-panel';\n\nexport const {\n\tpanel,\n\tusePanelActions,\n\tusePanelStatus,\n} = createPanel( {\n\tid: 'editing-panel',\n\tcomponent: EditingPanel,\n} );\n","import * as React from 'react';\nimport { __ } from '@wordpress/i18n';\nimport useSelectedElements from '../hooks/use-selected-elements';\nimport useElementType from '../hooks/use-element-type';\nimport { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from '@elementor/editor-panels';\nimport { SelectControl } from './controls/control-types/select-control';\nimport { TextControl } from './controls/control-types/text-control';\nimport { SettingsControl } from '../components/controls/settings-control';\nimport { Stack } from '@elementor/ui';\nimport { ElementContext } from '../contexts/settings-controls';\n\nconst controlTypes = {\n\tselect: SelectControl,\n\ttext: TextControl,\n};\n\nexport const EditingPanel = () => {\n\tconst elements = useSelectedElements();\n\n\tconst selectedElement = elements[ 0 ];\n\n\tconst elementType = useElementType( selectedElement?.type );\n\n\tif ( elements.length !== 1 || ! elementType ) {\n\t\treturn null;\n\t}\n\n\t/* translators: %s: Element type title. */\n\tconst panelTitle = __( 'Edit %s', 'elementor' ).replace( '%s', elementType.title );\n\n\treturn (\n\t\t<Panel>\n\t\t\t<PanelHeader>\n\t\t\t\t<PanelHeaderTitle>{ panelTitle }</PanelHeaderTitle>\n\t\t\t</PanelHeader>\n\t\t\t<PanelBody>\n\t\t\t\t<ElementContext element={ selectedElement }>\n\t\t\t\t\t<Stack spacing={ 2 }>\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\telementType.controls.map( ( control ) => {\n\t\t\t\t\t\t\t\tif ( control.type === 'control' ) {\n\t\t\t\t\t\t\t\t\tconst ControlComponent = controlTypes[ control.value.type as keyof typeof controlTypes ];\n\n\t\t\t\t\t\t\t\t\tif ( ! ControlComponent ) {\n\t\t\t\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<SettingsControl key={ control.value.bind } bind={ control.value.bind } elementID={ elements[ 0 ].id }>\n\t\t\t\t\t\t\t\t\t\t\t<SettingsControl.Container>\n\t\t\t\t\t\t\t\t\t\t\t\t<SettingsControl.Label>{ control.value.label }</SettingsControl.Label>\n\t\t\t\t\t\t\t\t\t\t\t\t{ /* eslint-disable-next-line @typescript-eslint/no-explicit-any */ }\n\t\t\t\t\t\t\t\t\t\t\t\t<ControlComponent { ...control.value.props as any } />\n\t\t\t\t\t\t\t\t\t\t\t</SettingsControl.Container>\n\t\t\t\t\t\t\t\t\t\t</SettingsControl>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t}\n\t\t\t\t\t</Stack>\n\t\t\t\t</ElementContext>\n\t\t\t</PanelBody>\n\t\t</Panel>\n\t);\n};\n","import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\nimport getSelectedElements from '../sync/get-selected-elements';\n\nexport default function useSelectedElements() {\n\treturn useListenTo(\n\t\t[\n\t\t\tcommandEndEvent( 'document/elements/select' ),\n\t\t\tcommandEndEvent( 'document/elements/deselect' ),\n\t\t],\n\t\t() => getSelectedElements()\n\t);\n}\n","import { ExtendedWindow } from './types';\nimport { Element } from '../types';\n\nexport default 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 default 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\treturn {\n\t\t\t\tkey: type,\n\t\t\t\tcontrols: elementType.atomic_controls,\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 default function getWidgetsCache() {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\treturn extendedWindow?.elementor?.widgetsCache || null;\n}\n","import * as React from 'react';\nimport { MenuItem, Select, SelectChangeEvent } from '@elementor/ui';\nimport { useControl } from '../control-context';\nimport { PropValue } from '../../../types';\n\nexport type SelectControlProps<T> = {\n\toptions: Array<{ label: string; value: T; disabled?: boolean }>\n};\n\nexport const SelectControl = <T extends PropValue>( { options }: SelectControlProps<T> ) => {\n\tconst { value, setValue } = useControl<T>();\n\n\tconst handleChange = ( event: SelectChangeEvent<T> ) => {\n\t\tsetValue( event.target.value as T );\n\t};\n\n\treturn (\n\t\t<Select size=\"tiny\" value={ value ?? '' } onChange={ handleChange }>\n\t\t\t{ options.map( ( option ) => (\n\t\t\t\t<MenuItem key={ option.value } value={ option.value } disabled={ option.disabled }>\n\t\t\t\t\t{ option.label }\n\t\t\t\t</MenuItem>\n\t\t\t) ) }\n\t\t</Select>\n\t);\n};\n","import { createContext, useContext } from 'react';\nimport { PropKey, PropValue } from '../../types';\n\nexport type ControlContext<T extends PropValue> = null | {\n\tbind: PropKey;\n\tsetValue: ( value: T ) => void;\n\tvalue: T;\n};\n\nexport const ControlContext = createContext<ControlContext<PropValue>>( null );\n\nexport function useControl<T extends PropValue>( defaultValue?: T ) {\n\tconst controlContext = useContext<ControlContext<T>>( ControlContext as never );\n\n\tif ( ! controlContext ) {\n\t\tthrow new Error( 'useControl must be used within a ControlContext' );\n\t}\n\n\treturn { ...controlContext, value: controlContext.value ?? defaultValue };\n}\n","import * as React from 'react';\nimport { TextareaAutosize } from '@elementor/ui';\nimport { useControl } from '../control-context';\n\nexport type TextControlProps = {\n\tplaceholder?: string;\n}\n\nexport const TextControl = ( { placeholder }: TextControlProps ) => {\n\tconst { value, setValue } = useControl<string>( '' );\n\n\tconst handleChange = ( event: React.ChangeEvent<HTMLInputElement> ) => {\n\t\tsetValue( event.target.value );\n\t};\n\n\treturn (\n\t\t<TextareaAutosize size=\"tiny\" minRows={ 3 }value={ value } onChange={ handleChange } placeholder={ placeholder } />\n\t);\n};\n","import * as React from 'react';\nimport { ControlContext } from './control-context';\nimport { Stack, Typography } from '@elementor/ui';\nimport { updateSettings } from '../../sync/update-settings';\nimport { useWidgetSettings } from '../../hooks/use-widget-settings';\nimport { PropKey, PropValue } from '../../types';\n\ntype Props = {\n\tbind: PropKey;\n\tchildren: React.ReactNode;\n\telementID: Element['id'];\n}\n\nconst SettingsControl = ( { bind, children, elementID }: Props ) => {\n\tconst value = useWidgetSettings( { id: elementID, bind } );\n\n\tconst setValue = ( newValue: PropValue ) => {\n\t\tupdateSettings( {\n\t\t\tid: elementID,\n\t\t\tprops: {\n\t\t\t\t[ bind ]: newValue,\n\t\t\t},\n\t\t} );\n\t};\n\n\treturn (\n\t\t<ControlContext.Provider value={ { setValue, value, bind } }>\n\t\t\t{ children }\n\t\t</ControlContext.Provider>\n\t);\n};\n\nconst Label = ( { children }: { children: React.ReactNode } ) => {\n\treturn <Typography component=\"label\" variant=\"caption\">{ children }</Typography>;\n};\n\nconst Container = ( { children }: { children: React.ReactNode} ) => (\n\t<Stack\n\t\tspacing={ 1 }\n\t\tflexDirection=\"row\"\n\t\talignItems=\"center\"\n\t\tjustifyContent=\"space-between\"\n\t\tflexWrap=\"wrap\"\n\t\tsx={ { px: 2 } }\n\t>\n\t\t{ children }\n\t</Stack>\n);\n\nSettingsControl.Label = Label;\nSettingsControl.Container = Container;\n\nexport { SettingsControl };\n","import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';\nimport { Props } from '../types';\nimport getContainer from './get-container';\n\nexport const updateSettings = ( { id, props }: { id: string, 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 { 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 { commandEndEvent, __privateUseListenTo as useListenTo } from '@elementor/editor-v1-adapters';\nimport { PropValue } from '../types';\nimport getContainer from '../sync/get-container';\n\nexport const useWidgetSettings = ( { id, bind }: { id: string; bind: string } ): PropValue => {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'document/elements/settings' ),\n\t\t() => {\n\t\t\tconst container = getContainer( id );\n\t\t\tconst value = container?.settings?.get( bind ) ?? null;\n\n\t\t\treturn value;\n\t\t},\n\t\t[]\n\t);\n};\n","import * as React from 'react';\nimport { createContext, ReactNode, useContext } from 'react';\nimport { Element } from '../types';\n\ntype ContextValue = {\n\telement: Element;\n}\n\nconst Context = createContext<ContextValue | null>( null );\n\ntype Props = {\n\telement: Element;\n\tchildren?: ReactNode;\n}\n\nexport function ElementContext( { children, element }: Props ) {\n\treturn (\n\t\t<Context.Provider value={ { element } }>\n\t\t\t{ children }\n\t\t</Context.Provider>\n\t);\n}\n\nexport function useElementContext() {\n\tconst context = useContext( Context );\n\n\tif ( ! context ) {\n\t\tthrow new Error( 'useElementContext must be used within a ElementContextProvider' );\n\t}\n\n\treturn context;\n}\n","import { panel } from './panel';\nimport { injectIntoLogic } from '@elementor/editor';\nimport { shouldUseV2Panel } from './sync/should-use-v2-panel';\nimport { EditingPanelHooks } from './components/editing-panel-hooks';\nimport { __registerPanel as registerPanel } from '@elementor/editor-panels';\nimport { __privateBlockDataCommand as blockDataCommand } from '@elementor/editor-v1-adapters';\n\nexport default function init() {\n\tregisterPanel( panel );\n\tblockV1Panel();\n\n\tinjectIntoLogic( {\n\t\tid: 'editing-panel-hooks',\n\t\tcomponent: EditingPanelHooks,\n\t} );\n}\n\nconst blockV1Panel = () => {\n\tblockDataCommand( {\n\t\tcommand: 'panel/editor/open',\n\t\tcondition: shouldUseV2Panel,\n\t} );\n};\n","import getSelectedElements from './get-selected-elements';\nimport getWidgetsCache from './get-widgets-cache';\n\nexport const shouldUseV2Panel = () => {\n\tconst selectedElements = getSelectedElements();\n\tconst widgetCache = getWidgetsCache();\n\n\tif ( selectedElements.length !== 1 ) {\n\t\treturn false;\n\t}\n\n\t// Check if the selected element has atomic controls, meaning it's a V2 element.\n\treturn !! widgetCache?.[ selectedElements[ 0 ].type ]?.atomic_controls;\n};\n","import { useEffect } from 'react';\nimport { commandStartEvent, __privateListenTo as listenTo } from '@elementor/editor-v1-adapters';\nimport { usePanelActions } from '../panel';\nimport { shouldUseV2Panel } from '../sync/should-use-v2-panel';\n\nexport const useOpenEditorPanel = () => {\n\tconst { open } = usePanelActions();\n\n\tuseEffect( () => {\n\t\treturn listenTo(\n\t\t\tcommandStartEvent( 'panel/editor/open' ),\n\t\t\t() => {\n\t\t\t\tif ( shouldUseV2Panel() ) {\n\t\t\t\t\topen();\n\t\t\t\t}\n\t\t\t}\n\t\t);\n\t}, [] ); // eslint-disable-line react-hooks/exhaustive-deps\n};\n","import { useOpenEditorPanel } from '../hooks/use-open-editor-panel';\n\nexport const EditingPanelHooks = () => {\n\tuseOpenEditorPanel();\n\n\treturn null;\n};\n","import init from './init';\n\ninit();\n"],"mappings":";AAAA,SAAS,iBAAiB,mBAAmB;;;ACA7C,YAAYA,YAAW;AACvB,SAAS,UAAU;;;ACDnB,SAAS,wBAAwB,aAAa,uBAAuB;;;ACGtD,SAAR,sBAAkD;AACxD,QAAM,iBAAiB;AAEvB,QAAM,mBAAmB,eAAe,WAAW,WAAW,cAAc,KAAK,CAAC;AAElF,SAAO,iBAAiB,OAAmB,CAAE,KAAK,OAAQ;AACzD,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;;;ADjBe,SAAR,sBAAuC;AAC7C,SAAO;AAAA,IACN;AAAA,MACC,gBAAiB,0BAA2B;AAAA,MAC5C,gBAAiB,4BAA6B;AAAA,IAC/C;AAAA,IACA,MAAM,oBAAoB;AAAA,EAC3B;AACD;;;AEXA,SAAS,wBAAwBC,cAAa,mBAAAC,wBAAuB;;;ACEtD,SAAR,kBAAmC;AACzC,QAAM,iBAAiB;AAEvB,SAAO,gBAAgB,WAAW,gBAAgB;AACnD;;;ADFe,SAAR,eAAiC,MAAgB;AACvD,SAAOC;AAAA,IACNC,iBAAiB,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,aAAO;AAAA,QACN,KAAK;AAAA,QACL,UAAU,YAAY;AAAA,QACtB,OAAO,YAAY;AAAA,MACpB;AAAA,IACD;AAAA,IACA,CAAE,IAAK;AAAA,EACR;AACD;;;AHvBA,SAAS,OAAO,WAAW,aAAa,wBAAwB;;;AKJhE,YAAY,WAAW;AACvB,SAAS,UAAU,cAAiC;;;ACDpD,SAAS,eAAe,kBAAkB;AASnC,IAAM,iBAAiB,cAA0C,IAAK;AAEtE,SAAS,WAAiC,cAAmB;AACnE,QAAM,iBAAiB,WAA+B,cAAwB;AAE9E,MAAK,CAAE,gBAAiB;AACvB,UAAM,IAAI,MAAO,iDAAkD;AAAA,EACpE;AAEA,SAAO,EAAE,GAAG,gBAAgB,OAAO,eAAe,SAAS,aAAa;AACzE;;;ADVO,IAAM,gBAAgB,CAAuB,EAAE,QAAQ,MAA8B;AAC3F,QAAM,EAAE,OAAO,SAAS,IAAI,WAAc;AAE1C,QAAM,eAAe,CAAE,UAAiC;AACvD,aAAU,MAAM,OAAO,KAAW;AAAA,EACnC;AAEA,SACC,oCAAC,UAAO,MAAK,QAAO,OAAQ,SAAS,IAAK,UAAW,gBAClD,QAAQ,IAAK,CAAE,WAChB,oCAAC,YAAS,KAAM,OAAO,OAAQ,OAAQ,OAAO,OAAQ,UAAW,OAAO,YACrE,OAAO,KACV,CACC,CACH;AAEF;;;AEzBA,YAAYC,YAAW;AACvB,SAAS,wBAAwB;AAO1B,IAAM,cAAc,CAAE,EAAE,YAAY,MAAyB;AACnE,QAAM,EAAE,OAAO,SAAS,IAAI,WAAoB,EAAG;AAEnD,QAAM,eAAe,CAAE,UAAgD;AACtE,aAAU,MAAM,OAAO,KAAM;AAAA,EAC9B;AAEA,SACC,qCAAC,oBAAiB,MAAK,QAAO,SAAU,GAAG,OAAgB,UAAW,cAAe,aAA4B;AAEnH;;;AClBA,YAAYC,YAAW;AAEvB,SAAS,OAAO,kBAAkB;;;ACFlC,SAAS,uBAAuB,kBAAkB;;;ACEnC,SAAR,aAA+B,IAAa;AAClD,QAAM,iBAAiB;AACvB,QAAM,YAAY,eAAe,WAAW,eAAgB,EAAG;AAE/D,SAAO,aAAa;AACrB;;;ADHO,IAAM,iBAAiB,CAAE,EAAE,IAAI,MAAM,MAAqC;AAChF,QAAM,YAAY,aAAc,EAAG;AAEnC,aAAY,8BAA8B;AAAA,IACzC;AAAA,IACA,UAAU;AAAA,MACT,GAAG;AAAA,IACJ;AAAA,EACD,CAAE;AACH;;;AEbA,SAAS,mBAAAC,kBAAiB,wBAAwBC,oBAAmB;AAI9D,IAAM,oBAAoB,CAAE,EAAE,IAAI,KAAK,MAAgD;AAC7F,SAAOC;AAAA,IACNC,iBAAiB,4BAA6B;AAAA,IAC9C,MAAM;AACL,YAAM,YAAY,aAAc,EAAG;AACnC,YAAM,QAAQ,WAAW,UAAU,IAAK,IAAK,KAAK;AAElD,aAAO;AAAA,IACR;AAAA,IACA,CAAC;AAAA,EACF;AACD;;;AHFA,IAAM,kBAAkB,CAAE,EAAE,MAAM,UAAU,UAAU,MAAc;AACnE,QAAM,QAAQ,kBAAmB,EAAE,IAAI,WAAW,KAAK,CAAE;AAEzD,QAAM,WAAW,CAAE,aAAyB;AAC3C,mBAAgB;AAAA,MACf,IAAI;AAAA,MACJ,OAAO;AAAA,QACN,CAAE,IAAK,GAAG;AAAA,MACX;AAAA,IACD,CAAE;AAAA,EACH;AAEA,SACC,qCAAC,eAAe,UAAf,EAAwB,OAAQ,EAAE,UAAU,OAAO,KAAK,KACtD,QACH;AAEF;AAEA,IAAM,QAAQ,CAAE,EAAE,SAAS,MAAsC;AAChE,SAAO,qCAAC,cAAW,WAAU,SAAQ,SAAQ,aAAY,QAAU;AACpE;AAEA,IAAM,YAAY,CAAE,EAAE,SAAS,MAC9B;AAAA,EAAC;AAAA;AAAA,IACA,SAAU;AAAA,IACV,eAAc;AAAA,IACd,YAAW;AAAA,IACX,gBAAe;AAAA,IACf,UAAS;AAAA,IACT,IAAK,EAAE,IAAI,EAAE;AAAA;AAAA,EAEX;AACH;AAGD,gBAAgB,QAAQ;AACxB,gBAAgB,YAAY;;;AR1C5B,SAAS,SAAAC,cAAa;;;AYRtB,YAAYC,YAAW;AACvB,SAAS,iBAAAC,gBAA0B,cAAAC,mBAAkB;AAOrD,IAAM,UAAUD,eAAoC,IAAK;AAOlD,SAAS,eAAgB,EAAE,UAAU,QAAQ,GAAW;AAC9D,SACC,qCAAC,QAAQ,UAAR,EAAiB,OAAQ,EAAE,QAAQ,KACjC,QACH;AAEF;;;AZVA,IAAM,eAAe;AAAA,EACpB,QAAQ;AAAA,EACR,MAAM;AACP;AAEO,IAAM,eAAe,MAAM;AACjC,QAAM,WAAW,oBAAoB;AAErC,QAAM,kBAAkB,SAAU,CAAE;AAEpC,QAAM,cAAc,eAAgB,iBAAiB,IAAK;AAE1D,MAAK,SAAS,WAAW,KAAK,CAAE,aAAc;AAC7C,WAAO;AAAA,EACR;AAGA,QAAM,aAAa,GAAI,WAAW,WAAY,EAAE,QAAS,MAAM,YAAY,KAAM;AAEjF,SACC,qCAAC,aACA,qCAAC,mBACA,qCAAC,wBAAmB,UAAY,CACjC,GACA,qCAAC,iBACA,qCAAC,kBAAe,SAAU,mBACzB,qCAACE,QAAA,EAAM,SAAU,KAEf,YAAY,SAAS,IAAK,CAAE,YAAa;AACxC,QAAK,QAAQ,SAAS,WAAY;AACjC,YAAM,mBAAmB,aAAc,QAAQ,MAAM,IAAkC;AAEvF,UAAK,CAAE,kBAAmB;AACzB,eAAO;AAAA,MACR;AAEA,aACC,qCAAC,mBAAgB,KAAM,QAAQ,MAAM,MAAO,MAAO,QAAQ,MAAM,MAAO,WAAY,SAAU,CAAE,EAAE,MACjG,qCAAC,gBAAgB,WAAhB,MACA,qCAAC,gBAAgB,OAAhB,MAAwB,QAAQ,MAAM,KAAO,GAE9C,qCAAC,oBAAmB,GAAG,QAAQ,MAAM,OAAe,CACrD,CACD;AAAA,IAEF;AAEA,WAAO;AAAA,EACR,CAAE,CAEJ,CACD,CACD,CACD;AAEF;;;AD/DO,IAAM;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AACD,IAAI,YAAa;AAAA,EAChB,IAAI;AAAA,EACJ,WAAW;AACZ,CAAE;;;AcTF,SAAS,uBAAuB;;;ACEzB,IAAM,mBAAmB,MAAM;AACrC,QAAM,mBAAmB,oBAAoB;AAC7C,QAAM,cAAc,gBAAgB;AAEpC,MAAK,iBAAiB,WAAW,GAAI;AACpC,WAAO;AAAA,EACR;AAGA,SAAO,CAAC,CAAE,cAAe,iBAAkB,CAAE,EAAE,IAAK,GAAG;AACxD;;;ACbA,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB,qBAAqB,gBAAgB;AAI1D,IAAM,qBAAqB,MAAM;AACvC,QAAM,EAAE,KAAK,IAAI,gBAAgB;AAEjC,YAAW,MAAM;AAChB,WAAO;AAAA,MACN,kBAAmB,mBAAoB;AAAA,MACvC,MAAM;AACL,YAAK,iBAAiB,GAAI;AACzB,eAAK;AAAA,QACN;AAAA,MACD;AAAA,IACD;AAAA,EACD,GAAG,CAAC,CAAE;AACP;;;AChBO,IAAM,oBAAoB,MAAM;AACtC,qBAAmB;AAEnB,SAAO;AACR;;;AHFA,SAAS,mBAAmB,qBAAqB;AACjD,SAAS,6BAA6B,wBAAwB;AAE/C,SAAR,OAAwB;AAC9B,gBAAe,KAAM;AACrB,eAAa;AAEb,kBAAiB;AAAA,IAChB,IAAI;AAAA,IACJ,WAAW;AAAA,EACZ,CAAE;AACH;AAEA,IAAM,eAAe,MAAM;AAC1B,mBAAkB;AAAA,IACjB,SAAS;AAAA,IACT,WAAW;AAAA,EACZ,CAAE;AACH;;;AIpBA,KAAK;","names":["React","useListenTo","commandEndEvent","useListenTo","commandEndEvent","React","React","commandEndEvent","useListenTo","useListenTo","commandEndEvent","Stack","React","createContext","useContext","Stack"]}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@elementor/editor-editing-panel",
-	"version": "0.3.0",
+	"version": "0.4.0",
 	"private": false,
 	"author": "Elementor Team",
 	"homepage": "https://elementor.com/",
@@ -41,5 +41,5 @@
 	"peerDependencies": {
 		"react": "^18.3.1"
 	},
-	"gitHead": "24e239cdbfb5a4ec3776a7694d6800a5a79c08e8"
+	"gitHead": "d35136851ca21a11d375734e8e078d5ef5b9d52d"
 }

package/src/__tests__/utils.ts

@@ -1,16 +1,27 @@
-import { V1Element, V1ElementModelProps } from '../sync/types';
+import { V1Element, V1ElementModelProps, V1ElementSettingsProps } from '../sync/types';
 
-export function mockV1Element( partialSettings: Partial<V1ElementModelProps> ): V1Element {
-	const settings = {
+export function mockV1Element( {
+	model: partialModel = {},
+	settings: partialSettings = {},
+}: {
+	model?: Partial<V1ElementModelProps>,
+	settings?: Partial<V1ElementSettingsProps>
+} ): V1Element {
+	const model = {
 		elType: 'widget',
 		id: '1',
-		...partialSettings,
+		...partialModel,
 	};
 
 	return {
 		model: {
 			get: ( key ) => {
-				return settings[ key ];
+				return model[ key ];
+			},
+		},
+		settings: {
+			get: ( key ) => {
+				return partialSettings[ key ];
 			},
 		},
 	};

package/src/components/__tests__/editing-panel.test.tsx

@@ -51,7 +51,7 @@ describe( '<EditingPanel />', () => {
 		expect( screen.queryByText( 'Edit Atomic Heading' ) ).not.toBeInTheDocument();
 
 		// Act.
-		selectElements( [ mockV1Element( { widgetType: 'atomic-heading' } ) ] );
+		selectElements( [ mockV1Element( { model: { widgetType: 'atomic-heading' } } ) ] );
 
 		// Assert.
 		expect( screen.getByText( 'Edit Atomic Heading' ) ).toBeInTheDocument();
@@ -67,20 +67,20 @@ describe( '<EditingPanel />', () => {
 		{
 			title: 'multiple elements are selected',
 			selected: [
-				mockV1Element( { widgetType: 'atomic-heading' } ),
-				mockV1Element( { widgetType: 'atomic-heading' } ),
+				mockV1Element( { model: { widgetType: 'atomic-heading' } } ),
+				mockV1Element( { model: { widgetType: 'atomic-heading' } } ),
 			],
 		},
 		{
 			title: 'the element type does not exist',
 			selected: [
-				mockV1Element( { widgetType: 'atomic-button' } ),
+				mockV1Element( { model: { widgetType: 'atomic-button' } } ),
 			],
 		},
 		{
 			title: 'the element does not have atomic controls',
 			selected: [
-				mockV1Element( { widgetType: 'heading' } ),
+				mockV1Element( { model: { widgetType: 'heading' } } ),
 			],
 		},
 	] )( 'should not render panel when $title', ( { selected } ) => {

package/src/components/controls/__tests__/control-context.test.tsx

@@ -0,0 +1,14 @@
+import { renderHook } from '@testing-library/react';
+import { useControl } from '../control-context';
+
+describe( 'ControlContext', () => {
+	it( 'should throw error if used outside of ControlContext', () => {
+		// Act & Assert.
+		expect( () => {
+			renderHook( () => useControl( '' ) );
+		} ).toThrow( 'useControl must be used within a ControlContext' );
+
+		// Suppress console.error from React.
+		expect( console ).toHaveErrored();
+	} );
+} );

package/src/components/controls/__tests__/settings-control.test.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { SettingsControl } from '../settings-control';
+import { useControl } from '../control-context';
+import { updateSettings } from '../../../sync/update-settings';
+import { useWidgetSettings } from '../../../hooks/use-widget-settings';
+
+jest.mock( '../../../sync/update-settings' );
+jest.mock( '../../../hooks/use-widget-settings' );
+
+describe( 'SettingsControl', () => {
+	beforeEach( () => {
+		jest.mocked( useWidgetSettings ).mockReturnValue( 'Hello, World!' );
+	} );
+
+	it( 'should set the initial value', () => {
+		// Arrange.
+		const elementID = '1-heading';
+		const bind = 'text';
+
+		// Act.
+		render(
+			<SettingsControl bind={ bind } elementID={ elementID }>
+				<MockControl />
+			</SettingsControl>
+		);
+
+		// Assert.
+		expect( screen.getByRole( 'textbox', { name: bind } ) ).toHaveValue( 'Hello, World!' );
+	} );
+
+	it( 'should pass the updated payload when input value changes', () => {
+		// Arrange.
+		const elementID = '1-heading';
+		const bind = 'text';
+
+		// Act.
+		render(
+			<SettingsControl bind={ bind } elementID={ elementID }>
+				<MockControl />
+			</SettingsControl>
+		);
+
+		const input = screen.getByRole( 'textbox', { name: bind } );
+		const newValue = 'Goodbye, World!';
+
+		fireEvent.change( input, { target: { value: newValue } } );
+
+		// Assert.
+		expect( jest.mocked( updateSettings ) ).toHaveBeenCalledWith( {
+			id: elementID,
+			props: { [ bind ]: newValue },
+		} );
+	} );
+} );
+
+const MockControl = () => {
+	const { value, setValue, bind } = useControl<string>( '' );
+
+	const handleChange = ( event: React.ChangeEvent<HTMLInputElement> ) => {
+		setValue( event.target.value );
+	};
+
+	return (
+		<input type="text" aria-label={ bind } value={ value } onChange={ handleChange } />
+	);
+};

package/src/components/controls/control-context.ts

@@ -0,0 +1,20 @@
+import { createContext, useContext } from 'react';
+import { PropKey, PropValue } from '../../types';
+
+export type ControlContext<T extends PropValue> = null | {
+	bind: PropKey;
+	setValue: ( value: T ) => void;
+	value: T;
+};
+
+export const ControlContext = createContext<ControlContext<PropValue>>( null );
+
+export function useControl<T extends PropValue>( defaultValue?: T ) {
+	const controlContext = useContext<ControlContext<T>>( ControlContext as never );
+
+	if ( ! controlContext ) {
+		throw new Error( 'useControl must be used within a ControlContext' );
+	}
+
+	return { ...controlContext, value: controlContext.value ?? defaultValue };
+}

package/src/components/controls/control-types/__tests__/select-control.test.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { ControlContext } from '../../control-context';
+import { SelectControl } from '../select-control';
+
+describe( 'SelectControl', () => {
+	it( 'should pass the updated payload when select value changes', () => {
+		// Arrange.
+		const setValue = jest.fn();
+		const options = [
+			{ label: 'Option 1', value: 'value1' },
+			{ label: 'Option 2', value: 'value2' },
+		];
+
+		// Act.
+		render(
+			<ControlContext.Provider value={ { setValue, value: 'value1', bind: 'select' } }>
+				<SelectControl options={ options } />
+			</ControlContext.Provider>
+		);
+
+		const select = screen.getByRole( 'combobox' );
+
+		// Assert.
+		expect( screen.getByText( 'Option 1' ) ).toBeInTheDocument();
+		expect( screen.queryByText( 'Option 2' ) ).not.toBeInTheDocument();
+
+		// Act.
+		fireEvent.mouseDown( select );
+
+		const option2 = screen.getByText( 'Option 2' );
+
+		fireEvent.click( option2 );
+
+		// Assert.
+		expect( setValue ).toHaveBeenCalledWith( 'value2' );
+	} );
+
+	it( 'should disable the select options', () => {
+		// Arrange.
+		const setValue = jest.fn();
+		const options = [
+			{ label: 'Option 1', value: 'value1' },
+			{ label: 'Option 2', value: 'value2', disabled: true },
+			{ label: 'Option 3', value: 'value3', disabled: false },
+		];
+
+		// Act.
+		render(
+			<ControlContext.Provider value={ { setValue, value: '', bind: 'select' } }>
+				<SelectControl options={ options } />
+			</ControlContext.Provider>
+		);
+
+		const select = screen.getByRole( 'combobox' );
+
+		// Act.
+		fireEvent.mouseDown( select );
+
+		const option2 = screen.getByText( 'Option 2' );
+		const option3 = screen.getByText( 'Option 3' );
+
+		// Assert.
+		expect( option2 ).toHaveAttribute( 'aria-disabled', 'true' );
+		expect( option3 ).not.toHaveAttribute( 'aria-disabled', 'true' );
+	} );
+} );

package/src/components/controls/control-types/__tests__/text-control.test.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { TextControl } from '../text-control';
+import { ControlContext } from '../../control-context';
+
+describe( 'TextControl', () => {
+	it( 'should pass the updated payload when input value changes', () => {
+		// Arrange.
+		const setValue = jest.fn();
+
+		// Act.
+		render(
+			<ControlContext.Provider value={ { setValue, value: 'Hi', bind: 'text' } }>
+				<TextControl placeholder="type text here" />
+			</ControlContext.Provider>
+		);
+
+		const input = screen.getByRole( 'textbox' );
+
+		// Assert.
+		expect( input ).toHaveValue( 'Hi' );
+
+		// Act.
+		fireEvent.input( input, { target: { value: 'Cool Heading!' } } );
+
+		// Assert.
+		expect( setValue ).toHaveBeenCalledWith( 'Cool Heading!' );
+	} );
+} );

package/src/components/controls/control-types/select-control.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { MenuItem, Select, SelectChangeEvent } from '@elementor/ui';
+import { useControl } from '../control-context';
+import { PropValue } from '../../../types';
+
+export type SelectControlProps<T> = {
+	options: Array<{ label: string; value: T; disabled?: boolean }>
+};
+
+export const SelectControl = <T extends PropValue>( { options }: SelectControlProps<T> ) => {
+	const { value, setValue } = useControl<T>();
+
+	const handleChange = ( event: SelectChangeEvent<T> ) => {
+		setValue( event.target.value as T );
+	};
+
+	return (
+		<Select size="tiny" value={ value ?? '' } onChange={ handleChange }>
+			{ options.map( ( option ) => (
+				<MenuItem key={ option.value } value={ option.value } disabled={ option.disabled }>
+					{ option.label }
+				</MenuItem>
+			) ) }
+		</Select>
+	);
+};

package/src/components/controls/control-types/text-control.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { TextareaAutosize } from '@elementor/ui';
+import { useControl } from '../control-context';
+
+export type TextControlProps = {
+	placeholder?: string;
+}
+
+export const TextControl = ( { placeholder }: TextControlProps ) => {
+	const { value, setValue } = useControl<string>( '' );
+
+	const handleChange = ( event: React.ChangeEvent<HTMLInputElement> ) => {
+		setValue( event.target.value );
+	};
+
+	return (
+		<TextareaAutosize size="tiny" minRows={ 3 }value={ value } onChange={ handleChange } placeholder={ placeholder } />
+	);
+};

package/src/components/controls/settings-control.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { ControlContext } from './control-context';
+import { Stack, Typography } from '@elementor/ui';
+import { updateSettings } from '../../sync/update-settings';
+import { useWidgetSettings } from '../../hooks/use-widget-settings';
+import { PropKey, PropValue } from '../../types';
+
+type Props = {
+	bind: PropKey;
+	children: React.ReactNode;
+	elementID: Element['id'];
+}
+
+const SettingsControl = ( { bind, children, elementID }: Props ) => {
+	const value = useWidgetSettings( { id: elementID, bind } );
+
+	const setValue = ( newValue: PropValue ) => {
+		updateSettings( {
+			id: elementID,
+			props: {
+				[ bind ]: newValue,
+			},
+		} );
+	};
+
+	return (
+		<ControlContext.Provider value={ { setValue, value, bind } }>
+			{ children }
+		</ControlContext.Provider>
+	);
+};
+
+const Label = ( { children }: { children: React.ReactNode } ) => {
+	return <Typography component="label" variant="caption">{ children }</Typography>;
+};
+
+const Container = ( { children }: { children: React.ReactNode} ) => (
+	<Stack
+		spacing={ 1 }
+		flexDirection="row"
+		alignItems="center"
+		justifyContent="space-between"
+		flexWrap="wrap"
+		sx={ { px: 2 } }
+	>
+		{ children }
+	</Stack>
+);
+
+SettingsControl.Label = Label;
+SettingsControl.Container = Container;
+
+export { SettingsControl };

package/src/components/editing-panel.tsx

@@ -1,15 +1,18 @@
 import * as React from 'react';
-import {
-	Panel,
-	PanelBody,
-	PanelHeader,
-	PanelHeaderTitle,
-} from '@elementor/editor-panels';
 import { __ } from '@wordpress/i18n';
 import useSelectedElements from '../hooks/use-selected-elements';
 import useElementType from '../hooks/use-element-type';
+import { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from '@elementor/editor-panels';
+import { SelectControl } from './controls/control-types/select-control';
+import { TextControl } from './controls/control-types/text-control';
+import { SettingsControl } from '../components/controls/settings-control';
+import { Stack } from '@elementor/ui';
 import { ElementContext } from '../contexts/settings-controls';
-import { Box, Typography } from '@elementor/ui';
+
+const controlTypes = {
+	select: SelectControl,
+	text: TextControl,
+};
 
 export const EditingPanel = () => {
 	const elements = useSelectedElements();
@@ -32,11 +35,31 @@ export const EditingPanel = () => {
 			</PanelHeader>
 			<PanelBody>
 				<ElementContext element={ selectedElement }>
-					<Box padding={ 2 }>
-						<Typography>
-							Here should be the controls.
-						</Typography>
-					</Box>
+					<Stack spacing={ 2 }>
+						{
+							elementType.controls.map( ( control ) => {
+								if ( control.type === 'control' ) {
+									const ControlComponent = controlTypes[ control.value.type as keyof typeof controlTypes ];
+
+									if ( ! ControlComponent ) {
+										return null;
+									}
+
+									return (
+										<SettingsControl key={ control.value.bind } bind={ control.value.bind } elementID={ elements[ 0 ].id }>
+											<SettingsControl.Container>
+												<SettingsControl.Label>{ control.value.label }</SettingsControl.Label>
+												{ /* eslint-disable-next-line @typescript-eslint/no-explicit-any */ }
+												<ControlComponent { ...control.value.props as any } />
+											</SettingsControl.Container>
+										</SettingsControl>
+									);
+								}
+
+								return null;
+							} )
+						}
+					</Stack>
 				</ElementContext>
 			</PanelBody>
 		</Panel>

package/src/hooks/__tests__/use-widget-settings.test.ts

@@ -0,0 +1,81 @@
+import { act, renderHook } from '@testing-library/react';
+import { useWidgetSettings } from '../use-widget-settings';
+import { ExtendedWindow } from '../../sync/types';
+import { mockV1Element } from '../../__tests__/utils';
+import { dispatchCommandAfter } from 'test-utils';
+import getContainer from '../../sync/get-container';
+
+jest.mock( '../../sync/get-container' );
+
+describe( 'useWidgetSettings', () => {
+	beforeEach( () => {
+		const extendedWindow = window as unknown as ExtendedWindow;
+
+		extendedWindow.elementor = {
+			widgetsCache: {
+				'v1-heading': {
+					controls: [],
+					title: 'Heading',
+				},
+				'v2-heading': {
+					controls: [],
+					atomic_controls: [],
+					title: 'Heading',
+				},
+				'v2-container': {
+					controls: [],
+					atomic_controls: [],
+					title: 'Container',
+				},
+			},
+		};
+	} );
+
+	it( 'should return the value of the setting', () => {
+		// Arrange.
+		const bind = 'title';
+		const element = { id: 'element-id' };
+		jest.mocked( getContainer ).mockReturnValue( mockV1Element( { settings: { [ bind ]: 'Hello, World!' } } ) );
+
+		// Act.
+		const result = renderHook( () => useWidgetSettings( { id: element.id, bind } ) ).result.current;
+
+		// Assert.
+		expect( result ).toEqual( 'Hello, World!' );
+	} );
+
+	it( 'should return null if the setting is not found', () => {
+		// Arrange.
+		const bind = 'title';
+		const element = { id: 'element-id' };
+		jest.mocked( getContainer ).mockReturnValue( mockV1Element( { settings: {} } ) );
+
+		// Act.
+		const result = renderHook( () => useWidgetSettings( { id: element.id, bind } ) ).result.current;
+
+		// Assert.
+		expect( result ).toEqual( null );
+	} );
+
+	it( 'should update the state value on settings change', () => {
+		// Arrange.
+		const bind = 'title';
+		const element = { id: 'element-id' };
+		jest.mocked( getContainer ).mockReturnValue( mockV1Element( { settings: { [ bind ]: 'Hello, World!' } } ) );
+
+		// Act.
+		const { result } = renderHook( () => useWidgetSettings( { id: element.id, bind } ) );
+
+		// Assert.
+		expect( result.current ).toEqual( 'Hello, World!' );
+
+		// Act.
+		act( () => {
+			jest.mocked( getContainer ).mockReturnValue( mockV1Element( { settings: { [ bind ]: 'Goodbye, World!' } } ) );
+			dispatchCommandAfter( 'document/elements/settings' );
+		} );
+
+		// Assert.
+		expect( result.current ).toEqual( 'Goodbye, World!' );
+	} );
+} );

package/src/hooks/use-widget-settings.ts

@@ -0,0 +1,16 @@
+import { commandEndEvent, __privateUseListenTo as useListenTo } from '@elementor/editor-v1-adapters';
+import { PropValue } from '../types';
+import getContainer from '../sync/get-container';
+
+export const useWidgetSettings = ( { id, bind }: { id: string; bind: string } ): PropValue => {
+	return useListenTo(
+		commandEndEvent( 'document/elements/settings' ),
+		() => {
+			const container = getContainer( id );
+			const value = container?.settings?.get( bind ) ?? null;
+
+			return value;
+		},
+		[]
+	);
+};

package/src/sync/__tests__/get-container.test.ts

@@ -0,0 +1,40 @@
+import getContainer from '../get-container';
+import { ExtendedWindow } from '../types';
+
+describe( 'getContainer', () => {
+	const mockGetContainer = jest.fn();
+
+	beforeEach( () => {
+		const extendedWindow = window as unknown as ExtendedWindow;
+
+		extendedWindow.elementor = {
+			getContainer: mockGetContainer,
+		};
+	} );
+
+	it( 'should return the container', () => {
+		// Arrange.
+		const elementID = '1-heading';
+		const container = { id: elementID };
+		mockGetContainer.mockReturnValue( container );
+
+		// Act.
+		const result = getContainer( elementID );
+
+		// Assert.
+		expect( result ).toBe( container );
+	} );
+
+	it( 'should return null if the container is not found', () => {
+		// Arrange.
+		const elementID = '1-heading';
+		const container = undefined;
+		mockGetContainer.mockReturnValue( container );
+
+		// Act.
+		const result = getContainer( elementID );
+
+		// Assert.
+		expect( result ).toBe( null );
+	} );
+} );

package/src/sync/__tests__/should-use-v2-panel.test.ts

@@ -41,7 +41,7 @@ describe( 'shouldUseV2Panel', () => {
 
 	it( 'should return true for v2 element', () => {
 		// Arrange.
-		getElements.mockReturnValue( [ mockV1Element( { widgetType: 'v2-heading' } ) ] );
+		getElements.mockReturnValue( [ mockV1Element( { model: { widgetType: 'v2-heading' } } ) ] );
 
 		// Assert.
 		expect( shouldUseV2Panel() ).toBe( true );
@@ -49,7 +49,7 @@ describe( 'shouldUseV2Panel', () => {
 
 	it( 'should return true for v2 element', () => {
 		// Arrange.
-		getElements.mockReturnValue( [ mockV1Element( { elType: 'v2-container' } ) ] );
+		getElements.mockReturnValue( [ mockV1Element( { model: { elType: 'v2-container' } } ) ] );
 
 		// Assert.
 		expect( shouldUseV2Panel() ).toBe( true );
@@ -57,7 +57,7 @@ describe( 'shouldUseV2Panel', () => {
 
 	it( 'should return false for v1 element', () => {
 		// Arrange.
-		getElements.mockReturnValue( [ mockV1Element( { widgetType: 'v1-heading' } ) ] );
+		getElements.mockReturnValue( [ mockV1Element( { model: { widgetType: 'v1-heading' } } ) ] );
 
 		// Assert.
 		expect( shouldUseV2Panel() ).toBe( false );
@@ -65,7 +65,7 @@ describe( 'shouldUseV2Panel', () => {
 
 	it( 'should return false for non-existing element', () => {
 		// Arrange.
-		getElements.mockReturnValue( [ mockV1Element( { widgetType: 'non-existing' } ) ] );
+		getElements.mockReturnValue( [ mockV1Element( { model: { widgetType: 'non-existing' } } ) ] );
 
 		// Assert.
 		expect( shouldUseV2Panel() ).toBe( false );
@@ -74,8 +74,8 @@ describe( 'shouldUseV2Panel', () => {
 	it( 'should return false if there is more than 1 selected element with mixed versions', () => {
 		// Arrange.
 		getElements.mockReturnValue( [
-			mockV1Element( { widgetType: 'v2-heading' } ),
-			mockV1Element( { widgetType: 'v1-heading' } ),
+			mockV1Element( { model: { widgetType: 'v2-heading' } } ),
+			mockV1Element( { model: { widgetType: 'v1-heading' } } ),
 		] );
 
 		// Assert.
@@ -85,8 +85,8 @@ describe( 'shouldUseV2Panel', () => {
 	it( 'should return false if there is more than 1 selected element with same version', () => {
 		// Arrange.
 		getElements.mockReturnValue( [
-			mockV1Element( { widgetType: 'v2-heading' } ),
-			mockV1Element( { widgetType: 'v2-container' } ),
+			mockV1Element( { model: { widgetType: 'v2-heading' } } ),
+			mockV1Element( { model: { widgetType: 'v2-container' } } ),
 		] );
 
 		// Assert.

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/types.ts

@@ -1,18 +1,22 @@
+import { AtomicControl, PropValue } from '../types';
+
 export type ExtendedWindow = Window & {
 	elementor?: {
 		selection?: {
 			getElements: () => V1Element[];
 		},
 		widgetsCache?: Record<string, {
-			atomic_controls?: unknown[],
+			atomic_controls?: AtomicControl[],
 			controls: object,
 			title: string,
-		}>
+		}>,
+		getContainer?: ( id: string ) => V1Element
 	}
 }
 
 export type V1Element = {
-	model: V1ElementModel<V1ElementModelProps>
+	model: V1Model<V1ElementModelProps>,
+	settings?: V1Model<V1ElementSettingsProps>,
 }
 
 export type V1ElementModelProps = {
@@ -21,6 +25,8 @@ export type V1ElementModelProps = {
 	id: string;
 }
 
-type V1ElementModel<T> = {
+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,14 @@
+import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';
+import { Props } from '../types';
+import getContainer from './get-container';
+
+export const updateSettings = ( { id, props }: { id: string, props: Props } ) => {
+	const container = getContainer( id );
+
+	runCommand( 'document/elements/settings', {
+		container,
+		settings: {
+			...props,
+		},
+	} );
+};

package/src/types.ts

@@ -5,6 +5,34 @@ export type Element = {
 
 export type ElementType = {
 	key: string;
-	controls: unknown[];
+	controls: AtomicControl[];
 	title: string;
 }
+
+export type AtomicControl = {
+	type: 'control',
+	value: {
+		bind: string,
+		label: string,
+		description?: string,
+		type: string,
+		props: Record<string, unknown>,
+	},
+}
+
+type MaybeArray<T> = T | T[];
+
+type TransformablePropValue = {
+	$$type: string,
+	value: unknown,
+}
+
+export type PlainPropValue = MaybeArray<string | number | boolean | object | null | undefined>;
+
+export type PropValue = PlainPropValue | TransformablePropValue;
+
+export type PropKey = string;
+
+export type Props = Record<PropKey, PropValue>;
+
+export type PlainProps = Record<PropKey, PlainPropValue>;