@tarviks/lexical-rich-editor 1.3.3 → 1.3.5

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 +0 -88
  2. package/dist/index.css.map +1 -1
  3. package/dist/index.js +341 -350
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +343 -352
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -2508,10 +2508,9 @@ function useFloatingPortalContainer(editor) {
2508
2508
  React9.useEffect(() => {
2509
2509
  const root = editor.getRootElement();
2510
2510
  if (!root) return;
2511
- const panelOrLayer = root.closest(".ms-Panel-main") || root.closest(".ms-Panel") || root.closest(".ms-Layer") || document.body;
2512
2511
  const host = document.createElement("div");
2513
2512
  host.className = "lexical-floating-ui-host";
2514
- panelOrLayer.appendChild(host);
2513
+ document.body.appendChild(host);
2515
2514
  setContainer(host);
2516
2515
  return () => {
2517
2516
  host.remove();
@@ -3518,43 +3517,41 @@ var FloatingLinkEditorPlugin = ({ anchorElem, isLinkEditMode, setIsLinkEditMode
3518
3517
  };
3519
3518
  var AoModal = ({
3520
3519
  isOpen,
3521
- onDismiss,
3520
+ onOpenChange,
3521
+ trigger,
3522
3522
  title,
3523
3523
  maxWidth = 280,
3524
- // Default to a smaller, compact size
3525
3524
  actions,
3526
3525
  children
3527
3526
  }) => {
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,
3527
+ return /* @__PURE__ */ jsxRuntime.jsxs(
3528
+ reactComponents.Popover,
3533
3529
  {
3534
- theme: reactComponents.webLightTheme,
3535
- className: "aoModalWrapper aoModalContainer",
3536
- style: { maxWidth, width: "90vw" },
3537
- onClick: (e) => e.stopPropagation(),
3530
+ open: isOpen,
3531
+ onOpenChange: (_, data) => onOpenChange(data.open),
3532
+ positioning: { position: "below", align: "start" },
3538
3533
  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 })
3534
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.PopoverTrigger, { disableButtonEnhancement: true, children: trigger }),
3535
+ /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.PopoverSurface, { style: { minWidth: 240, maxWidth, width: "90vw" }, children: [
3536
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 8 }, children: [
3537
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { fontSize: 16, fontWeight: 600, margin: 0 }, children: title }),
3538
+ /* @__PURE__ */ jsxRuntime.jsx(
3539
+ reactComponents.Button,
3540
+ {
3541
+ appearance: "subtle",
3542
+ size: "small",
3543
+ icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.DismissRegular, {}),
3544
+ "aria-label": "Close popup",
3545
+ onClick: () => onOpenChange(false)
3546
+ }
3547
+ )
3548
+ ] }),
3549
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children }),
3550
+ actions && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 12 }, children: actions })
3551
+ ] })
3553
3552
  ]
3554
3553
  }
3555
- ) });
3556
- if (!hostElement) return null;
3557
- return reactDom.createPortal(modalContent, hostElement);
3554
+ );
3558
3555
  };
3559
3556
 
3560
3557
  // src/Plugins/ImagePlugin.tsx
