From 3800c474a70b22692ff4fb28cb9f035efbcdc300 Mon Sep 17 00:00:00 2001
From: Ibrahim El-bastawisi <ibastawisi@outlook.com>
Date: Fri, 17 Jan 2025 15:10:15 +0200
Subject: [PATCH] auto invert images in dark mode

---
 src/editor/nodes/GraphNode/index.tsx               | 14 +-------------
 src/editor/nodes/ImageNode/index.css               |  1 -
 .../plugins/ToolbarPlugin/Tools/ImageTools.tsx     | 10 ++++++++--
 src/editor/theme.css                               |  8 ++++----
 4 files changed, 13 insertions(+), 20 deletions(-)

diff --git a/src/editor/nodes/GraphNode/index.tsx b/src/editor/nodes/GraphNode/index.tsx
index 8900eb82..1dd900fe 100644
--- a/src/editor/nodes/GraphNode/index.tsx
+++ b/src/editor/nodes/GraphNode/index.tsx
@@ -87,21 +87,9 @@ export class GraphNode extends ImageNode {
     return node;
   }
 
-  createDOM(config: EditorConfig, editor: LexicalEditor): HTMLElement {
-    const element = super.createDOM(config, editor);
-    element.dataset.type = 'graph';
-    return element;
-  }
-
   exportDOM(editor: LexicalEditor): DOMExportOutput {
     const isSVG = this.__src.startsWith('data:image/svg+xml');
-    if (!isSVG) {
-      const { element } = super.exportDOM(editor);
-      if (element && isHTMLElement(element)) {
-        element.dataset.type = 'graph';
-      }
-      return { element };
-    }
+    if (!isSVG) return super.exportDOM(editor);
     const element = this.createDOM(editor._config, editor);
     if (element && isHTMLElement(element)) {
       const html = decodeURIComponent(this.__src.split(',')[1]);
diff --git a/src/editor/nodes/ImageNode/index.css b/src/editor/nodes/ImageNode/index.css
index edc972eb..2d29ef47 100644
--- a/src/editor/nodes/ImageNode/index.css
+++ b/src/editor/nodes/ImageNode/index.css
@@ -27,7 +27,6 @@
 }
 
 .LexicalTheme__image .image-control-wrapper--active,
-.LexicalTheme__image .image-control-wrapper:active ,
 .LexicalTheme__image:focus-within {
   outline: 2px solid rgb(95 183 255 / 75%);
 }
diff --git a/src/editor/plugins/ToolbarPlugin/Tools/ImageTools.tsx b/src/editor/plugins/ToolbarPlugin/Tools/ImageTools.tsx
index 773c7300..b2d1dbc7 100644
--- a/src/editor/plugins/ToolbarPlugin/Tools/ImageTools.tsx
+++ b/src/editor/plugins/ToolbarPlugin/Tools/ImageTools.tsx
@@ -8,7 +8,7 @@ import { useEffect, useState } from "react";
 import { SET_DIALOGS_COMMAND } from '../Dialogs/commands';
 import { SxProps, Theme } from '@mui/material/styles';
 import { ToggleButtonGroup, ToggleButton, SvgIcon } from "@mui/material";
-import { Edit, ClosedCaptionDisabled, ClosedCaption, ViewHeadline, Delete, Draw } from "@mui/icons-material";
+import { Edit, ClosedCaptionDisabled, ClosedCaption, ViewHeadline, Delete, Draw, FilterBAndW } from "@mui/icons-material";
 import { $isIFrameNode, IFrameNode } from "@/editor/nodes/IFrameNode";
 
 const FormatImageRight = () => <SvgIcon viewBox='0 -960 960 960'>
@@ -71,6 +71,12 @@ export default function ImageTools({ editor, node, sx }: { editor: LexicalEditor
           onClick={toggleShowCaption}>
           {node.getShowCaption() ? <ClosedCaption /> : <ClosedCaptionDisabled />}
         </ToggleButton>
+        <ToggleButton value="filter-toggle" key="filter-toggle" selected={!!(style && style.filter !== "none")}
+          onClick={() => {
+            updateStyle({ "filter": style?.filter === "none" ? "" : "none" });
+          }}>
+          <FilterBAndW />
+        </ToggleButton>
         <ToggleButton value="delete"
           onClick={() => {
             editor.update(() => {
@@ -88,7 +94,7 @@ export default function ImageTools({ editor, node, sx }: { editor: LexicalEditor
           }}>
           <FormatImageLeft />
         </ToggleButton>
-        <ToggleButton value="float-none" key="float-none" selected={!style || style?.float === "none"}
+        <ToggleButton value="float-none" key="float-none" selected={!style?.float || style?.float === "none"}
           onClick={() => {
             updateStyle({ "float": "none", "margin": "0", "max-width": "100%" });
           }}>
diff --git a/src/editor/theme.css b/src/editor/theme.css
index 36efe0aa..27e5de0f 100644
--- a/src/editor/theme.css
+++ b/src/editor/theme.css
@@ -736,8 +736,8 @@ iframe {
 }
 
 [theme=light] .LexicalTheme__image svg :is(path, rect, circle, ellipse, polygon, polyline, line, text, tspan, textPath),
-[theme=light] .LexicalTheme__image[data-type='graph'] img {
-  filter: initial !important;
+[theme=light] .LexicalTheme__image img {
+  filter: none !important;
 }
 
 [theme=light] .details__container .details__container li img {
@@ -787,7 +787,7 @@ iframe {
 }
 
 [theme=dark] .LexicalTheme__image svg :is(path, rect, circle, ellipse, polygon, polyline, line, text, tspan, textPath),
-[theme=dark] .LexicalTheme__image[data-type='graph'] img {
+[theme=dark] .LexicalTheme__image:not(:is([style*="filter:none"], [style*="filter: none"])) img {
   filter: invert(93%) hue-rotate(180deg);
 }
 
@@ -847,7 +847,7 @@ iframe {
   }
 
   .LexicalTheme__image svg :is(path, rect, circle, ellipse, polygon, polyline, line, text, tspan, textPath),
-  .LexicalTheme__image[data-type='graph'] img {
+  .LexicalTheme__image:not(:is([style*="filter:none"], [style*="filter: none"])) img {
     filter: invert(93%) hue-rotate(180deg);
   }
 }
\ No newline at end of file