@elementor/editor-controls 3.35.0-492 → 3.35.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +13 -12
- package/dist/index.d.ts +13 -12
- package/dist/index.js +494 -477
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +510 -496
- package/dist/index.mjs.map +1 -1
- package/package.json +15 -15
- package/src/components/inline-editor-toolbar.tsx +78 -74
- package/src/components/inline-editor.tsx +157 -231
- package/src/components/promotions/display-conditions-control.tsx +61 -0
- package/src/controls/inline-editing-control.tsx +1 -1
- package/src/index.ts +2 -0
package/dist/index.js
CHANGED
|
@@ -42,6 +42,7 @@ __export(index_exports, {
|
|
|
42
42
|
ControlReplacementsProvider: () => ControlReplacementsProvider,
|
|
43
43
|
ControlToggleButtonGroup: () => ControlToggleButtonGroup,
|
|
44
44
|
DateTimeControl: () => DateTimeControl,
|
|
45
|
+
DisplayConditionsControl: () => DisplayConditionsControl,
|
|
45
46
|
EqualUnequalSizesControl: () => EqualUnequalSizesControl,
|
|
46
47
|
FilterRepeaterControl: () => FilterRepeaterControl,
|
|
47
48
|
FloatingActionsBar: () => FloatingActionsBar,
|
|
@@ -6237,14 +6238,14 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
|
|
|
6237
6238
|
});
|
|
6238
6239
|
|
|
6239
6240
|
// src/controls/inline-editing-control.tsx
|
|
6240
|
-
var
|
|
6241
|
+
var React100 = __toESM(require("react"));
|
|
6241
6242
|
var import_editor_props51 = require("@elementor/editor-props");
|
|
6242
|
-
var
|
|
6243
|
+
var import_ui86 = require("@elementor/ui");
|
|
6243
6244
|
|
|
6244
6245
|
// src/components/inline-editor.tsx
|
|
6245
|
-
var
|
|
6246
|
-
var
|
|
6247
|
-
var
|
|
6246
|
+
var React99 = __toESM(require("react"));
|
|
6247
|
+
var import_react53 = require("react");
|
|
6248
|
+
var import_ui85 = require("@elementor/ui");
|
|
6248
6249
|
var import_extension_bold = __toESM(require("@tiptap/extension-bold"));
|
|
6249
6250
|
var import_extension_document = __toESM(require("@tiptap/extension-document"));
|
|
6250
6251
|
var import_extension_hard_break = __toESM(require("@tiptap/extension-hard-break"));
|
|
@@ -6257,7 +6258,7 @@ var import_extension_subscript = __toESM(require("@tiptap/extension-subscript"))
|
|
|
6257
6258
|
var import_extension_superscript = __toESM(require("@tiptap/extension-superscript"));
|
|
6258
6259
|
var import_extension_text = __toESM(require("@tiptap/extension-text"));
|
|
6259
6260
|
var import_extension_underline = __toESM(require("@tiptap/extension-underline"));
|
|
6260
|
-
var
|
|
6261
|
+
var import_react54 = require("@tiptap/react");
|
|
6261
6262
|
|
|
6262
6263
|
// src/utils/inline-editing.ts
|
|
6263
6264
|
function isEmpty(value = "") {
|
|
@@ -6269,457 +6270,147 @@ function isEmpty(value = "") {
|
|
|
6269
6270
|
return !pseudoElement.textContent?.length;
|
|
6270
6271
|
}
|
|
6271
6272
|
|
|
6272
|
-
// src/components/inline-editor
|
|
6273
|
-
var
|
|
6274
|
-
var
|
|
6275
|
-
var
|
|
6276
|
-
var
|
|
6277
|
-
|
|
6278
|
-
|
|
6279
|
-
|
|
6280
|
-
|
|
6281
|
-
|
|
6282
|
-
|
|
6283
|
-
|
|
6284
|
-
|
|
6285
|
-
|
|
6286
|
-
|
|
6287
|
-
|
|
6288
|
-
|
|
6289
|
-
|
|
6290
|
-
|
|
6291
|
-
|
|
6292
|
-
|
|
6293
|
-
|
|
6294
|
-
|
|
6295
|
-
}) => {
|
|
6296
|
-
const inputRef = (0, import_react53.useRef)(null);
|
|
6297
|
-
(0, import_react53.useEffect)(() => {
|
|
6298
|
-
if (popupState.isOpen) {
|
|
6299
|
-
requestAnimationFrame(() => inputRef.current?.focus());
|
|
6300
|
-
}
|
|
6301
|
-
}, [popupState.isOpen]);
|
|
6302
|
-
const handleClose = () => {
|
|
6303
|
-
restoreValue();
|
|
6304
|
-
popupState.close();
|
|
6273
|
+
// src/components/inline-editor.tsx
|
|
6274
|
+
var ITALIC_KEYBOARD_SHORTCUT = "i";
|
|
6275
|
+
var BOLD_KEYBOARD_SHORTCUT = "b";
|
|
6276
|
+
var UNDERLINE_KEYBOARD_SHORTCUT = "u";
|
|
6277
|
+
var InlineEditor = React99.forwardRef((props, ref) => {
|
|
6278
|
+
const {
|
|
6279
|
+
value,
|
|
6280
|
+
setValue,
|
|
6281
|
+
editorProps = {},
|
|
6282
|
+
elementClasses = "",
|
|
6283
|
+
autofocus = false,
|
|
6284
|
+
sx = {},
|
|
6285
|
+
onBlur = void 0,
|
|
6286
|
+
expectedTag = null,
|
|
6287
|
+
onEditorCreate,
|
|
6288
|
+
wrapperClassName,
|
|
6289
|
+
onSelectionEnd
|
|
6290
|
+
} = props;
|
|
6291
|
+
const containerRef = (0, import_react53.useRef)(null);
|
|
6292
|
+
const documentContentSettings = !!expectedTag ? "block+" : "inline*";
|
|
6293
|
+
const onUpdate = ({ editor: updatedEditor }) => {
|
|
6294
|
+
const newValue = updatedEditor.getHTML();
|
|
6295
|
+
setValue(isEmpty(newValue) ? null : newValue);
|
|
6305
6296
|
};
|
|
6306
|
-
|
|
6307
|
-
|
|
6308
|
-
|
|
6309
|
-
slotProps: {
|
|
6310
|
-
paper: { sx: { borderRadius: "16px", width: anchorRef.current?.offsetWidth + "px", marginTop: -1 } }
|
|
6311
|
-
},
|
|
6312
|
-
...(0, import_ui85.bindPopover)(popupState),
|
|
6313
|
-
anchorOrigin: { vertical: "top", horizontal: "left" },
|
|
6314
|
-
transformOrigin: { vertical: "top", horizontal: "left" },
|
|
6315
|
-
onClose: handleClose
|
|
6316
|
-
},
|
|
6317
|
-
/* @__PURE__ */ React99.createElement(import_ui85.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React99.createElement(
|
|
6318
|
-
import_ui85.TextField,
|
|
6319
|
-
{
|
|
6320
|
-
value,
|
|
6321
|
-
onChange,
|
|
6322
|
-
size: "tiny",
|
|
6323
|
-
fullWidth: true,
|
|
6324
|
-
placeholder: (0, import_i18n50.__)("Type a URL", "elementor"),
|
|
6325
|
-
inputProps: { ref: inputRef },
|
|
6326
|
-
color: "secondary",
|
|
6327
|
-
InputProps: { sx: { borderRadius: "8px" } },
|
|
6328
|
-
onKeyUp: (event) => event.key === "Enter" && handleClose()
|
|
6329
|
-
}
|
|
6330
|
-
), /* @__PURE__ */ React99.createElement(import_ui85.Tooltip, { title: (0, import_i18n50.__)("Open in a new tab", "elementor") }, /* @__PURE__ */ React99.createElement(
|
|
6331
|
-
import_ui85.ToggleButton,
|
|
6332
|
-
{
|
|
6333
|
-
size: "tiny",
|
|
6334
|
-
value: "newTab",
|
|
6335
|
-
selected: openInNewTab,
|
|
6336
|
-
onClick: onToggleNewTab,
|
|
6337
|
-
"aria-label": (0, import_i18n50.__)("Open in a new tab", "elementor"),
|
|
6338
|
-
sx: { borderRadius: "8px" }
|
|
6339
|
-
},
|
|
6340
|
-
/* @__PURE__ */ React99.createElement(import_icons33.ExternalLinkIcon, { fontSize: "tiny" })
|
|
6341
|
-
)))
|
|
6342
|
-
);
|
|
6343
|
-
};
|
|
6344
|
-
|
|
6345
|
-
// src/components/inline-editor-toolbar.tsx
|
|
6346
|
-
var checkIfElementHasLink = (elementId) => !!(0, import_editor_elements6.getElementSetting)(elementId, "link")?.value?.destination;
|
|
6347
|
-
var toolbarButtons = {
|
|
6348
|
-
clear: {
|
|
6349
|
-
label: (0, import_i18n51.__)("Clear", "elementor"),
|
|
6350
|
-
icon: /* @__PURE__ */ React100.createElement(import_icons34.MinusIcon, { fontSize: "tiny" }),
|
|
6351
|
-
action: "clear",
|
|
6352
|
-
method: (editor) => {
|
|
6353
|
-
editor.chain().focus().clearNodes().unsetAllMarks().run();
|
|
6354
|
-
}
|
|
6355
|
-
},
|
|
6356
|
-
bold: {
|
|
6357
|
-
label: (0, import_i18n51.__)("Bold", "elementor"),
|
|
6358
|
-
icon: /* @__PURE__ */ React100.createElement(import_icons34.BoldIcon, { fontSize: "tiny" }),
|
|
6359
|
-
action: "bold",
|
|
6360
|
-
method: (editor) => {
|
|
6361
|
-
editor.chain().focus().toggleBold().run();
|
|
6362
|
-
}
|
|
6363
|
-
},
|
|
6364
|
-
italic: {
|
|
6365
|
-
label: (0, import_i18n51.__)("Italic", "elementor"),
|
|
6366
|
-
icon: /* @__PURE__ */ React100.createElement(import_icons34.ItalicIcon, { fontSize: "tiny" }),
|
|
6367
|
-
action: "italic",
|
|
6368
|
-
method: (editor) => {
|
|
6369
|
-
editor.chain().focus().toggleItalic().run();
|
|
6370
|
-
}
|
|
6371
|
-
},
|
|
6372
|
-
underline: {
|
|
6373
|
-
label: (0, import_i18n51.__)("Underline", "elementor"),
|
|
6374
|
-
icon: /* @__PURE__ */ React100.createElement(import_icons34.UnderlineIcon, { fontSize: "tiny" }),
|
|
6375
|
-
action: "underline",
|
|
6376
|
-
method: (editor) => {
|
|
6377
|
-
editor.chain().focus().toggleUnderline().run();
|
|
6378
|
-
}
|
|
6379
|
-
},
|
|
6380
|
-
strike: {
|
|
6381
|
-
label: (0, import_i18n51.__)("Strikethrough", "elementor"),
|
|
6382
|
-
icon: /* @__PURE__ */ React100.createElement(import_icons34.StrikethroughIcon, { fontSize: "tiny" }),
|
|
6383
|
-
action: "strike",
|
|
6384
|
-
method: (editor) => {
|
|
6385
|
-
editor.chain().focus().toggleStrike().run();
|
|
6386
|
-
}
|
|
6387
|
-
},
|
|
6388
|
-
superscript: {
|
|
6389
|
-
label: (0, import_i18n51.__)("Superscript", "elementor"),
|
|
6390
|
-
icon: /* @__PURE__ */ React100.createElement(import_icons34.SuperscriptIcon, { fontSize: "tiny" }),
|
|
6391
|
-
action: "superscript",
|
|
6392
|
-
method: (editor) => {
|
|
6393
|
-
editor.chain().focus().toggleSuperscript().run();
|
|
6297
|
+
const onKeyDown = (_, event) => {
|
|
6298
|
+
if (event.key === "Escape") {
|
|
6299
|
+
onBlur?.();
|
|
6394
6300
|
}
|
|
6395
|
-
|
|
6396
|
-
|
|
6397
|
-
label: (0, import_i18n51.__)("Subscript", "elementor"),
|
|
6398
|
-
icon: /* @__PURE__ */ React100.createElement(import_icons34.SubscriptIcon, { fontSize: "tiny" }),
|
|
6399
|
-
action: "subscript",
|
|
6400
|
-
method: (editor) => {
|
|
6401
|
-
editor.chain().focus().toggleSubscript().run();
|
|
6402
|
-
}
|
|
6403
|
-
},
|
|
6404
|
-
link: {
|
|
6405
|
-
label: (0, import_i18n51.__)("Link", "elementor"),
|
|
6406
|
-
icon: /* @__PURE__ */ React100.createElement(import_icons34.LinkIcon, { fontSize: "tiny" }),
|
|
6407
|
-
action: "link",
|
|
6408
|
-
method: null
|
|
6409
|
-
}
|
|
6410
|
-
};
|
|
6411
|
-
var { clear: clearButton, ...formatButtons } = toolbarButtons;
|
|
6412
|
-
var possibleFormats = Object.keys(formatButtons);
|
|
6413
|
-
var InlineEditorToolbar = ({ editor, elementId }) => {
|
|
6414
|
-
const [urlValue, setUrlValue] = (0, import_react54.useState)("");
|
|
6415
|
-
const [openInNewTab, setOpenInNewTab] = (0, import_react54.useState)(false);
|
|
6416
|
-
const toolbarRef = (0, import_react54.useRef)(null);
|
|
6417
|
-
const linkPopupState = (0, import_ui86.usePopupState)({ variant: "popover" });
|
|
6418
|
-
const hasLinkOnElement = elementId ? checkIfElementHasLink(elementId) : false;
|
|
6419
|
-
const editorState = (0, import_react55.useEditorState)({
|
|
6420
|
-
editor,
|
|
6421
|
-
selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
|
|
6422
|
-
});
|
|
6423
|
-
const formatButtonsList = (0, import_react54.useMemo)(() => {
|
|
6424
|
-
const buttons = Object.values(formatButtons);
|
|
6425
|
-
if (hasLinkOnElement) {
|
|
6426
|
-
return buttons.filter((button) => button.action !== "link");
|
|
6427
|
-
}
|
|
6428
|
-
return buttons;
|
|
6429
|
-
}, [hasLinkOnElement]);
|
|
6430
|
-
const handleLinkClick = () => {
|
|
6431
|
-
const linkAttrs = editor.getAttributes("link");
|
|
6432
|
-
setUrlValue(linkAttrs.href || "");
|
|
6433
|
-
setOpenInNewTab(linkAttrs.target === "_blank");
|
|
6434
|
-
linkPopupState.open(toolbarRef.current);
|
|
6435
|
-
};
|
|
6436
|
-
const handleUrlChange = (event) => {
|
|
6437
|
-
setUrlValue(event.target.value);
|
|
6438
|
-
};
|
|
6439
|
-
const handleToggleNewTab = () => {
|
|
6440
|
-
setOpenInNewTab(!openInNewTab);
|
|
6441
|
-
};
|
|
6442
|
-
const handleUrlSubmit = () => {
|
|
6443
|
-
if (urlValue) {
|
|
6444
|
-
editor.chain().focus().setLink({
|
|
6445
|
-
href: urlValue,
|
|
6446
|
-
target: openInNewTab ? "_blank" : "_self"
|
|
6447
|
-
}).run();
|
|
6448
|
-
} else {
|
|
6449
|
-
editor.chain().focus().unsetLink().run();
|
|
6301
|
+
if (!event.metaKey && !event.ctrlKey || event.altKey) {
|
|
6302
|
+
return;
|
|
6450
6303
|
}
|
|
6451
|
-
if (
|
|
6452
|
-
|
|
6453
|
-
new CustomEvent("elementor:inline-link-changed", {
|
|
6454
|
-
detail: { elementId }
|
|
6455
|
-
})
|
|
6456
|
-
);
|
|
6304
|
+
if ([ITALIC_KEYBOARD_SHORTCUT, BOLD_KEYBOARD_SHORTCUT, UNDERLINE_KEYBOARD_SHORTCUT].includes(event.key)) {
|
|
6305
|
+
event.stopPropagation();
|
|
6457
6306
|
}
|
|
6458
|
-
linkPopupState.close();
|
|
6459
6307
|
};
|
|
6460
|
-
|
|
6461
|
-
|
|
6462
|
-
|
|
6463
|
-
|
|
6464
|
-
|
|
6465
|
-
|
|
6466
|
-
|
|
6467
|
-
|
|
6468
|
-
|
|
6469
|
-
|
|
6470
|
-
|
|
6471
|
-
|
|
6472
|
-
|
|
6473
|
-
|
|
6474
|
-
|
|
6475
|
-
|
|
6476
|
-
|
|
6477
|
-
|
|
6478
|
-
|
|
6479
|
-
/* @__PURE__ */ React100.createElement(import_ui86.Tooltip, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React100.createElement(import_ui86.IconButton, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
|
|
6480
|
-
/* @__PURE__ */ React100.createElement(
|
|
6481
|
-
import_ui86.ToggleButtonGroup,
|
|
6482
|
-
{
|
|
6483
|
-
value: editorState,
|
|
6484
|
-
size: "tiny",
|
|
6485
|
-
sx: {
|
|
6486
|
-
display: "flex",
|
|
6487
|
-
gap: 0.5,
|
|
6488
|
-
border: "none",
|
|
6489
|
-
[`& .${import_ui86.toggleButtonGroupClasses.firstButton}, & .${import_ui86.toggleButtonGroupClasses.middleButton}, & .${import_ui86.toggleButtonGroupClasses.lastButton}`]: {
|
|
6490
|
-
borderRadius: "8px",
|
|
6491
|
-
border: "none",
|
|
6492
|
-
marginLeft: 0,
|
|
6493
|
-
"&.Mui-selected": {
|
|
6494
|
-
marginLeft: 0
|
|
6495
|
-
},
|
|
6496
|
-
"& + &.Mui-selected": {
|
|
6497
|
-
marginLeft: 0
|
|
6498
|
-
}
|
|
6308
|
+
const editedElementAttributes = (HTMLAttributes) => ({
|
|
6309
|
+
...HTMLAttributes,
|
|
6310
|
+
class: elementClasses
|
|
6311
|
+
});
|
|
6312
|
+
const editor = (0, import_react54.useEditor)({
|
|
6313
|
+
extensions: [
|
|
6314
|
+
import_extension_document.default.extend({
|
|
6315
|
+
content: documentContentSettings
|
|
6316
|
+
}),
|
|
6317
|
+
import_extension_paragraph.default.extend({
|
|
6318
|
+
renderHTML({ HTMLAttributes }) {
|
|
6319
|
+
const tag = expectedTag ?? "p";
|
|
6320
|
+
return [tag, editedElementAttributes(HTMLAttributes), 0];
|
|
6321
|
+
}
|
|
6322
|
+
}),
|
|
6323
|
+
import_extension_heading.default.extend({
|
|
6324
|
+
renderHTML({ node, HTMLAttributes }) {
|
|
6325
|
+
if (expectedTag) {
|
|
6326
|
+
return [expectedTag, editedElementAttributes(HTMLAttributes), 0];
|
|
6499
6327
|
}
|
|
6328
|
+
const level = this.options.levels.includes(node.attrs.level) ? node.attrs.level : this.options.levels[0];
|
|
6329
|
+
return [`h${level}`, editedElementAttributes(HTMLAttributes), 0];
|
|
6330
|
+
}
|
|
6331
|
+
}).configure({
|
|
6332
|
+
levels: [1, 2, 3, 4, 5, 6]
|
|
6333
|
+
}),
|
|
6334
|
+
import_extension_link.default.configure({
|
|
6335
|
+
openOnClick: false
|
|
6336
|
+
}),
|
|
6337
|
+
import_extension_text.default,
|
|
6338
|
+
import_extension_bold.default,
|
|
6339
|
+
import_extension_italic.default,
|
|
6340
|
+
import_extension_strike.default,
|
|
6341
|
+
import_extension_superscript.default,
|
|
6342
|
+
import_extension_subscript.default,
|
|
6343
|
+
import_extension_underline.default,
|
|
6344
|
+
import_extension_hard_break.default.extend({
|
|
6345
|
+
addKeyboardShortcuts() {
|
|
6346
|
+
return {
|
|
6347
|
+
Enter: () => this.editor.commands.setHardBreak()
|
|
6348
|
+
};
|
|
6500
6349
|
}
|
|
6350
|
+
})
|
|
6351
|
+
],
|
|
6352
|
+
content: value,
|
|
6353
|
+
onUpdate,
|
|
6354
|
+
autofocus,
|
|
6355
|
+
editorProps: {
|
|
6356
|
+
...editorProps,
|
|
6357
|
+
handleDOMEvents: {
|
|
6358
|
+
keydown: onKeyDown
|
|
6501
6359
|
},
|
|
6502
|
-
|
|
6503
|
-
|
|
6504
|
-
|
|
6505
|
-
value: button.action,
|
|
6506
|
-
"aria-label": button.label,
|
|
6507
|
-
size: "tiny",
|
|
6508
|
-
onClick: () => {
|
|
6509
|
-
if (button.action === "link") {
|
|
6510
|
-
handleLinkClick();
|
|
6511
|
-
} else {
|
|
6512
|
-
button.method?.(editor);
|
|
6513
|
-
}
|
|
6514
|
-
editor?.commands?.focus();
|
|
6515
|
-
}
|
|
6516
|
-
},
|
|
6517
|
-
button.icon
|
|
6518
|
-
)))
|
|
6519
|
-
),
|
|
6520
|
-
/* @__PURE__ */ React100.createElement(
|
|
6521
|
-
UrlPopover,
|
|
6522
|
-
{
|
|
6523
|
-
popupState: linkPopupState,
|
|
6524
|
-
anchorRef: toolbarRef,
|
|
6525
|
-
restoreValue: handleUrlSubmit,
|
|
6526
|
-
value: urlValue,
|
|
6527
|
-
onChange: handleUrlChange,
|
|
6528
|
-
openInNewTab,
|
|
6529
|
-
onToggleNewTab: handleToggleNewTab
|
|
6360
|
+
attributes: {
|
|
6361
|
+
...editorProps.attributes ?? {},
|
|
6362
|
+
role: "textbox"
|
|
6530
6363
|
}
|
|
6531
|
-
|
|
6532
|
-
|
|
6533
|
-
}
|
|
6534
|
-
|
|
6535
|
-
|
|
6536
|
-
|
|
6537
|
-
|
|
6538
|
-
var UNDERLINE_KEYBOARD_SHORTCUT = "u";
|
|
6539
|
-
var INLINE_EDITOR_RESET_CLASS = "elementor-inline-editor-reset";
|
|
6540
|
-
var useOnUpdate = (callback, dependencies) => {
|
|
6541
|
-
const hasMounted = (0, import_react56.useRef)(false);
|
|
6542
|
-
(0, import_react56.useEffect)(() => {
|
|
6543
|
-
if (hasMounted.current) {
|
|
6544
|
-
callback();
|
|
6545
|
-
} else {
|
|
6546
|
-
hasMounted.current = true;
|
|
6364
|
+
},
|
|
6365
|
+
onCreate: onEditorCreate ? ({ editor: mountedEditor }) => onEditorCreate(mountedEditor) : void 0,
|
|
6366
|
+
onSelectionUpdate: onSelectionEnd ? ({ editor: updatedEditor }) => onSelectionEnd(updatedEditor.view) : void 0
|
|
6367
|
+
});
|
|
6368
|
+
useOnUpdate(() => {
|
|
6369
|
+
if (!editor) {
|
|
6370
|
+
return;
|
|
6547
6371
|
}
|
|
6548
|
-
|
|
6549
|
-
|
|
6550
|
-
|
|
6551
|
-
|
|
6552
|
-
|
|
6553
|
-
|
|
6554
|
-
|
|
6555
|
-
|
|
6556
|
-
|
|
6557
|
-
|
|
6558
|
-
|
|
6559
|
-
|
|
6560
|
-
|
|
6561
|
-
|
|
6562
|
-
|
|
6563
|
-
|
|
6564
|
-
|
|
6372
|
+
const currentContent = editor.getHTML();
|
|
6373
|
+
if (currentContent !== value) {
|
|
6374
|
+
editor.commands.setContent(value, { emitUpdate: false });
|
|
6375
|
+
}
|
|
6376
|
+
}, [editor, value]);
|
|
6377
|
+
return /* @__PURE__ */ React99.createElement(React99.Fragment, null, /* @__PURE__ */ React99.createElement(
|
|
6378
|
+
Wrapper,
|
|
6379
|
+
{
|
|
6380
|
+
containerRef,
|
|
6381
|
+
editor,
|
|
6382
|
+
sx,
|
|
6383
|
+
onBlur,
|
|
6384
|
+
className: wrapperClassName
|
|
6385
|
+
},
|
|
6386
|
+
/* @__PURE__ */ React99.createElement(import_react54.EditorContent, { ref, editor })
|
|
6387
|
+
));
|
|
6388
|
+
});
|
|
6389
|
+
var Wrapper = ({ children, containerRef, editor, sx, onBlur, className }) => {
|
|
6390
|
+
const wrappedChildren = /* @__PURE__ */ React99.createElement(import_ui85.Box, { ref: containerRef, ...sx, className }, children);
|
|
6391
|
+
return onBlur ? /* @__PURE__ */ React99.createElement(
|
|
6392
|
+
import_ui85.ClickAwayListener,
|
|
6565
6393
|
{
|
|
6566
6394
|
onClickAway: (event) => {
|
|
6567
6395
|
if (containerRef.current?.contains(event.target) || editor.view.dom.contains(event.target)) {
|
|
6568
6396
|
return;
|
|
6569
6397
|
}
|
|
6570
|
-
onBlur?.(
|
|
6398
|
+
onBlur?.();
|
|
6571
6399
|
}
|
|
6572
6400
|
},
|
|
6573
6401
|
wrappedChildren
|
|
6574
|
-
) : /* @__PURE__ */
|
|
6402
|
+
) : /* @__PURE__ */ React99.createElement(React99.Fragment, null, wrappedChildren);
|
|
6403
|
+
};
|
|
6404
|
+
var useOnUpdate = (callback, dependencies) => {
|
|
6405
|
+
const hasMounted = (0, import_react53.useRef)(false);
|
|
6406
|
+
(0, import_react53.useEffect)(() => {
|
|
6407
|
+
if (hasMounted.current) {
|
|
6408
|
+
callback();
|
|
6409
|
+
} else {
|
|
6410
|
+
hasMounted.current = true;
|
|
6411
|
+
}
|
|
6412
|
+
}, dependencies);
|
|
6575
6413
|
};
|
|
6576
|
-
var InlineEditor = (0, import_react56.forwardRef)(
|
|
6577
|
-
({
|
|
6578
|
-
value,
|
|
6579
|
-
setValue,
|
|
6580
|
-
attributes = {},
|
|
6581
|
-
elementClasses = "",
|
|
6582
|
-
showToolbar = false,
|
|
6583
|
-
autofocus = false,
|
|
6584
|
-
sx = {},
|
|
6585
|
-
onBlur = void 0,
|
|
6586
|
-
getInitialPopoverPosition = void 0,
|
|
6587
|
-
expectedTag = null,
|
|
6588
|
-
elementId = void 0
|
|
6589
|
-
}, ref) => {
|
|
6590
|
-
const containerRef = (0, import_react56.useRef)(null);
|
|
6591
|
-
const popupState = (0, import_ui87.usePopupState)({ variant: "popover", disableAutoFocus: true });
|
|
6592
|
-
const [hasSelectedContent, setHasSelectedContent] = (0, import_react56.useState)(false);
|
|
6593
|
-
const documentContentSettings = !!expectedTag ? "block+" : "inline*";
|
|
6594
|
-
const [selectionRect, setSelectionRect] = (0, import_react56.useState)(null);
|
|
6595
|
-
const onSelectionEnd = (view) => {
|
|
6596
|
-
const hasSelection = !view.state.selection.empty;
|
|
6597
|
-
setHasSelectedContent(hasSelection);
|
|
6598
|
-
if (hasSelection) {
|
|
6599
|
-
const container = containerRef.current?.getBoundingClientRect();
|
|
6600
|
-
setSelectionRect(calcSelectionCenter(view, container));
|
|
6601
|
-
} else {
|
|
6602
|
-
setSelectionRect(null);
|
|
6603
|
-
}
|
|
6604
|
-
queueMicrotask(() => view.focus());
|
|
6605
|
-
};
|
|
6606
|
-
const onKeyDown = (_, event) => {
|
|
6607
|
-
if (event.key === "Escape") {
|
|
6608
|
-
onBlur?.(event);
|
|
6609
|
-
}
|
|
6610
|
-
if (!event.metaKey && !event.ctrlKey || event.altKey) {
|
|
6611
|
-
return;
|
|
6612
|
-
}
|
|
6613
|
-
if ([ITALIC_KEYBOARD_SHORTCUT, BOLD_KEYBOARD_SHORTCUT, UNDERLINE_KEYBOARD_SHORTCUT].includes(event.key)) {
|
|
6614
|
-
event.stopPropagation();
|
|
6615
|
-
}
|
|
6616
|
-
};
|
|
6617
|
-
const toolbarRelatedListeners = showToolbar ? {
|
|
6618
|
-
mouseup: onSelectionEnd,
|
|
6619
|
-
keyup: onSelectionEnd,
|
|
6620
|
-
keydown: onKeyDown
|
|
6621
|
-
} : void 0;
|
|
6622
|
-
const onUpdate = ({ editor: updatedEditor }) => {
|
|
6623
|
-
const newValue = updatedEditor.getHTML();
|
|
6624
|
-
setValue(isEmpty(newValue) ? null : newValue);
|
|
6625
|
-
};
|
|
6626
|
-
const classes = `${INLINE_EDITOR_RESET_CLASS} ${elementClasses}`;
|
|
6627
|
-
const editor = (0, import_react57.useEditor)({
|
|
6628
|
-
extensions: [
|
|
6629
|
-
import_extension_document.default.extend({
|
|
6630
|
-
content: documentContentSettings
|
|
6631
|
-
}),
|
|
6632
|
-
import_extension_paragraph.default.extend({
|
|
6633
|
-
renderHTML({ HTMLAttributes }) {
|
|
6634
|
-
const tag = expectedTag ?? "p";
|
|
6635
|
-
return [tag, { ...HTMLAttributes, class: classes }, 0];
|
|
6636
|
-
}
|
|
6637
|
-
}),
|
|
6638
|
-
import_extension_heading.default.extend({
|
|
6639
|
-
renderHTML({ node, HTMLAttributes }) {
|
|
6640
|
-
if (expectedTag) {
|
|
6641
|
-
return [expectedTag, { ...HTMLAttributes, class: classes }, 0];
|
|
6642
|
-
}
|
|
6643
|
-
const level = this.options.levels.includes(node.attrs.level) ? node.attrs.level : this.options.levels[0];
|
|
6644
|
-
return [`h${level}`, { ...HTMLAttributes, class: classes }, 0];
|
|
6645
|
-
}
|
|
6646
|
-
}).configure({
|
|
6647
|
-
levels: [1, 2, 3, 4, 5, 6]
|
|
6648
|
-
}),
|
|
6649
|
-
import_extension_link.default.configure({
|
|
6650
|
-
openOnClick: false
|
|
6651
|
-
}),
|
|
6652
|
-
import_extension_text.default,
|
|
6653
|
-
import_extension_bold.default,
|
|
6654
|
-
import_extension_italic.default,
|
|
6655
|
-
import_extension_strike.default,
|
|
6656
|
-
import_extension_superscript.default,
|
|
6657
|
-
import_extension_subscript.default,
|
|
6658
|
-
import_extension_underline.default,
|
|
6659
|
-
import_extension_hard_break.default.extend({
|
|
6660
|
-
addKeyboardShortcuts() {
|
|
6661
|
-
return {
|
|
6662
|
-
Enter: () => this.editor.commands.setHardBreak()
|
|
6663
|
-
};
|
|
6664
|
-
}
|
|
6665
|
-
})
|
|
6666
|
-
],
|
|
6667
|
-
content: value,
|
|
6668
|
-
onUpdate,
|
|
6669
|
-
autofocus,
|
|
6670
|
-
editorProps: {
|
|
6671
|
-
attributes: {
|
|
6672
|
-
...attributes,
|
|
6673
|
-
class: attributes.class ?? "",
|
|
6674
|
-
role: "textbox"
|
|
6675
|
-
},
|
|
6676
|
-
handleDOMEvents: toolbarRelatedListeners
|
|
6677
|
-
}
|
|
6678
|
-
});
|
|
6679
|
-
useOnUpdate(() => {
|
|
6680
|
-
if (!editor) {
|
|
6681
|
-
return;
|
|
6682
|
-
}
|
|
6683
|
-
const currentContent = editor.getHTML();
|
|
6684
|
-
if (currentContent !== value) {
|
|
6685
|
-
editor.commands.setContent(value, { emitUpdate: false });
|
|
6686
|
-
}
|
|
6687
|
-
}, [editor, value]);
|
|
6688
|
-
const computePopupPosition = () => {
|
|
6689
|
-
if (!selectionRect) {
|
|
6690
|
-
return { left: 0, top: 0 };
|
|
6691
|
-
}
|
|
6692
|
-
const container = containerRef.current?.getBoundingClientRect();
|
|
6693
|
-
if (!container) {
|
|
6694
|
-
return { left: 0, top: 0 };
|
|
6695
|
-
}
|
|
6696
|
-
const initial = getInitialPopoverPosition?.() ?? { left: 0, top: 0 };
|
|
6697
|
-
return {
|
|
6698
|
-
left: container.left + selectionRect.left + initial.left,
|
|
6699
|
-
top: container.top + selectionRect.top + initial.top
|
|
6700
|
-
};
|
|
6701
|
-
};
|
|
6702
|
-
return /* @__PURE__ */ React101.createElement(React101.Fragment, null, /* @__PURE__ */ React101.createElement(Wrapper, { containerRef, editor, sx, onBlur }, /* @__PURE__ */ React101.createElement(import_react57.EditorContent, { ref, editor })), showToolbar && containerRef.current && /* @__PURE__ */ React101.createElement(
|
|
6703
|
-
import_ui87.Popover,
|
|
6704
|
-
{
|
|
6705
|
-
slotProps: {
|
|
6706
|
-
root: {
|
|
6707
|
-
sx: {
|
|
6708
|
-
pointerEvents: "none"
|
|
6709
|
-
}
|
|
6710
|
-
}
|
|
6711
|
-
},
|
|
6712
|
-
...(0, import_ui87.bindPopover)(popupState),
|
|
6713
|
-
open: hasSelectedContent && selectionRect !== null,
|
|
6714
|
-
anchorReference: "anchorPosition",
|
|
6715
|
-
anchorPosition: computePopupPosition(),
|
|
6716
|
-
anchorOrigin: { vertical: "top", horizontal: "center" },
|
|
6717
|
-
transformOrigin: { vertical: "bottom", horizontal: "center" }
|
|
6718
|
-
},
|
|
6719
|
-
/* @__PURE__ */ React101.createElement(InlineEditorToolbar, { editor, elementId })
|
|
6720
|
-
));
|
|
6721
|
-
}
|
|
6722
|
-
);
|
|
6723
6414
|
|
|
6724
6415
|
// src/controls/inline-editing-control.tsx
|
|
6725
6416
|
var InlineEditingControl = createControl(
|
|
@@ -6729,9 +6420,9 @@ var InlineEditingControl = createControl(
|
|
|
6729
6420
|
props
|
|
6730
6421
|
}) => {
|
|
6731
6422
|
const { value, setValue } = useBoundProp(import_editor_props51.htmlPropTypeUtil);
|
|
6732
|
-
const handleChange = (newValue) => setValue(newValue);
|
|
6733
|
-
return /* @__PURE__ */
|
|
6734
|
-
|
|
6423
|
+
const handleChange = (newValue) => setValue(newValue ?? "");
|
|
6424
|
+
return /* @__PURE__ */ React100.createElement(ControlActions, null, /* @__PURE__ */ React100.createElement(
|
|
6425
|
+
import_ui86.Box,
|
|
6735
6426
|
{
|
|
6736
6427
|
sx: {
|
|
6737
6428
|
p: 0.8,
|
|
@@ -6768,27 +6459,88 @@ var InlineEditingControl = createControl(
|
|
|
6768
6459
|
...attributes,
|
|
6769
6460
|
...props
|
|
6770
6461
|
},
|
|
6771
|
-
/* @__PURE__ */
|
|
6462
|
+
/* @__PURE__ */ React100.createElement(InlineEditor, { value: value || "", setValue: handleChange })
|
|
6772
6463
|
));
|
|
6773
6464
|
}
|
|
6774
6465
|
);
|
|
6775
6466
|
|
|
6467
|
+
// src/components/promotions/display-conditions-control.tsx
|
|
6468
|
+
var React101 = __toESM(require("react"));
|
|
6469
|
+
var import_react55 = require("react");
|
|
6470
|
+
var import_editor_ui12 = require("@elementor/editor-ui");
|
|
6471
|
+
var import_icons33 = require("@elementor/icons");
|
|
6472
|
+
var import_ui87 = require("@elementor/ui");
|
|
6473
|
+
var import_i18n50 = require("@wordpress/i18n");
|
|
6474
|
+
var ARIA_LABEL = (0, import_i18n50.__)("Display Conditions", "elementor");
|
|
6475
|
+
function getDisplayConditionPromotion() {
|
|
6476
|
+
return window.elementor?.config?.v4Promotions?.displayConditions;
|
|
6477
|
+
}
|
|
6478
|
+
var DisplayConditionsControl = createControl(() => {
|
|
6479
|
+
const [isInfotipOpen, setIsInfotipOpen] = (0, import_react55.useState)(false);
|
|
6480
|
+
const promotion = getDisplayConditionPromotion();
|
|
6481
|
+
return /* @__PURE__ */ React101.createElement(
|
|
6482
|
+
import_ui87.Stack,
|
|
6483
|
+
{
|
|
6484
|
+
direction: "row",
|
|
6485
|
+
spacing: 2,
|
|
6486
|
+
sx: {
|
|
6487
|
+
justifyContent: "flex-end",
|
|
6488
|
+
alignItems: "center"
|
|
6489
|
+
}
|
|
6490
|
+
},
|
|
6491
|
+
/* @__PURE__ */ React101.createElement(
|
|
6492
|
+
import_editor_ui12.PromotionInfotip,
|
|
6493
|
+
{
|
|
6494
|
+
title: promotion?.title ?? "",
|
|
6495
|
+
content: promotion?.content ?? "",
|
|
6496
|
+
assetUrl: promotion?.image ?? "",
|
|
6497
|
+
ctaUrl: promotion?.ctaUrl ?? "",
|
|
6498
|
+
open: isInfotipOpen,
|
|
6499
|
+
onClose: () => setIsInfotipOpen(false)
|
|
6500
|
+
},
|
|
6501
|
+
/* @__PURE__ */ React101.createElement(
|
|
6502
|
+
import_ui87.Box,
|
|
6503
|
+
{
|
|
6504
|
+
onClick: () => setIsInfotipOpen((prev) => !prev),
|
|
6505
|
+
sx: { cursor: "pointer", display: "inline-flex" }
|
|
6506
|
+
},
|
|
6507
|
+
/* @__PURE__ */ React101.createElement(import_editor_ui12.PromotionChip, null)
|
|
6508
|
+
)
|
|
6509
|
+
),
|
|
6510
|
+
/* @__PURE__ */ React101.createElement(import_ui87.Tooltip, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React101.createElement(
|
|
6511
|
+
import_ui87.IconButton,
|
|
6512
|
+
{
|
|
6513
|
+
size: "tiny",
|
|
6514
|
+
"aria-label": ARIA_LABEL,
|
|
6515
|
+
"data-behavior": "display-conditions",
|
|
6516
|
+
onClick: () => setIsInfotipOpen((prev) => !prev),
|
|
6517
|
+
sx: {
|
|
6518
|
+
border: "1px solid",
|
|
6519
|
+
borderColor: "divider",
|
|
6520
|
+
borderRadius: 1
|
|
6521
|
+
}
|
|
6522
|
+
},
|
|
6523
|
+
/* @__PURE__ */ React101.createElement(import_icons33.SitemapIcon, { fontSize: "tiny", color: "disabled" })
|
|
6524
|
+
))
|
|
6525
|
+
);
|
|
6526
|
+
});
|
|
6527
|
+
|
|
6776
6528
|
// src/components/icon-buttons/clear-icon-button.tsx
|
|
6777
|
-
var
|
|
6778
|
-
var
|
|
6779
|
-
var
|
|
6780
|
-
var CustomIconButton = (0,
|
|
6529
|
+
var React102 = __toESM(require("react"));
|
|
6530
|
+
var import_icons34 = require("@elementor/icons");
|
|
6531
|
+
var import_ui88 = require("@elementor/ui");
|
|
6532
|
+
var CustomIconButton = (0, import_ui88.styled)(import_ui88.IconButton)(({ theme }) => ({
|
|
6781
6533
|
width: theme.spacing(2.5),
|
|
6782
6534
|
height: theme.spacing(2.5)
|
|
6783
6535
|
}));
|
|
6784
|
-
var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */
|
|
6536
|
+
var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React102.createElement(import_ui88.Tooltip, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React102.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React102.createElement(import_icons34.BrushBigIcon, { fontSize: size })));
|
|
6785
6537
|
|
|
6786
6538
|
// src/components/repeater/repeater.tsx
|
|
6787
|
-
var
|
|
6788
|
-
var
|
|
6789
|
-
var
|
|
6790
|
-
var
|
|
6791
|
-
var
|
|
6539
|
+
var React103 = __toESM(require("react"));
|
|
6540
|
+
var import_react56 = require("react");
|
|
6541
|
+
var import_icons35 = require("@elementor/icons");
|
|
6542
|
+
var import_ui89 = require("@elementor/ui");
|
|
6543
|
+
var import_i18n51 = require("@wordpress/i18n");
|
|
6792
6544
|
var SIZE9 = "tiny";
|
|
6793
6545
|
var EMPTY_OPEN_ITEM2 = -1;
|
|
6794
6546
|
var Repeater3 = ({
|
|
@@ -6806,7 +6558,7 @@ var Repeater3 = ({
|
|
|
6806
6558
|
openItem: initialOpenItem = EMPTY_OPEN_ITEM2,
|
|
6807
6559
|
isSortable = true
|
|
6808
6560
|
}) => {
|
|
6809
|
-
const [openItem, setOpenItem] = (0,
|
|
6561
|
+
const [openItem, setOpenItem] = (0, import_react56.useState)(initialOpenItem);
|
|
6810
6562
|
const uniqueKeys = items2.map(
|
|
6811
6563
|
(item, index) => isSortable && "getId" in itemSettings ? itemSettings.getId({ item, index }) : String(index)
|
|
6812
6564
|
);
|
|
@@ -6869,8 +6621,8 @@ var Repeater3 = ({
|
|
|
6869
6621
|
};
|
|
6870
6622
|
const isButtonDisabled = disabled || disableAddItemButton;
|
|
6871
6623
|
const shouldShowInfotip = isButtonDisabled && addButtonInfotipContent;
|
|
6872
|
-
const addButton = /* @__PURE__ */
|
|
6873
|
-
|
|
6624
|
+
const addButton = /* @__PURE__ */ React103.createElement(
|
|
6625
|
+
import_ui89.IconButton,
|
|
6874
6626
|
{
|
|
6875
6627
|
size: SIZE9,
|
|
6876
6628
|
sx: {
|
|
@@ -6878,32 +6630,32 @@ var Repeater3 = ({
|
|
|
6878
6630
|
},
|
|
6879
6631
|
disabled: isButtonDisabled,
|
|
6880
6632
|
onClick: addRepeaterItem,
|
|
6881
|
-
"aria-label": (0,
|
|
6633
|
+
"aria-label": (0, import_i18n51.__)("Add item", "elementor")
|
|
6882
6634
|
},
|
|
6883
|
-
/* @__PURE__ */
|
|
6635
|
+
/* @__PURE__ */ React103.createElement(import_icons35.PlusIcon, { fontSize: SIZE9 })
|
|
6884
6636
|
);
|
|
6885
|
-
return /* @__PURE__ */
|
|
6886
|
-
|
|
6637
|
+
return /* @__PURE__ */ React103.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React103.createElement(RepeaterHeader, { label, adornment: ControlAdornments }, shouldShowInfotip ? /* @__PURE__ */ React103.createElement(
|
|
6638
|
+
import_ui89.Infotip,
|
|
6887
6639
|
{
|
|
6888
6640
|
placement: "right",
|
|
6889
6641
|
content: addButtonInfotipContent,
|
|
6890
6642
|
color: "secondary",
|
|
6891
6643
|
slotProps: { popper: { sx: { width: 300 } } }
|
|
6892
6644
|
},
|
|
6893
|
-
/* @__PURE__ */
|
|
6894
|
-
) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */
|
|
6645
|
+
/* @__PURE__ */ React103.createElement(import_ui89.Box, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
|
|
6646
|
+
) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React103.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
|
|
6895
6647
|
const index = uniqueKeys.indexOf(key);
|
|
6896
6648
|
const value = items2[index];
|
|
6897
6649
|
if (!value) {
|
|
6898
6650
|
return null;
|
|
6899
6651
|
}
|
|
6900
|
-
return /* @__PURE__ */
|
|
6652
|
+
return /* @__PURE__ */ React103.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React103.createElement(
|
|
6901
6653
|
RepeaterItem,
|
|
6902
6654
|
{
|
|
6903
6655
|
disabled,
|
|
6904
6656
|
propDisabled: value?.disabled,
|
|
6905
|
-
label: /* @__PURE__ */
|
|
6906
|
-
startIcon: /* @__PURE__ */
|
|
6657
|
+
label: /* @__PURE__ */ React103.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React103.createElement(itemSettings.Label, { value, index })),
|
|
6658
|
+
startIcon: /* @__PURE__ */ React103.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React103.createElement(itemSettings.Icon, { value })),
|
|
6907
6659
|
removeItem: () => removeRepeaterItem(index),
|
|
6908
6660
|
duplicateItem: () => duplicateRepeaterItem(index),
|
|
6909
6661
|
toggleDisableItem: () => toggleDisableRepeaterItem(index),
|
|
@@ -6915,7 +6667,7 @@ var Repeater3 = ({
|
|
|
6915
6667
|
actions: itemSettings.actions,
|
|
6916
6668
|
value
|
|
6917
6669
|
},
|
|
6918
|
-
(props) => /* @__PURE__ */
|
|
6670
|
+
(props) => /* @__PURE__ */ React103.createElement(
|
|
6919
6671
|
itemSettings.Content,
|
|
6920
6672
|
{
|
|
6921
6673
|
...props,
|
|
@@ -6945,27 +6697,27 @@ var RepeaterItem = ({
|
|
|
6945
6697
|
value
|
|
6946
6698
|
}) => {
|
|
6947
6699
|
const { popoverState, popoverProps, ref, setRef } = usePopover(openOnMount, onOpen);
|
|
6948
|
-
const duplicateLabel = (0,
|
|
6949
|
-
const toggleLabel = propDisabled ? (0,
|
|
6950
|
-
const removeLabel = (0,
|
|
6951
|
-
return /* @__PURE__ */
|
|
6700
|
+
const duplicateLabel = (0, import_i18n51.__)("Duplicate", "elementor");
|
|
6701
|
+
const toggleLabel = propDisabled ? (0, import_i18n51.__)("Show", "elementor") : (0, import_i18n51.__)("Hide", "elementor");
|
|
6702
|
+
const removeLabel = (0, import_i18n51.__)("Remove", "elementor");
|
|
6703
|
+
return /* @__PURE__ */ React103.createElement(React103.Fragment, null, /* @__PURE__ */ React103.createElement(
|
|
6952
6704
|
RepeaterTag,
|
|
6953
6705
|
{
|
|
6954
6706
|
disabled,
|
|
6955
6707
|
label,
|
|
6956
6708
|
ref: setRef,
|
|
6957
|
-
"aria-label": (0,
|
|
6958
|
-
...(0,
|
|
6709
|
+
"aria-label": (0, import_i18n51.__)("Open item", "elementor"),
|
|
6710
|
+
...(0, import_ui89.bindTrigger)(popoverState),
|
|
6959
6711
|
startIcon,
|
|
6960
|
-
actions: /* @__PURE__ */
|
|
6712
|
+
actions: /* @__PURE__ */ React103.createElement(React103.Fragment, null, showDuplicate && /* @__PURE__ */ React103.createElement(import_ui89.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React103.createElement(import_ui89.IconButton, { size: SIZE9, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React103.createElement(import_icons35.CopyIcon, { fontSize: SIZE9 }))), showToggle && /* @__PURE__ */ React103.createElement(import_ui89.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React103.createElement(import_ui89.IconButton, { size: SIZE9, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React103.createElement(import_icons35.EyeOffIcon, { fontSize: SIZE9 }) : /* @__PURE__ */ React103.createElement(import_icons35.EyeIcon, { fontSize: SIZE9 }))), actions?.(value), showRemove && /* @__PURE__ */ React103.createElement(import_ui89.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React103.createElement(import_ui89.IconButton, { size: SIZE9, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React103.createElement(import_icons35.XIcon, { fontSize: SIZE9 }))))
|
|
6961
6713
|
}
|
|
6962
|
-
), /* @__PURE__ */
|
|
6714
|
+
), /* @__PURE__ */ React103.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React103.createElement(import_ui89.Box, null, children({ anchorEl: ref }))));
|
|
6963
6715
|
};
|
|
6964
6716
|
var usePopover = (openOnMount, onOpen) => {
|
|
6965
|
-
const [ref, setRef] = (0,
|
|
6966
|
-
const popoverState = (0,
|
|
6967
|
-
const popoverProps = (0,
|
|
6968
|
-
(0,
|
|
6717
|
+
const [ref, setRef] = (0, import_react56.useState)(null);
|
|
6718
|
+
const popoverState = (0, import_ui89.usePopupState)({ variant: "popover" });
|
|
6719
|
+
const popoverProps = (0, import_ui89.bindPopover)(popoverState);
|
|
6720
|
+
(0, import_react56.useEffect)(() => {
|
|
6969
6721
|
if (openOnMount && ref) {
|
|
6970
6722
|
popoverState.open(ref);
|
|
6971
6723
|
onOpen?.();
|
|
@@ -6978,6 +6730,270 @@ var usePopover = (openOnMount, onOpen) => {
|
|
|
6978
6730
|
popoverProps
|
|
6979
6731
|
};
|
|
6980
6732
|
};
|
|
6733
|
+
|
|
6734
|
+
// src/components/inline-editor-toolbar.tsx
|
|
6735
|
+
var React105 = __toESM(require("react"));
|
|
6736
|
+
var import_react58 = require("react");
|
|
6737
|
+
var import_editor_elements6 = require("@elementor/editor-elements");
|
|
6738
|
+
var import_icons37 = require("@elementor/icons");
|
|
6739
|
+
var import_ui91 = require("@elementor/ui");
|
|
6740
|
+
var import_react59 = require("@tiptap/react");
|
|
6741
|
+
var import_i18n53 = require("@wordpress/i18n");
|
|
6742
|
+
|
|
6743
|
+
// src/components/url-popover.tsx
|
|
6744
|
+
var React104 = __toESM(require("react"));
|
|
6745
|
+
var import_react57 = require("react");
|
|
6746
|
+
var import_icons36 = require("@elementor/icons");
|
|
6747
|
+
var import_ui90 = require("@elementor/ui");
|
|
6748
|
+
var import_i18n52 = require("@wordpress/i18n");
|
|
6749
|
+
var UrlPopover = ({
|
|
6750
|
+
popupState,
|
|
6751
|
+
restoreValue,
|
|
6752
|
+
anchorRef,
|
|
6753
|
+
value,
|
|
6754
|
+
onChange,
|
|
6755
|
+
openInNewTab,
|
|
6756
|
+
onToggleNewTab
|
|
6757
|
+
}) => {
|
|
6758
|
+
const inputRef = (0, import_react57.useRef)(null);
|
|
6759
|
+
(0, import_react57.useEffect)(() => {
|
|
6760
|
+
if (popupState.isOpen) {
|
|
6761
|
+
requestAnimationFrame(() => inputRef.current?.focus());
|
|
6762
|
+
}
|
|
6763
|
+
}, [popupState.isOpen]);
|
|
6764
|
+
const handleClose = () => {
|
|
6765
|
+
restoreValue();
|
|
6766
|
+
popupState.close();
|
|
6767
|
+
};
|
|
6768
|
+
return /* @__PURE__ */ React104.createElement(
|
|
6769
|
+
import_ui90.Popover,
|
|
6770
|
+
{
|
|
6771
|
+
slotProps: {
|
|
6772
|
+
paper: { sx: { borderRadius: "16px", width: anchorRef.current?.offsetWidth + "px", marginTop: -1 } }
|
|
6773
|
+
},
|
|
6774
|
+
...(0, import_ui90.bindPopover)(popupState),
|
|
6775
|
+
anchorOrigin: { vertical: "top", horizontal: "left" },
|
|
6776
|
+
transformOrigin: { vertical: "top", horizontal: "left" },
|
|
6777
|
+
onClose: handleClose
|
|
6778
|
+
},
|
|
6779
|
+
/* @__PURE__ */ React104.createElement(import_ui90.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React104.createElement(
|
|
6780
|
+
import_ui90.TextField,
|
|
6781
|
+
{
|
|
6782
|
+
value,
|
|
6783
|
+
onChange,
|
|
6784
|
+
size: "tiny",
|
|
6785
|
+
fullWidth: true,
|
|
6786
|
+
placeholder: (0, import_i18n52.__)("Type a URL", "elementor"),
|
|
6787
|
+
inputProps: { ref: inputRef },
|
|
6788
|
+
color: "secondary",
|
|
6789
|
+
InputProps: { sx: { borderRadius: "8px" } },
|
|
6790
|
+
onKeyUp: (event) => event.key === "Enter" && handleClose()
|
|
6791
|
+
}
|
|
6792
|
+
), /* @__PURE__ */ React104.createElement(import_ui90.Tooltip, { title: (0, import_i18n52.__)("Open in a new tab", "elementor") }, /* @__PURE__ */ React104.createElement(
|
|
6793
|
+
import_ui90.ToggleButton,
|
|
6794
|
+
{
|
|
6795
|
+
size: "tiny",
|
|
6796
|
+
value: "newTab",
|
|
6797
|
+
selected: openInNewTab,
|
|
6798
|
+
onClick: onToggleNewTab,
|
|
6799
|
+
"aria-label": (0, import_i18n52.__)("Open in a new tab", "elementor"),
|
|
6800
|
+
sx: { borderRadius: "8px" }
|
|
6801
|
+
},
|
|
6802
|
+
/* @__PURE__ */ React104.createElement(import_icons36.ExternalLinkIcon, { fontSize: "tiny" })
|
|
6803
|
+
)))
|
|
6804
|
+
);
|
|
6805
|
+
};
|
|
6806
|
+
|
|
6807
|
+
// src/components/inline-editor-toolbar.tsx
|
|
6808
|
+
var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
|
|
6809
|
+
const [urlValue, setUrlValue] = (0, import_react58.useState)("");
|
|
6810
|
+
const [openInNewTab, setOpenInNewTab] = (0, import_react58.useState)(false);
|
|
6811
|
+
const toolbarRef = (0, import_react58.useRef)(null);
|
|
6812
|
+
const linkPopupState = (0, import_ui91.usePopupState)({ variant: "popover" });
|
|
6813
|
+
const hasLinkOnElement = elementId ? checkIfElementHasLink(elementId) : false;
|
|
6814
|
+
const editorState = (0, import_react59.useEditorState)({
|
|
6815
|
+
editor,
|
|
6816
|
+
selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
|
|
6817
|
+
});
|
|
6818
|
+
const formatButtonsList = (0, import_react58.useMemo)(() => {
|
|
6819
|
+
const buttons = Object.values(formatButtons);
|
|
6820
|
+
if (hasLinkOnElement) {
|
|
6821
|
+
return buttons.filter((button) => button.action !== "link");
|
|
6822
|
+
}
|
|
6823
|
+
return buttons;
|
|
6824
|
+
}, [hasLinkOnElement]);
|
|
6825
|
+
const handleLinkClick = () => {
|
|
6826
|
+
const linkAttrs = editor.getAttributes("link");
|
|
6827
|
+
setUrlValue(linkAttrs.href || "");
|
|
6828
|
+
setOpenInNewTab(linkAttrs.target === "_blank");
|
|
6829
|
+
linkPopupState.open(toolbarRef.current);
|
|
6830
|
+
};
|
|
6831
|
+
const handleUrlChange = (event) => {
|
|
6832
|
+
setUrlValue(event.target.value);
|
|
6833
|
+
};
|
|
6834
|
+
const handleToggleNewTab = () => {
|
|
6835
|
+
setOpenInNewTab(!openInNewTab);
|
|
6836
|
+
};
|
|
6837
|
+
const handleUrlSubmit = () => {
|
|
6838
|
+
if (urlValue) {
|
|
6839
|
+
editor.chain().focus().setLink({
|
|
6840
|
+
href: urlValue,
|
|
6841
|
+
target: openInNewTab ? "_blank" : "_self"
|
|
6842
|
+
}).run();
|
|
6843
|
+
} else {
|
|
6844
|
+
editor.chain().focus().unsetLink().run();
|
|
6845
|
+
}
|
|
6846
|
+
if (elementId) {
|
|
6847
|
+
window.dispatchEvent(
|
|
6848
|
+
new CustomEvent("elementor:inline-link-changed", {
|
|
6849
|
+
detail: { elementId }
|
|
6850
|
+
})
|
|
6851
|
+
);
|
|
6852
|
+
}
|
|
6853
|
+
linkPopupState.close();
|
|
6854
|
+
};
|
|
6855
|
+
React105.useEffect(() => {
|
|
6856
|
+
editor?.commands?.focus();
|
|
6857
|
+
}, [editor]);
|
|
6858
|
+
return /* @__PURE__ */ React105.createElement(
|
|
6859
|
+
import_ui91.Box,
|
|
6860
|
+
{
|
|
6861
|
+
ref: toolbarRef,
|
|
6862
|
+
sx: {
|
|
6863
|
+
display: "inline-flex",
|
|
6864
|
+
gap: 0.5,
|
|
6865
|
+
padding: 0.5,
|
|
6866
|
+
borderRadius: "8px",
|
|
6867
|
+
backgroundColor: "background.paper",
|
|
6868
|
+
boxShadow: "0 2px 8px rgba(0, 0, 0, 0.2)",
|
|
6869
|
+
alignItems: "center",
|
|
6870
|
+
visibility: linkPopupState.isOpen ? "hidden" : "visible",
|
|
6871
|
+
pointerEvents: linkPopupState.isOpen ? "none" : "all",
|
|
6872
|
+
...sx
|
|
6873
|
+
}
|
|
6874
|
+
},
|
|
6875
|
+
/* @__PURE__ */ React105.createElement(import_ui91.Tooltip, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React105.createElement(import_ui91.IconButton, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
|
|
6876
|
+
/* @__PURE__ */ React105.createElement(
|
|
6877
|
+
import_ui91.ToggleButtonGroup,
|
|
6878
|
+
{
|
|
6879
|
+
value: editorState,
|
|
6880
|
+
size: "tiny",
|
|
6881
|
+
sx: {
|
|
6882
|
+
display: "flex",
|
|
6883
|
+
gap: 0.5,
|
|
6884
|
+
border: "none",
|
|
6885
|
+
[`& .${import_ui91.toggleButtonGroupClasses.firstButton}, & .${import_ui91.toggleButtonGroupClasses.middleButton}, & .${import_ui91.toggleButtonGroupClasses.lastButton}`]: {
|
|
6886
|
+
borderRadius: "8px",
|
|
6887
|
+
border: "none",
|
|
6888
|
+
marginLeft: 0,
|
|
6889
|
+
"&.Mui-selected": {
|
|
6890
|
+
marginLeft: 0
|
|
6891
|
+
},
|
|
6892
|
+
"& + &.Mui-selected": {
|
|
6893
|
+
marginLeft: 0
|
|
6894
|
+
}
|
|
6895
|
+
}
|
|
6896
|
+
}
|
|
6897
|
+
},
|
|
6898
|
+
formatButtonsList.map((button) => /* @__PURE__ */ React105.createElement(import_ui91.Tooltip, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React105.createElement(
|
|
6899
|
+
import_ui91.ToggleButton,
|
|
6900
|
+
{
|
|
6901
|
+
value: button.action,
|
|
6902
|
+
"aria-label": button.label,
|
|
6903
|
+
size: "tiny",
|
|
6904
|
+
onClick: () => {
|
|
6905
|
+
if (button.action === "link") {
|
|
6906
|
+
handleLinkClick();
|
|
6907
|
+
} else {
|
|
6908
|
+
button.method?.(editor);
|
|
6909
|
+
}
|
|
6910
|
+
editor?.commands?.focus();
|
|
6911
|
+
}
|
|
6912
|
+
},
|
|
6913
|
+
button.icon
|
|
6914
|
+
)))
|
|
6915
|
+
),
|
|
6916
|
+
/* @__PURE__ */ React105.createElement(
|
|
6917
|
+
UrlPopover,
|
|
6918
|
+
{
|
|
6919
|
+
popupState: linkPopupState,
|
|
6920
|
+
anchorRef: toolbarRef,
|
|
6921
|
+
restoreValue: handleUrlSubmit,
|
|
6922
|
+
value: urlValue,
|
|
6923
|
+
onChange: handleUrlChange,
|
|
6924
|
+
openInNewTab,
|
|
6925
|
+
onToggleNewTab: handleToggleNewTab
|
|
6926
|
+
}
|
|
6927
|
+
)
|
|
6928
|
+
);
|
|
6929
|
+
};
|
|
6930
|
+
var checkIfElementHasLink = (elementId) => !!(0, import_editor_elements6.getElementSetting)(elementId, "link")?.value?.destination;
|
|
6931
|
+
var toolbarButtons = {
|
|
6932
|
+
clear: {
|
|
6933
|
+
label: (0, import_i18n53.__)("Clear", "elementor"),
|
|
6934
|
+
icon: /* @__PURE__ */ React105.createElement(import_icons37.MinusIcon, { fontSize: "tiny" }),
|
|
6935
|
+
action: "clear",
|
|
6936
|
+
method: (editor) => {
|
|
6937
|
+
editor.chain().focus().clearNodes().unsetAllMarks().run();
|
|
6938
|
+
}
|
|
6939
|
+
},
|
|
6940
|
+
bold: {
|
|
6941
|
+
label: (0, import_i18n53.__)("Bold", "elementor"),
|
|
6942
|
+
icon: /* @__PURE__ */ React105.createElement(import_icons37.BoldIcon, { fontSize: "tiny" }),
|
|
6943
|
+
action: "bold",
|
|
6944
|
+
method: (editor) => {
|
|
6945
|
+
editor.chain().focus().toggleBold().run();
|
|
6946
|
+
}
|
|
6947
|
+
},
|
|
6948
|
+
italic: {
|
|
6949
|
+
label: (0, import_i18n53.__)("Italic", "elementor"),
|
|
6950
|
+
icon: /* @__PURE__ */ React105.createElement(import_icons37.ItalicIcon, { fontSize: "tiny" }),
|
|
6951
|
+
action: "italic",
|
|
6952
|
+
method: (editor) => {
|
|
6953
|
+
editor.chain().focus().toggleItalic().run();
|
|
6954
|
+
}
|
|
6955
|
+
},
|
|
6956
|
+
underline: {
|
|
6957
|
+
label: (0, import_i18n53.__)("Underline", "elementor"),
|
|
6958
|
+
icon: /* @__PURE__ */ React105.createElement(import_icons37.UnderlineIcon, { fontSize: "tiny" }),
|
|
6959
|
+
action: "underline",
|
|
6960
|
+
method: (editor) => {
|
|
6961
|
+
editor.chain().focus().toggleUnderline().run();
|
|
6962
|
+
}
|
|
6963
|
+
},
|
|
6964
|
+
strike: {
|
|
6965
|
+
label: (0, import_i18n53.__)("Strikethrough", "elementor"),
|
|
6966
|
+
icon: /* @__PURE__ */ React105.createElement(import_icons37.StrikethroughIcon, { fontSize: "tiny" }),
|
|
6967
|
+
action: "strike",
|
|
6968
|
+
method: (editor) => {
|
|
6969
|
+
editor.chain().focus().toggleStrike().run();
|
|
6970
|
+
}
|
|
6971
|
+
},
|
|
6972
|
+
superscript: {
|
|
6973
|
+
label: (0, import_i18n53.__)("Superscript", "elementor"),
|
|
6974
|
+
icon: /* @__PURE__ */ React105.createElement(import_icons37.SuperscriptIcon, { fontSize: "tiny" }),
|
|
6975
|
+
action: "superscript",
|
|
6976
|
+
method: (editor) => {
|
|
6977
|
+
editor.chain().focus().toggleSuperscript().run();
|
|
6978
|
+
}
|
|
6979
|
+
},
|
|
6980
|
+
subscript: {
|
|
6981
|
+
label: (0, import_i18n53.__)("Subscript", "elementor"),
|
|
6982
|
+
icon: /* @__PURE__ */ React105.createElement(import_icons37.SubscriptIcon, { fontSize: "tiny" }),
|
|
6983
|
+
action: "subscript",
|
|
6984
|
+
method: (editor) => {
|
|
6985
|
+
editor.chain().focus().toggleSubscript().run();
|
|
6986
|
+
}
|
|
6987
|
+
},
|
|
6988
|
+
link: {
|
|
6989
|
+
label: (0, import_i18n53.__)("Link", "elementor"),
|
|
6990
|
+
icon: /* @__PURE__ */ React105.createElement(import_icons37.LinkIcon, { fontSize: "tiny" }),
|
|
6991
|
+
action: "link",
|
|
6992
|
+
method: null
|
|
6993
|
+
}
|
|
6994
|
+
};
|
|
6995
|
+
var { clear: clearButton, ...formatButtons } = toolbarButtons;
|
|
6996
|
+
var possibleFormats = Object.keys(formatButtons);
|
|
6981
6997
|
// Annotate the CommonJS export names for ESM import in node:
|
|
6982
6998
|
0 && (module.exports = {
|
|
6983
6999
|
AspectRatioControl,
|
|
@@ -6992,6 +7008,7 @@ var usePopover = (openOnMount, onOpen) => {
|
|
|
6992
7008
|
ControlReplacementsProvider,
|
|
6993
7009
|
ControlToggleButtonGroup,
|
|
6994
7010
|
DateTimeControl,
|
|
7011
|
+
DisplayConditionsControl,
|
|
6995
7012
|
EqualUnequalSizesControl,
|
|
6996
7013
|
FilterRepeaterControl,
|
|
6997
7014
|
FloatingActionsBar,
|