@examplary/ui 1.53.1 → 1.55.0

package/dist/components/rich-text/tiptap/comments/helpers.d.ts

@@ -0,0 +1,19 @@
+import type { Editor } from "@tiptap/core";
+import type { Node as PMNode } from "@tiptap/pm/model";
+import { CommentInfo, CommentReplyAttrs } from "./types";
+export declare function createId(): string;
+export declare function findComments(source: Editor | PMNode): CommentInfo[];
+export interface CommentReplyLocation {
+    attrs: CommentReplyAttrs;
+    pos: number;
+    nodeSize: number;
+}
+export declare function findReplies(source: Editor | PMNode, commentId: string): CommentReplyLocation[];
+export declare function locateReplyById(doc: PMNode, id: string): {
+    pos: number;
+    nodeSize: number;
+} | null;
+export declare function locateCommentRanges(doc: PMNode, id: string): {
+    from: number;
+    to: number;
+}[];

package/dist/components/rich-text/tiptap/comments/helpers.js

@@ -0,0 +1,95 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { nanoid } from "nanoid";
+export function createId() {
+    return "cm_".concat(nanoid());
+}
+export function findComments(source) {
+    var doc = "state" in source ? source.state.doc : source;
+    var rangesById = new Map();
+    doc.descendants(function (node, pos) {
+        var _a;
+        var mark = node.marks.find(function (m) { return m.type.name === "comment"; });
+        if (!mark)
+            return;
+        var attrs = mark.attrs;
+        var text = node.isText ? ((_a = node.text) !== null && _a !== void 0 ? _a : "") : "";
+        var existing = rangesById.get(attrs.id);
+        if (existing) {
+            existing.to = Math.max(existing.to, pos + node.nodeSize);
+            existing.text += text;
+            return;
+        }
+        rangesById.set(attrs.id, {
+            id: attrs.id,
+            from: pos,
+            to: pos + node.nodeSize,
+            text: text,
+            attrs: __assign({}, attrs),
+        });
+    });
+    return Array.from(rangesById.values()).map(function (range) { return (__assign(__assign({}, range.attrs), { from: range.from, to: range.to, text: range.text })); });
+}
+export function findReplies(source, commentId) {
+    var doc = "state" in source ? source.state.doc : source;
+    var replies = [];
+    doc.descendants(function (node, pos) {
+        if (node.type.name !== "inline-comment-reply" ||
+            node.attrs.commentId !== commentId) {
+            return;
+        }
+        replies.push({
+            attrs: node.attrs,
+            pos: pos,
+            nodeSize: node.nodeSize,
+        });
+    });
+    replies.sort(function (a, b) {
+        var _a, _b;
+        return new Date(((_a = a.attrs) === null || _a === void 0 ? void 0 : _a.createdAt) || 0).getTime() -
+            new Date(((_b = b.attrs) === null || _b === void 0 ? void 0 : _b.createdAt) || 0).getTime();
+    });
+    return replies;
+}
+export function locateReplyById(doc, id) {
+    var found = null;
+    doc.descendants(function (node, pos) {
+        if (found)
+            return false;
+        if (node.type.name === "inline-comment-reply" && node.attrs.id === id) {
+            found = { pos: pos, nodeSize: node.nodeSize };
+            return false;
+        }
+        return undefined;
+    });
+    return found;
+}
+export function locateCommentRanges(doc, id) {
+    var ranges = [];
+    doc.descendants(function (node, pos) {
+        var mark = node.marks.find(function (m) { return m.type.name === "comment" && m.attrs.id === id; });
+        if (!mark)
+            return;
+        ranges.push({ from: pos, to: pos + node.nodeSize });
+    });
+    ranges.sort(function (a, b) { return a.from - b.from; });
+    var merged = [];
+    for (var _i = 0, ranges_1 = ranges; _i < ranges_1.length; _i++) {
+        var r = ranges_1[_i];
+        var last = merged[merged.length - 1];
+        if (last && last.to === r.from)
+            last.to = r.to;
+        else
+            merged.push(__assign({}, r));
+    }
+    return merged;
+}

package/dist/components/rich-text/tiptap/comments/types.d.ts

