use store instead

Author: benceruleanlu

src/components/graph/selectionToolbox/HelpButton.vue

@@ -18,17 +18,17 @@ import Button from 'primevue/button'
 import { computed } from 'vue'
 
 import { useNodeLibrarySidebarTab } from '@/composables/sidebarTabs/useNodeLibrarySidebarTab'
-import { useNodeHelp } from '@/composables/useNodeHelp'
 import { useCanvasStore } from '@/stores/graphStore'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
+import { useNodeHelpStore } from '@/stores/workspace/nodeHelpStore'
 import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 import { isLGraphNode } from '@/utils/litegraphUtil'
 
 const canvasStore = useCanvasStore()
 const nodeDefStore = useNodeDefStore()
 const sidebarTabStore = useSidebarTabStore()
-const { openHelp } = useNodeHelp()
+const nodeHelpStore = useNodeHelpStore()
 const { id: nodeLibraryTabId } = useNodeLibrarySidebarTab()
 
 const nodeDef = computed<ComfyNodeDefImpl | null>(() => {
@@ -44,6 +44,6 @@ const showHelp = () => {
   if (sidebarTabStore.activeSidebarTabId !== nodeLibraryTabId) {
     sidebarTabStore.toggleSidebarTab(nodeLibraryTabId)
   }
-  openHelp(def)
+  nodeHelpStore.openHelp(def)
 }
 </script>

src/components/sidebar/tabs/NodeLibrarySidebarTab.vue

@@ -72,6 +72,7 @@
 </template>
 
 <script setup lang="ts">
+import { storeToRefs } from 'pinia'
 import Button from 'primevue/button'
 import Divider from 'primevue/divider'
 import Popover from 'primevue/popover'
@@ -85,7 +86,6 @@ import NodeSearchFilter from '@/components/searchbox/NodeSearchFilter.vue'
 import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
 import NodeHelpPage from '@/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue'
 import NodeTreeLeaf from '@/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue'
-import { useNodeHelp } from '@/composables/useNodeHelp'
 import { useTreeExpansion } from '@/composables/useTreeExpansion'
 import { useLitegraphService } from '@/services/litegraphService'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
@@ -94,6 +94,7 @@ import {
   buildNodeDefTree,
   useNodeDefStore
 } from '@/stores/nodeDefStore'
+import { useNodeHelpStore } from '@/stores/workspace/nodeHelpStore'
 import type { TreeNode } from '@/types/treeExplorerTypes'
 import type { TreeExplorerNode } from '@/types/treeExplorerTypes'
 import { FuseFilterWithValue } from '@/utils/fuseUtil'
@@ -103,6 +104,7 @@ import NodeBookmarkTreeExplorer from './nodeLibrary/NodeBookmarkTreeExplorer.vue
 
 const nodeDefStore = useNodeDefStore()
 const nodeBookmarkStore = useNodeBookmarkStore()
+const nodeHelpStore = useNodeHelpStore()
 const expandedKeys = ref<Record<string, boolean>>({})
 const { expandNode, toggleNodeOnEvent } = useTreeExpansion(expandedKeys)
 
@@ -114,7 +116,8 @@ const alphabeticalSort = ref(false)
 
 const searchQuery = ref<string>('')
 
-const { currentHelpNode, isHelpOpen, openHelp, closeHelp } = useNodeHelp()
+const { currentHelpNode, isHelpOpen } = storeToRefs(nodeHelpStore)
+const { openHelp, closeHelp } = nodeHelpStore
 
 const root = computed(() => {
   const root = filteredRoot.value || nodeDefStore.nodeTree

src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

@@ -77,18 +77,20 @@
 </template>
 
 <script setup lang="ts">
+import { storeToRefs } from 'pinia'
 import Button from 'primevue/button'
 import Column from 'primevue/column'
 import DataTable from 'primevue/datatable'
 import ProgressSpinner from 'primevue/progressspinner'
 import { computed } from 'vue'
 
-import { useNodeHelp } from '@/composables/useNodeHelp'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { useNodeHelpStore } from '@/stores/workspace/nodeHelpStore'
 
 const { node } = defineProps<{ node: ComfyNodeDefImpl }>()
 
-const { renderedHelpHtml, isLoading, error } = useNodeHelp()
+const nodeHelpStore = useNodeHelpStore()
+const { renderedHelpHtml, isLoading, error } = storeToRefs(nodeHelpStore)
 
 defineEmits<{
   (e: 'close'): void

src/composables/useNodeHelp.ts

@@ -0,0 +1,69 @@
+import { defineStore } from 'pinia'
+import { computed, ref, watch } from 'vue'
+
+import { i18n } from '@/i18n'
+import { nodeHelpService } from '@/services/nodeHelpService'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { renderMarkdownToHtml } from '@/utils/markdownRendererUtil'
+import { getNodeHelpBaseUrl } from '@/utils/nodeHelpUtil'
+
+export const useNodeHelpStore = defineStore('nodeHelp', () => {
+  const currentHelpNode = ref<ComfyNodeDefImpl | null>(null)
+  const isHelpOpen = computed(() => currentHelpNode.value !== null)
+  const helpContent = ref<string>('')
+  const isLoading = ref<boolean>(false)
+  const errorMsg = ref<string | null>(null)
+
+  function openHelp(nodeDef: ComfyNodeDefImpl) {
+    currentHelpNode.value = nodeDef
+  }
+
+  function closeHelp() {
+    currentHelpNode.value = null
+  }
+
+  // Base URL for relative assets in node docs markdown
+  const baseUrl = computed(() => {
+    const node = currentHelpNode.value
+    if (!node) return ''
+    return getNodeHelpBaseUrl(node)
+  })
+
+  // Watch for help node changes and fetch its docs markdown
+  watch(
+    () => currentHelpNode.value,
+    async (node) => {
+      helpContent.value = ''
+      errorMsg.value = null
+
+      if (node) {
+        isLoading.value = true
+        try {
+          const locale = i18n.global.locale.value || 'en'
+          helpContent.value = await nodeHelpService.fetchNodeHelp(node, locale)
+        } catch (e: any) {
+          errorMsg.value = e.message
+          helpContent.value = node.description || ''
+        } finally {
+          isLoading.value = false
+        }
+      }
+    },
+    { immediate: true }
+  )
+
+  const renderedHelpHtml = computed(() => {
+    return renderMarkdownToHtml(helpContent.value, baseUrl.value)
+  })
+
+  return {
+    currentHelpNode,
+    isHelpOpen,
+    openHelp,
+    closeHelp,
+    baseUrl,
+    renderedHelpHtml,
+    isLoading,
+    error: errorMsg
+  }
+})