@tarviks/lexical-rich-editor 1.3.1 → 1.3.3

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.
Files changed (7) hide show
  1. package/dist/index.css +90 -2
  2. package/dist/index.css.map +1 -1
  3. package/dist/index.js +432 -377
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +433 -378
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -2503,9 +2503,6 @@ function AutocompletePlugin({
2503
2503
  }, [cancelInflight]);
2504
2504
  return null;
2505
2505
  }
2506
- function clamp2(n, min, max) {
2507
- return Math.max(min, Math.min(max, n));
2508
- }
2509
2506
  function useFloatingPortalContainer(editor) {
2510
2507
  const [container, setContainer] = React9.useState(null);
2511
2508
  React9.useEffect(() => {
@@ -2523,6 +2520,22 @@ function useFloatingPortalContainer(editor) {
2523
2520
  }, [editor]);
2524
2521
  return container;
2525
2522
  }
2523
+ function getFixedPositionOrigin(fromElement) {
2524
+ let node = fromElement.parentElement;
2525
+ while (node && node !== document.body && node !== document.documentElement) {
2526
+ const style = getComputedStyle(node);
2527
+ const createsContainingBlock = style.transform && style.transform !== "none" || style.perspective && style.perspective !== "none" || style.filter && style.filter !== "none" || style.backdropFilter && style.backdropFilter !== "none" || style.willChange && /transform|perspective|filter/.test(style.willChange) || style.contain && /paint|layout|strict|content/.test(style.contain);
2528
+ if (createsContainingBlock) {
2529
+ const rect = node.getBoundingClientRect();
2530
+ return { top: rect.top, left: rect.left };
2531
+ }
2532
+ node = node.parentElement;
2533
+ }
2534
+ return { top: 0, left: 0 };
2535
+ }
2536
+ function clamp2(n, min, max) {
2537
+ return Math.max(min, Math.min(max, n));
2538
+ }
2526
2539
  function setPopupPositionFixed(popupEl, rect, topBoundary) {
2527
2540
  const GAP = 8;
2528
2541
  const MARGIN = 8;
@@ -2530,6 +2543,9 @@ function setPopupPositionFixed(popupEl, rect, topBoundary) {
2530
2543
  let left = rect.left;
2531
2544
  if (top < topBoundary) top = rect.bottom + GAP;
2532
2545
  left = clamp2(left, MARGIN, window.innerWidth - popupEl.offsetWidth - MARGIN);
2546
+ const origin = getFixedPositionOrigin(popupEl);
2547
+ top -= origin.top;
2548
+ left -= origin.left;
2533
2549
  popupEl.style.top = `${top}px`;
2534
2550
  popupEl.style.left = `${left}px`;
2535
2551
  }
@@ -3151,28 +3167,30 @@ var getSelectedNode2 = (selection$1) => {
3151
3167
  };
3152
3168
  var VERTICAL_GAP = 10;
3153
3169
  var HORIZONTAL_OFFSET = 5;
3154
- var setFloatingElemPositionForLinkEditor = (targetRect, floatingElem, anchorElem, verticalGap = VERTICAL_GAP, horizontalOffset = HORIZONTAL_OFFSET) => {
3155
- const scrollerElem = anchorElem.parentElement;
3156
- if (targetRect === null || !scrollerElem) {
3170
+ var VIEWPORT_MARGIN = 8;
3171
+ var setFloatingElemPositionForLinkEditor = (targetRect, floatingElem, topBoundary = VIEWPORT_MARGIN, verticalGap = VERTICAL_GAP, horizontalOffset = HORIZONTAL_OFFSET) => {
3172
+ if (targetRect === null) {
3157
3173
  floatingElem.style.opacity = "0";
3158
3174
  floatingElem.style.transform = "translate(-10000px, -10000px)";
3159
3175
  return;
3160
3176
  }
3161
3177
  const floatingElemRect = floatingElem.getBoundingClientRect();
3162
- const anchorElementRect = anchorElem.getBoundingClientRect();
3163
- const editorScrollerRect = scrollerElem.getBoundingClientRect();
3164
- let top = targetRect.top - verticalGap;
3178
+ let top = targetRect.bottom + verticalGap;
3165
3179
  let left = targetRect.left - horizontalOffset;
3166
- if (top < editorScrollerRect.top) {
3167
- top += floatingElemRect.height + targetRect.height + verticalGap * 2;
3180
+ if (top + floatingElemRect.height > window.innerHeight - VIEWPORT_MARGIN) {
3181
+ top = targetRect.top - floatingElemRect.height - verticalGap;
3168
3182
  }
3169
- if (left + floatingElemRect.width > editorScrollerRect.right) {
3170
- left = editorScrollerRect.right - floatingElemRect.width - horizontalOffset;
3183
+ if (top < topBoundary) {
3184
+ top = topBoundary;
3171
3185
  }
3172
- top -= anchorElementRect.top;
3173
- left -= anchorElementRect.left;
3186
+ left = Math.max(VIEWPORT_MARGIN, Math.min(left, window.innerWidth - floatingElemRect.width - VIEWPORT_MARGIN));
3187
+ const origin = getFixedPositionOrigin(floatingElem);
3188
+ top -= origin.top;
3189
+ left -= origin.left;
3174
3190
  floatingElem.style.opacity = "1";
3175
- floatingElem.style.transform = `translate(${left}px, ${top}px)`;
3191
+ floatingElem.style.transform = "none";
3192
+ floatingElem.style.top = `${top}px`;
3193
+ floatingElem.style.left = `${left}px`;
3176
3194
  };
3177
3195
  var SUPPORTED_URL_PROTOCOLS = /* @__PURE__ */ new Set([
3178
3196
  "http:",
@@ -3195,7 +3213,7 @@ var sanitizeUrl = (url) => {
3195
3213
  var preventDefault = (event) => {
3196
3214
  event.preventDefault();
3197
3215
  };
3198
- var FloatingLinkEditor = ({ editor, isLink, setIsLink, anchorElem, isLinkEditMode, setIsLinkEditMode }) => {
3216
+ var FloatingLinkEditor = ({ editor, isLink, setIsLink, isLinkEditMode, setIsLinkEditMode }) => {
3199
3217
  const [editedLinkUrl, setEditedLinkUrl] = React9.useState("https://");
3200
3218
  const [lastSelection, setLastSelection] = React9.useState(null);
3201
3219
  const [linkUrl, setLinkUrl] = React9.useState("");
@@ -3227,38 +3245,37 @@ var FloatingLinkEditor = ({ editor, isLink, setIsLink, anchorElem, isLinkEditMod
3227
3245
  if (isLink && selection !== null && nativeSelection !== null && rootElement !== null && rootElement.contains(nativeSelection.anchorNode) && editor.isEditable()) {
3228
3246
  const domRect = nativeSelection.focusNode?.parentElement?.getBoundingClientRect();
3229
3247
  if (domRect) {
3230
- domRect.y += 40;
3231
- setFloatingElemPositionForLinkEditor(domRect, editorElem, anchorElem);
3248
+ const toolbarEl = rootElement.closest(".lexical-rich-editor-root")?.querySelector(".editor-toolbar-root");
3249
+ const topBoundary = toolbarEl ? toolbarEl.getBoundingClientRect().bottom + 8 : 8;
3250
+ setFloatingElemPositionForLinkEditor(domRect, editorElem, topBoundary);
3232
3251
  }
3233
3252
  setLastSelection(selection);
3234
3253
  } else if (!activeElement || activeElement.className !== "aoLinkInput") {
3235
3254
  if (rootElement !== null) {
3236
- setFloatingElemPositionForLinkEditor(null, editorElem, anchorElem);
3255
+ setFloatingElemPositionForLinkEditor(null, editorElem);
3237
3256
  }
3238
3257
  setLastSelection(null);
3239
3258
  setIsLinkEditMode(false);
3240
3259
  setLinkUrl("");
3241
3260
  }
3242
3261
  return true;
3243
- }, [anchorElem, editor, setIsLinkEditMode, isLinkEditMode, isLink, linkUrl]);
3262
+ }, [editor, setIsLinkEditMode, isLinkEditMode, isLink, linkUrl]);
3244
3263
  React9.useEffect(() => {
3245
- const scrollerElem = anchorElem.parentElement;
3246
3264
  const update = () => {
3247
3265
  editor.getEditorState().read(() => {
3248
3266
  $updateLinkEditor();
3249
3267
  });
3250
3268
  };
3269
+ const root = editor.getRootElement();
3251
3270
  window.addEventListener("resize", update);
3252
- if (scrollerElem) {
3253
- scrollerElem.addEventListener("scroll", update);
3254
- }
3271
+ window.addEventListener("scroll", update, true);
3272
+ root?.addEventListener("scroll", update, { passive: true });
3255
3273
  return () => {
3256
3274
  window.removeEventListener("resize", update);
3257
- if (scrollerElem) {
3258
- scrollerElem.removeEventListener("scroll", update);
3259
- }
3275
+ window.removeEventListener("scroll", update, true);
3276
+ root?.removeEventListener("scroll", update);
3260
3277
  };
3261
- }, [anchorElem.parentElement, editor, $updateLinkEditor]);
3278
+ }, [editor, $updateLinkEditor]);
3262
3279
  React9.useEffect(() => {
3263
3280
  return utils.mergeRegister(
3264
3281
  editor.registerUpdateListener(({ editorState }) => {
@@ -3424,6 +3441,7 @@ var FloatingLinkEditor = ({ editor, isLink, setIsLink, anchorElem, isLinkEditMod
3424
3441
  var useFloatingLinkEditorToolbar = (editor, anchorElem, isLinkEditMode, setIsLinkEditMode) => {
3425
3442
  const [activeEditor, setActiveEditor] = React9.useState(editor);
3426
3443
  const [isLink, setIsLink] = React9.useState(false);
3444
+ const portalContainer = useFloatingPortalContainer(editor);
3427
3445
  React9.useEffect(() => {
3428
3446
  function $updateToolbar() {
3429
3447
  const selection = lexical.$getSelection();
@@ -3471,7 +3489,7 @@ var useFloatingLinkEditorToolbar = (editor, anchorElem, isLinkEditMode, setIsLin
3471
3489
  )
3472
3490
  );
3473
3491
  }, [editor]);
3474
- if (!anchorElem || !(anchorElem instanceof HTMLElement)) {
3492
+ if (!anchorElem || !(anchorElem instanceof HTMLElement) || !portalContainer) {
3475
3493
  return null;
3476
3494
  }
3477
3495
  return reactDom.createPortal(
@@ -3481,12 +3499,11 @@ var useFloatingLinkEditorToolbar = (editor, anchorElem, isLinkEditMode, setIsLin
3481
3499
  isLink,
3482
3500
  editor: activeEditor,
3483
3501
  setIsLink,
3484
- anchorElem,
3485
3502
  isLinkEditMode,
3486
3503
  setIsLinkEditMode
3487
3504
  }
3488
3505
  ),
3489
- anchorElem
3506
+ portalContainer
3490
3507
  );
3491
3508
  };
3492
3509
  var FloatingLinkEditorPlugin = ({ anchorElem, isLinkEditMode, setIsLinkEditMode }) => {
@@ -3499,6 +3516,48 @@ var FloatingLinkEditorPlugin = ({ anchorElem, isLinkEditMode, setIsLinkEditMode
3499
3516
  setIsLinkEditMode
3500
3517
  );
3501
3518
  };
3519
+ var AoModal = ({
3520
+ isOpen,
3521
+ onDismiss,
3522
+ title,
3523
+ maxWidth = 280,
3524
+ // Default to a smaller, compact size
3525
+ actions,
3526
+ children
3527
+ }) => {
3528
+ const [editor] = LexicalComposerContext.useLexicalComposerContext();
3529
+ const hostElement = useFloatingPortalContainer(editor);
3530
+ if (!isOpen) return null;
3531
+ const modalContent = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aoModalBackdrop", onClick: onDismiss, children: /* @__PURE__ */ jsxRuntime.jsxs(
3532
+ reactComponents.FluentProvider,
3533
+ {
3534
+ theme: reactComponents.webLightTheme,
3535
+ className: "aoModalWrapper aoModalContainer",
3536
+ style: { maxWidth, width: "90vw" },
3537
+ onClick: (e) => e.stopPropagation(),
3538
+ children: [
3539
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "aoModalHeader", children: [
3540
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "aoModalTitle", children: title }),
3541
+ /* @__PURE__ */ jsxRuntime.jsx(
3542
+ "button",
3543
+ {
3544
+ className: "aoModalCloseButton",
3545
+ "aria-label": "Close popup",
3546
+ onClick: onDismiss,
3547
+ children: "\u2715"
3548
+ }
3549
+ )
3550
+ ] }),
3551
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aoModalBody", children }),
3552
+ actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aoModalActions", children: actions })
3553
+ ]
3554
+ }
3555
+ ) });
3556
+ if (!hostElement) return null;
3557
+ return reactDom.createPortal(modalContent, hostElement);
3558
+ };
3559
+
3560
+ // src/Plugins/ImagePlugin.tsx
3502
3561
  init_ImageNode();
3503
3562
  var INSERT_IMAGE_COMMAND = lexical.createCommand("INSERT_IMAGE_COMMAND");
3504
3563
  var readClipboardImageAsDataURL = async (event) => {
@@ -3632,108 +3691,105 @@ var InsertImageDialog = ({
3632
3691
  };
3633
3692
  reader.readAsDataURL(file);
3634
3693
  };
3635
- return /* @__PURE__ */ jsxRuntime.jsxs(
3636
- reactComponents.Dialog,
3637
- {
3638
- open: disabled ? false : isOpen,
3639
- onOpenChange: (_, data) => {
3640
- if (!disabled) setIsOpen(data.open);
3694
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
3695
+ /* @__PURE__ */ jsxRuntime.jsx(
3696
+ reactComponents.Button,
3697
+ {
3698
+ size: "small",
3699
+ title: "Add Image",
3700
+ disabled,
3701
+ icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ImageAddRegular, { style: { color: iconColor } }),
3702
+ style: {
3703
+ background: isOpen && !disabled ? "#ebebeb" : "none",
3704
+ border: "none",
3705
+ margin: 2,
3706
+ opacity: disabled ? 0.55 : 1,
3707
+ cursor: disabled ? "not-allowed" : "pointer"
3708
+ },
3709
+ onClick: () => {
3710
+ if (disabled) return;
3711
+ setIsOpen((prev) => !prev);
3712
+ setSrc("");
3713
+ setAltText("");
3714
+ setFileName("");
3715
+ }
3641
3716
  },
3642
- children: [
3643
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsxRuntime.jsx(
3644
- reactComponents.Button,
3645
- {
3646
- size: "small",
3647
- title: "Add Image",
3648
- disabled,
3649
- icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ImageAddRegular, { style: { color: iconColor } }),
3650
- style: {
3651
- background: isOpen && !disabled ? "#ebebeb" : "none",
3652
- border: "none",
3653
- margin: 2,
3654
- opacity: disabled ? 0.55 : 1,
3655
- cursor: disabled ? "not-allowed" : "pointer"
3656
- },
3657
- onClick: () => {
3658
- if (disabled) return;
3659
- setIsOpen((prev) => !prev);
3660
- setSrc("");
3661
- setAltText("");
3662
- setFileName("");
3663
- }
3664
- },
3665
- "upload-image"
3666
- ) }),
3667
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogSurface, { style: { maxWidth: 340 }, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogBody, { children: [
3668
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogTitle, { children: "Insert image" }),
3669
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogContent, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { tokens: { childrenGap: 8 }, children: [
3670
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: "Upload", size: "small", children: /* @__PURE__ */ jsxRuntime.jsxs(
3671
- "label",
3672
- {
3673
- style: {
3674
- cursor: disabled ? "not-allowed" : "pointer",
3675
- display: "flex",
3676
- alignItems: "center",
3677
- gap: 8,
3678
- opacity: disabled ? 0.75 : 1
3679
- },
3680
- children: [
3717
+ "upload-image"
3718
+ ),
3719
+ /* @__PURE__ */ jsxRuntime.jsx(
3720
+ AoModal,
3721
+ {
3722
+ isOpen: disabled ? false : isOpen,
3723
+ onDismiss: () => !disabled && setIsOpen(false),
3724
+ title: "Insert image",
3725
+ maxWidth: 340,
3726
+ actions: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
3727
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Button, { size: "small", disabled: isDisabled, onClick: () => onClick({ altText, src }), children: "Add" }),
3728
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Button, { size: "small", disabled, onClick: () => setIsOpen(false), children: "Cancel" })
3729
+ ] }),
3730
+ children: /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { tokens: { childrenGap: 8 }, children: [
3731
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: "Upload", size: "small", children: /* @__PURE__ */ jsxRuntime.jsxs(
3732
+ "label",
3733
+ {
3734
+ style: {
3735
+ cursor: disabled ? "not-allowed" : "pointer",
3736
+ display: "flex",
3737
+ alignItems: "center",
3738
+ gap: 8,
3739
+ opacity: disabled ? 0.75 : 1
3740
+ },
3741
+ children: [
3742
+ /* @__PURE__ */ jsxRuntime.jsx(
3743
+ "input",
3744
+ {
3745
+ type: "file",
3746
+ accept: "image/*",
3747
+ style: { display: "none" },
3748
+ disabled,
3749
+ onChange: loadImage
3750
+ },
3751
+ "inline-image-upload"
3752
+ ),
3753
+ /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { horizontal: true, children: [
3681
3754
  /* @__PURE__ */ jsxRuntime.jsx(
3682
- "input",
3755
+ reactIcons.AttachFilled,
3683
3756
  {
3684
- type: "file",
3685
- accept: "image/*",
3686
- style: { display: "none" },
3687
- disabled,
3688
- onChange: loadImage
3689
- },
3690
- "inline-image-upload"
3691
- ),
3692
- /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { horizontal: true, children: [
3693
- /* @__PURE__ */ jsxRuntime.jsx(
3694
- reactIcons.AttachFilled,
3695
- {
3696
- style: {
3697
- fontSize: "16px",
3698
- color: disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#808080",
3699
- marginTop: 2
3700
- }
3757
+ style: {
3758
+ fontSize: "16px",
3759
+ color: disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#808080",
3760
+ marginTop: 2
3701
3761
  }
3702
- ),
3703
- !fileName && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: "#808080" }, children: "Upload File" })
3704
- ] }),
3705
- fileName && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: "#808080" }, children: fileName })
3706
- ]
3707
- }
3708
- ) }),
3709
- fileSizeError && /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MessageBar, { intent: "error", style: { marginTop: 4 }, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MessageBarBody, { children: fileSizeError }) }),
3710
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: "Alt Text", size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(
3711
- reactComponents.Input,
3712
- {
3713
- placeholder: "Alt text",
3714
- appearance: "underline",
3715
- disabled,
3716
- onChange: (_, d) => setAltText(d.value),
3717
- value: altText
3718
- }
3719
- ) }),
3720
- selectedValue === "URL" && /* @__PURE__ */ jsxRuntime.jsx(
3721
- InsertImageByURL,
3722
- {
3723
- disabled,
3724
- setIsOpen: (open) => setIsOpen(open),
3725
- onClick: (payload) => onClick(payload)
3726
- }
3727
- )
3728
- ] }) }),
3729
- /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogActions, { children: [
3730
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Button, { size: "small", disabled: isDisabled, onClick: () => onClick({ altText, src }), children: "Add" }),
3731
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Button, { size: "small", disabled, onClick: () => setIsOpen(false), children: "Cancel" })
3732
- ] })
3733
- ] }) })
3734
- ]
3735
- }
3736
- );
3762
+ }
3763
+ ),
3764
+ !fileName && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: "#808080" }, children: "Upload File" })
3765
+ ] }),
3766
+ fileName && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: "#808080" }, children: fileName })
3767
+ ]
3768
+ }
3769
+ ) }),
3770
+ fileSizeError && /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MessageBar, { intent: "error", style: { marginTop: 4 }, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MessageBarBody, { children: fileSizeError }) }),
3771
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: "Alt Text", size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(
3772
+ reactComponents.Input,
3773
+ {
3774
+ placeholder: "Alt text",
3775
+ appearance: "underline",
3776
+ disabled,
3777
+ onChange: (_, d) => setAltText(d.value),
3778
+ value: altText
3779
+ }
3780
+ ) }),
3781
+ selectedValue === "URL" && /* @__PURE__ */ jsxRuntime.jsx(
3782
+ InsertImageByURL,
3783
+ {
3784
+ disabled,
3785
+ setIsOpen: (open) => setIsOpen(open),
3786
+ onClick: (payload) => onClick(payload)
3787
+ }
3788
+ )
3789
+ ] })
3790
+ }
3791
+ )
3792
+ ] });
3737
3793
  };