@@ -0,0 +1,29 @@
+export type CommentAuthor = {
+    id: string;
+    name: string;
+    color?: string;
+};
+export interface CommentAttrs {
+    id: string;
+    createdBy?: CommentAuthor;
+    createdAt: string;
+    value: string;
+}
+export interface CommentInfo extends CommentAttrs {
+    from: number;
+    to: number;
+    text: string;
+}
+export interface CommentOptions {
+    createdBy?: CommentAuthor;
+}
+export interface CommentReplyAttrs {
+    id: string;
+    commentId: string;
+    createdBy?: CommentAuthor;
+    createdAt: string;
+    value: string;
+}
+export interface CommentReplyOptions {
+    createdBy?: CommentAuthor;
+}

package/dist/components/rich-text/tiptap/comments/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/rich-text/tiptap/extensions.js

@@ -14,6 +14,8 @@ import Link from "@tiptap/extension-link";
 import { TableKit } from "@tiptap/extension-table";
 import Typography from "@tiptap/extension-typography";
 import StarterKit from "@tiptap/starter-kit";
+import { CommentReply } from "./comments/comment-reply.js";
+import { Comment } from "./comments/comment.js";
 import ContentReference from "./content-reference.js";
 import FileAttachment from "./file-attachment.js";
 import { Mathematics } from "./mathematics.js";
@@ -39,5 +41,7 @@ export var defaultRichTextExtensions = [
 ];
 export var htmlRenderingRichTextExtensions = __spreadArray([
     Document,
-    Image
+    Image,
+    Comment,
+    CommentReply
 ], defaultRichTextExtensions, true);

package/dist/components/rich-text/tiptap/rich-text-formatting-menu.d.ts

@@ -1,4 +1,7 @@
 import { Editor } from "@tiptap/core";
-export declare const RichTextFormattingMenu: ({ editor }: {
+type RichTextFormattingMenuProps = {
     editor: Editor;
-}) => import("react/jsx-runtime").JSX.Element;
+    allowComments?: boolean;
+};
+export declare const RichTextFormattingMenu: ({ allowComments, editor, }: RichTextFormattingMenuProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/rich-text/tiptap/rich-text-formatting-menu.js

@@ -1,14 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useState } from "react";
-import { Trans } from "react-i18next";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { useEditorState } from "@tiptap/react";
 import { BubbleMenu } from "@tiptap/react/menus";
-import { BoldIcon, CropIcon, HighlighterIcon, ItalicIcon, LinkIcon, ListIcon, SquareFunctionIcon, TextQuoteIcon, TrashIcon, } from "lucide-react";
+import { BoldIcon, CropIcon, HighlighterIcon, ItalicIcon, LinkIcon, ListIcon, MessageCircleIcon, SquareFunctionIcon, TextQuoteIcon, TrashIcon, } from "lucide-react";
 import { CropPageClippingModal } from "./crop-page-clipping-modal";
 import { cn } from "../../../utils";
+import { FloatingMenu } from "../../ui/floating-menu";
 export var RichTextFormattingMenu = function (_a) {
-    var editor = _a.editor;
+    var allowComments = _a.allowComments, editor = _a.editor;
     var _b = useState(null), pageClipping = _b[0], setPageClipping = _b[1];
+    var t = useTranslation().t;
     var setLink = useCallback(function () {
         if (editor.isActive("link")) {
             var mark_1 = editor.chain().focus().extendMarkRange("link");
@@ -49,41 +51,105 @@ export var RichTextFormattingMenu = function (_a) {
             isPageClipping: ctx.editor.isActive("page-clipping"),
             isFileAttachment: ctx.editor.isActive("file-attachment"),
             isImage: ctx.editor.isActive("image"),
+            isComment: allowComments ? ctx.editor.isActive("comment") : false,
         }); },
     });
