Make spoiler click to toggle (#176)

Signed-off-by: Ajay Bura <ajbura@gmail.com>

src/app/molecules/message/Message.scss

@@ -210,6 +210,7 @@
     border-radius: 4px;
     background-color: rgba(124, 124, 124, 0.5);
     color:transparent;
+    cursor: pointer;
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;
@@ -219,16 +220,15 @@
     & > * {
       opacity: 0;
     }
-    &:focus, &:hover {
-      background-color: transparent;
-      color: inherit;
-      user-select: initial;
+  }
+  .data-mx-spoiler--visible {
+    background-color: var(--bg-surface-active) !important;
+    color: inherit !important;
+    user-select: initial !important;
     & > * {
-        opacity: inherit;
+      opacity: inherit !important;
     }
   }
-
-  }
   &-edited {
     color: var(--tc-surface-low);
   }

src/app/organisms/room/RoomViewContent.jsx

@@ -74,14 +74,20 @@ function genRoomIntro(mEvent, roomTimeline) {
 }
 
 function handleOnClickCapture(e) {
-  const { target } = e;
-  const userId = target.getAttribute('data-mx-pill');
-  if (!userId) return;
+  const { target, nativeEvent } = e;
 
+  const userId = target.getAttribute('data-mx-pill');
+  if (userId) {
     const roomId = navigation.selectedRoomId;
     openProfileViewer(userId, roomId);
   }
 
+  const spoiler = nativeEvent.path.find((el) => el?.hasAttribute?.('data-mx-spoiler'));
+  if (spoiler) {
+    spoiler.classList.toggle('data-mx-spoiler--visible');
+  }
+}
+
 function renderEvent(roomTimeline, mEvent, prevMEvent, isFocus = false) {
   const isBodyOnly = (prevMEvent !== null
     && prevMEvent.getType() !== 'm.room.member'