@umodeapporg/ui 0.0.0-canary.ca10e69

package/dist/components/Form/RichTextEditor.js

@@ -0,0 +1,581 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { forwardRef, useRef, useState, useReducer, useCallback, useEffect, useImperativeHandle, useMemo } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import { ControlledMenuRoot, ControlledMenuHandler, ControlledMenuList, ControlledMenuItem } from "../UI/ControlledMenu.js";
+import { ControlledPopoverRoot, ControlledPopoverHandler, ControlledPopoverContent } from "../UI/ControlledPopover.js";
+import ControlledTooltip from "../UI/ControlledTooltip.js";
+import { activeRichTextColor, applyRichTextColor, buildFileChipMarkup, normalizeRichTextColorNodes, RICH_TEXT_COLORS, RICH_TEXT_COLOR_SWATCH_CLASS } from "../../helpers/richText.js";
+import { useFileAttachments } from "../../hooks/useFileAttachments.js";
+import { MaterialSymbol } from "../UI/MaterialSymbol/index.js";
+import AttachmentPreviewList from "./attachments/AttachmentPreviewList.js";
+import FileDropzone from "./attachments/FileDropzone.js";
+import ControlledButton from "./ControlledButton.js";
+import ControlledInput from "./ControlledInput.js";
+const TOOLBAR_GROUPS = [
+  {
+    buttons: [
+      { command: "bold", icon: "format_bold", tooltipKey: "createTask.rich.bold" },
+      { command: "italic", icon: "format_italic", tooltipKey: "createTask.rich.italic" },
+      { command: "strikeThrough", icon: "strikethrough_s", tooltipKey: "createTask.rich.strikethrough" }
+    ]
+  },
+  {
+    buttons: [
+      {
+        command: "insertUnorderedList",
+        icon: "format_list_bulleted",
+        tooltipKey: "createTask.rich.bulletList",
+        isBlock: true
+      },
+      {
+        command: "insertOrderedList",
+        icon: "format_list_numbered",
+        tooltipKey: "createTask.rich.numberedList",
+        isBlock: true
+      },
+      {
+        command: "formatBlock",
+        arg: "BLOCKQUOTE",
+        icon: "format_quote",
+        tooltipKey: "createTask.rich.quote",
+        isBlock: true
+      }
+    ]
+  },
+  {
+    buttons: [
+      { command: "indent", icon: "format_indent_increase", tooltipKey: "createTask.rich.indent" },
+      { command: "outdent", icon: "format_indent_decrease", tooltipKey: "createTask.rich.outdent" }
+    ]
+  }
+];
+const MENTION_QUERY_MAX_LENGTH = 40;
+const IMAGE_INPUT_ACCEPT = "image/*";
+const DROPZONE_OVERLAY_CLASS = "rounded-xl";
+const TOOLBAR_BUTTON_CLASS = "flex size-7 items-center justify-center rounded-lg transition-colors";
+const TOOLBAR_BUTTON_IDLE_CLASS = "text-foreground-subtle hover:bg-muted-hover hover:text-foreground-muted";
+const TOOLBAR_BUTTON_ACTIVE_CLASS = "bg-brand-soft text-brand-emphasis";
+const ACTION_BUTTON_CLASS = "flex size-8 items-center justify-center rounded-full text-foreground-faint transition-colors hover:bg-muted-hover hover:text-foreground-muted disabled:text-foreground-faint";
+const ACTION_BUTTON_ACTIVE_CLASS = "flex size-8 items-center justify-center rounded-full bg-brand-soft text-brand-emphasis transition-colors hover:bg-brand-soft";
+const isCommandActive = (command, arg) => {
+  try {
+    if (arg) return document.queryCommandValue(command) === arg.toLowerCase();
+    return document.queryCommandState(command);
+  } catch {
+    return false;
+  }
+};
+const RichTextEditor = forwardRef(function RichTextEditor2({
+  value = "",
+  onChange,
+  placeholder,
+  disabled = false,
+  error = false,
+  className,
+  minHeight = 120,
+  toolbarSlot,
+  actionsSlot,
+  onKeyDown,
+  onBlur,
+  onCommit,
+  variant = "default",
+  showToolbar = true,
+  formattingToggle = false,
+  attachments,
+  inlineUpload
+}, ref) {
+  const { t } = useTranslation("ui");
+  const editorRef = useRef(null);
+  const [activeCommands, setActiveCommands] = useState(/* @__PURE__ */ new Set());
+  const [activeColor, setActiveColor] = useState("default");
+  const [colorOpen, setColorOpen] = useState(false);
+  const [showLinkInput, setShowLinkInput] = useState(false);
+  const [linkUrl, setLinkUrl] = useState("");
+  const [isFocused, setIsFocused] = useState(false);
+  const [formattingOpen, setFormattingOpen] = useState(false);
+  const [, recheckPlaceholder] = useReducer((checkCount) => checkCount + 1, 0);
+  const savedRangeRef = useRef(null);
+  const caretBelongsAtEndRef = useRef(false);
+  const isInternalUpdateRef = useRef(false);
+  const fileInputRef = useRef(null);
+  const imageInputRef = useRef(null);
+  const insertedStagingIdsRef = useRef(/* @__PURE__ */ new Set());
+  const pendingColorRef = useRef("default");
+  const inlineController = useFileAttachments({
+    uploadFile: inlineUpload?.uploadFile,
+    maxFiles: inlineUpload?.maxFiles,
+    maxFileSizeBytes: inlineUpload?.maxFileSizeBytes
+  });
+  const attachmentsController = attachments?.controller ?? (inlineUpload ? inlineController : null);
+  const inlineStagedAttachments = inlineController.stagedAttachments;
+  const toolbarVisible = formattingToggle ? formattingOpen : showToolbar;
+  const moveCaretToEnd = useCallback((editor) => {
+    const range = document.createRange();
+    range.selectNodeContents(editor);
+    range.collapse(false);
+    const selection = window.getSelection();
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+    savedRangeRef.current = range.cloneRange();
+  }, []);
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    if (isInternalUpdateRef.current) return;
+    if (editor.innerHTML !== value) {
+      editor.innerHTML = value;
+      if (document.activeElement === editor) moveCaretToEnd(editor);
+      else caretBelongsAtEndRef.current = true;
+      recheckPlaceholder();
+    }
+  }, [moveCaretToEnd, value]);
+  const emitChange = useCallback(() => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    isInternalUpdateRef.current = true;
+    onChange?.(editor.innerHTML);
+    isInternalUpdateRef.current = false;
+  }, [onChange]);
+  const syncActiveCommands = useCallback(() => {
+    const active = /* @__PURE__ */ new Set();
+    TOOLBAR_GROUPS.flatMap((group) => group.buttons).forEach(({ command, arg }) => {
+      if (isCommandActive(command, arg)) active.add(arg ?? command);
+    });
+    setActiveCommands(active);
+    const editor = editorRef.current;
+    if (editor) setActiveColor(activeRichTextColor(editor));
+  }, []);
+  const execFormat = useCallback(
+    (command, arg) => {
+      const editor = editorRef.current;
+      if (!editor || disabled) return;
+      editor.focus();
+      document.execCommand(command, false, arg);
+      emitChange();
+      syncActiveCommands();
+    },
+    [disabled, emitChange, syncActiveCommands]
+  );
+  const saveRange = useCallback(() => {
+    const selection = window.getSelection();
+    if (selection && selection.rangeCount > 0) {
+      savedRangeRef.current = selection.getRangeAt(0).cloneRange();
+    }
+  }, []);
+  const restoreRange = useCallback(() => {
+    const range = savedRangeRef.current;
+    if (!range) return;
+    const selection = window.getSelection();
+    if (!selection) return;
+    selection.removeAllRanges();
+    selection.addRange(range);
+  }, []);
+  const applyLink = useCallback(() => {
+    const url = linkUrl.trim();
+    restoreRange();
+    if (url) execFormat("createLink", url.startsWith("http") ? url : `https://${url}`);
+    setShowLinkInput(false);
+    setLinkUrl("");
+  }, [linkUrl, restoreRange, execFormat]);
+  const handleApplyColor = useCallback(
+    (color) => {
+      const editor = editorRef.current;
+      if (!editor || disabled) return;
+      editor.focus();
+      restoreRange();
+      pendingColorRef.current = color;
+      applyRichTextColor(editor, color);
+      emitChange();
+      setActiveColor(color);
+      setColorOpen(false);
+    },
+    [disabled, emitChange, restoreRange]
+  );
+  const insertHtmlAtCaret = useCallback(
+    (html, commit = false) => {
+      const editor = editorRef.current;
+      if (!editor || disabled) return;
+      const previouslyFocused = document.activeElement;
+      const editorHadFocus = editor.contains(previouslyFocused);
+      editor.focus();
+      restoreRange();
+      const selection = window.getSelection();
+      const caretIsInside = selection?.anchorNode ? editor.contains(selection.anchorNode) : false;
+      if (!caretIsInside) {
+        const range = document.createRange();
+        range.selectNodeContents(editor);
+        range.collapse(false);
+        selection?.removeAllRanges();
+        selection?.addRange(range);
+      }
+      document.execCommand("insertHTML", false, html);
+      saveRange();
+      emitChange();
+      if (!editorHadFocus) previouslyFocused?.focus();
+      if (commit) onCommit?.(editor.innerHTML);
+    },
+    [disabled, emitChange, onCommit, restoreRange, saveRange]
+  );
+  const inlineControllerRef = useRef(inlineController);
+  inlineControllerRef.current = inlineController;
+  useEffect(() => {
+    if (!inlineUpload) return;
+    inlineStagedAttachments.forEach((staged) => {
+      const uploaded = staged.uploaded;
+      if (staged.status !== "done" || !uploaded) return;
+      if (!insertedStagingIdsRef.current.has(staged.stagingId)) {
+        insertedStagingIdsRef.current.add(staged.stagingId);
+        insertHtmlAtCaret(`${buildFileChipMarkup(uploaded)} `, true);
+      }
+      inlineControllerRef.current.removeAttachment(staged.stagingId);
+    });
+  }, [inlineUpload, inlineStagedAttachments, insertHtmlAtCaret]);
+  const handleInput = useCallback(() => {
+    const editor = editorRef.current;
+    if (editor) normalizeRichTextColorNodes(editor, pendingColorRef.current);
+    emitChange();
+    syncActiveCommands();
+  }, [emitChange, syncActiveCommands]);
+  const handleFilesPicked = (event) => {
+    const files = Array.from(event.target.files ?? []);
+    if (files.length) attachmentsController?.addFiles(files);
+    event.target.value = "";
+  };
+  const handlePaste = (event) => {
+    if (!attachmentsController) return;
+    const files = Array.from(event.clipboardData?.files ?? []);
+    if (!files.length) return;
+    event.preventDefault();
+    event.stopPropagation();
+    attachmentsController.addFiles(files);
+  };
+  useImperativeHandle(ref, () => ({
+    focus: () => editorRef.current?.focus(),
+    getCaretRect: () => {
+      const selection = window.getSelection();
+      if (!selection?.rangeCount) return null;
+      const range = selection.getRangeAt(0).cloneRange();
+      range.collapse(false);
+      const [rect] = Array.from(range.getClientRects());
+      if (rect) return rect;
+      const marker = document.createElement("span");
+      marker.textContent = "​";
+      range.insertNode(marker);
+      const markerRect = marker.getBoundingClientRect();
+      marker.remove();
+      return markerRect;
+    },
+    getMentionQuery: (trigger) => {
+      const selection = window.getSelection();
+      if (!selection?.rangeCount) return null;
+      const range = selection.getRangeAt(0);
+      if (!range.collapsed || range.startContainer.nodeType !== Node.TEXT_NODE) return null;
+      const textBeforeCaret = range.startContainer.textContent?.slice(0, range.startOffset) ?? "";
+      const escapedTrigger = trigger.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+      const match = new RegExp(`(?:^|\\s)${escapedTrigger}([^${escapedTrigger}]*)$`).exec(textBeforeCaret);
+      if (!match) return null;
+      const query = match[1];
+      if (query.startsWith(" ") || query.length > MENTION_QUERY_MAX_LENGTH) return null;
+      return query;
+    },
+    replaceTriggerWith: (trigger, query, html) => {
+      const editor = editorRef.current;
+      if (!editor || disabled) return;
+      editor.focus();
+      restoreRange();
+      const selection = window.getSelection();
+      const range = selection?.rangeCount ? selection.getRangeAt(0) : null;
+      if (range?.collapsed && range.startContainer.nodeType === Node.TEXT_NODE) {
+        const textBeforeCaret = range.startContainer.textContent?.slice(0, range.startOffset) ?? "";
+        const typed = `${trigger}${query}`;
+        if (textBeforeCaret.endsWith(typed)) {
+          range.setStart(range.startContainer, range.startOffset - typed.length);
+          range.deleteContents();
+        } else if (textBeforeCaret.endsWith(trigger)) {
+          range.setStart(range.startContainer, range.startOffset - trigger.length);
+          range.deleteContents();
+        }
+      }
+      document.execCommand("insertHTML", false, `${html} `);
+      emitChange();
+    }
+  }));
+  const isEmpty = !editorRef.current?.textContent?.trim() && !editorRef.current?.querySelector("img, li, blockquote");
+  const attachMenuActions = useMemo(
+    () => [
+      {
+        key: "file",
+        icon: "description",
+        label: t("followUp.attachments.pickFile"),
+        onClick: () => fileInputRef.current?.click()
+      },
+      {
+        key: "image",
+        icon: "image",
+        label: t("followUp.attachments.pickImage"),
+        onClick: () => imageInputRef.current?.click()
+      },
+      ...attachments?.extraActions ?? []
+    ],
+    [attachments?.extraActions, t]
+  );
+  const showPreviews = Boolean(attachmentsController) && !attachments?.hidePreviews;
+  const showActionsBar = Boolean(attachmentsController) || Boolean(actionsSlot) || formattingToggle;
+  const editorShell = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames(
+        "flex w-full flex-col transition-colors",
+        variant === "default" && "rounded-xl border bg-surface",
+        variant === "default" && (error ? "border-danger-border" : isFocused ? "border-brand-border ring-2 ring-brand-border" : "border-border"),
+        className
+      ),
+      children: [
+        toolbarVisible && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: classNames(
+              "flex flex-wrap items-center gap-px border-b px-2 py-1.5",
+              error ? "border-danger-border" : "border-border-subtle"
+            ),
+            children: [
+              TOOLBAR_GROUPS.map((group, groupIndex) => /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: classNames(
+                    "flex items-center gap-px",
+                    groupIndex < TOOLBAR_GROUPS.length - 1 && "mr-1 border-r border-border pr-1"
+                  ),
+                  children: group.buttons.map(({ command, arg, icon, tooltipKey }) => {
+                    const key = arg ?? command;
+                    const isActive = activeCommands.has(key);
+                    return /* @__PURE__ */ jsx(ControlledTooltip, { content: t(tooltipKey), children: /* @__PURE__ */ jsx(
+                      ControlledButton,
+                      {
+                        "aria-label": t(tooltipKey),
+                        defaultHtmlButton: true,
+                        disabled,
+                        onMouseDown: (event) => {
+                          event.preventDefault();
+                          execFormat(command, arg);
+                        },
+                        className: classNames(
+                          TOOLBAR_BUTTON_CLASS,
+                          isActive ? TOOLBAR_BUTTON_ACTIVE_CLASS : TOOLBAR_BUTTON_IDLE_CLASS,
+                          disabled && "cursor-not-allowed opacity-40"
+                        ),
+                        children: /* @__PURE__ */ jsx(MaterialSymbol, { icon, size: 18 })
+                      }
+                    ) }, key);
+                  })
+                },
+                groupIndex
+              )),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-px border-l border-border pl-1", children: [
+                /* @__PURE__ */ jsxs(ControlledPopoverRoot, { open: colorOpen, handler: setColorOpen, placement: "bottom-start", children: [
+                  /* @__PURE__ */ jsx(ControlledTooltip, { content: t("createTask.rich.textColor"), children: /* @__PURE__ */ jsx(ControlledPopoverHandler, { children: /* @__PURE__ */ jsx(
+                    ControlledButton,
+                    {
+                      "aria-label": t("createTask.rich.textColor"),
+                      defaultHtmlButton: true,
+                      disabled,
+                      onMouseDown: (event) => {
+                        event.preventDefault();
+                        saveRange();
+                      },
+                      className: classNames(
+                        TOOLBAR_BUTTON_CLASS,
+                        colorOpen ? TOOLBAR_BUTTON_ACTIVE_CLASS : TOOLBAR_BUTTON_IDLE_CLASS,
+                        disabled && "cursor-not-allowed opacity-40"
+                      ),
+                      children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "format_color_text", size: 18 })
+                    }
+                  ) }) }),
+                  /* @__PURE__ */ jsx(ControlledPopoverContent, { className: "zIndexMax w-44 p-2", children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: RICH_TEXT_COLORS.map((color) => /* @__PURE__ */ jsx(ControlledTooltip, { content: t(`createTask.rich.colors.${color}`), children: /* @__PURE__ */ jsx(
+                    ControlledButton,
+                    {
+                      "aria-label": t(`createTask.rich.colors.${color}`),
+                      defaultHtmlButton: true,
+                      "aria-pressed": activeColor === color,
+                      onMouseDown: (event) => {
+                        event.preventDefault();
+                        handleApplyColor(color);
+                      },
+                      className: classNames(
+                        "flex size-7 items-center justify-center rounded-lg border transition-colors",
+                        activeColor === color ? "border-brand-border ring-2 ring-brand-border" : "border-border"
+                      ),
+                      children: /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: classNames(
+                            "size-4 rounded-full",
+                            RICH_TEXT_COLOR_SWATCH_CLASS[color],
+                            color === "default" && "ring-1 ring-inset ring-border-strong"
+                          )
+                        }
+                      )
+                    }
+                  ) }, color)) }) })
+                ] }),
+                /* @__PURE__ */ jsx(ControlledTooltip, { content: t("createTask.rich.link"), children: /* @__PURE__ */ jsx(
+                  ControlledButton,
+                  {
+                    "aria-label": t("createTask.rich.link"),
+                    defaultHtmlButton: true,
+                    disabled,
+                    onMouseDown: (event) => {
+                      event.preventDefault();
+                      saveRange();
+                      setShowLinkInput((previous) => !previous);
+                    },
+                    className: classNames(
+                      TOOLBAR_BUTTON_CLASS,
+                      showLinkInput ? TOOLBAR_BUTTON_ACTIVE_CLASS : TOOLBAR_BUTTON_IDLE_CLASS,
+                      disabled && "cursor-not-allowed opacity-40"
+                    ),
+                    children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "link", size: 18 })
+                  }
+                ) })
+              ] }),
+              toolbarSlot && /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center gap-x-1", children: toolbarSlot })
+            ]
+          }
+        ),
+        showLinkInput && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-border-subtle bg-muted px-3 py-2", children: [
+          /* @__PURE__ */ jsx(
+            ControlledInput,
+            {
+              autoFocus: true,
+              value: linkUrl,
+              onChange: (event) => setLinkUrl(event.target.value),
+              placeholder: "https://",
+              "aria-label": t("createTask.rich.link"),
+              onKeyDown: (event) => {
+                if (event.key === "Enter") applyLink();
+                if (event.key === "Escape") setShowLinkInput(false);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(ControlledButton, { size: "sm", onClick: applyLink, children: t("actions.apply") }),
+          /* @__PURE__ */ jsx(ControlledButton, { size: "sm", variant: "outlined", tone: "neutral", onClick: () => setShowLinkInput(false), children: t("actions.cancel") })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: editorRef,
+              contentEditable: !disabled,
+              suppressContentEditableWarning: true,
+              onInput: handleInput,
+              onKeyDown,
+              onPaste: handlePaste,
+              onKeyUp: () => {
+                saveRange();
+                syncActiveCommands();
+              },
+              onMouseUp: () => {
+                saveRange();
+                syncActiveCommands();
+              },
+              onFocus: () => {
+                setIsFocused(true);
+                if (!caretBelongsAtEndRef.current || !editorRef.current) return;
+                caretBelongsAtEndRef.current = false;
+                moveCaretToEnd(editorRef.current);
+              },
+              onBlur: () => {
+                saveRange();
+                setIsFocused(false);
+                onBlur?.();
+              },
+              className: classNames(
+                "w-full px-3 py-2.5 text-sm text-foreground outline-none",
+                "[&_ol]:ml-4 [&_ol]:list-decimal [&_ul]:ml-4 [&_ul]:list-disc",
+                "[&_blockquote]:border-l-2 [&_blockquote]:border-brand-border [&_blockquote]:pl-3 [&_blockquote]:italic [&_blockquote]:text-foreground-subtle",
+                "[&_a]:text-brand-emphasis [&_a]:underline",
+                "[&_a.rt-file]:text-foreground-muted [&_a.rt-file]:no-underline",
+                "[&_a.rt-image-link]:no-underline",
+                "[&_user]:whitespace-nowrap [&_user]:rounded [&_user]:bg-brand-soft [&_user]:px-1 [&_user]:font-medium [&_user]:text-brand-emphasis",
+                disabled && "cursor-not-allowed opacity-60"
+              ),
+              style: { minHeight }
+            }
+          ),
+          isEmpty && !isFocused && placeholder && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-3 top-2.5 text-sm text-foreground-faint", children: placeholder })
+        ] }),
+        showPreviews && attachmentsController && attachmentsController.stagedAttachments.length > 0 && /* @__PURE__ */ jsx("div", { className: "px-3 pb-2", children: /* @__PURE__ */ jsx(
+          AttachmentPreviewList,
+          {
+            stagedAttachments: attachmentsController.stagedAttachments,
+            onRemove: attachmentsController.removeAttachment,
+            onRetry: attachmentsController.retryAttachment,
+            imageActions: attachments?.imageActions
+          }
+        ) }),
+        showActionsBar && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-0.5 px-2 pb-2 pt-0.5", children: [
+          formattingToggle && /* @__PURE__ */ jsx(ControlledTooltip, { content: t("followUp.chat.formatting"), className: "z-[9999]", children: /* @__PURE__ */ jsx(
+            ControlledButton,
+            {
+              "aria-label": t("followUp.chat.formatting"),
+              defaultHtmlButton: true,
+              disabled,
+              onClick: () => setFormattingOpen((previous) => !previous),
+              "aria-pressed": formattingOpen,
+              className: formattingOpen ? ACTION_BUTTON_ACTIVE_CLASS : ACTION_BUTTON_CLASS,
+              children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "format_size", size: 18 })
+            }
+          ) }),
+          attachmentsController && /* @__PURE__ */ jsxs(ControlledMenuRoot, { placement: "top-start", children: [
+            /* @__PURE__ */ jsx(ControlledTooltip, { content: t("followUp.attachments.attach"), className: "z-[9999]", children: /* @__PURE__ */ jsx(ControlledMenuHandler, { children: /* @__PURE__ */ jsx(
+              ControlledButton,
+              {
+                defaultHtmlButton: true,
+                "aria-label": t("followUp.attachments.attach"),
+                disabled,
+                className: ACTION_BUTTON_CLASS,
+                children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "attach_file", size: 18 })
+              }
+            ) }) }),
+            /* @__PURE__ */ jsx(ControlledMenuList, { className: "zIndexMax p-1", children: attachMenuActions.map((action) => /* @__PURE__ */ jsxs(ControlledMenuItem, { className: "flex items-center gap-x-2", onClick: action.onClick, children: [
+              /* @__PURE__ */ jsx(MaterialSymbol, { icon: action.icon, size: 18 }),
+              action.label
+            ] }, action.key)) })
+          ] }),
+          actionsSlot
+        ] }),
+        attachmentsController && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("input", { ref: fileInputRef, type: "file", multiple: true, hidden: true, onChange: handleFilesPicked }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: imageInputRef,
+              type: "file",
+              multiple: true,
+              hidden: true,
+              accept: IMAGE_INPUT_ACCEPT,
+              onChange: handleFilesPicked
+            }
+          )
+        ] })
+      ]
+    }
+  );
+  if (!attachmentsController || attachments?.hideDropzone) return editorShell;
+  return /* @__PURE__ */ jsx(
+    FileDropzone,
+    {
+      stopPropagation: true,
+      disabled,
+      className: "flex-none",
+      overlayClassName: DROPZONE_OVERLAY_CLASS,
+      onFilesDropped: (files) => attachmentsController.addFiles(files),
+      children: editorShell
+    }
+  );
+});
+export {
+  RichTextEditor as default
+};
+//# sourceMappingURL=RichTextEditor.js.map