@elementor/editor-components 3.35.0-420 → 3.35.0-422
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.js +397 -298
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +322 -212
- package/dist/index.mjs.map +1 -1
- package/package.json +22 -22
- package/src/components/components-tab/angie-promotion-modal.tsx +72 -0
- package/src/components/components-tab/components-list.tsx +91 -32
- package/src/components/components-tab/components.tsx +14 -2
- package/src/store/actions/rename-component.ts +42 -0
package/dist/index.js
CHANGED
|
@@ -37,14 +37,14 @@ module.exports = __toCommonJS(index_exports);
|
|
|
37
37
|
// src/init.ts
|
|
38
38
|
var import_editor = require("@elementor/editor");
|
|
39
39
|
var import_editor_canvas9 = require("@elementor/editor-canvas");
|
|
40
|
-
var
|
|
40
|
+
var import_editor_documents13 = require("@elementor/editor-documents");
|
|
41
41
|
var import_editor_editing_panel8 = require("@elementor/editor-editing-panel");
|
|
42
42
|
var import_editor_elements_panel = require("@elementor/editor-elements-panel");
|
|
43
43
|
var import_editor_panels4 = require("@elementor/editor-panels");
|
|
44
44
|
var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
|
|
45
45
|
var import_editor_v1_adapters10 = require("@elementor/editor-v1-adapters");
|
|
46
46
|
var import_store78 = require("@elementor/store");
|
|
47
|
-
var
|
|
47
|
+
var import_i18n27 = require("@wordpress/i18n");
|
|
48
48
|
|
|
49
49
|
// src/component-instance-transformer.ts
|
|
50
50
|
var import_editor_canvas = require("@elementor/editor-canvas");
|
|
@@ -1635,9 +1635,17 @@ function getComponentName() {
|
|
|
1635
1635
|
}
|
|
1636
1636
|
|
|
1637
1637
|
// src/components/components-tab/components.tsx
|
|
1638
|
-
var
|
|
1638
|
+
var React17 = __toESM(require("react"));
|
|
1639
1639
|
var import_editor_ui7 = require("@elementor/editor-ui");
|
|
1640
1640
|
|
|
1641
|
+
// src/hooks/use-components.ts
|
|
1642
|
+
var import_store27 = require("@elementor/store");
|
|
1643
|
+
var useComponents = () => {
|
|
1644
|
+
const components = (0, import_store27.__useSelector)(selectComponents);
|
|
1645
|
+
const isLoading = (0, import_store27.__useSelector)(selectLoadIsPending);
|
|
1646
|
+
return { components, isLoading };
|
|
1647
|
+
};
|
|
1648
|
+
|
|
1641
1649
|
// src/components/components-tab/component-search.tsx
|
|
1642
1650
|
var React12 = __toESM(require("react"));
|
|
1643
1651
|
var import_icons8 = require("@elementor/icons");
|
|
@@ -1687,60 +1695,27 @@ var ComponentSearch = () => {
|
|
|
1687
1695
|
};
|
|
1688
1696
|
|
|
1689
1697
|
// src/components/components-tab/components-list.tsx
|
|
1690
|
-
var
|
|
1698
|
+
var React16 = __toESM(require("react"));
|
|
1699
|
+
var import_react9 = require("react");
|
|
1700
|
+
var import_editor_mcp = require("@elementor/editor-mcp");
|
|
1691
1701
|
var import_icons10 = require("@elementor/icons");
|
|
1692
|
-
var
|
|
1693
|
-
var
|
|
1694
|
-
|
|
1695
|
-
// src/hooks/use-components.ts
|
|
1696
|
-
var import_store27 = require("@elementor/store");
|
|
1697
|
-
var useComponents = () => {
|
|
1698
|
-
const components = (0, import_store27.__useSelector)(selectComponents);
|
|
1699
|
-
const isLoading = (0, import_store27.__useSelector)(selectLoadIsPending);
|
|
1700
|
-
return { components, isLoading };
|
|
1701
|
-
};
|
|
1702
|
+
var import_ui15 = require("@elementor/ui");
|
|
1703
|
+
var import_i18n17 = require("@wordpress/i18n");
|
|
1702
1704
|
|
|
1703
1705
|
// src/store/actions/rename-component.ts
|
|
1704
|
-
var
|
|
1705
|
-
var
|
|
1706
|
-
|
|
1707
|
-
};
|
|
1708
|
-
|
|
1709
|
-
// src/components/components-tab/components-item.tsx
|
|
1710
|
-
var React13 = __toESM(require("react"));
|
|
1711
|
-
var import_react8 = require("react");
|
|
1712
|
-
var import_editor_canvas5 = require("@elementor/editor-canvas");
|
|
1713
|
-
var import_editor_elements7 = require("@elementor/editor-elements");
|
|
1714
|
-
var import_editor_ui6 = require("@elementor/editor-ui");
|
|
1715
|
-
var import_icons9 = require("@elementor/icons");
|
|
1716
|
-
var import_ui12 = require("@elementor/ui");
|
|
1717
|
-
var import_i18n15 = require("@wordpress/i18n");
|
|
1718
|
-
|
|
1719
|
-
// src/store/actions/archive-component.ts
|
|
1720
|
-
var import_editor_documents6 = require("@elementor/editor-documents");
|
|
1721
|
-
var import_store31 = require("@elementor/store");
|
|
1722
|
-
var archiveComponent = (componentId) => {
|
|
1723
|
-
const store = (0, import_store31.__getStore)();
|
|
1724
|
-
const dispatch18 = store?.dispatch;
|
|
1725
|
-
if (!dispatch18) {
|
|
1726
|
-
return;
|
|
1727
|
-
}
|
|
1728
|
-
dispatch18(slice.actions.archive(componentId));
|
|
1729
|
-
(0, import_editor_documents6.setDocumentModifiedStatus)(true);
|
|
1730
|
-
};
|
|
1731
|
-
|
|
1732
|
-
// src/store/actions/load-components-assets.ts
|
|
1733
|
-
var import_editor_documents8 = require("@elementor/editor-documents");
|
|
1706
|
+
var import_editor_documents7 = require("@elementor/editor-documents");
|
|
1707
|
+
var import_editor_elements5 = require("@elementor/editor-elements");
|
|
1708
|
+
var import_store33 = require("@elementor/store");
|
|
1734
1709
|
|
|
1735
1710
|
// src/create-component-type.ts
|
|
1736
1711
|
var import_editor_canvas4 = require("@elementor/editor-canvas");
|
|
1737
|
-
var
|
|
1738
|
-
var
|
|
1712
|
+
var import_editor_documents6 = require("@elementor/editor-documents");
|
|
1713
|
+
var import_store31 = require("@elementor/store");
|
|
1739
1714
|
var import_i18n13 = require("@wordpress/i18n");
|
|
1740
1715
|
|
|
1741
1716
|
// src/utils/tracking.ts
|
|
1742
1717
|
var import_mixpanel = require("@elementor/mixpanel");
|
|
1743
|
-
var
|
|
1718
|
+
var import_store29 = require("@elementor/store");
|
|
1744
1719
|
var trackComponentEvent = ({ action, ...data }) => {
|
|
1745
1720
|
const { dispatchEvent, config } = (0, import_mixpanel.getMixpanel)();
|
|
1746
1721
|
if (!config?.names?.components?.[action]) {
|
|
@@ -1757,7 +1732,7 @@ var onElementDrop = (_args, element) => {
|
|
|
1757
1732
|
const componentName = editorSettings?.title;
|
|
1758
1733
|
const componentUID = editorSettings?.component_uid;
|
|
1759
1734
|
const instanceId = element.id;
|
|
1760
|
-
const createdThisSession = selectCreatedThisSession((0,
|
|
1735
|
+
const createdThisSession = selectCreatedThisSession((0, import_store29.__getState)());
|
|
1761
1736
|
const isSameSessionReuse = componentUID && createdThisSession.includes(componentUID);
|
|
1762
1737
|
const eventsManagerConfig = window.elementorCommon.eventsManager.config;
|
|
1763
1738
|
const { locations, secondaryLocations } = eventsManagerConfig;
|
|
@@ -1810,7 +1785,7 @@ function createComponentView(options) {
|
|
|
1810
1785
|
eventsManagerConfig = this.legacyWindow.elementorCommon.eventsManager.config;
|
|
1811
1786
|
#componentRenderContext;
|
|
1812
1787
|
isComponentCurrentlyEdited() {
|
|
1813
|
-
const currentDocument = (0,
|
|
1788
|
+
const currentDocument = (0, import_editor_documents6.getCurrentDocument)();
|
|
1814
1789
|
return currentDocument?.id === this.getComponentId();
|
|
1815
1790
|
}
|
|
1816
1791
|
getRenderContext() {
|
|
@@ -1983,7 +1958,7 @@ function createComponentModel() {
|
|
|
1983
1958
|
}
|
|
1984
1959
|
const componentUid = editorSettings?.component_uid;
|
|
1985
1960
|
if (componentUid) {
|
|
1986
|
-
const component = selectComponentByUid((0,
|
|
1961
|
+
const component = selectComponentByUid((0, import_store31.__getState)(), componentUid);
|
|
1987
1962
|
if (component?.name) {
|
|
1988
1963
|
return component.name;
|
|
1989
1964
|
}
|
|
@@ -2003,6 +1978,98 @@ function createComponentModel() {
|
|
|
2003
1978
|
});
|
|
2004
1979
|
}
|
|
2005
1980
|
|
|
1981
|
+
// src/store/actions/rename-component.ts
|
|
1982
|
+
var TITLE_EXTERNAL_CHANGE_COMMAND = "title_external_change";
|
|
1983
|
+
var renameComponent = (componentUid, newName) => {
|
|
1984
|
+
(0, import_store33.__dispatch)(slice.actions.rename({ componentUid, name: newName }));
|
|
1985
|
+
(0, import_editor_documents7.setDocumentModifiedStatus)(true);
|
|
1986
|
+
refreshComponentInstanceTitles(componentUid);
|
|
1987
|
+
};
|
|
1988
|
+
function refreshComponentInstanceTitles(componentUid) {
|
|
1989
|
+
const documentContainer = getDocumentContainer();
|
|
1990
|
+
if (!documentContainer) {
|
|
1991
|
+
return;
|
|
1992
|
+
}
|
|
1993
|
+
const componentInstances = findComponentInstancesByUid(documentContainer, componentUid);
|
|
1994
|
+
componentInstances.forEach((element) => {
|
|
1995
|
+
element.model.trigger?.(TITLE_EXTERNAL_CHANGE_COMMAND);
|
|
1996
|
+
});
|
|
1997
|
+
}
|
|
1998
|
+
function getDocumentContainer() {
|
|
1999
|
+
const documentsManager = (0, import_editor_documents7.getV1DocumentsManager)();
|
|
2000
|
+
return documentsManager?.getCurrent()?.container;
|
|
2001
|
+
}
|
|
2002
|
+
function findComponentInstancesByUid(documentContainer, componentUid) {
|
|
2003
|
+
const allDescendants = (0, import_editor_elements5.getAllDescendants)(documentContainer);
|
|
2004
|
+
return allDescendants.filter((element) => {
|
|
2005
|
+
const widgetType = element.model.get("widgetType");
|
|
2006
|
+
const editorSettings = element.model.get("editor_settings");
|
|
2007
|
+
const isMatch = widgetType === COMPONENT_WIDGET_TYPE && editorSettings?.component_uid === componentUid;
|
|
2008
|
+
return isMatch;
|
|
2009
|
+
});
|
|
2010
|
+
}
|
|
2011
|
+
|
|
2012
|
+
// src/components/components-tab/angie-promotion-modal.tsx
|
|
2013
|
+
var React13 = __toESM(require("react"));
|
|
2014
|
+
var import_ui12 = require("@elementor/ui");
|
|
2015
|
+
var import_i18n14 = require("@wordpress/i18n");
|
|
2016
|
+
var ANGIE_INSTALL_URL = "/wp-admin/plugin-install.php?tab=plugin-information&plugin=angie";
|
|
2017
|
+
var PLACEHOLDER_IMAGE_URL = "https://assets.elementor.com/packages/v1/images/components-angie-promo.svg";
|
|
2018
|
+
var AngiePromotionModal = ({ children, open, onClose }) => {
|
|
2019
|
+
return /* @__PURE__ */ React13.createElement(import_ui12.Infotip, { placement: "right-end", arrow: true, content: /* @__PURE__ */ React13.createElement(AngiePromotionCard, { onClose }), open }, children);
|
|
2020
|
+
};
|
|
2021
|
+
function AngiePromotionCard({ onClose }) {
|
|
2022
|
+
const handleCtaClick = () => {
|
|
2023
|
+
window.open(ANGIE_INSTALL_URL, "_blank");
|
|
2024
|
+
onClose();
|
|
2025
|
+
};
|
|
2026
|
+
return /* @__PURE__ */ React13.createElement(import_ui12.ClickAwayListener, { disableReactTree: true, mouseEvent: "onMouseDown", touchEvent: "onTouchStart", onClickAway: onClose }, /* @__PURE__ */ React13.createElement(import_ui12.Card, { elevation: 0, sx: { maxWidth: 296 } }, /* @__PURE__ */ React13.createElement(
|
|
2027
|
+
import_ui12.CardHeader,
|
|
2028
|
+
{
|
|
2029
|
+
title: (0, import_i18n14.__)("Add new component with AI", "elementor"),
|
|
2030
|
+
titleTypographyProps: { variant: "subtitle2" },
|
|
2031
|
+
action: /* @__PURE__ */ React13.createElement(import_ui12.CloseButton, { slotProps: { icon: { fontSize: "tiny" } }, onClick: onClose })
|
|
2032
|
+
}
|
|
2033
|
+
), /* @__PURE__ */ React13.createElement(
|
|
2034
|
+
import_ui12.CardMedia,
|
|
2035
|
+
{
|
|
2036
|
+
component: "img",
|
|
2037
|
+
image: PLACEHOLDER_IMAGE_URL,
|
|
2038
|
+
alt: "",
|
|
2039
|
+
sx: { width: "100%", aspectRatio: "16 / 9" }
|
|
2040
|
+
}
|
|
2041
|
+
), /* @__PURE__ */ React13.createElement(import_ui12.CardContent, null, /* @__PURE__ */ React13.createElement(import_ui12.Typography, { variant: "body2", color: "text.secondary" }, (0, import_i18n14.__)(
|
|
2042
|
+
"Angie our AI assistant can easily create new components and save you the hassle of doing it yourself",
|
|
2043
|
+
"elementor"
|
|
2044
|
+
))), /* @__PURE__ */ React13.createElement(import_ui12.CardActions, { sx: { justifyContent: "flex-end" } }, /* @__PURE__ */ React13.createElement(import_ui12.Button, { size: "medium", variant: "contained", color: "accent", onClick: handleCtaClick }, (0, import_i18n14.__)("Get Angie", "elementor")))));
|
|
2045
|
+
}
|
|
2046
|
+
|
|
2047
|
+
// src/components/components-tab/components-item.tsx
|
|
2048
|
+
var React14 = __toESM(require("react"));
|
|
2049
|
+
var import_react8 = require("react");
|
|
2050
|
+
var import_editor_canvas5 = require("@elementor/editor-canvas");
|
|
2051
|
+
var import_editor_elements8 = require("@elementor/editor-elements");
|
|
2052
|
+
var import_editor_ui6 = require("@elementor/editor-ui");
|
|
2053
|
+
var import_icons9 = require("@elementor/icons");
|
|
2054
|
+
var import_ui13 = require("@elementor/ui");
|
|
2055
|
+
var import_i18n16 = require("@wordpress/i18n");
|
|
2056
|
+
|
|
2057
|
+
// src/store/actions/archive-component.ts
|
|
2058
|
+
var import_editor_documents8 = require("@elementor/editor-documents");
|
|
2059
|
+
var import_store35 = require("@elementor/store");
|
|
2060
|
+
var archiveComponent = (componentId) => {
|
|
2061
|
+
const store = (0, import_store35.__getStore)();
|
|
2062
|
+
const dispatch18 = store?.dispatch;
|
|
2063
|
+
if (!dispatch18) {
|
|
2064
|
+
return;
|
|
2065
|
+
}
|
|
2066
|
+
dispatch18(slice.actions.archive(componentId));
|
|
2067
|
+
(0, import_editor_documents8.setDocumentModifiedStatus)(true);
|
|
2068
|
+
};
|
|
2069
|
+
|
|
2070
|
+
// src/store/actions/load-components-assets.ts
|
|
2071
|
+
var import_editor_documents9 = require("@elementor/editor-documents");
|
|
2072
|
+
|
|
2006
2073
|
// src/utils/is-component-instance.ts
|
|
2007
2074
|
function isComponentInstance(elementModel) {
|
|
2008
2075
|
return [elementModel.widgetType, elementModel.elType].includes(COMPONENT_WIDGET_TYPE);
|
|
@@ -2102,9 +2169,9 @@ async function updateDocumentState(componentIds) {
|
|
|
2102
2169
|
const components = (await Promise.all(componentIds.map(getComponentDocumentData))).filter(
|
|
2103
2170
|
(document) => !!document
|
|
2104
2171
|
);
|
|
2105
|
-
const isDrafted = components.some(
|
|
2172
|
+
const isDrafted = components.some(import_editor_documents9.isDocumentDirty);
|
|
2106
2173
|
if (isDrafted) {
|
|
2107
|
-
(0,
|
|
2174
|
+
(0, import_editor_documents9.setDocumentModifiedStatus)(true);
|
|
2108
2175
|
}
|
|
2109
2176
|
}
|
|
2110
2177
|
|
|
@@ -2113,14 +2180,14 @@ var import_store41 = require("@elementor/store");
|
|
|
2113
2180
|
|
|
2114
2181
|
// src/components/create-component-form/utils/component-form-schema.ts
|
|
2115
2182
|
var import_schema = require("@elementor/schema");
|
|
2116
|
-
var
|
|
2183
|
+
var import_i18n15 = require("@wordpress/i18n");
|
|
2117
2184
|
var MIN_NAME_LENGTH = 2;
|
|
2118
2185
|
var MAX_NAME_LENGTH = 50;
|
|
2119
|
-
var baseComponentSchema = import_schema.z.string().trim().max(MAX_NAME_LENGTH, (0,
|
|
2186
|
+
var baseComponentSchema = import_schema.z.string().trim().max(MAX_NAME_LENGTH, (0, import_i18n15.__)("Component name is too long. Please keep it under 50 characters.", "elementor"));
|
|
2120
2187
|
var createBaseComponentSchema = (existingNames) => {
|
|
2121
2188
|
return import_schema.z.object({
|
|
2122
2189
|
componentName: baseComponentSchema.refine((value) => !existingNames.includes(value), {
|
|
2123
|
-
message: (0,
|
|
2190
|
+
message: (0, import_i18n15.__)("Component name already exists", "elementor")
|
|
2124
2191
|
})
|
|
2125
2192
|
});
|
|
2126
2193
|
};
|
|
@@ -2128,9 +2195,9 @@ var createSubmitComponentSchema = (existingNames) => {
|
|
|
2128
2195
|
const baseSchema = createBaseComponentSchema(existingNames);
|
|
2129
2196
|
return baseSchema.extend({
|
|
2130
2197
|
componentName: baseSchema.shape.componentName.refine((value) => value.length > 0, {
|
|
2131
|
-
message: (0,
|
|
2198
|
+
message: (0, import_i18n15.__)("Component name is required.", "elementor")
|
|
2132
2199
|
}).refine((value) => value.length >= MIN_NAME_LENGTH, {
|
|
2133
|
-
message: (0,
|
|
2200
|
+
message: (0, import_i18n15.__)("Component name is too short. Please enter at least 2 characters.", "elementor")
|
|
2134
2201
|
})
|
|
2135
2202
|
});
|
|
2136
2203
|
};
|
|
@@ -2155,9 +2222,9 @@ function validateComponentName(label) {
|
|
|
2155
2222
|
}
|
|
2156
2223
|
|
|
2157
2224
|
// src/utils/get-container-for-new-element.ts
|
|
2158
|
-
var
|
|
2225
|
+
var import_editor_elements6 = require("@elementor/editor-elements");
|
|
2159
2226
|
var getContainerForNewElement = () => {
|
|
2160
|
-
const currentDocumentContainer = (0,
|
|
2227
|
+
const currentDocumentContainer = (0, import_editor_elements6.getCurrentDocumentContainer)();
|
|
2161
2228
|
const selectedElement = getSelectedElementContainer();
|
|
2162
2229
|
let container, options;
|
|
2163
2230
|
if (selectedElement) {
|
|
@@ -2183,17 +2250,17 @@ var getContainerForNewElement = () => {
|
|
|
2183
2250
|
return { container: container ?? currentDocumentContainer, options };
|
|
2184
2251
|
};
|
|
2185
2252
|
function getSelectedElementContainer() {
|
|
2186
|
-
const selectedElements = (0,
|
|
2253
|
+
const selectedElements = (0, import_editor_elements6.getSelectedElements)();
|
|
2187
2254
|
if (selectedElements.length !== 1) {
|
|
2188
2255
|
return void 0;
|
|
2189
2256
|
}
|
|
2190
|
-
return (0,
|
|
2257
|
+
return (0, import_editor_elements6.getContainer)(selectedElements[0].id);
|
|
2191
2258
|
}
|
|
2192
2259
|
|
|
2193
2260
|
// src/components/create-component-form/utils/replace-element-with-component.ts
|
|
2194
|
-
var
|
|
2261
|
+
var import_editor_elements7 = require("@elementor/editor-elements");
|
|
2195
2262
|
var replaceElementWithComponent = async (element, component) => {
|
|
2196
|
-
return await (0,
|
|
2263
|
+
return await (0, import_editor_elements7.replaceElement)({
|
|
2197
2264
|
currentElement: element,
|
|
2198
2265
|
newElement: createComponentModel2(component),
|
|
2199
2266
|
withHistory: false
|
|
@@ -2236,7 +2303,7 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
|
|
|
2236
2303
|
validation: validateComponentTitle
|
|
2237
2304
|
});
|
|
2238
2305
|
const componentModel = createComponentModel2(component);
|
|
2239
|
-
const popupState = (0,
|
|
2306
|
+
const popupState = (0, import_ui13.usePopupState)({
|
|
2240
2307
|
variant: "popover",
|
|
2241
2308
|
disableAutoFocus: true
|
|
2242
2309
|
});
|
|
@@ -2254,7 +2321,7 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
|
|
|
2254
2321
|
}
|
|
2255
2322
|
archiveComponent(component.id);
|
|
2256
2323
|
};
|
|
2257
|
-
return /* @__PURE__ */
|
|
2324
|
+
return /* @__PURE__ */ React14.createElement(import_ui13.Stack, null, /* @__PURE__ */ React14.createElement(
|
|
2258
2325
|
import_editor_ui6.WarningInfotip,
|
|
2259
2326
|
{
|
|
2260
2327
|
open: Boolean(error),
|
|
@@ -2263,8 +2330,8 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
|
|
|
2263
2330
|
width: itemRef.current?.getBoundingClientRect().width,
|
|
2264
2331
|
offset: [0, -15]
|
|
2265
2332
|
},
|
|
2266
|
-
/* @__PURE__ */
|
|
2267
|
-
|
|
2333
|
+
/* @__PURE__ */ React14.createElement(
|
|
2334
|
+
import_ui13.ListItemButton,
|
|
2268
2335
|
{
|
|
2269
2336
|
draggable: true,
|
|
2270
2337
|
onDragStart: (event) => (0, import_editor_canvas5.startDragElementFromPanel)(componentModel, event),
|
|
@@ -2282,8 +2349,8 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
|
|
|
2282
2349
|
gap: 1
|
|
2283
2350
|
}
|
|
2284
2351
|
},
|
|
2285
|
-
/* @__PURE__ */
|
|
2286
|
-
|
|
2352
|
+
/* @__PURE__ */ React14.createElement(
|
|
2353
|
+
import_ui13.Box,
|
|
2287
2354
|
{
|
|
2288
2355
|
display: "flex",
|
|
2289
2356
|
alignItems: "center",
|
|
@@ -2292,31 +2359,31 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
|
|
|
2292
2359
|
flexGrow: 1,
|
|
2293
2360
|
onClick: handleClick
|
|
2294
2361
|
},
|
|
2295
|
-
/* @__PURE__ */
|
|
2296
|
-
/* @__PURE__ */
|
|
2362
|
+
/* @__PURE__ */ React14.createElement(import_ui13.ListItemIcon, { size: "tiny" }, /* @__PURE__ */ React14.createElement(import_icons9.ComponentsIcon, { fontSize: "tiny" })),
|
|
2363
|
+
/* @__PURE__ */ React14.createElement(Indicator, { isActive: isEditing, isError: !!error }, /* @__PURE__ */ React14.createElement(import_ui13.Box, { display: "flex", flex: 1, minWidth: 0, flexGrow: 1 }, isEditing ? /* @__PURE__ */ React14.createElement(
|
|
2297
2364
|
import_editor_ui6.EditableField,
|
|
2298
2365
|
{
|
|
2299
2366
|
ref: editableRef,
|
|
2300
|
-
as:
|
|
2367
|
+
as: import_ui13.Typography,
|
|
2301
2368
|
variant: "caption",
|
|
2302
2369
|
...getEditableProps()
|
|
2303
2370
|
}
|
|
2304
|
-
) : /* @__PURE__ */
|
|
2371
|
+
) : /* @__PURE__ */ React14.createElement(
|
|
2305
2372
|
import_editor_ui6.EllipsisWithTooltip,
|
|
2306
2373
|
{
|
|
2307
2374
|
title: component.name,
|
|
2308
|
-
as:
|
|
2375
|
+
as: import_ui13.Typography,
|
|
2309
2376
|
variant: "caption",
|
|
2310
2377
|
color: "text.primary"
|
|
2311
2378
|
}
|
|
2312
2379
|
)))
|
|
2313
2380
|
),
|
|
2314
|
-
/* @__PURE__ */
|
|
2381
|
+
/* @__PURE__ */ React14.createElement(import_ui13.IconButton, { size: "tiny", ...(0, import_ui13.bindTrigger)(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React14.createElement(import_icons9.DotsVerticalIcon, { fontSize: "tiny" }))
|
|
2315
2382
|
)
|
|
2316
|
-
), /* @__PURE__ */
|
|
2317
|
-
|
|
2383
|
+
), /* @__PURE__ */ React14.createElement(
|
|
2384
|
+
import_ui13.Menu,
|
|
2318
2385
|
{
|
|
2319
|
-
...(0,
|
|
2386
|
+
...(0, import_ui13.bindMenu)(popupState),
|
|
2320
2387
|
anchorOrigin: {
|
|
2321
2388
|
vertical: "bottom",
|
|
2322
2389
|
horizontal: "right"
|
|
@@ -2326,7 +2393,7 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
|
|
|
2326
2393
|
horizontal: "right"
|
|
2327
2394
|
}
|
|
2328
2395
|
},
|
|
2329
|
-
/* @__PURE__ */
|
|
2396
|
+
/* @__PURE__ */ React14.createElement(
|
|
2330
2397
|
import_editor_ui6.MenuListItem,
|
|
2331
2398
|
{
|
|
2332
2399
|
sx: { minWidth: "160px" },
|
|
@@ -2335,9 +2402,9 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
|
|
|
2335
2402
|
openEditMode();
|
|
2336
2403
|
}
|
|
2337
2404
|
},
|
|
2338
|
-
(0,
|
|
2405
|
+
(0, import_i18n16.__)("Rename", "elementor")
|
|
2339
2406
|
),
|
|
2340
|
-
/* @__PURE__ */
|
|
2407
|
+
/* @__PURE__ */ React14.createElement(import_editor_ui6.MenuListItem, { sx: { minWidth: "160px" }, onClick: handleArchiveClick }, /* @__PURE__ */ React14.createElement(import_ui13.Typography, { variant: "caption", sx: { color: "error.light" } }, (0, import_i18n16.__)("Archive", "elementor")))
|
|
2341
2408
|
));
|
|
2342
2409
|
};
|
|
2343
2410
|
var addComponentToPage = (model) => {
|
|
@@ -2346,7 +2413,7 @@ var addComponentToPage = (model) => {
|
|
|
2346
2413
|
throw new Error(`Can't find container to drop new component instance at`);
|
|
2347
2414
|
}
|
|
2348
2415
|
loadComponentsAssets([model]);
|
|
2349
|
-
(0,
|
|
2416
|
+
(0, import_editor_elements8.dropElement)({
|
|
2350
2417
|
containerId: container.id,
|
|
2351
2418
|
model,
|
|
2352
2419
|
options: { ...options, useHistory: false, scrollIntoView: true }
|
|
@@ -2359,7 +2426,7 @@ var validateComponentTitle = (newTitle) => {
|
|
|
2359
2426
|
}
|
|
2360
2427
|
return result.errorMessage;
|
|
2361
2428
|
};
|
|
2362
|
-
var Indicator = (0,
|
|
2429
|
+
var Indicator = (0, import_ui13.styled)(import_ui13.Box, {
|
|
2363
2430
|
shouldForwardProp: (prop) => prop !== "isActive" && prop !== "isError"
|
|
2364
2431
|
})(({ theme, isActive, isError }) => ({
|
|
2365
2432
|
display: "flex",
|
|
@@ -2382,13 +2449,13 @@ var getIndicatorBorder = ({ isActive, isError, theme }) => {
|
|
|
2382
2449
|
};
|
|
2383
2450
|
|
|
2384
2451
|
// src/components/components-tab/loading-components.tsx
|
|
2385
|
-
var
|
|
2386
|
-
var
|
|
2452
|
+
var React15 = __toESM(require("react"));
|
|
2453
|
+
var import_ui14 = require("@elementor/ui");
|
|
2387
2454
|
var ROWS_COUNT = 6;
|
|
2388
2455
|
var rows = Array.from({ length: ROWS_COUNT }, (_, index) => index);
|
|
2389
2456
|
var LoadingComponents = () => {
|
|
2390
|
-
return /* @__PURE__ */
|
|
2391
|
-
|
|
2457
|
+
return /* @__PURE__ */ React15.createElement(
|
|
2458
|
+
import_ui14.Stack,
|
|
2392
2459
|
{
|
|
2393
2460
|
"aria-label": "Loading components",
|
|
2394
2461
|
gap: 1,
|
|
@@ -2409,32 +2476,37 @@ var LoadingComponents = () => {
|
|
|
2409
2476
|
}
|
|
2410
2477
|
}
|
|
2411
2478
|
},
|
|
2412
|
-
rows.map((row) => /* @__PURE__ */
|
|
2413
|
-
|
|
2479
|
+
rows.map((row) => /* @__PURE__ */ React15.createElement(
|
|
2480
|
+
import_ui14.ListItemButton,
|
|
2414
2481
|
{
|
|
2415
2482
|
key: row,
|
|
2416
2483
|
sx: { border: "solid 1px", borderColor: "divider", py: 0.5, px: 1 },
|
|
2417
2484
|
shape: "rounded"
|
|
2418
2485
|
},
|
|
2419
|
-
/* @__PURE__ */
|
|
2486
|
+
/* @__PURE__ */ React15.createElement(import_ui14.Box, { display: "flex", gap: 1, width: "100%" }, /* @__PURE__ */ React15.createElement(import_ui14.Skeleton, { variant: "text", width: "24px", height: "36px" }), /* @__PURE__ */ React15.createElement(import_ui14.Skeleton, { variant: "text", width: "100%", height: "36px" }))
|
|
2420
2487
|
))
|
|
2421
2488
|
);
|
|
2422
2489
|
};
|
|
2423
2490
|
|
|
2424
2491
|
// src/components/components-tab/components-list.tsx
|
|
2492
|
+
var LEARN_MORE_URL = "http://go.elementor.com/components-guide-article";
|
|
2493
|
+
var SUBTITLE_OVERRIDE_SX = {
|
|
2494
|
+
fontSize: "0.875rem !important",
|
|
2495
|
+
fontWeight: "500 !important"
|
|
2496
|
+
};
|
|
2425
2497
|
function ComponentsList() {
|
|
2426
2498
|
const { components, isLoading, searchValue } = useFilteredComponents();
|
|
2427
2499
|
if (isLoading) {
|
|
2428
|
-
return /* @__PURE__ */
|
|
2500
|
+
return /* @__PURE__ */ React16.createElement(LoadingComponents, null);
|
|
2429
2501
|
}
|
|
2430
2502
|
const isEmpty = !components || components.length === 0;
|
|
2431
2503
|
if (isEmpty) {
|
|
2432
2504
|
if (searchValue.length > 0) {
|
|
2433
|
-
return /* @__PURE__ */
|
|
2505
|
+
return /* @__PURE__ */ React16.createElement(EmptySearchResult, null);
|
|
2434
2506
|
}
|
|
2435
|
-
return /* @__PURE__ */
|
|
2507
|
+
return /* @__PURE__ */ React16.createElement(EmptyState, null);
|
|
2436
2508
|
}
|
|
2437
|
-
return /* @__PURE__ */
|
|
2509
|
+
return /* @__PURE__ */ React16.createElement(import_ui15.List, { sx: { display: "flex", flexDirection: "column", gap: 1, px: 2 } }, components.map((component) => /* @__PURE__ */ React16.createElement(
|
|
2438
2510
|
ComponentItem,
|
|
2439
2511
|
{
|
|
2440
2512
|
key: component.uid,
|
|
@@ -2446,42 +2518,63 @@ function ComponentsList() {
|
|
|
2446
2518
|
)));
|
|
2447
2519
|
}
|
|
2448
2520
|
var EmptyState = () => {
|
|
2449
|
-
|
|
2450
|
-
|
|
2521
|
+
const [isAngieModalOpen, setIsAngieModalOpen] = (0, import_react9.useState)(false);
|
|
2522
|
+
const handleCreateWithAI = () => {
|
|
2523
|
+
const sdk = (0, import_editor_mcp.getAngieSdk)();
|
|
2524
|
+
if (sdk.isAngieReady()) {
|
|
2525
|
+
sdk.triggerAngie({
|
|
2526
|
+
prompt: (0, import_i18n17.__)(
|
|
2527
|
+
"Create a [hero/testimonial/product card/CTA/feature] component for my [business type]. Include [describe what you want]",
|
|
2528
|
+
"elementor"
|
|
2529
|
+
),
|
|
2530
|
+
context: { source: "components-panel-empty-state" }
|
|
2531
|
+
});
|
|
2532
|
+
} else {
|
|
2533
|
+
setIsAngieModalOpen(true);
|
|
2534
|
+
}
|
|
2535
|
+
};
|
|
2536
|
+
return /* @__PURE__ */ React16.createElement(
|
|
2537
|
+
import_ui15.Stack,
|
|
2451
2538
|
{
|
|
2452
2539
|
alignItems: "center",
|
|
2453
|
-
justifyContent: "
|
|
2540
|
+
justifyContent: "start",
|
|
2454
2541
|
height: "100%",
|
|
2455
|
-
sx: { px: 2
|
|
2456
|
-
gap:
|
|
2542
|
+
sx: { px: 2, py: 4 },
|
|
2543
|
+
gap: 2,
|
|
2457
2544
|
overflow: "hidden"
|
|
2458
2545
|
},
|
|
2459
|
-
/* @__PURE__ */
|
|
2460
|
-
|
|
2461
|
-
/* @__PURE__ */ React15.createElement(import_ui14.Typography, { variant: "caption", align: "center", color: "text.secondary" }, (0, import_i18n16.__)(
|
|
2462
|
-
"Once you have Components, this is where you can manage them\u2014rearrange, duplicate, rename and delete irrelevant classes.",
|
|
2463
|
-
"elementor"
|
|
2464
|
-
)),
|
|
2465
|
-
/* @__PURE__ */ React15.createElement(import_ui14.Divider, { sx: { width: "100%" }, color: "text.secondary" }),
|
|
2466
|
-
/* @__PURE__ */ React15.createElement(import_ui14.Typography, { align: "left", variant: "caption", color: "text.secondary" }, (0, import_i18n16.__)("To create a component, first design it, then choose one of three options:", "elementor")),
|
|
2467
|
-
/* @__PURE__ */ React15.createElement(
|
|
2468
|
-
import_ui14.Typography,
|
|
2546
|
+
/* @__PURE__ */ React16.createElement(import_ui15.Stack, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React16.createElement(import_icons10.ComponentsIcon, { fontSize: "large", sx: { color: "text.secondary" } }), /* @__PURE__ */ React16.createElement(import_ui15.Typography, { align: "center", variant: "subtitle2", color: "text.secondary", sx: SUBTITLE_OVERRIDE_SX }, (0, import_i18n17.__)("No components yet", "elementor")), /* @__PURE__ */ React16.createElement(import_ui15.Typography, { align: "center", variant: "caption", color: "secondary", sx: { maxWidth: 200 } }, (0, import_i18n17.__)("Components are reusable blocks that sync across your site.", "elementor"), /* @__PURE__ */ React16.createElement("br", null), (0, import_i18n17.__)("Create once, use everywhere.", "elementor")), /* @__PURE__ */ React16.createElement(
|
|
2547
|
+
import_ui15.Link,
|
|
2469
2548
|
{
|
|
2470
|
-
|
|
2549
|
+
href: LEARN_MORE_URL,
|
|
2550
|
+
target: "_blank",
|
|
2551
|
+
rel: "noopener noreferrer",
|
|
2471
2552
|
variant: "caption",
|
|
2472
|
-
color: "
|
|
2473
|
-
sx: { display: "flex", flexDirection: "column" }
|
|
2553
|
+
color: "info.main"
|
|
2474
2554
|
},
|
|
2475
|
-
|
|
2476
|
-
|
|
2477
|
-
|
|
2478
|
-
)
|
|
2555
|
+
(0, import_i18n17.__)("Learn more about components", "elementor")
|
|
2556
|
+
)),
|
|
2557
|
+
/* @__PURE__ */ React16.createElement(import_ui15.Divider, { sx: { width: "100%" } }),
|
|
2558
|
+
/* @__PURE__ */ React16.createElement(import_ui15.Stack, { alignItems: "center", gap: 1, width: "100%" }, /* @__PURE__ */ React16.createElement(import_ui15.Typography, { align: "center", variant: "subtitle2", color: "text.secondary", sx: SUBTITLE_OVERRIDE_SX }, (0, import_i18n17.__)("Create your first one:", "elementor")), /* @__PURE__ */ React16.createElement(import_ui15.Typography, { align: "center", variant: "caption", color: "secondary", sx: { maxWidth: 228 } }, (0, import_i18n17.__)(
|
|
2559
|
+
'Right-click any div-block or flexbox on your canvas or structure and select "Create component"',
|
|
2560
|
+
"elementor"
|
|
2561
|
+
)), /* @__PURE__ */ React16.createElement(import_ui15.Typography, { align: "center", variant: "caption", color: "secondary" }, (0, import_i18n17.__)("Or", "elementor")), /* @__PURE__ */ React16.createElement(AngiePromotionModal, { open: isAngieModalOpen, onClose: () => setIsAngieModalOpen(false) }, /* @__PURE__ */ React16.createElement(
|
|
2562
|
+
import_ui15.Button,
|
|
2563
|
+
{
|
|
2564
|
+
color: "secondary",
|
|
2565
|
+
variant: "outlined",
|
|
2566
|
+
size: "small",
|
|
2567
|
+
onClick: handleCreateWithAI,
|
|
2568
|
+
endIcon: /* @__PURE__ */ React16.createElement(import_icons10.AIIcon, null)
|
|
2569
|
+
},
|
|
2570
|
+
(0, import_i18n17.__)("Create component with AI", "elementor")
|
|
2571
|
+
)))
|
|
2479
2572
|
);
|
|
2480
2573
|
};
|
|
2481
2574
|
var EmptySearchResult = () => {
|
|
2482
2575
|
const { searchValue, clearSearch } = useSearch();
|
|
2483
|
-
return /* @__PURE__ */
|
|
2484
|
-
|
|
2576
|
+
return /* @__PURE__ */ React16.createElement(
|
|
2577
|
+
import_ui15.Stack,
|
|
2485
2578
|
{
|
|
2486
2579
|
color: "text.secondary",
|
|
2487
2580
|
pt: 5,
|
|
@@ -2490,28 +2583,29 @@ var EmptySearchResult = () => {
|
|
|
2490
2583
|
overflow: "hidden",
|
|
2491
2584
|
justifySelf: "center"
|
|
2492
2585
|
},
|
|
2493
|
-
/* @__PURE__ */
|
|
2494
|
-
/* @__PURE__ */
|
|
2495
|
-
|
|
2586
|
+
/* @__PURE__ */ React16.createElement(import_icons10.ComponentsIcon, null),
|
|
2587
|
+
/* @__PURE__ */ React16.createElement(
|
|
2588
|
+
import_ui15.Box,
|
|
2496
2589
|
{
|
|
2497
2590
|
sx: {
|
|
2498
2591
|
width: "100%"
|
|
2499
2592
|
}
|
|
2500
2593
|
},
|
|
2501
|
-
/* @__PURE__ */
|
|
2502
|
-
searchValue && /* @__PURE__ */
|
|
2503
|
-
|
|
2594
|
+
/* @__PURE__ */ React16.createElement(import_ui15.Typography, { align: "center", variant: "subtitle2", color: "inherit", sx: SUBTITLE_OVERRIDE_SX }, (0, import_i18n17.__)("Sorry, nothing matched", "elementor")),
|
|
2595
|
+
searchValue && /* @__PURE__ */ React16.createElement(
|
|
2596
|
+
import_ui15.Typography,
|
|
2504
2597
|
{
|
|
2505
2598
|
variant: "subtitle2",
|
|
2506
2599
|
color: "inherit",
|
|
2507
2600
|
sx: {
|
|
2601
|
+
...SUBTITLE_OVERRIDE_SX,
|
|
2508
2602
|
display: "flex",
|
|
2509
2603
|
width: "100%",
|
|
2510
2604
|
justifyContent: "center"
|
|
2511
2605
|
}
|
|
2512
2606
|
},
|
|
2513
|
-
/* @__PURE__ */
|
|
2514
|
-
/* @__PURE__ */
|
|
2607
|
+
/* @__PURE__ */ React16.createElement("span", null, "\u201C"),
|
|
2608
|
+
/* @__PURE__ */ React16.createElement(
|
|
2515
2609
|
"span",
|
|
2516
2610
|
{
|
|
2517
2611
|
style: {
|
|
@@ -2522,11 +2616,11 @@ var EmptySearchResult = () => {
|
|
|
2522
2616
|
},
|
|
2523
2617
|
searchValue
|
|
2524
2618
|
),
|
|
2525
|
-
/* @__PURE__ */
|
|
2619
|
+
/* @__PURE__ */ React16.createElement("span", null, "\u201D.")
|
|
2526
2620
|
)
|
|
2527
2621
|
),
|
|
2528
|
-
/* @__PURE__ */
|
|
2529
|
-
/* @__PURE__ */
|
|
2622
|
+
/* @__PURE__ */ React16.createElement(import_ui15.Typography, { align: "center", variant: "caption", color: "inherit" }, (0, import_i18n17.__)("Try something else.", "elementor")),
|
|
2623
|
+
/* @__PURE__ */ React16.createElement(import_ui15.Typography, { align: "center", variant: "caption", color: "inherit" }, /* @__PURE__ */ React16.createElement(import_ui15.Link, { color: "secondary", variant: "caption", component: "button", onClick: clearSearch }, (0, import_i18n17.__)("Clear & try again", "elementor")))
|
|
2530
2624
|
);
|
|
2531
2625
|
};
|
|
2532
2626
|
var useFilteredComponents = () => {
|
|
@@ -2542,34 +2636,39 @@ var useFilteredComponents = () => {
|
|
|
2542
2636
|
};
|
|
2543
2637
|
|
|
2544
2638
|
// src/components/components-tab/components.tsx
|
|
2639
|
+
var ComponentsContent = () => {
|
|
2640
|
+
const { components, isLoading } = useComponents();
|
|
2641
|
+
const hasComponents = !isLoading && components.length > 0;
|
|
2642
|
+
return /* @__PURE__ */ React17.createElement(React17.Fragment, null, hasComponents && /* @__PURE__ */ React17.createElement(ComponentSearch, null), /* @__PURE__ */ React17.createElement(ComponentsList, null));
|
|
2643
|
+
};
|
|
2545
2644
|
var Components = () => {
|
|
2546
|
-
return /* @__PURE__ */
|
|
2645
|
+
return /* @__PURE__ */ React17.createElement(import_editor_ui7.ThemeProvider, null, /* @__PURE__ */ React17.createElement(SearchProvider, { localStorageKey: "elementor-components-search" }, /* @__PURE__ */ React17.createElement(ComponentsContent, null)));
|
|
2547
2646
|
};
|
|
2548
2647
|
|
|
2549
2648
|
// src/components/consts.ts
|
|
2550
2649
|
var COMPONENT_DOCUMENT_TYPE = "elementor_component";
|
|
2551
2650
|
|
|
2552
2651
|
// src/components/create-component-form/create-component-form.tsx
|
|
2553
|
-
var
|
|
2554
|
-
var
|
|
2555
|
-
var
|
|
2652
|
+
var React18 = __toESM(require("react"));
|
|
2653
|
+
var import_react11 = require("react");
|
|
2654
|
+
var import_editor_elements10 = require("@elementor/editor-elements");
|
|
2556
2655
|
var import_editor_notifications2 = require("@elementor/editor-notifications");
|
|
2557
2656
|
var import_editor_ui8 = require("@elementor/editor-ui");
|
|
2558
2657
|
var import_icons11 = require("@elementor/icons");
|
|
2559
2658
|
var import_store47 = require("@elementor/store");
|
|
2560
|
-
var
|
|
2561
|
-
var
|
|
2659
|
+
var import_ui16 = require("@elementor/ui");
|
|
2660
|
+
var import_i18n19 = require("@wordpress/i18n");
|
|
2562
2661
|
|
|
2563
2662
|
// src/prevent-non-atomic-nesting.ts
|
|
2564
2663
|
var import_editor_canvas6 = require("@elementor/editor-canvas");
|
|
2565
|
-
var
|
|
2664
|
+
var import_editor_elements9 = require("@elementor/editor-elements");
|
|
2566
2665
|
var import_editor_notifications = require("@elementor/editor-notifications");
|
|
2567
2666
|
var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
|
|
2568
2667
|
var import_store43 = require("@elementor/store");
|
|
2569
|
-
var
|
|
2668
|
+
var import_i18n18 = require("@wordpress/i18n");
|
|
2570
2669
|
var NON_ATOMIC_ELEMENT_ALERT = {
|
|
2571
2670
|
type: "default",
|
|
2572
|
-
message: (0,
|
|
2671
|
+
message: (0, import_i18n18.__)("This widget isn't compatible with components. Use atomic elements instead.", "elementor"),
|
|
2573
2672
|
id: "non-atomic-element-blocked"
|
|
2574
2673
|
};
|
|
2575
2674
|
function initNonAtomicNestingPrevention() {
|
|
@@ -2594,7 +2693,7 @@ function isEditingComponent() {
|
|
|
2594
2693
|
return selectCurrentComponentId(state) !== null;
|
|
2595
2694
|
}
|
|
2596
2695
|
function isElementAtomic(elementType) {
|
|
2597
|
-
return (0,
|
|
2696
|
+
return (0, import_editor_elements9.getElementType)(elementType) !== null;
|
|
2598
2697
|
}
|
|
2599
2698
|
function blockNonAtomicCreate(args) {
|
|
2600
2699
|
if (!isEditingComponent()) {
|
|
@@ -2620,7 +2719,7 @@ function blockNonAtomicMove(args) {
|
|
|
2620
2719
|
if (!container) {
|
|
2621
2720
|
return false;
|
|
2622
2721
|
}
|
|
2623
|
-
const allElements = (0,
|
|
2722
|
+
const allElements = (0, import_editor_elements9.getAllDescendants)(container);
|
|
2624
2723
|
return allElements.some((element) => !(0, import_editor_canvas6.isAtomicWidget)(element));
|
|
2625
2724
|
});
|
|
2626
2725
|
if (hasNonAtomicElement) {
|
|
@@ -2700,11 +2799,11 @@ async function createUnpublishedComponent(name, element, eventData, overridableP
|
|
|
2700
2799
|
}
|
|
2701
2800
|
|
|
2702
2801
|
// src/components/create-component-form/hooks/use-form.ts
|
|
2703
|
-
var
|
|
2802
|
+
var import_react10 = require("react");
|
|
2704
2803
|
var useForm = (initialValues) => {
|
|
2705
|
-
const [values, setValues] = (0,
|
|
2706
|
-
const [errors, setErrors] = (0,
|
|
2707
|
-
const isValid = (0,
|
|
2804
|
+
const [values, setValues] = (0, import_react10.useState)(initialValues);
|
|
2805
|
+
const [errors, setErrors] = (0, import_react10.useState)({});
|
|
2806
|
+
const isValid = (0, import_react10.useMemo)(() => {
|
|
2708
2807
|
return !Object.values(errors).some((error) => error);
|
|
2709
2808
|
}, [errors]);
|
|
2710
2809
|
const handleChange = (e, field, validationSchema) => {
|
|
@@ -2779,18 +2878,18 @@ function countNestedElements(container) {
|
|
|
2779
2878
|
|
|
2780
2879
|
// src/components/create-component-form/create-component-form.tsx
|
|
2781
2880
|
function CreateComponentForm() {
|
|
2782
|
-
const [element, setElement] = (0,
|
|
2783
|
-
const [anchorPosition, setAnchorPosition] = (0,
|
|
2784
|
-
const [resultNotification, setResultNotification] = (0,
|
|
2785
|
-
const eventData = (0,
|
|
2786
|
-
(0,
|
|
2881
|
+
const [element, setElement] = (0, import_react11.useState)(null);
|
|
2882
|
+
const [anchorPosition, setAnchorPosition] = (0, import_react11.useState)();
|
|
2883
|
+
const [resultNotification, setResultNotification] = (0, import_react11.useState)(null);
|
|
2884
|
+
const eventData = (0, import_react11.useRef)(null);
|
|
2885
|
+
(0, import_react11.useEffect)(() => {
|
|
2787
2886
|
const OPEN_SAVE_AS_COMPONENT_FORM_EVENT = "elementor/editor/open-save-as-component-form";
|
|
2788
2887
|
const openPopup = (event) => {
|
|
2789
2888
|
const nonAtomicElements = findNonAtomicElementsInElement(event.detail.element);
|
|
2790
2889
|
if (nonAtomicElements.length > 0) {
|
|
2791
2890
|
(0, import_editor_notifications2.notify)({
|
|
2792
2891
|
type: "default",
|
|
2793
|
-
message: (0,
|
|
2892
|
+
message: (0, import_i18n19.__)(
|
|
2794
2893
|
"Components require atomic elements only. Remove widgets to create this component.",
|
|
2795
2894
|
"elementor"
|
|
2796
2895
|
),
|
|
@@ -2798,7 +2897,7 @@ function CreateComponentForm() {
|
|
|
2798
2897
|
});
|
|
2799
2898
|
return;
|
|
2800
2899
|
}
|
|
2801
|
-
setElement({ element: event.detail.element, elementLabel: (0,
|
|
2900
|
+
setElement({ element: event.detail.element, elementLabel: (0, import_editor_elements10.getElementLabel)(event.detail.element.id) });
|
|
2802
2901
|
setAnchorPosition(event.detail.anchorPosition);
|
|
2803
2902
|
eventData.current = getComponentEventData(event.detail.element, event.detail.options);
|
|
2804
2903
|
trackComponentEvent({
|
|
@@ -2830,12 +2929,12 @@ function CreateComponentForm() {
|
|
|
2830
2929
|
setResultNotification({
|
|
2831
2930
|
show: true,
|
|
2832
2931
|
// Translators: %1$s: Component name, %2$s: Component UID
|
|
2833
|
-
message: (0,
|
|
2932
|
+
message: (0, import_i18n19.__)("Component saved successfully as: %1$s (UID: %2$s)", "elementor").replace("%1$s", values.componentName).replace("%2$s", uid),
|
|
2834
2933
|
type: "success"
|
|
2835
2934
|
});
|
|
2836
2935
|
resetAndClosePopup();
|
|
2837
2936
|
} catch {
|
|
2838
|
-
const errorMessage = (0,
|
|
2937
|
+
const errorMessage = (0, import_i18n19.__)("Failed to save component. Please try again.", "elementor");
|
|
2839
2938
|
setResultNotification({
|
|
2840
2939
|
show: true,
|
|
2841
2940
|
message: errorMessage,
|
|
@@ -2854,15 +2953,15 @@ function CreateComponentForm() {
|
|
|
2854
2953
|
...eventData.current
|
|
2855
2954
|
});
|
|
2856
2955
|
};
|
|
2857
|
-
return /* @__PURE__ */
|
|
2858
|
-
|
|
2956
|
+
return /* @__PURE__ */ React18.createElement(import_editor_ui8.ThemeProvider, null, /* @__PURE__ */ React18.createElement(
|
|
2957
|
+
import_ui16.Popover,
|
|
2859
2958
|
{
|
|
2860
2959
|
open: element !== null,
|
|
2861
2960
|
onClose: cancelSave,
|
|
2862
2961
|
anchorReference: "anchorPosition",
|
|
2863
2962
|
anchorPosition
|
|
2864
2963
|
},
|
|
2865
|
-
element !== null && /* @__PURE__ */
|
|
2964
|
+
element !== null && /* @__PURE__ */ React18.createElement(
|
|
2866
2965
|
Form2,
|
|
2867
2966
|
{
|
|
2868
2967
|
initialValues: { componentName: element.elementLabel },
|
|
@@ -2870,8 +2969,8 @@ function CreateComponentForm() {
|
|
|
2870
2969
|
closePopup: cancelSave
|
|
2871
2970
|
}
|
|
2872
2971
|
)
|
|
2873
|
-
), /* @__PURE__ */
|
|
2874
|
-
|
|
2972
|
+
), /* @__PURE__ */ React18.createElement(import_ui16.Snackbar, { open: resultNotification?.show, onClose: () => setResultNotification(null) }, /* @__PURE__ */ React18.createElement(
|
|
2973
|
+
import_ui16.Alert,
|
|
2875
2974
|
{
|
|
2876
2975
|
onClose: () => setResultNotification(null),
|
|
2877
2976
|
severity: resultNotification?.type,
|
|
@@ -2888,14 +2987,14 @@ var Form2 = ({
|
|
|
2888
2987
|
}) => {
|
|
2889
2988
|
const { values, errors, isValid, handleChange, validateForm: validateForm2 } = useForm(initialValues);
|
|
2890
2989
|
const { components } = useComponents();
|
|
2891
|
-
const existingComponentNames = (0,
|
|
2990
|
+
const existingComponentNames = (0, import_react11.useMemo)(() => {
|
|
2892
2991
|
return components?.map((component) => component.name) ?? [];
|
|
2893
2992
|
}, [components]);
|
|
2894
|
-
const changeValidationSchema = (0,
|
|
2993
|
+
const changeValidationSchema = (0, import_react11.useMemo)(
|
|
2895
2994
|
() => createBaseComponentSchema(existingComponentNames),
|
|
2896
2995
|
[existingComponentNames]
|
|
2897
2996
|
);
|
|
2898
|
-
const submitValidationSchema = (0,
|
|
2997
|
+
const submitValidationSchema = (0, import_react11.useMemo)(
|
|
2899
2998
|
() => createSubmitComponentSchema(existingComponentNames),
|
|
2900
2999
|
[existingComponentNames]
|
|
2901
3000
|
);
|
|
@@ -2906,14 +3005,14 @@ var Form2 = ({
|
|
|
2906
3005
|
}
|
|
2907
3006
|
};
|
|
2908
3007
|
const texts = {
|
|
2909
|
-
heading: (0,
|
|
2910
|
-
name: (0,
|
|
2911
|
-
cancel: (0,
|
|
2912
|
-
create: (0,
|
|
3008
|
+
heading: (0, import_i18n19.__)("Save as a component", "elementor"),
|
|
3009
|
+
name: (0, import_i18n19.__)("Name", "elementor"),
|
|
3010
|
+
cancel: (0, import_i18n19.__)("Cancel", "elementor"),
|
|
3011
|
+
create: (0, import_i18n19.__)("Create", "elementor")
|
|
2913
3012
|
};
|
|
2914
3013
|
const nameInputId = "component-name";
|
|
2915
|
-
return /* @__PURE__ */
|
|
2916
|
-
|
|
3014
|
+
return /* @__PURE__ */ React18.createElement(import_editor_ui8.Form, { onSubmit: handleSubmit }, /* @__PURE__ */ React18.createElement(import_ui16.Stack, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React18.createElement(
|
|
3015
|
+
import_ui16.Stack,
|
|
2917
3016
|
{
|
|
2918
3017
|
direction: "row",
|
|
2919
3018
|
alignItems: "center",
|
|
@@ -2921,10 +3020,10 @@ var Form2 = ({
|
|
|
2921
3020
|
px: 1.5,
|
|
2922
3021
|
sx: { columnGap: 0.5, borderBottom: "1px solid", borderColor: "divider", width: "100%" }
|
|
2923
3022
|
},
|
|
2924
|
-
/* @__PURE__ */
|
|
2925
|
-
/* @__PURE__ */
|
|
2926
|
-
), /* @__PURE__ */
|
|
2927
|
-
|
|
3023
|
+
/* @__PURE__ */ React18.createElement(import_icons11.StarIcon, { fontSize: FONT_SIZE }),
|
|
3024
|
+
/* @__PURE__ */ React18.createElement(import_ui16.Typography, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, texts.heading)
|
|
3025
|
+
), /* @__PURE__ */ React18.createElement(import_ui16.Grid, { container: true, gap: 0.75, alignItems: "start", p: 1.5 }, /* @__PURE__ */ React18.createElement(import_ui16.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React18.createElement(import_ui16.FormLabel, { htmlFor: nameInputId, size: "tiny" }, texts.name)), /* @__PURE__ */ React18.createElement(import_ui16.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React18.createElement(
|
|
3026
|
+
import_ui16.TextField,
|
|
2928
3027
|
{
|
|
2929
3028
|
id: nameInputId,
|
|
2930
3029
|
size: FONT_SIZE,
|
|
@@ -2935,19 +3034,19 @@ var Form2 = ({
|
|
|
2935
3034
|
error: Boolean(errors.componentName),
|
|
2936
3035
|
helperText: errors.componentName
|
|
2937
3036
|
}
|
|
2938
|
-
))), /* @__PURE__ */
|
|
3037
|
+
))), /* @__PURE__ */ React18.createElement(import_ui16.Stack, { direction: "row", justifyContent: "flex-end", alignSelf: "end", py: 1, px: 1.5 }, /* @__PURE__ */ React18.createElement(import_ui16.Button, { onClick: closePopup, color: "secondary", variant: "text", size: "small" }, texts.cancel), /* @__PURE__ */ React18.createElement(import_ui16.Button, { type: "submit", disabled: !isValid, variant: "contained", color: "primary", size: "small" }, texts.create))));
|
|
2939
3038
|
};
|
|
2940
3039
|
|
|
2941
3040
|
// src/components/edit-component/edit-component.tsx
|
|
2942
|
-
var
|
|
2943
|
-
var
|
|
2944
|
-
var
|
|
3041
|
+
var React20 = __toESM(require("react"));
|
|
3042
|
+
var import_react14 = require("react");
|
|
3043
|
+
var import_editor_documents11 = require("@elementor/editor-documents");
|
|
2945
3044
|
var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
|
|
2946
3045
|
var import_store51 = require("@elementor/store");
|
|
2947
3046
|
var import_utils6 = require("@elementor/utils");
|
|
2948
3047
|
|
|
2949
3048
|
// src/store/actions/update-current-component.ts
|
|
2950
|
-
var
|
|
3049
|
+
var import_editor_documents10 = require("@elementor/editor-documents");
|
|
2951
3050
|
var import_store49 = require("@elementor/store");
|
|
2952
3051
|
function updateCurrentComponent({
|
|
2953
3052
|
path,
|
|
@@ -2962,10 +3061,10 @@ function updateCurrentComponent({
|
|
|
2962
3061
|
}
|
|
2963
3062
|
|
|
2964
3063
|
// src/components/edit-component/component-modal.tsx
|
|
2965
|
-
var
|
|
2966
|
-
var
|
|
3064
|
+
var React19 = __toESM(require("react"));
|
|
3065
|
+
var import_react13 = require("react");
|
|
2967
3066
|
var import_react_dom = require("react-dom");
|
|
2968
|
-
var
|
|
3067
|
+
var import_i18n20 = require("@wordpress/i18n");
|
|
2969
3068
|
|
|
2970
3069
|
// src/hooks/use-canvas-document.ts
|
|
2971
3070
|
var import_editor_canvas7 = require("@elementor/editor-canvas");
|
|
@@ -2975,10 +3074,10 @@ function useCanvasDocument() {
|
|
|
2975
3074
|
}
|
|
2976
3075
|
|
|
2977
3076
|
// src/hooks/use-element-rect.ts
|
|
2978
|
-
var
|
|
3077
|
+
var import_react12 = require("react");
|
|
2979
3078
|
var import_utils5 = require("@elementor/utils");
|
|
2980
3079
|
function useElementRect(element) {
|
|
2981
|
-
const [rect, setRect] = (0,
|
|
3080
|
+
const [rect, setRect] = (0, import_react12.useState)(new DOMRect(0, 0, 0, 0));
|
|
2982
3081
|
const onChange = (0, import_utils5.throttle)(
|
|
2983
3082
|
() => {
|
|
2984
3083
|
setRect(element?.getBoundingClientRect() ?? new DOMRect(0, 0, 0, 0));
|
|
@@ -2989,7 +3088,7 @@ function useElementRect(element) {
|
|
|
2989
3088
|
useScrollListener({ element, onChange });
|
|
2990
3089
|
useResizeListener({ element, onChange });
|
|
2991
3090
|
useMutationsListener({ element, onChange });
|
|
2992
|
-
(0,
|
|
3091
|
+
(0, import_react12.useEffect)(
|
|
2993
3092
|
() => () => {
|
|
2994
3093
|
onChange.cancel();
|
|
2995
3094
|
},
|
|
@@ -2998,7 +3097,7 @@ function useElementRect(element) {
|
|
|
2998
3097
|
return rect;
|
|
2999
3098
|
}
|
|
3000
3099
|
function useScrollListener({ element, onChange }) {
|
|
3001
|
-
(0,
|
|
3100
|
+
(0, import_react12.useEffect)(() => {
|
|
3002
3101
|
if (!element) {
|
|
3003
3102
|
return;
|
|
3004
3103
|
}
|
|
@@ -3010,7 +3109,7 @@ function useScrollListener({ element, onChange }) {
|
|
|
3010
3109
|
}, [element, onChange]);
|
|
3011
3110
|
}
|
|
3012
3111
|
function useResizeListener({ element, onChange }) {
|
|
3013
|
-
(0,
|
|
3112
|
+
(0, import_react12.useEffect)(() => {
|
|
3014
3113
|
if (!element) {
|
|
3015
3114
|
return;
|
|
3016
3115
|
}
|
|
@@ -3025,7 +3124,7 @@ function useResizeListener({ element, onChange }) {
|
|
|
3025
3124
|
}, [element, onChange]);
|
|
3026
3125
|
}
|
|
3027
3126
|
function useMutationsListener({ element, onChange }) {
|
|
3028
|
-
(0,
|
|
3127
|
+
(0, import_react12.useEffect)(() => {
|
|
3029
3128
|
if (!element) {
|
|
3030
3129
|
return;
|
|
3031
3130
|
}
|
|
@@ -3040,7 +3139,7 @@ function useMutationsListener({ element, onChange }) {
|
|
|
3040
3139
|
// src/components/edit-component/component-modal.tsx
|
|
3041
3140
|
function ComponentModal({ element, onClose }) {
|
|
3042
3141
|
const canvasDocument = useCanvasDocument();
|
|
3043
|
-
(0,
|
|
3142
|
+
(0, import_react13.useEffect)(() => {
|
|
3044
3143
|
const handleEsc = (event) => {
|
|
3045
3144
|
if (event.key === "Escape") {
|
|
3046
3145
|
onClose();
|
|
@@ -3055,7 +3154,7 @@ function ComponentModal({ element, onClose }) {
|
|
|
3055
3154
|
return null;
|
|
3056
3155
|
}
|
|
3057
3156
|
return (0, import_react_dom.createPortal)(
|
|
3058
|
-
/* @__PURE__ */
|
|
3157
|
+
/* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(BlockEditPage, null), /* @__PURE__ */ React19.createElement(Backdrop, { canvas: canvasDocument, element, onClose })),
|
|
3059
3158
|
canvasDocument.body
|
|
3060
3159
|
);
|
|
3061
3160
|
}
|
|
@@ -3079,7 +3178,7 @@ function Backdrop({ canvas, element, onClose }) {
|
|
|
3079
3178
|
onClose();
|
|
3080
3179
|
}
|
|
3081
3180
|
};
|
|
3082
|
-
return /* @__PURE__ */
|
|
3181
|
+
return /* @__PURE__ */ React19.createElement(
|
|
3083
3182
|
"div",
|
|
3084
3183
|
{
|
|
3085
3184
|
style: backdropStyle,
|
|
@@ -3087,7 +3186,7 @@ function Backdrop({ canvas, element, onClose }) {
|
|
|
3087
3186
|
onKeyDown: handleKeyDown,
|
|
3088
3187
|
role: "button",
|
|
3089
3188
|
tabIndex: 0,
|
|
3090
|
-
"aria-label": (0,
|
|
3189
|
+
"aria-label": (0, import_i18n20.__)("Exit component editing mode", "elementor")
|
|
3091
3190
|
}
|
|
3092
3191
|
);
|
|
3093
3192
|
}
|
|
@@ -3137,7 +3236,7 @@ function BlockEditPage() {
|
|
|
3137
3236
|
}
|
|
3138
3237
|
}
|
|
3139
3238
|
`;
|
|
3140
|
-
return /* @__PURE__ */
|
|
3239
|
+
return /* @__PURE__ */ React19.createElement("style", { "data-e-style-id": "e-block-v3-document-handles-styles" }, blockV3DocumentHandlesStyles);
|
|
3141
3240
|
}
|
|
3142
3241
|
|
|
3143
3242
|
// src/components/edit-component/edit-component.tsx
|
|
@@ -3150,13 +3249,13 @@ function EditComponent() {
|
|
|
3150
3249
|
if (!elementDom) {
|
|
3151
3250
|
return null;
|
|
3152
3251
|
}
|
|
3153
|
-
return /* @__PURE__ */
|
|
3252
|
+
return /* @__PURE__ */ React20.createElement(ComponentModal, { element: elementDom, onClose });
|
|
3154
3253
|
}
|
|
3155
3254
|
function useHandleDocumentSwitches() {
|
|
3156
|
-
const documentsManager = (0,
|
|
3255
|
+
const documentsManager = (0, import_editor_documents11.getV1DocumentsManager)();
|
|
3157
3256
|
const currentComponentId = useCurrentComponentId();
|
|
3158
3257
|
const path = (0, import_store51.__useSelector)(selectPath);
|
|
3159
|
-
(0,
|
|
3258
|
+
(0, import_react14.useEffect)(() => {
|
|
3160
3259
|
return (0, import_editor_v1_adapters7.__privateListenTo)((0, import_editor_v1_adapters7.commandEndEvent)("editor/documents/open"), () => {
|
|
3161
3260
|
const nextDocument = documentsManager.getCurrent();
|
|
3162
3261
|
if (nextDocument.id === currentComponentId) {
|
|
@@ -3197,7 +3296,7 @@ function getInstanceTitle(instanceId, path) {
|
|
|
3197
3296
|
if (!instanceId) {
|
|
3198
3297
|
return void 0;
|
|
3199
3298
|
}
|
|
3200
|
-
const documentsManager = (0,
|
|
3299
|
+
const documentsManager = (0, import_editor_documents11.getV1DocumentsManager)();
|
|
3201
3300
|
const parentDocId = path.at(-1)?.componentId ?? documentsManager.getInitialId();
|
|
3202
3301
|
const parentDoc = documentsManager.get(parentDocId);
|
|
3203
3302
|
const parentContainer = parentDoc?.container;
|
|
@@ -3211,7 +3310,7 @@ function getComponentDOMElement(id2) {
|
|
|
3211
3310
|
if (!id2) {
|
|
3212
3311
|
return null;
|
|
3213
3312
|
}
|
|
3214
|
-
const documentsManager = (0,
|
|
3313
|
+
const documentsManager = (0, import_editor_documents11.getV1DocumentsManager)();
|
|
3215
3314
|
const currentComponent = documentsManager.get(id2);
|
|
3216
3315
|
const widget = currentComponent?.container;
|
|
3217
3316
|
const container = widget?.view?.el?.children?.[0] ?? null;
|
|
@@ -3220,37 +3319,37 @@ function getComponentDOMElement(id2) {
|
|
|
3220
3319
|
}
|
|
3221
3320
|
|
|
3222
3321
|
// src/components/in-edit-mode.tsx
|
|
3223
|
-
var
|
|
3322
|
+
var React21 = __toESM(require("react"));
|
|
3224
3323
|
var import_editor_ui9 = require("@elementor/editor-ui");
|
|
3225
3324
|
var import_icons12 = require("@elementor/icons");
|
|
3226
|
-
var
|
|
3227
|
-
var
|
|
3325
|
+
var import_ui17 = require("@elementor/ui");
|
|
3326
|
+
var import_i18n21 = require("@wordpress/i18n");
|
|
3228
3327
|
var openEditModeDialog = (lockedBy) => {
|
|
3229
3328
|
(0, import_editor_ui9.openDialog)({
|
|
3230
|
-
component: /* @__PURE__ */
|
|
3329
|
+
component: /* @__PURE__ */ React21.createElement(EditModeDialog, { lockedBy })
|
|
3231
3330
|
});
|
|
3232
3331
|
};
|
|
3233
3332
|
var EditModeDialog = ({ lockedBy }) => {
|
|
3234
|
-
const content = (0,
|
|
3235
|
-
return /* @__PURE__ */
|
|
3333
|
+
const content = (0, import_i18n21.__)("%s is currently editing this document", "elementor").replace("%s", lockedBy);
|
|
3334
|
+
return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(import_ui17.DialogHeader, { logo: false }, /* @__PURE__ */ React21.createElement(import_ui17.Box, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React21.createElement(import_ui17.Icon, { color: "secondary" }, /* @__PURE__ */ React21.createElement(import_icons12.InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React21.createElement(import_ui17.Typography, { variant: "subtitle1" }, content))), /* @__PURE__ */ React21.createElement(import_ui17.DialogContent, null, /* @__PURE__ */ React21.createElement(import_ui17.Stack, { spacing: 2, direction: "column" }, /* @__PURE__ */ React21.createElement(import_ui17.Typography, { variant: "body2" }, (0, import_i18n21.__)(
|
|
3236
3335
|
"You can wait for them to finish or reach out to coordinate your changes together.",
|
|
3237
3336
|
"elementor"
|
|
3238
|
-
)), /* @__PURE__ */
|
|
3337
|
+
)), /* @__PURE__ */ React21.createElement(import_ui17.DialogActions, null, /* @__PURE__ */ React21.createElement(import_ui17.Button, { color: "secondary", variant: "contained", onClick: import_editor_ui9.closeDialog }, (0, import_i18n21.__)("Close", "elementor"))))));
|
|
3239
3338
|
};
|
|
3240
3339
|
|
|
3241
3340
|
// src/components/instance-editing-panel/instance-editing-panel.tsx
|
|
3242
|
-
var
|
|
3341
|
+
var React26 = __toESM(require("react"));
|
|
3243
3342
|
var import_editor_controls4 = require("@elementor/editor-controls");
|
|
3244
3343
|
var import_editor_editing_panel5 = require("@elementor/editor-editing-panel");
|
|
3245
|
-
var
|
|
3344
|
+
var import_editor_elements14 = require("@elementor/editor-elements");
|
|
3246
3345
|
var import_editor_panels3 = require("@elementor/editor-panels");
|
|
3247
3346
|
var import_icons14 = require("@elementor/icons");
|
|
3248
|
-
var
|
|
3249
|
-
var
|
|
3347
|
+
var import_ui22 = require("@elementor/ui");
|
|
3348
|
+
var import_i18n23 = require("@wordpress/i18n");
|
|
3250
3349
|
|
|
3251
3350
|
// src/hooks/use-component-instance-settings.ts
|
|
3252
3351
|
var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
|
|
3253
|
-
var
|
|
3352
|
+
var import_editor_elements11 = require("@elementor/editor-elements");
|
|
3254
3353
|
|
|
3255
3354
|
// src/prop-types/component-instance-prop-type.ts
|
|
3256
3355
|
var import_editor_props4 = require("@elementor/editor-props");
|
|
@@ -3307,18 +3406,18 @@ var componentInstancePropTypeUtil = (0, import_editor_props4.createPropUtils)(
|
|
|
3307
3406
|
// src/hooks/use-component-instance-settings.ts
|
|
3308
3407
|
function useComponentInstanceSettings() {
|
|
3309
3408
|
const { element } = (0, import_editor_editing_panel2.useElement)();
|
|
3310
|
-
const settings = (0,
|
|
3409
|
+
const settings = (0, import_editor_elements11.useElementSetting)(element.id, "component_instance");
|
|
3311
3410
|
return componentInstancePropTypeUtil.extract(settings);
|
|
3312
3411
|
}
|
|
3313
3412
|
|
|
3314
3413
|
// src/components/instance-editing-panel/empty-state.tsx
|
|
3315
|
-
var
|
|
3414
|
+
var React22 = __toESM(require("react"));
|
|
3316
3415
|
var import_icons13 = require("@elementor/icons");
|
|
3317
|
-
var
|
|
3318
|
-
var
|
|
3416
|
+
var import_ui18 = require("@elementor/ui");
|
|
3417
|
+
var import_i18n22 = require("@wordpress/i18n");
|
|
3319
3418
|
var EmptyState2 = ({ onEditComponent }) => {
|
|
3320
|
-
return /* @__PURE__ */
|
|
3321
|
-
|
|
3419
|
+
return /* @__PURE__ */ React22.createElement(
|
|
3420
|
+
import_ui18.Stack,
|
|
3322
3421
|
{
|
|
3323
3422
|
alignItems: "center",
|
|
3324
3423
|
justifyContent: "start",
|
|
@@ -3327,33 +3426,33 @@ var EmptyState2 = ({ onEditComponent }) => {
|
|
|
3327
3426
|
sx: { p: 2.5, pt: 8, pb: 5.5, mt: 1 },
|
|
3328
3427
|
gap: 1.5
|
|
3329
3428
|
},
|
|
3330
|
-
/* @__PURE__ */
|
|
3331
|
-
/* @__PURE__ */
|
|
3332
|
-
/* @__PURE__ */
|
|
3429
|
+
/* @__PURE__ */ React22.createElement(import_icons13.ComponentPropListIcon, { fontSize: "large" }),
|
|
3430
|
+
/* @__PURE__ */ React22.createElement(import_ui18.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n22.__)("No properties yet", "elementor")),
|
|
3431
|
+
/* @__PURE__ */ React22.createElement(import_ui18.Typography, { align: "center", variant: "caption", maxWidth: "170px" }, (0, import_i18n22.__)(
|
|
3333
3432
|
"Edit the component to add properties, manage them or update the design across all instances.",
|
|
3334
3433
|
"elementor"
|
|
3335
3434
|
)),
|
|
3336
|
-
/* @__PURE__ */
|
|
3435
|
+
/* @__PURE__ */ React22.createElement(import_ui18.Button, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React22.createElement(import_icons13.PencilIcon, { fontSize: "small" }), (0, import_i18n22.__)("Edit component", "elementor"))
|
|
3337
3436
|
);
|
|
3338
3437
|
};
|
|
3339
3438
|
|
|
3340
3439
|
// src/components/instance-editing-panel/override-props-group.tsx
|
|
3341
|
-
var
|
|
3342
|
-
var
|
|
3440
|
+
var React25 = __toESM(require("react"));
|
|
3441
|
+
var import_react15 = require("react");
|
|
3343
3442
|
var import_editor_editing_panel4 = require("@elementor/editor-editing-panel");
|
|
3344
3443
|
var import_editor_ui10 = require("@elementor/editor-ui");
|
|
3345
|
-
var
|
|
3444
|
+
var import_ui21 = require("@elementor/ui");
|
|
3346
3445
|
|
|
3347
3446
|
// src/components/instance-editing-panel/override-prop-control.tsx
|
|
3348
|
-
var
|
|
3447
|
+
var React24 = __toESM(require("react"));
|
|
3349
3448
|
var import_editor_controls3 = require("@elementor/editor-controls");
|
|
3350
3449
|
var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
|
|
3351
|
-
var
|
|
3450
|
+
var import_ui20 = require("@elementor/ui");
|
|
3352
3451
|
|
|
3353
3452
|
// src/hooks/use-controls-by-widget-type.ts
|
|
3354
|
-
var
|
|
3453
|
+
var import_editor_elements12 = require("@elementor/editor-elements");
|
|
3355
3454
|
function useControlsByWidgetType(type) {
|
|
3356
|
-
const elementType = (0,
|
|
3455
|
+
const elementType = (0, import_editor_elements12.getElementType)(type);
|
|
3357
3456
|
if (!elementType) {
|
|
3358
3457
|
return {};
|
|
3359
3458
|
}
|
|
@@ -3417,7 +3516,7 @@ function updateOverridableProp(componentId, propValue, originPropFields) {
|
|
|
3417
3516
|
}
|
|
3418
3517
|
|
|
3419
3518
|
// src/utils/get-prop-type-for-component-override.ts
|
|
3420
|
-
var
|
|
3519
|
+
var import_editor_elements13 = require("@elementor/editor-elements");
|
|
3421
3520
|
var getPropTypeForComponentOverride = (overridableProp) => {
|
|
3422
3521
|
if (overridableProp.originPropFields) {
|
|
3423
3522
|
return getPropType(overridableProp.originPropFields);
|
|
@@ -3430,21 +3529,21 @@ var getPropTypeForComponentOverride = (overridableProp) => {
|
|
|
3430
3529
|
});
|
|
3431
3530
|
};
|
|
3432
3531
|
function getPropType({ widgetType, propKey }) {
|
|
3433
|
-
const widgetPropsSchema = (0,
|
|
3532
|
+
const widgetPropsSchema = (0, import_editor_elements13.getWidgetsCache)()?.[widgetType]?.atomic_props_schema;
|
|
3434
3533
|
return widgetPropsSchema?.[propKey];
|
|
3435
3534
|
}
|
|
3436
3535
|
|
|
3437
3536
|
// src/components/control-label.tsx
|
|
3438
|
-
var
|
|
3537
|
+
var React23 = __toESM(require("react"));
|
|
3439
3538
|
var import_editor_controls2 = require("@elementor/editor-controls");
|
|
3440
|
-
var
|
|
3539
|
+
var import_ui19 = require("@elementor/ui");
|
|
3441
3540
|
var ControlLabel = ({ children, ...props }) => {
|
|
3442
|
-
return /* @__PURE__ */
|
|
3541
|
+
return /* @__PURE__ */ React23.createElement(import_ui19.Stack, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React23.createElement(import_editor_controls2.ControlFormLabel, { ...props }, children), /* @__PURE__ */ React23.createElement(import_editor_controls2.ControlAdornments, null));
|
|
3443
3542
|
};
|
|
3444
3543
|
|
|
3445
3544
|
// src/components/instance-editing-panel/override-prop-control.tsx
|
|
3446
3545
|
function OverridePropControl({ overridableProp, overrides }) {
|
|
3447
|
-
return /* @__PURE__ */
|
|
3546
|
+
return /* @__PURE__ */ React24.createElement(import_editor_editing_panel3.SettingsField, { bind: "component_instance", propDisplayName: overridableProp.label }, /* @__PURE__ */ React24.createElement(OverrideControl, { overridableProp, overrides }));
|
|
3448
3547
|
}
|
|
3449
3548
|
function OverrideControl({ overridableProp, overrides }) {
|
|
3450
3549
|
const componentId = useCurrentComponentId();
|
|
@@ -3491,7 +3590,7 @@ function OverrideControl({ overridableProp, overrides }) {
|
|
|
3491
3590
|
updateOverridableProp(componentId, overridableValue, { elType, widgetType, propKey });
|
|
3492
3591
|
}
|
|
3493
3592
|
};
|
|
3494
|
-
return /* @__PURE__ */
|
|
3593
|
+
return /* @__PURE__ */ React24.createElement(
|
|
3495
3594
|
import_editor_controls3.PropProvider,
|
|
3496
3595
|
{
|
|
3497
3596
|
propType: propTypeSchema,
|
|
@@ -3501,7 +3600,7 @@ function OverrideControl({ overridableProp, overrides }) {
|
|
|
3501
3600
|
return false;
|
|
3502
3601
|
}
|
|
3503
3602
|
},
|
|
3504
|
-
/* @__PURE__ */
|
|
3603
|
+
/* @__PURE__ */ React24.createElement(import_editor_controls3.PropKeyProvider, { bind: overridableProp.overrideKey }, /* @__PURE__ */ React24.createElement(import_ui20.Stack, { direction: "column", gap: 1, mb: 1.5 }, /* @__PURE__ */ React24.createElement(ControlLabel, null, overridableProp.label), getControl(controls, overridableProp?.originPropFields ?? overridableProp)))
|
|
3505
3604
|
);
|
|
3506
3605
|
}
|
|
3507
3606
|
function getPropValue(value) {
|
|
@@ -3554,7 +3653,7 @@ function createOverrideValue(overrideKey, overrideValue, componentId) {
|
|
|
3554
3653
|
function getControl(controls, originPropFields) {
|
|
3555
3654
|
const ControlComponent = import_editor_editing_panel3.controlsRegistry.get(controls[originPropFields.propKey].value.type);
|
|
3556
3655
|
const controlProps = controls[originPropFields.propKey].value.props;
|
|
3557
|
-
return /* @__PURE__ */
|
|
3656
|
+
return /* @__PURE__ */ React24.createElement(ControlComponent, { ...controlProps });
|
|
3558
3657
|
}
|
|
3559
3658
|
|
|
3560
3659
|
// src/components/instance-editing-panel/override-props-group.tsx
|
|
@@ -3563,12 +3662,12 @@ function OverridePropsGroup({ group, props, overrides }) {
|
|
|
3563
3662
|
const handleClick = () => {
|
|
3564
3663
|
setIsOpen(!isOpen);
|
|
3565
3664
|
};
|
|
3566
|
-
const id2 = (0,
|
|
3665
|
+
const id2 = (0, import_react15.useId)();
|
|
3567
3666
|
const labelId = `label-${id2}`;
|
|
3568
3667
|
const contentId = `content-${id2}`;
|
|
3569
3668
|
const title = group.label;
|
|
3570
|
-
return /* @__PURE__ */
|
|
3571
|
-
|
|
3669
|
+
return /* @__PURE__ */ React25.createElement(import_ui21.Box, { "aria-label": `${title} section` }, /* @__PURE__ */ React25.createElement(
|
|
3670
|
+
import_ui21.ListItemButton,
|
|
3572
3671
|
{
|
|
3573
3672
|
id: labelId,
|
|
3574
3673
|
"aria-controls": contentId,
|
|
@@ -3577,16 +3676,16 @@ function OverridePropsGroup({ group, props, overrides }) {
|
|
|
3577
3676
|
p: 0,
|
|
3578
3677
|
sx: { "&:hover": { backgroundColor: "transparent" } }
|
|
3579
3678
|
},
|
|
3580
|
-
/* @__PURE__ */
|
|
3581
|
-
|
|
3679
|
+
/* @__PURE__ */ React25.createElement(import_ui21.Stack, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React25.createElement(
|
|
3680
|
+
import_ui21.ListItemText,
|
|
3582
3681
|
{
|
|
3583
3682
|
secondary: title,
|
|
3584
3683
|
secondaryTypographyProps: { color: "text.primary", variant: "caption", fontWeight: "bold" },
|
|
3585
3684
|
sx: { flexGrow: 0, flexShrink: 1, marginInlineEnd: 1 }
|
|
3586
3685
|
}
|
|
3587
3686
|
)),
|
|
3588
|
-
/* @__PURE__ */
|
|
3589
|
-
), /* @__PURE__ */
|
|
3687
|
+
/* @__PURE__ */ React25.createElement(import_editor_ui10.CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
|
|
3688
|
+
), /* @__PURE__ */ React25.createElement(import_ui21.Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React25.createElement(import_ui21.Stack, { direction: "column", gap: 1, p: 2 }, group.props.map((overrideKey) => /* @__PURE__ */ React25.createElement(
|
|
3590
3689
|
OverridePropControl,
|
|
3591
3690
|
{
|
|
3592
3691
|
key: overrideKey,
|
|
@@ -3603,16 +3702,16 @@ function InstanceEditingPanel() {
|
|
|
3603
3702
|
const overrides = settings?.overrides?.value;
|
|
3604
3703
|
const component = useComponent(componentId ?? null);
|
|
3605
3704
|
const overridableProps = useOverridableProps(componentId ?? null);
|
|
3606
|
-
const componentInstanceId = (0,
|
|
3705
|
+
const componentInstanceId = (0, import_editor_elements14.useSelectedElement)()?.element?.id ?? null;
|
|
3607
3706
|
if (!componentId || !overridableProps || !component) {
|
|
3608
3707
|
return null;
|
|
3609
3708
|
}
|
|
3610
|
-
const panelTitle = (0,
|
|
3709
|
+
const panelTitle = (0, import_i18n23.__)("Edit %s", "elementor").replace("%s", component.name);
|
|
3611
3710
|
const handleEditComponent = () => switchToComponent(componentId, componentInstanceId);
|
|
3612
3711
|
const isNonEmptyGroup = (group) => group !== null && group.props.length > 0;
|
|
3613
3712
|
const groups = overridableProps.groups.order.map((groupId) => overridableProps.groups.items[groupId] ?? null).filter(isNonEmptyGroup);
|
|
3614
3713
|
const isEmpty = groups.length === 0 || Object.keys(overridableProps.props).length === 0;
|
|
3615
|
-
return /* @__PURE__ */
|
|
3714
|
+
return /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement(import_editor_panels3.PanelHeader, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React26.createElement(import_ui22.Stack, { direction: "row", alignContent: "space-between", flexGrow: 1 }, /* @__PURE__ */ React26.createElement(import_ui22.Stack, { direction: "row", alignItems: "center", justifyContent: "start", gap: 1, flexGrow: 1 }, /* @__PURE__ */ React26.createElement(import_icons14.ComponentsIcon, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React26.createElement(import_editor_panels3.PanelHeaderTitle, null, component.name)), /* @__PURE__ */ React26.createElement(import_ui22.Tooltip, { title: panelTitle }, /* @__PURE__ */ React26.createElement(import_ui22.IconButton, { size: "tiny", onClick: handleEditComponent, "aria-label": panelTitle }, /* @__PURE__ */ React26.createElement(import_icons14.PencilIcon, { fontSize: "tiny" }))))), /* @__PURE__ */ React26.createElement(import_editor_panels3.PanelBody, null, /* @__PURE__ */ React26.createElement(import_editor_controls4.ControlAdornmentsProvider, { items: (0, import_editor_editing_panel5.getFieldIndicators)("settings") }, isEmpty ? /* @__PURE__ */ React26.createElement(EmptyState2, { onEditComponent: handleEditComponent }) : /* @__PURE__ */ React26.createElement(import_ui22.Stack, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React26.createElement(
|
|
3616
3715
|
OverridePropsGroup,
|
|
3617
3716
|
{
|
|
3618
3717
|
key: group.id,
|
|
@@ -3624,18 +3723,18 @@ function InstanceEditingPanel() {
|
|
|
3624
3723
|
}
|
|
3625
3724
|
|
|
3626
3725
|
// src/components/overridable-props/overridable-prop-control.tsx
|
|
3627
|
-
var
|
|
3726
|
+
var React28 = __toESM(require("react"));
|
|
3628
3727
|
var import_editor_controls5 = require("@elementor/editor-controls");
|
|
3629
3728
|
var import_editor_editing_panel6 = require("@elementor/editor-editing-panel");
|
|
3630
3729
|
|
|
3631
3730
|
// src/provider/overridable-prop-context.tsx
|
|
3632
|
-
var
|
|
3633
|
-
var
|
|
3634
|
-
var OverridablePropContext = (0,
|
|
3731
|
+
var React27 = __toESM(require("react"));
|
|
3732
|
+
var import_react16 = require("react");
|
|
3733
|
+
var OverridablePropContext = (0, import_react16.createContext)(null);
|
|
3635
3734
|
function OverridablePropProvider({ children, ...props }) {
|
|
3636
|
-
return /* @__PURE__ */
|
|
3735
|
+
return /* @__PURE__ */ React27.createElement(OverridablePropContext.Provider, { value: props }, children);
|
|
3637
3736
|
}
|
|
3638
|
-
var useOverridablePropValue = () => (0,
|
|
3737
|
+
var useOverridablePropValue = () => (0, import_react16.useContext)(OverridablePropContext)?.value;
|
|
3639
3738
|
|
|
3640
3739
|
// src/components/overridable-props/overridable-prop-control.tsx
|
|
3641
3740
|
function OverridablePropControl({
|
|
@@ -3672,7 +3771,7 @@ function OverridablePropControl({
|
|
|
3672
3771
|
});
|
|
3673
3772
|
const propValue = isComponentInstance2 ? (value.origin_value?.value).override_value : value.origin_value;
|
|
3674
3773
|
const objectPlaceholder = placeholder ? { [bind]: placeholder } : void 0;
|
|
3675
|
-
return /* @__PURE__ */
|
|
3774
|
+
return /* @__PURE__ */ React28.createElement(OverridablePropProvider, { value }, /* @__PURE__ */ React28.createElement(
|
|
3676
3775
|
import_editor_controls5.PropProvider,
|
|
3677
3776
|
{
|
|
3678
3777
|
...propContext,
|
|
@@ -3683,17 +3782,17 @@ function OverridablePropControl({
|
|
|
3683
3782
|
},
|
|
3684
3783
|
placeholder: objectPlaceholder
|
|
3685
3784
|
},
|
|
3686
|
-
/* @__PURE__ */
|
|
3785
|
+
/* @__PURE__ */ React28.createElement(import_editor_controls5.PropKeyProvider, { bind }, /* @__PURE__ */ React28.createElement(import_editor_controls5.ControlReplacementsProvider, { replacements: [] }, /* @__PURE__ */ React28.createElement(OriginalControl, { ...props })))
|
|
3687
3786
|
));
|
|
3688
3787
|
}
|
|
3689
3788
|
|
|
3690
3789
|
// src/components/overridable-props/overridable-prop-indicator.tsx
|
|
3691
|
-
var
|
|
3790
|
+
var React30 = __toESM(require("react"));
|
|
3692
3791
|
var import_editor_controls6 = require("@elementor/editor-controls");
|
|
3693
3792
|
var import_editor_editing_panel7 = require("@elementor/editor-editing-panel");
|
|
3694
|
-
var
|
|
3695
|
-
var
|
|
3696
|
-
var
|
|
3793
|
+
var import_editor_elements15 = require("@elementor/editor-elements");
|
|
3794
|
+
var import_ui24 = require("@elementor/ui");
|
|
3795
|
+
var import_i18n25 = require("@wordpress/i18n");
|
|
3697
3796
|
|
|
3698
3797
|
// src/store/actions/set-overridable-prop.ts
|
|
3699
3798
|
var import_store58 = require("@elementor/store");
|
|
@@ -3760,13 +3859,13 @@ function setOverridableProp({
|
|
|
3760
3859
|
}
|
|
3761
3860
|
|
|
3762
3861
|
// src/components/overridable-props/indicator.tsx
|
|
3763
|
-
var
|
|
3764
|
-
var
|
|
3862
|
+
var React29 = __toESM(require("react"));
|
|
3863
|
+
var import_react17 = require("react");
|
|
3765
3864
|
var import_icons15 = require("@elementor/icons");
|
|
3766
|
-
var
|
|
3767
|
-
var
|
|
3865
|
+
var import_ui23 = require("@elementor/ui");
|
|
3866
|
+
var import_i18n24 = require("@wordpress/i18n");
|
|
3768
3867
|
var SIZE2 = "tiny";
|
|
3769
|
-
var IconContainer = (0,
|
|
3868
|
+
var IconContainer = (0, import_ui23.styled)(import_ui23.Box)`
|
|
3770
3869
|
pointer-events: none;
|
|
3771
3870
|
opacity: 0;
|
|
3772
3871
|
transition: opacity 0.2s ease-in-out;
|
|
@@ -3783,7 +3882,7 @@ var IconContainer = (0, import_ui22.styled)(import_ui22.Box)`
|
|
|
3783
3882
|
stroke-width: 2px;
|
|
3784
3883
|
}
|
|
3785
3884
|
`;
|
|
3786
|
-
var Content = (0,
|
|
3885
|
+
var Content = (0, import_ui23.styled)(import_ui23.Box)`
|
|
3787
3886
|
position: relative;
|
|
3788
3887
|
display: flex;
|
|
3789
3888
|
align-items: center;
|
|
@@ -3820,13 +3919,13 @@ var Content = (0, import_ui22.styled)(import_ui22.Box)`
|
|
|
3820
3919
|
}
|
|
3821
3920
|
}
|
|
3822
3921
|
`;
|
|
3823
|
-
var Indicator2 = (0,
|
|
3922
|
+
var Indicator2 = (0, import_react17.forwardRef)(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */ React29.createElement(Content, { ref, ...props, className: isOpen || isOverridable ? "enlarged" : "" }, /* @__PURE__ */ React29.createElement(
|
|
3824
3923
|
IconContainer,
|
|
3825
3924
|
{
|
|
3826
3925
|
className: "icon",
|
|
3827
|
-
"aria-label": isOverridable ? (0,
|
|
3926
|
+
"aria-label": isOverridable ? (0, import_i18n24.__)("Overridable property", "elementor") : (0, import_i18n24.__)("Make prop overridable", "elementor")
|
|
3828
3927
|
},
|
|
3829
|
-
isOverridable ? /* @__PURE__ */
|
|
3928
|
+
isOverridable ? /* @__PURE__ */ React29.createElement(import_icons15.CheckIcon, { fontSize: SIZE2 }) : /* @__PURE__ */ React29.createElement(import_icons15.PlusIcon, { fontSize: SIZE2 })
|
|
3830
3929
|
)));
|
|
3831
3930
|
|
|
3832
3931
|
// src/components/overridable-props/utils/get-overridable-prop.ts
|
|
@@ -3851,7 +3950,7 @@ function OverridablePropIndicator() {
|
|
|
3851
3950
|
if (!isPropAllowed(bind) || !componentId || !overridableProps) {
|
|
3852
3951
|
return null;
|
|
3853
3952
|
}
|
|
3854
|
-
return /* @__PURE__ */
|
|
3953
|
+
return /* @__PURE__ */ React30.createElement(Content2, { componentId, overridableProps });
|
|
3855
3954
|
}
|
|
3856
3955
|
function Content2({ componentId, overridableProps }) {
|
|
3857
3956
|
const {
|
|
@@ -3864,12 +3963,12 @@ function Content2({ componentId, overridableProps }) {
|
|
|
3864
3963
|
componentOverridablePropTypeUtil
|
|
3865
3964
|
);
|
|
3866
3965
|
const overridableValue = boundPropOverridableValue ?? contextOverridableValue;
|
|
3867
|
-
const popupState = (0,
|
|
3966
|
+
const popupState = (0, import_ui24.usePopupState)({
|
|
3868
3967
|
variant: "popover"
|
|
3869
3968
|
});
|
|
3870
|
-
const triggerProps = (0,
|
|
3871
|
-
const popoverProps = (0,
|
|
3872
|
-
const { elType } = (0,
|
|
3969
|
+
const triggerProps = (0, import_ui24.bindTrigger)(popupState);
|
|
3970
|
+
const popoverProps = (0, import_ui24.bindPopover)(popupState);
|
|
3971
|
+
const { elType } = (0, import_editor_elements15.getWidgetsCache)()?.[elementType.key] ?? { elType: "widget" };
|
|
3873
3972
|
const handleSubmit = ({ label, group }) => {
|
|
3874
3973
|
const propTypeDefault = propType.default ?? {};
|
|
3875
3974
|
const originValue = (!overridableValue ? value : overridableValue?.origin_value) ?? propTypeDefault;
|
|
@@ -3895,8 +3994,8 @@ function Content2({ componentId, overridableProps }) {
|
|
|
3895
3994
|
popupState.close();
|
|
3896
3995
|
};
|
|
3897
3996
|
const overridableConfig = overridableValue ? getOverridableProp({ componentId, overrideKey: overridableValue.override_key }) : void 0;
|
|
3898
|
-
return /* @__PURE__ */
|
|
3899
|
-
|
|
3997
|
+
return /* @__PURE__ */ React30.createElement(React30.Fragment, null, /* @__PURE__ */ React30.createElement(import_ui24.Tooltip, { placement: "top", title: (0, import_i18n25.__)("Override Property", "elementor") }, /* @__PURE__ */ React30.createElement(Indicator2, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React30.createElement(
|
|
3998
|
+
import_ui24.Popover,
|
|
3900
3999
|
{
|
|
3901
4000
|
disableScrollLock: true,
|
|
3902
4001
|
anchorOrigin: {
|
|
@@ -3912,7 +4011,7 @@ function Content2({ componentId, overridableProps }) {
|
|
|
3912
4011
|
},
|
|
3913
4012
|
...popoverProps
|
|
3914
4013
|
},
|
|
3915
|
-
/* @__PURE__ */
|
|
4014
|
+
/* @__PURE__ */ React30.createElement(
|
|
3916
4015
|
OverridablePropForm,
|
|
3917
4016
|
{
|
|
3918
4017
|
onSubmit: handleSubmit,
|
|
@@ -3930,7 +4029,7 @@ function isPropAllowed(bind) {
|
|
|
3930
4029
|
}
|
|
3931
4030
|
|
|
3932
4031
|
// src/hooks/regenerate-override-keys.ts
|
|
3933
|
-
var
|
|
4032
|
+
var import_editor_elements16 = require("@elementor/editor-elements");
|
|
3934
4033
|
var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
|
|
3935
4034
|
var import_utils8 = require("@elementor/utils");
|
|
3936
4035
|
function initRegenerateOverrideKeys() {
|
|
@@ -3951,11 +4050,11 @@ function regenerateOverrideKeysForContainers(result) {
|
|
|
3951
4050
|
});
|
|
3952
4051
|
}
|
|
3953
4052
|
function regenerateOverrideKeysRecursive(elementId) {
|
|
3954
|
-
const container = (0,
|
|
4053
|
+
const container = (0, import_editor_elements16.getContainer)(elementId);
|
|
3955
4054
|
if (!container) {
|
|
3956
4055
|
return;
|
|
3957
4056
|
}
|
|
3958
|
-
(0,
|
|
4057
|
+
(0, import_editor_elements16.getAllDescendants)(container).forEach(regenerateOverrideKeys);
|
|
3959
4058
|
}
|
|
3960
4059
|
function regenerateOverrideKeys(element) {
|
|
3961
4060
|
if (!isComponentInstance(element.model.toJSON())) {
|
|
@@ -3989,7 +4088,7 @@ function regenerateOverrideKeys(element) {
|
|
|
3989
4088
|
}
|
|
3990
4089
|
}
|
|
3991
4090
|
};
|
|
3992
|
-
(0,
|
|
4091
|
+
(0, import_editor_elements16.updateElementSettings)({
|
|
3993
4092
|
id: element.id,
|
|
3994
4093
|
props: { component_instance: newComponentInstance },
|
|
3995
4094
|
withHistory: false
|
|
@@ -4009,12 +4108,12 @@ function hasOverrides(settings) {
|
|
|
4009
4108
|
}
|
|
4010
4109
|
|
|
4011
4110
|
// src/mcp/index.ts
|
|
4012
|
-
var
|
|
4111
|
+
var import_editor_mcp3 = require("@elementor/editor-mcp");
|
|
4013
4112
|
|
|
4014
4113
|
// src/mcp/save-as-component-tool.ts
|
|
4015
4114
|
var import_editor_canvas8 = require("@elementor/editor-canvas");
|
|
4016
|
-
var
|
|
4017
|
-
var
|
|
4115
|
+
var import_editor_elements17 = require("@elementor/editor-elements");
|
|
4116
|
+
var import_editor_mcp2 = require("@elementor/editor-mcp");
|
|
4018
4117
|
var import_http_client2 = require("@elementor/http-client");
|
|
4019
4118
|
var import_schema6 = require("@elementor/schema");
|
|
4020
4119
|
var import_utils9 = require("@elementor/utils");
|
|
@@ -4051,7 +4150,7 @@ var ERROR_MESSAGES2 = {
|
|
|
4051
4150
|
var handleSaveAsComponent = async (params) => {
|
|
4052
4151
|
const { element_id: elementId, component_name: componentName, overridable_props: overridablePropsInput } = params;
|
|
4053
4152
|
const validElementTypes = getValidElementTypes();
|
|
4054
|
-
const container = (0,
|
|
4153
|
+
const container = (0, import_editor_elements17.getContainer)(elementId);
|
|
4055
4154
|
if (!container) {
|
|
4056
4155
|
throw new Error(ERROR_MESSAGES2.ELEMENT_NOT_FOUND);
|
|
4057
4156
|
}
|
|
@@ -4098,7 +4197,7 @@ function enrichOverridableProps(input, rootElement) {
|
|
|
4098
4197
|
}
|
|
4099
4198
|
const elType = element.elType;
|
|
4100
4199
|
const widgetType = element.widgetType || element.elType;
|
|
4101
|
-
const elementType = (0,
|
|
4200
|
+
const elementType = (0, import_editor_elements17.getElementType)(widgetType);
|
|
4102
4201
|
if (!elementType) {
|
|
4103
4202
|
throw new Error(
|
|
4104
4203
|
`Element type "${widgetType}" is not atomic or does not have a settings schema. Cannot expose property "${propKey}" for element "${elementId}".`
|
|
@@ -4167,7 +4266,7 @@ function findElementById(root, targetId) {
|
|
|
4167
4266
|
return null;
|
|
4168
4267
|
}
|
|
4169
4268
|
function getValidElementTypes() {
|
|
4170
|
-
const types = (0,
|
|
4269
|
+
const types = (0, import_editor_elements17.getWidgetsCache)();
|
|
4171
4270
|
if (!types) {
|
|
4172
4271
|
return [];
|
|
4173
4272
|
}
|
|
@@ -4180,7 +4279,7 @@ function getValidElementTypes() {
|
|
|
4180
4279
|
}, []);
|
|
4181
4280
|
}
|
|
4182
4281
|
var generatePrompt = () => {
|
|
4183
|
-
const saveAsComponentPrompt = (0,
|
|
4282
|
+
const saveAsComponentPrompt = (0, import_editor_mcp2.toolPrompts)("save-as-component");
|
|
4184
4283
|
saveAsComponentPrompt.description(`
|
|
4185
4284
|
Save an existing element as a reusable component in the Elementor editor.
|
|
4186
4285
|
|
|
@@ -4324,7 +4423,7 @@ Component with overridable properties:
|
|
|
4324
4423
|
return saveAsComponentPrompt.prompt();
|
|
4325
4424
|
};
|
|
4326
4425
|
var initSaveAsComponentTool = () => {
|
|
4327
|
-
return (0,
|
|
4426
|
+
return (0, import_editor_mcp2.getMCPByDomain)("components").addTool({
|
|
4328
4427
|
name: "save-as-component",
|
|
4329
4428
|
schema: InputSchema,
|
|
4330
4429
|
outputSchema: OutputSchema,
|
|
@@ -4335,7 +4434,7 @@ var initSaveAsComponentTool = () => {
|
|
|
4335
4434
|
|
|
4336
4435
|
// src/mcp/index.ts
|
|
4337
4436
|
function initMcp() {
|
|
4338
|
-
const { setMCPDescription } = (0,
|
|
4437
|
+
const { setMCPDescription } = (0, import_editor_mcp3.getMCPByDomain)("components");
|
|
4339
4438
|
setMCPDescription(
|
|
4340
4439
|
`Elementor Editor Components MCP - Tools for creating and managing reusable components.
|
|
4341
4440
|
Components are reusable blocks of content that can be used multiple times across the pages, its a widget which contains a set of elements and styles.`
|
|
@@ -4344,25 +4443,25 @@ function initMcp() {
|
|
|
4344
4443
|
}
|
|
4345
4444
|
|
|
4346
4445
|
// src/populate-store.ts
|
|
4347
|
-
var
|
|
4446
|
+
var import_react18 = require("react");
|
|
4348
4447
|
var import_store63 = require("@elementor/store");
|
|
4349
4448
|
function PopulateStore() {
|
|
4350
|
-
(0,
|
|
4449
|
+
(0, import_react18.useEffect)(() => {
|
|
4351
4450
|
(0, import_store63.__dispatch)(loadComponents());
|
|
4352
4451
|
}, []);
|
|
4353
4452
|
return null;
|
|
4354
4453
|
}
|
|
4355
4454
|
|
|
4356
4455
|
// src/prevent-circular-nesting.ts
|
|
4357
|
-
var
|
|
4456
|
+
var import_editor_elements18 = require("@elementor/editor-elements");
|
|
4358
4457
|
var import_editor_notifications3 = require("@elementor/editor-notifications");
|
|
4359
4458
|
var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
|
|
4360
4459
|
var import_store64 = require("@elementor/store");
|
|
4361
|
-
var
|
|
4460
|
+
var import_i18n26 = require("@wordpress/i18n");
|
|
4362
4461
|
var COMPONENT_TYPE = "e-component";
|
|
4363
4462
|
var COMPONENT_CIRCULAR_NESTING_ALERT = {
|
|
4364
4463
|
type: "default",
|
|
4365
|
-
message: (0,
|
|
4464
|
+
message: (0, import_i18n26.__)("Can't add this component - components that contain each other can't be nested.", "elementor"),
|
|
4366
4465
|
id: "circular-component-nesting-blocked"
|
|
4367
4466
|
};
|
|
4368
4467
|
function initCircularNestingPrevention() {
|
|
@@ -4449,7 +4548,7 @@ function blockCircularMove(args) {
|
|
|
4449
4548
|
if (!container) {
|
|
4450
4549
|
return false;
|
|
4451
4550
|
}
|
|
4452
|
-
const allElements = (0,
|
|
4551
|
+
const allElements = (0, import_editor_elements18.getAllDescendants)(container);
|
|
4453
4552
|
return allElements.some((element) => {
|
|
4454
4553
|
const componentId = extractComponentIdFromContainer(element);
|
|
4455
4554
|
if (componentId === null) {
|
|
@@ -4510,7 +4609,7 @@ var componentsStylesProvider = (0, import_editor_styles_repository.createStylesP
|
|
|
4510
4609
|
});
|
|
4511
4610
|
|
|
4512
4611
|
// src/sync/create-components-before-save.ts
|
|
4513
|
-
var
|
|
4612
|
+
var import_editor_elements19 = require("@elementor/editor-elements");
|
|
4514
4613
|
var import_store70 = require("@elementor/store");
|
|
4515
4614
|
async function createComponentsBeforeSave({
|
|
4516
4615
|
elements,
|
|
@@ -4578,7 +4677,7 @@ function shouldUpdateElement(element, uidToComponentId) {
|
|
|
4578
4677
|
return { shouldUpdate: false, newComponentId: null };
|
|
4579
4678
|
}
|
|
4580
4679
|
function updateElementComponentId(elementId, componentId) {
|
|
4581
|
-
(0,
|
|
4680
|
+
(0, import_editor_elements19.updateElementSettings)({
|
|
4582
4681
|
id: elementId,
|
|
4583
4682
|
props: {
|
|
4584
4683
|
component_instance: {
|
|
@@ -4656,14 +4755,14 @@ var updateComponentTitleBeforeSave = async () => {
|
|
|
4656
4755
|
};
|
|
4657
4756
|
|
|
4658
4757
|
// src/sync/update-components-before-save.ts
|
|
4659
|
-
var
|
|
4758
|
+
var import_editor_documents12 = require("@elementor/editor-documents");
|
|
4660
4759
|
async function updateComponentsBeforeSave({ status, elements }) {
|
|
4661
4760
|
if (status !== "publish") {
|
|
4662
4761
|
return;
|
|
4663
4762
|
}
|
|
4664
4763
|
const componentIds = await getComponentIds(elements);
|
|
4665
4764
|
const componentDocumentData = await Promise.all(componentIds.map(getComponentDocumentData));
|
|
4666
|
-
const draftIds = componentDocumentData.filter((document) => !!document).filter(
|
|
4765
|
+
const draftIds = componentDocumentData.filter((document) => !!document).filter(import_editor_documents12.isDocumentDirty).map((document) => document.id);
|
|
4667
4766
|
if (draftIds.length === 0) {
|
|
4668
4767
|
return;
|
|
4669
4768
|
}
|
|
@@ -4693,7 +4792,7 @@ function init() {
|
|
|
4693
4792
|
(options) => createComponentType({ ...options, showLockedByModal: openEditModeDialog })
|
|
4694
4793
|
);
|
|
4695
4794
|
(0, import_editor_v1_adapters10.registerDataHook)("dependency", "editor/documents/close", (args) => {
|
|
4696
|
-
const document = (0,
|
|
4795
|
+
const document = (0, import_editor_documents13.getV1CurrentDocument)();
|
|
4697
4796
|
if (document.config.type === COMPONENT_DOCUMENT_TYPE) {
|
|
4698
4797
|
args.mode = "autosave";
|
|
4699
4798
|
}
|
|
@@ -4703,7 +4802,7 @@ function init() {
|
|
|
4703
4802
|
window.elementorCommon.__beforeSave = beforeSave;
|
|
4704
4803
|
(0, import_editor_elements_panel.injectTab)({
|
|
4705
4804
|
id: "components",
|
|
4706
|
-
label: (0,
|
|
4805
|
+
label: (0, import_i18n27.__)("Components", "elementor"),
|
|
4707
4806
|
component: Components
|
|
4708
4807
|
});
|
|
4709
4808
|
(0, import_editor.injectIntoTop)({
|
|
@@ -4723,7 +4822,7 @@ function init() {
|
|
|
4723
4822
|
component: ComponentPanelHeader
|
|
4724
4823
|
});
|
|
4725
4824
|
(0, import_editor_v1_adapters10.registerDataHook)("after", "editor/documents/attach-preview", async () => {
|
|
4726
|
-
const { id: id2, config } = (0,
|
|
4825
|
+
const { id: id2, config } = (0, import_editor_documents13.getV1CurrentDocument)();
|
|
4727
4826
|
if (id2) {
|
|
4728
4827
|
removeComponentStyles(id2);
|
|
4729
4828
|
}
|