@elementor/editor-components 3.35.0-399 → 3.35.0-401
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 +260 -132
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +182 -54
- package/dist/index.mjs.map +1 -1
- package/package.json +22 -22
- package/src/components/components-tab/components-item.tsx +2 -1
- package/src/components/create-component-form/create-component-form.tsx +16 -0
- package/src/init.ts +3 -0
- package/src/prevent-non-atomic-nesting.ts +209 -0
package/dist/index.js
CHANGED
|
@@ -36,15 +36,15 @@ module.exports = __toCommonJS(index_exports);
|
|
|
36
36
|
|
|
37
37
|
// src/init.ts
|
|
38
38
|
var import_editor = require("@elementor/editor");
|
|
39
|
-
var
|
|
39
|
+
var import_editor_canvas9 = require("@elementor/editor-canvas");
|
|
40
40
|
var import_editor_documents12 = 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
|
-
var
|
|
46
|
-
var
|
|
47
|
-
var
|
|
45
|
+
var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
|
|
46
|
+
var import_store67 = require("@elementor/store");
|
|
47
|
+
var import_i18n26 = require("@wordpress/i18n");
|
|
48
48
|
|
|
49
49
|
// src/component-instance-transformer.ts
|
|
50
50
|
var import_editor_canvas = require("@elementor/editor-canvas");
|
|
@@ -2032,7 +2032,7 @@ var ComponentItem = ({ component }) => {
|
|
|
2032
2032
|
import_ui12.ListItemButton,
|
|
2033
2033
|
{
|
|
2034
2034
|
draggable: true,
|
|
2035
|
-
onDragStart: () => (0, import_editor_canvas5.startDragElementFromPanel)(componentModel),
|
|
2035
|
+
onDragStart: (event) => (0, import_editor_canvas5.startDragElementFromPanel)(componentModel, event),
|
|
2036
2036
|
onDragEnd: handleDragEnd,
|
|
2037
2037
|
shape: "rounded",
|
|
2038
2038
|
sx: {
|
|
@@ -2261,26 +2261,141 @@ var COMPONENT_DOCUMENT_TYPE = "elementor_component";
|
|
|
2261
2261
|
// src/components/create-component-form/create-component-form.tsx
|
|
2262
2262
|
var React17 = __toESM(require("react"));
|
|
2263
2263
|
var import_react9 = require("react");
|
|
2264
|
-
var
|
|
2264
|
+
var import_editor_elements8 = require("@elementor/editor-elements");
|
|
2265
|
+
var import_editor_notifications2 = require("@elementor/editor-notifications");
|
|
2265
2266
|
var import_editor_ui8 = require("@elementor/editor-ui");
|
|
2266
2267
|
var import_icons11 = require("@elementor/icons");
|
|
2267
2268
|
var import_ui15 = require("@elementor/ui");
|
|
2268
|
-
var
|
|
2269
|
+
var import_i18n18 = require("@wordpress/i18n");
|
|
2269
2270
|
|
|
2270
|
-
// src/
|
|
2271
|
+
// src/prevent-non-atomic-nesting.ts
|
|
2272
|
+
var import_editor_canvas6 = require("@elementor/editor-canvas");
|
|
2273
|
+
var import_editor_elements7 = require("@elementor/editor-elements");
|
|
2274
|
+
var import_editor_notifications = require("@elementor/editor-notifications");
|
|
2271
2275
|
var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
|
|
2272
2276
|
var import_store36 = require("@elementor/store");
|
|
2277
|
+
var import_i18n16 = require("@wordpress/i18n");
|
|
2278
|
+
var NON_ATOMIC_ELEMENT_ALERT = {
|
|
2279
|
+
type: "default",
|
|
2280
|
+
message: (0, import_i18n16.__)("Cannot add this element here - only atomic elements are allowed inside components.", "elementor"),
|
|
2281
|
+
id: "non-atomic-element-blocked"
|
|
2282
|
+
};
|
|
2283
|
+
function initNonAtomicNestingPrevention() {
|
|
2284
|
+
(0, import_editor_v1_adapters3.blockCommand)({
|
|
2285
|
+
command: "document/elements/create",
|
|
2286
|
+
condition: blockNonAtomicCreate
|
|
2287
|
+
});
|
|
2288
|
+
(0, import_editor_v1_adapters3.blockCommand)({
|
|
2289
|
+
command: "document/elements/move",
|
|
2290
|
+
condition: blockNonAtomicMove
|
|
2291
|
+
});
|
|
2292
|
+
(0, import_editor_v1_adapters3.blockCommand)({
|
|
2293
|
+
command: "document/elements/paste",
|
|
2294
|
+
condition: blockNonAtomicPaste
|
|
2295
|
+
});
|
|
2296
|
+
}
|
|
2297
|
+
function isEditingComponent() {
|
|
2298
|
+
const state = (0, import_store36.__getStore)()?.getState();
|
|
2299
|
+
if (!state) {
|
|
2300
|
+
return false;
|
|
2301
|
+
}
|
|
2302
|
+
return selectCurrentComponentId(state) !== null;
|
|
2303
|
+
}
|
|
2304
|
+
function isElementAtomic(elementType) {
|
|
2305
|
+
return (0, import_editor_elements7.getElementType)(elementType) !== null;
|
|
2306
|
+
}
|
|
2307
|
+
function blockNonAtomicCreate(args) {
|
|
2308
|
+
if (!isEditingComponent()) {
|
|
2309
|
+
return false;
|
|
2310
|
+
}
|
|
2311
|
+
const { model } = args;
|
|
2312
|
+
const elementType = model?.widgetType || model?.elType;
|
|
2313
|
+
if (!elementType) {
|
|
2314
|
+
return false;
|
|
2315
|
+
}
|
|
2316
|
+
if (isElementAtomic(elementType)) {
|
|
2317
|
+
return false;
|
|
2318
|
+
}
|
|
2319
|
+
(0, import_editor_notifications.notify)(NON_ATOMIC_ELEMENT_ALERT);
|
|
2320
|
+
return true;
|
|
2321
|
+
}
|
|
2322
|
+
function blockNonAtomicMove(args) {
|
|
2323
|
+
if (!isEditingComponent()) {
|
|
2324
|
+
return false;
|
|
2325
|
+
}
|
|
2326
|
+
const { containers = [args.container] } = args;
|
|
2327
|
+
const hasNonAtomicElement = containers.some((container) => {
|
|
2328
|
+
if (!container) {
|
|
2329
|
+
return false;
|
|
2330
|
+
}
|
|
2331
|
+
const allElements = (0, import_editor_elements7.getAllDescendants)(container);
|
|
2332
|
+
return allElements.some((element) => !(0, import_editor_canvas6.isAtomicWidget)(element));
|
|
2333
|
+
});
|
|
2334
|
+
if (hasNonAtomicElement) {
|
|
2335
|
+
(0, import_editor_notifications.notify)(NON_ATOMIC_ELEMENT_ALERT);
|
|
2336
|
+
}
|
|
2337
|
+
return hasNonAtomicElement;
|
|
2338
|
+
}
|
|
2339
|
+
function blockNonAtomicPaste(args) {
|
|
2340
|
+
if (!isEditingComponent()) {
|
|
2341
|
+
return false;
|
|
2342
|
+
}
|
|
2343
|
+
const { storageType } = args;
|
|
2344
|
+
if (storageType !== "localstorage") {
|
|
2345
|
+
return false;
|
|
2346
|
+
}
|
|
2347
|
+
const data = window?.elementorCommon?.storage?.get();
|
|
2348
|
+
if (!data?.clipboard?.elements) {
|
|
2349
|
+
return false;
|
|
2350
|
+
}
|
|
2351
|
+
const hasNonAtomicElement = hasNonAtomicElementsInTree(data.clipboard.elements);
|
|
2352
|
+
if (hasNonAtomicElement) {
|
|
2353
|
+
(0, import_editor_notifications.notify)(NON_ATOMIC_ELEMENT_ALERT);
|
|
2354
|
+
}
|
|
2355
|
+
return hasNonAtomicElement;
|
|
2356
|
+
}
|
|
2357
|
+
function hasNonAtomicElementsInTree(elements) {
|
|
2358
|
+
for (const element of elements) {
|
|
2359
|
+
const elementType = element.widgetType || element.elType;
|
|
2360
|
+
if (elementType && !isElementAtomic(elementType)) {
|
|
2361
|
+
return true;
|
|
2362
|
+
}
|
|
2363
|
+
if (element.elements?.length) {
|
|
2364
|
+
if (hasNonAtomicElementsInTree(element.elements)) {
|
|
2365
|
+
return true;
|
|
2366
|
+
}
|
|
2367
|
+
}
|
|
2368
|
+
}
|
|
2369
|
+
return false;
|
|
2370
|
+
}
|
|
2371
|
+
function findNonAtomicElementsInElement(element) {
|
|
2372
|
+
const nonAtomicElements = [];
|
|
2373
|
+
const elementType = element.widgetType || element.elType;
|
|
2374
|
+
if (elementType && !isElementAtomic(elementType)) {
|
|
2375
|
+
nonAtomicElements.push(elementType);
|
|
2376
|
+
}
|
|
2377
|
+
if (element.elements?.length) {
|
|
2378
|
+
for (const child of element.elements) {
|
|
2379
|
+
nonAtomicElements.push(...findNonAtomicElementsInElement(child));
|
|
2380
|
+
}
|
|
2381
|
+
}
|
|
2382
|
+
return [...new Set(nonAtomicElements)];
|
|
2383
|
+
}
|
|
2384
|
+
|
|
2385
|
+
// src/store/actions/create-unpublished-component.ts
|
|
2386
|
+
var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
|
|
2387
|
+
var import_store38 = require("@elementor/store");
|
|
2273
2388
|
var import_utils4 = require("@elementor/utils");
|
|
2274
2389
|
function createUnpublishedComponent(name, element, eventData, overridableProps, uid) {
|
|
2275
2390
|
const generatedUid = uid ?? (0, import_utils4.generateUniqueId)("component");
|
|
2276
2391
|
const componentBase = { uid: generatedUid, name, overridableProps };
|
|
2277
|
-
(0,
|
|
2392
|
+
(0, import_store38.__dispatch)(
|
|
2278
2393
|
slice.actions.addUnpublished({
|
|
2279
2394
|
...componentBase,
|
|
2280
2395
|
elements: [element]
|
|
2281
2396
|
})
|
|
2282
2397
|
);
|
|
2283
|
-
(0,
|
|
2398
|
+
(0, import_store38.__dispatch)(slice.actions.addCreatedThisSession(generatedUid));
|
|
2284
2399
|
replaceElementWithComponent(element, componentBase);
|
|
2285
2400
|
trackComponentEvent({
|
|
2286
2401
|
action: "created",
|
|
@@ -2288,7 +2403,7 @@ function createUnpublishedComponent(name, element, eventData, overridableProps,
|
|
|
2288
2403
|
component_name: name,
|
|
2289
2404
|
...eventData
|
|
2290
2405
|
});
|
|
2291
|
-
(0,
|
|
2406
|
+
(0, import_editor_v1_adapters4.__privateRunCommand)("document/save/auto");
|
|
2292
2407
|
return generatedUid;
|
|
2293
2408
|
}
|
|
2294
2409
|
|
|
@@ -2343,16 +2458,16 @@ var validateForm = (values, schema) => {
|
|
|
2343
2458
|
|
|
2344
2459
|
// src/components/create-component-form/utils/component-form-schema.ts
|
|
2345
2460
|
var import_schema = require("@elementor/schema");
|
|
2346
|
-
var
|
|
2461
|
+
var import_i18n17 = require("@wordpress/i18n");
|
|
2347
2462
|
var MIN_NAME_LENGTH = 2;
|
|
2348
2463
|
var MAX_NAME_LENGTH = 50;
|
|
2349
2464
|
var createBaseComponentSchema = (existingNames) => {
|
|
2350
2465
|
return import_schema.z.object({
|
|
2351
2466
|
componentName: import_schema.z.string().trim().max(
|
|
2352
2467
|
MAX_NAME_LENGTH,
|
|
2353
|
-
(0,
|
|
2468
|
+
(0, import_i18n17.__)("Component name is too long. Please keep it under 50 characters.", "elementor")
|
|
2354
2469
|
).refine((value) => !existingNames.includes(value), {
|
|
2355
|
-
message: (0,
|
|
2470
|
+
message: (0, import_i18n17.__)("Component name already exists", "elementor")
|
|
2356
2471
|
})
|
|
2357
2472
|
});
|
|
2358
2473
|
};
|
|
@@ -2360,9 +2475,9 @@ var createSubmitComponentSchema = (existingNames) => {
|
|
|
2360
2475
|
const baseSchema = createBaseComponentSchema(existingNames);
|
|
2361
2476
|
return baseSchema.extend({
|
|
2362
2477
|
componentName: baseSchema.shape.componentName.refine((value) => value.length > 0, {
|
|
2363
|
-
message: (0,
|
|
2478
|
+
message: (0, import_i18n17.__)("Component name is required.", "elementor")
|
|
2364
2479
|
}).refine((value) => value.length >= MIN_NAME_LENGTH, {
|
|
2365
|
-
message: (0,
|
|
2480
|
+
message: (0, import_i18n17.__)("Component name is too short. Please enter at least 2 characters.", "elementor")
|
|
2366
2481
|
})
|
|
2367
2482
|
});
|
|
2368
2483
|
};
|
|
@@ -2405,7 +2520,19 @@ function CreateComponentForm() {
|
|
|
2405
2520
|
(0, import_react9.useEffect)(() => {
|
|
2406
2521
|
const OPEN_SAVE_AS_COMPONENT_FORM_EVENT = "elementor/editor/open-save-as-component-form";
|
|
2407
2522
|
const openPopup = (event) => {
|
|
2408
|
-
|
|
2523
|
+
const nonAtomicElements = findNonAtomicElementsInElement(event.detail.element);
|
|
2524
|
+
if (nonAtomicElements.length > 0) {
|
|
2525
|
+
(0, import_editor_notifications2.notify)({
|
|
2526
|
+
type: "default",
|
|
2527
|
+
message: (0, import_i18n18.__)(
|
|
2528
|
+
"Cannot save as component - contains non-supported elements. Only atomic elements are allowed inside components.",
|
|
2529
|
+
"elementor"
|
|
2530
|
+
),
|
|
2531
|
+
id: "non-atomic-element-save-blocked"
|
|
2532
|
+
});
|
|
2533
|
+
return;
|
|
2534
|
+
}
|
|
2535
|
+
setElement({ element: event.detail.element, elementLabel: (0, import_editor_elements8.getElementLabel)(event.detail.element.id) });
|
|
2409
2536
|
setAnchorPosition(event.detail.anchorPosition);
|
|
2410
2537
|
eventData.current = getComponentEventData(event.detail.element, event.detail.options);
|
|
2411
2538
|
trackComponentEvent({
|
|
@@ -2427,12 +2554,12 @@ function CreateComponentForm() {
|
|
|
2427
2554
|
setResultNotification({
|
|
2428
2555
|
show: true,
|
|
2429
2556
|
// Translators: %1$s: Component name, %2$s: Component UID
|
|
2430
|
-
message: (0,
|
|
2557
|
+
message: (0, import_i18n18.__)("Component saved successfully as: %1$s (UID: %2$s)", "elementor").replace("%1$s", values.componentName).replace("%2$s", uid),
|
|
2431
2558
|
type: "success"
|
|
2432
2559
|
});
|
|
2433
2560
|
resetAndClosePopup();
|
|
2434
2561
|
} catch {
|
|
2435
|
-
const errorMessage = (0,
|
|
2562
|
+
const errorMessage = (0, import_i18n18.__)("Failed to save component. Please try again.", "elementor");
|
|
2436
2563
|
setResultNotification({
|
|
2437
2564
|
show: true,
|
|
2438
2565
|
message: errorMessage,
|
|
@@ -2503,10 +2630,10 @@ var Form2 = ({
|
|
|
2503
2630
|
}
|
|
2504
2631
|
};
|
|
2505
2632
|
const texts = {
|
|
2506
|
-
heading: (0,
|
|
2507
|
-
name: (0,
|
|
2508
|
-
cancel: (0,
|
|
2509
|
-
create: (0,
|
|
2633
|
+
heading: (0, import_i18n18.__)("Save as a component", "elementor"),
|
|
2634
|
+
name: (0, import_i18n18.__)("Name", "elementor"),
|
|
2635
|
+
cancel: (0, import_i18n18.__)("Cancel", "elementor"),
|
|
2636
|
+
create: (0, import_i18n18.__)("Create", "elementor")
|
|
2510
2637
|
};
|
|
2511
2638
|
const nameInputId = "component-name";
|
|
2512
2639
|
return /* @__PURE__ */ React17.createElement(import_editor_ui8.Form, { onSubmit: handleSubmit }, /* @__PURE__ */ React17.createElement(import_ui15.Stack, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React17.createElement(
|
|
@@ -2539,18 +2666,18 @@ var Form2 = ({
|
|
|
2539
2666
|
var React19 = __toESM(require("react"));
|
|
2540
2667
|
var import_react12 = require("react");
|
|
2541
2668
|
var import_editor_documents10 = require("@elementor/editor-documents");
|
|
2542
|
-
var
|
|
2543
|
-
var
|
|
2669
|
+
var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
|
|
2670
|
+
var import_store42 = require("@elementor/store");
|
|
2544
2671
|
var import_utils6 = require("@elementor/utils");
|
|
2545
2672
|
|
|
2546
2673
|
// src/store/actions/update-current-component.ts
|
|
2547
2674
|
var import_editor_documents9 = require("@elementor/editor-documents");
|
|
2548
|
-
var
|
|
2675
|
+
var import_store40 = require("@elementor/store");
|
|
2549
2676
|
function updateCurrentComponent({
|
|
2550
2677
|
path,
|
|
2551
2678
|
currentComponentId
|
|
2552
2679
|
}) {
|
|
2553
|
-
const dispatch16 = (0,
|
|
2680
|
+
const dispatch16 = (0, import_store40.__getStore)()?.dispatch;
|
|
2554
2681
|
if (!dispatch16) {
|
|
2555
2682
|
return;
|
|
2556
2683
|
}
|
|
@@ -2562,13 +2689,13 @@ function updateCurrentComponent({
|
|
|
2562
2689
|
var React18 = __toESM(require("react"));
|
|
2563
2690
|
var import_react11 = require("react");
|
|
2564
2691
|
var import_react_dom = require("react-dom");
|
|
2565
|
-
var
|
|
2692
|
+
var import_i18n19 = require("@wordpress/i18n");
|
|
2566
2693
|
|
|
2567
2694
|
// src/hooks/use-canvas-document.ts
|
|
2568
|
-
var
|
|
2569
|
-
var
|
|
2695
|
+
var import_editor_canvas7 = require("@elementor/editor-canvas");
|
|
2696
|
+
var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
|
|
2570
2697
|
function useCanvasDocument() {
|
|
2571
|
-
return (0,
|
|
2698
|
+
return (0, import_editor_v1_adapters5.__privateUseListenTo)((0, import_editor_v1_adapters5.commandEndEvent)("editor/documents/attach-preview"), () => (0, import_editor_canvas7.getCanvasIframeDocument)());
|
|
2572
2699
|
}
|
|
2573
2700
|
|
|
2574
2701
|
// src/hooks/use-element-rect.ts
|
|
@@ -2684,7 +2811,7 @@ function Backdrop({ canvas, element, onClose }) {
|
|
|
2684
2811
|
onKeyDown: handleKeyDown,
|
|
2685
2812
|
role: "button",
|
|
2686
2813
|
tabIndex: 0,
|
|
2687
|
-
"aria-label": (0,
|
|
2814
|
+
"aria-label": (0, import_i18n19.__)("Exit component editing mode", "elementor")
|
|
2688
2815
|
}
|
|
2689
2816
|
);
|
|
2690
2817
|
}
|
|
@@ -2752,9 +2879,9 @@ function EditComponent() {
|
|
|
2752
2879
|
function useHandleDocumentSwitches() {
|
|
2753
2880
|
const documentsManager = (0, import_editor_documents10.getV1DocumentsManager)();
|
|
2754
2881
|
const currentComponentId = useCurrentComponentId();
|
|
2755
|
-
const path = (0,
|
|
2882
|
+
const path = (0, import_store42.__useSelector)(selectPath);
|
|
2756
2883
|
(0, import_react12.useEffect)(() => {
|
|
2757
|
-
return (0,
|
|
2884
|
+
return (0, import_editor_v1_adapters6.__privateListenTo)((0, import_editor_v1_adapters6.commandEndEvent)("editor/documents/open"), () => {
|
|
2758
2885
|
const nextDocument = documentsManager.getCurrent();
|
|
2759
2886
|
if (nextDocument.id === currentComponentId) {
|
|
2760
2887
|
return;
|
|
@@ -2804,33 +2931,33 @@ var React20 = __toESM(require("react"));
|
|
|
2804
2931
|
var import_editor_ui9 = require("@elementor/editor-ui");
|
|
2805
2932
|
var import_icons12 = require("@elementor/icons");
|
|
2806
2933
|
var import_ui16 = require("@elementor/ui");
|
|
2807
|
-
var
|
|
2934
|
+
var import_i18n20 = require("@wordpress/i18n");
|
|
2808
2935
|
var openEditModeDialog = (lockedBy) => {
|
|
2809
2936
|
(0, import_editor_ui9.openDialog)({
|
|
2810
2937
|
component: /* @__PURE__ */ React20.createElement(EditModeDialog, { lockedBy })
|
|
2811
2938
|
});
|
|
2812
2939
|
};
|
|
2813
2940
|
var EditModeDialog = ({ lockedBy }) => {
|
|
2814
|
-
const content = (0,
|
|
2815
|
-
return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(import_ui16.DialogHeader, { logo: false }, /* @__PURE__ */ React20.createElement(import_ui16.Box, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React20.createElement(import_ui16.Icon, { color: "secondary" }, /* @__PURE__ */ React20.createElement(import_icons12.InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React20.createElement(import_ui16.Typography, { variant: "subtitle1" }, content))), /* @__PURE__ */ React20.createElement(import_ui16.DialogContent, null, /* @__PURE__ */ React20.createElement(import_ui16.Stack, { spacing: 2, direction: "column" }, /* @__PURE__ */ React20.createElement(import_ui16.Typography, { variant: "body2" }, (0,
|
|
2941
|
+
const content = (0, import_i18n20.__)("%s is currently editing this document", "elementor").replace("%s", lockedBy);
|
|
2942
|
+
return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(import_ui16.DialogHeader, { logo: false }, /* @__PURE__ */ React20.createElement(import_ui16.Box, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React20.createElement(import_ui16.Icon, { color: "secondary" }, /* @__PURE__ */ React20.createElement(import_icons12.InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React20.createElement(import_ui16.Typography, { variant: "subtitle1" }, content))), /* @__PURE__ */ React20.createElement(import_ui16.DialogContent, null, /* @__PURE__ */ React20.createElement(import_ui16.Stack, { spacing: 2, direction: "column" }, /* @__PURE__ */ React20.createElement(import_ui16.Typography, { variant: "body2" }, (0, import_i18n20.__)(
|
|
2816
2943
|
"You can wait for them to finish or reach out to coordinate your changes together.",
|
|
2817
2944
|
"elementor"
|
|
2818
|
-
)), /* @__PURE__ */ React20.createElement(import_ui16.DialogActions, null, /* @__PURE__ */ React20.createElement(import_ui16.Button, { color: "secondary", variant: "contained", onClick: import_editor_ui9.closeDialog }, (0,
|
|
2945
|
+
)), /* @__PURE__ */ React20.createElement(import_ui16.DialogActions, null, /* @__PURE__ */ React20.createElement(import_ui16.Button, { color: "secondary", variant: "contained", onClick: import_editor_ui9.closeDialog }, (0, import_i18n20.__)("Close", "elementor"))))));
|
|
2819
2946
|
};
|
|
2820
2947
|
|
|
2821
2948
|
// src/components/instance-editing-panel/instance-editing-panel.tsx
|
|
2822
2949
|
var React25 = __toESM(require("react"));
|
|
2823
2950
|
var import_editor_controls4 = require("@elementor/editor-controls");
|
|
2824
2951
|
var import_editor_editing_panel5 = require("@elementor/editor-editing-panel");
|
|
2825
|
-
var
|
|
2952
|
+
var import_editor_elements12 = require("@elementor/editor-elements");
|
|
2826
2953
|
var import_editor_panels3 = require("@elementor/editor-panels");
|
|
2827
2954
|
var import_icons14 = require("@elementor/icons");
|
|
2828
2955
|
var import_ui21 = require("@elementor/ui");
|
|
2829
|
-
var
|
|
2956
|
+
var import_i18n22 = require("@wordpress/i18n");
|
|
2830
2957
|
|
|
2831
2958
|
// src/hooks/use-component-instance-settings.ts
|
|
2832
2959
|
var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
|
|
2833
|
-
var
|
|
2960
|
+
var import_editor_elements9 = require("@elementor/editor-elements");
|
|
2834
2961
|
|
|
2835
2962
|
// src/prop-types/component-instance-prop-type.ts
|
|
2836
2963
|
var import_editor_props4 = require("@elementor/editor-props");
|
|
@@ -2887,7 +3014,7 @@ var componentInstancePropTypeUtil = (0, import_editor_props4.createPropUtils)(
|
|
|
2887
3014
|
// src/hooks/use-component-instance-settings.ts
|
|
2888
3015
|
function useComponentInstanceSettings() {
|
|
2889
3016
|
const { element } = (0, import_editor_editing_panel2.useElement)();
|
|
2890
|
-
const settings = (0,
|
|
3017
|
+
const settings = (0, import_editor_elements9.useElementSetting)(element.id, "component_instance");
|
|
2891
3018
|
return componentInstancePropTypeUtil.extract(settings);
|
|
2892
3019
|
}
|
|
2893
3020
|
|
|
@@ -2895,7 +3022,7 @@ function useComponentInstanceSettings() {
|
|
|
2895
3022
|
var React21 = __toESM(require("react"));
|
|
2896
3023
|
var import_icons13 = require("@elementor/icons");
|
|
2897
3024
|
var import_ui17 = require("@elementor/ui");
|
|
2898
|
-
var
|
|
3025
|
+
var import_i18n21 = require("@wordpress/i18n");
|
|
2899
3026
|
var EmptyState2 = ({ onEditComponent }) => {
|
|
2900
3027
|
return /* @__PURE__ */ React21.createElement(
|
|
2901
3028
|
import_ui17.Stack,
|
|
@@ -2908,12 +3035,12 @@ var EmptyState2 = ({ onEditComponent }) => {
|
|
|
2908
3035
|
gap: 1.5
|
|
2909
3036
|
},
|
|
2910
3037
|
/* @__PURE__ */ React21.createElement(import_icons13.ComponentPropListIcon, { fontSize: "large" }),
|
|
2911
|
-
/* @__PURE__ */ React21.createElement(import_ui17.Typography, { align: "center", variant: "subtitle2" }, (0,
|
|
2912
|
-
/* @__PURE__ */ React21.createElement(import_ui17.Typography, { align: "center", variant: "caption", maxWidth: "170px" }, (0,
|
|
3038
|
+
/* @__PURE__ */ React21.createElement(import_ui17.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n21.__)("No properties yet", "elementor")),
|
|
3039
|
+
/* @__PURE__ */ React21.createElement(import_ui17.Typography, { align: "center", variant: "caption", maxWidth: "170px" }, (0, import_i18n21.__)(
|
|
2913
3040
|
"Edit the component to add properties, manage them or update the design across all instances.",
|
|
2914
3041
|
"elementor"
|
|
2915
3042
|
)),
|
|
2916
|
-
/* @__PURE__ */ React21.createElement(import_ui17.Button, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React21.createElement(import_icons13.PencilIcon, { fontSize: "small" }), (0,
|
|
3043
|
+
/* @__PURE__ */ React21.createElement(import_ui17.Button, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React21.createElement(import_icons13.PencilIcon, { fontSize: "small" }), (0, import_i18n21.__)("Edit component", "elementor"))
|
|
2917
3044
|
);
|
|
2918
3045
|
};
|
|
2919
3046
|
|
|
@@ -2931,9 +3058,9 @@ var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
|
|
|
2931
3058
|
var import_ui19 = require("@elementor/ui");
|
|
2932
3059
|
|
|
2933
3060
|
// src/hooks/use-controls-by-widget-type.ts
|
|
2934
|
-
var
|
|
3061
|
+
var import_editor_elements10 = require("@elementor/editor-elements");
|
|
2935
3062
|
function useControlsByWidgetType(type) {
|
|
2936
|
-
const elementType = (0,
|
|
3063
|
+
const elementType = (0, import_editor_elements10.getElementType)(type);
|
|
2937
3064
|
if (!elementType) {
|
|
2938
3065
|
return {};
|
|
2939
3066
|
}
|
|
@@ -2962,9 +3089,9 @@ function getControlsByBind(controls) {
|
|
|
2962
3089
|
}
|
|
2963
3090
|
|
|
2964
3091
|
// src/store/actions/update-overridable-prop.ts
|
|
2965
|
-
var
|
|
3092
|
+
var import_store44 = require("@elementor/store");
|
|
2966
3093
|
function updateOverridableProp(componentId, propValue, originPropFields) {
|
|
2967
|
-
const overridableProps = selectOverridableProps((0,
|
|
3094
|
+
const overridableProps = selectOverridableProps((0, import_store44.__getState)(), componentId);
|
|
2968
3095
|
if (!overridableProps) {
|
|
2969
3096
|
return;
|
|
2970
3097
|
}
|
|
@@ -2988,7 +3115,7 @@ function updateOverridableProp(componentId, propValue, originPropFields) {
|
|
|
2988
3115
|
}
|
|
2989
3116
|
}
|
|
2990
3117
|
};
|
|
2991
|
-
(0,
|
|
3118
|
+
(0, import_store44.__dispatch)(
|
|
2992
3119
|
slice.actions.setOverridableProps({
|
|
2993
3120
|
componentId,
|
|
2994
3121
|
overridableProps: newOverridableProps
|
|
@@ -2997,7 +3124,7 @@ function updateOverridableProp(componentId, propValue, originPropFields) {
|
|
|
2997
3124
|
}
|
|
2998
3125
|
|
|
2999
3126
|
// src/utils/get-prop-type-for-component-override.ts
|
|
3000
|
-
var
|
|
3127
|
+
var import_editor_elements11 = require("@elementor/editor-elements");
|
|
3001
3128
|
var getPropTypeForComponentOverride = (overridableProp) => {
|
|
3002
3129
|
if (overridableProp.originPropFields) {
|
|
3003
3130
|
return getPropType(overridableProp.originPropFields);
|
|
@@ -3010,7 +3137,7 @@ var getPropTypeForComponentOverride = (overridableProp) => {
|
|
|
3010
3137
|
});
|
|
3011
3138
|
};
|
|
3012
3139
|
function getPropType({ widgetType, propKey }) {
|
|
3013
|
-
const widgetPropsSchema = (0,
|
|
3140
|
+
const widgetPropsSchema = (0, import_editor_elements11.getWidgetsCache)()?.[widgetType]?.atomic_props_schema;
|
|
3014
3141
|
return widgetPropsSchema?.[propKey];
|
|
3015
3142
|
}
|
|
3016
3143
|
|
|
@@ -3183,11 +3310,11 @@ function InstanceEditingPanel() {
|
|
|
3183
3310
|
const overrides = settings?.overrides?.value;
|
|
3184
3311
|
const component = useComponent(componentId ?? null);
|
|
3185
3312
|
const overridableProps = useOverridableProps(componentId ?? null);
|
|
3186
|
-
const componentInstanceId = (0,
|
|
3313
|
+
const componentInstanceId = (0, import_editor_elements12.useSelectedElement)()?.element?.id ?? null;
|
|
3187
3314
|
if (!componentId || !overridableProps || !component) {
|
|
3188
3315
|
return null;
|
|
3189
3316
|
}
|
|
3190
|
-
const panelTitle = (0,
|
|
3317
|
+
const panelTitle = (0, import_i18n22.__)("Edit %s", "elementor").replace("%s", component.name);
|
|
3191
3318
|
const handleEditComponent = () => switchToComponent(componentId, componentInstanceId);
|
|
3192
3319
|
const isNonEmptyGroup = (group) => group !== null && group.props.length > 0;
|
|
3193
3320
|
const groups = overridableProps.groups.order.map((groupId) => overridableProps.groups.items[groupId] ?? null).filter(isNonEmptyGroup);
|
|
@@ -3268,12 +3395,12 @@ function OverridablePropControl({
|
|
|
3268
3395
|
var React29 = __toESM(require("react"));
|
|
3269
3396
|
var import_editor_controls6 = require("@elementor/editor-controls");
|
|
3270
3397
|
var import_editor_editing_panel7 = require("@elementor/editor-editing-panel");
|
|
3271
|
-
var
|
|
3398
|
+
var import_editor_elements13 = require("@elementor/editor-elements");
|
|
3272
3399
|
var import_ui23 = require("@elementor/ui");
|
|
3273
|
-
var
|
|
3400
|
+
var import_i18n24 = require("@wordpress/i18n");
|
|
3274
3401
|
|
|
3275
3402
|
// src/store/actions/set-overridable-prop.ts
|
|
3276
|
-
var
|
|
3403
|
+
var import_store49 = require("@elementor/store");
|
|
3277
3404
|
var import_utils7 = require("@elementor/utils");
|
|
3278
3405
|
function setOverridableProp({
|
|
3279
3406
|
componentId,
|
|
@@ -3287,7 +3414,7 @@ function setOverridableProp({
|
|
|
3287
3414
|
originValue,
|
|
3288
3415
|
originPropFields
|
|
3289
3416
|
}) {
|
|
3290
|
-
const overridableProps = selectOverridableProps((0,
|
|
3417
|
+
const overridableProps = selectOverridableProps((0, import_store49.__getState)(), componentId);
|
|
3291
3418
|
if (!overridableProps) {
|
|
3292
3419
|
return;
|
|
3293
3420
|
}
|
|
@@ -3324,7 +3451,7 @@ function setOverridableProp({
|
|
|
3324
3451
|
if (isChangingGroups) {
|
|
3325
3452
|
groups = removePropFromGroup(groups, existingOverridableProp.groupId, overridableProp.overrideKey);
|
|
3326
3453
|
}
|
|
3327
|
-
(0,
|
|
3454
|
+
(0, import_store49.__dispatch)(
|
|
3328
3455
|
slice.actions.setOverridableProps({
|
|
3329
3456
|
componentId,
|
|
3330
3457
|
overridableProps: {
|
|
@@ -3341,7 +3468,7 @@ var React28 = __toESM(require("react"));
|
|
|
3341
3468
|
var import_react15 = require("react");
|
|
3342
3469
|
var import_icons15 = require("@elementor/icons");
|
|
3343
3470
|
var import_ui22 = require("@elementor/ui");
|
|
3344
|
-
var
|
|
3471
|
+
var import_i18n23 = require("@wordpress/i18n");
|
|
3345
3472
|
var SIZE2 = "tiny";
|
|
3346
3473
|
var IconContainer = (0, import_ui22.styled)(import_ui22.Box)`
|
|
3347
3474
|
pointer-events: none;
|
|
@@ -3401,18 +3528,18 @@ var Indicator = (0, import_react15.forwardRef)(({ isOpen, isOverridable, ...prop
|
|
|
3401
3528
|
IconContainer,
|
|
3402
3529
|
{
|
|
3403
3530
|
className: "icon",
|
|
3404
|
-
"aria-label": isOverridable ? (0,
|
|
3531
|
+
"aria-label": isOverridable ? (0, import_i18n23.__)("Overridable property", "elementor") : (0, import_i18n23.__)("Make prop overridable", "elementor")
|
|
3405
3532
|
},
|
|
3406
3533
|
isOverridable ? /* @__PURE__ */ React28.createElement(import_icons15.CheckIcon, { fontSize: SIZE2 }) : /* @__PURE__ */ React28.createElement(import_icons15.PlusIcon, { fontSize: SIZE2 })
|
|
3407
3534
|
)));
|
|
3408
3535
|
|
|
3409
3536
|
// src/components/overridable-props/utils/get-overridable-prop.ts
|
|
3410
|
-
var
|
|
3537
|
+
var import_store51 = require("@elementor/store");
|
|
3411
3538
|
function getOverridableProp({
|
|
3412
3539
|
componentId,
|
|
3413
3540
|
overrideKey
|
|
3414
3541
|
}) {
|
|
3415
|
-
const overridableProps = selectOverridableProps((0,
|
|
3542
|
+
const overridableProps = selectOverridableProps((0, import_store51.__getState)(), componentId);
|
|
3416
3543
|
if (!overridableProps) {
|
|
3417
3544
|
return void 0;
|
|
3418
3545
|
}
|
|
@@ -3446,7 +3573,7 @@ function Content2({ componentId, overridableProps }) {
|
|
|
3446
3573
|
});
|
|
3447
3574
|
const triggerProps = (0, import_ui23.bindTrigger)(popupState);
|
|
3448
3575
|
const popoverProps = (0, import_ui23.bindPopover)(popupState);
|
|
3449
|
-
const { elType } = (0,
|
|
3576
|
+
const { elType } = (0, import_editor_elements13.getWidgetsCache)()?.[elementType.key] ?? { elType: "widget" };
|
|
3450
3577
|
const handleSubmit = ({ label, group }) => {
|
|
3451
3578
|
const propTypeDefault = propType.default ?? {};
|
|
3452
3579
|
const originValue = (!overridableValue ? value : overridableValue?.origin_value) ?? propTypeDefault;
|
|
@@ -3472,7 +3599,7 @@ function Content2({ componentId, overridableProps }) {
|
|
|
3472
3599
|
popupState.close();
|
|
3473
3600
|
};
|
|
3474
3601
|
const overridableConfig = overridableValue ? getOverridableProp({ componentId, overrideKey: overridableValue.override_key }) : void 0;
|
|
3475
|
-
return /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement(import_ui23.Tooltip, { placement: "top", title: (0,
|
|
3602
|
+
return /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement(import_ui23.Tooltip, { placement: "top", title: (0, import_i18n24.__)("Override Property", "elementor") }, /* @__PURE__ */ React29.createElement(Indicator, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React29.createElement(
|
|
3476
3603
|
import_ui23.Popover,
|
|
3477
3604
|
{
|
|
3478
3605
|
disableScrollLock: true,
|
|
@@ -3507,17 +3634,17 @@ function isPropAllowed(bind) {
|
|
|
3507
3634
|
}
|
|
3508
3635
|
|
|
3509
3636
|
// src/hooks/regenerate-override-keys.ts
|
|
3510
|
-
var
|
|
3511
|
-
var
|
|
3637
|
+
var import_editor_elements14 = require("@elementor/editor-elements");
|
|
3638
|
+
var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
|
|
3512
3639
|
var import_utils8 = require("@elementor/utils");
|
|
3513
3640
|
function initRegenerateOverrideKeys() {
|
|
3514
|
-
(0,
|
|
3641
|
+
(0, import_editor_v1_adapters7.registerDataHook)("after", "document/elements/duplicate", (_args, result) => {
|
|
3515
3642
|
regenerateOverrideKeysForContainers(result);
|
|
3516
3643
|
});
|
|
3517
|
-
(0,
|
|
3644
|
+
(0, import_editor_v1_adapters7.registerDataHook)("after", "document/elements/paste", (_args, result) => {
|
|
3518
3645
|
regenerateOverrideKeysForContainers(result);
|
|
3519
3646
|
});
|
|
3520
|
-
(0,
|
|
3647
|
+
(0, import_editor_v1_adapters7.registerDataHook)("after", "document/elements/import", (_args, result) => {
|
|
3521
3648
|
regenerateOverrideKeysForContainers(result);
|
|
3522
3649
|
});
|
|
3523
3650
|
}
|
|
@@ -3528,11 +3655,11 @@ function regenerateOverrideKeysForContainers(result) {
|
|
|
3528
3655
|
});
|
|
3529
3656
|
}
|
|
3530
3657
|
function regenerateOverrideKeysRecursive(elementId) {
|
|
3531
|
-
const container = (0,
|
|
3658
|
+
const container = (0, import_editor_elements14.getContainer)(elementId);
|
|
3532
3659
|
if (!container) {
|
|
3533
3660
|
return;
|
|
3534
3661
|
}
|
|
3535
|
-
(0,
|
|
3662
|
+
(0, import_editor_elements14.getAllDescendants)(container).forEach(regenerateOverrideKeys);
|
|
3536
3663
|
}
|
|
3537
3664
|
function regenerateOverrideKeys(element) {
|
|
3538
3665
|
if (!isComponentInstance(element.model.toJSON())) {
|
|
@@ -3566,7 +3693,7 @@ function regenerateOverrideKeys(element) {
|
|
|
3566
3693
|
}
|
|
3567
3694
|
}
|
|
3568
3695
|
};
|
|
3569
|
-
(0,
|
|
3696
|
+
(0, import_editor_elements14.updateElementSettings)({
|
|
3570
3697
|
id: element.id,
|
|
3571
3698
|
props: { component_instance: newComponentInstance },
|
|
3572
3699
|
withHistory: false
|
|
@@ -3589,8 +3716,8 @@ function hasOverrides(settings) {
|
|
|
3589
3716
|
var import_editor_mcp2 = require("@elementor/editor-mcp");
|
|
3590
3717
|
|
|
3591
3718
|
// src/mcp/save-as-component-tool.ts
|
|
3592
|
-
var
|
|
3593
|
-
var
|
|
3719
|
+
var import_editor_canvas8 = require("@elementor/editor-canvas");
|
|
3720
|
+
var import_editor_elements15 = require("@elementor/editor-elements");
|
|
3594
3721
|
var import_editor_mcp = require("@elementor/editor-mcp");
|
|
3595
3722
|
var import_http_client2 = require("@elementor/http-client");
|
|
3596
3723
|
var import_schema6 = require("@elementor/schema");
|
|
@@ -3625,7 +3752,7 @@ var ERROR_MESSAGES2 = {
|
|
|
3625
3752
|
var handleSaveAsComponent = async (params) => {
|
|
3626
3753
|
const { element_id: elementId, component_name: componentName, overridable_props: overridablePropsInput } = params;
|
|
3627
3754
|
const validElementTypes = getValidElementTypes();
|
|
3628
|
-
const container = (0,
|
|
3755
|
+
const container = (0, import_editor_elements15.getContainer)(elementId);
|
|
3629
3756
|
if (!container) {
|
|
3630
3757
|
throw new Error(ERROR_MESSAGES2.ELEMENT_NOT_FOUND);
|
|
3631
3758
|
}
|
|
@@ -3672,7 +3799,7 @@ function enrichOverridableProps(input, rootElement) {
|
|
|
3672
3799
|
}
|
|
3673
3800
|
const elType = element.elType;
|
|
3674
3801
|
const widgetType = element.widgetType || element.elType;
|
|
3675
|
-
const elementType = (0,
|
|
3802
|
+
const elementType = (0, import_editor_elements15.getElementType)(widgetType);
|
|
3676
3803
|
if (!elementType) {
|
|
3677
3804
|
throw new Error(
|
|
3678
3805
|
`Element type "${widgetType}" is not atomic or does not have a settings schema. Cannot expose property "${propKey}" for element "${elementId}".`
|
|
@@ -3746,7 +3873,7 @@ function generateLabel(propKey) {
|
|
|
3746
3873
|
return `${uniqueId} - ${propKey}`;
|
|
3747
3874
|
}
|
|
3748
3875
|
function getValidElementTypes() {
|
|
3749
|
-
const types = (0,
|
|
3876
|
+
const types = (0, import_editor_elements15.getWidgetsCache)();
|
|
3750
3877
|
if (!types) {
|
|
3751
3878
|
return [];
|
|
3752
3879
|
}
|
|
@@ -3776,17 +3903,17 @@ Use this tool when the user wants to:
|
|
|
3776
3903
|
- Element elType is a 'widget'
|
|
3777
3904
|
|
|
3778
3905
|
# **CRITICAL - REQUIRED RESOURCES (Must read before using this tool)**
|
|
3779
|
-
1. [${
|
|
3906
|
+
1. [${import_editor_canvas8.DOCUMENT_STRUCTURE_URI}]
|
|
3780
3907
|
**MANDATORY** - Required to understand the document structure and identify child elements for overridable properties.
|
|
3781
3908
|
Use this resource to find element IDs and understand the element hierarchy.
|
|
3782
3909
|
|
|
3783
|
-
2. [${
|
|
3910
|
+
2. [${import_editor_canvas8.WIDGET_SCHEMA_URI}]
|
|
3784
3911
|
**MANDATORY** - Required to understand which properties are available for each widget type.
|
|
3785
3912
|
Use this to identify available propKeys in the atomic_props_schema for child elements.
|
|
3786
3913
|
|
|
3787
3914
|
# Instructions - MUST FOLLOW IN ORDER
|
|
3788
3915
|
## Step 1: Identify the Target Element
|
|
3789
|
-
1. Read the [${
|
|
3916
|
+
1. Read the [${import_editor_canvas8.DOCUMENT_STRUCTURE_URI}] resource to understand the document structure
|
|
3790
3917
|
2. Locate the element you want to save as a component by its element_id
|
|
3791
3918
|
3. Verify the element type is a valid element type
|
|
3792
3919
|
4. Ensure the element is not locked and is not already a component
|
|
@@ -3796,11 +3923,11 @@ Do this step to make child element properties customizable.
|
|
|
3796
3923
|
Skip that step ONLY if the user explicitly requests to not make any properties customizable.
|
|
3797
3924
|
|
|
3798
3925
|
1. **Identify Child Elements**
|
|
3799
|
-
- Use the [${
|
|
3926
|
+
- Use the [${import_editor_canvas8.DOCUMENT_STRUCTURE_URI}] resource to find all child elements
|
|
3800
3927
|
- Note the elementId and widgetType/elType of each child element you want to customize
|
|
3801
3928
|
|
|
3802
3929
|
2. **Find Available Properties**
|
|
3803
|
-
- Use the [${
|
|
3930
|
+
- Use the [${import_editor_canvas8.WIDGET_SCHEMA_URI}] resource to find the child element's widget type schema
|
|
3804
3931
|
- Review the atomic_props_schema to find available propKeys (ONLY use top-level props)
|
|
3805
3932
|
- Common propKeys include: "text", "url", "tag", "size", etc.
|
|
3806
3933
|
- Use only the top level properties, do not use nested properties.
|
|
@@ -3818,7 +3945,7 @@ Call the tool with:
|
|
|
3818
3945
|
|
|
3819
3946
|
# CONSTRAINTS
|
|
3820
3947
|
- NEVER try to override properties of the parent element itself - ONLY child elements
|
|
3821
|
-
- NEVER use invalid propKeys - always verify against the widget's atomic_props_schema in [${
|
|
3948
|
+
- NEVER use invalid propKeys - always verify against the widget's atomic_props_schema in [${import_editor_canvas8.WIDGET_SCHEMA_URI}]
|
|
3822
3949
|
- Property keys must exist in the child element's atomic_props_schema
|
|
3823
3950
|
- Element IDs must exist within the target element's children
|
|
3824
3951
|
- When tool execution fails, read the error message and adjust accordingly
|
|
@@ -3827,7 +3954,7 @@ Call the tool with:
|
|
|
3827
3954
|
saveAsComponentPrompt.parameter(
|
|
3828
3955
|
"element_id",
|
|
3829
3956
|
`**MANDATORY** The unique identifier of the element to save as a component.
|
|
3830
|
-
Use the [${
|
|
3957
|
+
Use the [${import_editor_canvas8.DOCUMENT_STRUCTURE_URI}] resource to find available element IDs.`
|
|
3831
3958
|
);
|
|
3832
3959
|
saveAsComponentPrompt.parameter(
|
|
3833
3960
|
"component_name",
|
|
@@ -3851,8 +3978,8 @@ Structure:
|
|
|
3851
3978
|
\`\`\`
|
|
3852
3979
|
|
|
3853
3980
|
To populate this correctly:
|
|
3854
|
-
1. Use [${
|
|
3855
|
-
2. Use [${
|
|
3981
|
+
1. Use [${import_editor_canvas8.DOCUMENT_STRUCTURE_URI}] to find child element IDs and their widgetType
|
|
3982
|
+
2. Use [${import_editor_canvas8.WIDGET_SCHEMA_URI}] to find the atomic_props_schema for each child element's widgetType
|
|
3856
3983
|
3. Only include properties you want to be customizable in component instances
|
|
3857
3984
|
4. Common propKeys: "text", "url", "tag", "size", "align", etc.`
|
|
3858
3985
|
);
|
|
@@ -3919,36 +4046,36 @@ function initMcp() {
|
|
|
3919
4046
|
|
|
3920
4047
|
// src/populate-store.ts
|
|
3921
4048
|
var import_react16 = require("react");
|
|
3922
|
-
var
|
|
4049
|
+
var import_store54 = require("@elementor/store");
|
|
3923
4050
|
function PopulateStore() {
|
|
3924
4051
|
(0, import_react16.useEffect)(() => {
|
|
3925
|
-
(0,
|
|
4052
|
+
(0, import_store54.__dispatch)(loadComponents());
|
|
3926
4053
|
}, []);
|
|
3927
4054
|
return null;
|
|
3928
4055
|
}
|
|
3929
4056
|
|
|
3930
4057
|
// src/prevent-circular-nesting.ts
|
|
3931
|
-
var
|
|
3932
|
-
var
|
|
3933
|
-
var
|
|
3934
|
-
var
|
|
3935
|
-
var
|
|
4058
|
+
var import_editor_elements16 = require("@elementor/editor-elements");
|
|
4059
|
+
var import_editor_notifications3 = require("@elementor/editor-notifications");
|
|
4060
|
+
var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
|
|
4061
|
+
var import_store55 = require("@elementor/store");
|
|
4062
|
+
var import_i18n25 = require("@wordpress/i18n");
|
|
3936
4063
|
var COMPONENT_TYPE = "e-component";
|
|
3937
4064
|
var COMPONENT_CIRCULAR_NESTING_ALERT = {
|
|
3938
4065
|
type: "default",
|
|
3939
|
-
message: (0,
|
|
4066
|
+
message: (0, import_i18n25.__)("Cannot add this component here - it would create a circular reference.", "elementor"),
|
|
3940
4067
|
id: "circular-component-nesting-blocked"
|
|
3941
4068
|
};
|
|
3942
4069
|
function initCircularNestingPrevention() {
|
|
3943
|
-
(0,
|
|
4070
|
+
(0, import_editor_v1_adapters8.blockCommand)({
|
|
3944
4071
|
command: "document/elements/create",
|
|
3945
4072
|
condition: blockCircularCreate
|
|
3946
4073
|
});
|
|
3947
|
-
(0,
|
|
4074
|
+
(0, import_editor_v1_adapters8.blockCommand)({
|
|
3948
4075
|
command: "document/elements/move",
|
|
3949
4076
|
condition: blockCircularMove
|
|
3950
4077
|
});
|
|
3951
|
-
(0,
|
|
4078
|
+
(0, import_editor_v1_adapters8.blockCommand)({
|
|
3952
4079
|
command: "document/elements/paste",
|
|
3953
4080
|
condition: blockCircularPaste
|
|
3954
4081
|
});
|
|
@@ -3957,7 +4084,7 @@ function wouldCreateCircularNesting(componentIdToAdd) {
|
|
|
3957
4084
|
if (componentIdToAdd === void 0) {
|
|
3958
4085
|
return false;
|
|
3959
4086
|
}
|
|
3960
|
-
const state = (0,
|
|
4087
|
+
const state = (0, import_store55.__getState)();
|
|
3961
4088
|
const currentComponentId = selectCurrentComponentId(state);
|
|
3962
4089
|
const path = selectPath(state);
|
|
3963
4090
|
if (currentComponentId === null) {
|
|
@@ -4013,7 +4140,7 @@ function blockCircularCreate(args) {
|
|
|
4013
4140
|
}
|
|
4014
4141
|
const isBlocked = wouldCreateCircularNesting(componentId);
|
|
4015
4142
|
if (isBlocked) {
|
|
4016
|
-
(0,
|
|
4143
|
+
(0, import_editor_notifications3.notify)(COMPONENT_CIRCULAR_NESTING_ALERT);
|
|
4017
4144
|
}
|
|
4018
4145
|
return isBlocked;
|
|
4019
4146
|
}
|
|
@@ -4023,7 +4150,7 @@ function blockCircularMove(args) {
|
|
|
4023
4150
|
if (!container) {
|
|
4024
4151
|
return false;
|
|
4025
4152
|
}
|
|
4026
|
-
const allElements = (0,
|
|
4153
|
+
const allElements = (0, import_editor_elements16.getAllDescendants)(container);
|
|
4027
4154
|
return allElements.some((element) => {
|
|
4028
4155
|
const componentId = extractComponentIdFromContainer(element);
|
|
4029
4156
|
if (componentId === null) {
|
|
@@ -4033,7 +4160,7 @@ function blockCircularMove(args) {
|
|
|
4033
4160
|
});
|
|
4034
4161
|
});
|
|
4035
4162
|
if (hasCircularComponent) {
|
|
4036
|
-
(0,
|
|
4163
|
+
(0, import_editor_notifications3.notify)(COMPONENT_CIRCULAR_NESTING_ALERT);
|
|
4037
4164
|
}
|
|
4038
4165
|
return hasCircularComponent;
|
|
4039
4166
|
}
|
|
@@ -4049,25 +4176,25 @@ function blockCircularPaste(args) {
|
|
|
4049
4176
|
const allComponentIds = extractComponentIdsFromElements(data.clipboard.elements);
|
|
4050
4177
|
const hasCircularComponent = allComponentIds.some(wouldCreateCircularNesting);
|
|
4051
4178
|
if (hasCircularComponent) {
|
|
4052
|
-
(0,
|
|
4179
|
+
(0, import_editor_notifications3.notify)(COMPONENT_CIRCULAR_NESTING_ALERT);
|
|
4053
4180
|
}
|
|
4054
4181
|
return hasCircularComponent;
|
|
4055
4182
|
}
|
|
4056
4183
|
|
|
4057
4184
|
// src/store/actions/remove-component-styles.ts
|
|
4058
|
-
var
|
|
4185
|
+
var import_store57 = require("@elementor/store");
|
|
4059
4186
|
function removeComponentStyles(id2) {
|
|
4060
4187
|
apiClient.invalidateComponentConfigCache(id2);
|
|
4061
|
-
(0,
|
|
4188
|
+
(0, import_store57.__dispatch)(slice.actions.removeStyles({ id: id2 }));
|
|
4062
4189
|
}
|
|
4063
4190
|
|
|
4064
4191
|
// src/store/components-styles-provider.ts
|
|
4065
4192
|
var import_editor_styles_repository = require("@elementor/editor-styles-repository");
|
|
4066
|
-
var
|
|
4193
|
+
var import_store59 = require("@elementor/store");
|
|
4067
4194
|
var componentsStylesProvider = (0, import_editor_styles_repository.createStylesProvider)({
|
|
4068
4195
|
key: "components-styles",
|
|
4069
4196
|
priority: 100,
|
|
4070
|
-
subscribe: (cb) => (0,
|
|
4197
|
+
subscribe: (cb) => (0, import_store59.__subscribeWithSelector)(
|
|
4071
4198
|
(state) => state[SLICE_NAME],
|
|
4072
4199
|
() => {
|
|
4073
4200
|
cb();
|
|
@@ -4075,29 +4202,29 @@ var componentsStylesProvider = (0, import_editor_styles_repository.createStylesP
|
|
|
4075
4202
|
),
|
|
4076
4203
|
actions: {
|
|
4077
4204
|
all: () => {
|
|
4078
|
-
return selectFlatStyles((0,
|
|
4205
|
+
return selectFlatStyles((0, import_store59.__getState)());
|
|
4079
4206
|
},
|
|
4080
4207
|
get: (id2) => {
|
|
4081
|
-
return selectFlatStyles((0,
|
|
4208
|
+
return selectFlatStyles((0, import_store59.__getState)()).find((style) => style.id === id2) ?? null;
|
|
4082
4209
|
}
|
|
4083
4210
|
}
|
|
4084
4211
|
});
|
|
4085
4212
|
|
|
4086
4213
|
// src/sync/create-components-before-save.ts
|
|
4087
|
-
var
|
|
4088
|
-
var
|
|
4214
|
+
var import_editor_elements17 = require("@elementor/editor-elements");
|
|
4215
|
+
var import_store61 = require("@elementor/store");
|
|
4089
4216
|
async function createComponentsBeforeSave({
|
|
4090
4217
|
elements,
|
|
4091
4218
|
status
|
|
4092
4219
|
}) {
|
|
4093
|
-
const unpublishedComponents = selectUnpublishedComponents((0,
|
|
4220
|
+
const unpublishedComponents = selectUnpublishedComponents((0, import_store61.__getState)());
|
|
4094
4221
|
if (!unpublishedComponents.length) {
|
|
4095
4222
|
return;
|
|
4096
4223
|
}
|
|
4097
4224
|
try {
|
|
4098
4225
|
const uidToComponentId = await createComponents(unpublishedComponents, status);
|
|
4099
4226
|
updateComponentInstances(elements, uidToComponentId);
|
|
4100
|
-
(0,
|
|
4227
|
+
(0, import_store61.__dispatch)(
|
|
4101
4228
|
slice.actions.add(
|
|
4102
4229
|
unpublishedComponents.map((component) => ({
|
|
4103
4230
|
id: uidToComponentId.get(component.uid),
|
|
@@ -4107,7 +4234,7 @@ async function createComponentsBeforeSave({
|
|
|
4107
4234
|
}))
|
|
4108
4235
|
)
|
|
4109
4236
|
);
|
|
4110
|
-
(0,
|
|
4237
|
+
(0, import_store61.__dispatch)(slice.actions.resetUnpublished());
|
|
4111
4238
|
} catch (error) {
|
|
4112
4239
|
throw new Error(`Failed to publish components and update component instances: ${error}`);
|
|
4113
4240
|
}
|
|
@@ -4152,7 +4279,7 @@ function shouldUpdateElement(element, uidToComponentId) {
|
|
|
4152
4279
|
return { shouldUpdate: false, newComponentId: null };
|
|
4153
4280
|
}
|
|
4154
4281
|
function updateElementComponentId(elementId, componentId) {
|
|
4155
|
-
(0,
|
|
4282
|
+
(0, import_editor_elements17.updateElementSettings)({
|
|
4156
4283
|
id: elementId,
|
|
4157
4284
|
props: {
|
|
4158
4285
|
component_instance: {
|
|
@@ -4167,7 +4294,7 @@ function updateElementComponentId(elementId, componentId) {
|
|
|
4167
4294
|
}
|
|
4168
4295
|
|
|
4169
4296
|
// src/sync/set-component-overridable-props-settings-before-save.ts
|
|
4170
|
-
var
|
|
4297
|
+
var import_store63 = require("@elementor/store");
|
|
4171
4298
|
var setComponentOverridablePropsSettingsBeforeSave = ({
|
|
4172
4299
|
container
|
|
4173
4300
|
}) => {
|
|
@@ -4175,15 +4302,15 @@ var setComponentOverridablePropsSettingsBeforeSave = ({
|
|
|
4175
4302
|
if (!currentDocument || currentDocument.config.type !== COMPONENT_DOCUMENT_TYPE) {
|
|
4176
4303
|
return;
|
|
4177
4304
|
}
|
|
4178
|
-
const overridableProps = selectOverridableProps((0,
|
|
4305
|
+
const overridableProps = selectOverridableProps((0, import_store63.__getState)(), currentDocument.id);
|
|
4179
4306
|
if (overridableProps) {
|
|
4180
4307
|
container.settings.set("overridable_props", overridableProps);
|
|
4181
4308
|
}
|
|
4182
4309
|
};
|
|
4183
4310
|
|
|
4184
4311
|
// src/sync/update-archived-component-before-save.ts
|
|
4185
|
-
var
|
|
4186
|
-
var
|
|
4312
|
+
var import_editor_notifications4 = require("@elementor/editor-notifications");
|
|
4313
|
+
var import_store65 = require("@elementor/store");
|
|
4187
4314
|
var failedNotification = (message) => ({
|
|
4188
4315
|
type: "error",
|
|
4189
4316
|
message: `Failed to archive components: ${message}`,
|
|
@@ -4196,7 +4323,7 @@ var successNotification = (message) => ({
|
|
|
4196
4323
|
});
|
|
4197
4324
|
var updateArchivedComponentBeforeSave = async () => {
|
|
4198
4325
|
try {
|
|
4199
|
-
const archivedComponents = selectArchivedComponents((0,
|
|
4326
|
+
const archivedComponents = selectArchivedComponents((0, import_store65.__getState)());
|
|
4200
4327
|
if (!archivedComponents.length) {
|
|
4201
4328
|
return;
|
|
4202
4329
|
}
|
|
@@ -4206,10 +4333,10 @@ var updateArchivedComponentBeforeSave = async () => {
|
|
|
4206
4333
|
const failedIds = result.failedIds.join(", ");
|
|
4207
4334
|
const successIds = result.successIds.join(", ");
|
|
4208
4335
|
if (failedIds) {
|
|
4209
|
-
(0,
|
|
4336
|
+
(0, import_editor_notifications4.notify)(failedNotification(failedIds));
|
|
4210
4337
|
}
|
|
4211
4338
|
if (successIds) {
|
|
4212
|
-
(0,
|
|
4339
|
+
(0, import_editor_notifications4.notify)(successNotification(successIds));
|
|
4213
4340
|
}
|
|
4214
4341
|
} catch (error) {
|
|
4215
4342
|
throw new Error(`Failed to update archived components: ${error}`);
|
|
@@ -4246,24 +4373,24 @@ var beforeSave = ({ container, status }) => {
|
|
|
4246
4373
|
// src/init.ts
|
|
4247
4374
|
function init() {
|
|
4248
4375
|
import_editor_styles_repository2.stylesRepository.register(componentsStylesProvider);
|
|
4249
|
-
(0,
|
|
4376
|
+
(0, import_store67.__registerSlice)(slice);
|
|
4250
4377
|
(0, import_editor_panels4.__registerPanel)(panel);
|
|
4251
|
-
(0,
|
|
4378
|
+
(0, import_editor_canvas9.registerElementType)(
|
|
4252
4379
|
COMPONENT_WIDGET_TYPE,
|
|
4253
4380
|
(options) => createComponentType({ ...options, showLockedByModal: openEditModeDialog })
|
|
4254
4381
|
);
|
|
4255
|
-
(0,
|
|
4382
|
+
(0, import_editor_v1_adapters9.registerDataHook)("dependency", "editor/documents/close", (args) => {
|
|
4256
4383
|
const document = (0, import_editor_documents12.getV1CurrentDocument)();
|
|
4257
4384
|
if (document.config.type === COMPONENT_DOCUMENT_TYPE) {
|
|
4258
4385
|
args.mode = "autosave";
|
|
4259
4386
|
}
|
|
4260
4387
|
return true;
|
|
4261
4388
|
});
|
|
4262
|
-
(0,
|
|
4389
|
+
(0, import_editor_v1_adapters9.registerDataHook)("after", "preview/drop", onElementDrop);
|
|
4263
4390
|
window.elementorCommon.__beforeSave = beforeSave;
|
|
4264
4391
|
(0, import_editor_elements_panel.injectTab)({
|
|
4265
4392
|
id: "components",
|
|
4266
|
-
label: (0,
|
|
4393
|
+
label: (0, import_i18n26.__)("Components", "elementor"),
|
|
4267
4394
|
component: Components
|
|
4268
4395
|
});
|
|
4269
4396
|
(0, import_editor.injectIntoTop)({
|
|
@@ -4282,7 +4409,7 @@ function init() {
|
|
|
4282
4409
|
id: "component-panel-header",
|
|
4283
4410
|
component: ComponentPanelHeader
|
|
4284
4411
|
});
|
|
4285
|
-
(0,
|
|
4412
|
+
(0, import_editor_v1_adapters9.registerDataHook)("after", "editor/documents/attach-preview", async () => {
|
|
4286
4413
|
const { id: id2, config } = (0, import_editor_documents12.getV1CurrentDocument)();
|
|
4287
4414
|
if (id2) {
|
|
4288
4415
|
removeComponentStyles(id2);
|
|
@@ -4304,12 +4431,13 @@ function init() {
|
|
|
4304
4431
|
condition: (_, elementType) => elementType.key === "e-component",
|
|
4305
4432
|
component: InstanceEditingPanel
|
|
4306
4433
|
});
|
|
4307
|
-
|
|
4308
|
-
|
|
4309
|
-
|
|
4434
|
+
import_editor_canvas9.settingsTransformersRegistry.register("component-instance", componentInstanceTransformer);
|
|
4435
|
+
import_editor_canvas9.settingsTransformersRegistry.register("overridable", componentOverridableTransformer);
|
|
4436
|
+
import_editor_canvas9.settingsTransformersRegistry.register("override", componentOverrideTransformer);
|
|
4310
4437
|
initRegenerateOverrideKeys();
|
|
4311
4438
|
initMcp();
|
|
4312
4439
|
initCircularNestingPrevention();
|
|
4440
|
+
initNonAtomicNestingPrevention();
|
|
4313
4441
|
}
|
|
4314
4442
|
// Annotate the CommonJS export names for ESM import in node:
|
|
4315
4443
|
0 && (module.exports = {
|