fix: make Markdown tool dark mode reactive to theme changes

- Replace useMemo with useState + MutationObserver for isDarkMode detection
- Add MDXEditor's built-in 'dark-theme' class for proper toolbar/icon theming
- Theme now switches instantly when user toggles dark/light mode

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2025-12-03 22:57:25 -08:00
parent 5f2166075b
commit b2a7879d2c
1 changed files with 20 additions and 3 deletions

View File

@ -1,4 +1,4 @@
import React, { useState, useCallback, useRef, useEffect, useMemo } from 'react'
import React, { useState, useCallback, useRef, useEffect } from 'react'
import {
MDXEditor,
headingsPlugin,
@ -62,12 +62,28 @@ export class MarkdownShape extends BaseBoxShapeUtil<IMarkdownShape> {
const [isToolbarMinimized, setIsToolbarMinimized] = useState(false)
const editorRef = useRef<MDXEditorMethods>(null)
// Dark mode detection
const isDarkMode = useMemo(() => {
// Dark mode detection with reactive updates
const [isDarkMode, setIsDarkMode] = useState(() => {
if (typeof document !== 'undefined') {
return document.documentElement.classList.contains('dark')
}
return false
})
// Listen for dark mode changes
useEffect(() => {
if (typeof document === 'undefined') return
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.attributeName === 'class') {
setIsDarkMode(document.documentElement.classList.contains('dark'))
}
})
})
observer.observe(document.documentElement, { attributes: true })
return () => observer.disconnect()
}, [])
// Use the pinning hook
@ -160,6 +176,7 @@ export class MarkdownShape extends BaseBoxShapeUtil<IMarkdownShape> {
ref={editorRef}
markdown={shape.props.text || ''}
onChange={handleChange}
className={isDarkMode ? 'dark-theme' : ''}
contentEditableClassName="mdx-editor-content"
plugins={[
// Core formatting