feat: Select text modals (#109)

* feat: select text modal for comments * feat: select text for posts * chore: remove unnecessary imports * refactor: move SelectText to shared * refactor: use styled for selectable text
aeharding · Jul 1, 2023 · 9f9e8ba · 9f9e8ba
1 parent 4303172
commit 9f9e8ba
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 1 deletion.
diff --git a/src/features/comment/CommentEllipsis.tsx b/src/features/comment/CommentEllipsis.tsx
@@ -15,6 +15,7 @@ import {
   pencilOutline,
   personOutline,
   shareOutline,
+  textOutline,
   trashOutline,
 } from "ionicons/icons";
 import { CommentView } from "lemmy-js-client";
@@ -36,6 +37,7 @@ import { notEmpty } from "../../helpers/array";
 import CommentEditing from "./edit/CommentEdit";
 import useCollapseRootComment from "./useCollapseRootComment";
 import { FeedContext } from "../feed/FeedContext";
+import SelectText from "../../pages/shared/SelectTextModal";
 
 const StyledIonIcon = styled(IonIcon)`
   padding: 8px 12px;
@@ -81,6 +83,11 @@ export default function MoreActions({ comment, rootIndex }: MoreActionsProps) {
     item: comment,
   });
 
+  const [selectText, onDismissSelectText] = useIonModal(SelectText, {
+    text: comment.comment.content,
+    onDismiss: (data: string, role: string) => onDismissSelectText(data, role),
+  });
+
   const commentVotesById = useAppSelector(
     (state) => state.comment.commentVotesById
   );
@@ -138,6 +145,11 @@ export default function MoreActions({ comment, rootIndex }: MoreActionsProps) {
             role: "reply",
             icon: arrowUndoOutline,
           },
+          {
+            text: "Select Text",
+            role: "select-text",
+            icon: textOutline,
+          },
           {
             text: getHandle(comment.creator),
             role: "person",
@@ -209,6 +221,10 @@ export default function MoreActions({ comment, rootIndex }: MoreActionsProps) {
 
               reply({ presentingElement: pageContext.page });
               break;
+            case "select-text":
+              return selectText({
+                presentingElement: pageContext.page,
+              });
             case "person":
               router.push(
                 buildGeneralBrowseLink(`/u/${getHandle(comment.creator)}`)

diff --git a/src/features/post/shared/MoreActions.tsx b/src/features/post/shared/MoreActions.tsx
@@ -13,6 +13,7 @@ import {
   peopleOutline,
   personOutline,
   shareOutline,
+  textOutline,
 } from "ionicons/icons";
 import { useContext, useState } from "react";
 import { useAppDispatch, useAppSelector } from "../../../store";
@@ -24,6 +25,7 @@ import { getHandle } from "../../../helpers/lemmy";
 import { useBuildGeneralBrowseLink } from "../../../helpers/routes";
 import CommentReply from "../../comment/reply/CommentReply";
 import { jwtSelector } from "../../auth/authSlice";
+import SelectText from "../../../pages/shared/SelectTextModal";
 
 interface MoreActionsProps {
   post: PostView;
@@ -48,6 +50,11 @@ export default function MoreActions({ post, className }: MoreActionsProps) {
     item: post,
   });
 
+  const [selectText, onDismissSelectText] = useIonModal(SelectText, {
+    text: post.post.body,
+    onDismiss: (data: string, role: string) => onDismissSelectText(data, role),
+  });
+
   const postVotesById = useAppSelector((state) => state.post.postVotesById);
 
   const myVote = postVotesById[post.post.id] ?? post.my_vote;
@@ -98,6 +105,11 @@ export default function MoreActions({ post, className }: MoreActionsProps) {
             role: "community",
             icon: peopleOutline,
           },
+          {
+            text: "Select Text",
+            role: "select",
+            icon: textOutline,
+          },
           {
             text: "Share",
             role: "share",
@@ -150,6 +162,9 @@ export default function MoreActions({ post, className }: MoreActionsProps) {
 
               break;
             }
+            case "select": {
+              return selectText({ presentingElement: pageContext.page });
+            }
             case "share": {
               navigator.share({ url: post.post.url ?? post.post.ap_id });
 

diff --git a/src/index.css b/src/index.css
@@ -51,4 +51,4 @@ ion-modal.small ion-header ion-toolbar:first-of-type {
 
 ion-alert.preserve-newlines {
   white-space: pre-line;
-}
+}
diff --git a/src/pages/shared/SelectTextModal.tsx b/src/pages/shared/SelectTextModal.tsx
@@ -0,0 +1,51 @@
+import {
+  IonHeader,
+  IonToolbar,
+  IonTitle,
+  IonButtons,
+  IonButton,
+  IonContent,
+  IonPage,
+} from "@ionic/react";
+import { useRef } from "react";
+import { Centered } from "../../features/auth/Login";
+import styled from "@emotion/styled";
+
+interface SelectTextProps {
+  text: string;
+  onDismiss: (data?: string | null | undefined | number, role?: string) => void;
+}
+
+const SelectableText = styled.p`
+  user-select: text;
+  -webkit-user-select: text;
+  white-space: pre-wrap;
+`;
+
+export default function SelectText({ text, onDismiss }: SelectTextProps) {
+  const pageRef = useRef();
+
+  return (
+    <IonPage ref={pageRef}>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>
+            <Centered>Select Text</Centered>
+          </IonTitle>
+          <IonButtons slot="end">
+            <IonButton
+              onClick={() => {
+                onDismiss();
+              }}
+            >
+              Dismiss
+            </IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent>
+        <SelectableText>{text}</SelectableText>
+      </IonContent>
+    </IonPage>
+  );
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -51,4 +51,4 @@ ion-modal.small ion-header ion-toolbar:first-of-type { @@
     ion-alert.preserve-newlines {
       white-space: pre-line;
-    }
+    }