MessageLogger: Add toggle deleted highlight rightclick button

2 files changed, 23 insertions, 8 deletions

diff --git a/src/plugins/messageLogger/index.tsx b/src/plugins/messageLogger/index.tsx
index 5ff514e..3a20fd2 100644
--- a/src/plugins/messageLogger/index.tsx
+++ b/src/plugins/messageLogger/index.tsx
@@ -43,7 +43,8 @@ function addDeleteStyle() {
     }
 }
 
-const MENU_ITEM_ID = "message-logger-remove-history";
+const REMOVE_HISTORY_ID = "ml-remove-history";
+const TOGGLE_DELETE_STYLE_ID = "ml-toggle-style";
 const patchMessageContextMenu: NavContextMenuPatchCallback = (children, props) => () => {
     const { message } = props;
     const { deleted, editHistory, id, channel_id } = message;
@@ -52,11 +53,11 @@ const patchMessageContextMenu: NavContextMenuPatchCallback = (children, props) =
 
     children.push((
         <Menu.MenuItem
-            id={MENU_ITEM_ID}
-            key={MENU_ITEM_ID}
+            id={REMOVE_HISTORY_ID}
+            key={REMOVE_HISTORY_ID}
             label="Remove Message History"
             action={() => {
-                if (message.deleted) {
+                if (deleted) {
                     FluxDispatcher.dispatch({
                         type: "MESSAGE_DELETE",
                         channelId: channel_id,
@@ -69,6 +70,20 @@ const patchMessageContextMenu: NavContextMenuPatchCallback = (children, props) =
             }}
         />
     ));
+
+    if (!deleted) return;
+
+    const domElement = document.getElementById(`chat-messages-${channel_id}-${id}`);
+    if (!domElement) return;
+
+    children.push((
+        <Menu.MenuItem
+            id={TOGGLE_DELETE_STYLE_ID}
+            key={TOGGLE_DELETE_STYLE_ID}
+            label="Toggle Deleted Highlight"
+            action={() => domElement.classList.toggle("messagelogger-deleted")}
+        />
+    ));
 };
 
 export default definePlugin({
diff --git a/src/plugins/messageLogger/messageLogger.css b/src/plugins/messageLogger/messageLogger.css
index 5d7e6b9..da5ccc2 100644
--- a/src/plugins/messageLogger/messageLogger.css
+++ b/src/plugins/messageLogger/messageLogger.css
@@ -2,15 +2,15 @@
     display: none;
 }
 
-.messagelogger-deleted :is(video),
-.messagelogger-deleted-attachment,
+.messagelogger-deleted :is(video, .emoji, [data-type="sticker"]),
+.messagelogger-deleted .messagelogger-deleted-attachment,
 .messagelogger-deleted div iframe {
     filter: grayscale(1) !important;
     transition: 150ms filter ease-in-out;
 }
 
-.messagelogger-deleted:hover :is(video),
-.messagelogger-deleted-attachment:hover,
+.messagelogger-deleted:hover :is(video, .emoji, [data-type="sticker"]),
+.messagelogger-deleted .messagelogger-deleted-attachment:hover,
 .messagelogger-deleted iframe:hover {
     filter: grayscale(0) !important;
 }