Address code review: Add type safety and XSS protection

- Import and use Resource type instead of 'any'
- Add DOMPurify to sanitize markdown HTML output
- Remove unnecessary type assertion
- Improve type safety across resource handling

Co-authored-by: mikebarkmin <2592379+mikebarkmin@users.noreply.github.com>

Author: Copilot

packages/learningmap/package.json

@@ -34,7 +34,9 @@
   },
   "dependencies": {
     "@szhsin/react-menu": "^4.5.0",
+    "@types/dompurify": "^3.2.0",
     "@xyflow/react": "^12.8.6",
+    "dompurify": "^3.3.0",
     "elkjs": "^0.11.0",
     "fast-deep-equal": "^3.1.3",
     "html-to-image": "1.11.13",

packages/learningmap/src/Drawer.tsx

@@ -1,11 +1,12 @@
 import { Node } from "@xyflow/react";
-import { NodeData } from "./types";
+import { NodeData, Resource } from "./types";
 import { X, Lock, CheckCircle } from "lucide-react";
 import { Video } from "./Video";
 import StarCircle from "./icons/StarCircle";
 import { getTranslations } from "./translations";
 import { marked } from "marked";
 import { useMemo } from "react";
+import DOMPurify from "dompurify";
 
 interface DrawerProps {
   open: boolean;
@@ -59,10 +60,11 @@ function getCompletionOptional(node: Node<NodeData>, nodes: Node<NodeData>[]): N
 export function Drawer({ open, onClose, onUpdate, node, nodes, onNodeClick, language = "en" }: DrawerProps) {
   const t = getTranslations(language);
 
-  // Parse markdown description
+  // Parse markdown description and sanitize HTML
   const descriptionHtml = useMemo(() => {
     if (!node.data?.description) return '';
-    return marked.parse(node.data.description, { async: false }) as string;
+    const rawHtml = marked.parse(node.data.description, { async: false });
+    return DOMPurify.sanitize(rawHtml);
   }, [node.data?.description]);
 
   if (!open) return null;
@@ -111,7 +113,7 @@ export function Drawer({ open, onClose, onUpdate, node, nodes, onNodeClick, lang
             <div className="drawer-resources" style={{ marginBottom: 16 }}>
               <div style={{ fontWeight: 600, marginBottom: 8 }}>{t.resourcesLabel}</div>
               <ul>
-                {node.data?.resources.map((r: any, idx: number) => {
+                {node.data?.resources.map((r: Resource, idx: number) => {
                   if (r.type === "book") {
                     return (
                       <li key={idx}>

packages/learningmap/src/EditorDrawerTaskContent.tsx

@@ -1,6 +1,6 @@
 import { Node } from "@xyflow/react";
 import { Plus, Trash2 } from "lucide-react";
-import { NodeData } from "./types";
+import { NodeData, Resource } from "./types";
 import { getTranslations } from "./translations";
 
 interface Props {
@@ -131,7 +131,7 @@ export function EditorDrawerTaskContent({
       </div>
       <div className="form-group">
         <label>{t.resources}</label>
-        {(localNode.data.resources || []).map((resource: any, idx: number) => {
+        {(localNode.data.resources || []).map((resource: Resource, idx: number) => {
           const isBook = resource.type === "book";
           return (
             <div key={idx} style={{ marginBottom: "16px", padding: "12px", border: "1px solid #e5e7eb", borderRadius: "6px" }}>