@choice-ui/react 1.3.10

package/dist/cjs/components/comments/src/comment-input/components/comment-input-footer.cjs

@@ -0,0 +1,126 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require$$0 = require("react/jsx-runtime");
+const index$1 = require("../../../../button/dist/index.cjs");
+const index = require("../../../../icon-button/dist/index.cjs");
+const iconsReact = require("@choiceform/icons-react");
+const React = require("react");
+const tv = require("../tv.cjs");
+const CommentInputFooter = (props) => {
+  const {
+    className,
+    onEmojiClick,
+    onMentionClick,
+    onImageUpload,
+    onSubmit,
+    onCancel,
+    disabled = false,
+    typing = false,
+    allowSubmission = false,
+    isEditMode = false,
+    emojiButtonRef,
+    disableImageUpload = false,
+    imageCount = 0,
+    maxImageCount = 5,
+    hasOnlyImages = false,
+    defaultText
+  } = props;
+  const fileInputRef = React.useRef(null);
+  const handleImageButtonClick = () => {
+    var _a;
+    if (disableImageUpload) return;
+    (_a = fileInputRef.current) == null ? void 0 : _a.click();
+  };
+  const styles = tv.CommentInputTv({ typing });
+  const getImageTooltipText = () => {
+    if (disableImageUpload) {
+      return `${defaultText.UPLOAD_ATTACHMENT} (${imageCount}/${maxImageCount})`;
+    }
+    return `${defaultText.UPLOAD_ATTACHMENT} (${imageCount}/${maxImageCount})`;
+  };
+  const isSubmitDisabled = disabled || !allowSubmission || hasOnlyImages;
+  return /* @__PURE__ */ require$$0.jsxs("div", { className: styles.footer({ className }), children: [
+    typing && /* @__PURE__ */ require$$0.jsxs("div", { className: styles.footerActions(), children: [
+      /* @__PURE__ */ require$$0.jsx(
+        index.IconButton,
+        {
+          ref: emojiButtonRef,
+          onClick: onEmojiClick,
+          tooltip: {
+            content: defaultText.ADD_EMOJI
+          },
+          children: /* @__PURE__ */ require$$0.jsx(iconsReact.Smile, {})
+        }
+      ),
+      /* @__PURE__ */ require$$0.jsx(
+        index.IconButton,
+        {
+          onClick: onMentionClick,
+          tooltip: {
+            content: defaultText.ADD_MENTION
+          },
+          children: /* @__PURE__ */ require$$0.jsx(iconsReact.AtSign, {})
+        }
+      ),
+      /* @__PURE__ */ require$$0.jsxs(
+        index.IconButton,
+        {
+          onClick: handleImageButtonClick,
+          disabled: disableImageUpload,
+          tooltip: {
+            content: getImageTooltipText()
+          },
+          children: [
+            /* @__PURE__ */ require$$0.jsx(iconsReact.Image, {}),
+            /* @__PURE__ */ require$$0.jsx(
+              "input",
+              {
+                ref: fileInputRef,
+                type: "file",
+                accept: "image/*",
+                multiple: true,
+                onChange: onImageUpload,
+                className: "hidden",
+                disabled: disableImageUpload
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    isEditMode ? /* @__PURE__ */ require$$0.jsxs("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ require$$0.jsx(
+        index$1.Button,
+        {
+          variant: "secondary",
+          onClick: onCancel,
+          children: defaultText.CANCEL
+        }
+      ),
+      /* @__PURE__ */ require$$0.jsx(
+        index$1.Button,
+        {
+          variant: "primary",
+          onClick: onSubmit,
+          disabled: isSubmitDisabled,
+          children: defaultText.SAVE
+        }
+      )
+    ] }) : (
+      /* Submit Button */
+      /* @__PURE__ */ require$$0.jsx(
+        index$1.Button,
+        {
+          onClick: onSubmit,
+          disabled: isSubmitDisabled,
+          className: "w-6 rounded-full border-none px-0",
+          tooltip: {
+            content: defaultText.SUBMIT
+          },
+          children: /* @__PURE__ */ require$$0.jsx(iconsReact.ArrowUp, {})
+        }
+      )
+    )
+  ] });
+};
+exports.CommentInputFooter = CommentInputFooter;

package/dist/cjs/components/comments/src/comment-input/components/comment-input-mention-popover.cjs

@@ -0,0 +1,289 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require$$0 = require("react/jsx-runtime");
+const index$1 = require("../../../../avatar/dist/index.cjs");
+const index = require("../../../../menus/dist/index.cjs");
+const react = require("@floating-ui/react");
+const React = require("react");
+const reactDom = require("react-dom");
+const slateReact = require("slate-react");
+const usehooksTs = require("usehooks-ts");
+const PORTAL_ROOT_ID = "floating-menu-root";
+const CommentInputMentionPopover = ({
+  target,
+  editor,
+  users,
+  searchText,
+  selectedIndex,
+  onSelectMention,
+  onKeyNavigation
+}) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [scrollTop, setScrollTop] = React.useState(0);
+  const [isPositioned, setIsPositioned] = React.useState(false);
+  const [activeIndex, setActiveIndex] = React.useState(selectedIndex);
+  const [forceUpdate, setForceUpdate] = React.useState(0);
+  const [needsScrolling, setNeedsScrolling] = React.useState(false);
+  const scrollRef = React.useRef(null);
+  const elementsRef = React.useRef([]);
+  const labelsRef = React.useRef([]);
+  const resizeObserverRef = React.useRef(null);
+  React.useEffect(() => {
+    setActiveIndex(selectedIndex);
+  }, [selectedIndex]);
+  React.useEffect(() => {
+    labelsRef.current = users.map((user) => user.name);
+  }, [users]);
+  const filteredUsers = React.useMemo(
+    () => searchText ? users.filter((user) => user.name.toLowerCase().includes(searchText.toLowerCase())) : users,
+    [users, searchText]
+  );
+  const checkNeedsScrolling = React.useCallback(() => {
+    if (!scrollRef.current) return false;
+    const needsScroll = scrollRef.current.scrollHeight > scrollRef.current.clientHeight;
+    if (needsScrolling !== needsScroll) {
+      setNeedsScrolling(needsScroll);
+    }
+    return needsScroll;
+  }, [needsScrolling]);
+  const handleSelectWithFocus = React.useCallback(
+    (user) => {
+      onSelectMention(user);
+      setTimeout(() => {
+        try {
+          slateReact.ReactEditor.focus(editor);
+        } catch (error) {
+          console.warn("Failed to focus editor after mention selection:", error);
+        }
+      }, 10);
+    },
+    [editor, onSelectMention]
+  );
+  React.useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      setForceUpdate((prev) => prev + 1);
+      if (scrollRef.current) {
+        scrollRef.current.scrollTop = 0;
+        setScrollTop(0);
+        checkNeedsScrolling();
+      }
+    }, 0);
+    return () => clearTimeout(timeoutId);
+  }, [filteredUsers.length, checkNeedsScrolling]);
+  React.useEffect(() => {
+    if (!resizeObserverRef.current && typeof ResizeObserver !== "undefined") {
+      resizeObserverRef.current = new ResizeObserver(() => {
+        if (isOpen) {
+          setForceUpdate((prev) => prev + 1);
+          checkNeedsScrolling();
+        }
+      });
+    }
+    return () => {
+      if (resizeObserverRef.current) {
+        resizeObserverRef.current.disconnect();
+      }
+    };
+  }, [isOpen, checkNeedsScrolling]);
+  React.useEffect(() => {
+    const currentScrollRef = scrollRef.current;
+    const currentResizeObserver = resizeObserverRef.current;
+    if (currentScrollRef && currentResizeObserver) {
+      currentResizeObserver.observe(currentScrollRef);
+      return () => {
+        currentResizeObserver.unobserve(currentScrollRef);
+      };
+    }
+  }, [isOpen]);
+  const { refs, floatingStyles, context, update } = react.useFloating({
+    open: isOpen && !!target && filteredUsers.length > 0,
+    onOpenChange: React.useCallback((open) => {
+      setIsOpen(open);
+    }, []),
+    placement: "bottom-start",
+    middleware: [
+      react.offset({ mainAxis: 6 }),
+      react.shift({ padding: 4 }),
+      react.size({
+        padding: 4,
+        apply({ elements, availableHeight, rects }) {
+          var _a;
+          const contentHeight = ((_a = scrollRef.current) == null ? void 0 : _a.scrollHeight) || elements.floating.scrollHeight;
+          const calculatedHeight = Math.min(contentHeight, availableHeight - 8);
+          Object.assign(elements.floating.style, {
+            maxHeight: `${calculatedHeight}px`,
+            overflow: "hidden"
+          });
+          if (scrollRef.current) {
+            scrollRef.current.style.maxHeight = `${calculatedHeight}px`;
+          }
+          if (!elements.floating.style.width) {
+            elements.floating.style.minWidth = "220px";
+          }
+          setIsPositioned(true);
+          setTimeout(checkNeedsScrolling, 0);
+        }
+      })
+    ],
+    whileElementsMounted: react.autoUpdate
+  });
+  React.useEffect(() => {
+    if (isOpen && forceUpdate > 0) {
+      update();
+    }
+  }, [isOpen, forceUpdate, update]);
+  const handleNavigate = React.useCallback(
+    (nextIndex) => {
+      if (nextIndex !== null) {
+        setActiveIndex(nextIndex);
+        onKeyNavigation(nextIndex);
+      }
+    },
+    [onKeyNavigation]
+  );
+  const listNavigation = react.useListNavigation(context, {
+    listRef: elementsRef,
+    activeIndex,
+    onNavigate: handleNavigate,
+    loop: true,
+    enabled: true,
+    focusItemOnOpen: false,
+    scrollItemIntoView: true,
+    // 启用内置滚动支持
+    virtual: true
+  });
+  const role = react.useRole(context, { role: "menu" });
+  const dismiss = react.useDismiss(context);
+  const { getFloatingProps, getItemProps } = react.useInteractions([listNavigation, role, dismiss]);
+  const handleScroll = React.useCallback(
+    ({ currentTarget }) => {
+      reactDom.flushSync(() => {
+        setScrollTop(currentTarget.scrollTop);
+        checkNeedsScrolling();
+      });
+    },
+    [checkNeedsScrolling]
+  );
+  const handleArrowScroll = usehooksTs.useEventCallback((amount) => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop -= amount;
+      reactDom.flushSync(() => {
+        var _a;
+        setScrollTop(((_a = scrollRef.current) == null ? void 0 : _a.scrollTop) ?? 0);
+        checkNeedsScrolling();
+      });
+    }
+  });
+  usehooksTs.useEventCallback(() => {
+  });
+  React.useEffect(() => {
+    if (target && filteredUsers.length > 0) {
+      try {
+        const domRange = slateReact.ReactEditor.toDOMRange(editor, target);
+        const rect = domRange.getBoundingClientRect();
+        refs.setPositionReference({
+          getBoundingClientRect: () => rect,
+          contextElement: domRange.commonAncestorContainer.parentElement
+        });
+        setIsOpen(true);
+      } catch (error) {
+        console.error("Failed to position popover:", error);
+        setIsOpen(false);
+      }
+    } else {
+      setIsOpen(false);
+    }
+  }, [target, filteredUsers.length, editor, searchText, refs]);
+  React.useEffect(() => {
+    if (isOpen && filteredUsers.length > 0) {
+      if (activeIndex === -1 || activeIndex >= filteredUsers.length) {
+        setActiveIndex(0);
+        onKeyNavigation(0);
+      }
+    }
+  }, [isOpen, filteredUsers.length, activeIndex, onKeyNavigation]);
+  if (!isOpen || !target || filteredUsers.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ require$$0.jsx(react.FloatingPortal, { id: PORTAL_ROOT_ID, children: /* @__PURE__ */ require$$0.jsx(
+    react.FloatingOverlay,
+    {
+      lockScroll: false,
+      className: "z-menu",
+      children: /* @__PURE__ */ require$$0.jsx(
+        "div",
+        {
+          ref: refs.setFloating,
+          style: {
+            ...floatingStyles,
+            overflow: "hidden"
+          },
+          ...getFloatingProps({
+            onContextMenu(e) {
+              e.preventDefault();
+            }
+          }),
+          children: /* @__PURE__ */ require$$0.jsxs(
+            react.FloatingList,
+            {
+              elementsRef,
+              labelsRef,
+              children: [
+                /* @__PURE__ */ require$$0.jsx(
+                  index.Menus,
+                  {
+                    ref: scrollRef,
+                    onScroll: handleScroll,
+                    style: { overflow: "auto" },
+                    children: filteredUsers.map((user, index$2) => /* @__PURE__ */ require$$0.jsxs(
+                      index.MenuItem,
+                      {
+                        active: index$2 === activeIndex,
+                        onMouseUp: () => handleSelectWithFocus(user),
+                        onMouseEnter: () => {
+                          onKeyNavigation(index$2);
+                          checkNeedsScrolling();
+                        },
+                        ref: (node) => {
+                          elementsRef.current[index$2] = node;
+                        },
+                        ...getItemProps({
+                          role: "menuitem"
+                        }),
+                        children: [
+                          user.photo_url ? /* @__PURE__ */ require$$0.jsx(
+                            index$1.Avatar,
+                            {
+                              photo: user.photo_url,
+                              name: user.name,
+                              size: "small"
+                            }
+                          ) : null,
+                          /* @__PURE__ */ require$$0.jsx("span", { className: "flex-1 truncate", children: user.name })
+                        ]
+                      },
+                      user.id
+                    ))
+                  }
+                ),
+                needsScrolling && ["up", "down"].map((dir) => /* @__PURE__ */ require$$0.jsx(
+                  index.MenuScrollArrow,
+                  {
+                    dir,
+                    scrollTop,
+                    scrollRef,
+                    innerOffset: 0,
+                    isPositioned,
+                    onScroll: handleArrowScroll
+                  },
+                  dir
+                ))
+              ]
+            }
+          )
+        }
+      )
+    }
+  ) });
+};
+exports.CommentInputMentionPopover = CommentInputMentionPopover;

