fix: Improve empty state for math blocks

shared/editor/components/Styles.ts

@@ -40,8 +40,9 @@ const mathStyle = (props: Props) => css`
   }
 
   .math-node.empty-math .math-render::before {
-    content: "(empty math)";
-    color: ${props.theme.brand.red};
+    content: "Empty math";
+    color: ${props.theme.placeholder};
+    font-size: 14px;
   }
 
   .math-node .math-render.parse-error::before {
@@ -91,7 +92,8 @@ const mathStyle = (props: Props) => css`
     display: block;
   }
 
-  math-block.ProseMirror-selectednode {
+  math-block.ProseMirror-selectednode,
+  math-block.empty-math {
     border-radius: 4px;
     border: 1px solid ${props.theme.codeBorder};
     background: ${props.theme.codeBackground};
@@ -100,6 +102,10 @@ const mathStyle = (props: Props) => css`
     font-size: 90%;
   }
 
+  math-block.empty-math {
+    text-align: center;
+  }
+
   math-block .math-src .ProseMirror {
     width: 100%;
     display: block;
@@ -1102,11 +1108,13 @@ mark {
   }
 
   &.empty {
+    font-family: ${props.theme.fontFamilyMono};
     font-size: 14px;
     color: ${props.theme.placeholder};
   }
 
   &.parse-error {
+    font-family: ${props.theme.fontFamilyMono};
     font-size: 14px;
     color: ${props.theme.brand.red};
   }