From f3690c6746c6c3290c1073fbd0df6c784de908f6 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Thu, 12 Mar 2026 06:44:56 +0100
Subject: [PATCH] feat: implement math rendering in HTML component and enhance
 drag handle visibility logic

---
 .../src/lib/features/ui/html-render.svelte    | 37 +++++++++++++++++++
 .../editor/extensions/drag-handle/index.ts    |  5 +--
 .../ui/src/custom/editor/ui/menus/Menu.svelte |  2 +-
 packages/ui/src/tools/index.ts                |  1 +
 packages/ui/src/tools/render-math.ts          | 24 ++++++++++++
 packages/ui/src/tools/sanitize.ts             |  2 +-
 6 files changed, 66 insertions(+), 5 deletions(-)
 create mode 100644 packages/ui/src/tools/render-math.ts

diff --git a/apps/dashboard/src/lib/features/ui/html-render.svelte b/apps/dashboard/src/lib/features/ui/html-render.svelte
index 7c482e09..78160278 100644
--- a/apps/dashboard/src/lib/features/ui/html-render.svelte
+++ b/apps/dashboard/src/lib/features/ui/html-render.svelte
@@ -1,8 +1,45 @@
 <script lang="ts">
+  import { onMount, tick } from 'svelte';
+  import { renderMathInElement } from '@cio/ui/tools';
+
   let { children, className = '', id = '', disableMaxWidth = false } = $props();
+  let container: HTMLElement | undefined;
+
+  onMount(() => {
+    if (!container) return;
+
+    let renderScheduled = false;
+
+    const renderMath = async () => {
+      if (!container || renderScheduled) return;
+
+      renderScheduled = true;
+
+      try {
+        await tick();
+        renderMathInElement(container);
+      } finally {
+        renderScheduled = false;
+      }
+    };
+
+    void renderMath();
+
+    const observer = new MutationObserver(() => {
+      void renderMath();
+    });
+
+    observer.observe(container, {
+      childList: true,
+      subtree: true
+    });
+
+    return () => observer.disconnect();
+  });
 </script>
 
 <article
+  bind:this={container}
   style:max-width={disableMaxWidth ? 'unset' : undefined}
   {id}
   class="preview prose sm:prose-sm {className} dark:text-white"
diff --git a/packages/ui/src/custom/editor/extensions/drag-handle/index.ts b/packages/ui/src/custom/editor/extensions/drag-handle/index.ts
index 414a828c..b944f554 100644
--- a/packages/ui/src/custom/editor/extensions/drag-handle/index.ts
+++ b/packages/ui/src/custom/editor/extensions/drag-handle/index.ts
@@ -184,10 +184,9 @@ export function DragHandlePlugin(options: GlobalDragHandleOptions & { pluginKey:
 
   function hideHandleOnEditorOut(event: MouseEvent) {
     if (event.target instanceof Element) {
-      // Check if the relatedTarget class is still inside the editor
+      // Keep handle visible while cursor moves into editor descendants or handle children.
       const relatedTarget = event.relatedTarget as HTMLElement;
-      const isInsideEditor =
-        relatedTarget?.classList.contains('tiptap') || relatedTarget?.classList.contains('drag-handle');
+      const isInsideEditor = !!relatedTarget?.closest('.tiptap, .drag-handle');
 
       if (isInsideEditor) return;
     }
diff --git a/packages/ui/src/custom/editor/ui/menus/Menu.svelte b/packages/ui/src/custom/editor/ui/menus/Menu.svelte
index 67573261..2a209e08 100644
--- a/packages/ui/src/custom/editor/ui/menus/Menu.svelte
+++ b/packages/ui/src/custom/editor/ui/menus/Menu.svelte
@@ -102,7 +102,7 @@
   pluginKey="link-bubble-menu"
   {shouldShow}
   class={cn(
-    'edra-bubble-menu ui:bg-popover ui:flex ui:h-fit ui:w-fit ui:items-center ui:rounded-lg ui:p-0.5',
+    'edra-bubble-menu ui:bg-popover ui:flex ui:h-fit ui:w-fit ui:items-center ui:rounded-lg ui:p-0.5 ui:shadow-lg',
     className
   )}
 >
diff --git a/packages/ui/src/tools/index.ts b/packages/ui/src/tools/index.ts
index ee339984..179370e1 100644
--- a/packages/ui/src/tools/index.ts
+++ b/packages/ui/src/tools/index.ts
@@ -1,5 +1,6 @@
 import { clsx, type ClassValue } from 'clsx';
 import { twMerge } from 'tailwind-merge';
+export * from './render-math';
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
diff --git a/packages/ui/src/tools/render-math.ts b/packages/ui/src/tools/render-math.ts
new file mode 100644
index 00000000..22d62876
--- /dev/null
+++ b/packages/ui/src/tools/render-math.ts
@@ -0,0 +1,24 @@
+import katex from 'katex';
+import 'katex/dist/katex.min.css';
+
+const MATH_NODE_SELECTOR = '[data-type="inline-math"], [data-type="block-math"]';
+
+export function renderMathInElement(root: ParentNode): void {
+  const mathNodes = root.querySelectorAll<HTMLElement>(MATH_NODE_SELECTOR);
+
+  for (const mathNode of mathNodes) {
+    if (mathNode.dataset.mathRendered === 'true') continue;
+
+    const latex = mathNode.getAttribute('data-latex');
+    const mathType = mathNode.getAttribute('data-type');
+
+    if (!latex || (mathType !== 'inline-math' && mathType !== 'block-math')) continue;
+
+    katex.render(latex, mathNode, {
+      displayMode: mathType === 'block-math',
+      throwOnError: false
+    });
+
+    mathNode.dataset.mathRendered = 'true';
+  }
+}
diff --git a/packages/ui/src/tools/sanitize.ts b/packages/ui/src/tools/sanitize.ts
index 917e4cc9..3f8508f4 100644
--- a/packages/ui/src/tools/sanitize.ts
+++ b/packages/ui/src/tools/sanitize.ts
@@ -45,7 +45,7 @@ export function sanitizeHtml(html: string): string {
       'img'
     ],
     // Allow safe attributes
-    ALLOWED_ATTR: ['href', 'src', 'alt', 'title', 'class', 'style'],
+    ALLOWED_ATTR: ['href', 'src', 'alt', 'title', 'class', 'style', 'data-type', 'data-latex'],
     // Forbid dangerous attributes
     FORBID_ATTR: [
       'onerror',