1 files changed, 47 insertions, 4 deletions
diff --git a/static/js/dynamic-comment-form.js b/static/js/dynamic-comment-form.js
index 809a755..75e2fb6 100644
--- a/static/js/dynamic-comment-form.js
+++ b/static/js/dynamic-comment-form.js
@@ -81,12 +81,55 @@ window.addEventListener("load", () => {
 });
 
 window.addEventListener("load", () => {
-  // Unhide additional comment actions if Javascript is enabled.
-  let additionalActionsRows = document.querySelectorAll(".comment-additional-actions");
-  for (let row of additionalActionsRows) {
-    row.removeAttribute("hidden");
+  const replyToField = document.getElementById("reply-to");
+  const commentFormModule = document.querySelector('.comment-form-module');
+
+  // Create a "Replying To" preview container dynamically
+  const previewContainer = document.createElement('div');
+  previewContainer.id = 'reply-preview-area';
+  previewContainer.style.display = 'none';
+  commentFormModule.prepend(previewContainer);
+
+  const replyButtons = document.querySelectorAll(".reply-button");
+  for (const button of replyButtons) {
+    button.removeAttribute("hidden");
+    button.addEventListener('click', (e) => {
+      replyTo.value = button.getAttribute("data-reply-to-id");
+      const targetId = button.getAttribute('data-target');
+      const originalComment = document.getElementById(targetId);
+
+      if (originalComment) {
+        const clone = originalComment.cloneNode(true);
+        const nestedReplies = clone.querySelectorAll('.reply');
+        nestedReplies.forEach(reply => reply.remove());
+        const actionButtons = clone.querySelector('.comment-reactions');
+        if (actionButtons) actionButtons.remove();
+        previewContainer.innerHTML = `
+<div>
+  <strong>You are replying to this comment:</strong>
+  <button id="cancel-reply" style="margin-left: auto; cursor: pointer; font-size: 8px;">Cancel Reply</button>
+</div>
+<div class="reply-preview-content" style="opacity: 0.8; scale: 0.95; origin: top left;">
+    ${clone.outerHTML}
+</div>
+`;
+        previewContainer.style.display = 'block';
+        commentFormModule.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        document.getElementById('cancel-reply').addEventListener('click', () => {
+          replyTo.value = "";
+          previewContainer.style.display = 'none';
+          previewContainer.innerHTML = '';
+        });
+      }
+    })
   }
 
+  document.addEventListener('click', (e) => {
+    if (e.target.classList.contains('reply-button')) {
+
+    }
+  });
+
   let header = document.getElementById("comment-form-header");
   let replyTo = document.getElementById("reply-to");
   let buttons = document.querySelectorAll(".comment-reply-button");