feat: implement math rendering in HTML component and enhance drag handle visibility logic

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;
     }

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
   )}
 >

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));

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';
+  }
+}

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',