3738
3794
  var ImagesPlugin = ({ captionsEnabled }) => {
3739
3795
  const [editor] = LexicalComposerContext.useLexicalComposerContext();
@@ -3983,135 +4039,132 @@ var InsertInlineImageDialog = ({
3983
4039
  setFileName("");
3984
4040
  setFileSizeError(null);
3985
4041
  };
3986
- return /* @__PURE__ */ jsxRuntime.jsxs(
3987
- reactComponents.Dialog,
3988
- {
3989
- open: disabled ? false : isOpen,
3990
- onOpenChange: (_, data) => {
3991
- if (!disabled) setIsOpen(data.open);
4042
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
4043
+ /* @__PURE__ */ jsxRuntime.jsx(
4044
+ reactComponents.Button,
4045
+ {
4046
+ size: "small",
4047
+ title: "Add Inline Image",
4048
+ disabled,
4049
+ icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ImageEditRegular, { style: { color: iconColor } }),
4050
+ style: {
4051
+ background: isOpen && !disabled ? "#ebebeb" : "none",
4052
+ border: "none",
4053
+ margin: 2,
4054
+ opacity: disabled ? 0.55 : 1,
4055
+ cursor: disabled ? "not-allowed" : "pointer"
4056
+ },
4057
+ onClick: () => {
4058
+ if (disabled) return;
4059
+ setIsOpen((prev) => !prev);
4060
+ setAltText("");
4061
+ setSrc("");
4062
+ setFileName("");
4063
+ }
3992
4064
  },
3993
- children: [
3994
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsxRuntime.jsx(
3995
- reactComponents.Button,
3996
- {
3997
- size: "small",
3998
- title: "Add Inline Image",
3999
- disabled,
4000
- icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ImageEditRegular, { style: { color: iconColor } }),
4001
- style: {
4002
- background: isOpen && !disabled ? "#ebebeb" : "none",
4003
- border: "none",
4004
- margin: 2,
4005
- opacity: disabled ? 0.55 : 1,
4006
- cursor: disabled ? "not-allowed" : "pointer"
4065
+ "upload-inline-image"
4066
+ ),
4067
+ /* @__PURE__ */ jsxRuntime.jsx(
4068
+ AoModal,
4069
+ {
4070
+ isOpen: disabled ? false : isOpen,
4071
+ onDismiss: () => !disabled && setIsOpen(false),
4072
+ title: "Insert inline image",
4073
+ maxWidth: 360,
4074
+ actions: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
4075
+ /* @__PURE__ */ jsxRuntime.jsx(
4076
+ reactComponents.Button,
4077
+ {
4078
+ size: "small",
4079
+ disabled: isDisabled,
4080
+ onClick: handleOnClick,
4081
+ children: "Add"
4007
4082
  },
4008
- onClick: () => {
4009
- if (disabled) return;
4010
- setIsOpen((prev) => !prev);
4011
- setAltText("");
4012
- setSrc("");
4013
- setFileName("");
4014
- }
4015
- },
4016
- "upload-inline-image"
4017
- ) }),
4018
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogSurface, { style: { maxWidth: 360 }, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogBody, { children: [
4019
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogTitle, { children: "Insert inline image" }),
4020
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogContent, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { tokens: { childrenGap: 8 }, children: [
4021
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: "Upload", size: "small", children: /* @__PURE__ */ jsxRuntime.jsxs(
4022
- "label",
4023
- {
4024
- style: {
4025
- cursor: disabled ? "not-allowed" : "pointer",
4026
- display: "flex",
4027
- alignItems: "center",
4028
- gap: 8,
4029
- opacity: disabled ? 0.75 : 1
4030
- },
4031
- children: [
4083
+ "file-inline-upload-btn"
4084
+ ),
4085
+ /* @__PURE__ */ jsxRuntime.jsx(
4086
+ reactComponents.Button,
4087
+ {
4088
+ size: "small",
4089
+ disabled,
4090
+ onClick: () => setIsOpen(false),
4091
+ children: "Cancel"
4092
+ },
4093
+ "file-inline-upload-cancel"
4094
+ )
4095
+ ] }),
4096
+ children: /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { tokens: { childrenGap: 8 }, children: [
4097
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: "Upload", size: "small", children: /* @__PURE__ */ jsxRuntime.jsxs(
4098
+ "label",
4099
+ {
4100
+ style: {
4101
+ cursor: disabled ? "not-allowed" : "pointer",
4102
+ display: "flex",
4103
+ alignItems: "center",
4104
+ gap: 8,
4105
+ opacity: disabled ? 0.75 : 1
4106
+ },
4107
+ children: [
4108
+ /* @__PURE__ */ jsxRuntime.jsx(
4109
+ "input",
4110
+ {
4111
+ type: "file",
4112
+ accept: "image/*",
4113
+ style: { display: "none" },
4114
+ disabled,
4115
+ onChange: loadImage
4116
+ },
4117
+ "inline-image-upload"
4118
+ ),
4119
+ /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { horizontal: true, children: [
4032
4120
  /* @__PURE__ */ jsxRuntime.jsx(
4033
- "input",
4121
+ reactIcons.AttachFilled,
4034
4122
  {
4035
- type: "file",
4036
- accept: "image/*",
4037
- style: { display: "none" },
4038
- disabled,
4039
- onChange: loadImage
4040
- },
4041
- "inline-image-upload"
4042
- ),
4043
- /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { horizontal: true, children: [
4044
- /* @__PURE__ */ jsxRuntime.jsx(
4045
- reactIcons.AttachFilled,
4046
- {
4047
- style: {
4048
- fontSize: "16px",
4049
- color: disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#808080",
4050
- marginTop: 2
4051
- }
4123
+ style: {
4124
+ fontSize: "16px",
4125
+ color: disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#808080",
4126
+ marginTop: 2
4052
4127
  }
4053
- ),
4054
- !fileName && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: "#808080" }, children: "Upload File" })
4055
- ] }),
4056
- fileName && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: "#808080" }, children: fileName })
4057
- ]
4058
- }
4059
- ) }),
4060
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: "Position", size: "small", children: /* @__PURE__ */ jsxRuntime.jsxs(
4061
- reactComponents.Dropdown,
4062
- {
4063
- className: styles.alignDropdown,
4064
- disabled,
4065
- value: position === "full" ? "Full" : position === "right" ? "Right" : "Left",
4066
- selectedOptions: [position ?? "left"],
4067
- listbox: { style: { width: "120px" } },
4068
- root: { style: { borderBottom: "1px solid black" } },
4069
- onOptionSelect: (_, data) => setPosition(data.optionValue),
4070
- children: [
4071
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Option, { value: "left", children: "Left" }, "left"),
4072
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Option, { value: "right", children: "Right" }, "right"),
4073
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Option, { value: "full", children: "Full" }, "full")
4074
- ]
4075
- }
4076
- ) }),
4077
- fileSizeError && /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MessageBar, { intent: "error", style: { marginTop: 4 }, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MessageBarBody, { children: fileSizeError }) }),
4078
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: "Alt Text", size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(
4079
- reactComponents.Input,
4080
- {
4081
- placeholder: "Alt text",
4082
- appearance: "underline",
4083
- disabled,
4084
- value: altText,
4085
- onChange: (_, d) => setAltText(d.value)
4086
- }
4087
- ) })
4088
- ] }) }),
4089
- /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogActions, { children: [
4090
- /* @__PURE__ */ jsxRuntime.jsx(
4091
- reactComponents.Button,
4092
- {
4093
- size: "small",
4094
- disabled: isDisabled,
4095
- onClick: handleOnClick,
4096
- children: "Add"
4097
- },
4098
- "file-inline-upload-btn"
4099
- ),
4100
- /* @__PURE__ */ jsxRuntime.jsx(
4101
- reactComponents.Button,
4102
- {
4103
- size: "small",
4104
- disabled,
4105
- onClick: () => setIsOpen(false),
4106
- children: "Cancel"
4107
- },
4108
- "file-inline-upload-cancel"
4109
- )
4110
- ] })
4111
- ] }) })
4112
- ]
4113
- }
4114
- );
4128
+ }
4129
+ ),
4130
+ !fileName && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: "#808080" }, children: "Upload File" })
4131
+ ] }),
4132
+ fileName && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: "#808080" }, children: fileName })
4133
+ ]
4134
+ }
4135
+ ) }),
4136
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: "Position", size: "small", children: /* @__PURE__ */ jsxRuntime.jsxs(
4137
+ reactComponents.Dropdown,
4138
+ {
4139
+ className: styles.alignDropdown,
4140
+ disabled,
4141
+ value: position === "full" ? "Full" : position === "right" ? "Right" : "Left",
4142
+ selectedOptions: [position ?? "left"],
4143
+ listbox: { style: { width: "120px" } },
4144
+ root: { style: { borderBottom: "1px solid black" } },
4145
+ onOptionSelect: (_, data) => setPosition(data.optionValue),
4146
+ children: [
4147
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Option, { value: "left", children: "Left" }, "left"),
4148
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Option, { value: "right", children: "Right" }, "right"),
4149
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Option, { value: "full", children: "Full" }, "full")
4150
+ ]
4151
+ }
4152
+ ) }),
4153
+ fileSizeError && /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MessageBar, { intent: "error", style: { marginTop: 4 }, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MessageBarBody, { children: fileSizeError }) }),
4154
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: "Alt Text", size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(
4155
+ reactComponents.Input,
4156
+ {
4157
+ placeholder: "Alt text",
4158
+ appearance: "underline",
4159
+ disabled,
4160
+ value: altText,
4161
+ onChange: (_, d) => setAltText(d.value)
4162
+ }
4163
+ ) })
4164
+ ] })
4165
+ }
4166
+ )
4167
+ ] });
4115
4168
  };
