Add Help Menu in NodeLibrarySidebarTab (#3922)

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Claude <noreply@anthropic.com>

src/utils/markdownRendererUtil.ts

@@ -0,0 +1,53 @@
+import DOMPurify from 'dompurify'
+import { Renderer, marked } from 'marked'
+
+const ALLOWED_TAGS = ['video', 'source']
+const ALLOWED_ATTRS = [
+  'controls',
+  'autoplay',
+  'loop',
+  'muted',
+  'preload',
+  'poster'
+]
+
+// Matches relative src attributes in img, source, and video HTML tags
+// Captures: 1) opening tag with src=", 2) relative path, 3) closing quote
+// Excludes absolute paths (starting with /) and URLs (http:// or https://)
+const MEDIA_SRC_REGEX =
+  /(<(?:img|source|video)[^>]*\ssrc=['"])(?!(?:\/|https?:\/\/))([^'"\s>]+)(['"])/gi
+
+// Create a marked Renderer that prefixes relative URLs with base
+export function createMarkdownRenderer(baseUrl?: string): Renderer {
+  const normalizedBase = baseUrl ? baseUrl.replace(/\/+$/, '') : ''
+  const renderer = new Renderer()
+  renderer.image = ({ href, title, text }) => {
+    let src = href
+    if (normalizedBase && !/^(?:\/|https?:\/\/)/.test(href)) {
+      src = `${normalizedBase}/${href}`
+    }
+    const titleAttr = title ? ` title="${title}"` : ''
+    return `<img src="${src}" alt="${text}"${titleAttr} />`
+  }
+  return renderer
+}
+
+export function renderMarkdownToHtml(
+  markdown: string,
+  baseUrl?: string
+): string {
+  if (!markdown) return ''
+
+  let html = marked.parse(markdown, {
+    renderer: createMarkdownRenderer(baseUrl)
+  }) as string
+
+  if (baseUrl) {
+    html = html.replace(MEDIA_SRC_REGEX, `$1${baseUrl}$2$3`)
+  }
+
+  return DOMPurify.sanitize(html, {
+    ADD_TAGS: ALLOWED_TAGS,
+    ADD_ATTR: ALLOWED_ATTRS
+  })
+}

src/utils/nodeHelpUtil.ts

@@ -0,0 +1,23 @@
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { NodeSourceType, getNodeSource } from '@/types/nodeSource'
+
+export function extractCustomNodeName(
+  pythonModule: string | undefined
+): string | null {
+  const modules = pythonModule?.split('.') || []
+  if (modules.length >= 2 && modules[0] === 'custom_nodes') {
+    return modules[1].split('@')[0]
+  }
+  return null
+}
+
+export function getNodeHelpBaseUrl(node: ComfyNodeDefImpl): string {
+  const nodeSource = getNodeSource(node.python_module)
+  if (nodeSource.type === NodeSourceType.CustomNodes) {
+    const customNodeName = extractCustomNodeName(node.python_module)
+    if (customNodeName) {
+      return `/extensions/${customNodeName}/docs/`
+    }
+  }
+  return `/docs/${node.name}/`
+}