@elementor/editor-components 3.35.0-421 → 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 +288 -219
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +242 -162
- 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/dist/index.js
CHANGED
|
@@ -44,7 +44,7 @@ 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,18 +1695,12 @@ 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
1706
|
var import_editor_documents7 = require("@elementor/editor-documents");
|
|
@@ -2007,15 +2009,50 @@ function findComponentInstancesByUid(documentContainer, componentUid) {
|
|
|
2007
2009
|
});
|
|
2008
2010
|
}
|
|
2009
2011
|
|
|
2010
|
-
// src/components/components-tab/
|
|
2012
|
+
// src/components/components-tab/angie-promotion-modal.tsx
|
|
2011
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"));
|
|
2012
2049
|
var import_react8 = require("react");
|
|
2013
2050
|
var import_editor_canvas5 = require("@elementor/editor-canvas");
|
|
2014
2051
|
var import_editor_elements8 = require("@elementor/editor-elements");
|
|
2015
2052
|
var import_editor_ui6 = require("@elementor/editor-ui");
|
|
2016
2053
|
var import_icons9 = require("@elementor/icons");
|
|
2017
|
-
var
|
|
2018
|
-
var
|
|
2054
|
+
var import_ui13 = require("@elementor/ui");
|
|
2055
|
+
var import_i18n16 = require("@wordpress/i18n");
|
|
2019
2056
|
|
|
2020
2057
|
// src/store/actions/archive-component.ts
|
|
2021
2058
|
var import_editor_documents8 = require("@elementor/editor-documents");
|
|
@@ -2143,14 +2180,14 @@ var import_store41 = require("@elementor/store");
|
|
|
2143
2180
|
|
|
2144
2181
|
// src/components/create-component-form/utils/component-form-schema.ts
|
|
2145
2182
|
var import_schema = require("@elementor/schema");
|
|
2146
|
-
var
|
|
2183
|
+
var import_i18n15 = require("@wordpress/i18n");
|
|
2147
2184
|
var MIN_NAME_LENGTH = 2;
|
|
2148
2185
|
var MAX_NAME_LENGTH = 50;
|
|
2149
|
-
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"));
|
|
2150
2187
|
var createBaseComponentSchema = (existingNames) => {
|
|
2151
2188
|
return import_schema.z.object({
|
|
2152
2189
|
componentName: baseComponentSchema.refine((value) => !existingNames.includes(value), {
|
|
2153
|
-
message: (0,
|
|
2190
|
+
message: (0, import_i18n15.__)("Component name already exists", "elementor")
|
|
2154
2191
|
})
|
|
2155
2192
|
});
|
|
2156
2193
|
};
|
|
@@ -2158,9 +2195,9 @@ var createSubmitComponentSchema = (existingNames) => {
|
|
|
2158
2195
|
const baseSchema = createBaseComponentSchema(existingNames);
|
|
2159
2196
|
return baseSchema.extend({
|
|
2160
2197
|
componentName: baseSchema.shape.componentName.refine((value) => value.length > 0, {
|
|
2161
|
-
message: (0,
|
|
2198
|
+
message: (0, import_i18n15.__)("Component name is required.", "elementor")
|
|
2162
2199
|
}).refine((value) => value.length >= MIN_NAME_LENGTH, {
|
|
2163
|
-
message: (0,
|
|
2200
|
+
message: (0, import_i18n15.__)("Component name is too short. Please enter at least 2 characters.", "elementor")
|
|
2164
2201
|
})
|
|
2165
2202
|
});
|
|
2166
2203
|
};
|
|
@@ -2266,7 +2303,7 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
|
|
|
2266
2303
|
validation: validateComponentTitle
|
|
2267
2304
|
});
|
|
2268
2305
|
const componentModel = createComponentModel2(component);
|
|
2269
|
-
const popupState = (0,
|
|
2306
|
+
const popupState = (0, import_ui13.usePopupState)({
|
|
2270
2307
|
variant: "popover",
|
|
2271
2308
|
disableAutoFocus: true
|
|
2272
2309
|
});
|
|
@@ -2284,7 +2321,7 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
|
|
|
2284
2321
|
}
|
|
2285
2322
|
archiveComponent(component.id);
|
|
2286
2323
|
};
|
|
2287
|
-
return /* @__PURE__ */
|
|
2324
|
+
return /* @__PURE__ */ React14.createElement(import_ui13.Stack, null, /* @__PURE__ */ React14.createElement(
|
|
2288
2325
|
import_editor_ui6.WarningInfotip,
|
|
2289
2326
|
{
|
|
2290
2327
|
open: Boolean(error),
|
|
@@ -2293,8 +2330,8 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
|
|
|
2293
2330
|
width: itemRef.current?.getBoundingClientRect().width,
|
|
2294
2331
|
offset: [0, -15]
|
|
2295
2332
|
},
|
|
2296
|
-
/* @__PURE__ */
|
|
2297
|
-
|
|
2333
|
+
/* @__PURE__ */ React14.createElement(
|
|
2334
|
+
import_ui13.ListItemButton,
|
|
2298
2335
|
{
|
|
2299
2336
|
draggable: true,
|
|
2300
2337
|
onDragStart: (event) => (0, import_editor_canvas5.startDragElementFromPanel)(componentModel, event),
|
|
@@ -2312,8 +2349,8 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
|
|
|
2312
2349
|
gap: 1
|
|
2313
2350
|
}
|
|
2314
2351
|
},
|
|
2315
|
-
/* @__PURE__ */
|
|
2316
|
-
|
|
2352
|
+
/* @__PURE__ */ React14.createElement(
|
|
2353
|
+
import_ui13.Box,
|
|
2317
2354
|
{
|
|
2318
2355
|
display: "flex",
|
|
2319
2356
|
alignItems: "center",
|
|
@@ -2322,31 +2359,31 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
|
|
|
2322
2359
|
flexGrow: 1,
|
|
2323
2360
|
onClick: handleClick
|
|
2324
2361
|
},
|
|
2325
|
-
/* @__PURE__ */
|
|
2326
|
-
/* @__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(
|
|
2327
2364
|
import_editor_ui6.EditableField,
|
|
2328
2365
|
{
|
|
2329
2366
|
ref: editableRef,
|
|
2330
|
-
as:
|
|
2367
|
+
as: import_ui13.Typography,
|
|
2331
2368
|
variant: "caption",
|
|
2332
2369
|
...getEditableProps()
|
|
2333
2370
|
}
|
|
2334
|
-
) : /* @__PURE__ */
|
|
2371
|
+
) : /* @__PURE__ */ React14.createElement(
|
|
2335
2372
|
import_editor_ui6.EllipsisWithTooltip,
|
|
2336
2373
|
{
|
|
2337
2374
|
title: component.name,
|
|
2338
|
-
as:
|
|
2375
|
+
as: import_ui13.Typography,
|
|
2339
2376
|
variant: "caption",
|
|
2340
2377
|
color: "text.primary"
|
|
2341
2378
|
}
|
|
2342
2379
|
)))
|
|
2343
2380
|
),
|
|
2344
|
-
/* @__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" }))
|
|
2345
2382
|
)
|
|
2346
|
-
), /* @__PURE__ */
|
|
2347
|
-
|
|
2383
|
+
), /* @__PURE__ */ React14.createElement(
|
|
2384
|
+
import_ui13.Menu,
|
|
2348
2385
|
{
|
|
2349
|
-
...(0,
|
|
2386
|
+
...(0, import_ui13.bindMenu)(popupState),
|
|
2350
2387
|
anchorOrigin: {
|
|
2351
2388
|
vertical: "bottom",
|
|
2352
2389
|
horizontal: "right"
|
|
@@ -2356,7 +2393,7 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
|
|
|
2356
2393
|
horizontal: "right"
|
|
2357
2394
|
}
|
|
2358
2395
|
},
|
|
2359
|
-
/* @__PURE__ */
|
|
2396
|
+
/* @__PURE__ */ React14.createElement(
|
|
2360
2397
|
import_editor_ui6.MenuListItem,
|
|
2361
2398
|
{
|
|
2362
2399
|
sx: { minWidth: "160px" },
|
|
@@ -2365,9 +2402,9 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
|
|
|
2365
2402
|
openEditMode();
|
|
2366
2403
|
}
|
|
2367
2404
|
},
|
|
2368
|
-
(0,
|
|
2405
|
+
(0, import_i18n16.__)("Rename", "elementor")
|
|
2369
2406
|
),
|
|
2370
|
-
/* @__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")))
|
|
2371
2408
|
));
|
|
2372
2409
|
};
|
|
2373
2410
|
var addComponentToPage = (model) => {
|
|
@@ -2389,7 +2426,7 @@ var validateComponentTitle = (newTitle) => {
|
|
|
2389
2426
|
}
|
|
2390
2427
|
return result.errorMessage;
|
|
2391
2428
|
};
|
|
2392
|
-
var Indicator = (0,
|
|
2429
|
+
var Indicator = (0, import_ui13.styled)(import_ui13.Box, {
|
|
2393
2430
|
shouldForwardProp: (prop) => prop !== "isActive" && prop !== "isError"
|
|
2394
2431
|
})(({ theme, isActive, isError }) => ({
|
|
2395
2432
|
display: "flex",
|
|
@@ -2412,13 +2449,13 @@ var getIndicatorBorder = ({ isActive, isError, theme }) => {
|
|
|
2412
2449
|
};
|
|
2413
2450
|
|
|
2414
2451
|
// src/components/components-tab/loading-components.tsx
|
|
2415
|
-
var
|
|
2416
|
-
var
|
|
2452
|
+
var React15 = __toESM(require("react"));
|
|
2453
|
+
var import_ui14 = require("@elementor/ui");
|
|
2417
2454
|
var ROWS_COUNT = 6;
|
|
2418
2455
|
var rows = Array.from({ length: ROWS_COUNT }, (_, index) => index);
|
|
2419
2456
|
var LoadingComponents = () => {
|
|
2420
|
-
return /* @__PURE__ */
|
|
2421
|
-
|
|
2457
|
+
return /* @__PURE__ */ React15.createElement(
|
|
2458
|
+
import_ui14.Stack,
|
|
2422
2459
|
{
|
|
2423
2460
|
"aria-label": "Loading components",
|
|
2424
2461
|
gap: 1,
|
|
@@ -2439,32 +2476,37 @@ var LoadingComponents = () => {
|
|
|
2439
2476
|
}
|
|
2440
2477
|
}
|
|
2441
2478
|
},
|
|
2442
|
-
rows.map((row) => /* @__PURE__ */
|
|
2443
|
-
|
|
2479
|
+
rows.map((row) => /* @__PURE__ */ React15.createElement(
|
|
2480
|
+
import_ui14.ListItemButton,
|
|
2444
2481
|
{
|
|
2445
2482
|
key: row,
|
|
2446
2483
|
sx: { border: "solid 1px", borderColor: "divider", py: 0.5, px: 1 },
|
|
2447
2484
|
shape: "rounded"
|
|
2448
2485
|
},
|
|
2449
|
-
/* @__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" }))
|
|
2450
2487
|
))
|
|
2451
2488
|
);
|
|
2452
2489
|
};
|
|
2453
2490
|
|
|
2454
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
|
+
};
|
|
2455
2497
|
function ComponentsList() {
|
|
2456
2498
|
const { components, isLoading, searchValue } = useFilteredComponents();
|
|
2457
2499
|
if (isLoading) {
|
|
2458
|
-
return /* @__PURE__ */
|
|
2500
|
+
return /* @__PURE__ */ React16.createElement(LoadingComponents, null);
|
|
2459
2501
|
}
|
|
2460
2502
|
const isEmpty = !components || components.length === 0;
|
|
2461
2503
|
if (isEmpty) {
|
|
2462
2504
|
if (searchValue.length > 0) {
|
|
2463
|
-
return /* @__PURE__ */
|
|
2505
|
+
return /* @__PURE__ */ React16.createElement(EmptySearchResult, null);
|
|
2464
2506
|
}
|
|
2465
|
-
return /* @__PURE__ */
|
|
2507
|
+
return /* @__PURE__ */ React16.createElement(EmptyState, null);
|
|
2466
2508
|
}
|
|
2467
|
-
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(
|
|
2468
2510
|
ComponentItem,
|
|
2469
2511
|
{
|
|
2470
2512
|
key: component.uid,
|
|
@@ -2476,42 +2518,63 @@ function ComponentsList() {
|
|
|
2476
2518
|
)));
|
|
2477
2519
|
}
|
|
2478
2520
|
var EmptyState = () => {
|
|
2479
|
-
|
|
2480
|
-
|
|
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,
|
|
2481
2538
|
{
|
|
2482
2539
|
alignItems: "center",
|
|
2483
|
-
justifyContent: "
|
|
2540
|
+
justifyContent: "start",
|
|
2484
2541
|
height: "100%",
|
|
2485
|
-
sx: { px: 2
|
|
2486
|
-
gap:
|
|
2542
|
+
sx: { px: 2, py: 4 },
|
|
2543
|
+
gap: 2,
|
|
2487
2544
|
overflow: "hidden"
|
|
2488
2545
|
},
|
|
2489
|
-
/* @__PURE__ */
|
|
2490
|
-
|
|
2491
|
-
/* @__PURE__ */ React15.createElement(import_ui14.Typography, { variant: "caption", align: "center", color: "text.secondary" }, (0, import_i18n16.__)(
|
|
2492
|
-
"Once you have Components, this is where you can manage them\u2014rearrange, duplicate, rename and delete irrelevant classes.",
|
|
2493
|
-
"elementor"
|
|
2494
|
-
)),
|
|
2495
|
-
/* @__PURE__ */ React15.createElement(import_ui14.Divider, { sx: { width: "100%" }, color: "text.secondary" }),
|
|
2496
|
-
/* @__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")),
|
|
2497
|
-
/* @__PURE__ */ React15.createElement(
|
|
2498
|
-
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,
|
|
2499
2548
|
{
|
|
2500
|
-
|
|
2549
|
+
href: LEARN_MORE_URL,
|
|
2550
|
+
target: "_blank",
|
|
2551
|
+
rel: "noopener noreferrer",
|
|
2501
2552
|
variant: "caption",
|
|
2502
|
-
color: "
|
|
2503
|
-
sx: { display: "flex", flexDirection: "column" }
|
|
2553
|
+
color: "info.main"
|
|
2504
2554
|
},
|
|
2505
|
-
|
|
2506
|
-
|
|
2507
|
-
|
|
2508
|
-
)
|
|
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
|
+
)))
|
|
2509
2572
|
);
|
|
2510
2573
|
};
|
|
2511
2574
|
var EmptySearchResult = () => {
|
|
2512
2575
|
const { searchValue, clearSearch } = useSearch();
|
|
2513
|
-
return /* @__PURE__ */
|
|
2514
|
-
|
|
2576
|
+
return /* @__PURE__ */ React16.createElement(
|
|
2577
|
+
import_ui15.Stack,
|
|
2515
2578
|
{
|
|
2516
2579
|
color: "text.secondary",
|
|
2517
2580
|
pt: 5,
|
|
@@ -2520,28 +2583,29 @@ var EmptySearchResult = () => {
|
|
|
2520
2583
|
overflow: "hidden",
|
|
2521
2584
|
justifySelf: "center"
|
|
2522
2585
|
},
|
|
2523
|
-
/* @__PURE__ */
|
|
2524
|
-
/* @__PURE__ */
|
|
2525
|
-
|
|
2586
|
+
/* @__PURE__ */ React16.createElement(import_icons10.ComponentsIcon, null),
|
|
2587
|
+
/* @__PURE__ */ React16.createElement(
|
|
2588
|
+
import_ui15.Box,
|
|
2526
2589
|
{
|
|
2527
2590
|
sx: {
|
|
2528
2591
|
width: "100%"
|
|
2529
2592
|
}
|
|
2530
2593
|
},
|
|
2531
|
-
/* @__PURE__ */
|
|
2532
|
-
searchValue && /* @__PURE__ */
|
|
2533
|
-
|
|
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,
|
|
2534
2597
|
{
|
|
2535
2598
|
variant: "subtitle2",
|
|
2536
2599
|
color: "inherit",
|
|
2537
2600
|
sx: {
|
|
2601
|
+
...SUBTITLE_OVERRIDE_SX,
|
|
2538
2602
|
display: "flex",
|
|
2539
2603
|
width: "100%",
|
|
2540
2604
|
justifyContent: "center"
|
|
2541
2605
|
}
|
|
2542
2606
|
},
|
|
2543
|
-
/* @__PURE__ */
|
|
2544
|
-
/* @__PURE__ */
|
|
2607
|
+
/* @__PURE__ */ React16.createElement("span", null, "\u201C"),
|
|
2608
|
+
/* @__PURE__ */ React16.createElement(
|
|
2545
2609
|
"span",
|
|
2546
2610
|
{
|
|
2547
2611
|
style: {
|
|
@@ -2552,11 +2616,11 @@ var EmptySearchResult = () => {
|
|
|
2552
2616
|
},
|
|
2553
2617
|
searchValue
|
|
2554
2618
|
),
|
|
2555
|
-
/* @__PURE__ */
|
|
2619
|
+
/* @__PURE__ */ React16.createElement("span", null, "\u201D.")
|
|
2556
2620
|
)
|
|
2557
2621
|
),
|
|
2558
|
-
/* @__PURE__ */
|
|
2559
|
-
/* @__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")))
|
|
2560
2624
|
);
|
|
2561
2625
|
};
|
|
2562
2626
|
var useFilteredComponents = () => {
|
|
@@ -2572,23 +2636,28 @@ var useFilteredComponents = () => {
|
|
|
2572
2636
|
};
|
|
2573
2637
|
|
|
2574
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
|
+
};
|
|
2575
2644
|
var Components = () => {
|
|
2576
|
-
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)));
|
|
2577
2646
|
};
|
|
2578
2647
|
|
|
2579
2648
|
// src/components/consts.ts
|
|
2580
2649
|
var COMPONENT_DOCUMENT_TYPE = "elementor_component";
|
|
2581
2650
|
|
|
2582
2651
|
// src/components/create-component-form/create-component-form.tsx
|
|
2583
|
-
var
|
|
2584
|
-
var
|
|
2652
|
+
var React18 = __toESM(require("react"));
|
|
2653
|
+
var import_react11 = require("react");
|
|
2585
2654
|
var import_editor_elements10 = require("@elementor/editor-elements");
|
|
2586
2655
|
var import_editor_notifications2 = require("@elementor/editor-notifications");
|
|
2587
2656
|
var import_editor_ui8 = require("@elementor/editor-ui");
|
|
2588
2657
|
var import_icons11 = require("@elementor/icons");
|
|
2589
2658
|
var import_store47 = require("@elementor/store");
|
|
2590
|
-
var
|
|
2591
|
-
var
|
|
2659
|
+
var import_ui16 = require("@elementor/ui");
|
|
2660
|
+
var import_i18n19 = require("@wordpress/i18n");
|
|
2592
2661
|
|
|
2593
2662
|
// src/prevent-non-atomic-nesting.ts
|
|
2594
2663
|
var import_editor_canvas6 = require("@elementor/editor-canvas");
|
|
@@ -2596,10 +2665,10 @@ var import_editor_elements9 = require("@elementor/editor-elements");
|
|
|
2596
2665
|
var import_editor_notifications = require("@elementor/editor-notifications");
|
|
2597
2666
|
var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
|
|
2598
2667
|
var import_store43 = require("@elementor/store");
|
|
2599
|
-
var
|
|
2668
|
+
var import_i18n18 = require("@wordpress/i18n");
|
|
2600
2669
|
var NON_ATOMIC_ELEMENT_ALERT = {
|
|
2601
2670
|
type: "default",
|
|
2602
|
-
message: (0,
|
|
2671
|
+
message: (0, import_i18n18.__)("This widget isn't compatible with components. Use atomic elements instead.", "elementor"),
|
|
2603
2672
|
id: "non-atomic-element-blocked"
|
|
2604
2673
|
};
|
|
2605
2674
|
function initNonAtomicNestingPrevention() {
|
|
@@ -2730,11 +2799,11 @@ async function createUnpublishedComponent(name, element, eventData, overridableP
|
|
|
2730
2799
|
}
|
|
2731
2800
|
|
|
2732
2801
|
// src/components/create-component-form/hooks/use-form.ts
|
|
2733
|
-
var
|
|
2802
|
+
var import_react10 = require("react");
|
|
2734
2803
|
var useForm = (initialValues) => {
|
|
2735
|
-
const [values, setValues] = (0,
|
|
2736
|
-
const [errors, setErrors] = (0,
|
|
2737
|
-
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)(() => {
|
|
2738
2807
|
return !Object.values(errors).some((error) => error);
|
|
2739
2808
|
}, [errors]);
|
|
2740
2809
|
const handleChange = (e, field, validationSchema) => {
|
|
@@ -2809,18 +2878,18 @@ function countNestedElements(container) {
|
|
|
2809
2878
|
|
|
2810
2879
|
// src/components/create-component-form/create-component-form.tsx
|
|
2811
2880
|
function CreateComponentForm() {
|
|
2812
|
-
const [element, setElement] = (0,
|
|
2813
|
-
const [anchorPosition, setAnchorPosition] = (0,
|
|
2814
|
-
const [resultNotification, setResultNotification] = (0,
|
|
2815
|
-
const eventData = (0,
|
|
2816
|
-
(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)(() => {
|
|
2817
2886
|
const OPEN_SAVE_AS_COMPONENT_FORM_EVENT = "elementor/editor/open-save-as-component-form";
|
|
2818
2887
|
const openPopup = (event) => {
|
|
2819
2888
|
const nonAtomicElements = findNonAtomicElementsInElement(event.detail.element);
|
|
2820
2889
|
if (nonAtomicElements.length > 0) {
|
|
2821
2890
|
(0, import_editor_notifications2.notify)({
|
|
2822
2891
|
type: "default",
|
|
2823
|
-
message: (0,
|
|
2892
|
+
message: (0, import_i18n19.__)(
|
|
2824
2893
|
"Components require atomic elements only. Remove widgets to create this component.",
|
|
2825
2894
|
"elementor"
|
|
2826
2895
|
),
|
|
@@ -2860,12 +2929,12 @@ function CreateComponentForm() {
|
|
|
2860
2929
|
setResultNotification({
|
|
2861
2930
|
show: true,
|
|
2862
2931
|
// Translators: %1$s: Component name, %2$s: Component UID
|
|
2863
|
-
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),
|
|
2864
2933
|
type: "success"
|
|
2865
2934
|
});
|
|
2866
2935
|
resetAndClosePopup();
|
|
2867
2936
|
} catch {
|
|
2868
|
-
const errorMessage = (0,
|
|
2937
|
+
const errorMessage = (0, import_i18n19.__)("Failed to save component. Please try again.", "elementor");
|
|
2869
2938
|
setResultNotification({
|
|
2870
2939
|
show: true,
|
|
2871
2940
|
message: errorMessage,
|
|
@@ -2884,15 +2953,15 @@ function CreateComponentForm() {
|
|
|
2884
2953
|
...eventData.current
|
|
2885
2954
|
});
|
|
2886
2955
|
};
|
|
2887
|
-
return /* @__PURE__ */
|
|
2888
|
-
|
|
2956
|
+
return /* @__PURE__ */ React18.createElement(import_editor_ui8.ThemeProvider, null, /* @__PURE__ */ React18.createElement(
|
|
2957
|
+
import_ui16.Popover,
|
|
2889
2958
|
{
|
|
2890
2959
|
open: element !== null,
|
|
2891
2960
|
onClose: cancelSave,
|
|
2892
2961
|
anchorReference: "anchorPosition",
|
|
2893
2962
|
anchorPosition
|
|
2894
2963
|
},
|
|
2895
|
-
element !== null && /* @__PURE__ */
|
|
2964
|
+
element !== null && /* @__PURE__ */ React18.createElement(
|
|
2896
2965
|
Form2,
|
|
2897
2966
|
{
|
|
2898
2967
|
initialValues: { componentName: element.elementLabel },
|
|
@@ -2900,8 +2969,8 @@ function CreateComponentForm() {
|
|
|
2900
2969
|
closePopup: cancelSave
|
|
2901
2970
|
}
|
|
2902
2971
|
)
|
|
2903
|
-
), /* @__PURE__ */
|
|
2904
|
-
|
|
2972
|
+
), /* @__PURE__ */ React18.createElement(import_ui16.Snackbar, { open: resultNotification?.show, onClose: () => setResultNotification(null) }, /* @__PURE__ */ React18.createElement(
|
|
2973
|
+
import_ui16.Alert,
|
|
2905
2974
|
{
|
|
2906
2975
|
onClose: () => setResultNotification(null),
|
|
2907
2976
|
severity: resultNotification?.type,
|
|
@@ -2918,14 +2987,14 @@ var Form2 = ({
|
|
|
2918
2987
|
}) => {
|
|
2919
2988
|
const { values, errors, isValid, handleChange, validateForm: validateForm2 } = useForm(initialValues);
|
|
2920
2989
|
const { components } = useComponents();
|
|
2921
|
-
const existingComponentNames = (0,
|
|
2990
|
+
const existingComponentNames = (0, import_react11.useMemo)(() => {
|
|
2922
2991
|
return components?.map((component) => component.name) ?? [];
|
|
2923
2992
|
}, [components]);
|
|
2924
|
-
const changeValidationSchema = (0,
|
|
2993
|
+
const changeValidationSchema = (0, import_react11.useMemo)(
|
|
2925
2994
|
() => createBaseComponentSchema(existingComponentNames),
|
|
2926
2995
|
[existingComponentNames]
|
|
2927
2996
|
);
|
|
2928
|
-
const submitValidationSchema = (0,
|
|
2997
|
+
const submitValidationSchema = (0, import_react11.useMemo)(
|
|
2929
2998
|
() => createSubmitComponentSchema(existingComponentNames),
|
|
2930
2999
|
[existingComponentNames]
|
|
2931
3000
|
);
|
|
@@ -2936,14 +3005,14 @@ var Form2 = ({
|
|
|
2936
3005
|
}
|
|
2937
3006
|
};
|
|
2938
3007
|
const texts = {
|
|
2939
|
-
heading: (0,
|
|
2940
|
-
name: (0,
|
|
2941
|
-
cancel: (0,
|
|
2942
|
-
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")
|
|
2943
3012
|
};
|
|
2944
3013
|
const nameInputId = "component-name";
|
|
2945
|
-
return /* @__PURE__ */
|
|
2946
|
-
|
|
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,
|
|
2947
3016
|
{
|
|
2948
3017
|
direction: "row",
|
|
2949
3018
|
alignItems: "center",
|
|
@@ -2951,10 +3020,10 @@ var Form2 = ({
|
|
|
2951
3020
|
px: 1.5,
|
|
2952
3021
|
sx: { columnGap: 0.5, borderBottom: "1px solid", borderColor: "divider", width: "100%" }
|
|
2953
3022
|
},
|
|
2954
|
-
/* @__PURE__ */
|
|
2955
|
-
/* @__PURE__ */
|
|
2956
|
-
), /* @__PURE__ */
|
|
2957
|
-
|
|
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,
|
|
2958
3027
|
{
|
|
2959
3028
|
id: nameInputId,
|
|
2960
3029
|
size: FONT_SIZE,
|
|
@@ -2965,12 +3034,12 @@ var Form2 = ({
|
|
|
2965
3034
|
error: Boolean(errors.componentName),
|
|
2966
3035
|
helperText: errors.componentName
|
|
2967
3036
|
}
|
|
2968
|
-
))), /* @__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))));
|
|
2969
3038
|
};
|
|
2970
3039
|
|
|
2971
3040
|
// src/components/edit-component/edit-component.tsx
|
|
2972
|
-
var
|
|
2973
|
-
var
|
|
3041
|
+
var React20 = __toESM(require("react"));
|
|
3042
|
+
var import_react14 = require("react");
|
|
2974
3043
|
var import_editor_documents11 = require("@elementor/editor-documents");
|
|
2975
3044
|
var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
|
|
2976
3045
|
var import_store51 = require("@elementor/store");
|
|
@@ -2992,10 +3061,10 @@ function updateCurrentComponent({
|
|
|
2992
3061
|
}
|
|
2993
3062
|
|
|
2994
3063
|
// src/components/edit-component/component-modal.tsx
|
|
2995
|
-
var
|
|
2996
|
-
var
|
|
3064
|
+
var React19 = __toESM(require("react"));
|
|
3065
|
+
var import_react13 = require("react");
|
|
2997
3066
|
var import_react_dom = require("react-dom");
|
|
2998
|
-
var
|
|
3067
|
+
var import_i18n20 = require("@wordpress/i18n");
|
|
2999
3068
|
|
|
3000
3069
|
// src/hooks/use-canvas-document.ts
|
|
3001
3070
|
var import_editor_canvas7 = require("@elementor/editor-canvas");
|
|
@@ -3005,10 +3074,10 @@ function useCanvasDocument() {
|
|
|
3005
3074
|
}
|
|
3006
3075
|
|
|
3007
3076
|
// src/hooks/use-element-rect.ts
|
|
3008
|
-
var
|
|
3077
|
+
var import_react12 = require("react");
|
|
3009
3078
|
var import_utils5 = require("@elementor/utils");
|
|
3010
3079
|
function useElementRect(element) {
|
|
3011
|
-
const [rect, setRect] = (0,
|
|
3080
|
+
const [rect, setRect] = (0, import_react12.useState)(new DOMRect(0, 0, 0, 0));
|
|
3012
3081
|
const onChange = (0, import_utils5.throttle)(
|
|
3013
3082
|
() => {
|
|
3014
3083
|
setRect(element?.getBoundingClientRect() ?? new DOMRect(0, 0, 0, 0));
|
|
@@ -3019,7 +3088,7 @@ function useElementRect(element) {
|
|
|
3019
3088
|
useScrollListener({ element, onChange });
|
|
3020
3089
|
useResizeListener({ element, onChange });
|
|
3021
3090
|
useMutationsListener({ element, onChange });
|
|
3022
|
-
(0,
|
|
3091
|
+
(0, import_react12.useEffect)(
|
|
3023
3092
|
() => () => {
|
|
3024
3093
|
onChange.cancel();
|
|
3025
3094
|
},
|
|
@@ -3028,7 +3097,7 @@ function useElementRect(element) {
|
|
|
3028
3097
|
return rect;
|
|
3029
3098
|
}
|
|
3030
3099
|
function useScrollListener({ element, onChange }) {
|
|
3031
|
-
(0,
|
|
3100
|
+
(0, import_react12.useEffect)(() => {
|
|
3032
3101
|
if (!element) {
|
|
3033
3102
|
return;
|
|
3034
3103
|
}
|
|
@@ -3040,7 +3109,7 @@ function useScrollListener({ element, onChange }) {
|
|
|
3040
3109
|
}, [element, onChange]);
|
|
3041
3110
|
}
|
|
3042
3111
|
function useResizeListener({ element, onChange }) {
|
|
3043
|
-
(0,
|
|
3112
|
+
(0, import_react12.useEffect)(() => {
|
|
3044
3113
|
if (!element) {
|
|
3045
3114
|
return;
|
|
3046
3115
|
}
|
|
@@ -3055,7 +3124,7 @@ function useResizeListener({ element, onChange }) {
|
|
|
3055
3124
|
}, [element, onChange]);
|
|
3056
3125
|
}
|
|
3057
3126
|
function useMutationsListener({ element, onChange }) {
|
|
3058
|
-
(0,
|
|
3127
|
+
(0, import_react12.useEffect)(() => {
|
|
3059
3128
|
if (!element) {
|
|
3060
3129
|
return;
|
|
3061
3130
|
}
|
|
@@ -3070,7 +3139,7 @@ function useMutationsListener({ element, onChange }) {
|
|
|
3070
3139
|
// src/components/edit-component/component-modal.tsx
|
|
3071
3140
|
function ComponentModal({ element, onClose }) {
|
|
3072
3141
|
const canvasDocument = useCanvasDocument();
|
|
3073
|
-
(0,
|
|
3142
|
+
(0, import_react13.useEffect)(() => {
|
|
3074
3143
|
const handleEsc = (event) => {
|
|
3075
3144
|
if (event.key === "Escape") {
|
|
3076
3145
|
onClose();
|
|
@@ -3085,7 +3154,7 @@ function ComponentModal({ element, onClose }) {
|
|
|
3085
3154
|
return null;
|
|
3086
3155
|
}
|
|
3087
3156
|
return (0, import_react_dom.createPortal)(
|
|
3088
|
-
/* @__PURE__ */
|
|
3157
|
+
/* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(BlockEditPage, null), /* @__PURE__ */ React19.createElement(Backdrop, { canvas: canvasDocument, element, onClose })),
|
|
3089
3158
|
canvasDocument.body
|
|
3090
3159
|
);
|
|
3091
3160
|
}
|
|
@@ -3109,7 +3178,7 @@ function Backdrop({ canvas, element, onClose }) {
|
|
|
3109
3178
|
onClose();
|
|
3110
3179
|
}
|
|
3111
3180
|
};
|
|
3112
|
-
return /* @__PURE__ */
|
|
3181
|
+
return /* @__PURE__ */ React19.createElement(
|
|
3113
3182
|
"div",
|
|
3114
3183
|
{
|
|
3115
3184
|
style: backdropStyle,
|
|
@@ -3117,7 +3186,7 @@ function Backdrop({ canvas, element, onClose }) {
|
|
|
3117
3186
|
onKeyDown: handleKeyDown,
|
|
3118
3187
|
role: "button",
|
|
3119
3188
|
tabIndex: 0,
|
|
3120
|
-
"aria-label": (0,
|
|
3189
|
+
"aria-label": (0, import_i18n20.__)("Exit component editing mode", "elementor")
|
|
3121
3190
|
}
|
|
3122
3191
|
);
|
|
3123
3192
|
}
|
|
@@ -3167,7 +3236,7 @@ function BlockEditPage() {
|
|
|
3167
3236
|
}
|
|
3168
3237
|
}
|
|
3169
3238
|
`;
|
|
3170
|
-
return /* @__PURE__ */
|
|
3239
|
+
return /* @__PURE__ */ React19.createElement("style", { "data-e-style-id": "e-block-v3-document-handles-styles" }, blockV3DocumentHandlesStyles);
|
|
3171
3240
|
}
|
|
3172
3241
|
|
|
3173
3242
|
// src/components/edit-component/edit-component.tsx
|
|
@@ -3180,13 +3249,13 @@ function EditComponent() {
|
|
|
3180
3249
|
if (!elementDom) {
|
|
3181
3250
|
return null;
|
|
3182
3251
|
}
|
|
3183
|
-
return /* @__PURE__ */
|
|
3252
|
+
return /* @__PURE__ */ React20.createElement(ComponentModal, { element: elementDom, onClose });
|
|
3184
3253
|
}
|
|
3185
3254
|
function useHandleDocumentSwitches() {
|
|
3186
3255
|
const documentsManager = (0, import_editor_documents11.getV1DocumentsManager)();
|
|
3187
3256
|
const currentComponentId = useCurrentComponentId();
|
|
3188
3257
|
const path = (0, import_store51.__useSelector)(selectPath);
|
|
3189
|
-
(0,
|
|
3258
|
+
(0, import_react14.useEffect)(() => {
|
|
3190
3259
|
return (0, import_editor_v1_adapters7.__privateListenTo)((0, import_editor_v1_adapters7.commandEndEvent)("editor/documents/open"), () => {
|
|
3191
3260
|
const nextDocument = documentsManager.getCurrent();
|
|
3192
3261
|
if (nextDocument.id === currentComponentId) {
|
|
@@ -3250,33 +3319,33 @@ function getComponentDOMElement(id2) {
|
|
|
3250
3319
|
}
|
|
3251
3320
|
|
|
3252
3321
|
// src/components/in-edit-mode.tsx
|
|
3253
|
-
var
|
|
3322
|
+
var React21 = __toESM(require("react"));
|
|
3254
3323
|
var import_editor_ui9 = require("@elementor/editor-ui");
|
|
3255
3324
|
var import_icons12 = require("@elementor/icons");
|
|
3256
|
-
var
|
|
3257
|
-
var
|
|
3325
|
+
var import_ui17 = require("@elementor/ui");
|
|
3326
|
+
var import_i18n21 = require("@wordpress/i18n");
|
|
3258
3327
|
var openEditModeDialog = (lockedBy) => {
|
|
3259
3328
|
(0, import_editor_ui9.openDialog)({
|
|
3260
|
-
component: /* @__PURE__ */
|
|
3329
|
+
component: /* @__PURE__ */ React21.createElement(EditModeDialog, { lockedBy })
|
|
3261
3330
|
});
|
|
3262
3331
|
};
|
|
3263
3332
|
var EditModeDialog = ({ lockedBy }) => {
|
|
3264
|
-
const content = (0,
|
|
3265
|
-
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.__)(
|
|
3266
3335
|
"You can wait for them to finish or reach out to coordinate your changes together.",
|
|
3267
3336
|
"elementor"
|
|
3268
|
-
)), /* @__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"))))));
|
|
3269
3338
|
};
|
|
3270
3339
|
|
|
3271
3340
|
// src/components/instance-editing-panel/instance-editing-panel.tsx
|
|
3272
|
-
var
|
|
3341
|
+
var React26 = __toESM(require("react"));
|
|
3273
3342
|
var import_editor_controls4 = require("@elementor/editor-controls");
|
|
3274
3343
|
var import_editor_editing_panel5 = require("@elementor/editor-editing-panel");
|
|
3275
3344
|
var import_editor_elements14 = require("@elementor/editor-elements");
|
|
3276
3345
|
var import_editor_panels3 = require("@elementor/editor-panels");
|
|
3277
3346
|
var import_icons14 = require("@elementor/icons");
|
|
3278
|
-
var
|
|
3279
|
-
var
|
|
3347
|
+
var import_ui22 = require("@elementor/ui");
|
|
3348
|
+
var import_i18n23 = require("@wordpress/i18n");
|
|
3280
3349
|
|
|
3281
3350
|
// src/hooks/use-component-instance-settings.ts
|
|
3282
3351
|
var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
|
|
@@ -3342,13 +3411,13 @@ function useComponentInstanceSettings() {
|
|
|
3342
3411
|
}
|
|
3343
3412
|
|
|
3344
3413
|
// src/components/instance-editing-panel/empty-state.tsx
|
|
3345
|
-
var
|
|
3414
|
+
var React22 = __toESM(require("react"));
|
|
3346
3415
|
var import_icons13 = require("@elementor/icons");
|
|
3347
|
-
var
|
|
3348
|
-
var
|
|
3416
|
+
var import_ui18 = require("@elementor/ui");
|
|
3417
|
+
var import_i18n22 = require("@wordpress/i18n");
|
|
3349
3418
|
var EmptyState2 = ({ onEditComponent }) => {
|
|
3350
|
-
return /* @__PURE__ */
|
|
3351
|
-
|
|
3419
|
+
return /* @__PURE__ */ React22.createElement(
|
|
3420
|
+
import_ui18.Stack,
|
|
3352
3421
|
{
|
|
3353
3422
|
alignItems: "center",
|
|
3354
3423
|
justifyContent: "start",
|
|
@@ -3357,28 +3426,28 @@ var EmptyState2 = ({ onEditComponent }) => {
|
|
|
3357
3426
|
sx: { p: 2.5, pt: 8, pb: 5.5, mt: 1 },
|
|
3358
3427
|
gap: 1.5
|
|
3359
3428
|
},
|
|
3360
|
-
/* @__PURE__ */
|
|
3361
|
-
/* @__PURE__ */
|
|
3362
|
-
/* @__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.__)(
|
|
3363
3432
|
"Edit the component to add properties, manage them or update the design across all instances.",
|
|
3364
3433
|
"elementor"
|
|
3365
3434
|
)),
|
|
3366
|
-
/* @__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"))
|
|
3367
3436
|
);
|
|
3368
3437
|
};
|
|
3369
3438
|
|
|
3370
3439
|
// src/components/instance-editing-panel/override-props-group.tsx
|
|
3371
|
-
var
|
|
3372
|
-
var
|
|
3440
|
+
var React25 = __toESM(require("react"));
|
|
3441
|
+
var import_react15 = require("react");
|
|
3373
3442
|
var import_editor_editing_panel4 = require("@elementor/editor-editing-panel");
|
|
3374
3443
|
var import_editor_ui10 = require("@elementor/editor-ui");
|
|
3375
|
-
var
|
|
3444
|
+
var import_ui21 = require("@elementor/ui");
|
|
3376
3445
|
|
|
3377
3446
|
// src/components/instance-editing-panel/override-prop-control.tsx
|
|
3378
|
-
var
|
|
3447
|
+
var React24 = __toESM(require("react"));
|
|
3379
3448
|
var import_editor_controls3 = require("@elementor/editor-controls");
|
|
3380
3449
|
var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
|
|
3381
|
-
var
|
|
3450
|
+
var import_ui20 = require("@elementor/ui");
|
|
3382
3451
|
|
|
3383
3452
|
// src/hooks/use-controls-by-widget-type.ts
|
|
3384
3453
|
var import_editor_elements12 = require("@elementor/editor-elements");
|
|
@@ -3465,16 +3534,16 @@ function getPropType({ widgetType, propKey }) {
|
|
|
3465
3534
|
}
|
|
3466
3535
|
|
|
3467
3536
|
// src/components/control-label.tsx
|
|
3468
|
-
var
|
|
3537
|
+
var React23 = __toESM(require("react"));
|
|
3469
3538
|
var import_editor_controls2 = require("@elementor/editor-controls");
|
|
3470
|
-
var
|
|
3539
|
+
var import_ui19 = require("@elementor/ui");
|
|
3471
3540
|
var ControlLabel = ({ children, ...props }) => {
|
|
3472
|
-
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));
|
|
3473
3542
|
};
|
|
3474
3543
|
|
|
3475
3544
|
// src/components/instance-editing-panel/override-prop-control.tsx
|
|
3476
3545
|
function OverridePropControl({ overridableProp, overrides }) {
|
|
3477
|
-
return /* @__PURE__ */
|
|
3546
|
+
return /* @__PURE__ */ React24.createElement(import_editor_editing_panel3.SettingsField, { bind: "component_instance", propDisplayName: overridableProp.label }, /* @__PURE__ */ React24.createElement(OverrideControl, { overridableProp, overrides }));
|
|
3478
3547
|
}
|
|
3479
3548
|
function OverrideControl({ overridableProp, overrides }) {
|
|
3480
3549
|
const componentId = useCurrentComponentId();
|
|
@@ -3521,7 +3590,7 @@ function OverrideControl({ overridableProp, overrides }) {
|
|
|
3521
3590
|
updateOverridableProp(componentId, overridableValue, { elType, widgetType, propKey });
|
|
3522
3591
|
}
|
|
3523
3592
|
};
|
|
3524
|
-
return /* @__PURE__ */
|
|
3593
|
+
return /* @__PURE__ */ React24.createElement(
|
|
3525
3594
|
import_editor_controls3.PropProvider,
|
|
3526
3595
|
{
|
|
3527
3596
|
propType: propTypeSchema,
|
|
@@ -3531,7 +3600,7 @@ function OverrideControl({ overridableProp, overrides }) {
|
|
|
3531
3600
|
return false;
|
|
3532
3601
|
}
|
|
3533
3602
|
},
|
|
3534
|
-
/* @__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)))
|
|
3535
3604
|
);
|
|
3536
3605
|
}
|
|
3537
3606
|
function getPropValue(value) {
|
|
@@ -3584,7 +3653,7 @@ function createOverrideValue(overrideKey, overrideValue, componentId) {
|
|
|
3584
3653
|
function getControl(controls, originPropFields) {
|
|
3585
3654
|
const ControlComponent = import_editor_editing_panel3.controlsRegistry.get(controls[originPropFields.propKey].value.type);
|
|
3586
3655
|
const controlProps = controls[originPropFields.propKey].value.props;
|
|
3587
|
-
return /* @__PURE__ */
|
|
3656
|
+
return /* @__PURE__ */ React24.createElement(ControlComponent, { ...controlProps });
|
|
3588
3657
|
}
|
|
3589
3658
|
|
|
3590
3659
|
// src/components/instance-editing-panel/override-props-group.tsx
|
|
@@ -3593,12 +3662,12 @@ function OverridePropsGroup({ group, props, overrides }) {
|
|
|
3593
3662
|
const handleClick = () => {
|
|
3594
3663
|
setIsOpen(!isOpen);
|
|
3595
3664
|
};
|
|
3596
|
-
const id2 = (0,
|
|
3665
|
+
const id2 = (0, import_react15.useId)();
|
|
3597
3666
|
const labelId = `label-${id2}`;
|
|
3598
3667
|
const contentId = `content-${id2}`;
|
|
3599
3668
|
const title = group.label;
|
|
3600
|
-
return /* @__PURE__ */
|
|
3601
|
-
|
|
3669
|
+
return /* @__PURE__ */ React25.createElement(import_ui21.Box, { "aria-label": `${title} section` }, /* @__PURE__ */ React25.createElement(
|
|
3670
|
+
import_ui21.ListItemButton,
|
|
3602
3671
|
{
|
|
3603
3672
|
id: labelId,
|
|
3604
3673
|
"aria-controls": contentId,
|
|
@@ -3607,16 +3676,16 @@ function OverridePropsGroup({ group, props, overrides }) {
|
|
|
3607
3676
|
p: 0,
|
|
3608
3677
|
sx: { "&:hover": { backgroundColor: "transparent" } }
|
|
3609
3678
|
},
|
|
3610
|
-
/* @__PURE__ */
|
|
3611
|
-
|
|
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,
|
|
3612
3681
|
{
|
|
3613
3682
|
secondary: title,
|
|
3614
3683
|
secondaryTypographyProps: { color: "text.primary", variant: "caption", fontWeight: "bold" },
|
|
3615
3684
|
sx: { flexGrow: 0, flexShrink: 1, marginInlineEnd: 1 }
|
|
3616
3685
|
}
|
|
3617
3686
|
)),
|
|
3618
|
-
/* @__PURE__ */
|
|
3619
|
-
), /* @__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(
|
|
3620
3689
|
OverridePropControl,
|
|
3621
3690
|
{
|
|
3622
3691
|
key: overrideKey,
|
|
@@ -3637,12 +3706,12 @@ function InstanceEditingPanel() {
|
|
|
3637
3706
|
if (!componentId || !overridableProps || !component) {
|
|
3638
3707
|
return null;
|
|
3639
3708
|
}
|
|
3640
|
-
const panelTitle = (0,
|
|
3709
|
+
const panelTitle = (0, import_i18n23.__)("Edit %s", "elementor").replace("%s", component.name);
|
|
3641
3710
|
const handleEditComponent = () => switchToComponent(componentId, componentInstanceId);
|
|
3642
3711
|
const isNonEmptyGroup = (group) => group !== null && group.props.length > 0;
|
|
3643
3712
|
const groups = overridableProps.groups.order.map((groupId) => overridableProps.groups.items[groupId] ?? null).filter(isNonEmptyGroup);
|
|
3644
3713
|
const isEmpty = groups.length === 0 || Object.keys(overridableProps.props).length === 0;
|
|
3645
|
-
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(
|
|
3646
3715
|
OverridePropsGroup,
|
|
3647
3716
|
{
|
|
3648
3717
|
key: group.id,
|
|
@@ -3654,18 +3723,18 @@ function InstanceEditingPanel() {
|
|
|
3654
3723
|
}
|
|
3655
3724
|
|
|
3656
3725
|
// src/components/overridable-props/overridable-prop-control.tsx
|
|
3657
|
-
var
|
|
3726
|
+
var React28 = __toESM(require("react"));
|
|
3658
3727
|
var import_editor_controls5 = require("@elementor/editor-controls");
|
|
3659
3728
|
var import_editor_editing_panel6 = require("@elementor/editor-editing-panel");
|
|
3660
3729
|
|
|
3661
3730
|
// src/provider/overridable-prop-context.tsx
|
|
3662
|
-
var
|
|
3663
|
-
var
|
|
3664
|
-
var OverridablePropContext = (0,
|
|
3731
|
+
var React27 = __toESM(require("react"));
|
|
3732
|
+
var import_react16 = require("react");
|
|
3733
|
+
var OverridablePropContext = (0, import_react16.createContext)(null);
|
|
3665
3734
|
function OverridablePropProvider({ children, ...props }) {
|
|
3666
|
-
return /* @__PURE__ */
|
|
3735
|
+
return /* @__PURE__ */ React27.createElement(OverridablePropContext.Provider, { value: props }, children);
|
|
3667
3736
|
}
|
|
3668
|
-
var useOverridablePropValue = () => (0,
|
|
3737
|
+
var useOverridablePropValue = () => (0, import_react16.useContext)(OverridablePropContext)?.value;
|
|
3669
3738
|
|
|
3670
3739
|
// src/components/overridable-props/overridable-prop-control.tsx
|
|
3671
3740
|
function OverridablePropControl({
|
|
@@ -3702,7 +3771,7 @@ function OverridablePropControl({
|
|
|
3702
3771
|
});
|
|
3703
3772
|
const propValue = isComponentInstance2 ? (value.origin_value?.value).override_value : value.origin_value;
|
|
3704
3773
|
const objectPlaceholder = placeholder ? { [bind]: placeholder } : void 0;
|
|
3705
|
-
return /* @__PURE__ */
|
|
3774
|
+
return /* @__PURE__ */ React28.createElement(OverridablePropProvider, { value }, /* @__PURE__ */ React28.createElement(
|
|
3706
3775
|
import_editor_controls5.PropProvider,
|
|
3707
3776
|
{
|
|
3708
3777
|
...propContext,
|
|
@@ -3713,17 +3782,17 @@ function OverridablePropControl({
|
|
|
3713
3782
|
},
|
|
3714
3783
|
placeholder: objectPlaceholder
|
|
3715
3784
|
},
|
|
3716
|
-
/* @__PURE__ */
|
|
3785
|
+
/* @__PURE__ */ React28.createElement(import_editor_controls5.PropKeyProvider, { bind }, /* @__PURE__ */ React28.createElement(import_editor_controls5.ControlReplacementsProvider, { replacements: [] }, /* @__PURE__ */ React28.createElement(OriginalControl, { ...props })))
|
|
3717
3786
|
));
|
|
3718
3787
|
}
|
|
3719
3788
|
|
|
3720
3789
|
// src/components/overridable-props/overridable-prop-indicator.tsx
|
|
3721
|
-
var
|
|
3790
|
+
var React30 = __toESM(require("react"));
|
|
3722
3791
|
var import_editor_controls6 = require("@elementor/editor-controls");
|
|
3723
3792
|
var import_editor_editing_panel7 = require("@elementor/editor-editing-panel");
|
|
3724
3793
|
var import_editor_elements15 = require("@elementor/editor-elements");
|
|
3725
|
-
var
|
|
3726
|
-
var
|
|
3794
|
+
var import_ui24 = require("@elementor/ui");
|
|
3795
|
+
var import_i18n25 = require("@wordpress/i18n");
|
|
3727
3796
|
|
|
3728
3797
|
// src/store/actions/set-overridable-prop.ts
|
|
3729
3798
|
var import_store58 = require("@elementor/store");
|
|
@@ -3790,13 +3859,13 @@ function setOverridableProp({
|
|
|
3790
3859
|
}
|
|
3791
3860
|
|
|
3792
3861
|
// src/components/overridable-props/indicator.tsx
|
|
3793
|
-
var
|
|
3794
|
-
var
|
|
3862
|
+
var React29 = __toESM(require("react"));
|
|
3863
|
+
var import_react17 = require("react");
|
|
3795
3864
|
var import_icons15 = require("@elementor/icons");
|
|
3796
|
-
var
|
|
3797
|
-
var
|
|
3865
|
+
var import_ui23 = require("@elementor/ui");
|
|
3866
|
+
var import_i18n24 = require("@wordpress/i18n");
|
|
3798
3867
|
var SIZE2 = "tiny";
|
|
3799
|
-
var IconContainer = (0,
|
|
3868
|
+
var IconContainer = (0, import_ui23.styled)(import_ui23.Box)`
|
|
3800
3869
|
pointer-events: none;
|
|
3801
3870
|
opacity: 0;
|
|
3802
3871
|
transition: opacity 0.2s ease-in-out;
|
|
@@ -3813,7 +3882,7 @@ var IconContainer = (0, import_ui22.styled)(import_ui22.Box)`
|
|
|
3813
3882
|
stroke-width: 2px;
|
|
3814
3883
|
}
|
|
3815
3884
|
`;
|
|
3816
|
-
var Content = (0,
|
|
3885
|
+
var Content = (0, import_ui23.styled)(import_ui23.Box)`
|
|
3817
3886
|
position: relative;
|
|
3818
3887
|
display: flex;
|
|
3819
3888
|
align-items: center;
|
|
@@ -3850,13 +3919,13 @@ var Content = (0, import_ui22.styled)(import_ui22.Box)`
|
|
|
3850
3919
|
}
|
|
3851
3920
|
}
|
|
3852
3921
|
`;
|
|
3853
|
-
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(
|
|
3854
3923
|
IconContainer,
|
|
3855
3924
|
{
|
|
3856
3925
|
className: "icon",
|
|
3857
|
-
"aria-label": isOverridable ? (0,
|
|
3926
|
+
"aria-label": isOverridable ? (0, import_i18n24.__)("Overridable property", "elementor") : (0, import_i18n24.__)("Make prop overridable", "elementor")
|
|
3858
3927
|
},
|
|
3859
|
-
isOverridable ? /* @__PURE__ */
|
|
3928
|
+
isOverridable ? /* @__PURE__ */ React29.createElement(import_icons15.CheckIcon, { fontSize: SIZE2 }) : /* @__PURE__ */ React29.createElement(import_icons15.PlusIcon, { fontSize: SIZE2 })
|
|
3860
3929
|
)));
|
|
3861
3930
|
|
|
3862
3931
|
// src/components/overridable-props/utils/get-overridable-prop.ts
|
|
@@ -3881,7 +3950,7 @@ function OverridablePropIndicator() {
|
|
|
3881
3950
|
if (!isPropAllowed(bind) || !componentId || !overridableProps) {
|
|
3882
3951
|
return null;
|
|
3883
3952
|
}
|
|
3884
|
-
return /* @__PURE__ */
|
|
3953
|
+
return /* @__PURE__ */ React30.createElement(Content2, { componentId, overridableProps });
|
|
3885
3954
|
}
|
|
3886
3955
|
function Content2({ componentId, overridableProps }) {
|
|
3887
3956
|
const {
|
|
@@ -3894,11 +3963,11 @@ function Content2({ componentId, overridableProps }) {
|
|
|
3894
3963
|
componentOverridablePropTypeUtil
|
|
3895
3964
|
);
|
|
3896
3965
|
const overridableValue = boundPropOverridableValue ?? contextOverridableValue;
|
|
3897
|
-
const popupState = (0,
|
|
3966
|
+
const popupState = (0, import_ui24.usePopupState)({
|
|
3898
3967
|
variant: "popover"
|
|
3899
3968
|
});
|
|
3900
|
-
const triggerProps = (0,
|
|
3901
|
-
const popoverProps = (0,
|
|
3969
|
+
const triggerProps = (0, import_ui24.bindTrigger)(popupState);
|
|
3970
|
+
const popoverProps = (0, import_ui24.bindPopover)(popupState);
|
|
3902
3971
|
const { elType } = (0, import_editor_elements15.getWidgetsCache)()?.[elementType.key] ?? { elType: "widget" };
|
|
3903
3972
|
const handleSubmit = ({ label, group }) => {
|
|
3904
3973
|
const propTypeDefault = propType.default ?? {};
|
|
@@ -3925,8 +3994,8 @@ function Content2({ componentId, overridableProps }) {
|
|
|
3925
3994
|
popupState.close();
|
|
3926
3995
|
};
|
|
3927
3996
|
const overridableConfig = overridableValue ? getOverridableProp({ componentId, overrideKey: overridableValue.override_key }) : void 0;
|
|
3928
|
-
return /* @__PURE__ */
|
|
3929
|
-
|
|
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,
|
|
3930
3999
|
{
|
|
3931
4000
|
disableScrollLock: true,
|
|
3932
4001
|
anchorOrigin: {
|
|
@@ -3942,7 +4011,7 @@ function Content2({ componentId, overridableProps }) {
|
|
|
3942
4011
|
},
|
|
3943
4012
|
...popoverProps
|
|
3944
4013
|
},
|
|
3945
|
-
/* @__PURE__ */
|
|
4014
|
+
/* @__PURE__ */ React30.createElement(
|
|
3946
4015
|
OverridablePropForm,
|
|
3947
4016
|
{
|
|
3948
4017
|
onSubmit: handleSubmit,
|
|
@@ -4039,12 +4108,12 @@ function hasOverrides(settings) {
|
|
|
4039
4108
|
}
|
|
4040
4109
|
|
|
4041
4110
|
// src/mcp/index.ts
|
|
4042
|
-
var
|
|
4111
|
+
var import_editor_mcp3 = require("@elementor/editor-mcp");
|
|
4043
4112
|
|
|
4044
4113
|
// src/mcp/save-as-component-tool.ts
|
|
4045
4114
|
var import_editor_canvas8 = require("@elementor/editor-canvas");
|
|
4046
4115
|
var import_editor_elements17 = require("@elementor/editor-elements");
|
|
4047
|
-
var
|
|
4116
|
+
var import_editor_mcp2 = require("@elementor/editor-mcp");
|
|
4048
4117
|
var import_http_client2 = require("@elementor/http-client");
|
|
4049
4118
|
var import_schema6 = require("@elementor/schema");
|
|
4050
4119
|
var import_utils9 = require("@elementor/utils");
|
|
@@ -4210,7 +4279,7 @@ function getValidElementTypes() {
|
|
|
4210
4279
|
}, []);
|
|
4211
4280
|
}
|
|
4212
4281
|
var generatePrompt = () => {
|
|
4213
|
-
const saveAsComponentPrompt = (0,
|
|
4282
|
+
const saveAsComponentPrompt = (0, import_editor_mcp2.toolPrompts)("save-as-component");
|
|
4214
4283
|
saveAsComponentPrompt.description(`
|
|
4215
4284
|
Save an existing element as a reusable component in the Elementor editor.
|
|
4216
4285
|
|
|
@@ -4354,7 +4423,7 @@ Component with overridable properties:
|
|
|
4354
4423
|
return saveAsComponentPrompt.prompt();
|
|
4355
4424
|
};
|
|
4356
4425
|
var initSaveAsComponentTool = () => {
|
|
4357
|
-
return (0,
|
|
4426
|
+
return (0, import_editor_mcp2.getMCPByDomain)("components").addTool({
|
|
4358
4427
|
name: "save-as-component",
|
|
4359
4428
|
schema: InputSchema,
|
|
4360
4429
|
outputSchema: OutputSchema,
|
|
@@ -4365,7 +4434,7 @@ var initSaveAsComponentTool = () => {
|
|
|
4365
4434
|
|
|
4366
4435
|
// src/mcp/index.ts
|
|
4367
4436
|
function initMcp() {
|
|
4368
|
-
const { setMCPDescription } = (0,
|
|
4437
|
+
const { setMCPDescription } = (0, import_editor_mcp3.getMCPByDomain)("components");
|
|
4369
4438
|
setMCPDescription(
|
|
4370
4439
|
`Elementor Editor Components MCP - Tools for creating and managing reusable components.
|
|
4371
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.`
|
|
@@ -4374,10 +4443,10 @@ function initMcp() {
|
|
|
4374
4443
|
}
|
|
4375
4444
|
|
|
4376
4445
|
// src/populate-store.ts
|
|
4377
|
-
var
|
|
4446
|
+
var import_react18 = require("react");
|
|
4378
4447
|
var import_store63 = require("@elementor/store");
|
|
4379
4448
|
function PopulateStore() {
|
|
4380
|
-
(0,
|
|
4449
|
+
(0, import_react18.useEffect)(() => {
|
|
4381
4450
|
(0, import_store63.__dispatch)(loadComponents());
|
|
4382
4451
|
}, []);
|
|
4383
4452
|
return null;
|
|
@@ -4388,11 +4457,11 @@ var import_editor_elements18 = require("@elementor/editor-elements");
|
|
|
4388
4457
|
var import_editor_notifications3 = require("@elementor/editor-notifications");
|
|
4389
4458
|
var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
|
|
4390
4459
|
var import_store64 = require("@elementor/store");
|
|
4391
|
-
var
|
|
4460
|
+
var import_i18n26 = require("@wordpress/i18n");
|
|
4392
4461
|
var COMPONENT_TYPE = "e-component";
|
|
4393
4462
|
var COMPONENT_CIRCULAR_NESTING_ALERT = {
|
|
4394
4463
|
type: "default",
|
|
4395
|
-
message: (0,
|
|
4464
|
+
message: (0, import_i18n26.__)("Can't add this component - components that contain each other can't be nested.", "elementor"),
|
|
4396
4465
|
id: "circular-component-nesting-blocked"
|
|
4397
4466
|
};
|
|
4398
4467
|
function initCircularNestingPrevention() {
|
|
@@ -4733,7 +4802,7 @@ function init() {
|
|
|
4733
4802
|
window.elementorCommon.__beforeSave = beforeSave;
|
|
4734
4803
|
(0, import_editor_elements_panel.injectTab)({
|
|
4735
4804
|
id: "components",
|
|
4736
|
-
label: (0,
|
|
4805
|
+
label: (0, import_i18n27.__)("Components", "elementor"),
|
|
4737
4806
|
component: Components
|
|
4738
4807
|
});
|
|
4739
4808
|
(0, import_editor.injectIntoTop)({
|