Add tests for advanced description formats

browser_tests/documentationSidebar.spec.ts

@@ -1,5 +1,8 @@
 import { expect } from '@playwright/test'
 import { comfyPageFixture as test } from './ComfyPage'
+const nodeDef = {
+  title: 'TestNodeAdvancedDoc'
+}
 
 test.describe('Documentation Sidebar', () => {
   test.beforeEach(async ({ comfyPage }) => {
@@ -60,3 +63,68 @@ test.describe('Documentation Sidebar', () => {
     )
   })
 })
+test.describe('Advanced Description tests', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    //register test node and add to graph
+    await comfyPage.page.evaluate(async (node) => {
+      const app = window['app']
+      await app.registerNodeDef(node.name, node)
+      app.addNodeOnGraph(node)
+    }, advDocNode)
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Floating')
+  })
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+  })
+  test('Description displays as raw html', async ({ comfyPage }) => {
+    await comfyPage.page.locator('.documentation-tab-button').click()
+    const docPane = comfyPage.page.locator('.sidebar-content-container>div')
+    await expect(docPane).toHaveJSProperty(
+      'innerHTML',
+      advDocNode.description[1]
+    )
+  })
+  test('selected function', async ({ comfyPage }) => {
+    await comfyPage.page.evaluate(() => {
+      const app = window['app']
+      const desc =
+        LiteGraph.registered_node_types['Test_AdvancedDescription'].nodeData
+          .description
+      desc[2].select = (element, name, value) => {
+        element.children[0].innerText = name + ' ' + value
+      }
+    })
+    await comfyPage.page.locator('.documentation-tab-button').click()
+    const docPane = comfyPage.page.locator('.sidebar-content-container')
+    await comfyPage.page.mouse.move(307, 80)
+    const tooltipTimeout = 500
+    await comfyPage.page.waitForTimeout(tooltipTimeout + 16)
+    await expect(docPane).toContainText('int_input 0')
+  })
+})
+
+const advDocNode = {
+  display_name: 'Node With Advanced Description',
+  name: 'Test_AdvancedDescription',
+  input: {
+    required: {
+      int_input: [
+        'INT',
+        { tooltip: "an input tooltip that won't be displayed in sidebar" }
+      ]
+    }
+  },
+  output: ['INT'],
+  output_name: ['int_output'],
+  output_tooltips: ["An output tooltip that won't be displayed in the sidebar"],
+  output_is_list: false,
+  description: [
+    'A node with description in the advanced format',
+    `
+A long form description that will be displayed in the sidebar.
+<div doc_title="INT">Can include arbitrary html</div>
+<div doc_title="int_input">or out of order widgets</div>
+`,
+    {}
+  ]
+}

src/components/graph/NodeTooltip.vue

@@ -80,7 +80,9 @@ watch(hoveredItemStore, (hoveredItem) => {
     return hideTooltip()
   }
   const item = hoveredItem.value
-  const nodeDef = nodeDefStore.nodeDefsByName[item.node.type]
+  const nodeDef =
+    nodeDefStore.nodeDefsByName[item.node.type] ??
+    LiteGraph.registered_node_types[item.node.type]?.nodeData
   if (item.type == 'Title') {
     let description = nodeDef.description
     if (Array.isArray(description)) {
@@ -93,7 +95,11 @@ watch(hoveredItemStore, (hoveredItem) => {
     showTooltip(nodeDef?.output?.all?.[item.outputSlot]?.tooltip)
   } else if (item.type == 'Widget') {
     showTooltip(
-      item.widget.tooltip ?? nodeDef.input.getInput(item.widget.name)?.tooltip
+      item.widget.tooltip ??
+        (
+          nodeDef.input.optional?.[item.widget.name] ??
+          nodeDef.input.required?.[item.widget.name]
+        )?.tooltip
     )
   } else {
     hideTooltip()
@@ -106,7 +112,9 @@ const onIdle = () => {
   if (!node) return
 
   const ctor = node.constructor as { title_mode?: 0 | 1 | 2 | 3 }
-  const nodeDef = nodeDefStore.nodeDefsByName[node.type]
+  const nodeDef =
+    nodeDefStore.nodeDefsByName[node.type] ??
+    LiteGraph.registered_node_types[node.type]?.nodeData
 
   if (
     ctor.title_mode !== LiteGraph.NO_TITLE &&

src/components/sidebar/tabs/DocumentationSidebarTab.vue

@@ -85,8 +85,8 @@ function selectHelp(name: string, value?: string) {
   if (!docElement.value || !name) {
     return null
   }
-  if (def[2]?.select) {
+  if (def.description[2]?.select) {
-    return def[2].select(docElement.value, name, value)
+    return def.description[2].select(docElement.value, name, value)
   }
   //attempt to navigate to name in help
   function collapseUnlessMatch(items, t) {