@@ -3691,105 +3688,104 @@ var InsertImageDialog = ({
3691
3688
  };
3692
3689
  reader.readAsDataURL(file);
3693
3690
  };
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);
3691
+ return /* @__PURE__ */ jsxRuntime.jsx(
3692
+ AoModal,
3693
+ {
3694
+ isOpen: disabled ? false : isOpen,
3695
+ onOpenChange: (open) => {
3696
+ if (disabled) return;
3697
+ setIsOpen(open);
3698
+ if (open) {
3712
3699
  setSrc("");
3713
3700
  setAltText("");
3714
3701
  setFileName("");
3715
3702
  }
3716
3703
  },
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: [
3704
+ trigger: /* @__PURE__ */ jsxRuntime.jsx(
3705
+ reactComponents.Button,
3706
+ {
3707
+ size: "small",
3708
+ title: "Add Image",
3709
+ disabled,
3710
+ icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ImageAddRegular, { style: { color: iconColor } }),
3711
+ style: {
3712
+ background: isOpen && !disabled ? "#ebebeb" : "none",
3713
+ border: "none",
3714
+ margin: 2,
3715
+ opacity: disabled ? 0.55 : 1,
3716
+ cursor: disabled ? "not-allowed" : "pointer"
3717
+ }
3718
+ },
3719
+ "upload-image"
3720
+ ),
3721
+ title: "Insert image",
3722
+ maxWidth: 340,
3723
+ actions: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
3724
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Button, { size: "small", disabled: isDisabled, onClick: () => onClick({ altText, src }), children: "Add" }),
3725
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Button, { size: "small", disabled, onClick: () => setIsOpen(false), children: "Cancel" })
3726
+ ] }),
3727
+ children: /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { tokens: { childrenGap: 8 }, children: [
3728
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: "Upload", size: "small", children: /* @__PURE__ */ jsxRuntime.jsxs(
3729
+ "label",
3730
+ {
3731
+ style: {
3732
+ cursor: disabled ? "not-allowed" : "pointer",
3733
+ display: "flex",
3734
+ alignItems: "center",
3735
+ gap: 8,
3736
+ opacity: disabled ? 0.75 : 1
3737
+ },
3738
+ children: [
3739
+ /* @__PURE__ */ jsxRuntime.jsx(
3740
+ "input",
3741
+ {
3742
+ type: "file",
3743
+ accept: "image/*",
3744
+ style: { display: "none" },
3745
+ disabled,
3746
+ onChange: loadImage
3747
+ },
3748
+ "inline-image-upload"
3749
+ ),
3750
+ /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { horizontal: true, children: [
3742
3751
  /* @__PURE__ */ jsxRuntime.jsx(
3743
- "input",
3752
+ reactIcons.AttachFilled,
3744
3753
  {
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: [
3754
- /* @__PURE__ */ jsxRuntime.jsx(
3755
- reactIcons.AttachFilled,
3756
- {
3757
- style: {
3758
- fontSize: "16px",
3759
- color: disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#808080",
3760
- marginTop: 2
3761
- }
3754
+ style: {
3755
+ fontSize: "16px",
3756
+ color: disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#808080",
3757
+ marginTop: 2
3762
3758
  }
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
- ] });
3759
+ }
3760
+ ),
3761
+ !fileName && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: "#808080" }, children: "Upload File" })
3762
+ ] }),
3763
+ fileName && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: "#808080" }, children: fileName })
3764
+ ]
3765
+ }
3766
+ ) }),
3767
+ fileSizeError && /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MessageBar, { intent: "error", style: { marginTop: 4 }, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MessageBarBody, { children: fileSizeError }) }),
3768
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: "Alt Text", size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(
3769
+ reactComponents.Input,
3770
+ {
3771
+ placeholder: "Alt text",
3772
+ appearance: "underline",
3773
+ disabled,
3774
+ onChange: (_, d) => setAltText(d.value),
3775
+ value: altText
3776
+ }
3777
+ ) }),
3778
+ selectedValue === "URL" && /* @__PURE__ */ jsxRuntime.jsx(
3779
+ InsertImageByURL,
3780
+ {
3781
+ disabled,
3782
+ setIsOpen: (open) => setIsOpen(open),
3783
+ onClick: (payload) => onClick(payload)
3784
+ }
3785
+ )
3786
+ ] })
3787
+ }
3788
+ );
3793
3789
  };