4116
4169
  var InlineImagePlugin = () => {
4117
4170
  const [editor] = LexicalComposerContext.useLexicalComposerContext();
@@ -6612,79 +6665,76 @@ var TableItemPlugin = ({ disabled }) => {
6612
6665
  setColumns("");
6613
6666
  setIsOpen(false);
6614
6667
  };
6615
- return /* @__PURE__ */ jsxRuntime.jsxs(
6616
- reactComponents.Dialog,
6617
- {
6618
- open: disabled ? false : isOpen,
6619
- onOpenChange: (_, data) => {
6620
- if (!disabled) setIsOpen(data.open);
6668
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
6669
+ /* @__PURE__ */ jsxRuntime.jsx(
6670
+ reactComponents.Button,
6671
+ {
6672
+ size: "small",
6673
+ title: "Add table",
6674
+ disabled,
6675
+ icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.TableAddRegular, { style: { color: iconColor } }),
6676
+ style: {
6677
+ background: isOpen && !disabled ? "#ebebeb" : "none",
6678
+ border: "none",
6679
+ margin: 2,
6680
+ opacity: disabled ? 0.55 : 1,
6681
+ cursor: disabled ? "not-allowed" : "pointer"
6682
+ },
6683
+ onClick: () => {
6684
+ if (disabled) return;
6685
+ setIsOpen((prev) => !prev);
6686
+ setRows("");
6687
+ setColumns("");
6688
+ }
6621
6689
  },
6622
- children: [
6623
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsxRuntime.jsx(
6624
- reactComponents.Button,
6625
- {
6626
- size: "small",
6627
- title: "Add table",
6628
- disabled,
6629
- icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.TableAddRegular, { style: { color: iconColor } }),
6630
- style: {
6631
- background: isOpen && !disabled ? "#ebebeb" : "none",
6632
- border: "none",
6633
- margin: 2,
6634
- opacity: disabled ? 0.55 : 1,
6635
- cursor: disabled ? "not-allowed" : "pointer"
6636
- },
6637
- onClick: () => {
6638
- if (disabled) return;
6639
- setIsOpen((prev) => !prev);
6640
- setRows("");
6641
- setColumns("");
6690
+ "insert-table-nodes"
6691
+ ),
6692
+ /* @__PURE__ */ jsxRuntime.jsx(
6693
+ AoModal,
6694
+ {
6695
+ isOpen: disabled ? false : isOpen,
6696
+ onDismiss: () => !disabled && setIsOpen(false),
6697
+ title: "Insert table",
6698
+ maxWidth: 300,
6699
+ actions: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
6700
+ /* @__PURE__ */ jsxRuntime.jsx(
6701
+ reactComponents.Button,
6702
+ {
6703
+ size: "small",
6704
+ appearance: "primary",
6705
+ disabled: disabled || !rows || !columns,
6706
+ onClick: onAddTable,
6707
+ children: "Add"
6642
6708
  }
6643
- },
6644
- "insert-table-nodes"
6645
- ) }),
6646
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogSurface, { style: { maxWidth: 300 }, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogBody, { children: [
6647
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogTitle, { children: "Insert table" }),
6648
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogContent, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { tokens: { childrenGap: 8 }, children: [
6649
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: "Rows", size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(
6650
- reactComponents.Input,
6651
- {
6652
- autoFocus: !disabled,
6653
- value: rows,
6654
- placeholder: "Rows",
6655
- appearance: "underline",
6656
- disabled,
6657
- onChange: (_, v) => setRows(v.value)
6658
- }
6659
- ) }),
6660
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: "Columns", size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(
6661
- reactComponents.Input,
6662
- {
6663
- value: columns,
6664
- placeholder: "Columns",
6665
- appearance: "underline",
6666
- disabled,
6667
- onChange: (_, v) => setColumns(v.value)
6668
- }
6669
- ) })
6670
- ] }) }),
6671
- /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogActions, { children: [
6672
- /* @__PURE__ */ jsxRuntime.jsx(
6673
- reactComponents.Button,
6674
- {
6675
- size: "small",
6676
- appearance: "primary",
6677
- disabled: disabled || !rows || !columns,
6678
- onClick: onAddTable,
6679
- children: "Add"
6680
- }
6681
- ),
6682
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Button, { size: "small", disabled, onClick: () => setIsOpen(false), children: "Cancel" })
6683
- ] })
6684
- ] }) })
6685
- ]
6686
- }
6687
- );
6709
+ ),
6710
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Button, { size: "small", disabled, onClick: () => setIsOpen(false), children: "Cancel" })
6711
+ ] }),
6712
+ children: /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { tokens: { childrenGap: 8 }, children: [
6713
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: "Rows", size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(
6714
+ reactComponents.Input,
6715
+ {
6716
+ autoFocus: !disabled,
6717
+ value: rows,
6718
+ placeholder: "Rows",
6719
+ appearance: "underline",
6720
+ disabled,
6721
+ onChange: (_, v) => setRows(v.value)
6722
+ }
6723
+ ) }),
6724
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: "Columns", size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(
6725
+ reactComponents.Input,
6726
+ {
6727
+ value: columns,
6728
+ placeholder: "Columns",
6729
+ appearance: "underline",
6730
+ disabled,
6731
+ onChange: (_, v) => setColumns(v.value)
6732
+ }
6733
+ ) })
6734
+ ] })
6735
+ }
6736
+ )
6737
+ ] });
6688
6738
  };
