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