+    var actions = useMemo(function () {
+        var items = [];
+        if (allowComments) {
+            items.push({
+                icon: MessageCircleIcon,
+                label: t("formatting.comment"),
+                active: state.isComment,
+                action: function () { return editor.chain().focus().toggleComment().run(); },
+            });
+        }
+        if (state.isPageClipping) {
+            items.push({
+                icon: CropIcon,
+                label: t("formatting.crop.edit"),
+                active: state.isPageClipping,
+                action: function () { return setPageClipping(editor.getAttributes("page-clipping")); },
+            });
+        }
+        else if (state.isImage || state.isFileAttachment) {
+            items.push({
+                icon: TrashIcon,
+                label: t("formatting.delete"),
+                active: state.isImage || state.isFileAttachment,
+                action: function () { return editor.commands.deleteSelection(); },
+            });
+        }
+        else {
+            items.push({
+                icon: BoldIcon,
+                label: t("formatting.bold"),
+                active: state.isBold,
+                action: function () {
+                    return editor.chain().focus().toggleBold().run();
+                },
+            }, {
+                icon: ItalicIcon,
+                label: t("formatting.italic"),
+                active: state.isItalic,
+                action: function () {
+                    return editor.chain().focus().toggleItalic().run();
+                },
+            }, {
+                icon: HighlighterIcon,
+                label: t("formatting.highlight"),
+                active: state.isHighlight,
+                action: function () {
+                    return editor.chain().focus().toggleHighlight().run();
+                },
+            }, {
+                icon: LinkIcon,
+                label: t("formatting.link"),
+                active: state.isLink,
+                action: setLink,
+            }, {
+                icon: ListIcon,
+                label: t("formatting.bulletList"),
+                active: state.isBulletList,
+                action: function () {
+                    return editor.chain().focus().toggleBulletList().run();
+                },
+            }, {
+                icon: ListIcon,
+                label: t("formatting.orderedList"),
+                active: state.isOrderedList,
+                action: function () {
+                    return editor.chain().focus().toggleOrderedList().run();
+                },
+            }, {
+                icon: TextQuoteIcon,
+                label: t("formatting.blockquote"),
+                active: state.isBlockquote,
+                action: function () {
+                    return editor.chain().focus().toggleBlockquote().run();
+                },
+            }, {
+                icon: SquareFunctionIcon,
+                label: t("formatting.inlineMath"),
+                active: state.isInlineMath,
+                action: function () {
+                    return editor.chain().focus()
+                        .insertInlineMath({ latex: "" })
+                        .run();
+                },
+            });
+        }
+        return items;
+    }, [state, setLink, t, allowComments, editor]);
     if (!editor) {
         return null;
     }