6689
6739
  var YoutubeUploadPlugin = ({ disabled }) => {
6690
6740
  const [url, setURL] = React9.useState("");
@@ -6704,57 +6754,54 @@ var YoutubeUploadPlugin = ({ disabled }) => {
6704
6754
  setURL("");
6705
6755
  setIsOpen(false);
6706
6756
  };
6707
- return /* @__PURE__ */ jsxRuntime.jsxs(
6708
- reactComponents.Dialog,
6709
- {
6710
- open: disabled ? false : isOpen,
6711
- onOpenChange: (_, data) => {
6712
- if (!disabled) setIsOpen(data.open);
6757
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
6758
+ /* @__PURE__ */ jsxRuntime.jsx(
6759
+ reactComponents.Button,
6760
+ {
6761
+ title: "Add youtube URL",
6762
+ size: "small",
6763
+ disabled,
6764
+ icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.VideoClipRegular, { style: { color: iconColor } }),
6765
+ style: {
6766
+ background: isOpen && !disabled ? "#ebebeb" : "none",
6767
+ border: "none",
6768
+ margin: 2,
6769
+ opacity: disabled ? 0.55 : 1,
6770
+ cursor: disabled ? "not-allowed" : "pointer"
6771
+ },
6772
+ onClick: () => {
6773
+ if (disabled) return;
6774
+ setIsOpen((prev) => !prev);
6775
+ setURL("");
6776
+ }
6713
6777
  },
6714
- children: [
6715
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsxRuntime.jsx(
6716
- reactComponents.Button,
6778
+ "upload-video"
6779
+ ),
6780
+ /* @__PURE__ */ jsxRuntime.jsx(
6781
+ AoModal,
6782
+ {
6783
+ isOpen: disabled ? false : isOpen,
6784
+ onDismiss: () => !disabled && setIsOpen(false),
6785
+ title: "Embed YouTube video",
6786
+ maxWidth: 320,
6787
+ actions: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
6788
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Button, { size: "small", disabled: disabled || !url, onClick: onHandleEmbeded, children: "Add" }),
6789
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Button, { size: "small", disabled, onClick: () => setIsOpen(false), children: "Cancel" })
6790
+ ] }),
6791
+ children: /* @__PURE__ */ jsxRuntime.jsx(react.Stack, { tokens: { childrenGap: 8 }, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: "URL", size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(
6792
+ reactComponents.Input,
6717
6793
  {
6718
- title: "Add youtube URL",
6719
- size: "small",
6794
+ autoFocus: !disabled,
6720
6795
  disabled,
6721
- icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.VideoClipRegular, { style: { color: iconColor } }),
6722
- style: {
6723
- background: isOpen && !disabled ? "#ebebeb" : "none",
6724
- border: "none",
6725
- margin: 2,
6726
- opacity: disabled ? 0.55 : 1,
6727
- cursor: disabled ? "not-allowed" : "pointer"
6728
- },
6729
- onClick: () => {
6730
- if (disabled) return;
6731
- setIsOpen((prev) => !prev);
6732
- setURL("");
6733
- }
6734
- },
6735
- "upload-video"
6736
- ) }),
6737
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogSurface, { style: { maxWidth: 320 }, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogBody, { children: [
6738
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogTitle, { children: "Embed YouTube video" }),
6739
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogContent, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Stack, { tokens: { childrenGap: 8 }, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: "URL", size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(
6740
- reactComponents.Input,
6741
- {
6742
- autoFocus: !disabled,
6743
- disabled,
6744
- value: url,
6745
- appearance: "underline",
6746
- placeholder: "Add Youtube video URL",
6747
- onChange: (_, v) => setURL(v.value)
6748
- }
6749
- ) }) }) }),
6750
- /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogActions, { children: [
6751
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Button, { size: "small", disabled: disabled || !url, onClick: onHandleEmbeded, children: "Add" }),
6752
- /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Button, { size: "small", disabled, onClick: () => setIsOpen(false), children: "Cancel" })
6753
- ] })
6754
- ] }) })
6755
- ]
6756
- }
6757
- );
6796
+ value: url,
6797
+ appearance: "underline",
6798
+ placeholder: "Add Youtube video URL",
6799
+ onChange: (_, v) => setURL(v.value)
6800
+ }
6801
+ ) }) })
6802
+ }
6803
+ )
6804
+ ] });
6758
6805
  };
