@elementor/editor-controls 4.3.0-1058 → 4.3.0-1059
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 +26 -23
- package/dist/index.d.ts +26 -23
- package/dist/index.js +514 -462
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +519 -467
- package/dist/index.mjs.map +1 -1
- package/package.json +16 -16
- package/src/components/inline-editor-toolbar.tsx +34 -3
- package/src/components/inline-editor.tsx +3 -0
- package/src/controls/inline-editing-control.tsx +53 -29
package/dist/index.js
CHANGED
|
@@ -7974,10 +7974,10 @@ var BoundTimeStringControl = ({ bind, ariaLabel }) => {
|
|
|
7974
7974
|
};
|
|
7975
7975
|
|
|
7976
7976
|
// src/controls/inline-editing-control.tsx
|
|
7977
|
-
var
|
|
7978
|
-
var
|
|
7977
|
+
var React117 = __toESM(require("react"));
|
|
7978
|
+
var import_react71 = require("react");
|
|
7979
7979
|
var import_editor_props64 = require("@elementor/editor-props");
|
|
7980
|
-
var
|
|
7980
|
+
var import_ui101 = require("@elementor/ui");
|
|
7981
7981
|
|
|
7982
7982
|
// src/components/inline-editor.tsx
|
|
7983
7983
|
var React114 = __toESM(require("react"));
|
|
@@ -8039,6 +8039,7 @@ var InlineEditor = React114.forwardRef((props, ref) => {
|
|
|
8039
8039
|
onBlur = void 0,
|
|
8040
8040
|
expectedTag = null,
|
|
8041
8041
|
onEditorCreate,
|
|
8042
|
+
onEditorDestroy,
|
|
8042
8043
|
wrapperClassName,
|
|
8043
8044
|
onSelectionEnd,
|
|
8044
8045
|
mountElement = null
|
|
@@ -8123,6 +8124,7 @@ var InlineEditor = React114.forwardRef((props, ref) => {
|
|
|
8123
8124
|
}
|
|
8124
8125
|
},
|
|
8125
8126
|
onCreate: onEditorCreate ? ({ editor: mountedEditor }) => onEditorCreate(mountedEditor) : void 0,
|
|
8127
|
+
onDestroy: onEditorDestroy ? () => onEditorDestroy() : void 0,
|
|
8126
8128
|
onBlur: mountElement ? void 0 : () => onBlurRef.current?.(),
|
|
8127
8129
|
onSelectionUpdate: onSelectionEnd ? ({ editor: updatedEditor }) => onSelectionEnd(updatedEditor.view) : void 0
|
|
8128
8130
|
});
|
|
@@ -8151,88 +8153,408 @@ var useOnUpdate = (callback, dependencies) => {
|
|
|
8151
8153
|
}, dependencies);
|
|
8152
8154
|
};
|
|
8153
8155
|
|
|
8154
|
-
// src/
|
|
8155
|
-
var
|
|
8156
|
-
|
|
8157
|
-
|
|
8158
|
-
|
|
8159
|
-
|
|
8160
|
-
|
|
8161
|
-
|
|
8162
|
-
|
|
8163
|
-
|
|
8164
|
-
|
|
8165
|
-
|
|
8166
|
-
|
|
8167
|
-
|
|
8156
|
+
// src/components/inline-editor-toolbar.tsx
|
|
8157
|
+
var React116 = __toESM(require("react"));
|
|
8158
|
+
var import_react69 = require("react");
|
|
8159
|
+
var import_editor_elements7 = require("@elementor/editor-elements");
|
|
8160
|
+
var import_icons38 = require("@elementor/icons");
|
|
8161
|
+
var import_ui100 = require("@elementor/ui");
|
|
8162
|
+
var import_react70 = require("@tiptap/react");
|
|
8163
|
+
var import_i18n58 = require("@wordpress/i18n");
|
|
8164
|
+
|
|
8165
|
+
// src/components/url-popover.tsx
|
|
8166
|
+
var React115 = __toESM(require("react"));
|
|
8167
|
+
var import_react68 = require("react");
|
|
8168
|
+
var import_icons37 = require("@elementor/icons");
|
|
8169
|
+
var import_ui99 = require("@elementor/ui");
|
|
8170
|
+
var import_i18n57 = require("@wordpress/i18n");
|
|
8171
|
+
var UrlPopover = ({
|
|
8172
|
+
popupState,
|
|
8173
|
+
restoreValue,
|
|
8174
|
+
anchorRef,
|
|
8175
|
+
value,
|
|
8176
|
+
onChange,
|
|
8177
|
+
openInNewTab,
|
|
8178
|
+
onToggleNewTab
|
|
8179
|
+
}) => {
|
|
8180
|
+
const inputRef = (0, import_react68.useRef)(null);
|
|
8181
|
+
(0, import_react68.useEffect)(() => {
|
|
8182
|
+
if (popupState.isOpen) {
|
|
8183
|
+
requestAnimationFrame(() => inputRef.current?.focus());
|
|
8184
|
+
}
|
|
8185
|
+
}, [popupState.isOpen]);
|
|
8186
|
+
const handleClose = () => {
|
|
8187
|
+
restoreValue();
|
|
8188
|
+
popupState.close();
|
|
8189
|
+
};
|
|
8190
|
+
return /* @__PURE__ */ React115.createElement(
|
|
8191
|
+
import_ui99.Popover,
|
|
8192
|
+
{
|
|
8193
|
+
slotProps: {
|
|
8194
|
+
paper: { sx: { borderRadius: "16px", width: anchorRef.current?.offsetWidth + "px", marginTop: -1 } }
|
|
8168
8195
|
},
|
|
8169
|
-
|
|
8170
|
-
|
|
8171
|
-
|
|
8172
|
-
|
|
8196
|
+
...(0, import_ui99.bindPopover)(popupState),
|
|
8197
|
+
anchorOrigin: { vertical: "top", horizontal: "left" },
|
|
8198
|
+
transformOrigin: { vertical: "top", horizontal: "left" },
|
|
8199
|
+
onClose: handleClose
|
|
8200
|
+
},
|
|
8201
|
+
/* @__PURE__ */ React115.createElement(import_ui99.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React115.createElement(
|
|
8202
|
+
import_ui99.TextField,
|
|
8203
|
+
{
|
|
8204
|
+
value,
|
|
8205
|
+
onChange,
|
|
8206
|
+
size: "tiny",
|
|
8207
|
+
fullWidth: true,
|
|
8208
|
+
placeholder: (0, import_i18n57.__)("Type a URL", "elementor"),
|
|
8209
|
+
inputProps: { ref: inputRef },
|
|
8210
|
+
color: "secondary",
|
|
8211
|
+
InputProps: { sx: { borderRadius: "8px" } },
|
|
8212
|
+
onKeyUp: (event) => event.key === "Enter" && handleClose()
|
|
8213
|
+
}
|
|
8214
|
+
), /* @__PURE__ */ React115.createElement(import_ui99.Tooltip, { title: (0, import_i18n57.__)("Open in a new tab", "elementor") }, /* @__PURE__ */ React115.createElement(
|
|
8215
|
+
import_ui99.ToggleButton,
|
|
8173
8216
|
{
|
|
8217
|
+
size: "tiny",
|
|
8218
|
+
value: "newTab",
|
|
8219
|
+
selected: openInNewTab,
|
|
8220
|
+
onClick: onToggleNewTab,
|
|
8221
|
+
"aria-label": (0, import_i18n57.__)("Open in a new tab", "elementor"),
|
|
8222
|
+
sx: { borderRadius: "8px" }
|
|
8223
|
+
},
|
|
8224
|
+
/* @__PURE__ */ React115.createElement(import_icons37.ExternalLinkIcon, { fontSize: "tiny" })
|
|
8225
|
+
)))
|
|
8226
|
+
);
|
|
8227
|
+
};
|
|
8228
|
+
|
|
8229
|
+
// src/components/inline-editor-toolbar.tsx
|
|
8230
|
+
var InlineEditorToolbar = ({
|
|
8231
|
+
editor,
|
|
8232
|
+
elementId,
|
|
8233
|
+
sx = {},
|
|
8234
|
+
inControlPanel = false
|
|
8235
|
+
}) => {
|
|
8236
|
+
const [urlValue, setUrlValue] = (0, import_react69.useState)("");
|
|
8237
|
+
const [openInNewTab, setOpenInNewTab] = (0, import_react69.useState)(false);
|
|
8238
|
+
const toolbarRef = (0, import_react69.useRef)(null);
|
|
8239
|
+
const linkPopupState = (0, import_ui100.usePopupState)({ variant: "popover" });
|
|
8240
|
+
const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
|
|
8241
|
+
const editorState = (0, import_react70.useEditorState)({
|
|
8242
|
+
editor,
|
|
8243
|
+
selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
|
|
8244
|
+
});
|
|
8245
|
+
const formatButtonsList = (0, import_react69.useMemo)(() => {
|
|
8246
|
+
const buttons = Object.values(formatButtons);
|
|
8247
|
+
if (isElementClickable) {
|
|
8248
|
+
return buttons.filter((button) => button.action !== "link");
|
|
8249
|
+
}
|
|
8250
|
+
return buttons;
|
|
8251
|
+
}, [isElementClickable]);
|
|
8252
|
+
const handleLinkClick = () => {
|
|
8253
|
+
const linkAttrs = editor.getAttributes("link");
|
|
8254
|
+
setUrlValue(linkAttrs.href || "");
|
|
8255
|
+
setOpenInNewTab(linkAttrs.target === "_blank");
|
|
8256
|
+
linkPopupState.open(toolbarRef.current);
|
|
8257
|
+
};
|
|
8258
|
+
const handleUrlChange = (event) => {
|
|
8259
|
+
setUrlValue(event.target.value);
|
|
8260
|
+
};
|
|
8261
|
+
const handleToggleNewTab = () => {
|
|
8262
|
+
setOpenInNewTab(!openInNewTab);
|
|
8263
|
+
};
|
|
8264
|
+
const handleUrlSubmit = () => {
|
|
8265
|
+
if (urlValue) {
|
|
8266
|
+
editor.chain().focus().setLink({
|
|
8267
|
+
href: urlValue,
|
|
8268
|
+
target: openInNewTab ? "_blank" : "_self"
|
|
8269
|
+
}).run();
|
|
8270
|
+
} else {
|
|
8271
|
+
editor.chain().focus().unsetLink().run();
|
|
8272
|
+
}
|
|
8273
|
+
if (elementId) {
|
|
8274
|
+
window.dispatchEvent(
|
|
8275
|
+
new CustomEvent("elementor:inline-link-changed", {
|
|
8276
|
+
detail: { elementId }
|
|
8277
|
+
})
|
|
8278
|
+
);
|
|
8279
|
+
}
|
|
8280
|
+
linkPopupState.close();
|
|
8281
|
+
};
|
|
8282
|
+
(0, import_react69.useEffect)(() => {
|
|
8283
|
+
if (!inControlPanel) {
|
|
8284
|
+
editor?.commands?.focus();
|
|
8285
|
+
}
|
|
8286
|
+
}, [editor, inControlPanel]);
|
|
8287
|
+
return /* @__PURE__ */ React116.createElement(
|
|
8288
|
+
import_ui100.Box,
|
|
8289
|
+
{
|
|
8290
|
+
ref: toolbarRef,
|
|
8291
|
+
sx: {
|
|
8292
|
+
display: "inline-flex",
|
|
8293
|
+
gap: 0.5,
|
|
8294
|
+
padding: 0.5,
|
|
8295
|
+
borderRadius: "8px",
|
|
8296
|
+
backgroundColor: "background.paper",
|
|
8297
|
+
boxShadow: "0 2px 8px rgba(0, 0, 0, 0.2)",
|
|
8298
|
+
alignItems: "center",
|
|
8299
|
+
visibility: linkPopupState.isOpen ? "hidden" : "visible",
|
|
8300
|
+
pointerEvents: linkPopupState.isOpen ? "none" : "all",
|
|
8301
|
+
...sx,
|
|
8302
|
+
...inControlPanel && {
|
|
8303
|
+
width: "100%",
|
|
8304
|
+
justifyContent: "center",
|
|
8305
|
+
flexDirection: "row",
|
|
8306
|
+
backgroundColor: "transparent",
|
|
8307
|
+
boxShadow: "none",
|
|
8308
|
+
borderWidth: "0",
|
|
8309
|
+
borderBottom: "1px solid",
|
|
8310
|
+
borderBottomColor: "grey.200",
|
|
8311
|
+
borderRadius: "0",
|
|
8312
|
+
position: "absolute",
|
|
8313
|
+
top: "0",
|
|
8314
|
+
left: "0"
|
|
8315
|
+
}
|
|
8316
|
+
}
|
|
8317
|
+
},
|
|
8318
|
+
/* @__PURE__ */ React116.createElement(import_ui100.Tooltip, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React116.createElement(import_ui100.IconButton, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
|
|
8319
|
+
/* @__PURE__ */ React116.createElement(
|
|
8320
|
+
import_ui100.ToggleButtonGroup,
|
|
8321
|
+
{
|
|
8322
|
+
value: editorState,
|
|
8323
|
+
size: "tiny",
|
|
8174
8324
|
sx: {
|
|
8175
|
-
|
|
8176
|
-
|
|
8177
|
-
|
|
8178
|
-
|
|
8179
|
-
|
|
8180
|
-
|
|
8181
|
-
|
|
8182
|
-
|
|
8183
|
-
|
|
8184
|
-
borderColor: "black",
|
|
8185
|
-
boxShadow: "0 0 0 1px black"
|
|
8186
|
-
},
|
|
8187
|
-
"& .ProseMirror:focus": {
|
|
8188
|
-
outline: "none"
|
|
8189
|
-
},
|
|
8190
|
-
"& .ProseMirror": {
|
|
8191
|
-
minHeight: "70px",
|
|
8192
|
-
fontSize: "12px",
|
|
8193
|
-
"& a": {
|
|
8194
|
-
color: "inherit"
|
|
8195
|
-
},
|
|
8196
|
-
"& .elementor-inline-editor-reset": {
|
|
8197
|
-
margin: 0,
|
|
8198
|
-
padding: 0
|
|
8325
|
+
display: "flex",
|
|
8326
|
+
gap: 0.5,
|
|
8327
|
+
border: "none",
|
|
8328
|
+
[`& .${import_ui100.toggleButtonGroupClasses.firstButton}, & .${import_ui100.toggleButtonGroupClasses.middleButton}, & .${import_ui100.toggleButtonGroupClasses.lastButton}`]: {
|
|
8329
|
+
borderRadius: "8px",
|
|
8330
|
+
border: "none",
|
|
8331
|
+
marginLeft: 0,
|
|
8332
|
+
"&.Mui-selected": {
|
|
8333
|
+
marginLeft: 0
|
|
8199
8334
|
},
|
|
8200
|
-
"&.
|
|
8201
|
-
|
|
8202
|
-
|
|
8203
|
-
|
|
8204
|
-
|
|
8205
|
-
|
|
8335
|
+
"& + &.Mui-selected": {
|
|
8336
|
+
marginLeft: 0
|
|
8337
|
+
}
|
|
8338
|
+
},
|
|
8339
|
+
...inControlPanel && {
|
|
8340
|
+
justifyContent: "space-between",
|
|
8341
|
+
width: "100%",
|
|
8342
|
+
"& svg": {
|
|
8343
|
+
width: "0.7rem",
|
|
8344
|
+
height: "0.7rem",
|
|
8345
|
+
fill: "black"
|
|
8346
|
+
}
|
|
8347
|
+
}
|
|
8348
|
+
}
|
|
8349
|
+
},
|
|
8350
|
+
formatButtonsList.map((button) => /* @__PURE__ */ React116.createElement(import_ui100.Tooltip, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React116.createElement(
|
|
8351
|
+
import_ui100.ToggleButton,
|
|
8352
|
+
{
|
|
8353
|
+
value: button.action,
|
|
8354
|
+
"aria-label": button.label,
|
|
8355
|
+
size: "tiny",
|
|
8356
|
+
onClick: () => {
|
|
8357
|
+
if (button.action === "link") {
|
|
8358
|
+
handleLinkClick();
|
|
8359
|
+
} else {
|
|
8360
|
+
button.method?.(editor);
|
|
8206
8361
|
}
|
|
8362
|
+
editor?.commands?.focus();
|
|
8363
|
+
}
|
|
8364
|
+
},
|
|
8365
|
+
button.icon
|
|
8366
|
+
)))
|
|
8367
|
+
),
|
|
8368
|
+
/* @__PURE__ */ React116.createElement(
|
|
8369
|
+
UrlPopover,
|
|
8370
|
+
{
|
|
8371
|
+
popupState: linkPopupState,
|
|
8372
|
+
anchorRef: toolbarRef,
|
|
8373
|
+
restoreValue: handleUrlSubmit,
|
|
8374
|
+
value: urlValue,
|
|
8375
|
+
onChange: handleUrlChange,
|
|
8376
|
+
openInNewTab,
|
|
8377
|
+
onToggleNewTab: handleToggleNewTab
|
|
8378
|
+
}
|
|
8379
|
+
)
|
|
8380
|
+
);
|
|
8381
|
+
};
|
|
8382
|
+
var checkIfElementIsClickable = (elementId) => {
|
|
8383
|
+
const container = (0, import_editor_elements7.getContainer)(elementId);
|
|
8384
|
+
const type = container?.model.get("widgetType");
|
|
8385
|
+
const isButton = type === "e-button";
|
|
8386
|
+
const hasLink = !!(0, import_editor_elements7.getElementSetting)(elementId, "link")?.value?.destination;
|
|
8387
|
+
return isButton || hasLink;
|
|
8388
|
+
};
|
|
8389
|
+
var toolbarButtons = {
|
|
8390
|
+
clear: {
|
|
8391
|
+
label: (0, import_i18n58.__)("Clear", "elementor"),
|
|
8392
|
+
icon: /* @__PURE__ */ React116.createElement(import_icons38.MinusIcon, { fontSize: "tiny" }),
|
|
8393
|
+
action: "clear",
|
|
8394
|
+
method: (editor) => {
|
|
8395
|
+
editor.chain().focus().clearNodes().unsetAllMarks().run();
|
|
8396
|
+
}
|
|
8397
|
+
},
|
|
8398
|
+
bold: {
|
|
8399
|
+
label: (0, import_i18n58.__)("Bold", "elementor"),
|
|
8400
|
+
icon: /* @__PURE__ */ React116.createElement(import_icons38.BoldIcon, { fontSize: "tiny" }),
|
|
8401
|
+
action: "bold",
|
|
8402
|
+
method: (editor) => {
|
|
8403
|
+
editor.chain().focus().toggleBold().run();
|
|
8404
|
+
}
|
|
8405
|
+
},
|
|
8406
|
+
italic: {
|
|
8407
|
+
label: (0, import_i18n58.__)("Italic", "elementor"),
|
|
8408
|
+
icon: /* @__PURE__ */ React116.createElement(import_icons38.ItalicIcon, { fontSize: "tiny" }),
|
|
8409
|
+
action: "italic",
|
|
8410
|
+
method: (editor) => {
|
|
8411
|
+
editor.chain().focus().toggleItalic().run();
|
|
8412
|
+
}
|
|
8413
|
+
},
|
|
8414
|
+
underline: {
|
|
8415
|
+
label: (0, import_i18n58.__)("Underline", "elementor"),
|
|
8416
|
+
icon: /* @__PURE__ */ React116.createElement(import_icons38.UnderlineIcon, { fontSize: "tiny" }),
|
|
8417
|
+
action: "underline",
|
|
8418
|
+
method: (editor) => {
|
|
8419
|
+
editor.chain().focus().toggleUnderline().run();
|
|
8420
|
+
}
|
|
8421
|
+
},
|
|
8422
|
+
strike: {
|
|
8423
|
+
label: (0, import_i18n58.__)("Strikethrough", "elementor"),
|
|
8424
|
+
icon: /* @__PURE__ */ React116.createElement(import_icons38.StrikethroughIcon, { fontSize: "tiny" }),
|
|
8425
|
+
action: "strike",
|
|
8426
|
+
method: (editor) => {
|
|
8427
|
+
editor.chain().focus().toggleStrike().run();
|
|
8428
|
+
}
|
|
8429
|
+
},
|
|
8430
|
+
superscript: {
|
|
8431
|
+
label: (0, import_i18n58.__)("Superscript", "elementor"),
|
|
8432
|
+
icon: /* @__PURE__ */ React116.createElement(import_icons38.SuperscriptIcon, { fontSize: "tiny" }),
|
|
8433
|
+
action: "superscript",
|
|
8434
|
+
method: (editor) => {
|
|
8435
|
+
editor.chain().focus().toggleSuperscript().run();
|
|
8436
|
+
}
|
|
8437
|
+
},
|
|
8438
|
+
subscript: {
|
|
8439
|
+
label: (0, import_i18n58.__)("Subscript", "elementor"),
|
|
8440
|
+
icon: /* @__PURE__ */ React116.createElement(import_icons38.SubscriptIcon, { fontSize: "tiny" }),
|
|
8441
|
+
action: "subscript",
|
|
8442
|
+
method: (editor) => {
|
|
8443
|
+
editor.chain().focus().toggleSubscript().run();
|
|
8444
|
+
}
|
|
8445
|
+
},
|
|
8446
|
+
link: {
|
|
8447
|
+
label: (0, import_i18n58.__)("Link", "elementor"),
|
|
8448
|
+
icon: /* @__PURE__ */ React116.createElement(import_icons38.LinkIcon, { fontSize: "tiny" }),
|
|
8449
|
+
action: "link",
|
|
8450
|
+
method: null
|
|
8451
|
+
}
|
|
8452
|
+
};
|
|
8453
|
+
var { clear: clearButton, ...formatButtons } = toolbarButtons;
|
|
8454
|
+
var possibleFormats = Object.keys(formatButtons);
|
|
8455
|
+
|
|
8456
|
+
// src/controls/inline-editing-control.tsx
|
|
8457
|
+
var InlineEditingControl = createControl(({ sx, attributes, props, context: { elementId } }) => {
|
|
8458
|
+
const { setValue, placeholder, value } = useBoundProp(import_editor_props64.escapedHtmlPropTypeUtil);
|
|
8459
|
+
const { value: rawValue } = usePropKeyContext();
|
|
8460
|
+
const content = value ?? extractInlineHtmlContent(rawValue);
|
|
8461
|
+
const [editor, setEditor] = (0, import_react71.useState)(null);
|
|
8462
|
+
const handleChange = (0, import_react71.useCallback)(
|
|
8463
|
+
(newValue) => {
|
|
8464
|
+
const html = newValue ?? "";
|
|
8465
|
+
setValue(html);
|
|
8466
|
+
},
|
|
8467
|
+
[setValue]
|
|
8468
|
+
);
|
|
8469
|
+
return /* @__PURE__ */ React117.createElement(ControlActions, null, /* @__PURE__ */ React117.createElement(import_ui101.Box, { sx: { position: "relative" } }, editor && editor.isEditable && /* @__PURE__ */ React117.createElement(
|
|
8470
|
+
InlineEditorToolbar,
|
|
8471
|
+
{
|
|
8472
|
+
editor,
|
|
8473
|
+
elementId,
|
|
8474
|
+
sx: {
|
|
8475
|
+
boxShadow: "none",
|
|
8476
|
+
border: "1px solid",
|
|
8477
|
+
borderColor: "grey.200",
|
|
8478
|
+
mb: 0.5
|
|
8479
|
+
},
|
|
8480
|
+
inControlPanel: true
|
|
8481
|
+
}
|
|
8482
|
+
), /* @__PURE__ */ React117.createElement(
|
|
8483
|
+
import_ui101.Box,
|
|
8484
|
+
{
|
|
8485
|
+
sx: {
|
|
8486
|
+
p: 0.8,
|
|
8487
|
+
border: "1px solid",
|
|
8488
|
+
borderColor: "grey.200",
|
|
8489
|
+
borderRadius: "8px",
|
|
8490
|
+
transition: "border-color .2s ease, box-shadow .2s ease",
|
|
8491
|
+
"&:hover": {
|
|
8492
|
+
borderColor: "black"
|
|
8493
|
+
},
|
|
8494
|
+
"&:focus-within": {
|
|
8495
|
+
borderColor: "black",
|
|
8496
|
+
boxShadow: "0 0 0 1px black"
|
|
8497
|
+
},
|
|
8498
|
+
"& .ProseMirror:focus": {
|
|
8499
|
+
outline: "none"
|
|
8500
|
+
},
|
|
8501
|
+
"& .ProseMirror": {
|
|
8502
|
+
minHeight: "100px",
|
|
8503
|
+
fontSize: "12px",
|
|
8504
|
+
"& a": {
|
|
8505
|
+
color: "inherit"
|
|
8207
8506
|
},
|
|
8208
|
-
".
|
|
8209
|
-
|
|
8507
|
+
"& .elementor-inline-editor-reset": {
|
|
8508
|
+
margin: 0,
|
|
8509
|
+
padding: 0
|
|
8210
8510
|
},
|
|
8211
|
-
|
|
8511
|
+
"&.is-empty::before": {
|
|
8512
|
+
content: "attr(data-placeholder)",
|
|
8513
|
+
color: "text.tertiary",
|
|
8514
|
+
pointerEvents: "none",
|
|
8515
|
+
position: "absolute",
|
|
8516
|
+
opacity: 0.6
|
|
8517
|
+
}
|
|
8518
|
+
},
|
|
8519
|
+
".strip-styles *": {
|
|
8520
|
+
all: "unset"
|
|
8212
8521
|
},
|
|
8213
|
-
...
|
|
8214
|
-
...props
|
|
8522
|
+
...sx
|
|
8215
8523
|
},
|
|
8216
|
-
|
|
8217
|
-
|
|
8218
|
-
|
|
8219
|
-
|
|
8524
|
+
...attributes,
|
|
8525
|
+
...props
|
|
8526
|
+
},
|
|
8527
|
+
/* @__PURE__ */ React117.createElement(
|
|
8528
|
+
InlineEditor,
|
|
8529
|
+
{
|
|
8530
|
+
value: content,
|
|
8531
|
+
setValue: handleChange,
|
|
8532
|
+
placeholder: placeholder ?? null,
|
|
8533
|
+
onEditorCreate: setEditor,
|
|
8534
|
+
onEditorDestroy: () => setEditor(null),
|
|
8535
|
+
sx: {
|
|
8536
|
+
paddingBlockStart: 5
|
|
8537
|
+
}
|
|
8538
|
+
}
|
|
8539
|
+
)
|
|
8540
|
+
)));
|
|
8541
|
+
});
|
|
8220
8542
|
|
|
8221
8543
|
// src/controls/email-form-action-control/index.tsx
|
|
8222
|
-
var
|
|
8544
|
+
var React121 = __toESM(require("react"));
|
|
8223
8545
|
var import_editor_props67 = require("@elementor/editor-props");
|
|
8224
8546
|
var import_editor_ui16 = require("@elementor/editor-ui");
|
|
8225
|
-
var
|
|
8226
|
-
var
|
|
8547
|
+
var import_ui105 = require("@elementor/ui");
|
|
8548
|
+
var import_i18n60 = require("@wordpress/i18n");
|
|
8227
8549
|
|
|
8228
8550
|
// src/controls/email-form-action-control/fields.tsx
|
|
8229
|
-
var
|
|
8551
|
+
var React120 = __toESM(require("react"));
|
|
8230
8552
|
var import_editor_ui15 = require("@elementor/editor-ui");
|
|
8231
|
-
var
|
|
8232
|
-
var
|
|
8553
|
+
var import_ui104 = require("@elementor/ui");
|
|
8554
|
+
var import_i18n59 = require("@wordpress/i18n");
|
|
8233
8555
|
|
|
8234
8556
|
// src/hooks/use-form-field-suggestions.ts
|
|
8235
|
-
var
|
|
8557
|
+
var import_editor_elements8 = require("@elementor/editor-elements");
|
|
8236
8558
|
var import_editor_props65 = require("@elementor/editor-props");
|
|
8237
8559
|
var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
|
|
8238
8560
|
var FORM_FIELD_WIDGET_TYPES = [
|
|
@@ -8257,14 +8579,14 @@ function getSettingWithDefault(child, widgetType, key) {
|
|
|
8257
8579
|
if (fromGet !== null && fromGet !== void 0) {
|
|
8258
8580
|
return fromGet;
|
|
8259
8581
|
}
|
|
8260
|
-
const schema = (0,
|
|
8582
|
+
const schema = (0, import_editor_elements8.getWidgetsCache)()?.[widgetType]?.atomic_props_schema;
|
|
8261
8583
|
return schema?.[key]?.default ?? null;
|
|
8262
8584
|
}
|
|
8263
8585
|
function getFieldCssId(child, widgetType) {
|
|
8264
8586
|
return extractStringPropValue(getSettingWithDefault(child, widgetType, CSS_ID_PROP_KEY));
|
|
8265
8587
|
}
|
|
8266
8588
|
function getFormContainer(elementId) {
|
|
8267
|
-
let container = (0,
|
|
8589
|
+
let container = (0, import_editor_elements8.getContainer)(elementId);
|
|
8268
8590
|
while (container) {
|
|
8269
8591
|
if (container.model.get("elType") === FORM_ELEMENT_TYPE) {
|
|
8270
8592
|
return container;
|
|
@@ -8282,7 +8604,7 @@ function useFormFieldSuggestions(options) {
|
|
|
8282
8604
|
(0, import_editor_v1_adapters2.commandEndEvent)("document/elements/set-settings")
|
|
8283
8605
|
],
|
|
8284
8606
|
() => {
|
|
8285
|
-
const selectedElements = (0,
|
|
8607
|
+
const selectedElements = (0, import_editor_elements8.getSelectedElements)();
|
|
8286
8608
|
const selectedElement = selectedElements[0];
|
|
8287
8609
|
if (!selectedElement) {
|
|
8288
8610
|
return [];
|
|
@@ -8318,10 +8640,10 @@ function useFormFieldSuggestions(options) {
|
|
|
8318
8640
|
}
|
|
8319
8641
|
|
|
8320
8642
|
// src/controls/email-form-action-control/email-chips-field.tsx
|
|
8321
|
-
var
|
|
8322
|
-
var
|
|
8643
|
+
var React118 = __toESM(require("react"));
|
|
8644
|
+
var import_react72 = require("react");
|
|
8323
8645
|
var import_editor_props66 = require("@elementor/editor-props");
|
|
8324
|
-
var
|
|
8646
|
+
var import_ui102 = require("@elementor/ui");
|
|
8325
8647
|
|
|
8326
8648
|
// src/controls/email-form-action-control/utils.ts
|
|
8327
8649
|
var import_schema = require("@elementor/schema");
|
|
@@ -8357,10 +8679,10 @@ function resolveMention(raw, suggestions) {
|
|
|
8357
8679
|
}
|
|
8358
8680
|
var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
|
|
8359
8681
|
const { value, setValue, disabled } = useBoundProp(import_editor_props66.stringArrayPropTypeUtil);
|
|
8360
|
-
const [inputValue, setInputValue] = (0,
|
|
8682
|
+
const [inputValue, setInputValue] = (0, import_react72.useState)("");
|
|
8361
8683
|
const items2 = value || [];
|
|
8362
8684
|
const selectedValues = items2.map((item) => import_editor_props66.stringPropTypeUtil.extract(item)).filter((val) => val !== null);
|
|
8363
|
-
const suggestionOptions = (0,
|
|
8685
|
+
const suggestionOptions = (0, import_react72.useMemo)(
|
|
8364
8686
|
() => suggestions.map((suggestion) => `[${suggestion.value}]`),
|
|
8365
8687
|
[suggestions]
|
|
8366
8688
|
);
|
|
@@ -8395,8 +8717,8 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
|
|
|
8395
8717
|
tryAddChip(inputValue);
|
|
8396
8718
|
}
|
|
8397
8719
|
};
|
|
8398
|
-
return /* @__PURE__ */
|
|
8399
|
-
|
|
8720
|
+
return /* @__PURE__ */ React118.createElement(ControlActions, null, /* @__PURE__ */ React118.createElement(
|
|
8721
|
+
import_ui102.Autocomplete,
|
|
8400
8722
|
{
|
|
8401
8723
|
fullWidth: true,
|
|
8402
8724
|
multiple: true,
|
|
@@ -8420,99 +8742,99 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
|
|
|
8420
8742
|
onBlur: handleBlur,
|
|
8421
8743
|
getOptionLabel: (option) => option,
|
|
8422
8744
|
isOptionEqualToValue: (option, val) => option === val,
|
|
8423
|
-
renderInput: (params) => /* @__PURE__ */
|
|
8424
|
-
renderTags: (tagValues, getTagProps) => /* @__PURE__ */
|
|
8745
|
+
renderInput: (params) => /* @__PURE__ */ React118.createElement(import_ui102.TextField, { ...params, placeholder, onKeyDown: handleKeyDown }),
|
|
8746
|
+
renderTags: (tagValues, getTagProps) => /* @__PURE__ */ React118.createElement(ChipsList, { getLabel: (option) => option, getTagProps, values: tagValues })
|
|
8425
8747
|
}
|
|
8426
8748
|
));
|
|
8427
8749
|
});
|
|
8428
|
-
var EmailChipsField = ({ fieldLabel, placeholder, suggestions }) => /* @__PURE__ */
|
|
8750
|
+
var EmailChipsField = ({ fieldLabel, placeholder, suggestions }) => /* @__PURE__ */ React118.createElement(import_ui102.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React118.createElement(import_ui102.Grid, { item: true }, /* @__PURE__ */ React118.createElement(ControlFormLabel, null, fieldLabel)), /* @__PURE__ */ React118.createElement(import_ui102.Grid, { item: true }, /* @__PURE__ */ React118.createElement(EmailChipsControl, { placeholder, suggestions })));
|
|
8429
8751
|
|
|
8430
8752
|
// src/controls/email-form-action-control/email-field.tsx
|
|
8431
|
-
var
|
|
8432
|
-
var
|
|
8433
|
-
var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */
|
|
8753
|
+
var React119 = __toESM(require("react"));
|
|
8754
|
+
var import_ui103 = require("@elementor/ui");
|
|
8755
|
+
var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */ React119.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React119.createElement(import_ui103.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React119.createElement(import_ui103.Grid, { item: true }, /* @__PURE__ */ React119.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React119.createElement(import_ui103.Grid, { item: true }, /* @__PURE__ */ React119.createElement(TextControl, { placeholder }))));
|
|
8434
8756
|
|
|
8435
8757
|
// src/controls/email-form-action-control/fields.tsx
|
|
8436
8758
|
var SendToField = ({ placeholder }) => {
|
|
8437
8759
|
const suggestions = useFormFieldSuggestions({ inputType: "email" });
|
|
8438
|
-
return /* @__PURE__ */
|
|
8760
|
+
return /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "to" }, /* @__PURE__ */ React120.createElement(import_ui104.Stack, { gap: 0.5 }, /* @__PURE__ */ React120.createElement(
|
|
8439
8761
|
EmailChipsField,
|
|
8440
8762
|
{
|
|
8441
|
-
fieldLabel: (0,
|
|
8763
|
+
fieldLabel: (0, import_i18n59.__)("Send to", "elementor"),
|
|
8442
8764
|
placeholder,
|
|
8443
8765
|
suggestions
|
|
8444
8766
|
}
|
|
8445
|
-
), shouldShowMentionsInfo() && /* @__PURE__ */
|
|
8767
|
+
), shouldShowMentionsInfo() && /* @__PURE__ */ React120.createElement(import_editor_ui15.InfoAlert, null, (0, import_i18n59.__)("Type @ or an email field name to insert its submitted value.", "elementor"))));
|
|
8446
8768
|
};
|
|
8447
|
-
var SubjectField = () => /* @__PURE__ */
|
|
8769
|
+
var SubjectField = () => /* @__PURE__ */ React120.createElement(
|
|
8448
8770
|
EmailField,
|
|
8449
8771
|
{
|
|
8450
8772
|
bind: "subject",
|
|
8451
|
-
label: (0,
|
|
8452
|
-
placeholder: (0,
|
|
8773
|
+
label: (0, import_i18n59.__)("Email subject", "elementor"),
|
|
8774
|
+
placeholder: (0, import_i18n59.__)("New form submission", "elementor")
|
|
8453
8775
|
}
|
|
8454
8776
|
);
|
|
8455
8777
|
var MessageField = () => {
|
|
8456
8778
|
const suggestions = useFormFieldSuggestions();
|
|
8457
|
-
return /* @__PURE__ */
|
|
8779
|
+
return /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "message" }, /* @__PURE__ */ React120.createElement(import_ui104.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React120.createElement(import_ui104.Grid, { item: true }, /* @__PURE__ */ React120.createElement(ControlFormLabel, null, (0, import_i18n59.__)("Message", "elementor"))), /* @__PURE__ */ React120.createElement(import_ui104.Grid, { item: true }, /* @__PURE__ */ React120.createElement(MentionTextAreaControl, { suggestions })), /* @__PURE__ */ React120.createElement(import_ui104.Grid, { item: true }, /* @__PURE__ */ React120.createElement(import_editor_ui15.InfoAlert, null, shouldShowMentionsInfo() ? (0, import_i18n59.__)(
|
|
8458
8780
|
"[all-fields] shortcode sends all fields. Type @ to insert specific fields and customize your message.",
|
|
8459
8781
|
"elementor"
|
|
8460
|
-
) : (0,
|
|
8782
|
+
) : (0, import_i18n59.__)("[all-fields] shortcode sends all fields.", "elementor")))));
|
|
8461
8783
|
};
|
|
8462
|
-
var FromEmailField = () => /* @__PURE__ */
|
|
8784
|
+
var FromEmailField = () => /* @__PURE__ */ React120.createElement(
|
|
8463
8785
|
EmailField,
|
|
8464
8786
|
{
|
|
8465
8787
|
bind: "from",
|
|
8466
|
-
label: (0,
|
|
8467
|
-
placeholder: (0,
|
|
8788
|
+
label: (0, import_i18n59.__)("From email", "elementor"),
|
|
8789
|
+
placeholder: (0, import_i18n59.__)("What email should appear as the sender?", "elementor")
|
|
8468
8790
|
}
|
|
8469
8791
|
);
|
|
8470
|
-
var FromNameField = () => /* @__PURE__ */
|
|
8792
|
+
var FromNameField = () => /* @__PURE__ */ React120.createElement(
|
|
8471
8793
|
EmailField,
|
|
8472
8794
|
{
|
|
8473
8795
|
bind: "from-name",
|
|
8474
|
-
label: (0,
|
|
8475
|
-
placeholder: (0,
|
|
8796
|
+
label: (0, import_i18n59.__)("From name", "elementor"),
|
|
8797
|
+
placeholder: (0, import_i18n59.__)("What name should appear as the sender?", "elementor")
|
|
8476
8798
|
}
|
|
8477
8799
|
);
|
|
8478
8800
|
var ReplyToField = () => {
|
|
8479
8801
|
const emailSuggestions = useFormFieldSuggestions({ inputType: "email" });
|
|
8480
|
-
return /* @__PURE__ */
|
|
8802
|
+
return /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "reply-to" }, /* @__PURE__ */ React120.createElement(import_ui104.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React120.createElement(import_ui104.Grid, { item: true }, /* @__PURE__ */ React120.createElement(ControlFormLabel, null, (0, import_i18n59.__)("Reply-to", "elementor"))), /* @__PURE__ */ React120.createElement(import_ui104.Grid, { item: true }, /* @__PURE__ */ React120.createElement(
|
|
8481
8803
|
MentionTextAreaControl,
|
|
8482
8804
|
{
|
|
8483
8805
|
suggestions: emailSuggestions,
|
|
8484
8806
|
rows: 1,
|
|
8485
8807
|
triggerPosition: "start",
|
|
8486
|
-
placeholder: (0,
|
|
8808
|
+
placeholder: (0, import_i18n59.__)("You can type @ to insert an email field", "elementor")
|
|
8487
8809
|
}
|
|
8488
8810
|
))));
|
|
8489
8811
|
};
|
|
8490
8812
|
var CcField = () => {
|
|
8491
8813
|
const suggestions = useFormFieldSuggestions({ inputType: "email" });
|
|
8492
|
-
return /* @__PURE__ */
|
|
8814
|
+
return /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "cc" }, /* @__PURE__ */ React120.createElement(EmailChipsField, { fieldLabel: (0, import_i18n59.__)("Cc", "elementor"), suggestions }));
|
|
8493
8815
|
};
|
|
8494
8816
|
var BccField = () => {
|
|
8495
8817
|
const suggestions = useFormFieldSuggestions({ inputType: "email" });
|
|
8496
|
-
return /* @__PURE__ */
|
|
8818
|
+
return /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "bcc" }, /* @__PURE__ */ React120.createElement(EmailChipsField, { fieldLabel: (0, import_i18n59.__)("Bcc", "elementor"), suggestions }));
|
|
8497
8819
|
};
|
|
8498
|
-
var MetaDataField = () => /* @__PURE__ */
|
|
8820
|
+
var MetaDataField = () => /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React120.createElement(import_ui104.Stack, { gap: 0.5 }, /* @__PURE__ */ React120.createElement(ControlFormLabel, null, (0, import_i18n59.__)("Metadata", "elementor")), /* @__PURE__ */ React120.createElement(
|
|
8499
8821
|
ChipsControl,
|
|
8500
8822
|
{
|
|
8501
8823
|
options: [
|
|
8502
|
-
{ label: (0,
|
|
8503
|
-
{ label: (0,
|
|
8504
|
-
{ label: (0,
|
|
8505
|
-
{ label: (0,
|
|
8506
|
-
{ label: (0,
|
|
8824
|
+
{ label: (0, import_i18n59.__)("Date", "elementor"), value: "date" },
|
|
8825
|
+
{ label: (0, import_i18n59.__)("Time", "elementor"), value: "time" },
|
|
8826
|
+
{ label: (0, import_i18n59.__)("Page URL", "elementor"), value: "page-url" },
|
|
8827
|
+
{ label: (0, import_i18n59.__)("User agent", "elementor"), value: "user-agent" },
|
|
8828
|
+
{ label: (0, import_i18n59.__)("Credit", "elementor"), value: "credit" }
|
|
8507
8829
|
]
|
|
8508
8830
|
}
|
|
8509
8831
|
)));
|
|
8510
|
-
var SendAsField = () => /* @__PURE__ */
|
|
8832
|
+
var SendAsField = () => /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "send-as" }, /* @__PURE__ */ React120.createElement(import_ui104.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React120.createElement(import_ui104.Grid, { item: true }, /* @__PURE__ */ React120.createElement(ControlFormLabel, null, (0, import_i18n59.__)("Send as", "elementor"))), /* @__PURE__ */ React120.createElement(import_ui104.Grid, { item: true }, /* @__PURE__ */ React120.createElement(
|
|
8511
8833
|
SelectControl,
|
|
8512
8834
|
{
|
|
8513
8835
|
options: [
|
|
8514
|
-
{ label: (0,
|
|
8515
|
-
{ label: (0,
|
|
8836
|
+
{ label: (0, import_i18n59.__)("HTML", "elementor"), value: "html" },
|
|
8837
|
+
{ label: (0, import_i18n59.__)("Plain Text", "elementor"), value: "plain" }
|
|
8516
8838
|
]
|
|
8517
8839
|
}
|
|
8518
8840
|
))));
|
|
@@ -8521,27 +8843,27 @@ var SendAsField = () => /* @__PURE__ */ React118.createElement(PropKeyProvider,
|
|
|
8521
8843
|
var EmailFormActionControl = createControl(
|
|
8522
8844
|
({ toPlaceholder, label }) => {
|
|
8523
8845
|
const { value, setValue, ...propContext } = useBoundProp(import_editor_props67.emailsPropTypeUtil);
|
|
8524
|
-
return /* @__PURE__ */
|
|
8846
|
+
return /* @__PURE__ */ React121.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React121.createElement(import_ui105.Stack, { gap: 2 }, /* @__PURE__ */ React121.createElement(ControlLabel, null, label ? label + " " + (0, import_i18n60.__)("settings", "elementor") : (0, import_i18n60.__)("Email settings", "elementor")), /* @__PURE__ */ React121.createElement(SendToField, { placeholder: toPlaceholder }), /* @__PURE__ */ React121.createElement(SubjectField, null), /* @__PURE__ */ React121.createElement(MessageField, null), /* @__PURE__ */ React121.createElement(FromEmailField, null), /* @__PURE__ */ React121.createElement(AdvancedSettings, null)));
|
|
8525
8847
|
}
|
|
8526
8848
|
);
|
|
8527
|
-
var AdvancedSettings = () => /* @__PURE__ */
|
|
8849
|
+
var AdvancedSettings = () => /* @__PURE__ */ React121.createElement(import_editor_ui16.CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React121.createElement(import_ui105.Box, { sx: { pt: 2 } }, /* @__PURE__ */ React121.createElement(import_ui105.Stack, { gap: 2 }, /* @__PURE__ */ React121.createElement(FromNameField, null), /* @__PURE__ */ React121.createElement(ReplyToField, null), /* @__PURE__ */ React121.createElement(CcField, null), /* @__PURE__ */ React121.createElement(BccField, null), /* @__PURE__ */ React121.createElement(import_ui105.Divider, null), /* @__PURE__ */ React121.createElement(MetaDataField, null), /* @__PURE__ */ React121.createElement(SendAsField, null))));
|
|
8528
8850
|
|
|
8529
8851
|
// src/controls/attachment-type-control.tsx
|
|
8530
|
-
var
|
|
8852
|
+
var React122 = __toESM(require("react"));
|
|
8531
8853
|
var import_editor_ui17 = require("@elementor/editor-ui");
|
|
8532
|
-
var
|
|
8533
|
-
var
|
|
8854
|
+
var import_ui106 = require("@elementor/ui");
|
|
8855
|
+
var import_i18n61 = require("@wordpress/i18n");
|
|
8534
8856
|
var AttachmentTypeControl = createControl(({ label, options }) => {
|
|
8535
|
-
return /* @__PURE__ */
|
|
8857
|
+
return /* @__PURE__ */ React122.createElement(import_ui106.Grid, { container: true, direction: "column", gap: 1 }, label && /* @__PURE__ */ React122.createElement(import_ui106.Grid, { item: true }, /* @__PURE__ */ React122.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React122.createElement(import_ui106.Grid, { item: true }, /* @__PURE__ */ React122.createElement(SelectControl, { options })), /* @__PURE__ */ React122.createElement(import_ui106.Grid, { item: true }, /* @__PURE__ */ React122.createElement(import_editor_ui17.InfoAlert, null, (0, import_i18n61.__)(
|
|
8536
8858
|
"Linked uploads are saved to the server. Direct attachments will not appear under Submissions.",
|
|
8537
8859
|
"elementor"
|
|
8538
8860
|
))));
|
|
8539
8861
|
});
|
|
8540
8862
|
|
|
8541
8863
|
// src/controls/grid-span-control.tsx
|
|
8542
|
-
var
|
|
8864
|
+
var React123 = __toESM(require("react"));
|
|
8543
8865
|
var import_editor_props68 = require("@elementor/editor-props");
|
|
8544
|
-
var
|
|
8866
|
+
var import_ui107 = require("@elementor/ui");
|
|
8545
8867
|
var GridSpanControl = createControl(
|
|
8546
8868
|
({
|
|
8547
8869
|
placeholder: propPlaceholder,
|
|
@@ -8558,8 +8880,8 @@ var GridSpanControl = createControl(
|
|
|
8558
8880
|
setValue(next === "" ? null : next);
|
|
8559
8881
|
};
|
|
8560
8882
|
const placeholder = propPlaceholder ?? boundPlaceholder ?? `e.g: 'span 2' or '1 / 3'`;
|
|
8561
|
-
return /* @__PURE__ */
|
|
8562
|
-
|
|
8883
|
+
return /* @__PURE__ */ React123.createElement(ControlActions, null, /* @__PURE__ */ React123.createElement(
|
|
8884
|
+
import_ui107.TextField,
|
|
8563
8885
|
{
|
|
8564
8886
|
size: "tiny",
|
|
8565
8887
|
fullWidth: true,
|
|
@@ -8578,26 +8900,26 @@ var GridSpanControl = createControl(
|
|
|
8578
8900
|
}
|
|
8579
8901
|
);
|
|
8580
8902
|
|
|
8581
|
-
// src/components/promotions/display-conditions-control.tsx
|
|
8582
|
-
var
|
|
8583
|
-
var
|
|
8584
|
-
var
|
|
8585
|
-
var
|
|
8586
|
-
var
|
|
8903
|
+
// src/components/promotions/display-conditions-control.tsx
|
|
8904
|
+
var React125 = __toESM(require("react"));
|
|
8905
|
+
var import_react74 = require("react");
|
|
8906
|
+
var import_icons39 = require("@elementor/icons");
|
|
8907
|
+
var import_ui109 = require("@elementor/ui");
|
|
8908
|
+
var import_i18n62 = require("@wordpress/i18n");
|
|
8587
8909
|
|
|
8588
8910
|
// src/components/promotions/promotion-trigger.tsx
|
|
8589
|
-
var
|
|
8590
|
-
var
|
|
8911
|
+
var React124 = __toESM(require("react"));
|
|
8912
|
+
var import_react73 = require("react");
|
|
8591
8913
|
var import_editor_ui18 = require("@elementor/editor-ui");
|
|
8592
|
-
var
|
|
8914
|
+
var import_ui108 = require("@elementor/ui");
|
|
8593
8915
|
function getV4Promotion(key) {
|
|
8594
8916
|
return window.elementor?.config?.v4Promotions?.[key];
|
|
8595
8917
|
}
|
|
8596
|
-
var PromotionTrigger = (0,
|
|
8918
|
+
var PromotionTrigger = (0, import_react73.forwardRef)(
|
|
8597
8919
|
({ promotionKey, children, trackingData }, ref) => {
|
|
8598
|
-
const [isOpen, setIsOpen] = (0,
|
|
8920
|
+
const [isOpen, setIsOpen] = (0, import_react73.useState)(false);
|
|
8599
8921
|
const promotion = getV4Promotion(promotionKey);
|
|
8600
|
-
const toggle = (0,
|
|
8922
|
+
const toggle = (0, import_react73.useCallback)(() => {
|
|
8601
8923
|
setIsOpen((prev) => {
|
|
8602
8924
|
if (!prev) {
|
|
8603
8925
|
trackViewPromotion(trackingData);
|
|
@@ -8605,8 +8927,8 @@ var PromotionTrigger = (0, import_react70.forwardRef)(
|
|
|
8605
8927
|
return !prev;
|
|
8606
8928
|
});
|
|
8607
8929
|
}, [trackingData]);
|
|
8608
|
-
(0,
|
|
8609
|
-
return /* @__PURE__ */
|
|
8930
|
+
(0, import_react73.useImperativeHandle)(ref, () => ({ toggle }), [toggle]);
|
|
8931
|
+
return /* @__PURE__ */ React124.createElement(React124.Fragment, null, promotion && /* @__PURE__ */ React124.createElement(
|
|
8610
8932
|
import_editor_ui18.PromotionInfotip,
|
|
8611
8933
|
{
|
|
8612
8934
|
title: promotion.title,
|
|
@@ -8620,8 +8942,8 @@ var PromotionTrigger = (0, import_react70.forwardRef)(
|
|
|
8620
8942
|
},
|
|
8621
8943
|
onCtaClick: () => trackUpgradePromotionClick(trackingData)
|
|
8622
8944
|
},
|
|
8623
|
-
/* @__PURE__ */
|
|
8624
|
-
|
|
8945
|
+
/* @__PURE__ */ React124.createElement(
|
|
8946
|
+
import_ui108.Box,
|
|
8625
8947
|
{
|
|
8626
8948
|
onClick: (e) => {
|
|
8627
8949
|
e.stopPropagation();
|
|
@@ -8629,19 +8951,19 @@ var PromotionTrigger = (0, import_react70.forwardRef)(
|
|
|
8629
8951
|
},
|
|
8630
8952
|
sx: { cursor: "pointer", display: "inline-flex" }
|
|
8631
8953
|
},
|
|
8632
|
-
children ?? /* @__PURE__ */
|
|
8954
|
+
children ?? /* @__PURE__ */ React124.createElement(import_editor_ui18.PromotionChip, null)
|
|
8633
8955
|
)
|
|
8634
8956
|
));
|
|
8635
8957
|
}
|
|
8636
8958
|
);
|
|
8637
8959
|
|
|
8638
8960
|
// src/components/promotions/display-conditions-control.tsx
|
|
8639
|
-
var ARIA_LABEL = (0,
|
|
8961
|
+
var ARIA_LABEL = (0, import_i18n62.__)("Display Conditions", "elementor");
|
|
8640
8962
|
var TRACKING_DATA = { target_name: "display_conditions", location_l2: "general" };
|
|
8641
8963
|
var DisplayConditionsControl = createControl(() => {
|
|
8642
|
-
const triggerRef = (0,
|
|
8643
|
-
return /* @__PURE__ */
|
|
8644
|
-
|
|
8964
|
+
const triggerRef = (0, import_react74.useRef)(null);
|
|
8965
|
+
return /* @__PURE__ */ React125.createElement(
|
|
8966
|
+
import_ui109.Stack,
|
|
8645
8967
|
{
|
|
8646
8968
|
direction: "row",
|
|
8647
8969
|
spacing: 2,
|
|
@@ -8650,9 +8972,9 @@ var DisplayConditionsControl = createControl(() => {
|
|
|
8650
8972
|
alignItems: "center"
|
|
8651
8973
|
}
|
|
8652
8974
|
},
|
|
8653
|
-
/* @__PURE__ */
|
|
8654
|
-
/* @__PURE__ */
|
|
8655
|
-
|
|
8975
|
+
/* @__PURE__ */ React125.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions", trackingData: TRACKING_DATA }),
|
|
8976
|
+
/* @__PURE__ */ React125.createElement(import_ui109.Tooltip, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React125.createElement(
|
|
8977
|
+
import_ui109.IconButton,
|
|
8656
8978
|
{
|
|
8657
8979
|
size: "tiny",
|
|
8658
8980
|
"aria-label": ARIA_LABEL,
|
|
@@ -8664,23 +8986,23 @@ var DisplayConditionsControl = createControl(() => {
|
|
|
8664
8986
|
borderRadius: 1
|
|
8665
8987
|
}
|
|
8666
8988
|
},
|
|
8667
|
-
/* @__PURE__ */
|
|
8989
|
+
/* @__PURE__ */ React125.createElement(import_icons39.SitemapIcon, { fontSize: "tiny", color: "disabled" })
|
|
8668
8990
|
))
|
|
8669
8991
|
);
|
|
8670
8992
|
});
|
|
8671
8993
|
|
|
8672
8994
|
// src/components/promotions/attributes-control.tsx
|
|
8673
|
-
var
|
|
8674
|
-
var
|
|
8675
|
-
var
|
|
8676
|
-
var
|
|
8677
|
-
var
|
|
8678
|
-
var ARIA_LABEL2 = (0,
|
|
8995
|
+
var React126 = __toESM(require("react"));
|
|
8996
|
+
var import_react75 = require("react");
|
|
8997
|
+
var import_icons40 = require("@elementor/icons");
|
|
8998
|
+
var import_ui110 = require("@elementor/ui");
|
|
8999
|
+
var import_i18n63 = require("@wordpress/i18n");
|
|
9000
|
+
var ARIA_LABEL2 = (0, import_i18n63.__)("Attributes", "elementor");
|
|
8679
9001
|
var TRACKING_DATA2 = { target_name: "attributes", location_l2: "general" };
|
|
8680
9002
|
var AttributesControl = createControl(() => {
|
|
8681
|
-
const triggerRef = (0,
|
|
8682
|
-
return /* @__PURE__ */
|
|
8683
|
-
|
|
9003
|
+
const triggerRef = (0, import_react75.useRef)(null);
|
|
9004
|
+
return /* @__PURE__ */ React126.createElement(
|
|
9005
|
+
import_ui110.Stack,
|
|
8684
9006
|
{
|
|
8685
9007
|
direction: "row",
|
|
8686
9008
|
spacing: 2,
|
|
@@ -8689,9 +9011,9 @@ var AttributesControl = createControl(() => {
|
|
|
8689
9011
|
alignItems: "center"
|
|
8690
9012
|
}
|
|
8691
9013
|
},
|
|
8692
|
-
/* @__PURE__ */
|
|
8693
|
-
/* @__PURE__ */
|
|
8694
|
-
|
|
9014
|
+
/* @__PURE__ */ React126.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes", trackingData: TRACKING_DATA2 }),
|
|
9015
|
+
/* @__PURE__ */ React126.createElement(import_ui110.Tooltip, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React126.createElement(
|
|
9016
|
+
import_icons40.PlusIcon,
|
|
8695
9017
|
{
|
|
8696
9018
|
"aria-label": ARIA_LABEL2,
|
|
8697
9019
|
fontSize: "tiny",
|
|
@@ -8704,21 +9026,21 @@ var AttributesControl = createControl(() => {
|
|
|
8704
9026
|
});
|
|
8705
9027
|
|
|
8706
9028
|
// src/components/icon-buttons/clear-icon-button.tsx
|
|
8707
|
-
var
|
|
8708
|
-
var
|
|
8709
|
-
var
|
|
8710
|
-
var CustomIconButton = (0,
|
|
9029
|
+
var React127 = __toESM(require("react"));
|
|
9030
|
+
var import_icons41 = require("@elementor/icons");
|
|
9031
|
+
var import_ui111 = require("@elementor/ui");
|
|
9032
|
+
var CustomIconButton = (0, import_ui111.styled)(import_ui111.IconButton)(({ theme }) => ({
|
|
8711
9033
|
width: theme.spacing(2.5),
|
|
8712
9034
|
height: theme.spacing(2.5)
|
|
8713
9035
|
}));
|
|
8714
|
-
var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */
|
|
9036
|
+
var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React127.createElement(import_ui111.Tooltip, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React127.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React127.createElement(import_icons41.BrushBigIcon, { fontSize: size })));
|
|
8715
9037
|
|
|
8716
9038
|
// src/components/repeater/repeater.tsx
|
|
8717
|
-
var
|
|
8718
|
-
var
|
|
8719
|
-
var
|
|
8720
|
-
var
|
|
8721
|
-
var
|
|
9039
|
+
var React128 = __toESM(require("react"));
|
|
9040
|
+
var import_react76 = require("react");
|
|
9041
|
+
var import_icons42 = require("@elementor/icons");
|
|
9042
|
+
var import_ui112 = require("@elementor/ui");
|
|
9043
|
+
var import_i18n64 = require("@wordpress/i18n");
|
|
8722
9044
|
var SIZE12 = "tiny";
|
|
8723
9045
|
var EMPTY_OPEN_ITEM2 = -1;
|
|
8724
9046
|
var Repeater3 = ({
|
|
@@ -8737,7 +9059,7 @@ var Repeater3 = ({
|
|
|
8737
9059
|
isSortable = true,
|
|
8738
9060
|
adornment = ControlAdornments
|
|
8739
9061
|
}) => {
|
|
8740
|
-
const [openItem, setOpenItem] = (0,
|
|
9062
|
+
const [openItem, setOpenItem] = (0, import_react76.useState)(initialOpenItem);
|
|
8741
9063
|
const uniqueKeys = items2.map(
|
|
8742
9064
|
(item, index) => isSortable && "getId" in itemSettings ? itemSettings.getId({ item, index }) : String(index)
|
|
8743
9065
|
);
|
|
@@ -8800,8 +9122,8 @@ var Repeater3 = ({
|
|
|
8800
9122
|
};
|
|
8801
9123
|
const isButtonDisabled = disabled || disableAddItemButton;
|
|
8802
9124
|
const shouldShowInfotip = isButtonDisabled && addButtonInfotipContent;
|
|
8803
|
-
const addButton = /* @__PURE__ */
|
|
8804
|
-
|
|
9125
|
+
const addButton = /* @__PURE__ */ React128.createElement(
|
|
9126
|
+
import_ui112.IconButton,
|
|
8805
9127
|
{
|
|
8806
9128
|
size: SIZE12,
|
|
8807
9129
|
sx: {
|
|
@@ -8809,32 +9131,32 @@ var Repeater3 = ({
|
|
|
8809
9131
|
},
|
|
8810
9132
|
disabled: isButtonDisabled,
|
|
8811
9133
|
onClick: addRepeaterItem,
|
|
8812
|
-
"aria-label": (0,
|
|
9134
|
+
"aria-label": (0, import_i18n64.__)("Add item", "elementor")
|
|
8813
9135
|
},
|
|
8814
|
-
/* @__PURE__ */
|
|
9136
|
+
/* @__PURE__ */ React128.createElement(import_icons42.PlusIcon, { fontSize: SIZE12 })
|
|
8815
9137
|
);
|
|
8816
|
-
return /* @__PURE__ */
|
|
8817
|
-
|
|
9138
|
+
return /* @__PURE__ */ React128.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React128.createElement(RepeaterHeader, { label, adornment }, shouldShowInfotip ? /* @__PURE__ */ React128.createElement(
|
|
9139
|
+
import_ui112.Infotip,
|
|
8818
9140
|
{
|
|
8819
9141
|
placement: "right",
|
|
8820
9142
|
content: addButtonInfotipContent,
|
|
8821
9143
|
color: "secondary",
|
|
8822
9144
|
slotProps: { popper: { sx: { width: 300 } } }
|
|
8823
9145
|
},
|
|
8824
|
-
/* @__PURE__ */
|
|
8825
|
-
) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */
|
|
9146
|
+
/* @__PURE__ */ React128.createElement(import_ui112.Box, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
|
|
9147
|
+
) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React128.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
|
|
8826
9148
|
const index = uniqueKeys.indexOf(key);
|
|
8827
9149
|
const value = items2[index];
|
|
8828
9150
|
if (!value) {
|
|
8829
9151
|
return null;
|
|
8830
9152
|
}
|
|
8831
|
-
return /* @__PURE__ */
|
|
9153
|
+
return /* @__PURE__ */ React128.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React128.createElement(
|
|
8832
9154
|
RepeaterItem,
|
|
8833
9155
|
{
|
|
8834
9156
|
disabled,
|
|
8835
9157
|
propDisabled: value?.disabled,
|
|
8836
|
-
label: /* @__PURE__ */
|
|
8837
|
-
startIcon: /* @__PURE__ */
|
|
9158
|
+
label: /* @__PURE__ */ React128.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React128.createElement(itemSettings.Label, { value, index })),
|
|
9159
|
+
startIcon: /* @__PURE__ */ React128.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React128.createElement(itemSettings.Icon, { value })),
|
|
8838
9160
|
removeItem: () => removeRepeaterItem(index),
|
|
8839
9161
|
duplicateItem: () => duplicateRepeaterItem(index),
|
|
8840
9162
|
toggleDisableItem: () => toggleDisableRepeaterItem(index),
|
|
@@ -8848,7 +9170,7 @@ var Repeater3 = ({
|
|
|
8848
9170
|
actions: itemSettings.actions,
|
|
8849
9171
|
value
|
|
8850
9172
|
},
|
|
8851
|
-
(props) => /* @__PURE__ */
|
|
9173
|
+
(props) => /* @__PURE__ */ React128.createElement(
|
|
8852
9174
|
itemSettings.Content,
|
|
8853
9175
|
{
|
|
8854
9176
|
...props,
|
|
@@ -8888,18 +9210,18 @@ var RepeaterItem = ({
|
|
|
8888
9210
|
},
|
|
8889
9211
|
wrappedOnPopoverClose
|
|
8890
9212
|
);
|
|
8891
|
-
const triggerProps = (0,
|
|
9213
|
+
const triggerProps = (0, import_ui112.bindTrigger)(popoverState);
|
|
8892
9214
|
usePopoverDismiss({ isOpen: popoverState.isOpen, onClose: popoverProps.onClose });
|
|
8893
|
-
const duplicateLabel = (0,
|
|
8894
|
-
const toggleLabel = propDisabled ? (0,
|
|
8895
|
-
const removeLabel = (0,
|
|
8896
|
-
return /* @__PURE__ */
|
|
9215
|
+
const duplicateLabel = (0, import_i18n64.__)("Duplicate", "elementor");
|
|
9216
|
+
const toggleLabel = propDisabled ? (0, import_i18n64.__)("Show", "elementor") : (0, import_i18n64.__)("Hide", "elementor");
|
|
9217
|
+
const removeLabel = (0, import_i18n64.__)("Remove", "elementor");
|
|
9218
|
+
return /* @__PURE__ */ React128.createElement(import_ui112.Box, { sx: { display: "contents" } }, /* @__PURE__ */ React128.createElement(
|
|
8897
9219
|
RepeaterTag,
|
|
8898
9220
|
{
|
|
8899
9221
|
disabled,
|
|
8900
9222
|
label,
|
|
8901
9223
|
ref: setRef,
|
|
8902
|
-
"aria-label": (0,
|
|
9224
|
+
"aria-label": (0, import_i18n64.__)("Open item", "elementor"),
|
|
8903
9225
|
...triggerProps,
|
|
8904
9226
|
onClick: (e) => {
|
|
8905
9227
|
triggerProps.onClick(e);
|
|
@@ -8908,15 +9230,15 @@ var RepeaterItem = ({
|
|
|
8908
9230
|
}
|
|
8909
9231
|
},
|
|
8910
9232
|
startIcon,
|
|
8911
|
-
actions: /* @__PURE__ */
|
|
9233
|
+
actions: /* @__PURE__ */ React128.createElement(React128.Fragment, null, showDuplicate && /* @__PURE__ */ React128.createElement(import_ui112.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React128.createElement(import_ui112.IconButton, { size: SIZE12, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React128.createElement(import_icons42.CopyIcon, { fontSize: SIZE12 }))), showToggle && /* @__PURE__ */ React128.createElement(import_ui112.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React128.createElement(import_ui112.IconButton, { size: SIZE12, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React128.createElement(import_icons42.EyeOffIcon, { fontSize: SIZE12 }) : /* @__PURE__ */ React128.createElement(import_icons42.EyeIcon, { fontSize: SIZE12 }))), actions?.(value), showRemove && /* @__PURE__ */ React128.createElement(import_ui112.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React128.createElement(import_ui112.IconButton, { size: SIZE12, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React128.createElement(import_icons42.XIcon, { fontSize: SIZE12 }))))
|
|
8912
9234
|
}
|
|
8913
|
-
), /* @__PURE__ */
|
|
9235
|
+
), /* @__PURE__ */ React128.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React128.createElement(import_ui112.Box, null, children({ anchorEl: ref }))));
|
|
8914
9236
|
};
|
|
8915
9237
|
var usePopover = (openOnMount, onOpen, onPopoverClose) => {
|
|
8916
|
-
const [ref, setRef] = (0,
|
|
8917
|
-
const popoverState = (0,
|
|
8918
|
-
const popoverProps = (0,
|
|
8919
|
-
(0,
|
|
9238
|
+
const [ref, setRef] = (0, import_react76.useState)(null);
|
|
9239
|
+
const popoverState = (0, import_ui112.usePopupState)({ variant: "popover" });
|
|
9240
|
+
const popoverProps = (0, import_ui112.bindPopover)(popoverState);
|
|
9241
|
+
(0, import_react76.useEffect)(() => {
|
|
8920
9242
|
if (openOnMount && ref) {
|
|
8921
9243
|
popoverState.open(ref);
|
|
8922
9244
|
onOpen?.();
|
|
@@ -8934,276 +9256,6 @@ var usePopover = (openOnMount, onOpen, onPopoverClose) => {
|
|
|
8934
9256
|
};
|
|
8935
9257
|
};
|
|
8936
9258
|
|
|
8937
|
-
// src/components/inline-editor-toolbar.tsx
|
|
8938
|
-
var React128 = __toESM(require("react"));
|
|
8939
|
-
var import_react75 = require("react");
|
|
8940
|
-
var import_editor_elements8 = require("@elementor/editor-elements");
|
|
8941
|
-
var import_icons42 = require("@elementor/icons");
|
|
8942
|
-
var import_ui112 = require("@elementor/ui");
|
|
8943
|
-
var import_react76 = require("@tiptap/react");
|
|
8944
|
-
var import_i18n64 = require("@wordpress/i18n");
|
|
8945
|
-
|
|
8946
|
-
// src/components/url-popover.tsx
|
|
8947
|
-
var React127 = __toESM(require("react"));
|
|
8948
|
-
var import_react74 = require("react");
|
|
8949
|
-
var import_icons41 = require("@elementor/icons");
|
|
8950
|
-
var import_ui111 = require("@elementor/ui");
|
|
8951
|
-
var import_i18n63 = require("@wordpress/i18n");
|
|
8952
|
-
var UrlPopover = ({
|
|
8953
|
-
popupState,
|
|
8954
|
-
restoreValue,
|
|
8955
|
-
anchorRef,
|
|
8956
|
-
value,
|
|
8957
|
-
onChange,
|
|
8958
|
-
openInNewTab,
|
|
8959
|
-
onToggleNewTab
|
|
8960
|
-
}) => {
|
|
8961
|
-
const inputRef = (0, import_react74.useRef)(null);
|
|
8962
|
-
(0, import_react74.useEffect)(() => {
|
|
8963
|
-
if (popupState.isOpen) {
|
|
8964
|
-
requestAnimationFrame(() => inputRef.current?.focus());
|
|
8965
|
-
}
|
|
8966
|
-
}, [popupState.isOpen]);
|
|
8967
|
-
const handleClose = () => {
|
|
8968
|
-
restoreValue();
|
|
8969
|
-
popupState.close();
|
|
8970
|
-
};
|
|
8971
|
-
return /* @__PURE__ */ React127.createElement(
|
|
8972
|
-
import_ui111.Popover,
|
|
8973
|
-
{
|
|
8974
|
-
slotProps: {
|
|
8975
|
-
paper: { sx: { borderRadius: "16px", width: anchorRef.current?.offsetWidth + "px", marginTop: -1 } }
|
|
8976
|
-
},
|
|
8977
|
-
...(0, import_ui111.bindPopover)(popupState),
|
|
8978
|
-
anchorOrigin: { vertical: "top", horizontal: "left" },
|
|
8979
|
-
transformOrigin: { vertical: "top", horizontal: "left" },
|
|
8980
|
-
onClose: handleClose
|
|
8981
|
-
},
|
|
8982
|
-
/* @__PURE__ */ React127.createElement(import_ui111.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React127.createElement(
|
|
8983
|
-
import_ui111.TextField,
|
|
8984
|
-
{
|
|
8985
|
-
value,
|
|
8986
|
-
onChange,
|
|
8987
|
-
size: "tiny",
|
|
8988
|
-
fullWidth: true,
|
|
8989
|
-
placeholder: (0, import_i18n63.__)("Type a URL", "elementor"),
|
|
8990
|
-
inputProps: { ref: inputRef },
|
|
8991
|
-
color: "secondary",
|
|
8992
|
-
InputProps: { sx: { borderRadius: "8px" } },
|
|
8993
|
-
onKeyUp: (event) => event.key === "Enter" && handleClose()
|
|
8994
|
-
}
|
|
8995
|
-
), /* @__PURE__ */ React127.createElement(import_ui111.Tooltip, { title: (0, import_i18n63.__)("Open in a new tab", "elementor") }, /* @__PURE__ */ React127.createElement(
|
|
8996
|
-
import_ui111.ToggleButton,
|
|
8997
|
-
{
|
|
8998
|
-
size: "tiny",
|
|
8999
|
-
value: "newTab",
|
|
9000
|
-
selected: openInNewTab,
|
|
9001
|
-
onClick: onToggleNewTab,
|
|
9002
|
-
"aria-label": (0, import_i18n63.__)("Open in a new tab", "elementor"),
|
|
9003
|
-
sx: { borderRadius: "8px" }
|
|
9004
|
-
},
|
|
9005
|
-
/* @__PURE__ */ React127.createElement(import_icons41.ExternalLinkIcon, { fontSize: "tiny" })
|
|
9006
|
-
)))
|
|
9007
|
-
);
|
|
9008
|
-
};
|
|
9009
|
-
|
|
9010
|
-
// src/components/inline-editor-toolbar.tsx
|
|
9011
|
-
var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
|
|
9012
|
-
const [urlValue, setUrlValue] = (0, import_react75.useState)("");
|
|
9013
|
-
const [openInNewTab, setOpenInNewTab] = (0, import_react75.useState)(false);
|
|
9014
|
-
const toolbarRef = (0, import_react75.useRef)(null);
|
|
9015
|
-
const linkPopupState = (0, import_ui112.usePopupState)({ variant: "popover" });
|
|
9016
|
-
const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
|
|
9017
|
-
const editorState = (0, import_react76.useEditorState)({
|
|
9018
|
-
editor,
|
|
9019
|
-
selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
|
|
9020
|
-
});
|
|
9021
|
-
const formatButtonsList = (0, import_react75.useMemo)(() => {
|
|
9022
|
-
const buttons = Object.values(formatButtons);
|
|
9023
|
-
if (isElementClickable) {
|
|
9024
|
-
return buttons.filter((button) => button.action !== "link");
|
|
9025
|
-
}
|
|
9026
|
-
return buttons;
|
|
9027
|
-
}, [isElementClickable]);
|
|
9028
|
-
const handleLinkClick = () => {
|
|
9029
|
-
const linkAttrs = editor.getAttributes("link");
|
|
9030
|
-
setUrlValue(linkAttrs.href || "");
|
|
9031
|
-
setOpenInNewTab(linkAttrs.target === "_blank");
|
|
9032
|
-
linkPopupState.open(toolbarRef.current);
|
|
9033
|
-
};
|
|
9034
|
-
const handleUrlChange = (event) => {
|
|
9035
|
-
setUrlValue(event.target.value);
|
|
9036
|
-
};
|
|
9037
|
-
const handleToggleNewTab = () => {
|
|
9038
|
-
setOpenInNewTab(!openInNewTab);
|
|
9039
|
-
};
|
|
9040
|
-
const handleUrlSubmit = () => {
|
|
9041
|
-
if (urlValue) {
|
|
9042
|
-
editor.chain().focus().setLink({
|
|
9043
|
-
href: urlValue,
|
|
9044
|
-
target: openInNewTab ? "_blank" : "_self"
|
|
9045
|
-
}).run();
|
|
9046
|
-
} else {
|
|
9047
|
-
editor.chain().focus().unsetLink().run();
|
|
9048
|
-
}
|
|
9049
|
-
if (elementId) {
|
|
9050
|
-
window.dispatchEvent(
|
|
9051
|
-
new CustomEvent("elementor:inline-link-changed", {
|
|
9052
|
-
detail: { elementId }
|
|
9053
|
-
})
|
|
9054
|
-
);
|
|
9055
|
-
}
|
|
9056
|
-
linkPopupState.close();
|
|
9057
|
-
};
|
|
9058
|
-
(0, import_react75.useEffect)(() => {
|
|
9059
|
-
editor?.commands?.focus();
|
|
9060
|
-
}, [editor]);
|
|
9061
|
-
return /* @__PURE__ */ React128.createElement(
|
|
9062
|
-
import_ui112.Box,
|
|
9063
|
-
{
|
|
9064
|
-
ref: toolbarRef,
|
|
9065
|
-
sx: {
|
|
9066
|
-
display: "inline-flex",
|
|
9067
|
-
gap: 0.5,
|
|
9068
|
-
padding: 0.5,
|
|
9069
|
-
borderRadius: "8px",
|
|
9070
|
-
backgroundColor: "background.paper",
|
|
9071
|
-
boxShadow: "0 2px 8px rgba(0, 0, 0, 0.2)",
|
|
9072
|
-
alignItems: "center",
|
|
9073
|
-
visibility: linkPopupState.isOpen ? "hidden" : "visible",
|
|
9074
|
-
pointerEvents: linkPopupState.isOpen ? "none" : "all",
|
|
9075
|
-
...sx
|
|
9076
|
-
}
|
|
9077
|
-
},
|
|
9078
|
-
/* @__PURE__ */ React128.createElement(import_ui112.Tooltip, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React128.createElement(import_ui112.IconButton, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
|
|
9079
|
-
/* @__PURE__ */ React128.createElement(
|
|
9080
|
-
import_ui112.ToggleButtonGroup,
|
|
9081
|
-
{
|
|
9082
|
-
value: editorState,
|
|
9083
|
-
size: "tiny",
|
|
9084
|
-
sx: {
|
|
9085
|
-
display: "flex",
|
|
9086
|
-
gap: 0.5,
|
|
9087
|
-
border: "none",
|
|
9088
|
-
[`& .${import_ui112.toggleButtonGroupClasses.firstButton}, & .${import_ui112.toggleButtonGroupClasses.middleButton}, & .${import_ui112.toggleButtonGroupClasses.lastButton}`]: {
|
|
9089
|
-
borderRadius: "8px",
|
|
9090
|
-
border: "none",
|
|
9091
|
-
marginLeft: 0,
|
|
9092
|
-
"&.Mui-selected": {
|
|
9093
|
-
marginLeft: 0
|
|
9094
|
-
},
|
|
9095
|
-
"& + &.Mui-selected": {
|
|
9096
|
-
marginLeft: 0
|
|
9097
|
-
}
|
|
9098
|
-
}
|
|
9099
|
-
}
|
|
9100
|
-
},
|
|
9101
|
-
formatButtonsList.map((button) => /* @__PURE__ */ React128.createElement(import_ui112.Tooltip, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React128.createElement(
|
|
9102
|
-
import_ui112.ToggleButton,
|
|
9103
|
-
{
|
|
9104
|
-
value: button.action,
|
|
9105
|
-
"aria-label": button.label,
|
|
9106
|
-
size: "tiny",
|
|
9107
|
-
onClick: () => {
|
|
9108
|
-
if (button.action === "link") {
|
|
9109
|
-
handleLinkClick();
|
|
9110
|
-
} else {
|
|
9111
|
-
button.method?.(editor);
|
|
9112
|
-
}
|
|
9113
|
-
editor?.commands?.focus();
|
|
9114
|
-
}
|
|
9115
|
-
},
|
|
9116
|
-
button.icon
|
|
9117
|
-
)))
|
|
9118
|
-
),
|
|
9119
|
-
/* @__PURE__ */ React128.createElement(
|
|
9120
|
-
UrlPopover,
|
|
9121
|
-
{
|
|
9122
|
-
popupState: linkPopupState,
|
|
9123
|
-
anchorRef: toolbarRef,
|
|
9124
|
-
restoreValue: handleUrlSubmit,
|
|
9125
|
-
value: urlValue,
|
|
9126
|
-
onChange: handleUrlChange,
|
|
9127
|
-
openInNewTab,
|
|
9128
|
-
onToggleNewTab: handleToggleNewTab
|
|
9129
|
-
}
|
|
9130
|
-
)
|
|
9131
|
-
);
|
|
9132
|
-
};
|
|
9133
|
-
var checkIfElementIsClickable = (elementId) => {
|
|
9134
|
-
const container = (0, import_editor_elements8.getContainer)(elementId);
|
|
9135
|
-
const type = container?.model.get("widgetType");
|
|
9136
|
-
const isButton = type === "e-button";
|
|
9137
|
-
const hasLink = !!(0, import_editor_elements8.getElementSetting)(elementId, "link")?.value?.destination;
|
|
9138
|
-
return isButton || hasLink;
|
|
9139
|
-
};
|
|
9140
|
-
var toolbarButtons = {
|
|
9141
|
-
clear: {
|
|
9142
|
-
label: (0, import_i18n64.__)("Clear", "elementor"),
|
|
9143
|
-
icon: /* @__PURE__ */ React128.createElement(import_icons42.MinusIcon, { fontSize: "tiny" }),
|
|
9144
|
-
action: "clear",
|
|
9145
|
-
method: (editor) => {
|
|
9146
|
-
editor.chain().focus().clearNodes().unsetAllMarks().run();
|
|
9147
|
-
}
|
|
9148
|
-
},
|
|
9149
|
-
bold: {
|
|
9150
|
-
label: (0, import_i18n64.__)("Bold", "elementor"),
|
|
9151
|
-
icon: /* @__PURE__ */ React128.createElement(import_icons42.BoldIcon, { fontSize: "tiny" }),
|
|
9152
|
-
action: "bold",
|
|
9153
|
-
method: (editor) => {
|
|
9154
|
-
editor.chain().focus().toggleBold().run();
|
|
9155
|
-
}
|
|
9156
|
-
},
|
|
9157
|
-
italic: {
|
|
9158
|
-
label: (0, import_i18n64.__)("Italic", "elementor"),
|
|
9159
|
-
icon: /* @__PURE__ */ React128.createElement(import_icons42.ItalicIcon, { fontSize: "tiny" }),
|
|
9160
|
-
action: "italic",
|
|
9161
|
-
method: (editor) => {
|
|
9162
|
-
editor.chain().focus().toggleItalic().run();
|
|
9163
|
-
}
|
|
9164
|
-
},
|
|
9165
|
-
underline: {
|
|
9166
|
-
label: (0, import_i18n64.__)("Underline", "elementor"),
|
|
9167
|
-
icon: /* @__PURE__ */ React128.createElement(import_icons42.UnderlineIcon, { fontSize: "tiny" }),
|
|
9168
|
-
action: "underline",
|
|
9169
|
-
method: (editor) => {
|
|
9170
|
-
editor.chain().focus().toggleUnderline().run();
|
|
9171
|
-
}
|
|
9172
|
-
},
|
|
9173
|
-
strike: {
|
|
9174
|
-
label: (0, import_i18n64.__)("Strikethrough", "elementor"),
|
|
9175
|
-
icon: /* @__PURE__ */ React128.createElement(import_icons42.StrikethroughIcon, { fontSize: "tiny" }),
|
|
9176
|
-
action: "strike",
|
|
9177
|
-
method: (editor) => {
|
|
9178
|
-
editor.chain().focus().toggleStrike().run();
|
|
9179
|
-
}
|
|
9180
|
-
},
|
|
9181
|
-
superscript: {
|
|
9182
|
-
label: (0, import_i18n64.__)("Superscript", "elementor"),
|
|
9183
|
-
icon: /* @__PURE__ */ React128.createElement(import_icons42.SuperscriptIcon, { fontSize: "tiny" }),
|
|
9184
|
-
action: "superscript",
|
|
9185
|
-
method: (editor) => {
|
|
9186
|
-
editor.chain().focus().toggleSuperscript().run();
|
|
9187
|
-
}
|
|
9188
|
-
},
|
|
9189
|
-
subscript: {
|
|
9190
|
-
label: (0, import_i18n64.__)("Subscript", "elementor"),
|
|
9191
|
-
icon: /* @__PURE__ */ React128.createElement(import_icons42.SubscriptIcon, { fontSize: "tiny" }),
|
|
9192
|
-
action: "subscript",
|
|
9193
|
-
method: (editor) => {
|
|
9194
|
-
editor.chain().focus().toggleSubscript().run();
|
|
9195
|
-
}
|
|
9196
|
-
},
|
|
9197
|
-
link: {
|
|
9198
|
-
label: (0, import_i18n64.__)("Link", "elementor"),
|
|
9199
|
-
icon: /* @__PURE__ */ React128.createElement(import_icons42.LinkIcon, { fontSize: "tiny" }),
|
|
9200
|
-
action: "link",
|
|
9201
|
-
method: null
|
|
9202
|
-
}
|
|
9203
|
-
};
|
|
9204
|
-
var { clear: clearButton, ...formatButtons } = toolbarButtons;
|
|
9205
|
-
var possibleFormats = Object.keys(formatButtons);
|
|
9206
|
-
|
|
9207
9259
|
// src/components/size/unstable-size-field.tsx
|
|
9208
9260
|
var React131 = __toESM(require("react"));
|
|
9209
9261
|
var import_ui114 = require("@elementor/ui");
|