-    if (state.isPageClipping) {
-        return (_jsxs(_Fragment, { children: [_jsx(CropPageClippingModal, { pageClipping: pageClipping, onClose: function () { return setPageClipping(null); }, onUpdate: function (newParameters) {
-                        setPageClipping(null);
-                        editor
-                            .chain()
-                            .focus()
-                            .updateAttributes("page-clipping", newParameters)
-                            .run();
-                    } }), _jsx(BubbleMenu, { editor: editor, children: _jsx("div", { className: "border p-0.5 gap-0.5 bg-white rounded-md flex items-center shadow-md text-xs font-medium select-none", children: _jsxs("span", { onClick: function () {
-                                return setPageClipping(editor.getAttributes("page-clipping"));
-                            }, className: "p-1 cursor-pointer flex items-center gap-1 pr-2 hover:bg-zinc-100 rounded-base", children: [_jsx(CropIcon, { className: "size-3.5 m-0.5" }), _jsx(Trans, { children: "formatting.crop.crop" })] }) }) })] }));
-    }
-    if (state.isImage || state.isFileAttachment) {
-        return (_jsx(BubbleMenu, { editor: editor, children: _jsx("div", { className: "border p-0.5 gap-0.5 bg-white rounded-md flex items-center shadow-md text-xs font-medium select-none", children: _jsxs("span", { onClick: function () { return editor.commands.deleteSelection(); }, className: "p-1 cursor-pointer flex items-center gap-1 pr-2 hover:bg-zinc-100 rounded-base", children: [_jsx(TrashIcon, { className: "size-3.5 m-0.5" }), _jsx(Trans, { children: "formatting.delete" })] }) }) }));
-    }
-    return (_jsx(BubbleMenu, { editor: editor, children: _jsxs("div", { className: "border p-0.5 gap-0.5 bg-white rounded-md flex items-center shadow-md text-xs font-medium select-none", children: [_jsx("span", { onClick: function () {
-                        return editor.chain().focus().toggleBold().run();
-                    }, className: cn("p-1 cursor-pointer", state.isBold ? "bg-zinc-200 rounded-base" : ""), children: _jsx(BoldIcon, { className: "size-3.5 m-0.5", strokeWidth: state.isBold ? 2.75 : 2 }) }), _jsx("span", { onClick: function () {
-                        return editor.chain().focus().toggleItalic().run();
-                    }, className: cn("p-1 cursor-pointer", state.isItalic ? "bg-zinc-200 rounded-base" : ""), children: _jsx(ItalicIcon, { className: "size-3.5 m-0.5", strokeWidth: state.isItalic ? 2.75 : 2 }) }), _jsx("span", { onClick: function () {
-                        return editor.chain().focus().toggleHighlight().run();
-                    }, className: cn("p-1 cursor-pointer", state.isHighlight ? "bg-zinc-200 rounded-base" : ""), children: _jsx(HighlighterIcon, { className: "size-3.5 m-0.5", strokeWidth: state.isHighlight ? 2.75 : 2 }) }), _jsx("span", { onClick: setLink, className: cn("p-1 cursor-pointer", state.isLink ? "bg-zinc-200 rounded-base" : ""), children: _jsx(LinkIcon, { className: "size-3.5 m-0.5", strokeWidth: state.isLink ? 2.75 : 2 }) }), _jsx("span", { onClick: function () {
-                        return editor.chain().focus().toggleBulletList().run();
-                    }, className: cn("p-1 cursor-pointer", state.isBulletList ? "bg-zinc-200 rounded-base" : ""), children: _jsx(ListIcon, { className: "size-3.5 m-0.5", strokeWidth: state.isBulletList ? 2.75 : 2 }) }), _jsx("span", { onClick: function () {
-                        return editor.chain().focus().toggleOrderedList().run();
-                    }, className: cn("p-1 cursor-pointer", state.isOrderedList ? "bg-zinc-200 rounded-base" : ""), children: _jsx(ListIcon, { className: "size-3.5 m-0.5", strokeWidth: state.isOrderedList ? 2.75 : 2 }) }), _jsx("span", { onClick: function () {
-                        return editor.chain().focus().toggleBlockquote().run();
-                    }, className: cn("p-1 cursor-pointer", state.isBlockquote ? "bg-zinc-200 rounded-base" : ""), children: _jsx(TextQuoteIcon, { className: "size-3.5 m-0.5", strokeWidth: state.isBlockquote ? 2.75 : 2 }) }), _jsx("span", { onClick: function () {
-                        return editor.chain().focus()
-                            .insertInlineMath({ latex: "" })
-                            .run();
-                    }, className: cn("p-1 cursor-pointer", state.isInlineMath ? "bg-zinc-200 rounded-base" : ""), children: _jsx(SquareFunctionIcon, { className: "size-3.5 m-0.5", strokeWidth: state.isInlineMath ? 2.75 : 2 }) })] }) }));
+    return (_jsxs(_Fragment, { children: [state.isPageClipping && (_jsx(CropPageClippingModal, { pageClipping: pageClipping, onClose: function () { return setPageClipping(null); }, onUpdate: function (newParameters) {
+                    setPageClipping(null);
+                    editor
+                        .chain()
+                        .focus()
+                        .updateAttributes("page-clipping", newParameters)
+                        .run();
+                } })), _jsx(BubbleMenu, { editor: editor, children: _jsx(FloatingMenu, { className: "ml-2 flex items-center gap-0.5", children: actions.map(function (item, index) { return (_jsx("button", { onClick: item.action, type: "button", title: item.label, "aria-label": item.label, className: cn("p-1 cursor-pointer flex items-center gap-1 hover:bg-zinc-100 rounded-md", item.active ? "bg-zinc-200" : ""), children: _jsx(item.icon, { className: "size-3.5 m-0.5" }) }, index)); }) }) })] }));
 };

package/dist/components/ui/comments.d.ts