6759
6806
  var TextAlphaListLtrFilled = ({ style }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "1em", height: "1em", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", style, children: [
6760
6807
  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8.75 4a.75.75 0 1 0 0 1.5h7.5a.75.75 0 0 0 0-1.5h-7.5Z" }),
@@ -6836,6 +6883,7 @@ var ToolBarPlugins = (props) => {
6836
6883
  const [isLowercase, setIsLowercase] = React9.useState(false);
6837
6884
  const [isCapitalize, setIsCapitalize] = React9.useState(false);
6838
6885
  const [alignment, setAlignment] = React9.useState("left");
6886
+ const [hasTextSelection, setHasTextSelection] = React9.useState(false);
6839
6887
  const [decoratorOpen, setDecoratorOpen] = React9.useState(false);
6840
6888
  const decoratorSelectingRef = React9__namespace.default.useRef(false);
6841
6889
  const presetGroups = props.customToolbar ?? getToolbarGroupsByLevel(props.level);
@@ -6854,8 +6902,10 @@ var ToolBarPlugins = (props) => {
6854
6902
  setIsLowercase(false);
6855
6903
  setIsCapitalize(false);
6856
6904
  setSelectNodeType("paragraph");
6905
+ setHasTextSelection(false);
6857
6906
  return;
6858
6907
  }
6908
+ setHasTextSelection(!selection.isCollapsed());
6859
6909
  setIsBold(selection.hasFormat("bold"));
6860
6910
  setIsItalic(selection.hasFormat("italic"));
6861
6911
  setIsUnderline(selection.hasFormat("underline"));
@@ -7111,7 +7161,7 @@ var ToolBarPlugins = (props) => {
7111
7161
  return /* @__PURE__ */ jsxRuntime.jsx(
7112
7162
  InsertLinkPlugin,
7113
7163
  {
7114
- disabled: !isEditable || props.readOnly,
7164
+ disabled: !isEditable || props.readOnly || !hasTextSelection,
7115
7165
  setIsLinkEditMode: props.setIsLinkEditMode
7116
7166
  },
7117
7167
  key
@@ -8177,8 +8227,13 @@ var ContentEditorComponent = React9.forwardRef(
8177
8227
  color: "var(--colorNeutralForeground3, grey)",
8178
8228
  position: "absolute",
8179
8229
  top: props.level !== "none" /* None */ ? "17px" : "27px",
8180
- left: pageCanvas.paddingPx,
8181
- right: pageCanvas.paddingPx,
8230
+ left: 0,
8231
+ right: 0,
8232
+ maxWidth: pageCanvas.widthPx,
8233
+ marginLeft: pageCanvas.widthPx !== void 0 ? "auto" : void 0,
8234
+ marginRight: pageCanvas.widthPx !== void 0 ? "auto" : void 0,
8235
+ paddingLeft: pageCanvas.paddingPx,
8236
+ paddingRight: pageCanvas.paddingPx,
8182
8237
  fontSize: "14px",
8183
8238
  pointerEvents: "none",
8184
8239
  userSelect: "none"
@@ -8295,7 +8350,7 @@ var ContentEditorComponent = React9.forwardRef(
8295
8350
  const trimmedErrorMessage = props.errorMessage?.trim() || "";
8296
8351
  const hasValidationError = validationErrors.length > 0 || !!trimmedErrorMessage;
8297
8352
  return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.FluentProvider, { theme: reactComponents.webLightTheme, style: { height: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsxs(LexicalComposer.LexicalComposer, { initialConfig, children: [
8298
- /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: "lexical-rich-editor-root", style: { height: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
8353
+ /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: "lexical-rich-editor-root", style: { height: "100%", position: "relative" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
8299
8354
  react.Stack,
8300
8355
  {
8301
8356
  style: {