feat(Math): add background on hover (#103)

1. Fix error state
2. Change background on hover

Author: d3m1d0v

src/extensions/yfm/Math/view-and-edit.scss

@@ -9,7 +9,12 @@
 }
 
 .math-error {
-    color: var(--yc-color-base-danger-heavy);
+    color: var(--yc-color-text-danger);
+}
+
+.math-block-view.math-view-error {
+    display: flex;
+    justify-content: center;
 }
 
 .math-container.math-active .math-view {
@@ -29,8 +34,40 @@
 }
 
 .math-container:not(.math-active) {
+    --ye-math-back-color: transparent;
+    --ye-math-hover-color: var(--yc-color-base-simple-hover);
+
     position: relative;
 
+    &.math-container-error {
+        --ye-math-back-color: var(--yc-color-base-danger);
+        --ye-math-hover-color: var(--yc-color-base-danger-hover);
+    }
+
+    &::before {
+        position: absolute;
+        z-index: -1;
+        top: -2px;
+        right: -2px;
+        bottom: -2px;
+        left: -2px;
+
+        content: '';
+
+        border-radius: var(--yc-border-radius-s);
+        background-color: var(--ye-math-back-color);
+
+        transition: background-color 0.15s linear;
+    }
+
+    &:hover {
+        cursor: pointer;
+
+        &::before {
+            background-color: var(--ye-math-hover-color);
+        }
+    }
+
     .math-inline,
     .math-block {
         position: absolute;
@@ -39,6 +76,8 @@
         bottom: 0;
         left: 0;
 
+        overflow: hidden;
+
         opacity: 0;
     }
 

src/extensions/yfm/Math/view-and-edit.ts

@@ -65,18 +65,25 @@ export abstract class MathNodeView implements NodeView {
     protected renderKatex() {
         try {
             katex.render(this.texContent, this.mathViewDOM, {
-                throwOnError: false,
+                throwOnError: true,
                 displayMode: this.isDisplayMode(),
             });
+            this.updateErrorView(false);
         } catch (err) {
             const errorElem = document.createElement('span');
             errorElem.classList.add('math-error');
             errorElem.innerText = `(error) ${this.texContent}`;
             errorElem.title = String(err);
             this.mathViewDOM.appendChild(errorElem);
+            this.updateErrorView(true);
         }
     }
 
+    protected updateErrorView(isError: boolean) {
+        this.dom.classList.toggle('math-container-error', isError);
+        this.mathViewDOM.classList.toggle('math-view-error', isError);
+    }
+
     protected getTexContent() {
         return this.node.textContent;
     }