@@ -0,0 +1,27 @@
+export type Comment = {
+    id?: string;
+    inReplyTo?: string;
+    value?: string;
+    createdAt?: string;
+    createdBy?: {
+        id: string;
+        name: string;
+        color?: string;
+    };
+    range?: [number, number];
+    quotation?: string;
+};
+type CommentItemProps = {
+    comment: Comment;
+    commentAuthor?: Comment["createdBy"];
+    onSave?: (value: string) => Promise<void> | void;
+    onResolve?: () => Promise<void> | void;
+    onReply?: () => void;
+    onDelete?: () => void;
+    onCancel?: () => void;
+    onEditingChange?: (id: string | undefined, editing: boolean) => void;
+    isTopLevel?: boolean;
+    className?: string;
+};
+export declare const CommentItem: ({ comment, onSave, onResolve, onReply, onDelete, onCancel, commentAuthor, onEditingChange, isTopLevel, className, }: CommentItemProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ui/comments.js

@@ -0,0 +1,142 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { Trans, useTranslation } from "react-i18next";
+import { formatDistanceToNow } from "date-fns";
+import { CheckIcon, MessageCircleIcon, MoreHorizontalIcon, PencilLineIcon, TrashIcon, } from "lucide-react";
+import { Avatar, getUserColor } from "./avatar";
+import { Button } from "./button";
+import { Popover, PopoverContent, PopoverItem, PopoverTrigger, } from "./popover";
+import { cn } from "../../utils";
+import { MinimalRichTextField } from "../rich-text/minimal-rich-text-field";
+import { RichTextDisplay } from "../rich-text/rich-text-display";
+export var CommentItem = function (_a) {
+    var _b, _c;
+    var comment = _a.comment, onSave = _a.onSave, onResolve = _a.onResolve, onReply = _a.onReply, onDelete = _a.onDelete, onCancel = _a.onCancel, commentAuthor = _a.commentAuthor, onEditingChange = _a.onEditingChange, _d = _a.isTopLevel, isTopLevel = _d === void 0 ? true : _d, className = _a.className;
+    var t = useTranslation().t;
+    var _e = useState(comment.value || ""), draft = _e[0], setDraft = _e[1];
+    var _f = useState(false), focused = _f[0], setFocused = _f[1];
+    var _g = useState(false), loading = _g[0], setLoading = _g[1];
+    var _h = useState(!comment.value && ((_b = comment.createdBy) === null || _b === void 0 ? void 0 : _b.id) === (commentAuthor === null || commentAuthor === void 0 ? void 0 : commentAuthor.id) && !!onSave), editing = _h[0], setEditing = _h[1];
+    useEffect(function () {
+        if (onEditingChange) {
+            onEditingChange(comment.id, editing);
+            return function () { return onEditingChange(comment.id, false); };
+        }
+    }, [editing, comment.id, onEditingChange]);
+    var quoteColor = useMemo(function () {
+        var _a, _b;
+        return ((_a = comment.createdBy) === null || _a === void 0 ? void 0 : _a.color) ||
+            (comment.createdBy && getUserColor((_b = comment.createdBy) === null || _b === void 0 ? void 0 : _b.id));
+    }, [comment.createdBy]);
+    return (_jsxs("div", { className: cn("flex gap-3 items-start", className), children: [_jsx(Avatar, { entity: __assign({ type: "user" }, (comment.createdBy || {})), size: 24 }), _jsxs("div", { className: "flex-1 flex flex-col gap-1", children: [_jsxs("div", { children: [_jsx("div", { className: cn("leading-[1] font-medium font-heading", !comment.createdAt && "py-1.25"), children: ((_c = comment.createdBy) === null || _c === void 0 ? void 0 : _c.name) || "Unknown User" }), comment.createdAt && (_jsx("div", { className: "text-xs font-normal text-zinc-500", children: formatDistanceToNow(new Date(comment.createdAt), {
+                                    addSuffix: true,
+                                }) }))] }), comment.quotation && (_jsxs("blockquote", { className: "mt-1 mb-2 pl-3.5 py-0.5 relative text-sm italic text-zinc-800 line-clamp-2", onClick: function () {
+                            if (!comment.id)
+                                return;
+                            var highlight = document.querySelector("[data-comment=\"".concat(comment.id, "\"]"));
+                            if (!highlight)
+                                return;
+                            highlight.scrollIntoView({
+                                behavior: "smooth",
+                                block: "center",
+                            });
+                            highlight.classList.add("highlighted");
+                            setTimeout(function () { return highlight.classList.remove("highlighted"); }, 1200);
+                        }, children: [comment.quotation, _jsx("span", { className: "absolute inset-0 right-auto w-0.75 rounded bg-zinc-600 opacity-50", style: { backgroundColor: quoteColor } })] })), editing ? (_jsxs(_Fragment, { children: [_jsx(MinimalRichTextField, { value: draft, "data-comment-input": comment.id, onChange: function (value) { return setDraft(value); }, onKeyDown: function (e) { return __awaiter(void 0, void 0, void 0, function () {
+                                    return __generator(this, function (_a) {
+                                        switch (_a.label) {
+                                            case 0:
+                                                if (!(e.key === "Enter" && e.metaKey)) return [3 /*break*/, 4];
+                                                e.preventDefault();
+                                                setLoading(true);
+                                                if (!(draft.trim().length > 0)) return [3 /*break*/, 4];
+                                                _a.label = 1;
+                                            case 1:
+                                                _a.trys.push([1, , 3, 4]);
+                                                return [4 /*yield*/, onSave(draft)];
+                                            case 2:
+                                                _a.sent();
+                                                setEditing(false);
+                                                return [3 /*break*/, 4];
+                                            case 3:
+                                                setLoading(false);
+                                                return [7 /*endfinally*/];
+                                            case 4: return [2 /*return*/];
+                                        }
+                                    });
+                                }); }, autoFocus: true, placeholder: comment.inReplyTo
+                                    ? t("formatting.comments.reply-placeholder")
+                                    : t("formatting.comments.comment-placeholder"), disabled: loading, className: cn("border border-border focus-within:border-border-accent", "px-3 py-2 text-sm font-normal rounded-3xl", "focus-within:rounded-xl focus-within:min-h-20 transition-all", focused && "rounded-xl min-h-20"), onFocus: function () { return setFocused(true); } }), _jsxs("div", { className: "flex items-center justify-end gap-2 mt-2", children: [onCancel && (_jsx(Button, { type: "button", variant: "secondary", size: "sm", disabled: loading, onClick: function () {
+                                            onCancel();
+                                            setDraft(comment.value || "");
+                                            setEditing(false);
+                                        }, children: _jsx(Trans, { children: "formatting.comments.cancel" }) })), _jsx(Button, { type: "button", onClick: function () { return __awaiter(void 0, void 0, void 0, function () {
+                                            return __generator(this, function (_a) {
+                                                switch (_a.label) {
+                                                    case 0:
+                                                        setLoading(true);
+                                                        _a.label = 1;
+                                                    case 1:
+                                                        _a.trys.push([1, , 3, 4]);
+                                                        return [4 /*yield*/, onSave(draft)];
+                                                    case 2:
+                                                        _a.sent();
+                                                        setEditing(false);
+                                                        return [3 /*break*/, 4];
+                                                    case 3:
+                                                        setLoading(false);
+                                                        return [7 /*endfinally*/];
+                                                    case 4: return [2 /*return*/];
+                                                }
+                                            });
+                                        }); }, disabled: !draft.trim() || loading, variant: "primary", size: "sm", title: "Save comment", "aria-label": "Save comment", children: _jsx(Trans, { children: "formatting.comments.save-comment" }) })] })] })) : (_jsx(RichTextDisplay, { className: "text-sm font-normal", children: comment.value || "" }))] }), !editing && (_jsxs("div", { children: [isTopLevel && onReply && (_jsx("button", { type: "button", onClick: function () { return onReply(); }, title: "Reply", "aria-label": "Reply", className: "p-1.5 cursor-pointer hover:bg-zinc-100 rounded-base", children: _jsx(MessageCircleIcon, { className: "size-3.5" }) })), isTopLevel && onResolve && (_jsx("button", { type: "button", onClick: function () { return onResolve(); }, title: "Resolve comment", "aria-label": "Resolve comment", className: "p-1.5 cursor-pointer hover:bg-zinc-100 rounded-base", children: _jsx(CheckIcon, { className: "size-3.5" }) })), (onDelete || onSave) && (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", title: "Comment options", "aria-label": "Comment options", className: "p-1.5 cursor-pointer hover:bg-zinc-100 rounded-base", children: _jsx(MoreHorizontalIcon, { className: "size-3.5" }) }) }), _jsxs(PopoverContent, { className: "p-0 gap-0 overflow-hidden min-w-32", children: [!!onSave && (_jsxs(PopoverItem, { onClick: function () {
+                                            setEditing(true);
+                                        }, className: "text-xs border-0", children: [_jsx(PencilLineIcon, { className: "size-3.5! mr-1" }), _jsx(Trans, { children: "formatting.comments.edit-comment" })] })), !!onDelete && (_jsxs(PopoverItem, { onClick: onDelete, className: "text-xs border-0", children: [_jsx(TrashIcon, { className: "size-3.5! mr-1" }), _jsx(Trans, { children: "formatting.comments.delete-comment" })] }))] })] }))] }))] }));
+};

