UX improvements: connected node sorting, markdown descriptions, book resources, edge handling, node centering, and edge defaults

[Copilot]

Better UX Improvements ✅

This PR successfully implements all 7 original UX improvements for the learningmap editor plus 5 additional enhancements:

Original Requirements:

• 1. Sort dropdown options to show connected nodes first - Connected nodes (with edges to/from current node) now appear at the top of completion and unlock dropdowns, sorted alphabetically
• 2. Markdown support for descriptions - Node descriptions now render markdown with full styling (headings, lists, code blocks, links, blockquotes) using marked library with DOMPurify sanitization
• 3. Physical book resources - Resources can now be either URLs or physical books with name (e.g., "Lambacher Schweitzer GK") and location (e.g., "S. 223 Nr. 5") fields
• 4. Readable description font - Removed Concert One font from descriptions, using system font stack for better readability
• 5. Better edge selection - Selected edges now change color and stroke width instead of showing a border outline
• 6. No edge selection in box select - Edges are excluded from multiple selection (box selection), only nodes are selected
• 7. Keyboard edge deletion - Edges can now be deleted using the Delete key, just like nodes

Additional Enhancements:

• 8. Resource list font - Resource list uses normal system font instead of Concert One (only header uses fancy font)
• 9. Resource icons - Added 🌐 icon for URL resources and 📚 icon for book resources
• 10. Centered node labels - Node labels are now centered within nodes when resizing
• 11. Configurable font size - Node font size is configurable per node (8-72px range)
• 12. Default edge settings - Default edge type and color configurable in settings with bulk update button
• 13. Description textarea font - Description textarea now uses system font for better readability when editing

Technical Implementation:

Files Modified:

• packages/learningmap/src/types.ts - Added Resource interface, fontSize to NodeData, edge defaults to Settings
• packages/learningmap/src/EditorDrawer.tsx - Implemented connected node sorting
• packages/learningmap/src/EditorDrawerTaskContent.tsx - Added book resource UI and font size control
• packages/learningmap/src/Drawer.tsx - Markdown rendering with sanitization, book display with icons, fixed null reference
• packages/learningmap/src/KeyboardShortcuts.tsx - Edge deletion support
• packages/learningmap/src/EditorCanvas.tsx - Box selection behavior, use default edge settings
• packages/learningmap/src/SettingsDrawer.tsx - Added edge default controls and bulk update button
• packages/learningmap/src/nodes/TaskNode.tsx - Centered labels, configurable font size
• packages/learningmap/src/nodes/TopicNode.tsx - Centered labels, configurable font size
• packages/learningmap/src/index.css - Typography and edge styling, resource list font, textarea font
• packages/learningmap/package.json - Added marked and dompurify dependencies

Resource Display:

• URL resources: 🌐 Label (linked)
• Book resources: 📚 Label (Name, Location) - comma only shown when both name and location exist

Edge Settings:

• Configurable default edge type (default, straight, step, smoothstep, simplebezier)
• Configurable default edge color
• Bulk update button to apply defaults to all existing edges

Bug Fixes:

• Fixed null reference error in preview mode when node is null

Security:

• All markdown HTML is sanitized with DOMPurify to prevent XSS attacks
• Proper TypeScript types used throughout (no 'any' types)
• CodeQL scan passed with 0 alerts

Testing:

• ✅ Build passes
• ✅ Lint passes (TypeScript type checking)
• ✅ Tests pass
• ✅ CodeQL security scan passes

Backward Compatibility:

• Existing resources without type field will default to URL type
• Nodes without fontSize will default to 14px
• Old data structures continue to work seamlessly

---

Fixes #34

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Better UX</issue_title>
<issue_description>1. If nodes are connected with an edge, these nodes should be at the top of the dropdowns for completion and locked.
2. The description of a node should support markdown.
3. A resource could also be a physical book. A book needs a name (Lambacher Schweitzer GK) and a location (for example S. 223 Nr. 5)
4. Do not use Concert One for the description of a node, since it is harder to read.
5. Do not draw a border around an edge if it is selected, the color of the edge should change.
6. Do not select edges, when using multiple selection.
7. An edge should be deletable with the keyboard just like a node.</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Better UX #34

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
learningmap	Ready	Preview	Comment	Nov 1, 2025 1:07pm

[mikebarkmin]

@copilot I get this error, when opening the preview mode: can't access property "data", o is null

[Copilot]

@copilot I get this error, when opening the preview mode: can't access property "data", o is null

Fixed in commit 5d453ce. The issue was that the useMemo hook was trying to access node.data before checking if node was null. Added a null check in the useMemo and updated the early return condition to check both open and node.

[mikebarkmin]

@copilot Add an internet icon before url resources. Add an book icon before book resources.

A book resource should look like this: 📚 Label (Name, Location) if name is empty no comma should be visible

[Copilot]

@copilot Add an internet icon before url resources. Add an book icon before book resources.

A book resource should look like this: 📚 Label (Name, Location) if name is empty no comma should be vi...

Done in commit fcd8273. Added:

• 🌐 icon before URL resources
• 📚 icon before book resources
• Book format: 📚 Label (Name, Location) - comma is only shown when both name and location are provided

[mikebarkmin]

@copilot Three more things:

1. Only the resource header should use the fancy font, the list should use the normal font.
2. When resizing a node the label of the node should always be centered. Also the font size of a node should be configurable.
3. The default edge type should be configurable in the settings. There should also be a button to update all edges to use this edge type. Same should be possible for edge color.

[Copilot]

@copilot Three more things:

1. Only the resource header should use the fancy font, the list should use the normal font.
   ...

Done in commit 748f6d0. Implemented all three improvements:

1. Resource list font - Only the header uses Concert One font; the list now uses the system font for better readability

2. Centered node labels - Node labels are now centered using flexbox (both horizontally and vertically). Added font size control (8-72px) in the node editor drawer

3. Default edge settings - Added to Settings drawer:

   • Default Edge Type selector (default, straight, step, smoothstep, simplebezier)
   • Default Edge Color picker
   • "Update All Edges to Default Settings" button to apply defaults to all existing edges
   • New edges automatically use these defaults

[mikebarkmin]

@copilot the description textarea does not use the system font.

[Copilot]

@copilot the description textarea does not use the system font.

Fixed in commit c5c3022. Changed the description textarea to use the system font stack instead of inheriting from the parent container (which uses Concert One). The textarea now uses the same readable font as other text inputs.