@elementor/editor-editing-panel 0.5.1 → 0.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +20 -0
- package/dist/index.js +173 -71
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +167 -65
- package/dist/index.mjs.map +1 -1
- package/package.json +15 -7
- package/src/components/controls/collapsible-section.tsx +25 -0
- package/src/components/controls/control-types/text-area-control.tsx +5 -3
- package/src/components/controls/control-types/text-control.tsx +11 -0
- package/src/components/controls/get-control-by-type.ts +13 -0
- package/src/components/controls/settings-control.tsx +38 -13
- package/src/components/controls/style-control.tsx +35 -0
- package/src/components/{editing-panel-hooks.tsx → editing-panel/editing-panel-hooks.tsx} +1 -1
- package/src/components/editing-panel/editing-panel-tabs.tsx +26 -0
- package/src/components/editing-panel/editing-panel.tsx +35 -0
- package/src/components/editing-panel/settings-tab.tsx +64 -0
- package/src/components/editing-panel/style-tab.tsx +17 -0
- package/src/contexts/control-context.tsx +0 -25
- package/src/contexts/style-context.tsx +34 -0
- package/src/hooks/use-element-style-prop.ts +44 -0
- package/src/hooks/use-element-styles.ts +13 -0
- package/src/init.ts +1 -1
- package/src/panel.ts +1 -1
- package/src/sync/get-element-styles.ts +8 -0
- package/src/sync/types.ts +3 -2
- package/src/sync/update-style.ts +23 -0
- package/src/types.ts +49 -3
- package/src/__tests__/utils.ts +0 -28
- package/src/components/__tests__/editing-panel.test.tsx +0 -92
- package/src/components/controls/__tests__/settings-control.test.tsx +0 -71
- package/src/components/controls/control-types/__tests__/select-control.test.tsx +0 -67
- package/src/components/controls/control-types/__tests__/text-area-control.test.tsx +0 -29
- package/src/components/editing-panel.tsx +0 -66
- package/src/contexts/__tests__/control-context.test.tsx +0 -14
- package/src/hooks/__tests__/use-widget-settings.test.ts +0 -128
- package/src/sync/__tests__/get-container.test.ts +0 -40
- package/src/sync/__tests__/should-use-v2-panel.test.ts +0 -95
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,26 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [0.6.1](https://github.com/elementor/elementor-packages/compare/@elementor/editor-editing-panel@0.6.0...@elementor/editor-editing-panel@0.6.1) (2024-08-05)
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
- **editor-editing-panel:** change update style props ([#228](https://github.com/elementor/elementor-packages/issues/228)) ([3918096](https://github.com/elementor/elementor-packages/commit/3918096741825f034c710519bc0e29d9f22001fe))
|
|
11
|
+
|
|
12
|
+
# [0.6.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-editing-panel@0.5.1...@elementor/editor-editing-panel@0.6.0) (2024-08-05)
|
|
13
|
+
|
|
14
|
+
### Bug Fixes
|
|
15
|
+
|
|
16
|
+
- publish only necessary files to npm ([#226](https://github.com/elementor/elementor-packages/issues/226)) ([d808e2f](https://github.com/elementor/elementor-packages/commit/d808e2f60eb7ca2d7b8560d0b79c0e62c2f969a8))
|
|
17
|
+
|
|
18
|
+
### Features
|
|
19
|
+
|
|
20
|
+
- **editor-editing-panel:** add input control input [EDS-308] ([#222](https://github.com/elementor/elementor-packages/issues/222)) ([0370fce](https://github.com/elementor/elementor-packages/commit/0370fcebb07f9768094e123365e2fb3d89f852fc))
|
|
21
|
+
- **editor-editing-panel:** add style control wrapper [EDS-319] ([#227](https://github.com/elementor/elementor-packages/issues/227)) ([1494a60](https://github.com/elementor/elementor-packages/commit/1494a60767fe82a9cf2a1cc8e5b487975e12a0c4))
|
|
22
|
+
- **editor-editing-panel:** add styles API [ EDS-281 ] ([#223](https://github.com/elementor/elementor-packages/issues/223)) ([f3fdc2a](https://github.com/elementor/elementor-packages/commit/f3fdc2aa06ec21fcad707ced707a880dd2a0f045))
|
|
23
|
+
- **editor-editing-panel:** change textarea component [EDS-311] ([#221](https://github.com/elementor/elementor-packages/issues/221)) ([a9ab0d5](https://github.com/elementor/elementor-packages/commit/a9ab0d53e87086e323c4f024dca0eae93005e1a1))
|
|
24
|
+
- **editor-editing-panel:** settings and style tabs [EDS-277] ([#217](https://github.com/elementor/elementor-packages/issues/217)) ([c623797](https://github.com/elementor/elementor-packages/commit/c6237974d9940a2b58bdd1df3d835dc828e323f4))
|
|
25
|
+
|
|
6
26
|
## [0.5.1](https://github.com/elementor/elementor-packages/compare/@elementor/editor-editing-panel@0.5.0...@elementor/editor-editing-panel@0.5.1) (2024-07-18)
|
|
7
27
|
|
|
8
28
|
### Bug Fixes
|
package/dist/index.js
CHANGED
|
@@ -25,9 +25,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
25
25
|
// src/panel.ts
|
|
26
26
|
var import_editor_panels2 = require("@elementor/editor-panels");
|
|
27
27
|
|
|
28
|
-
// src/components/editing-panel.tsx
|
|
29
|
-
var
|
|
30
|
-
var
|
|
28
|
+
// src/components/editing-panel/editing-panel.tsx
|
|
29
|
+
var React11 = __toESM(require("react"));
|
|
30
|
+
var import_i18n2 = require("@wordpress/i18n");
|
|
31
31
|
|
|
32
32
|
// src/hooks/use-selected-elements.ts
|
|
33
33
|
var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
|
|
@@ -88,17 +88,9 @@ function useElementType(type) {
|
|
|
88
88
|
);
|
|
89
89
|
}
|
|
90
90
|
|
|
91
|
-
// src/components/editing-panel.tsx
|
|
91
|
+
// src/components/editing-panel/editing-panel.tsx
|
|
92
92
|
var import_editor_panels = require("@elementor/editor-panels");
|
|
93
93
|
|
|
94
|
-
// src/components/controls/control-types/select-control.tsx
|
|
95
|
-
var React3 = __toESM(require("react"));
|
|
96
|
-
var import_ui = require("@elementor/ui");
|
|
97
|
-
|
|
98
|
-
// src/contexts/control-context.tsx
|
|
99
|
-
var React2 = __toESM(require("react"));
|
|
100
|
-
var import_react2 = require("react");
|
|
101
|
-
|
|
102
94
|
// src/contexts/element-context.tsx
|
|
103
95
|
var React = __toESM(require("react"));
|
|
104
96
|
var import_react = require("react");
|
|
@@ -114,6 +106,32 @@ function useElementContext() {
|
|
|
114
106
|
return context;
|
|
115
107
|
}
|
|
116
108
|
|
|
109
|
+
// src/components/editing-panel/editing-panel-tabs.tsx
|
|
110
|
+
var import_ui7 = require("@elementor/ui");
|
|
111
|
+
var React10 = __toESM(require("react"));
|
|
112
|
+
var import_i18n = require("@wordpress/i18n");
|
|
113
|
+
|
|
114
|
+
// src/components/editing-panel/settings-tab.tsx
|
|
115
|
+
var React7 = __toESM(require("react"));
|
|
116
|
+
var import_ui6 = require("@elementor/ui");
|
|
117
|
+
|
|
118
|
+
// src/components/controls/settings-control.tsx
|
|
119
|
+
var React2 = __toESM(require("react"));
|
|
120
|
+
|
|
121
|
+
// src/contexts/control-context.tsx
|
|
122
|
+
var import_react2 = require("react");
|
|
123
|
+
var ControlContext = (0, import_react2.createContext)(null);
|
|
124
|
+
function useControl(defaultValue) {
|
|
125
|
+
const controlContext = (0, import_react2.useContext)(ControlContext);
|
|
126
|
+
if (!controlContext) {
|
|
127
|
+
throw new Error("useControl must be used within a ControlContext");
|
|
128
|
+
}
|
|
129
|
+
return { ...controlContext, value: controlContext.value ?? defaultValue };
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
// src/components/controls/settings-control.tsx
|
|
133
|
+
var import_ui = require("@elementor/ui");
|
|
134
|
+
|
|
117
135
|
// src/hooks/use-widget-settings.ts
|
|
118
136
|
var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
|
|
119
137
|
|
|
@@ -149,16 +167,8 @@ var updateSettings = ({ id, props }) => {
|
|
|
149
167
|
});
|
|
150
168
|
};
|
|
151
169
|
|
|
152
|
-
// src/
|
|
153
|
-
var
|
|
154
|
-
function useControl(defaultValue) {
|
|
155
|
-
const controlContext = (0, import_react2.useContext)(ControlContext);
|
|
156
|
-
if (!controlContext) {
|
|
157
|
-
throw new Error("useControl must be used within a ControlContext");
|
|
158
|
-
}
|
|
159
|
-
return { ...controlContext, value: controlContext.value ?? defaultValue };
|
|
160
|
-
}
|
|
161
|
-
var ControlContextProvider = ({ bind, children }) => {
|
|
170
|
+
// src/components/controls/settings-control.tsx
|
|
171
|
+
var SettingsControlProvider = ({ bind, children }) => {
|
|
162
172
|
const { element } = useElementContext();
|
|
163
173
|
const value = useWidgetSettings({ id: element.id, bind });
|
|
164
174
|
const setValue = (newValue) => {
|
|
@@ -171,29 +181,58 @@ var ControlContextProvider = ({ bind, children }) => {
|
|
|
171
181
|
};
|
|
172
182
|
return /* @__PURE__ */ React2.createElement(ControlContext.Provider, { value: { setValue, value, bind } }, children);
|
|
173
183
|
};
|
|
184
|
+
var SettingsControl = ({ children, bind }) => /* @__PURE__ */ React2.createElement(SettingsControlProvider, { bind }, /* @__PURE__ */ React2.createElement(StyledStack, { gap: 1, direction: "row", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap" }, children));
|
|
185
|
+
var StyledStack = (0, import_ui.styled)(import_ui.Stack)`
|
|
186
|
+
& > * {
|
|
187
|
+
flex-grow: 1;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
& > label {
|
|
191
|
+
min-width: 50%;
|
|
192
|
+
}
|
|
193
|
+
`;
|
|
194
|
+
var Label = ({ children }) => {
|
|
195
|
+
return /* @__PURE__ */ React2.createElement(import_ui.Typography, { component: "label", variant: "caption" }, children);
|
|
196
|
+
};
|
|
197
|
+
SettingsControl.Label = Label;
|
|
198
|
+
|
|
199
|
+
// src/components/controls/collapsible-section.tsx
|
|
200
|
+
var React3 = __toESM(require("react"));
|
|
201
|
+
var import_react3 = require("react");
|
|
202
|
+
var import_ui2 = require("@elementor/ui");
|
|
203
|
+
var CollapsibleSection = ({ title, children }) => {
|
|
204
|
+
const uid = (0, import_react3.useId)();
|
|
205
|
+
const labelId = `label-${uid}`;
|
|
206
|
+
const contentId = `content-${uid}`;
|
|
207
|
+
return /* @__PURE__ */ React3.createElement(import_ui2.Accordion, { disableGutters: true, defaultExpanded: true }, /* @__PURE__ */ React3.createElement(import_ui2.AccordionSummary, { "aria-controls": contentId, id: labelId }, /* @__PURE__ */ React3.createElement(import_ui2.AccordionSummaryText, { primaryTypographyProps: { variant: "caption" } }, title)), /* @__PURE__ */ React3.createElement(import_ui2.AccordionDetails, { id: contentId, "aria-labelledby": labelId }, /* @__PURE__ */ React3.createElement(import_ui2.Stack, { gap: 2.5 }, children)));
|
|
208
|
+
};
|
|
174
209
|
|
|
175
210
|
// src/components/controls/control-types/select-control.tsx
|
|
211
|
+
var React4 = __toESM(require("react"));
|
|
212
|
+
var import_ui3 = require("@elementor/ui");
|
|
176
213
|
var SelectControl = ({ options }) => {
|
|
177
214
|
const { value, setValue } = useControl();
|
|
178
215
|
const handleChange = (event) => {
|
|
179
216
|
setValue(event.target.value);
|
|
180
217
|
};
|
|
181
|
-
return /* @__PURE__ */
|
|
218
|
+
return /* @__PURE__ */ React4.createElement(import_ui3.Select, { size: "tiny", value: value ?? "", onChange: handleChange }, options.map(({ label, ...props }) => /* @__PURE__ */ React4.createElement(import_ui3.MenuItem, { key: props.value, ...props }, label)));
|
|
182
219
|
};
|
|
183
220
|
|
|
184
221
|
// src/components/controls/control-types/text-area-control.tsx
|
|
185
|
-
var
|
|
186
|
-
var
|
|
222
|
+
var React5 = __toESM(require("react"));
|
|
223
|
+
var import_ui4 = require("@elementor/ui");
|
|
187
224
|
var TextAreaControl = ({ placeholder }) => {
|
|
188
225
|
const { value, setValue } = useControl("");
|
|
189
226
|
const handleChange = (event) => {
|
|
190
227
|
setValue(event.target.value);
|
|
191
228
|
};
|
|
192
|
-
return /* @__PURE__ */
|
|
193
|
-
|
|
229
|
+
return /* @__PURE__ */ React5.createElement(
|
|
230
|
+
import_ui4.TextField,
|
|
194
231
|
{
|
|
195
232
|
size: "tiny",
|
|
196
|
-
|
|
233
|
+
multiline: true,
|
|
234
|
+
fullWidth: true,
|
|
235
|
+
rows: 5,
|
|
197
236
|
value,
|
|
198
237
|
onChange: handleChange,
|
|
199
238
|
placeholder
|
|
@@ -201,32 +240,109 @@ var TextAreaControl = ({ placeholder }) => {
|
|
|
201
240
|
);
|
|
202
241
|
};
|
|
203
242
|
|
|
204
|
-
// src/components/controls/
|
|
205
|
-
var
|
|
206
|
-
var
|
|
207
|
-
var
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
flexDirection: "row",
|
|
212
|
-
alignItems: "center",
|
|
213
|
-
justifyContent: "space-between",
|
|
214
|
-
flexWrap: "wrap",
|
|
215
|
-
sx: { px: 2 }
|
|
216
|
-
},
|
|
217
|
-
/* @__PURE__ */ React5.createElement(ControlContextProvider, { bind }, children)
|
|
218
|
-
);
|
|
219
|
-
var Label = ({ children }) => {
|
|
220
|
-
return /* @__PURE__ */ React5.createElement(import_ui3.Typography, { component: "label", variant: "caption" }, children);
|
|
243
|
+
// src/components/controls/control-types/text-control.tsx
|
|
244
|
+
var React6 = __toESM(require("react"));
|
|
245
|
+
var import_ui5 = require("@elementor/ui");
|
|
246
|
+
var TextControl = ({ placeholder }) => {
|
|
247
|
+
const { value, setValue } = useControl("");
|
|
248
|
+
const handleChange = (event) => setValue(event.target.value);
|
|
249
|
+
return /* @__PURE__ */ React6.createElement(import_ui5.TextField, { type: "text", size: "tiny", value, onChange: handleChange, placeholder });
|
|
221
250
|
};
|
|
222
|
-
SettingsControl.Label = Label;
|
|
223
251
|
|
|
224
|
-
// src/components/
|
|
225
|
-
var import_ui4 = require("@elementor/ui");
|
|
252
|
+
// src/components/controls/get-control-by-type.ts
|
|
226
253
|
var controlTypes = {
|
|
227
254
|
select: SelectControl,
|
|
255
|
+
text: TextControl,
|
|
228
256
|
textarea: TextAreaControl
|
|
229
257
|
};
|
|
258
|
+
var getControlByType = (type) => {
|
|
259
|
+
return controlTypes[type] ?? null;
|
|
260
|
+
};
|
|
261
|
+
|
|
262
|
+
// src/components/editing-panel/settings-tab.tsx
|
|
263
|
+
var SettingsTab = () => {
|
|
264
|
+
const { element } = useElementContext();
|
|
265
|
+
const elementType = useElementType(element?.type);
|
|
266
|
+
if (!elementType) {
|
|
267
|
+
return null;
|
|
268
|
+
}
|
|
269
|
+
return /* @__PURE__ */ React7.createElement(import_ui6.Stack, null, elementType.controls.map(({ type, value }, index) => {
|
|
270
|
+
if (type === "control") {
|
|
271
|
+
return /* @__PURE__ */ React7.createElement(Control, { key: value.bind, control: value });
|
|
272
|
+
}
|
|
273
|
+
if (type === "section") {
|
|
274
|
+
return /* @__PURE__ */ React7.createElement(CollapsibleSection, { key: type + "." + index, title: value.label }, value.items?.map((item) => {
|
|
275
|
+
if (item.type === "control") {
|
|
276
|
+
return /* @__PURE__ */ React7.createElement(Control, { key: item.value.bind, control: item.value });
|
|
277
|
+
}
|
|
278
|
+
return null;
|
|
279
|
+
}));
|
|
280
|
+
}
|
|
281
|
+
return null;
|
|
282
|
+
}));
|
|
283
|
+
};
|
|
284
|
+
var Control = ({ control }) => {
|
|
285
|
+
const ControlComponent = getControlByType(control.type);
|
|
286
|
+
if (!ControlComponent) {
|
|
287
|
+
return null;
|
|
288
|
+
}
|
|
289
|
+
return /* @__PURE__ */ React7.createElement(SettingsControl, { key: control.bind, bind: control.bind }, /* @__PURE__ */ React7.createElement(SettingsControl.Label, null, control.label), /* @__PURE__ */ React7.createElement(
|
|
290
|
+
ControlComponent,
|
|
291
|
+
{
|
|
292
|
+
...control.props
|
|
293
|
+
}
|
|
294
|
+
));
|
|
295
|
+
};
|
|
296
|
+
|
|
297
|
+
// src/components/editing-panel/style-tab.tsx
|
|
298
|
+
var React9 = __toESM(require("react"));
|
|
299
|
+
|
|
300
|
+
// src/contexts/style-context.tsx
|
|
301
|
+
var React8 = __toESM(require("react"));
|
|
302
|
+
var import_react4 = require("react");
|
|
303
|
+
var import_editor_responsive = require("@elementor/editor-responsive");
|
|
304
|
+
var Context2 = (0, import_react4.createContext)(null);
|
|
305
|
+
function StyleContext({ children, selectedStyleDef }) {
|
|
306
|
+
const breakpoint = (0, import_editor_responsive.useActiveBreakpoint)();
|
|
307
|
+
const selectedMeta = { breakpoint, state: null };
|
|
308
|
+
return /* @__PURE__ */ React8.createElement(Context2.Provider, { value: { selectedStyleDef, selectedMeta } }, children);
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
// src/hooks/use-element-styles.ts
|
|
312
|
+
var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
|
|
313
|
+
|
|
314
|
+
// src/sync/get-element-styles.ts
|
|
315
|
+
var getElementStyles = (elementID) => {
|
|
316
|
+
const container = getContainer(elementID);
|
|
317
|
+
return container?.model.get("styles") || null;
|
|
318
|
+
};
|
|
319
|
+
|
|
320
|
+
// src/hooks/use-element-styles.ts
|
|
321
|
+
var useElementStyles = (elementID) => {
|
|
322
|
+
return (0, import_editor_v1_adapters5.__privateUseListenTo)(
|
|
323
|
+
(0, import_editor_v1_adapters5.commandEndEvent)("document/atomic-widgets/styles"),
|
|
324
|
+
() => {
|
|
325
|
+
return getElementStyles(elementID);
|
|
326
|
+
},
|
|
327
|
+
[elementID]
|
|
328
|
+
);
|
|
329
|
+
};
|
|
330
|
+
|
|
331
|
+
// src/components/editing-panel/style-tab.tsx
|
|
332
|
+
var StyleTab = () => {
|
|
333
|
+
const selectedElementID = useElementContext().element.id;
|
|
334
|
+
const elementStyles = useElementStyles(selectedElementID);
|
|
335
|
+
const selectedStyleDef = elementStyles ? Object.values(elementStyles)[0] : null;
|
|
336
|
+
return /* @__PURE__ */ React9.createElement(StyleContext, { selectedStyleDef }, /* @__PURE__ */ React9.createElement("div", null, "Style Tab"));
|
|
337
|
+
};
|
|
338
|
+
|
|
339
|
+
// src/components/editing-panel/editing-panel-tabs.tsx
|
|
340
|
+
var EditingPanelTabs = () => {
|
|
341
|
+
const { getTabProps, getTabPanelProps, getTabsProps } = (0, import_ui7.useTabs)("settings");
|
|
342
|
+
return /* @__PURE__ */ React10.createElement(import_ui7.Stack, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React10.createElement(import_ui7.Tabs, { variant: "fullWidth", indicatorColor: "secondary", textColor: "inherit", ...getTabsProps() }, /* @__PURE__ */ React10.createElement(import_ui7.Tab, { label: (0, import_i18n.__)("General", "elementor"), ...getTabProps("settings") }), /* @__PURE__ */ React10.createElement(import_ui7.Tab, { label: (0, import_i18n.__)("Style", "elementor"), ...getTabProps("style") })), /* @__PURE__ */ React10.createElement(import_ui7.TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React10.createElement(SettingsTab, null)), /* @__PURE__ */ React10.createElement(import_ui7.TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React10.createElement(StyleTab, null)));
|
|
343
|
+
};
|
|
344
|
+
|
|
345
|
+
// src/components/editing-panel/editing-panel.tsx
|
|
230
346
|
var EditingPanel = () => {
|
|
231
347
|
const elements = useSelectedElements();
|
|
232
348
|
const [selectedElement] = elements;
|
|
@@ -234,22 +350,8 @@ var EditingPanel = () => {
|
|
|
234
350
|
if (elements.length !== 1 || !elementType) {
|
|
235
351
|
return null;
|
|
236
352
|
}
|
|
237
|
-
const panelTitle = (0,
|
|
238
|
-
return /* @__PURE__ */
|
|
239
|
-
if (control.type === "control") {
|
|
240
|
-
const ControlComponent = controlTypes[control.value.type];
|
|
241
|
-
if (!ControlComponent) {
|
|
242
|
-
return null;
|
|
243
|
-
}
|
|
244
|
-
return /* @__PURE__ */ React6.createElement(SettingsControl, { key: control.value.bind, bind: control.value.bind }, /* @__PURE__ */ React6.createElement(SettingsControl.Label, null, control.value.label), /* @__PURE__ */ React6.createElement(
|
|
245
|
-
ControlComponent,
|
|
246
|
-
{
|
|
247
|
-
...control.value.props
|
|
248
|
-
}
|
|
249
|
-
));
|
|
250
|
-
}
|
|
251
|
-
return null;
|
|
252
|
-
})))));
|
|
353
|
+
const panelTitle = (0, import_i18n2.__)("Edit %s", "elementor").replace("%s", elementType.title);
|
|
354
|
+
return /* @__PURE__ */ React11.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React11.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React11.createElement(import_editor_panels.PanelHeaderTitle, null, panelTitle)), /* @__PURE__ */ React11.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React11.createElement(ElementContext, { element: selectedElement }, /* @__PURE__ */ React11.createElement(EditingPanelTabs, null))));
|
|
253
355
|
};
|
|
254
356
|
|
|
255
357
|
// src/panel.ts
|
|
@@ -272,12 +374,12 @@ var shouldUseV2Panel = () => {
|
|
|
272
374
|
};
|
|
273
375
|
|
|
274
376
|
// src/hooks/use-open-editor-panel.ts
|
|
275
|
-
var
|
|
276
|
-
var
|
|
377
|
+
var import_react5 = require("react");
|
|
378
|
+
var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
|
|
277
379
|
var useOpenEditorPanel = () => {
|
|
278
380
|
const { open } = usePanelActions();
|
|
279
|
-
(0,
|
|
280
|
-
return (0,
|
|
381
|
+
(0, import_react5.useEffect)(() => {
|
|
382
|
+
return (0, import_editor_v1_adapters6.__privateListenTo)((0, import_editor_v1_adapters6.commandStartEvent)("panel/editor/open"), () => {
|
|
281
383
|
if (shouldUseV2Panel()) {
|
|
282
384
|
open();
|
|
283
385
|
}
|
|
@@ -285,7 +387,7 @@ var useOpenEditorPanel = () => {
|
|
|
285
387
|
}, []);
|
|
286
388
|
};
|
|
287
389
|
|
|
288
|
-
// src/components/editing-panel-hooks.tsx
|
|
390
|
+
// src/components/editing-panel/editing-panel-hooks.tsx
|
|
289
391
|
var EditingPanelHooks = () => {
|
|
290
392
|
useOpenEditorPanel();
|
|
291
393
|
return null;
|
|
@@ -293,7 +395,7 @@ var EditingPanelHooks = () => {
|
|
|
293
395
|
|
|
294
396
|
// src/init.ts
|
|
295
397
|
var import_editor_panels3 = require("@elementor/editor-panels");
|
|
296
|
-
var
|
|
398
|
+
var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
|
|
297
399
|
function init() {
|
|
298
400
|
(0, import_editor_panels3.__registerPanel)(panel);
|
|
299
401
|
blockV1Panel();
|
|
@@ -303,7 +405,7 @@ function init() {
|
|
|
303
405
|
});
|
|
304
406
|
}
|
|
305
407
|
var blockV1Panel = () => {
|
|
306
|
-
(0,
|
|
408
|
+
(0, import_editor_v1_adapters7.__privateBlockDataCommand)({
|
|
307
409
|
command: "panel/editor/open",
|
|
308
410
|
condition: shouldUseV2Panel
|
|
309
411
|
});
|
package/dist/index.js.map
CHANGED
|
@@ -1 +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/components/controls/control-types/select-control.tsx","../src/contexts/control-context.tsx","../src/contexts/element-context.tsx","../src/hooks/use-widget-settings.ts","../src/sync/get-container.ts","../src/sync/update-settings.ts","../src/components/controls/control-types/text-area-control.tsx","../src/components/controls/settings-control.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 { panel, usePanelActions, usePanelStatus } = 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 { TextAreaControl } from './controls/control-types/text-area-control';\nimport { SettingsControl } from '../components/controls/settings-control';\nimport { Stack } from '@elementor/ui';\nimport { ElementContext } from '../contexts/element-context';\n\nconst controlTypes = {\n\tselect: SelectControl,\n\ttextarea: TextAreaControl,\n};\n\nexport const EditingPanel = () => {\n\tconst elements = useSelectedElements();\n\n\tconst [ selectedElement ] = elements;\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{ elementType.controls.map( ( control ) => {\n\t\t\t\t\t\t\tif ( control.type === 'control' ) {\n\t\t\t\t\t\t\t\tconst ControlComponent =\n\t\t\t\t\t\t\t\t\tcontrolTypes[ control.value.type as keyof typeof controlTypes ];\n\n\t\t\t\t\t\t\t\tif ( ! ControlComponent ) {\n\t\t\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<SettingsControl key={ control.value.bind } bind={ control.value.bind }>\n\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<ControlComponent\n\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{ ...( control.value.props as any ) }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</SettingsControl>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn null;\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[ commandEndEvent( 'document/elements/select' ), commandEndEvent( 'document/elements/deselect' ) ],\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 '../../../contexts/control-context';\nimport { PropValue } from '../../../types';\n\ntype Props< T > = {\n\toptions: Array< { label: string; value: T; disabled?: boolean } >;\n};\n\nexport const SelectControl = < T extends PropValue >( { options }: Props< 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( ( { label, ...props } ) => (\n\t\t\t\t<MenuItem key={ props.value } { ...props }>\n\t\t\t\t\t{ label }\n\t\t\t\t</MenuItem>\n\t\t\t) ) }\n\t\t</Select>\n\t);\n};\n","import * as React from 'react';\nimport { createContext, useContext } from 'react';\nimport { PropKey, PropValue } from '../types';\nimport { useElementContext } from './element-context';\nimport { useWidgetSettings } from '../hooks/use-widget-settings';\nimport { updateSettings } from '../sync/update-settings';\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\ntype Props = {\n\tbind: PropKey;\n\tchildren: React.ReactNode;\n};\n\nexport const ControlContextProvider = ( { bind, children }: Props ) => {\n\tconst { element } = useElementContext();\n\tconst value = useWidgetSettings( { id: element.id, bind } );\n\n\tconst setValue = ( newValue: PropValue ) => {\n\t\tupdateSettings( {\n\t\t\tid: element.id,\n\t\t\tprops: {\n\t\t\t\t[ bind ]: newValue,\n\t\t\t},\n\t\t} );\n\t};\n\n\treturn <ControlContext.Provider value={ { setValue, value, bind } }>{ children }</ControlContext.Provider>;\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 <Context.Provider value={ { element } }>{ children }</Context.Provider>;\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 { 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[ id, bind ]\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 { __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 * as React from 'react';\nimport { TextareaAutosize } from '@elementor/ui';\nimport { useControl } from '../../../contexts/control-context';\n\ntype Props = {\n\tplaceholder?: string;\n};\n\nexport const TextAreaControl = ( { placeholder }: Props ) => {\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\n\t\t\tsize=\"tiny\"\n\t\t\tminRows={ 3 }\n\t\t\tvalue={ value }\n\t\t\tonChange={ handleChange }\n\t\t\tplaceholder={ placeholder }\n\t\t/>\n\t);\n};\n","import * as React from 'react';\nimport { ControlContextProvider } from '../../contexts/control-context';\nimport { Stack, Typography } from '@elementor/ui';\nimport { PropKey } from '../../types';\n\ntype Props = {\n\tbind: PropKey;\n\tchildren: React.ReactNode;\n};\n\nconst SettingsControl = ( { children, bind }: Props ) => (\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<ControlContextProvider bind={ bind }>{ children }</ControlContextProvider>\n\t</Stack>\n);\n\nconst Label = ( { children }: { children: React.ReactNode } ) => {\n\treturn (\n\t\t<Typography component=\"label\" variant=\"caption\">\n\t\t\t{ children }\n\t\t</Typography>\n\t);\n};\n\nSettingsControl.Label = Label;\nexport { SettingsControl };\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( commandStartEvent( 'panel/editor/open' ), () => {\n\t\t\tif ( shouldUseV2Panel() ) {\n\t\t\t\topen();\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,IAAAA,wBAA6C;;;ACA7C,IAAAC,SAAuB;AACvB,kBAAmB;;;ACDnB,gCAAqE;;;ACGtD,SAAR,sBAAkD;AACxD,QAAM,iBAAiB;AAEvB,QAAM,mBAAmB,eAAe,WAAW,WAAW,cAAc,KAAK,CAAC;AAElF,SAAO,iBAAiB,OAAqB,CAAE,KAAK,OAAQ;AAC3D,UAAM,OAAO,GAAG,MAAM,IAAK,YAAa,KAAK,GAAG,MAAM,IAAK,QAAS;AAEpE,QAAK,MAAO;AACX,UAAI,KAAM;AAAA,QACT,IAAI,GAAG,MAAM,IAAK,IAAK;AAAA,QACvB;AAAA,MACD,CAAE;AAAA,IACH;AAEA,WAAO;AAAA,EACR,GAAG,CAAC,CAAE;AACP;;;ADjBe,SAAR,sBAAuC;AAC7C,aAAO,0BAAAC;AAAA,IACN,KAAE,2CAAiB,0BAA2B,OAAG,2CAAiB,4BAA6B,CAAE;AAAA,IACjG,MAAM,oBAAoB;AAAA,EAC3B;AACD;;;AERA,IAAAC,6BAAqE;;;ACEtD,SAAR,kBAAmC;AACzC,QAAM,iBAAiB;AAEvB,SAAO,gBAAgB,WAAW,gBAAgB;AACnD;;;ADFe,SAAR,eAAiC,MAAgB;AACvD,aAAO,2BAAAC;AAAA,QACN,4CAAiB,uBAAwB;AAAA,IACzC,MAA0B;AACzB,UAAK,CAAE,MAAO;AACb,eAAO;AAAA,MACR;AAEA,YAAM,eAAe,gBAAgB;AACrC,YAAM,cAAc,eAAgB,IAAK;AAEzC,UAAK,CAAE,aAAa,iBAAkB;AACrC,eAAO;AAAA,MACR;AAEA,aAAO;AAAA,QACN,KAAK;AAAA,QACL,UAAU,YAAY;AAAA,QACtB,OAAO,YAAY;AAAA,MACpB;AAAA,IACD;AAAA,IACA,CAAE,IAAK;AAAA,EACR;AACD;;;AHvBA,2BAAgE;;;AKJhE,IAAAC,SAAuB;AACvB,gBAAoD;;;ACDpD,IAAAC,SAAuB;AACvB,IAAAC,gBAA0C;;;ACD1C,YAAuB;AACvB,mBAAqD;AAOrD,IAAM,cAAU,4BAAsC,IAAK;AAOpD,SAAS,eAAgB,EAAE,UAAU,QAAQ,GAAW;AAC9D,SAAO,oCAAC,QAAQ,UAAR,EAAiB,OAAQ,EAAE,QAAQ,KAAM,QAAU;AAC5D;AAEO,SAAS,oBAAoB;AACnC,QAAM,cAAU,yBAAY,OAAQ;AAEpC,MAAK,CAAE,SAAU;AAChB,UAAM,IAAI,MAAO,gEAAiE;AAAA,EACnF;AAEA,SAAO;AACR;;;AC3BA,IAAAC,6BAAqE;;;ACEtD,SAAR,aAA+B,IAAa;AAClD,QAAM,iBAAiB;AACvB,QAAM,YAAY,eAAe,WAAW,eAAgB,EAAG;AAE/D,SAAO,aAAa;AACrB;;;ADHO,IAAM,oBAAoB,CAAE,EAAE,IAAI,KAAK,MAAgD;AAC7F,aAAO,2BAAAC;AAAA,QACN,4CAAiB,4BAA6B;AAAA,IAC9C,MAAM;AACL,YAAM,YAAY,aAAc,EAAG;AACnC,YAAM,QAAQ,WAAW,UAAU,IAAK,IAAK,KAAK;AAElD,aAAO;AAAA,IACR;AAAA,IACA,CAAE,IAAI,IAAK;AAAA,EACZ;AACD;;;AEfA,IAAAC,6BAAkD;AAI3C,IAAM,iBAAiB,CAAE,EAAE,IAAI,MAAM,MAAqC;AAChF,QAAM,YAAY,aAAc,EAAG;AAEnC,iCAAAC,qBAAY,8BAA8B;AAAA,IACzC;AAAA,IACA,UAAU;AAAA,MACT,GAAG;AAAA,IACJ;AAAA,EACD,CAAE;AACH;;;AJAO,IAAM,qBAAiB,6BAA8C,IAAK;AAE1E,SAAS,WAAmC,cAAmB;AACrE,QAAM,qBAAiB,0BAAmC,cAAwB;AAElF,MAAK,CAAE,gBAAiB;AACvB,UAAM,IAAI,MAAO,iDAAkD;AAAA,EACpE;AAEA,SAAO,EAAE,GAAG,gBAAgB,OAAO,eAAe,SAAS,aAAa;AACzE;AAOO,IAAM,yBAAyB,CAAE,EAAE,MAAM,SAAS,MAAc;AACtE,QAAM,EAAE,QAAQ,IAAI,kBAAkB;AACtC,QAAM,QAAQ,kBAAmB,EAAE,IAAI,QAAQ,IAAI,KAAK,CAAE;AAE1D,QAAM,WAAW,CAAE,aAAyB;AAC3C,mBAAgB;AAAA,MACf,IAAI,QAAQ;AAAA,MACZ,OAAO;AAAA,QACN,CAAE,IAAK,GAAG;AAAA,MACX;AAAA,IACD,CAAE;AAAA,EACH;AAEA,SAAO,qCAAC,eAAe,UAAf,EAAwB,OAAQ,EAAE,UAAU,OAAO,KAAK,KAAM,QAAU;AACjF;;;ADnCO,IAAM,gBAAgB,CAAyB,EAAE,QAAQ,MAAmB;AAClF,QAAM,EAAE,OAAO,SAAS,IAAI,WAAgB;AAE5C,QAAM,eAAe,CAAE,UAAmC;AACzD,aAAU,MAAM,OAAO,KAAW;AAAA,EACnC;AAEA,SACC,qCAAC,oBAAO,MAAK,QAAO,OAAQ,SAAS,IAAK,UAAW,gBAClD,QAAQ,IAAK,CAAE,EAAE,OAAO,GAAG,MAAM,MAClC,qCAAC,sBAAS,KAAM,MAAM,OAAU,GAAG,SAChC,KACH,CACC,CACH;AAEF;;;AMzBA,IAAAC,SAAuB;AACvB,IAAAC,aAAiC;AAO1B,IAAM,kBAAkB,CAAE,EAAE,YAAY,MAAc;AAC5D,QAAM,EAAE,OAAO,SAAS,IAAI,WAAsB,EAAG;AAErD,QAAM,eAAe,CAAE,UAAkD;AACxE,aAAU,MAAM,OAAO,KAAM;AAAA,EAC9B;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,MAAK;AAAA,MACL,SAAU;AAAA,MACV;AAAA,MACA,UAAW;AAAA,MACX;AAAA;AAAA,EACD;AAEF;;;ACxBA,IAAAC,SAAuB;AAEvB,IAAAC,aAAkC;AAQlC,IAAM,kBAAkB,CAAE,EAAE,UAAU,KAAK,MAC1C;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,EAEb,qCAAC,0BAAuB,QAAgB,QAAU;AACnD;AAGD,IAAM,QAAQ,CAAE,EAAE,SAAS,MAAsC;AAChE,SACC,qCAAC,yBAAW,WAAU,SAAQ,SAAQ,aACnC,QACH;AAEF;AAEA,gBAAgB,QAAQ;;;AZvBxB,IAAAC,aAAsB;AAGtB,IAAM,eAAe;AAAA,EACpB,QAAQ;AAAA,EACR,UAAU;AACX;AAEO,IAAM,eAAe,MAAM;AACjC,QAAM,WAAW,oBAAoB;AAErC,QAAM,CAAE,eAAgB,IAAI;AAE5B,QAAM,cAAc,eAAgB,iBAAiB,IAAK;AAE1D,MAAK,SAAS,WAAW,KAAK,CAAE,aAAc;AAC7C,WAAO;AAAA,EACR;AAGA,QAAM,iBAAa,gBAAI,WAAW,WAAY,EAAE,QAAS,MAAM,YAAY,KAAM;AAEjF,SACC,qCAAC,kCACA,qCAAC,wCACA,qCAAC,6CAAmB,UAAY,CACjC,GACA,qCAAC,sCACA,qCAAC,kBAAe,SAAU,mBACzB,qCAAC,oBAAM,SAAU,KACd,YAAY,SAAS,IAAK,CAAE,YAAa;AAC1C,QAAK,QAAQ,SAAS,WAAY;AACjC,YAAM,mBACL,aAAc,QAAQ,MAAM,IAAkC;AAE/D,UAAK,CAAE,kBAAmB;AACzB,eAAO;AAAA,MACR;AAEA,aACC,qCAAC,mBAAgB,KAAM,QAAQ,MAAM,MAAO,MAAO,QAAQ,MAAM,QAChE,qCAAC,gBAAgB,OAAhB,MAAwB,QAAQ,MAAM,KAAO,GAC9C;AAAA,QAAC;AAAA;AAAA,UAEE,GAAK,QAAQ,MAAM;AAAA;AAAA,MACtB,CACD;AAAA,IAEF;AAEA,WAAO;AAAA,EACR,CAAE,CACH,CACD,CACD,CACD;AAEF;;;AD9DO,IAAM,EAAE,OAAO,iBAAiB,eAAe,QAAI,sBAAAC,eAAa;AAAA,EACtE,IAAI;AAAA,EACJ,WAAW;AACZ,CAAE;;;AcLF,oBAAgC;;;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,IAAAC,gBAA0B;AAC1B,IAAAC,6BAAiE;AAI1D,IAAM,qBAAqB,MAAM;AACvC,QAAM,EAAE,KAAK,IAAI,gBAAgB;AAEjC,+BAAW,MAAM;AAChB,eAAO,2BAAAC,uBAAU,8CAAmB,mBAAoB,GAAG,MAAM;AAChE,UAAK,iBAAiB,GAAI;AACzB,aAAK;AAAA,MACN;AAAA,IACD,CAAE;AAAA,EACH,GAAG,CAAC,CAAE;AACP;;;ACbO,IAAM,oBAAoB,MAAM;AACtC,qBAAmB;AAEnB,SAAO;AACR;;;AHFA,IAAAC,wBAAiD;AACjD,IAAAC,6BAA8D;AAE/C,SAAR,OAAwB;AAC9B,4BAAAC,iBAAe,KAAM;AACrB,eAAa;AAEb,qCAAiB;AAAA,IAChB,IAAI;AAAA,IACJ,WAAW;AAAA,EACZ,CAAE;AACH;AAEA,IAAM,eAAe,MAAM;AAC1B,iCAAAC,2BAAkB;AAAA,IACjB,SAAS;AAAA,IACT,WAAW;AAAA,EACZ,CAAE;AACH;;;AIpBA,KAAK;","names":["import_editor_panels","React","useListenTo","import_editor_v1_adapters","useListenTo","React","React","import_react","import_editor_v1_adapters","useListenTo","import_editor_v1_adapters","runCommand","React","import_ui","React","import_ui","import_ui","createPanel","import_react","import_editor_v1_adapters","listenTo","import_editor_panels","import_editor_v1_adapters","registerPanel","blockDataCommand"]}
|
|
1
|
+
{"version":3,"sources":["../src/panel.ts","../src/components/editing-panel/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/element-context.tsx","../src/components/editing-panel/editing-panel-tabs.tsx","../src/components/editing-panel/settings-tab.tsx","../src/components/controls/settings-control.tsx","../src/contexts/control-context.tsx","../src/hooks/use-widget-settings.ts","../src/sync/get-container.ts","../src/sync/update-settings.ts","../src/components/controls/collapsible-section.tsx","../src/components/controls/control-types/select-control.tsx","../src/components/controls/control-types/text-area-control.tsx","../src/components/controls/control-types/text-control.tsx","../src/components/controls/get-control-by-type.ts","../src/components/editing-panel/style-tab.tsx","../src/contexts/style-context.tsx","../src/hooks/use-element-styles.ts","../src/sync/get-element-styles.ts","../src/init.ts","../src/sync/should-use-v2-panel.ts","../src/hooks/use-open-editor-panel.ts","../src/components/editing-panel/editing-panel-hooks.tsx","../src/index.ts"],"sourcesContent":["import { __createPanel as createPanel } from '@elementor/editor-panels';\nimport { EditingPanel } from './components/editing-panel/editing-panel';\n\nexport const { panel, usePanelActions, usePanelStatus } = 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 { ElementContext } from '../../contexts/element-context';\nimport { EditingPanelTabs } from './editing-panel-tabs';\n\nexport const EditingPanel = () => {\n\tconst elements = useSelectedElements();\n\n\tconst [ selectedElement ] = elements;\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<EditingPanelTabs />\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[ commandEndEvent( 'document/elements/select' ), commandEndEvent( 'document/elements/deselect' ) ],\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 <Context.Provider value={ { element } }>{ children }</Context.Provider>;\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 { Stack, Tabs, Tab, TabPanel, useTabs } from '@elementor/ui';\nimport * as React from 'react';\nimport { __ } from '@wordpress/i18n';\nimport { SettingsTab } from './settings-tab';\nimport { StyleTab } from './style-tab';\n\ntype TabValue = 'settings' | 'style';\n\nexport const EditingPanelTabs = () => {\n\tconst { getTabProps, getTabPanelProps, getTabsProps } = useTabs< TabValue >( 'settings' );\n\n\treturn (\n\t\t<Stack direction=\"column\" sx={ { width: '100%' } }>\n\t\t\t<Tabs variant=\"fullWidth\" indicatorColor=\"secondary\" textColor=\"inherit\" { ...getTabsProps() }>\n\t\t\t\t<Tab label={ __( 'General', 'elementor' ) } { ...getTabProps( 'settings' ) } />\n\t\t\t\t<Tab label={ __( 'Style', 'elementor' ) } { ...getTabProps( 'style' ) } />\n\t\t\t</Tabs>\n\t\t\t<TabPanel { ...getTabPanelProps( 'settings' ) } disablePadding>\n\t\t\t\t<SettingsTab />\n\t\t\t</TabPanel>\n\t\t\t<TabPanel { ...getTabPanelProps( 'style' ) } disablePadding>\n\t\t\t\t<StyleTab />\n\t\t\t</TabPanel>\n\t\t</Stack>\n\t);\n};\n","import * as React from 'react';\nimport { Stack } from '@elementor/ui';\nimport { SettingsControl } from '../controls/settings-control';\nimport { useElementContext } from '../../contexts/element-context';\nimport useElementType from '../../hooks/use-element-type';\nimport type { Control } from '../../types';\nimport { CollapsibleSection } from '../controls/collapsible-section';\nimport { getControlByType } from '../controls/get-control-by-type';\n\nexport const SettingsTab = () => {\n\tconst { element } = useElementContext();\n\n\tconst elementType = useElementType( element?.type );\n\n\tif ( ! elementType ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Stack>\n\t\t\t{ elementType.controls.map( ( { type, value }, index ) => {\n\t\t\t\tif ( type === 'control' ) {\n\t\t\t\t\treturn <Control key={ value.bind } control={ value } />;\n\t\t\t\t}\n\n\t\t\t\tif ( type === 'section' ) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<CollapsibleSection key={ type + '.' + index } title={ value.label }>\n\t\t\t\t\t\t\t{ value.items?.map( ( item ) => {\n\t\t\t\t\t\t\t\tif ( item.type === 'control' ) {\n\t\t\t\t\t\t\t\t\treturn <Control key={ item.value.bind } control={ item.value } />;\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t// TODO: Handle 2nd level sections\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</CollapsibleSection>\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\treturn null;\n\t\t\t} ) }\n\t\t</Stack>\n\t);\n};\n\n// TODO: Create control wrapper by type for different layouts.\nconst Control = ( { control }: { control: Control[ 'value' ] } ) => {\n\tconst ControlComponent = getControlByType( control.type );\n\n\tif ( ! ControlComponent ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<SettingsControl key={ control.bind } bind={ control.bind }>\n\t\t\t<SettingsControl.Label>{ control.label }</SettingsControl.Label>\n\t\t\t<ControlComponent\n\t\t\t\t/* eslint-disable-next-line @typescript-eslint/no-explicit-any */\n\t\t\t\t{ ...( control.props as any ) }\n\t\t\t/>\n\t\t</SettingsControl>\n\t);\n};\n","import * as React from 'react';\nimport { ControlContext } from '../../contexts/control-context';\nimport { Stack, styled, Typography } from '@elementor/ui';\nimport { PropKey, PropValue } from '../../types';\nimport { useElementContext } from '../../contexts/element-context';\nimport { useWidgetSettings } from '../../hooks/use-widget-settings';\nimport { updateSettings } from '../../sync/update-settings';\n\ntype Props = {\n\tbind: PropKey;\n\tchildren: React.ReactNode;\n};\n\nexport const SettingsControlProvider = ( { bind, children }: Props ) => {\n\tconst { element } = useElementContext();\n\tconst value = useWidgetSettings( { id: element.id, bind } );\n\n\tconst setValue = ( newValue: PropValue ) => {\n\t\tupdateSettings( {\n\t\t\tid: element.id,\n\t\t\tprops: {\n\t\t\t\t[ bind ]: newValue,\n\t\t\t},\n\t\t} );\n\t};\n\n\treturn <ControlContext.Provider value={ { setValue, value, bind } }>{ children }</ControlContext.Provider>;\n};\n\nconst SettingsControl = ( { children, bind }: Props ) => (\n\t<SettingsControlProvider bind={ bind }>\n\t\t<StyledStack gap={ 1 } direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" flexWrap=\"wrap\">\n\t\t\t{ children }\n\t\t</StyledStack>\n\t</SettingsControlProvider>\n);\n\nconst StyledStack = styled( Stack )`\n\t& > * {\n\t\tflex-grow: 1;\n\t}\n\n\t& > label {\n\t\tmin-width: 50%;\n\t}\n`;\n\nconst Label = ( { children }: { children: React.ReactNode } ) => {\n\treturn (\n\t\t<Typography component=\"label\" variant=\"caption\">\n\t\t\t{ children }\n\t\t</Typography>\n\t);\n};\n\nSettingsControl.Label = Label;\n\nexport { SettingsControl };\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 { 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[ id, bind ]\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 { __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 * as React from 'react';\nimport { useId } from 'react';\nimport { Accordion, AccordionSummary, AccordionDetails, AccordionSummaryText, Stack } from '@elementor/ui';\n\nexport type CollapsibleSectionProps = React.PropsWithChildren< {\n\ttitle: string;\n} >;\n\nexport const CollapsibleSection = ( { title, children }: CollapsibleSectionProps ) => {\n\tconst uid = useId();\n\tconst labelId = `label-${ uid }`;\n\tconst contentId = `content-${ uid }`;\n\n\t// TODO: Change to collapsible list item\n\treturn (\n\t\t<Accordion disableGutters defaultExpanded>\n\t\t\t<AccordionSummary aria-controls={ contentId } id={ labelId }>\n\t\t\t\t<AccordionSummaryText primaryTypographyProps={ { variant: 'caption' } }>{ title }</AccordionSummaryText>\n\t\t\t</AccordionSummary>\n\t\t\t<AccordionDetails id={ contentId } aria-labelledby={ labelId }>\n\t\t\t\t<Stack gap={ 2.5 }>{ children }</Stack>\n\t\t\t</AccordionDetails>\n\t\t</Accordion>\n\t);\n};\n","import * as React from 'react';\nimport { MenuItem, Select, SelectChangeEvent } from '@elementor/ui';\nimport { useControl } from '../../../contexts/control-context';\nimport { PropValue } from '../../../types';\n\ntype Props< T > = {\n\toptions: Array< { label: string; value: T; disabled?: boolean } >;\n};\n\nexport const SelectControl = < T extends PropValue >( { options }: Props< 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( ( { label, ...props } ) => (\n\t\t\t\t<MenuItem key={ props.value } { ...props }>\n\t\t\t\t\t{ label }\n\t\t\t\t</MenuItem>\n\t\t\t) ) }\n\t\t</Select>\n\t);\n};\n","import * as React from 'react';\nimport { TextField } from '@elementor/ui';\nimport { useControl } from '../../../contexts/control-context';\n\ntype Props = {\n\tplaceholder?: string;\n};\n\nexport const TextAreaControl = ( { placeholder }: Props ) => {\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<TextField\n\t\t\tsize=\"tiny\"\n\t\t\tmultiline\n\t\t\tfullWidth\n\t\t\trows={ 5 }\n\t\t\tvalue={ value }\n\t\t\tonChange={ handleChange }\n\t\t\tplaceholder={ placeholder }\n\t\t/>\n\t);\n};\n","import * as React from 'react';\nimport { TextField } from '@elementor/ui';\nimport { useControl } from '../../../contexts/control-context';\n\nexport const TextControl = ( { placeholder }: { placeholder?: string } ) => {\n\tconst { value, setValue } = useControl< string >( '' );\n\n\tconst handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => setValue( event.target.value );\n\n\treturn <TextField type=\"text\" size=\"tiny\" value={ value } onChange={ handleChange } placeholder={ placeholder } />;\n};\n","import { SelectControl } from './control-types/select-control';\nimport { TextAreaControl } from './control-types/text-area-control';\nimport { TextControl } from './control-types/text-control';\n\nconst controlTypes = {\n\tselect: SelectControl,\n\ttext: TextControl,\n\ttextarea: TextAreaControl,\n};\n\nexport const getControlByType = ( type: string ) => {\n\treturn controlTypes[ type as keyof typeof controlTypes ] ?? null;\n};\n","import * as React from 'react';\nimport { StyleContext } from '../../contexts/style-context';\nimport { useElementContext } from '../../contexts/element-context';\nimport { useElementStyles } from '../../hooks/use-element-styles';\n\nexport const StyleTab = () => {\n\tconst selectedElementID = useElementContext().element.id;\n\tconst elementStyles = useElementStyles( selectedElementID );\n\t// TODO: Handle selected style state.\n\tconst selectedStyleDef = elementStyles ? Object.values( elementStyles )[ 0 ] : null;\n\n\treturn (\n\t\t<StyleContext selectedStyleDef={ selectedStyleDef }>\n\t\t\t<div>Style Tab</div>\n\t\t</StyleContext>\n\t);\n};\n","import * as React from 'react';\nimport { createContext, ReactNode, useContext } from 'react';\nimport { StyleDefinition, StyleDefMeta } from '../types';\nimport { useActiveBreakpoint } from '@elementor/editor-responsive';\n\ntype ContextValue = {\n\tselectedStyleDef: StyleDefinition | null;\n\tselectedMeta: StyleDefMeta;\n};\n\nconst Context = createContext< ContextValue | null >( null );\n\ntype Props = {\n\tchildren: ReactNode;\n\tselectedStyleDef: StyleDefinition | null;\n};\n\nexport function StyleContext( { children, selectedStyleDef }: Props ) {\n\tconst breakpoint = useActiveBreakpoint();\n\t// TODO: Handle state when we support it.\n\tconst selectedMeta = { breakpoint, state: null } as const;\n\n\treturn <Context.Provider value={ { selectedStyleDef, selectedMeta } }>{ children }</Context.Provider>;\n}\n\nexport function useStyleContext() {\n\tconst context = useContext( Context );\n\n\tif ( ! context ) {\n\t\tthrow new Error( 'UseStyleContext must be used within a StyleContextProvider' );\n\t}\n\n\treturn context;\n}\n","import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\nimport { getElementStyles } from '../sync/get-element-styles';\nimport { ElementID } from '../types';\n\nexport const useElementStyles = ( elementID: ElementID ) => {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'document/atomic-widgets/styles' ),\n\t\t() => {\n\t\t\treturn getElementStyles( elementID );\n\t\t},\n\t\t[ elementID ]\n\t);\n};\n","import getContainer from './get-container';\nimport { ElementID, StyleDefinition } from '../types';\n\nexport const getElementStyles = ( elementID: ElementID ): Record< string, StyleDefinition > | null => {\n\tconst container = getContainer( elementID );\n\n\treturn container?.model.get( 'styles' ) || null;\n};\n","import { panel } from './panel';\nimport { injectIntoLogic } from '@elementor/editor';\nimport { shouldUseV2Panel } from './sync/should-use-v2-panel';\nimport { EditingPanelHooks } from './components/editing-panel/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( commandStartEvent( 'panel/editor/open' ), () => {\n\t\t\tif ( shouldUseV2Panel() ) {\n\t\t\t\topen();\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","import_i18n","useListenTo","import_editor_v1_adapters","useListenTo","import_ui","React","React","import_ui","React","import_react","import_editor_v1_adapters","useListenTo","import_editor_v1_adapters","runCommand","React","import_react","import_ui","React","import_ui","React","import_ui","React","import_ui","React","React","import_react","Context","import_editor_v1_adapters","useListenTo","createPanel","import_react","import_editor_v1_adapters","listenTo","import_editor_panels","import_editor_v1_adapters","registerPanel","blockDataCommand"]}
|