@comty.io/core 0.1.3 → 0.1.5

package/src/comments.js

@@ -3,7 +3,7 @@ export function createCommentThread(context) {
   const {
     root, apiUrl, projectKey, commentStatuses, selectedStatusFilters, placedPins,
     closeBubbles, getCommentStatus, updateCommentStatus, applyStatusDot,
-    renderSidepanelComments, applyStatusFilters, createThreadItem,
+    renderSidepanelComments, applyStatusFilters, createThreadItem, renderCommentContent,
     isOwnCommentEntry, updateCommentContent, deleteSdkComment, getCommentId,
     updateReplyContent, deleteSdkReply, createCommentAvatar, getSdkHeaders,
     showAuthPrompt,
@@ -31,14 +31,6 @@ export function createCommentThread(context) {
       const header = document.createElement("div");
       header.className = "comty-bubble-header";
 
-      const title = document.createElement("h2");
-      title.className = "comty-bubble-title";
-      title.innerText = "Comment";
-      header.appendChild(title);
-
-      const headerActions = document.createElement("div");
-      headerActions.className = "comty-bubble-header-actions";
-
       const statusMenuButton = document.createElement("button");
       statusMenuButton.className = "comty-status-trigger";
       statusMenuButton.type = "button";
@@ -77,7 +69,7 @@ export function createCommentThread(context) {
       };
 
       const saveStatus = async (nextStatus, control) => {
-        if (!context.canWrite) return false;
+        if (!context.canManage) return false;
         control.disabled = true;
         const savedStatus = await updateCommentStatus(comment, nextStatus);
         control.disabled = false;
@@ -102,7 +94,7 @@ export function createCommentThread(context) {
         return true;
       };
 
-      statusMenuButton.disabled = !context.canWrite;
+      statusMenuButton.disabled = !context.canManage;
       statusMenuButton.onclick = (event) => {
         event.stopPropagation();
         const existingPopover = document.querySelector(
@@ -114,10 +106,11 @@ export function createCommentThread(context) {
         if (existingPopover) return;
 
         const popover = document.createElement("div");
-        popover.className = "comty-popover comty-status-popover";
+        popover.className = "comty-popover comty-comment-popover comty-status-popover";
         const buttonRect = statusMenuButton.getBoundingClientRect();
         popover.style.top = `${buttonRect.bottom + 4}px`;
-        popover.style.left = `${buttonRect.right - 140}px`;
+        popover.style.left = `${buttonRect.left}px`;
+        popover.style.transformOrigin = "top left";
 
         for (const status of commentStatuses) {
           const item = document.createElement("button");
@@ -155,6 +148,13 @@ export function createCommentThread(context) {
         }
 
         root.appendChild(popover);
+        const popoverWidth = popover.offsetWidth;
+        const popoverHeight = popover.offsetHeight;
+        popover.style.left = `${Math.max(8, Math.min(buttonRect.left, innerWidth - popoverWidth - 8))}px`;
+        if (buttonRect.bottom + 4 + popoverHeight > innerHeight - 8) {
+          popover.style.top = `${Math.max(8, buttonRect.top - popoverHeight - 4)}px`;
+          popover.style.transformOrigin = "bottom left";
+        }
 
         const closeStatusPopover = (closeEvent) => {
           if (
@@ -171,9 +171,7 @@ export function createCommentThread(context) {
         );
       };
 
-      headerActions.appendChild(statusMenuButton);
-      headerActions.appendChild(closeButton);
-      header.appendChild(headerActions);
+      header.append(statusMenuButton, closeButton);
       bubble.appendChild(header);
 
       const thread = document.createElement("div");
@@ -192,7 +190,7 @@ export function createCommentThread(context) {
 
         const popover = document.createElement("div");
         popover.className =
-          "comty-popover comty-entry-actions-popover";
+          "comty-popover comty-comment-popover comty-entry-actions-popover";
 
         const editItem = document.createElement("button");
         editItem.className = "comty-popover-item";
@@ -278,7 +276,7 @@ export function createCommentThread(context) {
 
           const previousContent = entry.content;
           entry.content = nextContent;
-          item.content.innerText = nextContent;
+          renderCommentContent(item.content, nextContent);
           editor.disabled = true;
           editor.replaceWith(item.content);
           renderSidepanelComments();
@@ -286,11 +284,11 @@ export function createCommentThread(context) {
           const savedContent = await persist(nextContent);
           if (!savedContent) {
             entry.content = previousContent;
-            item.content.innerText = previousContent || "";
+            renderCommentContent(item.content, previousContent || "");
             renderSidepanelComments();
             return;
           }
-          item.content.innerText = savedContent;
+          renderCommentContent(item.content, savedContent);
           renderSidepanelComments();
         };
 
@@ -396,9 +394,11 @@ export function createCommentThread(context) {
         replyForm.appendChild(createCommentAvatar(context.currentUser || { name: "You" }));
         const replyField = document.createElement("div");
         replyField.className = "comty-reply-field";
-        const replyInput = document.createElement("input");
+        const replyInput = document.createElement("textarea");
         replyInput.className = "comty-reply-input";
         replyInput.placeholder = "Reply";
+        replyInput.rows = 1;
+        replyInput.setAttribute("aria-label", "Reply");
 
         const replyButton = document.createElement("button");
         replyButton.className = "comty-reply-button";
@@ -432,6 +432,7 @@ export function createCommentThread(context) {
               comment.replies = replies;
               appendReply(data.reply);
               replyInput.value = "";
+              syncReplySize();
               requestAnimationFrame(() => {
                 threadList.scrollTop = threadList.scrollHeight;
               });
@@ -445,12 +446,28 @@ export function createCommentThread(context) {
           }
         };
 
+        const syncReplySize = () => {
+          const currentHeight = replyInput.getBoundingClientRect().height;
+          replyInput.style.transition = "none";
+          const lineHeight = parseFloat(getComputedStyle(replyInput).lineHeight);
+          replyInput.style.height = `${lineHeight}px`;
+          const contentHeight = replyInput.scrollHeight;
+          replyInput.style.height = `${currentHeight}px`;
+          replyInput.getBoundingClientRect();
+          replyInput.style.transition = "";
+          const nextHeight = Math.min(contentHeight, parseFloat(getComputedStyle(replyInput).maxHeight));
+          replyInput.style.height = `${nextHeight}px`;
+          if (contentHeight <= lineHeight + 1) replyInput.scrollTop = 0;
+          replyField.classList.toggle("comty-reply-expanded", contentHeight > lineHeight + 1);
+        };
+
         replyInput.oninput = () => {
+          syncReplySize();
           replyButton.disabled = replyInput.value.trim().length === 0;
         };
         replyInput.onkeydown = (event) => {
           event.stopPropagation();
-          if (event.key === "Enter" && !event.shiftKey) {
+          if (event.key === "Enter" && !event.shiftKey && !event.isComposing) {
             event.preventDefault();
             void submitReply();
           }
@@ -468,10 +485,10 @@ export function createCommentThread(context) {
         const signInButton = document.createElement("button");
         signInButton.className = "comty-sign-in-reply";
         signInButton.type = "button";
-        signInButton.innerText = "Sign in to reply";
+        signInButton.innerText = context.allowGuestComments ? "Leave a reply" : "Sign in to reply";
         signInButton.onclick = (event) => {
           event.stopPropagation();
-          showAuthPrompt();
+          showAuthPrompt(false, () => openCommentThread(comment, pin, pinStatusDot, x, y, removeHoverBubble));
         };
         replyForm.appendChild(signInButton);
       }