style: update style mermaid

hunghg255 · Oct 20, 2024 · 9b9860e · 9b9860e
1 parent 463d881
commit 9b9860e
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/src/extensions/Mermaid/components/EditMermaidBlock.tsx b/src/extensions/Mermaid/components/EditMermaidBlock.tsx
@@ -122,11 +122,14 @@ export const EditMermaidBlock: React.FC<IProps> = ({ editor, attrs, extension })
               rows={10}
               defaultValue={defaultCode}
               placeholder="Text"
+              style={{
+                color: 'hsl(var(--richtext-foreground))',
+              }}
             />
 
             <div
               className="richtext-flex-1 richtext-flex richtext-items-center richtext-justify-center richtext-rounded-[10px] richtext-p-[10px]"
-              style={{ height: '100%', border: '1px solid hsl(var(--border))', minHeight: 500 }}
+              style={{ height: '100%', border: '1px solid hsl(var(--border))', minHeight: 500, background: '#fff' }}
               ref={mermaidRef as any}
               dangerouslySetInnerHTML={{ __html: svgCode }}
             />

diff --git a/src/extensions/Mermaid/components/MermaidActiveButton.tsx b/src/extensions/Mermaid/components/MermaidActiveButton.tsx
@@ -118,11 +118,14 @@ export const MermaidActiveButton: React.FC<IProps> = ({ editor, upload }) => {
               rows={10}
               defaultValue={defaultCode}
               placeholder="Text"
+              style={{
+                color: 'hsl(var(--richtext-foreground))',
+              }}
             />
 
             <div
               className="richtext-flex-1 richtext-flex richtext-items-center richtext-justify-center richtext-rounded-[10px] richtext-p-[10px]"
-              style={{ height: '100%', border: '1px solid hsl(var(--border))', minHeight: 500 }}
+              style={{ height: '100%', border: '1px solid hsl(var(--border))', minHeight: 500, background: '#fff' }}
               ref={mermaidRef as any}
               dangerouslySetInnerHTML={{ __html: svgCode }}
             />

diff --git a/src/extensions/Mermaid/components/NodeViewMermaid/NodeViewMermaid.tsx b/src/extensions/Mermaid/components/NodeViewMermaid/NodeViewMermaid.tsx
@@ -229,7 +229,7 @@ export function NodeViewMermaid({ editor, node, updateAttributes, getPos, select
         className={`image-view__body ${selected ? 'image-view__body--focused' : ''} ${
           resizing ? 'image-view__body--resizing' : ''
         }`}
-        style={imageMaxStyle}
+        style={{ ...imageMaxStyle, background: '#fff' }}
       >
         <img
           src={imgAttrs.src}