@examplary/ui 1.53.1 → 1.55.0

package/dist/components/rich-text/minimal-rich-text-field.d.ts

@@ -1,5 +1,6 @@
 import { Editor, EditorContentProps } from "@tiptap/react";
 import { XmlFragment } from "yjs";
+import { CommentAuthor } from "./tiptap/comments/types";
 export declare const getEditorById: (id: string) => Editor;
 export type MinimalRichTextFieldProps = {
     className?: string;
@@ -7,6 +8,7 @@ export type MinimalRichTextFieldProps = {
     defaultValue?: string;
     placeholder?: string;
     style?: string;
+    commentAuthor?: CommentAuthor;
     onChange?: (value: string) => void;
     onBlur?: (value: string) => void;
     slotBefore?: (editor: any) => React.ReactNode;
@@ -21,4 +23,4 @@ export type MinimalRichTextFieldProps = {
     fragment?: XmlFragment;
     awareness?: any;
 } & Omit<EditorContentProps, "editor">;
-export declare const MinimalRichTextField: ({ className, value, defaultValue, placeholder, onChange, onBlur, slotBefore, style, singleLine, autoFocus, showFormattingMenu, uploadFile, fragment, awareness, id, ...props }: MinimalRichTextFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MinimalRichTextField: ({ className, value, defaultValue, placeholder, onChange, onBlur, slotBefore, style, singleLine, autoFocus, showFormattingMenu, commentAuthor, uploadFile, fragment, awareness, id, ...props }: MinimalRichTextFieldProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/rich-text/minimal-rich-text-field.js

@@ -40,6 +40,9 @@ import { EditorContent, useEditor, } from "@tiptap/react";
 import { CollaborationCaret } from "./tiptap/collaboration-caret";
 import { cn } from "../../utils";
 import { registerWebComponents } from "../web-components";
+import { Comment } from "./tiptap/comments/comment";
+import { CommentBubble } from "./tiptap/comments/comment-bubble";
+import { CommentReply } from "./tiptap/comments/comment-reply";
 import { defaultRichTextExtensions } from "./tiptap/extensions";
 import { fileHandler } from "./tiptap/file-handler";
 import Image from "./tiptap/image";
@@ -81,7 +84,7 @@ var isEmpty = function (value) {
     return false;
 };
 export var MinimalRichTextField = function (_a) {
-    var _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.value, value = _c === void 0 ? "" : _c, defaultValue = _a.defaultValue, _d = _a.placeholder, placeholder = _d === void 0 ? "" : _d, onChange = _a.onChange, onBlur = _a.onBlur, slotBefore = _a.slotBefore, style = _a.style, _e = _a.singleLine, singleLine = _e === void 0 ? false : _e, _f = _a.autoFocus, autoFocus = _f === void 0 ? false : _f, _g = _a.showFormattingMenu, showFormattingMenu = _g === void 0 ? false : _g, _h = _a.uploadFile, uploadFile = _h === void 0 ? undefined : _h, fragment = _a.fragment, awareness = _a.awareness, id = _a.id, props = __rest(_a, ["className", "value", "defaultValue", "placeholder", "onChange", "onBlur", "slotBefore", "style", "singleLine", "autoFocus", "showFormattingMenu", "uploadFile", "fragment", "awareness", "id"]);
+    var _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.value, value = _c === void 0 ? "" : _c, defaultValue = _a.defaultValue, _d = _a.placeholder, placeholder = _d === void 0 ? "" : _d, onChange = _a.onChange, onBlur = _a.onBlur, slotBefore = _a.slotBefore, style = _a.style, _e = _a.singleLine, singleLine = _e === void 0 ? false : _e, _f = _a.autoFocus, autoFocus = _f === void 0 ? false : _f, _g = _a.showFormattingMenu, showFormattingMenu = _g === void 0 ? false : _g, commentAuthor = _a.commentAuthor, _h = _a.uploadFile, uploadFile = _h === void 0 ? undefined : _h, fragment = _a.fragment, awareness = _a.awareness, id = _a.id, props = __rest(_a, ["className", "value", "defaultValue", "placeholder", "onChange", "onBlur", "slotBefore", "style", "singleLine", "autoFocus", "showFormattingMenu", "commentAuthor", "uploadFile", "fragment", "awareness", "id"]);
     var _j = useState(value), content = _j[0], setContent = _j[1];
     var extensions = useMemo(function () {
         return __spreadArray(__spreadArray([], defaultRichTextExtensions, true), [
@@ -99,21 +102,27 @@ export var MinimalRichTextField = function (_a) {
             awareness && CollaborationCaret.configure({ awareness: awareness }),
             placeholder && Placeholder.configure({ placeholder: placeholder }),
             uploadFile && fileHandler(uploadFile),
+            commentAuthor && Comment.configure({ createdBy: commentAuthor }),
+            commentAuthor && CommentReply.configure({ createdBy: commentAuthor }),
         ], false).filter(Boolean);
-    }, [singleLine, placeholder, uploadFile, fragment, awareness]);
+    }, [singleLine, placeholder, uploadFile, fragment, awareness, commentAuthor]);
     var editor = useEditor({
         onUpdate: function (_a) {
             var editor = _a.editor;
-            var html = editor.getHTML();
-            html = isEmpty(html) ? "" : html;
-            setContent(html);
-            onChange === null || onChange === void 0 ? void 0 : onChange(html);
+            if (onChange || !fragment) {
+                var html = editor.getHTML();
+                html = isEmpty(html) ? "" : html;
+                setContent(html);
+                onChange === null || onChange === void 0 ? void 0 : onChange(html);
+            }
         },
         onBlur: function (_a) {
             var editor = _a.editor;
-            var html = editor.getHTML();
-            html = isEmpty(html) ? "" : html;
-            onBlur === null || onBlur === void 0 ? void 0 : onBlur(html);
+            if (onBlur) {
+                var html = editor.getHTML();
+                html = isEmpty(html) ? "" : html;
+                onBlur(html);
+            }
         },
         autofocus: autoFocus,
         content: fragment ? undefined : content,
@@ -161,5 +170,5 @@ export var MinimalRichTextField = function (_a) {
             }
         };
     }, [editor, id]);
-    return (_jsxs(_Fragment, { children: [slotBefore ? slotBefore(editor) : null, showFormattingMenu && _jsx(RichTextFormattingMenu, { editor: editor }), _jsx(EditorContent, __assign({ editor: editor }, props))] }));
+    return (_jsxs(_Fragment, { children: [slotBefore ? slotBefore(editor) : null, showFormattingMenu && (_jsx(RichTextFormattingMenu, { allowComments: !!commentAuthor, editor: editor })), !!commentAuthor && (_jsx(CommentBubble, { editor: editor, commentAuthor: commentAuthor })), _jsx(EditorContent, __assign({ editor: editor }, props))] }));
 };

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

@@ -0,0 +1,8 @@
+import { Editor } from "@tiptap/core";
+import { CommentAttrs } from "./types";
+type CommentBubbleProps = {
+    editor: Editor;
+    commentAuthor?: CommentAttrs["createdBy"];
+};
+export declare const CommentBubble: ({ editor, commentAuthor, }: CommentBubbleProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/rich-text/tiptap/comments/comment-bubble.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { Trans } from "react-i18next";
+import { useEditorState } from "@tiptap/react";
+import { BubbleMenu } from "@tiptap/react/menus";
+import { findReplies } from "./helpers";
+import { Button } from "../../../ui/button";
+import { CommentItem } from "../../../ui/comments";
+import { FloatingMenu } from "../../../ui/floating-menu";
+var CommentForm = function (_a) {
+    var editor = _a.editor, comment = _a.comment, commentAuthor = _a.commentAuthor, replies = _a.replies;
+    var _b = useState(new Set()), editingIds = _b[0], setEditingIds = _b[1];
+    var isEditingAny = editingIds.size > 0;
+    var onEditingChange = useCallback(function (id, editing) {
+        if (!id)
+            return;
+        setEditingIds(function (prev) {
+            var has = prev.has(id);
+            if (editing === has)
+                return prev;
+            var next = new Set(prev);
+            if (editing)
+                next.add(id);
+            else
+                next.delete(id);
+            return next;
+        });
+    }, []);
+    var saveComment = function (value) {
+        var trimmed = value.trim();
+        if (!trimmed) {
+            editor.chain().focus().removeComment({ id: comment.id }).run();
+            return;
+        }
+        editor
+            .chain()
+            .focus()
+            .updateComment({ id: comment.id, value: trimmed })
+            .run();
+    };
+    var removeComment = function () {
+        editor.chain().focus().removeComment({ id: comment.id }).run();
+    };
+    var saveReply = function (id) { return function (value) {
+        var trimmed = value.trim();
+        if (!trimmed) {
+            editor.chain().focus().removeCommentReply({ id: id }).run();
+            return;
+        }
+        editor.chain().focus().updateCommentReply({ id: id, value: trimmed }).run();
+    }; };
+    var removeReply = function (id) { return function () {
+        editor.chain().focus().removeCommentReply({ id: id }).run();
+    }; };
+    var _c = useState(false), draftOpen = _c[0], setDraftOpen = _c[1];
+    var submitDraft = function (value) {
+        var trimmed = value.trim();
+        if (trimmed) {
+            editor
+                .chain()
+                .focus()
+                .addCommentReply({ commentId: comment.id, value: trimmed })
+                .run();
+        }
+        setDraftOpen(false);
+    };
+    return (_jsxs(FloatingMenu, { className: "flex flex-col w-80 ml-3", children: [_jsx(CommentItem, { comment: comment, onSave: saveComment, onResolve: removeComment, onDelete: removeComment, commentAuthor: commentAuthor, onEditingChange: onEditingChange, className: "p-3" }), replies.map(function (reply) { return (_jsx(CommentItem, { comment: reply, onSave: saveReply(reply.id), onDelete: removeReply(reply.id), commentAuthor: commentAuthor, onEditingChange: onEditingChange, isTopLevel: false, className: "p-3 pl-11" }, reply.id)); }), draftOpen && (_jsx(CommentItem, { comment: {
+                    id: "reply-draft",
+                    inReplyTo: comment.id,
+                    createdBy: commentAuthor,
+                }, commentAuthor: commentAuthor, onSave: submitDraft, onCancel: function () { return setDraftOpen(false); }, isTopLevel: false, className: "p-3 pl-11" })), !isEditingAny && !draftOpen && (_jsx("div", { className: "ml-12 pb-3", children: _jsx(Button, { size: "sm", variant: "secondary", className: "text-xs h-7", onClick: function () { return setDraftOpen(true); }, children: _jsx(Trans, { children: "formatting.comments.reply" }) }) }))] }));
+};
+export var CommentBubble = function (_a) {
+    var editor = _a.editor, commentAuthor = _a.commentAuthor;
+    var state = useEditorState({
+        editor: editor,
+        selector: function (ctx) {
+            var isComment = ctx.editor.isActive("comment");
+            var attrs = isComment
+                ? ctx.editor.getAttributes("comment")
+                : null;
+            var replies = attrs
+                ? findReplies(ctx.editor, attrs.id).map(function (r) { return r.attrs; })
+                : [];
+            return {
+                isComment: isComment,
+                attrs: attrs,
+                replies: replies,
+            };
+        },
+    });
+    return (_jsx(BubbleMenu, { editor: editor, shouldShow: function (_a) {
+            var editor = _a.editor;
+            return editor.isActive("comment");
+        }, options: { placement: "bottom" }, children: state.isComment && state.attrs && (_jsx(CommentForm, { editor: editor, comment: state.attrs, commentAuthor: commentAuthor, replies: state.replies }, state.attrs.id)) }));
+};

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

@@ -0,0 +1,21 @@
+import { Node } from "@tiptap/core";
+import { CommentReplyOptions } from "./types";
+export declare const SKIP_RESCUE_META = "comment-reply:intentional-delete";
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        "inline-comment-reply": {
+            addCommentReply: (params: {
+                commentId: string;
+                value?: string;
+            }) => ReturnType;
+            updateCommentReply: (params: {
+                id: string;
+                value: string;
+            }) => ReturnType;
+            removeCommentReply: (params: {
+                id: string;
+            }) => ReturnType;
+        };
+    }
+}
+export declare const CommentReply: Node<CommentReplyOptions, any>;

package/dist/components/rich-text/tiptap/comments/comment-reply.js

@@ -0,0 +1,230 @@
+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 { Node } from "@tiptap/core";
+import { Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
+import { createId, findReplies, locateCommentRanges, locateReplyById, } from "./helpers";
+export var SKIP_RESCUE_META = "comment-reply:intentional-delete";
+export var CommentReply = Node.create({
+    name: "inline-comment-reply",
+    inline: true,
+    group: "inline",
+    atom: true,
+    selectable: false,
+    draggable: false,
+    addOptions: function () {
+        return { createdBy: undefined };
+    },
+    addAttributes: function () {
+        return {
+            id: {
+                default: null,
+                parseHTML: function (el) { return el.getAttribute("id"); },
+                renderHTML: function (attrs) {
+                    var _a;
+                    return ({
+                        id: (_a = attrs.id) !== null && _a !== void 0 ? _a : createId(),
+                    });
+                },
+            },
+            commentId: {
+                default: null,
+                parseHTML: function (el) { return el.getAttribute("data-comment-id"); },
+                renderHTML: function (attrs) { return ({
+                    "data-comment-id": attrs.commentId,
+                }); },
+            },
+            createdAt: {
+                default: null,
+                parseHTML: function (el) { return el.getAttribute("data-created-at"); },
+                renderHTML: function (attrs) { return ({
+                    "data-created-at": attrs.createdAt,
+                }); },
+            },
+            createdBy: {
+                default: null,
+                parseHTML: function (el) { return ({
+                    id: el.getAttribute("data-user-id"),
+                    name: el.getAttribute("data-user-name"),
+                    color: el.getAttribute("data-user-color"),
+                }); },
+                renderHTML: function (attrs) {
+                    var _a, _b, _c;
+                    return ({
+                        "data-user-id": (_a = attrs.createdBy) === null || _a === void 0 ? void 0 : _a.id,
+                        "data-user-name": (_b = attrs.createdBy) === null || _b === void 0 ? void 0 : _b.name,
+                        "data-user-color": (_c = attrs.createdBy) === null || _c === void 0 ? void 0 : _c.color,
+                    });
+                },
+            },
+            value: {
+                default: "",
+                parseHTML: function (el) { var _a; return (_a = el.getAttribute("value")) !== null && _a !== void 0 ? _a : ""; },
+                renderHTML: function (attrs) {
+                    var _a;
+                    return ({
+                        value: (_a = attrs.value) !== null && _a !== void 0 ? _a : "",
+                    });
+                },
+            },
+        };
+    },
+    parseHTML: function () {
+        return [{ tag: "inline-comment-reply" }];
+    },
+    renderHTML: function (_a) {
+        var HTMLAttributes = _a.HTMLAttributes;
+        return ["inline-comment-reply", HTMLAttributes];
+    },
+    addCommands: function () {
+        var _this = this;
+        return {
+            addCommentReply: function (_a) {
+                var commentId = _a.commentId, value = _a.value;
+                return function (_a) {
+                    var state = _a.state, tr = _a.tr, dispatch = _a.dispatch;
+                    var nodeType = state.schema.nodes["inline-comment-reply"];
+                    if (!nodeType)
+                        return false;
+                    var ranges = locateCommentRanges(state.doc, commentId);
+                    if (ranges.length === 0)
+                        return false;
+                    if (!dispatch)
+                        return true;
+                    var existing = findReplies(state.doc, commentId);
+                    var last = existing[existing.length - 1];
+                    var insertAt = last ? last.pos + last.nodeSize : ranges[0].from;
+                    var node = nodeType.create({
+                        id: createId(),
+                        commentId: commentId,
+                        createdBy: _this.options.createdBy,
+                        createdAt: new Date().toISOString(),
+                        value: value !== null && value !== void 0 ? value : "",
+                    });
+                    tr.insert(insertAt, node);
+                    dispatch(tr);
+                    return true;
+                };
+            },
+            updateCommentReply: function (_a) {
+                var id = _a.id, value = _a.value;
+                return function (_a) {
+                    var state = _a.state, tr = _a.tr, dispatch = _a.dispatch;
+                    var nodeType = state.schema.nodes["inline-comment-reply"];
+                    if (!nodeType)
+                        return false;
+                    var located = locateReplyById(state.doc, id);
+                    if (!located)
+                        return false;
+                    if (!dispatch)
+                        return true;
+                    var existing = state.doc.nodeAt(located.pos);
+                    if (!existing)
+                        return false;
+                    tr.setNodeMarkup(located.pos, undefined, __assign(__assign({}, existing.attrs), { value: value }));
+                    dispatch(tr);
+                    return true;
+                };
+            },
+            removeCommentReply: function (_a) {
+                var id = _a.id;
+                return function (_a) {
+                    var state = _a.state, tr = _a.tr, dispatch = _a.dispatch;
+                    var located = locateReplyById(state.doc, id);
+                    if (!located)
+                        return false;
+                    if (!dispatch)
+                        return true;
+                    tr.setMeta(SKIP_RESCUE_META, true);
+                    tr.delete(located.pos, located.pos + located.nodeSize);
+                    dispatch(tr);
+                    return true;
+                };
+            },
+        };
+    },
+    addProseMirrorPlugins: function () {
+        return [
+            new Plugin({
+                key: new PluginKey("rescueCommentReplies"),
+                props: {
+                    handleKeyDown: function (view, event) {
+                        if (event.key !== "Backspace" && event.key !== "Delete") {
+                            return false;
+                        }
+                        var selection = view.state.selection;
+                        if (!selection.empty)
+                            return false;
+                        var $pos = view.state.doc.resolve(selection.from);
+                        var node = event.key === "Backspace" ? $pos.nodeBefore : $pos.nodeAfter;
+                        if ((node === null || node === void 0 ? void 0 : node.type.name) !== "inline-comment-reply")
+                            return false;
+                        var newPos = event.key === "Backspace"
+                            ? selection.from - node.nodeSize
+                            : selection.from + node.nodeSize;
+                        view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, newPos)));
+                        return true;
+                    },
+                },
+                appendTransaction: function (transactions, oldState, newState) {
+                    if (!transactions.some(function (t) { return t.docChanged; }))
+                        return null;
+                    if (transactions.some(function (t) { return t.getMeta(SKIP_RESCUE_META); })) {
+                        return null;
+                    }
+                    if (transactions.some(function (t) { return t.getMeta("addToHistory") === false; })) {
+                        return null;
+                    }
+                    var nodeType = newState.schema.nodes["inline-comment-reply"];
+                    if (!nodeType)
+                        return null;
+                    var oldReplies = [];
+                    oldState.doc.descendants(function (node) {
+                        if (node.type === nodeType) {
+                            oldReplies.push({
+                                id: node.attrs.id,
+                                attrs: node.attrs,
+                            });
+                        }
+                    });
+                    if (oldReplies.length === 0)
+                        return null;
+                    var surviving = new Set();
+                    newState.doc.descendants(function (node) {
+                        if (node.type === nodeType)
+                            surviving.add(node.attrs.id);
+                    });
+                    var missing = oldReplies.filter(function (r) { return !surviving.has(r.id); });
+                    if (missing.length === 0)
+                        return null;
+                    var tr = newState.tr;
+                    tr.setMeta("addToHistory", false);
+                    var didChange = false;
+                    for (var _i = 0, missing_1 = missing; _i < missing_1.length; _i++) {
+                        var reply = missing_1[_i];
+                        var commentId = reply.attrs.commentId;
+                        if (!commentId)
+                            continue;
+                        var ranges = locateCommentRanges(tr.doc, commentId);
+                        if (ranges.length === 0)
+                            continue;
+                        var existing = findReplies(tr.doc, commentId);
+                        var last = existing[existing.length - 1];
+                        var insertAt = last ? last.pos + last.nodeSize : ranges[0].from;
+                        tr.insert(insertAt, nodeType.create(reply.attrs));
+                        didChange = true;
+                    }
+                    return didChange ? tr : null;
+                },
+            }),
+        ];
+    },
+});

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

