@raketa-cloud/admin 1.10.11 → 1.10.13

package/src/views/resources/discussions/index.ejs

@@ -0,0 +1,729 @@
+<%
+  const list = (comments && comments.list) || [];
+  const formPath = discussion.path;
+  // The discussions of published revisions are kept as they were.
+  const readOnly = discussion.archived;
+  const currentEmail = (currentEditor.email || "").toLowerCase();
+  const commentsPath = `/${_context.locale}/${_context.resourceConfig.resourceTypePlural}/${resource.id}/comments`;
+
+  const textareaClass = "w-full px-3 py-2 text-sm border rounded shadow-inner resize-y border-neutral-300 bg-raketa-background dark:bg-neutral-800 dark:border-neutral-700 dark:focus:border-raketa-primary dark:focus:ring-raketa-primary";
+
+  // Editors are picked by the name, or the email of editors without one. The
+  // comments are stored with "@editor-<id>" in place of the names.
+  const mentionLabel = (editor) => (editor.name || "").trim() || editor.email || "";
+  const mentionable = (locals.editors || []).filter((editor) => mentionLabel(editor));
+
+  const deletedMessage = "This comment has been deleted.";
+
+  const snippet = (text, mentions) => {
+    const plain = utils.commentMentionsText(text, mentions);
+
+    return plain.length > 90 ? `${plain.substring(0, 90)}…` : plain;
+  };
+%>
+
+<div class="page-wrapper">
+  <div class="page-title">
+    <%- render_partial('../_shared/_title.ejs') %>
+    <%- render_partial('../_shared/_toolbar.ejs', { render_partial, base: '..' }) %>
+  </div>
+
+  <%# Archived discussions are reached from the history, not the Discussions tab. %>
+  <%- render_partial('../_shared/_tabs.ejs', { active: readOnly ? null : 'discussions', spacing: 'mb-4' }) %>
+
+  <% if (readOnly) { %>
+  <div class="flex items-center justify-between max-w-3xl gap-4 px-4 py-3 mb-8 text-sm border rounded border-mono-purple-100 bg-raketa-primary/5">
+    <div>
+      <span class="font-semibold">Revision #<%= discussion.revisionId %></span>
+      <span class="text-raketa-foreground/50">· This discussion is archived</span>
+    </div>
+
+    <a href="<%= `/${_context.locale}/${_context.resourceConfig.resourceTypePlural}/${resource.id}/history` %>" class="text-xs btn-text whitespace-nowrap">Back to history</a>
+  </div>
+  <% } else { %>
+  <%- render_partial('./_discussion_tabs.ejs', { revisions, discussion }) %>
+  <% } %>
+
+  <div class="max-w-3xl pb-8">
+    <% if (!readOnly) { %>
+    <form method="POST" action="<%= formPath %>" id="comment-form" class="flex gap-4 pb-8 mb-8 border-b border-neutral-200 dark:border-neutral-700">
+      <%- render_partial('./_avatar.ejs', { editor: currentEditor }) %>
+
+      <div class="flex-1 min-w-0">
+        <% if (_context.query?.comment_error) { %>
+        <div class="mb-2 text-sm text-red-600"><%= _context.query.comment_error %></div>
+        <% } %>
+
+        <div id="reply-banner" class="items-center justify-between hidden gap-2 px-3 py-1.5 mb-2 text-xs border-l-4 rounded-r border-raketa-primary bg-raketa-primary/5">
+          <div class="flex items-center min-w-0 gap-2">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-3.5 shrink-0 text-raketa-primary">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3" />
+            </svg>
+            <span class="shrink-0 text-raketa-foreground/50">Replying to</span>
+            <span id="reply-to-name" class="font-semibold shrink-0"></span>
+            <span id="reply-to-preview" class="italic truncate text-raketa-foreground/50"></span>
+          </div>
+
+          <button type="button" data-cancel-reply class="p-1 rounded text-raketa-foreground/50 hover:text-raketa-foreground" title="Cancel reply" aria-label="Cancel reply">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-3.5">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        <input type="hidden" name="comment[reply_id]" id="comment-reply-id" value="" />
+
+        <div class="relative" data-mention-field>
+          <textarea name="comment[body]" id="comment-body" rows="3" required placeholder="Leave a comment…" class="<%= textareaClass %>"></textarea>
+        </div>
+
+        <div class="flex justify-end mt-2">
+          <button type="submit" class="btn-primary">Post comment</button>
+        </div>
+      </div>
+    </form>
+    <% } %>
+
+    <% if (list.length) { %>
+    <div class="flex flex-col gap-7">
+      <% list.forEach((comment) => { %>
+      <%# Only authors change their comments, never in archived discussions. %>
+      <% const isDeleted = Boolean(comment.deletedAt); %>
+      <% const isMine = !readOnly && !isDeleted && currentEmail && (comment.editor?.email || "").toLowerCase() === currentEmail; %>
+      <div id="comment-<%= comment.id %>" class="flex gap-4 p-1 -m-1 transition-colors duration-300 rounded group/comment">
+        <%- render_partial('./_avatar.ejs', { editor: comment.editor }) %>
+
+        <div class="flex-1 min-w-0">
+          <div class="flex items-center justify-between mb-1">
+            <div class="flex items-center gap-2">
+              <span class="text-sm font-semibold"><%= comment.editor?.name || comment.editor?.email || "Unknown" %></span>
+              <span class="flex items-center gap-1.5 body-3 text-raketa-foreground/50">
+                · <time data-comment-datetime datetime="<%= comment.insertedAt %>"><%= utils.formattedDateTime(comment.insertedAt) %></time>
+
+                <% if (!readOnly) { %>
+                <button type="button" data-copy-link="<%= comment.id %>" title="Copy link to comment" aria-label="Copy link to comment" class="flex items-center gap-1 transition-opacity opacity-0 cursor-pointer text-raketa-foreground/50 hover:text-raketa-primary group-hover/comment:opacity-100 focus-visible:opacity-100">
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="-rotate-45 size-3.5">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 17H7A5 5 0 0 1 7 7h2M15 7h2a5 5 0 1 1 0 10h-2M8 12h8" />
+                  </svg>
+                </button>
+                <span data-copied aria-live="polite" class="hidden pointer-events-none select-none">Link copied</span>
+                <% } %>
+
+                <% if (!isDeleted && comment.updatedAt && comment.updatedAt !== comment.insertedAt) { %>
+                · <span title="Edited <%= utils.formattedDateTime(comment.updatedAt) %>">edited</span>
+                <% } %>
+              </span>
+            </div>
+
+            <% if (!readOnly && !isDeleted) { %>
+            <div class="flex items-center gap-2 transition-opacity opacity-0 group-hover/comment:opacity-100 focus-within:opacity-100 has-[[open]]:opacity-100">
+              <button type="button" class="text-xs cursor-pointer btn-text has-icon" data-reply-to="<%= comment.id %>" data-reply-author="<%= comment.editor?.name || comment.editor?.email || 'Unknown' %>" data-reply-snippet="<%= snippet(comment.body, comment.mentions) %>">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-3">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3" />
+                </svg>
+                Reply
+              </button>
+
+              <% if (isMine) { %>
+              <details class="relative unstyled-details" data-comment-menu>
+                <summary class="flex items-center justify-center rounded cursor-pointer size-6 text-raketa-foreground/50 hover:text-raketa-foreground hover:bg-raketa-primary/10" title="More actions" aria-label="More actions">
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 12.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 18.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z" />
+                  </svg>
+                </summary>
+
+                <div class="absolute right-0 z-20 flex flex-col gap-4 p-4 mt-2 border rounded shadow-md border-mono-purple-100 bg-raketa-background dark:border-neutral-500">
+                  <button type="button" data-edit-comment class="text-xs cursor-pointer btn-text has-icon whitespace-nowrap">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3">
+                      <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125" />
+                    </svg>
+                    Edit
+                  </button>
+
+                  <button type="button" hx-delete="<%= `${commentsPath}/${comment.id}` %>" hx-confirm="Delete this comment?" class="text-xs cursor-pointer btn-danger has-icon whitespace-nowrap">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3">
+                      <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
+                    </svg>
+                    Delete
+                  </button>
+                </div>
+              </details>
+              <% } %>
+            </div>
+            <% } %>
+          </div>
+
+          <% if (comment.reply) { %>
+          <button type="button" data-scroll-to="<%= comment.reply.id %>" title="Jump to the quoted comment" class="flex items-start w-full max-w-full gap-1.5 px-2.5 py-1 mb-2 text-xs text-left border-l-4 rounded-r cursor-pointer bg-raketa-primary/5 border-raketa-primary/40 hover:border-raketa-primary hover:bg-raketa-primary/10">
+            <span class="font-semibold shrink-0"><%= comment.reply.editor?.name || comment.reply.editor?.email || "Unknown" %>:</span>
+            <% if (comment.reply.deletedAt) { %>
+            <span class="italic truncate text-raketa-foreground/50"><%= deletedMessage %></span>
+            <% } else { %>
+            <span class="truncate text-raketa-foreground/50"><%= snippet(comment.reply.body, comment.reply.mentions) %></span>
+            <% } %>
+          </button>
+          <% } %>
+
+          <%# The markdown is rendered with HTML disabled, so it is safe unescaped. %>
+          <% if (isDeleted) { %>
+          <p data-comment-deleted class="text-sm italic text-raketa-foreground/50"><%= deletedMessage %></p>
+          <% } else { %>
+          <div data-comment-body class="comment-body"><%- utils.commentMarkdown(comment.body, { mentions: comment.mentions }) %></div>
+          <% } %>
+
+          <% if (isMine) { %>
+          <form data-edit-form hx-put="<%= `${commentsPath}/${comment.id}` %>" class="hidden">
+            <input type="hidden" name="revision_id" value="<%= discussion.revisionId || '' %>" />
+            <div class="relative" data-mention-field>
+              <textarea name="comment[body]" rows="3" required aria-label="Edit comment" data-mentions="<%= JSON.stringify(utils.commentMentionIds(comment.mentions)) %>" class="<%= textareaClass %>"><%= utils.commentMentionsText(comment.body, comment.mentions) %></textarea>
+            </div>
+
+            <div class="flex items-center justify-end gap-4 mt-2">
+              <button type="button" data-cancel-edit class="btn-text">Cancel</button>
+              <button type="submit" class="btn-primary">Save</button>
+            </div>
+          </form>
+          <% } %>
+        </div>
+      </div>
+      <% }) %>
+    </div>
+
+    <% if (comments.pagination && comments.pagination.pagesCount > 1) { %>
+    <div class="mt-8">
+      <%- pagination(comments.pagination, _context) %>
+    </div>
+    <% } %>
+    <% } else { %>
+    <div class="py-12 text-sm text-center text-raketa-foreground/50"><%= readOnly ? "There are no comments in this discussion." : "No comments yet. Start the conversation!" %></div>
+    <% } %>
+  </div>
+
+  <% if (!readOnly && mentionable.length) { %>
+  <%# Moved next to the "@" typed in a textarea, the focus stays in it. %>
+  <div id="mention-picker" class="absolute z-30 hidden border rounded shadow-md w-72 border-mono-purple-100 bg-raketa-background dark:border-neutral-500">
+    <ul id="mention-options" role="listbox" aria-label="Editors" class="relative py-1 overflow-y-auto max-h-56">
+      <% mentionable.forEach((editor) => { %>
+      <li role="option" id="mention-option-<%= editor.id %>" aria-selected="false" data-mention-option data-editor-id="<%= editor.id %>" data-mention="<%= mentionLabel(editor) %>" data-search="<%= `${mentionLabel(editor)} ${editor.email || ''}`.toLowerCase() %>" class="flex items-center gap-2 px-3 py-1.5 text-sm cursor-pointer hover:bg-raketa-primary/5 aria-selected:bg-raketa-primary/10">
+        <%- render_partial('./_avatar.ejs', { editor, small: true }) %>
+        <span class="min-w-0">
+          <span class="block font-semibold truncate"><%= mentionLabel(editor) %></span>
+          <% if (editor.email && editor.email !== mentionLabel(editor)) { %>
+          <span class="block text-xs truncate text-raketa-foreground/50"><%= editor.email %></span>
+          <% } %>
+        </span>
+      </li>
+      <% }) %>
+    </ul>
+
+    <div data-mention-empty class="hidden px-3 py-2 text-sm text-raketa-foreground/50">No editors found</div>
+  </div>
+  <% } %>
+</div>
+
+<script>
+  (() => {
+    const form = document.getElementById("comment-form");
+    const body = document.getElementById("comment-body");
+    const replyId = document.getElementById("comment-reply-id");
+    const banner = document.getElementById("reply-banner");
+
+    const cancelReply = () => {
+      replyId.value = "";
+      banner.classList.add("hidden");
+      banner.classList.remove("flex");
+    };
+
+    document.querySelectorAll("[data-reply-to]").forEach((button) => {
+      button.addEventListener("click", () => {
+        replyId.value = button.dataset.replyTo;
+        document.getElementById("reply-to-name").textContent = button.dataset.replyAuthor;
+        document.getElementById("reply-to-preview").textContent = `"${button.dataset.replySnippet}"`;
+        banner.classList.remove("hidden");
+        banner.classList.add("flex");
+        form.scrollIntoView({
+          behavior: "smooth",
+          block: "start"
+        });
+        body.focus({
+          preventScroll: true
+        });
+      });
+    });
+
+    document.querySelector("[data-cancel-reply]")?.addEventListener("click", cancelReply);
+
+    const submitOnCmdEnter = (textarea, targetForm) => {
+      textarea.addEventListener("keydown", (event) => {
+        if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+          event.preventDefault();
+          targetForm.requestSubmit();
+        }
+      });
+    };
+
+    if (form) submitOnCmdEnter(body, form);
+
+    const menus = document.querySelectorAll("[data-comment-menu]");
+
+    document.addEventListener("click", (event) => {
+      menus.forEach((menu) => {
+        if (!menu.contains(event.target)) menu.removeAttribute("open");
+      });
+    });
+
+    document.querySelectorAll("[data-edit-comment]").forEach((button) => {
+      const row = button.closest("[id^='comment-']");
+      const text = row.querySelector("[data-comment-body]");
+      const editForm = row.querySelector("[data-edit-form]");
+      const textarea = editForm.querySelector("textarea");
+
+      const toggle = (editing) => {
+        text.classList.toggle("hidden", editing);
+        editForm.classList.toggle("hidden", !editing);
+      };
+
+      button.addEventListener("click", () => {
+        button.closest("details").removeAttribute("open");
+        toggle(true);
+        textarea.focus();
+        textarea.setSelectionRange(textarea.value.length, textarea.value.length);
+      });
+
+      editForm.querySelector("[data-cancel-edit]").addEventListener("click", () => {
+        textarea.value = textarea.defaultValue;
+        textarea.dispatchEvent(new Event("input"));
+        toggle(false);
+      });
+
+      submitOnCmdEnter(textarea, editForm);
+    });
+
+    // Typing "@" opens the editors picker. The text after it filters them, the
+    // arrow keys move through them and Enter or Tab writes "@Name". The names
+    // are sent as "@editor-<id>", from which the server takes the mentions.
+    const picker = document.getElementById("mention-picker");
+    const mentionFields = document.querySelectorAll("[data-mention-field] textarea");
+
+    if (mentionFields.length) {
+      const options = picker ? [...picker.querySelectorAll("[data-mention-option]")] : [];
+      const empty = picker?.querySelector("[data-mention-empty]");
+      let field = null;
+      let at = -1;
+      let active = null;
+
+      const visibleOptions = () => options.filter((option) => !option.classList.contains("hidden"));
+
+      const setActive = (option) => {
+        active = option || null;
+        options.forEach((item) => item.setAttribute("aria-selected", String(item === active)));
+        field?.setAttribute("aria-activedescendant", active ? active.id : "");
+        if (!active) return;
+
+        // Scrolls only the list, the page stays where it is.
+        const list = active.parentElement;
+        if (active.offsetTop < list.scrollTop) {
+          list.scrollTop = active.offsetTop;
+        } else if (active.offsetTop + active.offsetHeight > list.scrollTop + list.clientHeight) {
+          list.scrollTop = active.offsetTop + active.offsetHeight - list.clientHeight;
+        }
+      };
+
+      // The styles which lay out the text of a textarea.
+      const textProperties = ["boxSizing", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth", "fontFamily", "fontSize", "fontWeight", "fontStyle", "letterSpacing", "lineHeight", "textTransform", "wordSpacing", "textIndent", "tabSize"];
+
+      const copyTextStyles = (textarea, element) => {
+        const style = window.getComputedStyle(textarea);
+        textProperties.forEach((property) => {
+          element.style[property] = style[property];
+        });
+
+        return style;
+      };
+
+      // The position of a character in a textarea, measured on a copy of it.
+      const caretCoordinates = (textarea, position) => {
+        const mirror = document.createElement("div");
+        const style = copyTextStyles(textarea, mirror);
+        mirror.style.width = style.width;
+        mirror.style.borderStyle = style.borderStyle;
+
+        Object.assign(mirror.style, {
+          position: "absolute",
+          visibility: "hidden",
+          top: "0",
+          left: "-9999px",
+          whiteSpace: "pre-wrap",
+          overflowWrap: "break-word"
+        });
+
+        mirror.textContent = textarea.value.slice(0, position);
+        const marker = document.createElement("span");
+        marker.textContent = textarea.value.slice(position) || ".";
+        mirror.appendChild(marker);
+        document.body.appendChild(mirror);
+
+        const coordinates = {
+          top: marker.offsetTop + parseFloat(style.borderTopWidth) - textarea.scrollTop,
+          left: marker.offsetLeft + parseFloat(style.borderLeftWidth) - textarea.scrollLeft,
+          height: parseFloat(style.lineHeight) || parseFloat(style.fontSize) * 1.5
+        };
+
+        mirror.remove();
+
+        return coordinates;
+      };
+
+      // Below the "@", or above it when there is more room there.
+      const place = () => {
+        if (!field) return;
+
+        const caret = caretCoordinates(field, at);
+        const offsetTop = field.offsetTop;
+        const caretTop = field.getBoundingClientRect().top + caret.top;
+        const height = picker.offsetHeight;
+        const below = window.innerHeight - (caretTop + caret.height);
+        const above = caretTop;
+        const top = below < height + 8 && above > below ? caret.top - height - 4 : caret.top + caret.height + 4;
+        const maxLeft = Math.max(0, field.parentElement.clientWidth - picker.offsetWidth);
+
+        picker.style.top = `${offsetTop + top}px`;
+        picker.style.left = `${Math.min(Math.max(0, field.offsetLeft + caret.left), maxLeft)}px`;
+      };
+
+      const close = () => {
+        picker.classList.add("hidden");
+        field?.setAttribute("aria-expanded", "false");
+        field?.removeAttribute("aria-activedescendant");
+        field = null;
+        at = -1;
+        active = null;
+      };
+
+      // The text between the "@" and the caret, null when the mention is left.
+      const currentQuery = () => {
+        const caret = field.selectionStart;
+        if (field.value[at] !== "@" || caret <= at || caret !== field.selectionEnd) return null;
+
+        const query = field.value.slice(at + 1, caret);
+        if (query.includes("\n") || query.startsWith(" ")) return null;
+
+        return query;
+      };
+
+      const refresh = () => {
+        if (!field) return;
+
+        const query = currentQuery();
+        if (query === null) return close();
+
+        const term = query.trim().toLowerCase();
+        options.forEach((option) => option.classList.toggle("hidden", Boolean(term) && !option.dataset.search.includes(term)));
+
+        const shown = visibleOptions();
+
+        // A space after a name nobody has ends the mention.
+        if (!shown.length && query.endsWith(" ")) return close();
+
+        empty.classList.toggle("hidden", shown.length > 0);
+        if (!shown.includes(active)) setActive(shown[0]);
+        place();
+      };
+
+      const open = (textarea, index) => {
+        if (!picker) return;
+
+        field = textarea;
+        at = index;
+        textarea.parentElement.appendChild(picker);
+        textarea.setAttribute("aria-expanded", "true");
+        picker.classList.remove("hidden");
+        active = null;
+        picker.querySelector("#mention-options").scrollTop = 0;
+        refresh();
+      };
+
+      // The editor ids of the mentions in each textarea by their names, from
+      // the saved comment and the picked editors.
+      const mentionIds = new Map();
+      const bodyInputs = new Map();
+      const escapeRegExp = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+
+      // Longer names first, so "@Jane Doe" wins over "@Jane".
+      const mentionRanges = (textarea) => {
+        const ids = mentionIds.get(textarea);
+        const names = [...ids.keys()].sort((a, b) => b.length - a.length);
+        if (!names.length) return [];
+
+        const pattern = new RegExp(`(^|[^\\p{L}\\p{N}_@/])@(${names.map(escapeRegExp).join("|")})(?![\\p{L}\\p{N}_])`, "gu");
+
+        return [...textarea.value.matchAll(pattern)].map((match) => {
+          const start = match.index + match[1].length;
+
+          return {
+            start,
+            end: start + match[2].length + 1,
+            id: ids.get(match[2])
+          };
+        });
+      };
+
+      // The text which is sent, with the mentions written as "@editor-<id>".
+      const serializeMentions = (textarea) => {
+        const text = textarea.value;
+        let body = "";
+        let last = 0;
+
+        mentionRanges(textarea).forEach(({ start, end, id }) => {
+          body += `${text.slice(last, start)}@editor-${id}`;
+          last = end;
+        });
+
+        bodyInputs.get(textarea).value = body + text.slice(last);
+      };
+
+      const escapeHtml = (value) => value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+      const backdrops = new Map();
+
+      const renderMentions = (textarea) => {
+        const backdrop = backdrops.get(textarea);
+        const text = textarea.value;
+        let html = "";
+        let last = 0;
+
+        mentionRanges(textarea).forEach(({ start, end }) => {
+          html += `${escapeHtml(text.slice(last, start))}<mark>${escapeHtml(text.slice(start, end))}</mark>`;
+          last = end;
+        });
+
+        // A trailing line break takes up space only with text after it.
+        backdrop.innerHTML = `${html}${escapeHtml(text.slice(last))} `;
+        backdrop.scrollTop = textarea.scrollTop;
+      };
+
+      const syncBackdrop = (textarea) => {
+        const backdrop = backdrops.get(textarea);
+        const style = copyTextStyles(textarea, backdrop);
+        const scrollbar = textarea.offsetWidth - textarea.clientWidth - parseFloat(style.borderLeftWidth) - parseFloat(style.borderRightWidth);
+
+        Object.assign(backdrop.style, {
+          top: `${textarea.offsetTop}px`,
+          left: `${textarea.offsetLeft}px`,
+          width: `${textarea.offsetWidth}px`,
+          height: `${textarea.offsetHeight}px`,
+          paddingRight: `${parseFloat(style.paddingRight) + scrollbar}px`,
+          borderColor: "transparent"
+        });
+        backdrop.scrollTop = textarea.scrollTop;
+      };
+
+      // Resized by the user, or shown with its edit form.
+      const resizeObserver = new ResizeObserver((entries) => entries.forEach(({ target }) => syncBackdrop(target)));
+
+      // Edits through execCommand stay in the undo history of the textarea.
+      const replaceText = (textarea, start, end, text) => {
+        textarea.focus();
+        textarea.setSelectionRange(start, end);
+
+        const command = text ? document.execCommand("insertText", false, text) : document.execCommand("delete");
+        if (!command) {
+          textarea.setRangeText(text, start, end, "end");
+          textarea.dispatchEvent(new Event("input"));
+        }
+      };
+
+      const choose = (option) => {
+        const textarea = field;
+        const start = at;
+        const end = textarea.selectionStart;
+
+        mentionIds.get(textarea).set(option.dataset.mention, option.dataset.editorId);
+        close();
+        replaceText(textarea, start, end, `@${option.dataset.mention} `);
+      };
+
+      mentionFields.forEach((textarea) => {
+        textarea.setAttribute("aria-autocomplete", "list");
+        textarea.setAttribute("aria-controls", "mention-options");
+        textarea.setAttribute("aria-expanded", "false");
+
+        const backdrop = document.createElement("div");
+        backdrop.className = "mention-backdrop";
+        backdrop.setAttribute("aria-hidden", "true");
+        textarea.after(backdrop);
+        textarea.classList.add("mention-input");
+        backdrops.set(textarea, backdrop);
+
+        // The textarea keeps the names, the hidden input sends the ids.
+        const bodyInput = document.createElement("input");
+        bodyInput.type = "hidden";
+        bodyInput.name = textarea.name;
+        textarea.removeAttribute("name");
+        backdrop.after(bodyInput);
+        bodyInputs.set(textarea, bodyInput);
+        mentionIds.set(textarea, new Map(Object.entries(JSON.parse(textarea.dataset.mentions || "{}"))));
+
+        renderMentions(textarea);
+        serializeMentions(textarea);
+        resizeObserver.observe(textarea);
+
+        textarea.addEventListener("input", (event) => {
+          renderMentions(textarea);
+          serializeMentions(textarea);
+
+          if (field === textarea) return refresh();
+          if (event.inputType !== "insertText" || event.data !== "@") return;
+
+          // Only at the start of a word, so emails don't open it.
+          const index = textarea.selectionStart - 1;
+          if (index > 0 && !/[\s(]/.test(textarea.value[index - 1])) return;
+
+          open(textarea, index);
+        });
+
+        textarea.addEventListener("keydown", (event) => {
+          if (field !== textarea || event.metaKey || event.ctrlKey || event.altKey) return;
+
+          const shown = visibleOptions();
+
+          if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+            event.preventDefault();
+            if (!shown.length) return;
+
+            const step = event.key === "ArrowDown" ? 1 : -1;
+            const position = shown.indexOf(active);
+            setActive(shown[(position + step + shown.length) % shown.length]);
+          } else if ((event.key === "Enter" || event.key === "Tab") && active) {
+            event.preventDefault();
+            choose(active);
+          } else if (event.key === "Escape") {
+            event.preventDefault();
+            close();
+          }
+        });
+
+        // Deleting into a mention deletes all of it.
+        textarea.addEventListener("keydown", (event) => {
+          if (field === textarea || event.metaKey || event.ctrlKey || event.altKey) return;
+          if (event.key !== "Backspace" && event.key !== "Delete") return;
+
+          const caret = textarea.selectionStart;
+          if (caret !== textarea.selectionEnd) return;
+
+          const range = mentionRanges(textarea).find(({ start, end }) => event.key === "Backspace" ? start < caret && caret <= end : start <= caret && caret < end);
+          if (!range) return;
+
+          event.preventDefault();
+          replaceText(textarea, range.start, range.end, "");
+        });
+
+        // Moving the caret out of the mention closes the picker.
+        textarea.addEventListener("keyup", (event) => {
+          if (field === textarea && ["ArrowLeft", "ArrowRight", "Home", "End", "PageUp", "PageDown"].includes(event.key)) refresh();
+        });
+        textarea.addEventListener("click", () => field === textarea && refresh());
+        textarea.addEventListener("scroll", () => {
+          backdrop.scrollTop = textarea.scrollTop;
+          if (field === textarea) place();
+        });
+        textarea.addEventListener("blur", () => field === textarea && close());
+      });
+
+      options.forEach((option) => {
+        // Keeps the focus in the textarea.
+        option.addEventListener("mousedown", (event) => event.preventDefault());
+        option.addEventListener("mousemove", () => {
+          if (active !== option) setActive(option);
+        });
+        option.addEventListener("click", () => field && choose(option));
+      });
+
+      window.addEventListener("resize", place);
+      window.addEventListener("scroll", place, {
+        passive: true
+      });
+    }
+
+    const highlight = (target) => {
+      target.classList.add("bg-raketa-primary/10");
+      setTimeout(() => target.classList.remove("bg-raketa-primary/10"), 1500);
+    };
+
+    document.querySelectorAll("[data-scroll-to]").forEach((button) => {
+      button.addEventListener("click", () => {
+        const target = document.getElementById(`comment-${button.dataset.scrollTo}`);
+        if (!target) return;
+
+        history.pushState(null, "", `#${target.id}`);
+        target.scrollIntoView({
+          behavior: "smooth",
+          block: "center"
+        });
+        highlight(target);
+      });
+    });
+
+    // Opened from a copied comment link.
+    const linked = /^#comment-\d+$/.test(window.location.hash) && document.querySelector(window.location.hash);
+    if (linked) {
+      linked.scrollIntoView({
+        block: "center"
+      });
+      highlight(linked);
+    }
+
+    document.querySelectorAll("[data-copy-link]").forEach((button) => {
+      const copied = button.nextElementSibling;
+
+      button.addEventListener("click", async () => {
+        const url = new URL(window.location.href);
+        url.searchParams.delete("comment_error");
+        url.hash = `comment-${button.dataset.copyLink}`;
+
+        try {
+          await navigator.clipboard.writeText(url.toString());
+        } catch (e) {
+          // The clipboard API needs a secure context.
+          window.prompt("Copy the link to the comment", url.toString());
+          return;
+        }
+
+        copied.classList.remove("hidden");
+        setTimeout(() => copied.classList.add("hidden"), 1500);
+      });
+    });
+
+    // Today: the time. The last 7 days: the weekday. Older: the date and time.
+    const formatCommentTime = (date, now, locale, dateTimeFormat) => {
+      const startOfDay = (value) => new Date(value.getFullYear(), value.getMonth(), value.getDate());
+      const days = Math.round((startOfDay(now) - startOfDay(date)) / 86400000);
+
+      if (days <= 0) return date.toLocaleTimeString(locale, {
+        timeStyle: "short"
+      });
+      if (days < 7) return date.toLocaleDateString(locale, {
+        weekday: "short"
+      });
+
+      return date.toLocaleString(locale, dateTimeFormat);
+    };
+
+    // The layout defines the locale and format of the dates after this script.
+    document.addEventListener("DOMContentLoaded", () => {
+      const locale = typeof TIME_LOCALE !== "undefined" ? TIME_LOCALE : "en-GB";
+      const dateTimeFormat = typeof TIME_FORMAT !== "undefined" ? TIME_FORMAT : {
+        dateStyle: "short",
+        timeStyle: "short"
+      };
+      const now = new Date();
+
+      document.querySelectorAll("time[data-comment-datetime]").forEach((item) => {
+        const date = new Date(item.getAttribute("datetime"));
+        if (Number.isNaN(date.getTime())) return;
+
+        item.textContent = formatCommentTime(date, now, locale, dateTimeFormat);
+        item.title = date.toLocaleString(locale, dateTimeFormat);
+      });
+    });
+  })();
+</script>