package/dist/cjs/components/comments/src/comment-input/components/comment-input-plugins.cjs

@@ -0,0 +1,215 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const slate = require("slate");
+const commentInputUtils = require("../utils/comment-input-utils.cjs");
+const withImages = (editor) => {
+  const { isVoid, isInline, insertData, deleteBackward, deleteForward } = editor;
+  editor.isVoid = (element) => {
+    return commentInputUtils.isImageElement(element) || isVoid(element);
+  };
+  editor.isInline = (element) => {
+    return commentInputUtils.isImageElement(element) ? false : isInline(element);
+  };
+  editor.insertData = (data) => {
+    const { files } = data;
+    if (files && files.length > 0) {
+      insertData(data);
+      return;
+    }
+    const html = data.getData("text/html");
+    if (html && html.includes("<img")) {
+      insertData(data);
+      return;
+    }
+    insertData(data);
+  };
+  editor.deleteBackward = (unit) => {
+    const { selection } = editor;
+    if (selection && slate.Range.isCollapsed(selection)) {
+      const nodeEntries = Array.from(
+        slate.Editor.nodes(editor, {
+          match: (n) => commentInputUtils.isImageElement(n),
+          at: selection
+        })
+      );
+      if (nodeEntries.length > 0) {
+        return;
+      }
+      try {
+        const prev = slate.Editor.previous(editor);
+        if (prev && prev[0] && commentInputUtils.isImageElement(prev[0])) {
+          slate.Transforms.removeNodes(editor, { at: prev[1] });
+          return;
+        }
+      } catch (error) {
+        console.error("Error checking previous node:", error);
+      }
+    }
+    deleteBackward(unit);
+  };
+  editor.deleteForward = (unit) => {
+    const { selection } = editor;
+    if (selection && slate.Range.isCollapsed(selection)) {
+      const nodeEntries = Array.from(
+        slate.Editor.nodes(editor, {
+          match: (n) => commentInputUtils.isImageElement(n),
+          at: selection
+        })
+      );
+      if (nodeEntries.length > 0) {
+        return;
+      }
+      try {
+        const next = slate.Editor.next(editor);
+        if (next && next[0] && commentInputUtils.isImageElement(next[0])) {
+          slate.Transforms.removeNodes(editor, { at: next[1] });
+          return;
+        }
+      } catch (error) {
+        console.error("Error checking next node:", error);
+      }
+    }
+    deleteForward(unit);
+  };
+  return editor;
+};
+const withMentions = (editor) => {
+  const { isInline, isVoid, markableVoid, deleteBackward, deleteForward } = editor;
+  editor.isInline = (element) => {
+    return element.type === "mention" ? true : isInline(element);
+  };
+  editor.isVoid = (element) => {
+    return element.type === "mention" ? true : isVoid(element);
+  };
+  editor.markableVoid = (element) => {
+    return element.type === "mention" || markableVoid(element);
+  };
+  editor.deleteBackward = (unit) => {
+    const { selection } = editor;
+    if (selection && slate.Range.isCollapsed(selection)) {
+      try {
+        const customEditor = editor;
+        const prevEntry = slate.Editor.previous(customEditor);
+        if (prevEntry && commentInputUtils.isMentionElement(prevEntry[0])) {
+          slate.Transforms.removeNodes(customEditor, { at: prevEntry[1] });
+          return;
+        }
+      } catch (error) {
+        console.warn("Error in deleteBackward with mention:", error);
+      }
+    }
+    deleteBackward(unit);
+  };
+  editor.deleteForward = (unit) => {
+    const { selection } = editor;
+    if (selection && slate.Range.isCollapsed(selection)) {
+      try {
+        const customEditor = editor;
+        const nextEntry = slate.Editor.next(customEditor);
+        if (nextEntry && commentInputUtils.isMentionElement(nextEntry[0])) {
+          slate.Transforms.removeNodes(customEditor, { at: nextEntry[1] });
+          return;
+        }
+      } catch (error) {
+        console.warn("Error in deleteForward with mention:", error);
+      }
+    }
+    deleteForward(unit);
+  };
+  return editor;
+};
+const insertMention = (editor, user) => {
+  try {
+    slate.Transforms.delete(editor);
+    const mention = {
+      type: "mention",
+      user,
+      children: [{ text: "" }]
+    };
+    slate.Transforms.insertNodes(editor, mention);
+    slate.Transforms.move(editor);
+    try {
+      const { selection } = editor;
+      if (selection) {
+        const [node, path] = slate.Editor.node(editor, selection);
+        const isAtBlockEnd = slate.Point.equals(selection.anchor, slate.Editor.end(editor, path));
+        if (!isAtBlockEnd) {
+          slate.Transforms.insertText(editor, " ");
+        }
+      }
+    } catch (error) {
+      try {
+        slate.Transforms.insertText(editor, " ");
+      } catch (innerError) {
+        console.warn("Failed to insert space after mention:", innerError);
+      }
+    }
+  } catch (error) {
+    console.error("Error inserting mention:", error);
+    try {
+      const [firstNode] = slate.Editor.first(editor, []);
+      if (firstNode) {
+        slate.Transforms.select(editor, slate.Editor.start(editor, [0]));
+      }
+    } catch (recoveryError) {
+      console.warn("Failed to recover editor state:", recoveryError);
+    }
+  }
+};
+const withHtml = (editor) => {
+  const { insertData } = editor;
+  editor.insertData = (data) => {
+    const html = data.getData("text/html");
+    if (html) {
+      const parsed = new DOMParser().parseFromString(html, "text/html");
+      const fragment = deserializeHtml(parsed.body);
+      slate.Transforms.insertFragment(editor, fragment);
+      return;
+    }
+    insertData(data);
+  };
+  return editor;
+};
+const deserializeHtml = (el) => {
+  if (el.nodeType === 3) {
+    return [{ text: el.textContent ?? "" }];
+  }
+  if (el.nodeType !== 1) {
+    return [];
+  }
+  const children = Array.from(el.childNodes).flatMap((node) => deserializeHtml(node));
+  if (children.length === 0) {
+    children.push({ text: "" });
+  }
+  if (el.nodeName === "BODY") {
+    return children;
+  }
+  if (el.nodeName === "B" || el.nodeName === "STRONG") {
+    return children.map((child) => ({ ...child, bold: true }));
+  }
+  if (el.nodeName === "I" || el.nodeName === "EM") {
+    return children.map((child) => ({ ...child, italic: true }));
+  }
+  if (el.nodeName === "U") {
+    return children.map((child) => ({ ...child, underline: true }));
+  }
+  switch (el.nodeName) {
+    case "P":
+      return [{ type: "paragraph", children }];
+    case "LI":
+      return [{ type: "list-item", children }];
+    case "OL":
+      return [{ type: "numbered-list", children }];
+    case "UL":
+      return [{ type: "bulleted-list", children }];
+    case "DIV":
+    case "SPAN":
+      return children;
+    default:
+      return [{ type: "paragraph", children }];
+  }
+};
+exports.insertMention = insertMention;
+exports.withHtml = withHtml;
+exports.withImages = withImages;
+exports.withMentions = withMentions;