@@ -0,0 +1,22 @@
+import { Mark } from "@tiptap/core";
+import { CommentOptions } from "./types";
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        comment: {
+            toggleComment: () => ReturnType;
+            addComment: (params: {
+                from: number;
+                to: number;
+                value?: string;
+            }) => ReturnType;
+            updateComment: (params: {
+                id: string;
+                value: string;
+            }) => ReturnType;
+            removeComment: (params: {
+                id: string;
+            }) => ReturnType;
+        };
+    }
+}
+export declare const Comment: Mark<CommentOptions, any>;

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

@@ -0,0 +1,199 @@
+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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { Mark } from "@tiptap/core";
+import { SKIP_RESCUE_META } from "./comment-reply";
+import { createId, findReplies, locateCommentRanges } from "./helpers";
+export var Comment = Mark.create({
+    name: "comment",
+    inclusive: false,
+    spanning: true,
+    keepOnSplit: true,
+    excludes: "",
+    addOptions: function () {
+        return { createdBy: undefined };
+    },
+    addAttributes: function () {
+        return {
+            id: {
+                default: null,
+                parseHTML: function (el) { return el.getAttribute("id"); },
+                renderHTML: function (attrs) {
+                    var _a;
+                    return ({
+                        id: (_a = attrs.id) !== null && _a !== void 0 ? _a : createId(),
+                    });
+                },
+            },
+            createdAt: {
+                default: null,
+                parseHTML: function (el) { return el.getAttribute("data-created-at"); },
+                renderHTML: function (attrs) { return ({
+                    "data-created-at": attrs.createdAt,
+                }); },
+            },
+            createdBy: {
+                default: null,
+                parseHTML: function (el) {
+                    return {
+                        id: el.getAttribute("data-user-id"),
+                        name: el.getAttribute("data-user-name"),
+                        color: el.getAttribute("data-user-color"),
+                    };
+                },
+                renderHTML: function (attrs) {
+                    var _a, _b, _c;
+                    return ({
+                        "data-user-id": (_a = attrs.createdBy) === null || _a === void 0 ? void 0 : _a.id,
+                        "data-user-name": (_b = attrs.createdBy) === null || _b === void 0 ? void 0 : _b.name,
+                        "data-user-color": (_c = attrs.createdBy) === null || _c === void 0 ? void 0 : _c.color,
+                    });
+                },
+            },
+            value: {
+                default: "",
+                parseHTML: function (el) { var _a; return (_a = el.getAttribute("value")) !== null && _a !== void 0 ? _a : ""; },
+                renderHTML: function (attrs) {
+                    var _a;
+                    return ({
+                        value: (_a = attrs.value) !== null && _a !== void 0 ? _a : "",
+                    });
+                },
+            },
+        };
+    },
+    parseHTML: function () {
+        return [{ tag: "inline-comment" }];
+    },
+    renderHTML: function (_a) {
+        var _b;
+        var HTMLAttributes = _a.HTMLAttributes;
+        return [
+            "inline-comment",
+            __assign(__assign({}, HTMLAttributes), { style: "--comment-color: ".concat((_b = HTMLAttributes["data-user-color"]) !== null && _b !== void 0 ? _b : "var(--color-blue-400)") }),
+            0,
+        ];
+    },
+    addCommands: function () {
+        var _this = this;
+        return {
+            addComment: function (_a) {
+                var from = _a.from, to = _a.to, value = _a.value;
+                return function (_a) {
+                    var state = _a.state, tr = _a.tr, dispatch = _a.dispatch;
+                    if (to <= from)
+                        return false;
+                    var markType = state.schema.marks.comment;
+                    if (!markType)
+                        return false;
+                    if (!dispatch)
+                        return true;
+                    var attrs = {
+                        id: createId(),
+                        createdBy: _this.options.createdBy,
+                        value: value !== null && value !== void 0 ? value : "",
+                        createdAt: new Date().toISOString(),
+                    };
+                    tr.addMark(from, to, markType.create(attrs));
+                    dispatch(tr);
+                    return true;
+                };
+            },
+            toggleComment: function () {
+                return function (_a) {
+                    var state = _a.state, tr = _a.tr, dispatch = _a.dispatch;
+                    var markType = state.schema.marks.comment;
+                    if (!markType || !dispatch)
+                        return false;
+                    // Find if there's a comment mark at the current selection
+                    var _b = state.selection, from = _b.from, to = _b.to;
+                    var commentMarks = state.doc.rangeHasMark(from, to, markType);
+                    if (commentMarks) {
+                        return;
+                    }
+                    // Otherwise, add a new comment mark with empty body at the current selection
+                    var attrs = {
+                        id: createId(),
+                        createdBy: _this.options.createdBy,
+                        value: "",
+                        createdAt: new Date().toISOString(),
+                    };
+                    tr.addMark(from, to, markType.create(attrs));
+                    dispatch(tr);
+                    return true;
+                };
+            },
+            updateComment: function (_a) {
+                var id = _a.id, value = _a.value;
+                return function (_a) {
+                    var state = _a.state, tr = _a.tr, dispatch = _a.dispatch;
+                    var markType = state.schema.marks.comment;
+                    if (!markType)
+                        return false;
+                    var ranges = locateCommentRanges(state.doc, id);
+                    if (ranges.length === 0)
+                        return false;
+                    if (!dispatch)
+                        return true;
+                    var existing = state.doc
+                        .resolve(ranges[0].from + 1)
+                        .marks()
+                        .find(function (m) { return m.type === markType && m.attrs.id === id; });
+                    if (!existing)
+                        return false;
+                    var next = markType.create(__assign(__assign({}, existing.attrs), { value: value }));
+                    for (var _i = 0, _b = __spreadArray([], ranges, true).sort(function (a, b) { return b.from - a.from; }); _i < _b.length; _i++) {
+                        var r = _b[_i];
+                        tr.removeMark(r.from, r.to, markType);
+                        tr.addMark(r.from, r.to, next);
+                    }
+                    dispatch(tr);
+                    return true;
+                };
+            },
+            removeComment: function (_a) {
+                var id = _a.id;
+                return function (_a) {
+                    var state = _a.state, tr = _a.tr, dispatch = _a.dispatch;
+                    var markType = state.schema.marks.comment;
+                    if (!markType)
+                        return false;
+                    var ranges = locateCommentRanges(state.doc, id);
+                    if (ranges.length === 0)
+                        return false;
+                    if (!dispatch)
+                        return true;
+                    for (var _i = 0, _b = __spreadArray([], ranges, true).sort(function (a, b) { return b.from - a.from; }); _i < _b.length; _i++) {
+                        var r = _b[_i];
+                        tr.removeMark(r.from, r.to, markType);
+                    }
+                    var replies = __spreadArray([], findReplies(state.doc, id), true).sort(function (a, b) { return b.pos - a.pos; });
+                    for (var _c = 0, replies_1 = replies; _c < replies_1.length; _c++) {
+                        var r = replies_1[_c];
+                        tr.delete(r.pos, r.pos + r.nodeSize);
+                    }
+                    tr.setMeta(SKIP_RESCUE_META, true);
+                    dispatch(tr);
+                    return true;
+                };
+            },
+        };
+    },
+});