@elementor/editor-editing-panel 0.2.0 → 0.4.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 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)
+
+
+### Features
+
+* **editor-editing-panel:** element context [EDS-255] ([#200](https://github.com/elementor/elementor-packages/issues/200)) ([cff677e](https://github.com/elementor/elementor-packages/commit/cff677eec3690fe8b9569d5fd27c2512a981334c))
+
+
+
+
+
 # [0.2.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-editing-panel@0.1.0...@elementor/editor-editing-panel@0.2.0) (2024-07-11)
 
 

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 React = __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
@@ -93,14 +92,147 @@ function useElementType(type) {
 }
 
 // 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 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__ */ React4.createElement(Context.Provider, { value: { element } }, children);
+}
+
+// src/components/editing-panel.tsx
+var controlTypes = {
+  select: SelectControl,
+  text: TextControl
+};
 var EditingPanel = () => {
   const elements = useSelectedElements();
-  const elementType = useElementType(elements[0]?.type);
+  const selectedElement = elements[0];
+  const elementType = useElementType(selectedElement?.type);
   if (elements.length !== 1 || !elementType) {
     return null;
   }
   const panelTitle = (0, import_i18n.__)("Edit %s", "elementor").replace("%s", elementType.title);
-  return /* @__PURE__ */ React.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React.createElement(import_editor_panels.PanelHeaderTitle, null, panelTitle)), /* @__PURE__ */ React.createElement(import_editor_panels.PanelBody, null));
+  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
@@ -127,13 +259,13 @@ var shouldUseV2Panel = () => {
 };
 
 // src/hooks/use-open-editor-panel.ts
-var import_react = 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_react.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();
@@ -151,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();
@@ -161,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/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';\n\nexport const EditingPanel = () => {\n\tconst elements = useSelectedElements();\n\tconst elementType = useElementType( elements[ 0 ]?.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></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 { 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","useListenTo","import_editor_v1_adapters","useListenTo","createPanel","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 React 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
@@ -74,14 +68,147 @@ function useElementType(type) {
 }
 
 // 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 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__ */ React4.createElement(Context.Provider, { value: { element } }, children);
+}
+
+// src/components/editing-panel.tsx
+var controlTypes = {
+  select: SelectControl,
+  text: TextControl
+};
 var EditingPanel = () => {
   const elements = useSelectedElements();
-  const elementType = useElementType(elements[0]?.type);
+  const selectedElement = elements[0];
+  const elementType = useElementType(selectedElement?.type);
   if (elements.length !== 1 || !elementType) {
     return null;
   }
   const panelTitle = __("Edit %s", "elementor").replace("%s", elementType.title);
-  return /* @__PURE__ */ React.createElement(Panel, null, /* @__PURE__ */ React.createElement(PanelHeader, null, /* @__PURE__ */ React.createElement(PanelHeaderTitle, null, panelTitle)), /* @__PURE__ */ React.createElement(PanelBody, null));
+  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/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';\n\nexport const EditingPanel = () => {\n\tconst elements = useSelectedElements();\n\tconst elementType = useElementType( elements[ 0 ]?.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></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 { 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,YAAY,WAAW;AACvB;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,UAAU;;;ACPnB,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,wBAAwBA,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;;;AHhBO,IAAM,eAAe,MAAM;AACjC,QAAM,WAAW,oBAAoB;AACrC,QAAM,cAAc,eAAgB,SAAU,CAAE,GAAG,IAAK;AAExD,MAAK,SAAS,WAAW,KAAK,CAAE,aAAc;AAC7C,WAAO;AAAA,EACR;AAGA,QAAM,aAAa,GAAI,WAAW,WAAY,EAAE,QAAS,MAAM,YAAY,KAAM;AAEjF,SACC,oCAAC,aACA,oCAAC,mBACA,oCAAC,wBAAmB,UAAY,CACjC,GACA,oCAAC,eAAU,CACZ;AAEF;;;AD3BO,IAAM;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AACD,IAAI,YAAa;AAAA,EAChB,IAAI;AAAA,EACJ,WAAW;AACZ,CAAE;;;AMTF,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":["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":"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","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.2.0",
+	"version": "0.4.0",
 	"private": false,
 	"author": "Elementor Team",
 	"homepage": "https://elementor.com/",
@@ -35,10 +35,11 @@
 		"@elementor/editor": "^0.11.0",
 		"@elementor/editor-panels": "^0.4.15",
 		"@elementor/editor-v1-adapters": "^0.7.0",
+		"@elementor/ui": "^1.4.61",
 		"@wordpress/i18n": "^4.45.0"
 	},
 	"peerDependencies": {
 		"react": "^18.3.1"
 	},
-	"gitHead": "1c8d86d0aa369e98aa84631abea0df04c9fd8fc5"
+	"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();
+	} );
+} );