From 02611e97ed2e453d24edf511ed1189fa0e375890 Mon Sep 17 00:00:00 2001
From: Jinjing <6427696+AmethystLiang@users.noreply.github.com>
Date: Sun, 19 Apr 2026 10:00:30 -0700
Subject: [PATCH] fix(editor): don't highlight mark-toggle toolbar buttons
 either (#834)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Extends the prior fix — bold, italic, strike, and link were still
rendering with an active highlight. Per the same rationale, toolbar
buttons are action triggers, not style indicators, so none of them
should surface active state.
---
 .../components/editor/RichMarkdownToolbar.tsx | 29 +++----------------
 1 file changed, 4 insertions(+), 25 deletions(-)

diff --git a/src/renderer/src/components/editor/RichMarkdownToolbar.tsx b/src/renderer/src/components/editor/RichMarkdownToolbar.tsx
index 38fdf9c9f64..a82ba9bbbe2 100644
--- a/src/renderer/src/components/editor/RichMarkdownToolbar.tsx
+++ b/src/renderer/src/components/editor/RichMarkdownToolbar.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import type { Editor } from '@tiptap/react'
-import { useEditorState } from '@tiptap/react'
 import {
   Heading1,
   Heading2,
@@ -30,26 +29,6 @@ export function RichMarkdownToolbar({
   onToggleLink,
   onImagePick
 }: RichMarkdownToolbarProps): React.JSX.Element {
-  // Why: the editor object reference is stable across transactions, so passing
-  // it as a prop alone won't re-render this component when the selection moves.
-  // useEditorState subscribes to editor transactions and returns derived state,
-  // triggering a re-render only when the active formatting actually changes.
-  const active = useEditorState({
-    editor,
-    selector: (ctx) => {
-      const ed = ctx.editor
-      if (!ed) {
-        return null
-      }
-      return {
-        bold: ed.isActive('bold'),
-        italic: ed.isActive('italic'),
-        strike: ed.isActive('strike'),
-        link: ed.isActive('link')
-      }
-    }
-  })
-
   return (
     <div className="rich-markdown-editor-toolbar">
       <RichMarkdownToolbarButton
@@ -82,21 +61,21 @@ export function RichMarkdownToolbar({
       </RichMarkdownToolbarButton>
       <Separator />
       <RichMarkdownToolbarButton
-        active={active?.bold ?? false}
+        active={false}
         label="Bold"
         onClick={() => editor?.chain().focus().toggleBold().run()}
       >
         B
       </RichMarkdownToolbarButton>
       <RichMarkdownToolbarButton
-        active={active?.italic ?? false}
+        active={false}
         label="Italic"
         onClick={() => editor?.chain().focus().toggleItalic().run()}
       >
         I
       </RichMarkdownToolbarButton>
       <RichMarkdownToolbarButton
-        active={active?.strike ?? false}
+        active={false}
         label="Strike"
         onClick={() => editor?.chain().focus().toggleStrike().run()}
       >
@@ -132,7 +111,7 @@ export function RichMarkdownToolbar({
       >
         <Quote className="size-3.5" />
       </RichMarkdownToolbarButton>
-      <RichMarkdownToolbarButton active={active?.link ?? false} label="Link" onClick={onToggleLink}>
+      <RichMarkdownToolbarButton active={false} label="Link" onClick={onToggleLink}>
         <LinkIcon className="size-3.5" />
       </RichMarkdownToolbarButton>
       <RichMarkdownToolbarButton active={false} label="Image" onClick={onImagePick}>