3794
3790
  var ImagesPlugin = ({ captionsEnabled }) => {
3795
3791
  const [editor] = LexicalComposerContext.useLexicalComposerContext();
@@ -4039,132 +4035,131 @@ var InsertInlineImageDialog = ({
4039
4035
  setFileName("");
4040
4036
  setFileSizeError(null);
4041
4037
  };
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);
4038
+ return /* @__PURE__ */ jsxRuntime.jsx(
4039
+ AoModal,
4040
+ {
4041
+ isOpen: disabled ? false : isOpen,
4042
+ onOpenChange: (open) => {
4043
+ if (disabled) return;
4044
+ setIsOpen(open);
4045
+ if (open) {
4060
4046
  setAltText("");
4061
4047
  setSrc("");
4062
4048
  setFileName("");
4063
4049
  }
4064
4050
  },
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"
4082
- },
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"
4051
+ trigger: /* @__PURE__ */ jsxRuntime.jsx(
4052
+ reactComponents.Button,
4053
+ {
4054
+ size: "small",
4055
+ title: "Add Inline Image",
4056
+ disabled,
4057
+ icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ImageEditRegular, { style: { color: iconColor } }),
4058
+ style: {
4059
+ background: isOpen && !disabled ? "#ebebeb" : "none",
4060
+ border: "none",
4061
+ margin: 2,
4062
+ opacity: disabled ? 0.55 : 1,
4063
+ cursor: disabled ? "not-allowed" : "pointer"
4064
+ }
4065
+ },
4066
+ "upload-inline-image"
4067
+ ),
4068
+ title: "Insert inline image",
4069
+ maxWidth: 360,
4070
+ actions: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
4071
+ /* @__PURE__ */ jsxRuntime.jsx(
4072
+ reactComponents.Button,
4073
+ {
4074
+ size: "small",
4075
+ disabled: isDisabled,
4076
+ onClick: handleOnClick,
4077
+ children: "Add"
4078
+ },
4079
+ "file-inline-upload-btn"
4080
+ ),
4081
+ /* @__PURE__ */ jsxRuntime.jsx(
4082
+ reactComponents.Button,
4083
+ {
4084
+ size: "small",
4085
+ disabled,
4086
+ onClick: () => setIsOpen(false),
4087
+ children: "Cancel"
4088
+ },
4089
+ "file-inline-upload-cancel"
4090
+ )
4091
+ ] }),
4092
+ children: /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { tokens: { childrenGap: 8 }, children: [
4093
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: "Upload", size: "small", children: /* @__PURE__ */ jsxRuntime.jsxs(
4094
+ "label",
4095
+ {
4096
+ style: {
4097
+ cursor: disabled ? "not-allowed" : "pointer",
4098
+ display: "flex",
4099
+ alignItems: "center",
4100
+ gap: 8,
4101
+ opacity: disabled ? 0.75 : 1
4092
4102
  },
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: [
4103
+ children: [
4104
+ /* @__PURE__ */ jsxRuntime.jsx(
4105
+ "input",
4106
+ {
4107
+ type: "file",
4108
+ accept: "image/*",
4109
+ style: { display: "none" },
4110
+ disabled,
4111
+ onChange: loadImage
4112
+ },
4113
+ "inline-image-upload"
4114
+ ),
4115
+ /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { horizontal: true, children: [
4108
4116
  /* @__PURE__ */ jsxRuntime.jsx(
4109
- "input",
4117
+ reactIcons.AttachFilled,
4110
4118
  {
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: [
4120
- /* @__PURE__ */ jsxRuntime.jsx(
4121
- reactIcons.AttachFilled,
4122
- {
4123
- style: {
4124
- fontSize: "16px",
4125
- color: disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#808080",
4126
- marginTop: 2
4127
- }
4119
+ style: {
4120
+ fontSize: "16px",
4121
+ color: disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#808080",
4122
+ marginTop: 2
4128
4123
  }
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
- ] });
4124
+ }
4125
+ ),
4126
+ !fileName && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: "#808080" }, children: "Upload File" })
4127
+ ] }),
4128
+ fileName && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: "#808080" }, children: fileName })
4129
+ ]
4130
+ }
4131
+ ) }),
4132
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: "Position", size: "small", children: /* @__PURE__ */ jsxRuntime.jsxs(
4133
+ reactComponents.Dropdown,
4134
+ {
4135
+ className: styles.alignDropdown,
4136
+ disabled,
4137
+ value: position === "full" ? "Full" : position === "right" ? "Right" : "Left",
4138
+ selectedOptions: [position ?? "left"],
4139
+ listbox: { style: { width: "120px" } },
4140
+ root: { style: { borderBottom: "1px solid black" } },
4141
+ onOptionSelect: (_, data) => setPosition(data.optionValue),
4142
+ children: [
4143
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Option, { value: "left", children: "Left" }, "left"),
4144
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Option, { value: "right", children: "Right" }, "right"),
4145
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Option, { value: "full", children: "Full" }, "full")
4146
+ ]
4147
+ }
4148
+ ) }),
4149
+ fileSizeError && /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MessageBar, { intent: "error", style: { marginTop: 4 }, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MessageBarBody, { children: fileSizeError }) }),
4150
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: "Alt Text", size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(
4151
+ reactComponents.Input,
4152
+ {
4153
+ placeholder: "Alt text",
4154
+ appearance: "underline",
4155
+ disabled,
4156
+ value: altText,
4157
+ onChange: (_, d) => setAltText(d.value)
4158
+ }
4159
+ ) })
4160
+ ] })
4161
+ }
4162
+ );
4168
4163
  };
