add katex for equation

fix image caption

Author: abrehamgezahegn

typescript/src/renderer/components/blocks/EquationBlockRenderer.tsx

@@ -1,4 +1,5 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
+import katex from "katex";
 
 import { EquationBlock } from "@/models/generated";
 
@@ -14,6 +15,25 @@ export const EquationBlockRenderer: React.FC<EquationBlockRendererProps> = ({
   ...props
 }) => {
   const equationData = block.equation;
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (containerRef.current && equationData?.expression) {
+      try {
+        katex.render(equationData.expression, containerRef.current, {
+          displayMode: true,
+          throwOnError: false,
+          errorColor: '#cc0000',
+          strict: 'warn'
+        });
+      } catch (error) {
+        console.warn('KaTeX render error:', error);
+        if (containerRef.current) {
+          containerRef.current.textContent = equationData.expression;
+        }
+      }
+    }
+  }, [equationData?.expression]);
 
   return (
     <div
@@ -23,9 +43,10 @@ export const EquationBlockRenderer: React.FC<EquationBlockRendererProps> = ({
     >
       <div>
         <div className="notion-equation-display">
-          <div className="notion-equation-content">
-            {equationData?.expression || ""}
-          </div>
+          <div 
+            className="notion-equation-content"
+            ref={containerRef}
+          />
         </div>
       </div>
     </div>

typescript/src/renderer/components/blocks/ToggleBlockRenderer.tsx

@@ -35,52 +35,40 @@ export const ToggleBlockRenderer: React.FC<ToggleBlockRendererProps> = ({
       <div
         aria-expanded={isOpen}
         aria-label={isOpen ? "Close" : "Open"}
-        role="button"
         tabIndex={0}
-        onClick={handleToggle}
         onKeyDown={(e) => {
           if (e.key === "Enter" || e.key === " ") {
             e.preventDefault();
             handleToggle();
           }
         }}
-        style={{ cursor: "pointer", display: "flex", alignItems: "center" }}
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 4,
+          cursor: "pointer",
+        }}
       >
-        {/* <svg
-          aria-hidden="true"
-          className="arrowCaretDownFillSmall"
-          role="graphics-symbol"
-          viewBox="0 0 16 16"
-          style={{
-            width: 16,
-            height: 16,
-            transform: isOpen ? "rotate(90deg)" : "rotate(0deg)",
-            transition: "transform 0.2s ease",
-          }}
-        >
-          <path d="M6 12l6-6H6z" fill="currentColor" />
-        </svg> */}
+        <div role="button" onClick={handleToggle}>
+          <svg
+            aria-hidden="true"
+            role="graphics-symbol"
+            viewBox="0 0 16 16"
+            className="arrowCaretDownFillSmall"
+            style={{
+              width: "1.2em",
+              height: "1.2em",
+              display: "block",
+              flexShrink: 0,
+              transition: "transform 200ms ease-out",
+              transform: isOpen ? "rotate(360deg)" : "rotate(270deg)",
+              userSelect: "none",
+            }}
+          >
+            <path d="M2.835 3.25a.8.8 0 0 0-.69 1.203l5.164 8.854a.8.8 0 0 0 1.382 0l5.165-8.854a.8.8 0 0 0-.691-1.203z"></path>
+          </svg>
+        </div>
 
-        <svg
-          aria-hidden="true"
-          role="graphics-symbol"
-          viewBox="0 0 16 16"
-          className="arrowCaretDownFillSmall"
-          style={{
-            width: "0.8em",
-            height: "0.8em",
-            display: "block",
-            flexShrink: 0,
-            transition: "transform 200ms ease-out",
-            // transform: "rotateZ(0deg)",
-            opacity: 1,
-            transform: isOpen ? "rotate(360deg)" : "rotate(270deg)",
-            marginRight: 6,
-            // tran: "transform 0.2s ease",
-          }}
-        >
-          <path d="M2.835 3.25a.8.8 0 0 0-.69 1.203l5.164 8.854a.8.8 0 0 0 1.382 0l5.165-8.854a.8.8 0 0 0-.691-1.203z"></path>
-        </svg>
         <div className="notranslate">
           <RichTextRenderer richText={toggleData?.rich_text || []} />
         </div>

typescript/src/renderer/styles/blocks.css

@@ -111,6 +111,15 @@
   flex: 1;
 }
 
+.notion-toggle-block div[role="button"] {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 4px;
+}
+.notion-toggle-block div[role="button"]:hover {
+  background-color: var(--jsondoc-bg);
+}
 /* Equation Block */
 .notion-equation-block {
   padding: var(--jsondoc-spacing-sm) var(--jsondoc-spacing-xs);
@@ -120,7 +129,6 @@
 .notion-equation-display {
   text-align: center;
   padding: var(--jsondoc-spacing-lg);
-  background: var(--jsondoc-bg-code);
   border-radius: var(--jsondoc-radius-sm);
 }
 

typescript/src/renderer/styles/index.css

@@ -1,5 +1,8 @@
 /* JSON-DOC Renderer Styles */
 
+/* Import KaTeX styles for equations */
+@import "katex/dist/katex.min.css";
+
 /* Import design tokens first */
 @import "./variables.css";
 

typescript/src/renderer/styles/variables.css

@@ -11,9 +11,9 @@
   --jsondoc-bg-code: rgb(247, 246, 243);
   --jsondoc-bg-inline-code: rgba(135, 131, 120, 0.15);
   --jsondoc-bg-unsupported: rgba(255, 0, 0, 0.1);
-
-  /* Text Colors */
-  --jsondoc-color-gray: rgba(120, 119, 116, 1);
+  --jsondoc-bg: rgba(55, 53, 47, 0.45);
+  --jsondoc-foreground: #37352f /* Text Colors */
+    --jsondoc-color-gray: rgba(120, 119, 116, 1);
   --jsondoc-color-brown: rgba(159, 107, 83, 1);
   --jsondoc-color-orange: rgba(217, 115, 13, 1);
   --jsondoc-color-yellow: rgba(203, 145, 47, 1);
@@ -109,6 +109,8 @@
   --jsondoc-border-medium: rgb(233, 233, 231);
   --jsondoc-bg-code: rgb(247, 246, 243);
   --jsondoc-bg-inline-code: rgba(135, 131, 120, 0.15);
+  --jsondoc-bg: rgba(255, 255, 255, 0.8);
+  --jsondoc-foreground: #37352f;
 }
 
 .jsondoc-theme-dark {
@@ -119,4 +121,6 @@
   --jsondoc-border-medium: rgba(255, 255, 255, 0.2);
   --jsondoc-bg-code: rgba(255, 255, 255, 0.05);
   --jsondoc-bg-inline-code: rgba(255, 255, 255, 0.1);
+  --jsondoc-bg: rgba(55, 53, 47, 0.45);
+  --jsondoc-foreground: #37352f;
 }

typescript/tsup.config.ts

@@ -5,7 +5,7 @@ export default defineConfig({
   format: ["cjs", "esm"],
   dts: true,
   splitting: false,
-  sourcemap: true,
+  // sourcemap: true,
   clean: true,
   external: ["react", "react-dom"],
   esbuildOptions(options) {