package/dist/components/ui/floating-menu.d.ts

@@ -0,0 +1,6 @@
+type FloatingMenuProps = {
+    children: React.ReactNode;
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+export declare const FloatingMenu: ({ children, className, ...props }: FloatingMenuProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ui/floating-menu.js

@@ -0,0 +1,28 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../utils";
+export var FloatingMenu = function (_a) {
+    var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b, props = __rest(_a, ["children", "className"]);
+    return (_jsx("div", __assign({ className: cn("border border-zinc-600 p-0.5 bg-white rounded-lg shadow-md relative z-10 text-xs font-medium select-none", className) }, props, { children: children })));
+};

package/dist/components/ui/index.d.ts

@@ -28,3 +28,6 @@ export * from "./skeleton";
 export * from "./tabs";
 export * from "./context-menu";
 export * from "./avatar";
+export * from "./text-selection-menu";
+export * from "./floating-menu";
+export * from "./comments";

package/dist/components/ui/index.js

@@ -28,3 +28,6 @@ export * from "./skeleton";
 export * from "./tabs";
 export * from "./context-menu";
 export * from "./avatar";
+export * from "./text-selection-menu";
+export * from "./floating-menu";
+export * from "./comments";

package/dist/components/ui/text-selection-menu.d.ts

@@ -0,0 +1,17 @@
+import { Placement } from "@floating-ui/react";
+type TextSelectionContainerProps = {
+    children: React.ReactNode;
+    enabled: boolean;
+};
+type TextSelectionMenuProps = {
+    children: (selection: Selection, setSelection: React.Dispatch<React.SetStateAction<Selection | null>>) => React.ReactNode;
+    placement?: Placement;
+};
+type Selection = {
+    text: string;
+    range: Range;
+    rect: DOMRect;
+};
+export declare const TextSelectionContainer: ({ children, enabled, }: TextSelectionContainerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TextSelectionMenu: ({ children, placement, }: TextSelectionMenuProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ui/text-selection-menu.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useRef, useState, } from "react";
+import { offset, useFloating } from "@floating-ui/react";
+var TextSelectionContext = createContext(null);
+export var TextSelectionContainer = function (_a) {
+    var children = _a.children, _b = _a.enabled, enabled = _b === void 0 ? true : _b;
+    var containerRef = useRef(null);
+    var _c = useState(null), selection = _c[0], setSelection = _c[1];
+    var handleSelection = useCallback(function () {
+        if (!enabled)
+            return;
+        var sel = window.getSelection();
+        // No selection or collapsed (just a cursor)
+        if (!sel || sel.isCollapsed || sel.rangeCount === 0) {
+            setSelection(null);
+            return;
+        }
+        var range = sel.getRangeAt(0);
+        // Only react to selections inside our editor
+        if (containerRef.current &&
+            !containerRef.current.contains(range.commonAncestorContainer)) {
+            setSelection(null);
+            return;
+        }
+        var rect = range.getBoundingClientRect();
+        if (rect.width === 0 && rect.height === 0) {
+            setSelection(null);
+            return;
+        }
+        setSelection({ text: sel.toString(), range: range, rect: rect });
+    }, [containerRef, enabled]);
+    useEffect(function () {
+        if (!enabled) {
+            // eslint-disable-next-line react-hooks/set-state-in-effect
+            setSelection(null);
+            return;
+        }
+        document.addEventListener("selectionchange", handleSelection);
+        return function () {
+            return document.removeEventListener("selectionchange", handleSelection);
+        };
+    }, [handleSelection, enabled]);
+    return (_jsx(TextSelectionContext.Provider, { value: { selection: selection, setSelection: setSelection }, children: _jsx("div", { ref: containerRef, children: children }) }));
+};
+export var TextSelectionMenu = function (_a) {
+    var children = _a.children, _b = _a.placement, placement = _b === void 0 ? "top" : _b;
+    var _c = useContext(TextSelectionContext), selection = _c.selection, setSelection = _c.setSelection;
+    var _d = useFloating({
+        placement: placement,
+        strategy: "absolute",
+        middleware: [offset(8)],
+        elements: {
+            // sadly mis-typed in the library
+            reference: selection === null || selection === void 0 ? void 0 : selection.range,
+        },
+    }), refs = _d.refs, floatingStyles = _d.floatingStyles;
+    if (!selection)
+        return null;
+    return (
+    // eslint-disable-next-line react-hooks/refs
+    _jsx("div", { ref: refs.setFloating, style: floatingStyles, className: "z-10", children: children(selection, setSelection) }));
+};