4169
4164
  var InlineImagePlugin = () => {
4170
4165
  const [editor] = LexicalComposerContext.useLexicalComposerContext();
@@ -6665,76 +6660,75 @@ var TableItemPlugin = ({ disabled }) => {
6665
6660
  setColumns("");
6666
6661
  setIsOpen(false);
6667
6662
  };
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);
6663
+ return /* @__PURE__ */ jsxRuntime.jsx(
6664
+ AoModal,
6665
+ {
6666
+ isOpen: disabled ? false : isOpen,
6667
+ onOpenChange: (open) => {
6668
+ if (disabled) return;
6669
+ setIsOpen(open);
6670
+ if (open) {
6686
6671
  setRows("");
6687
6672
  setColumns("");
6688
6673
  }
6689
6674
  },
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"
6708
- }
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
- ] });
6675
+ trigger: /* @__PURE__ */ jsxRuntime.jsx(
6676
+ reactComponents.Button,
6677
+ {
6678
+ size: "small",
6679
+ title: "Add table",
6680
+ disabled,
6681
+ icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.TableAddRegular, { style: { color: iconColor } }),
6682
+ style: {
6683
+ background: isOpen && !disabled ? "#ebebeb" : "none",
6684
+ border: "none",
6685
+ margin: 2,
6686
+ opacity: disabled ? 0.55 : 1,
6687
+ cursor: disabled ? "not-allowed" : "pointer"
6688
+ }
6689
+ },
6690
+ "insert-table-nodes"
6691
+ ),
6692
+ title: "Insert table",
6693
+ maxWidth: 300,
6694
+ actions: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
6695
+ /* @__PURE__ */ jsxRuntime.jsx(
6696
+ reactComponents.Button,
6697
+ {
6698
+ size: "small",
6699
+ appearance: "primary",
6700
+ disabled: disabled || !rows || !columns,
6701
+ onClick: onAddTable,
6702
+ children: "Add"
6703
+ }
6704
+ ),
6705
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Button, { size: "small", disabled, onClick: () => setIsOpen(false), children: "Cancel" })
6706
+ ] }),
6707
+ children: /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { tokens: { childrenGap: 8 }, children: [
6708
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: "Rows", size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(
6709
+ reactComponents.Input,
6710
+ {
6711
+ autoFocus: !disabled,
6712
+ value: rows,
6713
+ placeholder: "Rows",
6714
+ appearance: "underline",
6715
+ disabled,
6716
+ onChange: (_, v) => setRows(v.value)
6717
+ }
6718
+ ) }),
6719
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: "Columns", size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(
6720
+ reactComponents.Input,
6721
+ {
6722
+ value: columns,
6723
+ placeholder: "Columns",
6724
+ appearance: "underline",
6725
+ disabled,
6726
+ onChange: (_, v) => setColumns(v.value)
6727
+ }
6728
+ ) })
6729
+ ] })
6730
+ }
6731
+ );
6738
6732
  };
6739
6733
  var YoutubeUploadPlugin = ({ disabled }) => {
6740
6734
  const [url, setURL] = React9.useState("");
@@ -6754,54 +6748,51 @@ var YoutubeUploadPlugin = ({ disabled }) => {
6754
6748
  setURL("");
6755
6749
  setIsOpen(false);
6756
6750
  };
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
- }
6751
+ return /* @__PURE__ */ jsxRuntime.jsx(
6752
+ AoModal,
6753
+ {
6754
+ isOpen: disabled ? false : isOpen,
6755
+ onOpenChange: (open) => {
6756
+ if (disabled) return;
6757
+ setIsOpen(open);
6758
+ if (open) setURL("");
6777
6759
  },
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,
6793
- {
6794
- autoFocus: !disabled,
6795
- disabled,
6796
- value: url,
6797
- appearance: "underline",
6798
- placeholder: "Add Youtube video URL",
6799
- onChange: (_, v) => setURL(v.value)
6760
+ trigger: /* @__PURE__ */ jsxRuntime.jsx(
6761
+ reactComponents.Button,
6762
+ {
6763
+ title: "Add youtube URL",
6764
+ size: "small",
6765
+ disabled,
6766
+ icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.VideoClipRegular, { style: { color: iconColor } }),
6767
+ style: {
6768
+ background: isOpen && !disabled ? "#ebebeb" : "none",
6769
+ border: "none",
6770
+ margin: 2,
6771
+ opacity: disabled ? 0.55 : 1,
6772
+ cursor: disabled ? "not-allowed" : "pointer"
6800
6773
  }
6801
- ) }) })
6802
- }
6803
- )
6804
- ] });
6774
+ },
6775
+ "upload-video"
6776
+ ),
6777
+ title: "Embed YouTube video",
6778
+ maxWidth: 320,
6779
+ actions: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
6780
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Button, { size: "small", disabled: disabled || !url, onClick: onHandleEmbeded, children: "Add" }),
6781
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Button, { size: "small", disabled, onClick: () => setIsOpen(false), children: "Cancel" })
6782
+ ] }),
6783
+ children: /* @__PURE__ */ jsxRuntime.jsx(react.Stack, { tokens: { childrenGap: 8 }, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: "URL", size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(
6784
+ reactComponents.Input,
6785
+ {
6786
+ autoFocus: !disabled,
6787
+ disabled,
6788
+ value: url,
6789
+ appearance: "underline",
6790
+ placeholder: "Add Youtube video URL",
6791
+ onChange: (_, v) => setURL(v.value)
6792
+ }
6793
+ ) }) })
6794
+ }
6795
+ );
6805
6796
  };
6806
6797
  var TextAlphaListLtrFilled = ({ style }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "1em", height: "1em", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", style, children: [
6807
6798
  /* @__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" }),