Add r shortcut for Desktop commentors

attestate · Dec 17, 2024 · 2861e35 · 2861e35
1 parent 6dcc06a
commit 2861e35
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 2 deletions.
diff --git a/src/views/story.mjs b/src/views/story.mjs
@@ -343,6 +343,7 @@ export default async function (trie, theme, index, value, referral) {
                                     >Moderated because: "${comment.reason}"</i
                                   >`
                                 : html`<span
+                                    class="comment-text"
                                     dangerouslySetInnerHTML=${{
                                       __html: linkifyStr(
                                         DOMPurify.sanitize(comment.title),

diff --git a/src/web/src/CommentInput.jsx b/src/web/src/CommentInput.jsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
 import { WagmiConfig, useAccount } from "wagmi";
 import { Wallet } from "@ethersproject/wallet";
@@ -125,6 +125,40 @@ const CommentInput = (props) => {
       button.style.display = "none";
     }
   }
+  const textareaRef = useRef(null);
+  useEffect(() => {
+    const handleKeyPress = (e) => {
+      if (e.key !== "r") return;
+
+      const selection = window.getSelection();
+      const selected = selection.toString().trim();
+      if (!selected || !address || (isEligible !== null && !isEligible)) return;
+
+      // Only proceed if selection is within a comment-text span
+      if (
+        !selection.anchorNode?.parentElement?.classList?.contains(
+          "comment-text",
+        )
+      )
+        return;
+
+      const textarea = textareaRef.current;
+      if (!textarea) return;
+
+      const start = textarea.selectionStart;
+      const end = textarea.selectionEnd;
+      const quote = `> ${selected}`;
+
+      setText(text.slice(0, start) + quote + text.slice(end));
+
+      setTimeout(() => {
+        textarea.selectionStart = textarea.selectionEnd = start + quote.length;
+      }, 0);
+    };
+
+    document.addEventListener("keydown", handleKeyPress);
+    return () => document.removeEventListener("keydown", handleKeyPress);
+  }, [text, address, isEligible]);
   return (
     <div
       style={{
@@ -133,6 +167,7 @@ const CommentInput = (props) => {
       }}
     >
       <textarea
+        ref={textareaRef}
         onFocus={toggleNavigationItems}
         onBlur={toggleNavigationItems}
         rows="12"

diff --git a/src/web/src/CommentSection.jsx b/src/web/src/CommentSection.jsx
@@ -96,7 +96,10 @@ const Comment = React.forwardRef(({ comment, storyIndex }, ref) => {
         </span>
       </div>
       <br />
-      <span style={{ fontSize: "11pt", lineHeight: "1.15" }}>
+      <span
+        className="comment-text"
+        style={{ fontSize: "11pt", lineHeight: "1.15" }}
+      >
         <Linkify
           options={{
             className: "meta-link",