auto invert images in dark mode

ibastawisi · Jan 17, 2025 · 3800c47 · 3800c47
1 parent 63262bb
commit 3800c47
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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);
   }
 }