@bytechain.cn/colamd 1.5.0 → 1.5.1-beta.2

package/src/renderer/editor/editor.ts

@@ -89,7 +89,7 @@ export async function createEditor(
       ctx.set(remarkPluginsCtx, [
         ...pluginModules.map((m) => m.info.remarkPlugin),
         { plugin: remarkBreaks, options: undefined },
-      ])
+      ] as any)
       if (onChange) {
         ctx.get(listenerCtx).markdownUpdated((_ctx, markdown) => {
           onChange(markdown)
@@ -109,7 +109,38 @@ export async function createEditor(
     }
   }
 
-  editorInstance = await builder.create()
+  try {
+    editorInstance = await builder.create()
+  } catch (e: any) {
+    if (e?.message?.includes('math_inline') || e?.message?.includes('math_block')) {
+      console.warn('[editor] Milkdown context error, retrying without math plugins:', e.message)
+      const filteredModules = pluginModules.filter((m) => m.info.id !== 'math')
+      builder = Editor.make()
+        .config((ctx) => {
+          ctx.set(rootCtx, root)
+          ctx.set(defaultValueCtx, defaultContent)
+          ctx.set(remarkPluginsCtx, [
+            ...filteredModules.map((m) => m.info.remarkPlugin),
+            { plugin: remarkBreaks, options: undefined },
+          ] as any)
+          if (onChange) ctx.get(listenerCtx).markdownUpdated((_ctx, markdown) => { onChange(markdown) })
+        })
+        .use(commonmark)
+        .use(gfm)
+        .use(history)
+        .use(listener)
+        .use(clipboard)
+        .use(htmlView)
+      for (const mod of filteredModules) {
+        for (const p of mod.milkdownPlugins) {
+          builder = builder.use(p)
+        }
+      }
+      editorInstance = await builder.create()
+    } else {
+      throw e
+    }
+  }
 
   editorInstance.action((ctx) => {
     const nvs = ctx.get(nodeViewCtx)
@@ -127,8 +158,9 @@ export async function createEditor(
     ctx.set(nodeViewCtx, fixed)
 
     const oldView = ctx.get(editorViewCtx)
-    const rootEl = ctx.get(rootCtx)
+    const rootEl = ctx.get(rootCtx) as HTMLElement
     const nodeViews = Object.fromEntries(fixed)
+
     const newView = new EditorView(rootEl, {
       state: oldView.state,
       nodeViews,
@@ -142,6 +174,19 @@ export async function createEditor(
   root.addEventListener('copy', enhanceClipboard)
   root.addEventListener('cut', enhanceClipboard)
 
+  /*
+   * REMOVED: Custom IME composition handlers for mobile CJK input.
+   * ProseMirror handles IME composition natively via its DOM observer and input rules.
+   * These handlers dispatched synthetic input events that interfered with ProseMirror's
+   * internal state tracking, causing duplicated characters and broken undo history.
+   *
+   * Original code:
+   * if (/android|iphone|ipad/i.test(navigator.userAgent)) {
+   *     root.addEventListener('compositionstart', () => { ... })
+   *     root.addEventListener('compositionend', () => { ... })
+   * }
+   */
+
   root.addEventListener('click', (e) => {
     if (!(e.metaKey || e.ctrlKey)) return
     const link = (e.target as HTMLElement).closest('a')
@@ -149,7 +194,8 @@ export async function createEditor(
     const href = link.getAttribute('href')
     if (href) {
       e.preventDefault()
-      window.electronAPI.openExternal(href)
+      window.electronAPI?.openExternal(href)
+      window.capacitorAPI?.openExternal(href)
     }
   })
 
@@ -167,6 +213,43 @@ export function getMarkdown(): string {
   return markdown
 }
 
+/**
+ * Get HTML by cloning the live rendered DOM.
+ * Unlike {@link getHTML} which uses DOMSerializer (creating fresh nodes with
+ * "Rendering..." placeholders), this captures the actual rendered SVGs
+ * from mermaid, KaTeX math, etc. Used for PDF/HTML export.
+ */
+export function getLiveHTML(): string {
+  const editorDom = document.querySelector('#editor .ProseMirror')
+  if (!editorDom) return ''
+  const clone = editorDom.cloneNode(true) as HTMLElement
+
+  // Inline computed background colors so export preserves exact editor appearance.
+  // CSS variables from the export template may not match the editor's cascade.
+  const styleTargets: Array<{ selector: string; prop: string }> = [
+    { selector: '.math-inline', prop: 'backgroundColor' },
+    { selector: '.math-block', prop: 'backgroundColor' },
+    { selector: '.mermaid-block', prop: 'backgroundColor' },
+  ]
+  for (const { selector, prop } of styleTargets) {
+    const originals = editorDom.querySelectorAll(selector)
+    const clones = clone.querySelectorAll(selector)
+    originals.forEach((orig, i) => {
+      const computed = getComputedStyle(orig)
+      const val = computed.getPropertyValue(prop === 'backgroundColor' ? 'background-color' : prop)
+      if (val && clones[i]) (clones[i] as HTMLElement).style.setProperty(prop, val)
+    })
+  }
+
+  // Remove source-mode textareas
+  clone.querySelectorAll('textarea.mermaid-source, .math-inline-raw, .math-block-raw')
+    .forEach(el => el.remove())
+  // Hide loading/error placeholders
+  clone.querySelectorAll('.mermaid-loading, .mermaid-error')
+    .forEach(el => (el as HTMLElement).style.display = 'none')
+  return clone.innerHTML
+}
+
 export function getHTML(): string {
   if (!editorInstance) return ''
   let html = ''

package/src/renderer/editor/plugins/index.ts

@@ -12,11 +12,17 @@ export interface RendererPlugin {
   id: string
   name: string
   enabled: boolean
-  remarkPlugin: { plugin: Plugin; options?: any }
-  nodeTypes: string[]
+  remarkPlugin?: { plugin: Plugin<any[], any>; options?: any }
+  rehypePlugin?: Plugin<any[], any>
+  onMount?: (...args: any[]) => any
+  onBeforeMount?: (...args: any[]) => any
   onInit?: () => void
-  onThemeChange?: (theme: string) => void
+  onThemeChange?: (theme: string, customCSS?: string) => void
+  css?: string
+  nodeTypes?: string[]
   exportCapabilities?: ExportCapability[]
+  renderStatus?: (container: HTMLElement) => Promise<{ ok: number; fail: number; total: number }>
+  ensureRendered?: () => Promise<void>
 }
 
 export interface PluginModule {
@@ -35,42 +41,28 @@ export function getAllPluginModules(): PluginModule[] {
 }
 
 export function getAllPlugins(): RendererPlugin[] {
-  return modules.map(m => m.info)
+  return modules.map((m) => m.info)
 }
 
-export function getEnabledPlugins(): RendererPlugin[] {
-  return modules.filter(m => m.info.enabled).map(m => m.info)
-}
-
-export function getPlugin(id: string): RendererPlugin | undefined {
-  return modules.find(m => m.info.id === id)?.info
-}
-
-export function togglePlugin(id: string): void {
-  const m = modules.find(m => m.info.id === id)
-  if (m) m.info.enabled = !m.info.enabled
-}
-
-export function findPluginBySelector(selector: string): { plugin: RendererPlugin; capability: ExportCapability } | undefined {
-  for (const m of modules) {
-    if (!m.info.enabled || !m.info.exportCapabilities?.length) continue
-    for (const nodeType of m.info.nodeTypes) {
-      if (selector.includes(nodeType.replace(/_/g, '-'))) {
-        return { plugin: m.info, capability: m.info.exportCapabilities[0] }
-      }
-    }
+export function findPluginBySelector(selector: string): RendererPlugin | undefined {
+  const plugins = getAllPlugins()
+  if (selector.startsWith('node:')) {
+    const name = selector.slice(5)
+    return plugins.find((p) => p.nodeTypes?.includes(name))
   }
-  return undefined
+  return plugins.find((p) => p.id === selector)
 }
 
-export function findExportCapabilities(selector: string): ExportCapability[] {
+export function findExportCapabilities(className: string): ExportCapability[] {
   for (const m of modules) {
-    if (!m.info.enabled || !m.info.exportCapabilities?.length) continue
-    for (const nodeType of m.info.nodeTypes) {
-      if (selector.includes(nodeType.replace(/_/g, '-'))) {
-        return m.info.exportCapabilities
-      }
+    if (m.info.enabled && m.info.exportCapabilities && m.info.nodeTypes?.some(nt => className.includes(nt.replace(/_/g, '-')))) {
+      return m.info.exportCapabilities
     }
   }
   return []
 }
+
+export function togglePlugin(id: string, enabled: boolean): void {
+  const mod = modules.find((m) => m.info.id === id)
+  if (mod) mod.info.enabled = enabled
+}

package/src/renderer/editor/plugins/math-plugin.ts

@@ -194,7 +194,7 @@ const mathBlockView = $view(mathBlockSchema, (_ctx): NodeViewConstructor => {
     div.addEventListener('focusout', (e) => {
       const target = e.target as HTMLElement
       if (!target.classList.contains('math-block-raw')) return
-      const rawValue = (target as HTMLTextAreaElement).value
+      const rawValue = (e.target as HTMLTextAreaElement).value
       const newText = rawValue.replace(/^\$\$\s*\n?/, '').replace(/\n?\s*\$\$$/, '').trim()
       const pos = getPos()
       if (pos != null && node.attrs.text !== newText) {

package/src/renderer/editor/plugins/mermaid-plugin-custom.css

@@ -1,21 +1,27 @@
+/* === 字体 & 文字颜色基础定义 === */
 body.theme-custom .mermaid-preview svg text {
   fill: var(--mermaid-text-color, var(--text-color)) !important;
   font-family: var(--mermaid-font-family, inherit) !important;
   font-size: var(--mermaid-font-size, 12px) !important;
 }
 
-body.theme-custom .mermaid-preview svg .nodeLabel span,
-body.theme-custom .mermaid-preview svg .edgeLabel span {
-  font-family: var(--mermaid-font-family, inherit) !important;
-  font-size: var(--mermaid-font-size, 14px) !important;
-}
-
+/* === ForeignObject 文字 === */
 body.theme-custom .mermaid-preview svg foreignObject span {
   color: var(--mermaid-text-color, var(--text-color)) !important;
   font-family: var(--mermaid-font-family, inherit) !important;
   font-size: var(--mermaid-font-size, 14px) !important;
 }
 
+/* === Person-Man 强制白色 === */
+body.theme-custom .mermaid-preview svg .person-man text {
+  fill: #ffffff !important;
+}
+
+body.theme-custom .mermaid-preview svg .person-man span {
+  color: #ffffff !important;
+}
+
+/* === 文字偏移样式（custom 主题特有） === */
 body.theme-custom .mermaid-preview svg .label text,
 body.theme-custom .mermaid-preview svg .nodeLabel text,
 body.theme-custom .mermaid-preview svg .state-title,
@@ -37,395 +43,4 @@ body.theme-custom .mermaid-preview svg .edgeLabel {
   display: inline-block !important;
   position: relative !important;
   top: -3px !important;
-}
-
-body.theme-custom .mermaid-preview svg .node rect,
-body.theme-custom .mermaid-preview svg .node circle,
-body.theme-custom .mermaid-preview svg .node ellipse,
-body.theme-custom .mermaid-preview svg .node polygon,
-body.theme-custom .mermaid-preview svg .node path {
-  stroke: var(--mermaid-node-border, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .edgePath .path {
-  stroke: var(--mermaid-line-color, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .cluster rect,
-body.theme-custom .mermaid-preview svg .cluster path {
-  stroke: var(--mermaid-cluster-border, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg defs marker path {
-  fill: var(--mermaid-arrowhead-color, var(--mermaid-line-color, var(--border-color)));
-  stroke: var(--mermaid-arrowhead-color, var(--mermaid-line-color, var(--border-color)));
-}
-
-body.theme-custom .mermaid-preview svg rect[stroke="#444444"] {
-  stroke: var(--mermaid-node-border, var(--border-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg path[stroke="#444444"] {
-  stroke: var(--mermaid-node-border, var(--border-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg rect[stroke="#000000"] {
-  stroke: var(--mermaid-node-border, var(--border-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg path[stroke="#000000"] {
-  stroke: var(--mermaid-node-border, var(--border-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg line[stroke="#444444"] {
-  stroke: var(--mermaid-node-border, var(--border-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg line[stroke="#000000"] {
-  stroke: var(--mermaid-node-border, var(--border-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .edgeLabel text {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .edgeLabel rect {
-  fill: var(--mermaid-edge-label-background, var(--code-block-bg)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .edgeLabel span {
-  color: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .label text {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .nodeLabel text {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .nodeLabel span {
-  color: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .person rect,
-body.theme-custom .mermaid-preview svg .person path {
-  stroke: var(--mermaid-person-border, var(--text-color));
-}
-
-body.theme-custom .mermaid-preview svg .person-man text {
-  fill: #ffffff !important;
-}
-
-body.theme-custom .mermaid-preview svg .person-man span {
-  color: #ffffff !important;
-}
-
-body.theme-custom .mermaid-preview svg .actor rect,
-body.theme-custom .mermaid-preview svg .actor path {
-  stroke: var(--mermaid-node-border, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg text.actor {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .messageLine0,
-body.theme-custom .mermaid-preview svg .messageLine1 {
-  stroke: var(--mermaid-line-color, var(--border-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .messageText {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .loopText,
-body.theme-custom .mermaid-preview svg .altText,
-body.theme-custom .mermaid-preview svg .optText {
-  fill: var(--mermaid-text-color, var(--text-muted)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .loopLine,
-body.theme-custom .mermaid-preview svg .altLine,
-body.theme-custom .mermaid-preview svg .optLine {
-  stroke: var(--mermaid-line-color, var(--border-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .labelBox {
-  stroke: var(--mermaid-node-border, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .labelText {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .loopText tspan,
-body.theme-custom .mermaid-preview svg .altText tspan,
-body.theme-custom .mermaid-preview svg .optText tspan {
-  fill: var(--mermaid-text-color, var(--text-muted)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .classBox rect,
-body.theme-custom .mermaid-preview svg .classBox path {
-  stroke: var(--mermaid-node-border, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .classTitle text {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .classTitle span {
-  color: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .classText text {
-  fill: var(--mermaid-text-color, var(--text-muted)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .classText span {
-  color: var(--mermaid-text-color, var(--text-muted)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .divider {
-  stroke: var(--mermaid-node-border, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .relation {
-  stroke: var(--mermaid-line-color, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .statediagram-state rect,
-body.theme-custom .mermaid-preview svg .statediagram-state circle {
-  stroke: var(--mermaid-node-border, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .statediagram-state .nodeLabel text,
-body.theme-custom .mermaid-preview svg .statediagram-state .nodeLabel span {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-  color: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .statediagram-cluster rect {
-  stroke: var(--mermaid-cluster-border, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .transition {
-  stroke: var(--mermaid-line-color, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .edgeLabel .label text {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .statediagram-cluster .outer-title text {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .pieTitleText {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .pieCircle {
-  stroke: var(--mermaid-node-border, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .slice {
-  stroke: var(--mermaid-node-border, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .legend text {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .task {
-  stroke: var(--mermaid-node-border, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .taskText,
-body.theme-custom .mermaid-preview svg .taskTextOutsideRight,
-body.theme-custom .mermaid-preview svg .taskTextOutsideLeft {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .section rect {
-  stroke: var(--mermaid-node-border, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .sectionText,
-body.theme-custom .mermaid-preview svg .sectionTitle {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .today {
-  stroke: var(--mermaid-line-color, var(--border-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .grid .tick line {
-  stroke: var(--mermaid-line-color, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .grid .domain {
-  stroke: var(--mermaid-line-color, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .tick text {
-  fill: var(--mermaid-text-color, var(--text-muted));
-}
-
-body.theme-custom .mermaid-preview svg .mindmap-node rect,
-body.theme-custom .mermaid-preview svg .mindmap-node circle,
-body.theme-custom .mermaid-preview svg .mindmap-node ellipse,
-body.theme-custom .mermaid-preview svg .mindmap-node polygon,
-body.theme-custom .mermaid-preview svg .mindmap-node path {
-  stroke: var(--mermaid-node-border, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .mindmap-node text {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .mindmap-node .nodeLabel text,
-body.theme-custom .mermaid-preview svg .mindmap-node .nodeLabel span {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-  color: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .mindmap-edge {
-  stroke: var(--mermaid-line-color, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .quadrant rect {
-  stroke: var(--mermaid-node-border, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .quadrant text {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .quadrant .titleText {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .quadrant .axis text {
-  fill: var(--mermaid-text-color, var(--text-muted)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .quadrant .axis line,
-body.theme-custom .mermaid-preview svg .quadrant .axis path {
-  stroke: var(--mermaid-line-color, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .quadrant .point {
-  fill: var(--mermaid-primary-color, var(--link-color));
-  stroke: var(--mermaid-node-border, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .xychart .axis text {
-  fill: var(--mermaid-text-color, var(--text-muted)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .xychart .axis line,
-body.theme-custom .mermaid-preview svg .xychart .axis path {
-  stroke: var(--mermaid-line-color, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .xychart .plot rect {
-  stroke: var(--mermaid-node-border, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .xychart .plot line {
-  stroke: var(--mermaid-line-color, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .xychart .titleText {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .sankey .link {
-  stroke: var(--mermaid-line-color, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .sankey text {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .block rect,
-body.theme-custom .mermaid-preview svg .block path {
-  stroke: var(--mermaid-node-border, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .block text {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .block .nodeLabel text,
-body.theme-custom .mermaid-preview svg .block .nodeLabel span {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-  color: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .er .entityBox rect,
-body.theme-custom .mermaid-preview svg .er .entityBox path {
-  stroke: var(--mermaid-node-border, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .er text {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .er .relationshipLabel {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .er .relationshipLine {
-  stroke: var(--mermaid-line-color, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .git .commit rect,
-body.theme-custom .mermaid-preview svg .git .commit circle {
-  stroke: var(--mermaid-node-border, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .git text {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .git .branchLabel text {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .journey .task rect {
-  stroke: var(--mermaid-node-border, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .journey text {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .timeline rect {
-  stroke: var(--mermaid-node-border, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .timeline text {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .c4 .person rect,
-body.theme-custom .mermaid-preview svg .c4 .person path,
-body.theme-custom .mermaid-preview svg .c4 .system rect,
-body.theme-custom .mermaid-preview svg .c4 .system path,
-body.theme-custom .mermaid-preview svg .c4 .container rect,
-body.theme-custom .mermaid-preview svg .c4 .container path,
-body.theme-custom .mermaid-preview svg .c4 .boundary rect,
-body.theme-custom .mermaid-preview svg .c4 .boundary path {
-  stroke: var(--mermaid-node-border, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .c4 text {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .c4 span {
-  color: var(--mermaid-text-color, var(--text-color)) !important;
-}
+}