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:
parent
5f2166075b
commit
b2a7879d2c
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useState, useCallback, useRef, useEffect, useMemo } from 'react'
|
import React, { useState, useCallback, useRef, useEffect } from 'react'
|
||||||
import {
|
import {
|
||||||
MDXEditor,
|
MDXEditor,
|
||||||
headingsPlugin,
|
headingsPlugin,
|
||||||
|
|
@ -62,12 +62,28 @@ export class MarkdownShape extends BaseBoxShapeUtil<IMarkdownShape> {
|
||||||
const [isToolbarMinimized, setIsToolbarMinimized] = useState(false)
|
const [isToolbarMinimized, setIsToolbarMinimized] = useState(false)
|
||||||
const editorRef = useRef<MDXEditorMethods>(null)
|
const editorRef = useRef<MDXEditorMethods>(null)
|
||||||
|
|
||||||
// Dark mode detection
|
// Dark mode detection with reactive updates
|
||||||
const isDarkMode = useMemo(() => {
|
const [isDarkMode, setIsDarkMode] = useState(() => {
|
||||||
if (typeof document !== 'undefined') {
|
if (typeof document !== 'undefined') {
|
||||||
return document.documentElement.classList.contains('dark')
|
return document.documentElement.classList.contains('dark')
|
||||||
}
|
}
|
||||||
return false
|
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
|
// Use the pinning hook
|
||||||
|
|
@ -160,6 +176,7 @@ export class MarkdownShape extends BaseBoxShapeUtil<IMarkdownShape> {
|
||||||
ref={editorRef}
|
ref={editorRef}
|
||||||
markdown={shape.props.text || ''}
|
markdown={shape.props.text || ''}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
|
className={isDarkMode ? 'dark-theme' : ''}
|
||||||
contentEditableClassName="mdx-editor-content"
|
contentEditableClassName="mdx-editor-content"
|
||||||
plugins={[
|
plugins={[
|
||||||
// Core formatting
|
// Core formatting
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue