feat: enhance markdown support for labels and summaries

Author: Victor

src/arrow.ts

@@ -300,7 +300,8 @@ const drawArrow = function (mei: MindElixirInstance, from: Topic, to: Topic, obj
   const labelColor = obj.style?.labelColor || 'rgb(235, 95, 82)'
   const groupId = 'arrow-' + obj.id
   newSvgGroup.id = groupId
-  const label = createLabel(obj.label, halfx, halfy, {
+  const renderedLabel = mei.markdown ? mei.markdown(obj.label, obj) : obj.label
+  const label = createLabel(renderedLabel, halfx, halfy, {
     anchor: 'middle',
     color: labelColor,
     dataType: 'arrow',

src/dev.ts

@@ -12,6 +12,8 @@ import { snapdom } from '@zumer/snapdom'
 import type { Tokens } from 'marked'
 import { marked } from 'marked'
 import { md2html } from 'simple-markdown-to-html'
+import type { Arrow } from './arrow'
+import type { Summary } from './summary'
 
 interface Window {
   m?: MindElixirInstance
@@ -35,9 +37,9 @@ const options: Options = {
   // mouseSelectionButton: 2,
   draggable: true,
   editable: true,
-  markdown: (text: string, obj: NodeObj & { useMd?: boolean }) => {
+  markdown: (text: string, obj: (NodeObj & { useMd?: boolean }) | (Arrow & { useMd?: boolean }) | (Summary & { useMd?: boolean })) => {
     if (!text) return ''
-    if (!obj.useMd) return text
+    // if (!obj.useMd) return text
     try {
       // Configure marked renderer to add target="_blank" to links
       const renderer = {

src/index.less

@@ -1,7 +1,18 @@
 .map-container {
+  p {
+    margin: 0;
+  }
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC,
-    WenQuanYi Micro Hei, sans-serif;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    Helvetica Neue,
+    PingFang SC,
+    Microsoft YaHei,
+    Source Han Sans SC,
+    Noto Sans CJK SC,
+    WenQuanYi Micro Hei,
+    sans-serif;
   user-select: none;
   height: 100%;
   width: 100%;

src/mouse.ts

@@ -40,10 +40,10 @@ export default function (mind: MindElixirInstance) {
     } else if (!mind.editable) {
       return
     }
-    // Check if clicked on a label div
-    if (target.classList.contains('svg-label')) {
-      const id = target.dataset.svgId!
-      const type = target.dataset.type
+    const label = target.closest('.svg-label') as HTMLElement
+    if (label) {
+      const id = label.dataset.svgId!
+      const type = label.dataset.type
       const svgElement = document.getElementById(id)
       if (svgElement) {
         if (type === 'arrow') {
@@ -84,9 +84,10 @@ export default function (mind: MindElixirInstance) {
       mind.beginEdit(target)
     }
 
-    if (target.classList.contains('svg-label')) {
-      const id = target.dataset.svgId!
-      const type = target.dataset.type
+    const label = target.closest('.svg-label') as HTMLElement
+    if (label) {
+      const id = label.dataset.svgId!
+      const type = label.dataset.type
       const svgElement = document.getElementById(id)
       if (svgElement) {
         if (type === 'arrow') {

src/summary.ts

@@ -167,12 +167,14 @@ const drawSummary = function (mei: MindElixirInstance, summary: Summary) {
   const strokeColor = style?.stroke || theme.cssVar['--color']
   const labelColor = style?.labelColor || theme.cssVar['--color']
   const groupId = 's-' + id
+  // Render label with markdown if available
+  const renderedLabel = mei.markdown ? mei.markdown(summaryText, summary) : summaryText
   if (side === DirectionClass.LHS) {
     path = createPath(`M ${left + 10} ${top} c -5 0 -10 5 -10 10 L ${left} ${bottom - 10} c 0 5 5 10 10 10 M ${left} ${md} h -10`, strokeColor)
-    text = createLabel(summaryText, left - 20, md, { anchor: 'end', color: labelColor, dataType: 'summary', svgId: groupId })
+    text = createLabel(renderedLabel, left - 20, md, { anchor: 'end', color: labelColor, dataType: 'summary', svgId: groupId })
   } else {
     path = createPath(`M ${right - 10} ${top} c 5 0 10 5 10 10 L ${right} ${bottom - 10} c 0 5 -5 10 -10 10 M ${right} ${md} h 10`, strokeColor)
-    text = createLabel(summaryText, right + 20, md, { anchor: 'start', color: labelColor, dataType: 'summary', svgId: groupId })
+    text = createLabel(renderedLabel, right + 20, md, { anchor: 'start', color: labelColor, dataType: 'summary', svgId: groupId })
   }
   const group = creatGroup(groupId)
   group.appendChild(path)

src/types/index.ts

@@ -73,7 +73,7 @@ export interface KeypressOptions {
  * @public
  */
 export interface MindElixirInstance extends Omit<Required<Options>, 'markdown' | 'imageProxy'>, MindElixirMethods {
-  markdown?: (markdown: string, obj: NodeObj) => string // Keep markdown as optional
+  markdown?: (markdown: string, obj: NodeObj | Arrow | Summary) => string // Keep markdown as optional
   imageProxy?: (url: string) => string // Keep imageProxy as optional
   dragged: Topic[] | null // currently dragged nodes
   spacePressed: boolean // space key pressed state
@@ -159,7 +159,7 @@ export interface Options {
    * If not provided, markdown will be disabled
    * @default undefined
    */
-  markdown?: (markdown: string, obj: NodeObj) => string
+  markdown?: (markdown: string, obj: NodeObj | Arrow | Summary) => string
   /**
    * Image proxy function to handle image URLs, mainly used to solve CORS issues
    * If provided, all image URLs will be processed through this function before setting to img src

src/utils/svg.ts

@@ -219,7 +219,11 @@ export const editSvgText = function (mei: MindElixirInstance, textEl: HTMLDivEle
     div.remove()
     if (text === origin) return
 
-    textEl.textContent = node.label
+    if (mei.markdown) {
+      ;(textEl as HTMLDivElement).innerHTML = mei.markdown(node.label, node as any)
+    } else {
+      textEl.textContent = node.label
+    }
     // Recalculate position with new content while preserving existing color
     calculatePrecisePosition(textEl)