/**
 * TipTap inline mark that tags a text range with a `commentId`. The mark
 * is the glue between the comment side panel and the editor — selecting
 * a range, creating a comment, and then re-painting the highlight when
 * the comment list updates all flow through this extension.
 *
 * Storage shape: a single attribute, `commentId`, that mirrors the row
 * id returned by the slice-4 REST API. The mark also stamps a
 * `data-comment-id` attribute on its rendered span and a CSS class so
 * the panel can style it (yellow band for active, dotted underline for
 * resolved, faded for detached anchors).
 *
 * We deliberately use a TipTap Mark (vs. a ProseMirror decoration) so
 * the comment anchor is *persisted* in the document HTML and round-trips
 * through the autosave path. Decorations would be simpler but they're
 * presentational only — they disappear on next render unless re-painted
 * from scratch, which would defeat slice 5's main job (keeping anchors
 * stable under collaborative edits).
 */
import { Mark, mergeAttributes } from '@tiptap/core';
export const CommentMark = Mark.create({
    name: 'comment',
    // Inline mark; we never want it on block-level nodes.
    inclusive: false,
    spanning: false,
    // Allow the mark to be split when text is inserted at its boundaries —
    // otherwise replies/edits in the middle of a comment would silently
    // expand its scope.
    excludes: '',
    addOptions() {
        return {
            HTMLAttributes: {},
            className: 'actuate-comment',
        };
    },
    addAttributes() {
        return {
            commentId: {
                default: null,
                parseHTML: (element) => element.getAttribute('data-comment-id'),
                renderHTML: (attributes) => {
                    if (!attributes.commentId)
                        return {};
                    return { 'data-comment-id': attributes.commentId };
                },
            },
        };
    },
    parseHTML() {
        return [{ tag: 'span[data-comment-id]' }];
    },
    renderHTML({ HTMLAttributes }) {
        const opts = this.options;
        return [
            'span',
            mergeAttributes(opts.HTMLAttributes, HTMLAttributes, {
                class: opts.className,
            }),
            0,
        ];
    },
    addCommands() {
        return {
            setComment: (attrs) => ({ commands }) => {
                if (!attrs?.commentId)
                    return false;
                return commands.setMark(this.name, attrs);
            },
            updateComment: (attrs) => ({ commands }) => {
                if (!attrs?.commentId)
                    return false;
                return commands.updateAttributes(this.name, attrs);
            },
            unsetComment: () => ({ commands }) => {
                return commands.unsetMark(this.name);
            },
        };
    },
});
/**
 * CSS the editor styles include to render the comment highlights. The
 * `TipTapEditor` injects this so consumers don't need to import a CSS
 * file separately.
 */
export const COMMENT_MARK_STYLES = `
.actuate-comment {
  background-color: rgba(250, 204, 21, 0.25);
  border-bottom: 2px solid rgba(202, 138, 4, 0.65);
  cursor: pointer;
}
.actuate-comment:hover {
  background-color: rgba(250, 204, 21, 0.4);
}
.actuate-comment--resolved {
  background-color: transparent;
  border-bottom: 1px dotted rgba(107, 114, 128, 0.6);
}
.actuate-comment--active {
  background-color: rgba(250, 204, 21, 0.55);
  outline: 2px solid rgba(202, 138, 4, 0.9);
  outline-offset: -1px;
}
`;
//# sourceMappingURL=CommentMark.js.map