@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.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 React102 = __toESM(require("react"));
6241
+ var React100 = __toESM(require("react"));
6241
6242
  var import_editor_props51 = require("@elementor/editor-props");
6242
- var import_ui88 = require("@elementor/ui");
6243
+ var import_ui86 = require("@elementor/ui");
6243
6244
 
6244
6245
  // src/components/inline-editor.tsx
6245
- var React101 = __toESM(require("react"));
6246
- var import_react56 = require("react");
6247
- var import_ui87 = require("@elementor/ui");
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 import_react57 = require("@tiptap/react");
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-toolbar.tsx
6273
- var React100 = __toESM(require("react"));
6274
- var import_react54 = require("react");
6275
- var import_editor_elements6 = require("@elementor/editor-elements");
6276
- var import_icons34 = require("@elementor/icons");
6277
- var import_ui86 = require("@elementor/ui");
6278
- var import_react55 = require("@tiptap/react");
6279
- var import_i18n51 = require("@wordpress/i18n");
6280
-
6281
- // src/components/url-popover.tsx
6282
- var React99 = __toESM(require("react"));
6283
- var import_react53 = require("react");
6284
- var import_icons33 = require("@elementor/icons");
6285
- var import_ui85 = require("@elementor/ui");
6286
- var import_i18n50 = require("@wordpress/i18n");
6287
- var UrlPopover = ({
6288
- popupState,
6289
- restoreValue,
6290
- anchorRef,
6291
- value,
6292
- onChange,
6293
- openInNewTab,
6294
- onToggleNewTab
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
- return /* @__PURE__ */ React99.createElement(
6307
- import_ui85.Popover,
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
- subscript: {
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 (elementId) {
6452
- window.dispatchEvent(
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
- React100.useEffect(() => {
6461
- editor?.commands?.focus();
6462
- }, [editor]);
6463
- return /* @__PURE__ */ React100.createElement(
6464
- import_ui86.Box,
6465
- {
6466
- ref: toolbarRef,
6467
- sx: {
6468
- display: "inline-flex",
6469
- gap: 0.5,
6470
- padding: 0.5,
6471
- borderRadius: "8px",
6472
- backgroundColor: "background.paper",
6473
- boxShadow: "0 2px 8px rgba(0, 0, 0, 0.2)",
6474
- alignItems: "center",
6475
- visibility: linkPopupState.isOpen ? "hidden" : "visible",
6476
- pointerEvents: linkPopupState.isOpen ? "none" : "all"
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
- formatButtonsList.map((button) => /* @__PURE__ */ React100.createElement(import_ui86.Tooltip, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React100.createElement(
6503
- import_ui86.ToggleButton,
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
- // src/components/inline-editor.tsx
6536
- var ITALIC_KEYBOARD_SHORTCUT = "i";
6537
- var BOLD_KEYBOARD_SHORTCUT = "b";
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
- }, dependencies);
6549
- };
6550
- var calcSelectionCenter = (view, container) => {
6551
- if (!container) {
6552
- return null;
6553
- }
6554
- const { from, to } = view.state.selection;
6555
- const start = view.coordsAtPos(from);
6556
- const end = view.coordsAtPos(to);
6557
- const left = (start.left + end.left) / 2 - container.left;
6558
- const top = Math.min(start.top, end.top) - container.top;
6559
- return { left, top };
6560
- };
6561
- var Wrapper = ({ children, containerRef, editor, sx, onBlur }) => {
6562
- const wrappedChildren = /* @__PURE__ */ React101.createElement(import_ui87.Box, { ref: containerRef, ...sx }, children);
6563
- return onBlur ? /* @__PURE__ */ React101.createElement(
6564
- import_ui87.ClickAwayListener,
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?.(event);
6398
+ onBlur?.();
6571
6399
  }
6572
6400
  },
6573
6401
  wrappedChildren
6574
- ) : /* @__PURE__ */ React101.createElement(React101.Fragment, null, wrappedChildren);
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__ */ React102.createElement(ControlActions, null, /* @__PURE__ */ React102.createElement(
6734
- import_ui88.Box,
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__ */ React102.createElement(InlineEditor, { value: value || "", setValue: handleChange })
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 React103 = __toESM(require("react"));
6778
- var import_icons35 = require("@elementor/icons");
6779
- var import_ui89 = require("@elementor/ui");
6780
- var CustomIconButton = (0, import_ui89.styled)(import_ui89.IconButton)(({ theme }) => ({
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__ */ React103.createElement(import_ui89.Tooltip, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React103.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React103.createElement(import_icons35.BrushBigIcon, { fontSize: size })));
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 React104 = __toESM(require("react"));
6788
- var import_react58 = require("react");
6789
- var import_icons36 = require("@elementor/icons");
6790
- var import_ui90 = require("@elementor/ui");
6791
- var import_i18n52 = require("@wordpress/i18n");
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, import_react58.useState)(initialOpenItem);
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__ */ React104.createElement(
6873
- import_ui90.IconButton,
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, import_i18n52.__)("Add item", "elementor")
6633
+ "aria-label": (0, import_i18n51.__)("Add item", "elementor")
6882
6634
  },
6883
- /* @__PURE__ */ React104.createElement(import_icons36.PlusIcon, { fontSize: SIZE9 })
6635
+ /* @__PURE__ */ React103.createElement(import_icons35.PlusIcon, { fontSize: SIZE9 })
6884
6636
  );
6885
- return /* @__PURE__ */ React104.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React104.createElement(RepeaterHeader, { label, adornment: ControlAdornments }, shouldShowInfotip ? /* @__PURE__ */ React104.createElement(
6886
- import_ui90.Infotip,
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__ */ React104.createElement(import_ui90.Box, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
6894
- ) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React104.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
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__ */ React104.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React104.createElement(
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__ */ React104.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React104.createElement(itemSettings.Label, { value, index })),
6906
- startIcon: /* @__PURE__ */ React104.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React104.createElement(itemSettings.Icon, { value })),
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__ */ React104.createElement(
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, import_i18n52.__)("Duplicate", "elementor");
6949
- const toggleLabel = propDisabled ? (0, import_i18n52.__)("Show", "elementor") : (0, import_i18n52.__)("Hide", "elementor");
6950
- const removeLabel = (0, import_i18n52.__)("Remove", "elementor");
6951
- return /* @__PURE__ */ React104.createElement(React104.Fragment, null, /* @__PURE__ */ React104.createElement(
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, import_i18n52.__)("Open item", "elementor"),
6958
- ...(0, import_ui90.bindTrigger)(popoverState),
6709
+ "aria-label": (0, import_i18n51.__)("Open item", "elementor"),
6710
+ ...(0, import_ui89.bindTrigger)(popoverState),
6959
6711
  startIcon,
6960
- actions: /* @__PURE__ */ React104.createElement(React104.Fragment, null, showDuplicate && /* @__PURE__ */ React104.createElement(import_ui90.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React104.createElement(import_ui90.IconButton, { size: SIZE9, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React104.createElement(import_icons36.CopyIcon, { fontSize: SIZE9 }))), showToggle && /* @__PURE__ */ React104.createElement(import_ui90.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React104.createElement(import_ui90.IconButton, { size: SIZE9, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React104.createElement(import_icons36.EyeOffIcon, { fontSize: SIZE9 }) : /* @__PURE__ */ React104.createElement(import_icons36.EyeIcon, { fontSize: SIZE9 }))), actions?.(value), showRemove && /* @__PURE__ */ React104.createElement(import_ui90.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React104.createElement(import_ui90.IconButton, { size: SIZE9, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React104.createElement(import_icons36.XIcon, { fontSize: SIZE9 }))))
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__ */ React104.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React104.createElement(import_ui90.Box, null, children({ anchorEl: ref }))));
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, import_react58.useState)(null);
6966
- const popoverState = (0, import_ui90.usePopupState)({ variant: "popover" });
6967
- const popoverProps = (0, import_ui90.bindPopover)(popoverState);
6968
- (0, import_react58.useEffect)(() => {
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,