@elementor/editor-controls 3.35.0-437 → 3.35.0-438
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/dist/index.d.mts +5 -2
- package/dist/index.d.ts +5 -2
- package/dist/index.js +81 -55
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +36 -11
- package/dist/index.mjs.map +1 -1
- package/package.json +15 -15
- package/src/controls/transform-control/transform-repeater-control.tsx +7 -1
- package/src/controls/transform-control/transform-settings-control.tsx +10 -4
- package/src/hooks/use-element-can-have-children.ts +17 -0
- package/src/index.ts +1 -0
package/dist/index.d.mts
CHANGED
|
@@ -341,9 +341,10 @@ declare const PositionControl: () => React$1.JSX.Element;
|
|
|
341
341
|
|
|
342
342
|
declare const TransformRepeaterControl: ControlComponent$1<() => React$1.JSX.Element>;
|
|
343
343
|
|
|
344
|
-
declare const TransformSettingsControl: ({ popupState, anchorRef, }: {
|
|
344
|
+
declare const TransformSettingsControl: ({ popupState, anchorRef, showChildrenPerspective, }: {
|
|
345
345
|
popupState: PopupState;
|
|
346
346
|
anchorRef: React$1.RefObject<HTMLDivElement | null>;
|
|
347
|
+
showChildrenPerspective: boolean;
|
|
347
348
|
}) => React$1.JSX.Element;
|
|
348
349
|
|
|
349
350
|
declare const TransitionRepeaterControl: ControlComponent$1<({ recentlyUsedListGetter, currentStyleState, }: {
|
|
@@ -655,4 +656,6 @@ type UseInternalStateOptions<TValue> = {
|
|
|
655
656
|
};
|
|
656
657
|
declare const useSyncExternalState: <TValue>({ external, setExternal, persistWhen, fallback, }: UseInternalStateOptions<TValue>) => readonly [TValue, (setter: ((value: TValue) => TValue) | TValue, options?: CreateOptions, meta?: SetValueMeta) => void];
|
|
657
658
|
|
|
658
|
-
|
|
659
|
+
declare const useElementCanHaveChildren: () => boolean;
|
|
660
|
+
|
|
661
|
+
export { type AdornmentComponent, type AngleUnit, AspectRatioControl, BackgroundControl, BoxShadowRepeaterControl, ClearIconButton, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent$1 as ControlComponent, ControlFormLabel, ControlReplacementsProvider, ControlToggleButtonGroup, DateTimeControl, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, FilterRepeaterControl, FloatingActionsBar, type FontCategory, FontFamilyControl, GapControl, HtmlTagControl, ImageControl, InlineEditingControl, InlineEditor, InlineEditorToolbar, ItemSelector, type ItemsActionPayload, KeyValueControl, type LengthUnit, LinkControl, LinkedDimensionsControl, NumberControl, PopoverContent, PopoverGridContainer, PositionControl, PropKeyProvider, PropProvider, type PropProviderProps, QueryControl, RepeatableControl, Repeater, type RepeaterItem, SelectControl, SelectControlWrapper, type SetRepeaterValuesMeta, type SetValue, type SetValueMeta, SizeControl, StrokeControl, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, type TimeUnit, type ToggleButtonGroupItem, ToggleButtonGroupUi, ToggleControl, type ToggleControlProps, TransformRepeaterControl, TransformSettingsControl, TransitionRepeaterControl, type Unit, UrlControl, createControl, createControlReplacementsRegistry, enqueueFont, injectIntoRepeaterItemActions, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, transitionProperties, transitionsItemsList, useBoundProp, useControlActions, useElementCanHaveChildren, useFloatingActionsBar, useSyncExternalState };
|
package/dist/index.d.ts
CHANGED
|
@@ -341,9 +341,10 @@ declare const PositionControl: () => React$1.JSX.Element;
|
|
|
341
341
|
|
|
342
342
|
declare const TransformRepeaterControl: ControlComponent$1<() => React$1.JSX.Element>;
|
|
343
343
|
|
|
344
|
-
declare const TransformSettingsControl: ({ popupState, anchorRef, }: {
|
|
344
|
+
declare const TransformSettingsControl: ({ popupState, anchorRef, showChildrenPerspective, }: {
|
|
345
345
|
popupState: PopupState;
|
|
346
346
|
anchorRef: React$1.RefObject<HTMLDivElement | null>;
|
|
347
|
+
showChildrenPerspective: boolean;
|
|
347
348
|
}) => React$1.JSX.Element;
|
|
348
349
|
|
|
349
350
|
declare const TransitionRepeaterControl: ControlComponent$1<({ recentlyUsedListGetter, currentStyleState, }: {
|
|
@@ -655,4 +656,6 @@ type UseInternalStateOptions<TValue> = {
|
|
|
655
656
|
};
|
|
656
657
|
declare const useSyncExternalState: <TValue>({ external, setExternal, persistWhen, fallback, }: UseInternalStateOptions<TValue>) => readonly [TValue, (setter: ((value: TValue) => TValue) | TValue, options?: CreateOptions, meta?: SetValueMeta) => void];
|
|
657
658
|
|
|
658
|
-
|
|
659
|
+
declare const useElementCanHaveChildren: () => boolean;
|
|
660
|
+
|
|
661
|
+
export { type AdornmentComponent, type AngleUnit, AspectRatioControl, BackgroundControl, BoxShadowRepeaterControl, ClearIconButton, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent$1 as ControlComponent, ControlFormLabel, ControlReplacementsProvider, ControlToggleButtonGroup, DateTimeControl, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, FilterRepeaterControl, FloatingActionsBar, type FontCategory, FontFamilyControl, GapControl, HtmlTagControl, ImageControl, InlineEditingControl, InlineEditor, InlineEditorToolbar, ItemSelector, type ItemsActionPayload, KeyValueControl, type LengthUnit, LinkControl, LinkedDimensionsControl, NumberControl, PopoverContent, PopoverGridContainer, PositionControl, PropKeyProvider, PropProvider, type PropProviderProps, QueryControl, RepeatableControl, Repeater, type RepeaterItem, SelectControl, SelectControlWrapper, type SetRepeaterValuesMeta, type SetValue, type SetValueMeta, SizeControl, StrokeControl, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, type TimeUnit, type ToggleButtonGroupItem, ToggleButtonGroupUi, ToggleControl, type ToggleControlProps, TransformRepeaterControl, TransformSettingsControl, TransitionRepeaterControl, type Unit, UrlControl, createControl, createControlReplacementsRegistry, enqueueFont, injectIntoRepeaterItemActions, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, transitionProperties, transitionsItemsList, useBoundProp, useControlActions, useElementCanHaveChildren, useFloatingActionsBar, useSyncExternalState };
|
package/dist/index.js
CHANGED
|
@@ -89,6 +89,7 @@ __export(index_exports, {
|
|
|
89
89
|
transitionsItemsList: () => transitionsItemsList,
|
|
90
90
|
useBoundProp: () => useBoundProp,
|
|
91
91
|
useControlActions: () => useControlActions,
|
|
92
|
+
useElementCanHaveChildren: () => useElementCanHaveChildren,
|
|
92
93
|
useFloatingActionsBar: () => useFloatingActionsBar,
|
|
93
94
|
useSyncExternalState: () => useSyncExternalState
|
|
94
95
|
});
|
|
@@ -4914,12 +4915,27 @@ var PositionControl = () => {
|
|
|
4914
4915
|
|
|
4915
4916
|
// src/controls/transform-control/transform-repeater-control.tsx
|
|
4916
4917
|
var React94 = __toESM(require("react"));
|
|
4917
|
-
var
|
|
4918
|
+
var import_react49 = require("react");
|
|
4918
4919
|
var import_editor_props45 = require("@elementor/editor-props");
|
|
4919
4920
|
var import_icons30 = require("@elementor/icons");
|
|
4920
4921
|
var import_ui80 = require("@elementor/ui");
|
|
4921
4922
|
var import_i18n46 = require("@wordpress/i18n");
|
|
4922
4923
|
|
|
4924
|
+
// src/hooks/use-element-can-have-children.ts
|
|
4925
|
+
var import_react43 = require("react");
|
|
4926
|
+
var import_editor_elements4 = require("@elementor/editor-elements");
|
|
4927
|
+
var useElementCanHaveChildren = () => {
|
|
4928
|
+
const { element } = (0, import_editor_elements4.useSelectedElement)();
|
|
4929
|
+
const elementId = element?.id || "";
|
|
4930
|
+
return (0, import_react43.useMemo)(() => {
|
|
4931
|
+
const container = (0, import_editor_elements4.getContainer)(elementId);
|
|
4932
|
+
if (!container) {
|
|
4933
|
+
return false;
|
|
4934
|
+
}
|
|
4935
|
+
return container.model.get("elType") !== "widget";
|
|
4936
|
+
}, [elementId]);
|
|
4937
|
+
};
|
|
4938
|
+
|
|
4923
4939
|
// src/controls/transform-control/initial-values.ts
|
|
4924
4940
|
var import_editor_props37 = require("@elementor/editor-props");
|
|
4925
4941
|
var TransformFunctionKeys = {
|
|
@@ -4973,7 +4989,7 @@ var import_i18n41 = require("@wordpress/i18n");
|
|
|
4973
4989
|
|
|
4974
4990
|
// src/controls/transform-control/functions/move.tsx
|
|
4975
4991
|
var React83 = __toESM(require("react"));
|
|
4976
|
-
var
|
|
4992
|
+
var import_react44 = require("react");
|
|
4977
4993
|
var import_editor_props38 = require("@elementor/editor-props");
|
|
4978
4994
|
var import_icons24 = require("@elementor/icons");
|
|
4979
4995
|
var import_ui69 = require("@elementor/ui");
|
|
@@ -5020,7 +5036,7 @@ var moveAxisControls = [
|
|
|
5020
5036
|
];
|
|
5021
5037
|
var Move = () => {
|
|
5022
5038
|
const context = useBoundProp(import_editor_props38.moveTransformPropTypeUtil);
|
|
5023
|
-
const rowRefs = [(0,
|
|
5039
|
+
const rowRefs = [(0, import_react44.useRef)(null), (0, import_react44.useRef)(null), (0, import_react44.useRef)(null)];
|
|
5024
5040
|
return /* @__PURE__ */ React83.createElement(import_ui69.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React83.createElement(PropProvider, { ...context }, /* @__PURE__ */ React83.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control, index) => /* @__PURE__ */ React83.createElement(
|
|
5025
5041
|
AxisRow,
|
|
5026
5042
|
{
|
|
@@ -5035,7 +5051,7 @@ var Move = () => {
|
|
|
5035
5051
|
|
|
5036
5052
|
// src/controls/transform-control/functions/rotate.tsx
|
|
5037
5053
|
var React84 = __toESM(require("react"));
|
|
5038
|
-
var
|
|
5054
|
+
var import_react45 = require("react");
|
|
5039
5055
|
var import_editor_props39 = require("@elementor/editor-props");
|
|
5040
5056
|
var import_icons25 = require("@elementor/icons");
|
|
5041
5057
|
var import_ui70 = require("@elementor/ui");
|
|
@@ -5060,7 +5076,7 @@ var rotateAxisControls = [
|
|
|
5060
5076
|
var rotateUnits = ["deg", "rad", "grad", "turn"];
|
|
5061
5077
|
var Rotate = () => {
|
|
5062
5078
|
const context = useBoundProp(import_editor_props39.rotateTransformPropTypeUtil);
|
|
5063
|
-
const rowRefs = [(0,
|
|
5079
|
+
const rowRefs = [(0, import_react45.useRef)(null), (0, import_react45.useRef)(null), (0, import_react45.useRef)(null)];
|
|
5064
5080
|
return /* @__PURE__ */ React84.createElement(import_ui70.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React84.createElement(PropProvider, { ...context }, /* @__PURE__ */ React84.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control, index) => /* @__PURE__ */ React84.createElement(
|
|
5065
5081
|
AxisRow,
|
|
5066
5082
|
{
|
|
@@ -5074,7 +5090,7 @@ var Rotate = () => {
|
|
|
5074
5090
|
|
|
5075
5091
|
// src/controls/transform-control/functions/scale.tsx
|
|
5076
5092
|
var React86 = __toESM(require("react"));
|
|
5077
|
-
var
|
|
5093
|
+
var import_react46 = require("react");
|
|
5078
5094
|
var import_editor_props40 = require("@elementor/editor-props");
|
|
5079
5095
|
var import_icons26 = require("@elementor/icons");
|
|
5080
5096
|
var import_ui72 = require("@elementor/ui");
|
|
@@ -5107,13 +5123,13 @@ var scaleAxisControls = [
|
|
|
5107
5123
|
];
|
|
5108
5124
|
var Scale = () => {
|
|
5109
5125
|
const context = useBoundProp(import_editor_props40.scaleTransformPropTypeUtil);
|
|
5110
|
-
const rowRefs = [(0,
|
|
5126
|
+
const rowRefs = [(0, import_react46.useRef)(null), (0, import_react46.useRef)(null), (0, import_react46.useRef)(null)];
|
|
5111
5127
|
return /* @__PURE__ */ React86.createElement(import_ui72.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React86.createElement(PropProvider, { ...context }, /* @__PURE__ */ React86.createElement(PropKeyProvider, { bind: TransformFunctionKeys.scale }, scaleAxisControls.map((control, index) => /* @__PURE__ */ React86.createElement(ScaleAxisRow, { key: control.bind, ...control, anchorRef: rowRefs[index] })))));
|
|
5112
5128
|
};
|
|
5113
5129
|
|
|
5114
5130
|
// src/controls/transform-control/functions/skew.tsx
|
|
5115
5131
|
var React87 = __toESM(require("react"));
|
|
5116
|
-
var
|
|
5132
|
+
var import_react47 = require("react");
|
|
5117
5133
|
var import_editor_props41 = require("@elementor/editor-props");
|
|
5118
5134
|
var import_icons27 = require("@elementor/icons");
|
|
5119
5135
|
var import_ui73 = require("@elementor/ui");
|
|
@@ -5133,7 +5149,7 @@ var skewAxisControls = [
|
|
|
5133
5149
|
var skewUnits = ["deg", "rad", "grad", "turn"];
|
|
5134
5150
|
var Skew = () => {
|
|
5135
5151
|
const context = useBoundProp(import_editor_props41.skewTransformPropTypeUtil);
|
|
5136
|
-
const rowRefs = [(0,
|
|
5152
|
+
const rowRefs = [(0, import_react47.useRef)(null), (0, import_react47.useRef)(null), (0, import_react47.useRef)(null)];
|
|
5137
5153
|
return /* @__PURE__ */ React87.createElement(import_ui73.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React87.createElement(PropProvider, { ...context }, /* @__PURE__ */ React87.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control, index) => /* @__PURE__ */ React87.createElement(
|
|
5138
5154
|
AxisRow,
|
|
5139
5155
|
{
|
|
@@ -5146,7 +5162,7 @@ var Skew = () => {
|
|
|
5146
5162
|
};
|
|
5147
5163
|
|
|
5148
5164
|
// src/controls/transform-control/use-transform-tabs-history.tsx
|
|
5149
|
-
var
|
|
5165
|
+
var import_react48 = require("react");
|
|
5150
5166
|
var import_editor_props42 = require("@elementor/editor-props");
|
|
5151
5167
|
var import_ui74 = require("@elementor/ui");
|
|
5152
5168
|
var useTransformTabsHistory = ({
|
|
@@ -5173,7 +5189,7 @@ var useTransformTabsHistory = ({
|
|
|
5173
5189
|
}
|
|
5174
5190
|
};
|
|
5175
5191
|
const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui74.useTabs)(getCurrentTransformType());
|
|
5176
|
-
const valuesHistory = (0,
|
|
5192
|
+
const valuesHistory = (0, import_react48.useRef)({
|
|
5177
5193
|
move: initialMove,
|
|
5178
5194
|
scale: initialScale,
|
|
5179
5195
|
rotate: initialRotate,
|
|
@@ -5389,7 +5405,8 @@ var ControlFields2 = ({ control }) => {
|
|
|
5389
5405
|
var SIZE7 = "tiny";
|
|
5390
5406
|
var TransformSettingsControl = ({
|
|
5391
5407
|
popupState,
|
|
5392
|
-
anchorRef
|
|
5408
|
+
anchorRef,
|
|
5409
|
+
showChildrenPerspective
|
|
5393
5410
|
}) => {
|
|
5394
5411
|
const popupProps = (0, import_ui79.bindPopover)({
|
|
5395
5412
|
...popupState,
|
|
@@ -5419,7 +5436,7 @@ var TransformSettingsControl = ({
|
|
|
5419
5436
|
}
|
|
5420
5437
|
),
|
|
5421
5438
|
/* @__PURE__ */ React93.createElement(import_ui79.Divider, null),
|
|
5422
|
-
/* @__PURE__ */ React93.createElement(PopoverContent, { sx: { px: 2, py: 1.5 } }, /* @__PURE__ */ React93.createElement(PropKeyProvider, { bind: "transform-origin" }, /* @__PURE__ */ React93.createElement(TransformOriginControl, null)), /* @__PURE__ */ React93.createElement(import_ui79.Box, { sx: { my: 0.5 } }, /* @__PURE__ */ React93.createElement(import_ui79.Divider, null)), /* @__PURE__ */ React93.createElement(ChildrenPerspectiveControl, null))
|
|
5439
|
+
/* @__PURE__ */ React93.createElement(PopoverContent, { sx: { px: 2, py: 1.5 } }, /* @__PURE__ */ React93.createElement(PropKeyProvider, { bind: "transform-origin" }, /* @__PURE__ */ React93.createElement(TransformOriginControl, null)), showChildrenPerspective && /* @__PURE__ */ React93.createElement(React93.Fragment, null, /* @__PURE__ */ React93.createElement(import_ui79.Box, { sx: { my: 0.5 } }, /* @__PURE__ */ React93.createElement(import_ui79.Divider, null)), /* @__PURE__ */ React93.createElement(ChildrenPerspectiveControl, null)))
|
|
5423
5440
|
);
|
|
5424
5441
|
};
|
|
5425
5442
|
|
|
@@ -5427,9 +5444,17 @@ var TransformSettingsControl = ({
|
|
|
5427
5444
|
var SIZE8 = "tiny";
|
|
5428
5445
|
var TransformRepeaterControl = createControl(() => {
|
|
5429
5446
|
const context = useBoundProp(import_editor_props45.transformPropTypeUtil);
|
|
5430
|
-
const headerRef = (0,
|
|
5447
|
+
const headerRef = (0, import_react49.useRef)(null);
|
|
5431
5448
|
const popupState = (0, import_ui80.usePopupState)({ variant: "popover" });
|
|
5432
|
-
|
|
5449
|
+
const showChildrenPerspective = useElementCanHaveChildren();
|
|
5450
|
+
return /* @__PURE__ */ React94.createElement(PropProvider, { ...context }, /* @__PURE__ */ React94.createElement(
|
|
5451
|
+
TransformSettingsControl,
|
|
5452
|
+
{
|
|
5453
|
+
popupState,
|
|
5454
|
+
anchorRef: headerRef,
|
|
5455
|
+
showChildrenPerspective
|
|
5456
|
+
}
|
|
5457
|
+
), /* @__PURE__ */ React94.createElement(PropKeyProvider, { bind: "transform-functions" }, /* @__PURE__ */ React94.createElement(Repeater2, { headerRef, propType: context.propType, popupState })));
|
|
5433
5458
|
});
|
|
5434
5459
|
var ToolTip = /* @__PURE__ */ React94.createElement(
|
|
5435
5460
|
import_ui80.Box,
|
|
@@ -5499,7 +5524,7 @@ var TransformBasePopoverTrigger = ({
|
|
|
5499
5524
|
|
|
5500
5525
|
// src/controls/transition-control/transition-repeater-control.tsx
|
|
5501
5526
|
var React97 = __toESM(require("react"));
|
|
5502
|
-
var
|
|
5527
|
+
var import_react52 = require("react");
|
|
5503
5528
|
var import_editor_props48 = require("@elementor/editor-props");
|
|
5504
5529
|
var import_icons32 = require("@elementor/icons");
|
|
5505
5530
|
var import_ui83 = require("@elementor/ui");
|
|
@@ -5507,15 +5532,15 @@ var import_i18n49 = require("@wordpress/i18n");
|
|
|
5507
5532
|
|
|
5508
5533
|
// src/controls/selection-size-control.tsx
|
|
5509
5534
|
var React95 = __toESM(require("react"));
|
|
5510
|
-
var
|
|
5535
|
+
var import_react50 = require("react");
|
|
5511
5536
|
var import_editor_props46 = require("@elementor/editor-props");
|
|
5512
5537
|
var import_ui81 = require("@elementor/ui");
|
|
5513
5538
|
var SelectionSizeControl = createControl(
|
|
5514
5539
|
({ selectionLabel, sizeLabel, selectionConfig, sizeConfigMap }) => {
|
|
5515
5540
|
const { value, setValue, propType } = useBoundProp(import_editor_props46.selectionSizePropTypeUtil);
|
|
5516
|
-
const rowRef = (0,
|
|
5541
|
+
const rowRef = (0, import_react50.useRef)(null);
|
|
5517
5542
|
const sizeFieldId = sizeLabel.replace(/\s+/g, "-").toLowerCase();
|
|
5518
|
-
const currentSizeConfig = (0,
|
|
5543
|
+
const currentSizeConfig = (0, import_react50.useMemo)(() => {
|
|
5519
5544
|
switch (value.selection.$$type) {
|
|
5520
5545
|
case "key-value":
|
|
5521
5546
|
return sizeConfigMap[value?.selection?.value.value.value || ""];
|
|
@@ -5564,7 +5589,7 @@ var transitionsItemsList = transitionProperties.map((category) => ({
|
|
|
5564
5589
|
}));
|
|
5565
5590
|
|
|
5566
5591
|
// src/controls/transition-control/trainsition-events.ts
|
|
5567
|
-
var
|
|
5592
|
+
var import_editor_elements5 = require("@elementor/editor-elements");
|
|
5568
5593
|
var import_mixpanel = require("@elementor/mixpanel");
|
|
5569
5594
|
var transitionRepeaterMixpanelEvent = {
|
|
5570
5595
|
eventName: "click_added_transition",
|
|
@@ -5576,7 +5601,7 @@ function subscribeToTransitionEvent() {
|
|
|
5576
5601
|
eventBus.subscribe("transition-item-added", (data) => {
|
|
5577
5602
|
const payload = data;
|
|
5578
5603
|
const value = payload?.itemValue?.selection?.value?.value?.value;
|
|
5579
|
-
const selectedElements = (0,
|
|
5604
|
+
const selectedElements = (0, import_editor_elements5.getSelectedElements)();
|
|
5580
5605
|
const widgetType = selectedElements[0]?.type ?? null;
|
|
5581
5606
|
(0, import_mixpanel.trackEvent)({
|
|
5582
5607
|
transition_type: value ?? "unknown",
|
|
@@ -5588,7 +5613,7 @@ function subscribeToTransitionEvent() {
|
|
|
5588
5613
|
|
|
5589
5614
|
// src/controls/transition-control/transition-selector.tsx
|
|
5590
5615
|
var React96 = __toESM(require("react"));
|
|
5591
|
-
var
|
|
5616
|
+
var import_react51 = require("react");
|
|
5592
5617
|
var import_editor_props47 = require("@elementor/editor-props");
|
|
5593
5618
|
var import_icons31 = require("@elementor/icons");
|
|
5594
5619
|
var import_ui82 = require("@elementor/ui");
|
|
@@ -5631,7 +5656,7 @@ var TransitionSelector = ({
|
|
|
5631
5656
|
const {
|
|
5632
5657
|
key: { value: transitionLabel }
|
|
5633
5658
|
} = value;
|
|
5634
|
-
const defaultRef = (0,
|
|
5659
|
+
const defaultRef = (0, import_react51.useRef)(null);
|
|
5635
5660
|
const popoverState = (0, import_ui82.usePopupState)({ variant: "popover" });
|
|
5636
5661
|
const getItemList = () => {
|
|
5637
5662
|
const recentItems = recentlyUsedList.map((item) => getTransitionPropertyByValue({ value: item, $$type: "string" })?.label).filter((item) => !!item);
|
|
@@ -5822,17 +5847,17 @@ var TransitionRepeaterControl = createControl(
|
|
|
5822
5847
|
currentStyleState
|
|
5823
5848
|
}) => {
|
|
5824
5849
|
const currentStyleIsNormal = currentStyleState === null;
|
|
5825
|
-
const [recentlyUsedList, setRecentlyUsedList] = (0,
|
|
5850
|
+
const [recentlyUsedList, setRecentlyUsedList] = (0, import_react52.useState)([]);
|
|
5826
5851
|
const { value, setValue } = useBoundProp(childArrayPropTypeUtil);
|
|
5827
|
-
const disabledItems = (0,
|
|
5828
|
-
const allowedTransitionSet = (0,
|
|
5852
|
+
const disabledItems = (0, import_react52.useMemo)(() => getDisabledItemLabels(value), [value]);
|
|
5853
|
+
const allowedTransitionSet = (0, import_react52.useMemo)(() => {
|
|
5829
5854
|
const set = /* @__PURE__ */ new Set();
|
|
5830
5855
|
transitionProperties.forEach((category) => {
|
|
5831
5856
|
category.properties.forEach((prop) => set.add(prop.value));
|
|
5832
5857
|
});
|
|
5833
5858
|
return set;
|
|
5834
5859
|
}, []);
|
|
5835
|
-
(0,
|
|
5860
|
+
(0, import_react52.useEffect)(() => {
|
|
5836
5861
|
if (!value || value.length === 0) {
|
|
5837
5862
|
return;
|
|
5838
5863
|
}
|
|
@@ -5844,10 +5869,10 @@ var TransitionRepeaterControl = createControl(
|
|
|
5844
5869
|
setValue(sanitized);
|
|
5845
5870
|
}
|
|
5846
5871
|
}, [allowedTransitionSet]);
|
|
5847
|
-
(0,
|
|
5872
|
+
(0, import_react52.useEffect)(() => {
|
|
5848
5873
|
recentlyUsedListGetter().then(setRecentlyUsedList);
|
|
5849
5874
|
}, [recentlyUsedListGetter]);
|
|
5850
|
-
const allPropertiesUsed = (0,
|
|
5875
|
+
const allPropertiesUsed = (0, import_react52.useMemo)(() => areAllPropertiesUsed(value), [value]);
|
|
5851
5876
|
const isAddItemDisabled = !currentStyleIsNormal || allPropertiesUsed;
|
|
5852
5877
|
return /* @__PURE__ */ React97.createElement(
|
|
5853
5878
|
RepeatableControl,
|
|
@@ -5954,7 +5979,7 @@ var import_ui88 = require("@elementor/ui");
|
|
|
5954
5979
|
|
|
5955
5980
|
// src/components/inline-editor.tsx
|
|
5956
5981
|
var React101 = __toESM(require("react"));
|
|
5957
|
-
var
|
|
5982
|
+
var import_react56 = require("react");
|
|
5958
5983
|
var import_ui87 = require("@elementor/ui");
|
|
5959
5984
|
var import_extension_bold = __toESM(require("@tiptap/extension-bold"));
|
|
5960
5985
|
var import_extension_document = __toESM(require("@tiptap/extension-document"));
|
|
@@ -5968,7 +5993,7 @@ var import_extension_subscript = __toESM(require("@tiptap/extension-subscript"))
|
|
|
5968
5993
|
var import_extension_superscript = __toESM(require("@tiptap/extension-superscript"));
|
|
5969
5994
|
var import_extension_text = __toESM(require("@tiptap/extension-text"));
|
|
5970
5995
|
var import_extension_underline = __toESM(require("@tiptap/extension-underline"));
|
|
5971
|
-
var
|
|
5996
|
+
var import_react57 = require("@tiptap/react");
|
|
5972
5997
|
|
|
5973
5998
|
// src/utils/inline-editing.ts
|
|
5974
5999
|
function isEmpty(value = "") {
|
|
@@ -5982,16 +6007,16 @@ function isEmpty(value = "") {
|
|
|
5982
6007
|
|
|
5983
6008
|
// src/components/inline-editor-toolbar.tsx
|
|
5984
6009
|
var React100 = __toESM(require("react"));
|
|
5985
|
-
var
|
|
5986
|
-
var
|
|
6010
|
+
var import_react54 = require("react");
|
|
6011
|
+
var import_editor_elements6 = require("@elementor/editor-elements");
|
|
5987
6012
|
var import_icons34 = require("@elementor/icons");
|
|
5988
6013
|
var import_ui86 = require("@elementor/ui");
|
|
5989
|
-
var
|
|
6014
|
+
var import_react55 = require("@tiptap/react");
|
|
5990
6015
|
var import_i18n51 = require("@wordpress/i18n");
|
|
5991
6016
|
|
|
5992
6017
|
// src/components/url-popover.tsx
|
|
5993
6018
|
var React99 = __toESM(require("react"));
|
|
5994
|
-
var
|
|
6019
|
+
var import_react53 = require("react");
|
|
5995
6020
|
var import_icons33 = require("@elementor/icons");
|
|
5996
6021
|
var import_ui85 = require("@elementor/ui");
|
|
5997
6022
|
var import_i18n50 = require("@wordpress/i18n");
|
|
@@ -6004,8 +6029,8 @@ var UrlPopover = ({
|
|
|
6004
6029
|
openInNewTab,
|
|
6005
6030
|
onToggleNewTab
|
|
6006
6031
|
}) => {
|
|
6007
|
-
const inputRef = (0,
|
|
6008
|
-
(0,
|
|
6032
|
+
const inputRef = (0, import_react53.useRef)(null);
|
|
6033
|
+
(0, import_react53.useEffect)(() => {
|
|
6009
6034
|
if (popupState.isOpen) {
|
|
6010
6035
|
requestAnimationFrame(() => inputRef.current?.focus());
|
|
6011
6036
|
}
|
|
@@ -6054,7 +6079,7 @@ var UrlPopover = ({
|
|
|
6054
6079
|
};
|
|
6055
6080
|
|
|
6056
6081
|
// src/components/inline-editor-toolbar.tsx
|
|
6057
|
-
var checkIfElementHasLink = (elementId) => !!(0,
|
|
6082
|
+
var checkIfElementHasLink = (elementId) => !!(0, import_editor_elements6.getElementSetting)(elementId, "link")?.value?.destination;
|
|
6058
6083
|
var toolbarButtons = {
|
|
6059
6084
|
clear: {
|
|
6060
6085
|
label: (0, import_i18n51.__)("Clear", "elementor"),
|
|
@@ -6122,16 +6147,16 @@ var toolbarButtons = {
|
|
|
6122
6147
|
var { clear: clearButton, ...formatButtons } = toolbarButtons;
|
|
6123
6148
|
var possibleFormats = Object.keys(formatButtons);
|
|
6124
6149
|
var InlineEditorToolbar = ({ editor, elementId }) => {
|
|
6125
|
-
const [urlValue, setUrlValue] = (0,
|
|
6126
|
-
const [openInNewTab, setOpenInNewTab] = (0,
|
|
6127
|
-
const toolbarRef = (0,
|
|
6150
|
+
const [urlValue, setUrlValue] = (0, import_react54.useState)("");
|
|
6151
|
+
const [openInNewTab, setOpenInNewTab] = (0, import_react54.useState)(false);
|
|
6152
|
+
const toolbarRef = (0, import_react54.useRef)(null);
|
|
6128
6153
|
const linkPopupState = (0, import_ui86.usePopupState)({ variant: "popover" });
|
|
6129
6154
|
const hasLinkOnElement = elementId ? checkIfElementHasLink(elementId) : false;
|
|
6130
|
-
const editorState = (0,
|
|
6155
|
+
const editorState = (0, import_react55.useEditorState)({
|
|
6131
6156
|
editor,
|
|
6132
6157
|
selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
|
|
6133
6158
|
});
|
|
6134
|
-
const formatButtonsList = (0,
|
|
6159
|
+
const formatButtonsList = (0, import_react54.useMemo)(() => {
|
|
6135
6160
|
const buttons = Object.values(formatButtons);
|
|
6136
6161
|
if (hasLinkOnElement) {
|
|
6137
6162
|
return buttons.filter((button) => button.action !== "link");
|
|
@@ -6249,8 +6274,8 @@ var BOLD_KEYBOARD_SHORTCUT = "b";
|
|
|
6249
6274
|
var UNDERLINE_KEYBOARD_SHORTCUT = "u";
|
|
6250
6275
|
var INITIAL_STYLE = "margin:0;padding:0;";
|
|
6251
6276
|
var useOnUpdate = (callback, dependencies) => {
|
|
6252
|
-
const hasMounted = (0,
|
|
6253
|
-
(0,
|
|
6277
|
+
const hasMounted = (0, import_react56.useRef)(false);
|
|
6278
|
+
(0, import_react56.useEffect)(() => {
|
|
6254
6279
|
if (hasMounted.current) {
|
|
6255
6280
|
callback();
|
|
6256
6281
|
} else {
|
|
@@ -6284,7 +6309,7 @@ var Wrapper = ({ children, containerRef, editor, sx, onBlur }) => {
|
|
|
6284
6309
|
wrappedChildren
|
|
6285
6310
|
) : /* @__PURE__ */ React101.createElement(React101.Fragment, null, wrappedChildren);
|
|
6286
6311
|
};
|
|
6287
|
-
var InlineEditor = (0,
|
|
6312
|
+
var InlineEditor = (0, import_react56.forwardRef)(
|
|
6288
6313
|
({
|
|
6289
6314
|
value,
|
|
6290
6315
|
setValue,
|
|
@@ -6298,11 +6323,11 @@ var InlineEditor = (0, import_react55.forwardRef)(
|
|
|
6298
6323
|
expectedTag = null,
|
|
6299
6324
|
elementId = void 0
|
|
6300
6325
|
}, ref) => {
|
|
6301
|
-
const containerRef = (0,
|
|
6326
|
+
const containerRef = (0, import_react56.useRef)(null);
|
|
6302
6327
|
const popupState = (0, import_ui87.usePopupState)({ variant: "popover", disableAutoFocus: true });
|
|
6303
|
-
const [hasSelectedContent, setHasSelectedContent] = (0,
|
|
6328
|
+
const [hasSelectedContent, setHasSelectedContent] = (0, import_react56.useState)(false);
|
|
6304
6329
|
const documentContentSettings = !!expectedTag ? "block+" : "inline*";
|
|
6305
|
-
const [selectionRect, setSelectionRect] = (0,
|
|
6330
|
+
const [selectionRect, setSelectionRect] = (0, import_react56.useState)(null);
|
|
6306
6331
|
const onSelectionEnd = (view) => {
|
|
6307
6332
|
const hasSelection = !view.state.selection.empty;
|
|
6308
6333
|
setHasSelectedContent(hasSelection);
|
|
@@ -6334,7 +6359,7 @@ var InlineEditor = (0, import_react55.forwardRef)(
|
|
|
6334
6359
|
const newValue = updatedEditor.getHTML();
|
|
6335
6360
|
setValue(isEmpty(newValue) ? null : newValue);
|
|
6336
6361
|
};
|
|
6337
|
-
const editor = (0,
|
|
6362
|
+
const editor = (0, import_react57.useEditor)({
|
|
6338
6363
|
extensions: [
|
|
6339
6364
|
import_extension_document.default.extend({
|
|
6340
6365
|
content: documentContentSettings
|
|
@@ -6413,7 +6438,7 @@ var InlineEditor = (0, import_react55.forwardRef)(
|
|
|
6413
6438
|
top: container.top + selectionRect.top + initial.top
|
|
6414
6439
|
};
|
|
6415
6440
|
};
|
|
6416
|
-
return /* @__PURE__ */ React101.createElement(React101.Fragment, null, /* @__PURE__ */ React101.createElement(Wrapper, { containerRef, editor, sx, onBlur }, /* @__PURE__ */ React101.createElement(
|
|
6441
|
+
return /* @__PURE__ */ React101.createElement(React101.Fragment, null, /* @__PURE__ */ React101.createElement(Wrapper, { containerRef, editor, sx, onBlur }, /* @__PURE__ */ React101.createElement(import_react57.EditorContent, { ref, editor })), showToolbar && containerRef.current && /* @__PURE__ */ React101.createElement(
|
|
6417
6442
|
import_ui87.Popover,
|
|
6418
6443
|
{
|
|
6419
6444
|
slotProps: {
|
|
@@ -6495,7 +6520,7 @@ var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /*
|
|
|
6495
6520
|
|
|
6496
6521
|
// src/components/repeater/repeater.tsx
|
|
6497
6522
|
var React104 = __toESM(require("react"));
|
|
6498
|
-
var
|
|
6523
|
+
var import_react58 = require("react");
|
|
6499
6524
|
var import_icons36 = require("@elementor/icons");
|
|
6500
6525
|
var import_ui90 = require("@elementor/ui");
|
|
6501
6526
|
var import_i18n52 = require("@wordpress/i18n");
|
|
@@ -6516,7 +6541,7 @@ var Repeater3 = ({
|
|
|
6516
6541
|
openItem: initialOpenItem = EMPTY_OPEN_ITEM2,
|
|
6517
6542
|
isSortable = true
|
|
6518
6543
|
}) => {
|
|
6519
|
-
const [openItem, setOpenItem] = (0,
|
|
6544
|
+
const [openItem, setOpenItem] = (0, import_react58.useState)(initialOpenItem);
|
|
6520
6545
|
const uniqueKeys = items2.map(
|
|
6521
6546
|
(item, index) => isSortable && "getId" in itemSettings ? itemSettings.getId({ item, index }) : String(index)
|
|
6522
6547
|
);
|
|
@@ -6672,10 +6697,10 @@ var RepeaterItem = ({
|
|
|
6672
6697
|
), /* @__PURE__ */ React104.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React104.createElement(import_ui90.Box, null, children({ anchorEl: ref }))));
|
|
6673
6698
|
};
|
|
6674
6699
|
var usePopover = (openOnMount, onOpen) => {
|
|
6675
|
-
const [ref, setRef] = (0,
|
|
6700
|
+
const [ref, setRef] = (0, import_react58.useState)(null);
|
|
6676
6701
|
const popoverState = (0, import_ui90.usePopupState)({ variant: "popover" });
|
|
6677
6702
|
const popoverProps = (0, import_ui90.bindPopover)(popoverState);
|
|
6678
|
-
(0,
|
|
6703
|
+
(0, import_react58.useEffect)(() => {
|
|
6679
6704
|
if (openOnMount && ref) {
|
|
6680
6705
|
popoverState.open(ref);
|
|
6681
6706
|
onOpen?.();
|
|
@@ -6749,6 +6774,7 @@ var usePopover = (openOnMount, onOpen) => {
|
|
|
6749
6774
|
transitionsItemsList,
|
|
6750
6775
|
useBoundProp,
|
|
6751
6776
|
useControlActions,
|
|
6777
|
+
useElementCanHaveChildren,
|
|
6752
6778
|
useFloatingActionsBar,
|
|
6753
6779
|
useSyncExternalState
|
|
6754
6780
|
});
|