Fix "Markdown" and "Text Preview" widgets mouse events

[kaalibro]

Summary

Fixes canvas interaction issues in "Markdown" and "Text Preview" widgets by properly delegating wheel and pointer events to the canvas interaction system, preventing interaction blocking.

Changes

• What: Added event handlers to delegate wheel and pointer events from widgets to the canvas interaction system
  • useMarkdownWidget.ts: Implemented comprehensive wheel handling with trackpad detection, pinch zoom prevention, and proper vertical scroll delegation
  • TextPreviewWidget.vue: Added wheel and pointerdown handlers using useCanvasInteractions composable

Screenshots

Before:

before.mp4

After:

after.mp4

┆Issue is synchronized with this Notion page by Unito

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds canvas interaction event bindings to TextPreviewWidget and implements nuanced wheel event routing in the Markdown widget to distinguish pinch-zoom, trackpad gestures, horizontal scroll, and vertical scroll, conditionally routing events to the canvas or allowing local scrolling based on editor state and settings.

Changes

Cohort / File(s)	Summary
Widget Canvas Interaction Binding src/components/graph/widgets/TextPreviewWidget.vue	Imports useCanvasInteractions, instantiates canvasInteractions, and delegates wheel and pointerdown from the component root to canvasInteractions.handleWheel and canvasInteractions.handlePointer.
Markdown Widget Wheel Event Handling src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts	Adds wheel handling on inputEl: Ctrl (pinch-zoom) prevention + forward, trackpad detection via TRACKPAD_DETECTION_THRESHOLD and setting, horizontal wheel always forwarded to canvas, vertical wheel routed to local scroll only if scrollable/editing; otherwise forwarded. Caches useSettingStore.
String Widget: settings cache src/renderer/extensions/vueNodes/widgets/composables/useStringWidget.ts	Caches useSettingStore() in addMultilineWidget and reuses it for spellcheck and trackpad gesture flags; wheel handler now uses the cached store (no control-flow changes).

Sequence Diagram(s)

sequenceDiagram
  participant Widget as Markdown Widget
  participant Settings as SettingStore
  participant Editor as Editor / textarea
  participant Canvas as CanvasInteractions

  Widget->>Settings: read trackpad detection setting
  Widget->>Editor: get inputEl and editing/scroll state
  Note over Widget,Editor: wheel event occurs on inputEl
  Widget->>Widget: detect Ctrl (pinch-zoom) or trackpad gesture via deltas
  alt Pinch-zoom (Ctrl) or Trackpad gesture detected
    Widget->>Canvas: forward wheel event to canvas.handleWheel
  else Horizontal wheel
    Widget->>Canvas: forward horizontal wheel to canvas.handleWheel
  else Vertical wheel & editor scrollable/editing
    Widget->>Editor: allow local scrolling
  else Vertical wheel & not scrollable/editing
    Widget->>Canvas: forward vertical wheel to canvas.handleWheel
  end

Loading

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🎨 Storybook Build Status

Build is starting...

⏰ Started at: 01/10/2026, 04:39:38 AM UTC

🚀 Building Storybook

• 📦 Installing dependencies...
• 🔧 Building Storybook components...
• 🌐 Preparing deployment to Cloudflare Pages...

---

⏱️ Please wait while the Storybook build is in progress...

[github-actions]

🎭 Playwright Test Results

Tests are starting...

⏰ Started at: 01/10/2026, 04:39:37 AM UTC

🚀 Running Tests

• 🧪 chromium: Running tests...
• 🧪 chromium-0.5x: Running tests...
• 🧪 chromium-2x: Running tests...
• 🧪 mobile-chrome: Running tests...

---

⏱️ Please wait while tests are running...

[kaalibro]

I'm as far from development as a butcher is from surgery :) So I couldn't think of anything better than just copying the code for useMarkdownWidget.ts from useStringWidget.ts as is. It might not be the most elegant solution, but at least it works.

[coderabbitai]

Actionable comments posted: 3

🤖 Fix all issues with AI agents

In @src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts:
- Around line 99-101: The wheel handler repeatedly calls
useSettingStore().get('LiteGraph.Pointer.TrackpadGestures'), which can be
cached; capture useSettingStore() once (e.g., const settingStore =
useSettingStore()) near addMarkdownWidget/editor initialization and then read
settingStore.get('LiteGraph.Pointer.TrackpadGestures') inside the wheel handler
(or create a reactive/computed gesturesEnabled from settingStore) so the store
lookup isn't performed on every wheel event.
- Around line 98-149: The wheel handler attached in inputEl.addEventListener is
large and should be split: extract shouldPreventPinchZoom(event: WheelEvent),
isLikelyTrackpadGesture(deltaX, deltaY) (using TRACKPAD_DETECTION_THRESHOLD),
and a shouldRouteToCanvas(event, gesturesEnabled, isEditing, canScrollYMarkdown,
canScrollYTextarea) that returns { route, allowDefault }; then replace the
inline logic with calls to these helpers and centralize
event.preventDefault()/event.stopPropagation() and the call to
app.canvas.processMouseWheel(event) based on the helpers' result so the main
handler is declarative and each helper is small and testable.
- Line 16: TRACKPAD_DETECTION_THRESHOLD is a magic number; add a clear comment
above the constant TRACKPAD_DETECTION_THRESHOLD = 50 in useMarkdownWidget.ts
explaining why 50 was chosen (e.g., summary of empirical testing, sample delta
values observed on macOS/Windows/Linux, device types, and the tradeoff between
false positives/negatives) and note the scope of testing or remaining unknowns;
optionally include a TODO to parametrize or make it configurable if platform
variance was observed and reference the constant name in the comment for
clarity.

📜 Review details

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b3d8767 and 88a255b.

📒 Files selected for processing (2)

• src/components/graph/widgets/TextPreviewWidget.vue
• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts

🧰 Additional context used

📓 Path-based instructions (16)

src/**/*.{vue,ts}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json

Files:

• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts
• src/components/graph/widgets/TextPreviewWidget.vue

src/**/*.ts

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safety

Files:

• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts

src/**/{services,composables}/**/*.{ts,tsx}

📄 CodeRabbit inference engine (src/CLAUDE.md)

src/**/{services,composables}/**/*.{ts,tsx}: Use api.apiURL() for backend endpoints instead of constructing URLs directly
Use api.fileURL() for static file access instead of constructing URLs directly

Files:

• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts

src/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (src/CLAUDE.md)

src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase

Files:

• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts
• src/components/graph/widgets/TextPreviewWidget.vue

src/**/{composables,components}/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (src/CLAUDE.md)

Clean up subscriptions in state management to prevent memory leaks

Files:

• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts
• src/components/graph/widgets/TextPreviewWidget.vue

src/**/*.{vue,ts,tsx}

📄 CodeRabbit inference engine (src/CLAUDE.md)

Follow Vue 3 composition API style guide

Files:

• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts
• src/components/graph/widgets/TextPreviewWidget.vue

src/**/{components,composables}/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (src/CLAUDE.md)

Use vue-i18n for ALL user-facing strings by adding them to src/locales/en/main.json

Files:

• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts
• src/components/graph/widgets/TextPreviewWidget.vue

**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{ts,tsx,vue}: Use TypeScript exclusively; do not write new JavaScript code
Use sorted and grouped imports organized by plugin/source
Enforce ESLint rules including Vue + TypeScript rules, disallow floating promises, disallow unused imports, and restrict i18n raw text in templates
Do not use any type or as any type assertions; fix the underlying type issue instead
Write code that is expressive and self-documenting; avoid redundant comments and clean as you go
Keep functions short and functional; minimize nesting and follow the arrow anti-pattern
Avoid mutable state; prefer immutability and assignment at point of declaration
Use function declarations instead of function expressions when possible
Use es-toolkit for utility functions
Implement proper error handling in code

Files:

• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts
• src/components/graph/widgets/TextPreviewWidget.vue

**/**/use[A-Z]*.ts

📄 CodeRabbit inference engine (AGENTS.md)

Name composables using the pattern useXyz.ts

Files:

• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts

**/*.{ts,tsx,vue,js,jsx,json,css}

📄 CodeRabbit inference engine (AGENTS.md)

Apply Prettier formatting with 2-space indentation, single quotes, no trailing semicolons, and 80-character line width

Files:

• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts
• src/components/graph/widgets/TextPreviewWidget.vue

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Minimize the surface area (exported values) of each module and composable

Files:

• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts

src/**/*.vue

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventions

Files:

• src/components/graph/widgets/TextPreviewWidget.vue

src/components/**/*.vue

📄 CodeRabbit inference engine (src/components/CLAUDE.md)

src/components/**/*.vue: Use setup() function in Vue 3 Composition API
Destructure props using Vue 3.5 style in Vue components
Use ref/reactive for state management in Vue 3 Composition API
Implement computed() for derived state in Vue 3 Composition API
Use provide/inject for dependency injection in Vue components
Prefer emit/@event-name for state changes over other communication patterns
Use defineExpose only for imperative operations (such as form.validate(), modal.open())
Replace PrimeVue Dropdown component with Select
Replace PrimeVue OverlayPanel component with Popover
Replace PrimeVue Calendar component with DatePicker
Replace PrimeVue InputSwitch component with ToggleSwitch
Replace PrimeVue Sidebar component with Drawer
Replace PrimeVue Chips component with AutoComplete with multiple enabled
Replace PrimeVue TabMenu component with Tabs without panels
Replace PrimeVue Steps component with Stepper without panels
Replace PrimeVue InlineMessage component with Message
Extract complex conditionals to computed properties
Implement cleanup for async operations in Vue components
Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Use Teleport/Suspense when needed for component rendering
Define proper props and emits definitions in Vue components

Files:

• src/components/graph/widgets/TextPreviewWidget.vue

src/components/**/*.{vue,css}

📄 CodeRabbit inference engine (src/components/CLAUDE.md)

src/components/**/*.{vue,css}: Use Tailwind CSS only for styling (no custom CSS)
Use the correct tokens from style.css in the design system package

Files:

• src/components/graph/widgets/TextPreviewWidget.vue

src/components/**/*.{vue,ts,js}

📄 CodeRabbit inference engine (src/components/CLAUDE.md)

src/components/**/*.{vue,ts,js}: Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Use useIntersectionObserver for visibility detection instead of custom scroll handlers
Use vue-i18n for ALL UI strings

Files:

• src/components/graph/widgets/TextPreviewWidget.vue

**/*.vue

📄 CodeRabbit inference engine (AGENTS.md)

**/*.vue: Use Vue 3.5+ with TypeScript in .vue files, exclusively using Composition API with <script setup lang="ts"> syntax
Use Tailwind 4 for styling in Vue components; avoid <style> blocks
Name Vue components using PascalCase (e.g., MenuHamburger.vue)
Use Vue 3.5 TypeScript-style default prop declaration with reactive props destructuring; do not use withDefaults or runtime props declaration
Prefer computed() over ref with watch when deriving values
Prefer useModel over separately defining prop and emit for two-way binding
Use vue-i18n in composition API for string literals; place new translation entries in src/locales/en/main.json
Use cn() utility function from @/utils/tailwindUtil for merging Tailwind class names; do not use :class="[]" syntax
Do not use the dark: Tailwind variant; use semantic values from the style.css theme instead (e.g., bg-node-component-surface)
Do not use !important or the ! important prefix for Tailwind classes; find and correct interfering !important classes instead
Avoid new usage of PrimeVue components; use VueUse, shadcn/vue, or Reka UI instead
Leverage VueUse functions for performance-enhancing styles in Vue components
Implement proper props and emits definitions in Vue components
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventions

Files:

• src/components/graph/widgets/TextPreviewWidget.vue

🧠 Learnings (27)

📓 Common learnings

Learnt from: simula-r
Repo: Comfy-Org/ComfyUI_frontend PR: 7252
File: src/renderer/extensions/vueNodes/components/ImagePreview.vue:151-158
Timestamp: 2025-12-11T03:55:57.926Z
Learning: In src/renderer/extensions/vueNodes/components/ImagePreview.vue and LGraphNode.vue, keyboard navigation for image galleries should respond to node-level focus (via keyEvent injection from LGraphNode), not require focus within the image preview wrapper itself. This allows users to navigate the gallery with arrow keys immediately when the node is focused/selected.

📚 Learning: 2025-12-09T03:39:54.501Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7169
File: src/platform/remote/comfyui/jobs/jobTypes.ts:1-107
Timestamp: 2025-12-09T03:39:54.501Z
Learning: In the ComfyUI_frontend project, Zod is on v3.x. Do not suggest Zod v4 standalone validators (z.uuid, z.ulid, z.cuid2, z.nanoid) until an upgrade to Zod 4 is performed. When reviewing TypeScript files (e.g., src/platform/remote/comfyui/jobs/jobTypes.ts) validate against Zod 3 capabilities and avoid introducing v4-specific features; flag any proposal to upgrade or incorporate v4-only validators and propose staying with compatible 3.x patterns.

Applied to files:

• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts

📚 Learning: 2025-12-13T11:03:11.264Z

Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7416
File: src/stores/imagePreviewStore.ts:5-7
Timestamp: 2025-12-13T11:03:11.264Z
Learning: In the ComfyUI_frontend repository, lint rules require keeping 'import type' statements separate from non-type imports, even if importing from the same module. Do not suggest consolidating them into a single import statement. Ensure type imports remain on their own line (import type { ... } from 'module') and regular imports stay on separate lines.

Applied to files:

• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts

📚 Learning: 2025-12-17T00:40:09.635Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7537
File: src/components/ui/button/Button.stories.ts:45-55
Timestamp: 2025-12-17T00:40:09.635Z
Learning: Prefer pure function declarations over function expressions (e.g., use function foo() { ... } instead of const foo = () => { ... }) for pure functions in the repository. Function declarations are more functional-leaning, offer better hoisting clarity, and can improve readability and tooling consistency. Apply this guideline across TypeScript files in Comfy-Org/ComfyUI_frontend, including story and UI component code, except where a function expression is semantically required (e.g., callbacks, higher-order functions with closures).

Applied to files:

• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts

📚 Learning: 2025-12-30T22:22:33.836Z

Learnt from: kaili-yang
Repo: Comfy-Org/ComfyUI_frontend PR: 7805
File: src/composables/useCoreCommands.ts:439-439
Timestamp: 2025-12-30T22:22:33.836Z
Learning: When accessing reactive properties from Pinia stores in TypeScript files, avoid using .value on direct property access (e.g., useStore().isOverlayExpanded). Pinia auto-wraps refs when accessed directly, returning the primitive value. The .value accessor is only needed when destructuring store properties or when using storeToRefs().

Applied to files:

• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts

📚 Learning: 2025-12-11T12:25:15.470Z

Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7358
File: src/components/dialog/content/signin/SignUpForm.vue:45-54
Timestamp: 2025-12-11T12:25:15.470Z
Learning: This repository uses CI automation to format code (pnpm format). Do not include manual formatting suggestions in code reviews for Comfy-Org/ComfyUI_frontend. If formatting issues are detected, rely on the CI formatter or re-run pnpm format. Focus reviews on correctness, readability, performance, accessibility, and maintainability rather than style formatting.

Applied to files:

• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts
• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-12-11T03:55:57.926Z

Learnt from: simula-r
Repo: Comfy-Org/ComfyUI_frontend PR: 7252
File: src/renderer/extensions/vueNodes/components/ImagePreview.vue:151-158
Timestamp: 2025-12-11T03:55:57.926Z
Learning: In src/renderer/extensions/vueNodes/components/ImagePreview.vue and LGraphNode.vue, keyboard navigation for image galleries should respond to node-level focus (via keyEvent injection from LGraphNode), not require focus within the image preview wrapper itself. This allows users to navigate the gallery with arrow keys immediately when the node is focused/selected.

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.{vue,ts,js} : Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.{vue,ts,js} : Use useIntersectionObserver for visibility detection instead of custom scroll handlers

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-12-18T20:39:30.137Z

Learnt from: jtydhr88
Repo: Comfy-Org/ComfyUI_frontend PR: 7621
File: src/components/load3d/Load3DScene.vue:4-4
Timestamp: 2025-12-18T20:39:30.137Z
Learning: In src/components/load3d/Load3DScene.vue, the scoped `<style>` block with `!important` declarations for the canvas element is necessary because Three.js dynamically creates the canvas with inline styles, preventing direct application of Tailwind classes. This is a valid exception to the Tailwind-only styling guideline.

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-11-24T19:47:02.860Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Utilize ref and reactive for reactive state

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use ref/reactive for state management in Vue 3 Composition API

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Implement computed() for derived state in Vue 3 Composition API

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-11-24T19:47:02.860Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.{vue,ts} : Leverage VueUse functions for performance-enhancing styles

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-12-04T21:43:49.363Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7137
File: src/components/rightSidePanel/parameters/TabParameters.vue:10-0
Timestamp: 2025-12-04T21:43:49.363Z
Learning: Vue 3.5+ supports reactive props destructure in <script setup>. Destructuring props directly (e.g., `const { nodes } = defineProps<{ nodes: LGraphNode[] }>()`) maintains reactivity through compiler transformation. This is the recommended modern approach and does not require using `props.x` or `toRef`/`toRefs`.

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-12-21T06:04:12.562Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-21T06:04:12.562Z
Learning: Applies to **/*.vue : Prefer `computed()` over `ref` with `watch` when deriving values

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-12-21T06:04:12.562Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-21T06:04:12.562Z
Learning: Applies to **/*.vue : Leverage VueUse functions for performance-enhancing styles in Vue components

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-12-09T03:49:52.828Z

Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 6300
File: src/platform/updates/components/WhatsNewPopup.vue:5-13
Timestamp: 2025-12-09T03:49:52.828Z
Learning: In Vue files across the ComfyUI_frontend repo, when a button is needed, prefer the repo's common button components from src/components/button/ (IconButton.vue, TextButton.vue, IconTextButton.vue) over plain HTML <button> elements. These components wrap PrimeVue with the project’s design system styling. Use only the common button components for consistency and theming, and import them from src/components/button/ as needed.

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-12-09T21:40:12.361Z

Learnt from: benceruleanlu
Repo: Comfy-Org/ComfyUI_frontend PR: 7297
File: src/components/actionbar/ComfyActionbar.vue:33-43
Timestamp: 2025-12-09T21:40:12.361Z
Learning: In Vue single-file components, allow inline Tailwind CSS class strings for static classes and avoid extracting them into computed properties solely for readability. Prefer keeping static class names inline for simplicity and performance. For dynamic or conditional classes, use Vue bindings (e.g., :class) to compose classes.

Applies to all Vue files in the repository (e.g., src/**/*.vue) where Tailwind utilities are used for static styling.

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-12-16T22:26:49.463Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7537
File: src/components/ui/button/Button.vue:17-17
Timestamp: 2025-12-16T22:26:49.463Z
Learning: In Vue 3.5+ with <script setup>, when using defineProps<Props>() with partial destructuring (e.g., const { as = 'button', class: customClass = '' } = defineProps<Props>() ), props that are not destructured (e.g., variant, size) stay accessible by name in the template scope. This pattern is valid: you can destructure only a subset of props for convenience while referencing the remaining props directly in template expressions. Apply this guideline to Vue components across the codebase (all .vue files).

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-12-22T21:36:08.369Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7649
File: src/platform/cloud/subscription/components/PricingTable.vue:185-201
Timestamp: 2025-12-22T21:36:08.369Z
Learning: In Vue components, avoid creating single-use variants for common UI components (e.g., Button and other shared components). Aim for reusable variants that cover multiple use cases. It’s acceptable to temporarily mix variant props with inline Tailwind classes when a styling need is unique to one place, but plan and consolidate into shared, reusable variants as patterns emerge across the codebase.

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2026-01-08T02:26:18.357Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7893
File: src/components/button/IconGroup.vue:5-6
Timestamp: 2026-01-08T02:26:18.357Z
Learning: In components that use the cn utility from '@/utils/tailwindUtil' with tailwind-merge, rely on the behavior that conflicting Tailwind classes are resolved by keeping the last one. For example, cn('base-classes bg-default', propClass) will have any conflicting background class from propClass override bg-default. This additive pattern is intentional and aligns with the shadcn-ui convention; ensure you document or review expectations accordingly in Vue components.

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-12-18T02:07:38.870Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7598
File: src/components/sidebar/tabs/AssetsSidebarTab.vue:131-131
Timestamp: 2025-12-18T02:07:38.870Z
Learning: Tailwind CSS v4 safe utilities (e.g., items-center-safe, justify-*-safe, place-*-safe) are allowed in Vue components under src/ and in story files. Do not flag these specific safe variants as invalid when reviewing code in src/**/*.vue or related stories.

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-12-18T21:15:46.862Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7603
File: src/components/queue/QueueOverlayHeader.vue:49-59
Timestamp: 2025-12-18T21:15:46.862Z
Learning: In the ComfyUI_frontend repository, for Vue components, do not add aria-label to buttons that have visible text content (e.g., buttons containing <span> text). The visible text provides the accessible name. Use aria-label only for elements without visible labels (e.g., icon-only buttons). If a button has no visible label, provide a clear aria-label or associate with an aria-labelledby describing its action.

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-12-21T01:06:02.786Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7649
File: src/components/graph/selectionToolbox/ColorPickerButton.vue:15-18
Timestamp: 2025-12-21T01:06:02.786Z
Learning: In Comfy-Org/ComfyUI_frontend, in Vue component files, when a filled icon is required (e.g., 'pi pi-circle-fill'), you may mix PrimeIcons with Lucide icons since Lucide lacks filled variants. This mixed usage is acceptable when one icon library does not provide an equivalent filled icon. Apply consistently across Vue components in the src directory where icons are used, and document the rationale when a mixed approach is chosen.

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-12-18T16:03:02.066Z

Learnt from: henrikvilhelmberglund
Repo: Comfy-Org/ComfyUI_frontend PR: 7617
File: src/components/actionbar/ComfyActionbar.vue:301-308
Timestamp: 2025-12-18T16:03:02.066Z
Learning: In the ComfyUI frontend queue system, useQueuePendingTaskCountStore().count indicates the number of tasks in the queue, where count = 1 means a single active/running task and count > 1 means there are pending tasks in addition to the active task. Therefore, in src/components/actionbar/ComfyActionbar.vue, enable the 'Clear Pending Tasks' button only when count > 1 to avoid clearing the currently running task. The active task should be canceled using the 'Cancel current run' button instead. This rule should be enforced via a conditional check on the queue count, with appropriate disabled/aria-disabled states for accessibility, and tests should verify behavior for count = 1 and count > 1.

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

🧬 Code graph analysis (1)

src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts (1)

src/scripts/app.ts (1)

• app (1772-1772)

🔇 Additional comments (2)

src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts (1)

46-46: No changes needed.

TipTap's type definitions (version ^2.10.4) properly type EditorView.dom as HTMLElement, not Element or Node. The explicit type annotation on line 46 is correct and consistent with TipTap's documented API usage pattern.

Likely an incorrect or invalid review comment.

src/components/graph/widgets/TextPreviewWidget.vue (1)

4-5: No action needed — the @pointerdown handler does not interfere with link clicks.

The handlePointer implementation only intercepts and prevents default behavior for:

• Middle mouse button clicks (button === 1)
• Space + left-drag panning (canvas.read_only && event.buttons === 1)
• Middle mouse panning (event.buttons === 4)

Regular left-click pointer events don't match any of these conditions, so the handler returns without calling preventDefault() or stopPropagation(), allowing browser default link behavior to proceed normally.

Likely an incorrect or invalid review comment.

[coderabbitai]

🧹 Nitpick | 🔵 Trivial

Consider refactoring the wheel handler for better maintainability.

The wheel event handler implements sophisticated logic that handles pinch-zoom, trackpad detection, horizontal/vertical scrolling, and canvas delegation. While the logic appears correct, the 50-line handler with multiple conditional branches could benefit from extraction into smaller, testable helper functions.

Consider extracting decision logic into focused helper functions:

♻️ Suggested refactoring approach

// Helper functions for wheel event routing decisions
function shouldPreventPinchZoom(event: WheelEvent): boolean {
  return event.ctrlKey
}

function isLikelyTrackpadGesture(deltaX: number, deltaY: number): boolean {
  return Math.abs(deltaX) > 0 || Math.abs(deltaY) < TRACKPAD_DETECTION_THRESHOLD
}

function shouldRouteToCanvas(
  event: WheelEvent,
  gesturesEnabled: boolean,
  isEditing: boolean,
  canScrollYMarkdown: boolean,
  canScrollYTextarea: boolean
): { route: boolean; allowDefault: boolean } {
  const { deltaX, deltaY } = event
  const isHorizontal = Math.abs(deltaX) > Math.abs(deltaY)
  const isLikelyTrackpad = isLikelyTrackpadGesture(deltaX, deltaY)

  // Pinch zoom always goes to canvas
  if (event.ctrlKey) {
    return { route: true, allowDefault: false }
  }

  // Trackpad gestures when enabled
  if (gesturesEnabled && isLikelyTrackpad) {
    return { route: true, allowDefault: false }
  }

  // Horizontal scrolling
  if (isHorizontal) {
    return { route: true, allowDefault: false }
  }

  // Vertical: allow local scroll if possible
  const canScroll = isEditing ? canScrollYTextarea : canScrollYMarkdown
  if (canScroll) {
    return { route: false, allowDefault: true }
  }

  // Default: route to canvas
  return { route: true, allowDefault: false }
}

// Then in the event handler:
inputEl.addEventListener('wheel', (event: WheelEvent) => {
  const gesturesEnabled = useSettingStore().get('LiteGraph.Pointer.TrackpadGestures')
  const canScrollYMarkdown = editorDom.scrollHeight > editorDom.clientHeight
  const canScrollYTextarea = textarea.scrollHeight > textarea.clientHeight
  const isEditing = inputEl.classList.contains('editing')

  const { route, allowDefault } = shouldRouteToCanvas(
    event,
    gesturesEnabled,
    isEditing,
    canScrollYMarkdown,
    canScrollYTextarea
  )

  if (!allowDefault) {
    event.preventDefault()
  }

  event.stopPropagation()

  if (route) {
    app.canvas.processMouseWheel(event)
  }
})

Benefits:

• Each helper function is testable in isolation
• The main event handler reads more declaratively
• Edge cases are easier to identify and fix
• Reduced cognitive complexity

🤖 Prompt for AI Agents

In @src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts
around lines 98 - 149, The wheel handler attached in inputEl.addEventListener is
large and should be split: extract shouldPreventPinchZoom(event: WheelEvent),
isLikelyTrackpadGesture(deltaX, deltaY) (using TRACKPAD_DETECTION_THRESHOLD),
and a shouldRouteToCanvas(event, gesturesEnabled, isEditing, canScrollYMarkdown,
canScrollYTextarea) that returns { route, allowDefault }; then replace the
inline logic with calls to these helpers and centralize
event.preventDefault()/event.stopPropagation() and the call to
app.canvas.processMouseWheel(event) based on the helpers' result so the main
handler is declarative and each helper is small and testable.

[coderabbitai]

🧹 Nitpick | 🔵 Trivial

Minor: Consider caching the gestures setting.

The useSettingStore().get('LiteGraph.Pointer.TrackpadGestures') call executes on every wheel event. While likely negligible, you could cache this value reactively if wheel events occur frequently during interactions.

⚡ Optional performance optimization

// At the top of addMarkdownWidget, after editor initialization:
const settingStore = useSettingStore()
// ... later in the wheel handler:
const gesturesEnabled = settingStore.get('LiteGraph.Pointer.TrackpadGestures')

Or use a reactive computed value if this composable becomes reactive in the future.

🤖 Prompt for AI Agents

In @src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts
around lines 99 - 101, The wheel handler repeatedly calls
useSettingStore().get('LiteGraph.Pointer.TrackpadGestures'), which can be
cached; capture useSettingStore() once (e.g., const settingStore =
useSettingStore()) near addMarkdownWidget/editor initialization and then read
settingStore.get('LiteGraph.Pointer.TrackpadGestures') inside the wheel handler
(or create a reactive/computed gesturesEnabled from settingStore) so the store
lookup isn't performed on every wheel event.

✅ Confirmed as addressed by @Myestery

[Myestery]

I will go with code rabbit here, lets cache this value once cos its a bit expensive to call

[coderabbitai]

@Myestery Great call! Here's how to implement the caching:

function addMarkdownWidget(
  node: LGraphNode,
  name: string,
  opts: { defaultVal: string }
) {
  TiptapMarkdown.configure({
    html: false,
    breaks: true,
    transformPastedText: true
  })
  const editor = new TiptapEditor({
    extensions: [
      TiptapStarterKit,
      TiptapMarkdown,
      TiptapLink,
      TiptapTable,
      TiptapTableCell,
      TiptapTableHeader,
      TiptapTableRow
    ],
    content: opts.defaultVal,
    editable: false
  })

  // Cache the settingStore once
  const settingStore = useSettingStore()

  const inputEl = editor.options.element as HTMLElement
  inputEl.classList.add('comfy-markdown')
  const textarea = document.createElement('textarea')
  inputEl.append(textarea)
  const editorDom: HTMLElement = editor.view.dom

  // ... rest of the function

  inputEl.addEventListener('wheel', (event: WheelEvent) => {
    // Use the cached settingStore
    const gesturesEnabled = settingStore.get(
      'LiteGraph.Pointer.TrackpadGestures'
    )
    // ... rest of the wheel handler
  })
}

This will avoid the store lookup overhead on every wheel event, which can fire very frequently during scrolling.

---

🧠 Learnings used

Learnt from: simula-r
Repo: Comfy-Org/ComfyUI_frontend PR: 7252
File: src/renderer/extensions/vueNodes/components/ImagePreview.vue:151-158
Timestamp: 2025-12-11T03:55:57.926Z
Learning: In src/renderer/extensions/vueNodes/components/ImagePreview.vue and LGraphNode.vue, keyboard navigation for image galleries should respond to node-level focus (via keyEvent injection from LGraphNode), not require focus within the image preview wrapper itself. This allows users to navigate the gallery with arrow keys immediately when the node is focused/selected.

---

If you found this review helpful, would you consider giving us a shout-out on X?

Thank you for using CodeRabbit!

[Myestery]

Let's cache the settings call and this will be good to go.
The new behaviour looks great

[kaalibro]

@Myestery Since the 'wheel' event handler code is identical for useMarkdownWidget.ts and useStringWidget.ts, should I also implement caching in useStringWidget.ts the same way in this PR?

[coderabbitai]

Actionable comments posted: 4

🤖 Fix all issues with AI agents

In @src/components/graph/widgets/TextPreviewWidget.vue:
- Around line 2-6: The preview div's wheel events are being unconditionally
forwarded to the canvas via canvasInteractions.handleWheel in legacy navigation
mode, which prevents vertical scrolling of long previews; to fix this either add
the opt-out attribute data-capture-wheel="true" to the TextPreviewWidget's root
div so the canvas handler will not capture wheel events for this element, or
modify the canvasInteractions.handleWheel implementation to detect and ignore
wheel events coming from elements inside TextPreviewWidget (e.g., by checking
event.target or walking up DOM for an element with a specific class or
attribute) so the div's native overflow-y-auto scrolling still works.

In @src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts:
- Around line 42-44: Register the wheel event listeners with explicit options {
passive: false } and ensure every canvas-routing branch calls
event.stopPropagation() just like the other branches to prevent double-handling;
find the addEventListener('wheel', ...) usages in useMarkdownWidget.ts
(including the occurrences around the commented locations ~101-105 and ~151-153)
and change the third parameter to { passive: false }, and in the last
canvas-routing branch add event.stopPropagation() alongside the existing
preventDefault() so all branches handle propagation consistently.
- Around line 16-17: The wheel handler currently stops propagation whenever the
area is scrollable, and the TRACKPAD_DETECTION_THRESHOLD uses raw delta values;
update the wheel handling logic (the onWheel / wheel event handler that
references isEditing, canScrollYTextarea, canScrollYMarkdown and calls
event.stopPropagation()) to first normalize event.deltaX / deltaY by
event.deltaMode (use 1 for lines, 16 for DOM_DELTA_PIXEL fallback) and then only
stop propagation when the scrollable element can actually scroll further in the
wheel direction (i.e., check current scrollTop/scrollHeight/clientHeight for
vertical boundaries and only call event.stopPropagation() if not at the top when
scrolling up or not at the bottom when scrolling down); also adjust
TRACKPAD_DETECTION_THRESHOLD to operate on normalized deltas and apply the same
fixed logic in the other occurrence around lines 101-153 so both handlers are
boundary-aware and deltaMode-normalized.

📜 Review details

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 88a255b and b7c638d.

📒 Files selected for processing (2)

• src/components/graph/widgets/TextPreviewWidget.vue
• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts

🧰 Additional context used

📓 Path-based instructions (12)

src/**/*.{vue,ts}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json

Leverage VueUse functions for performance-enhancing utilities

Files:

• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts
• src/components/graph/widgets/TextPreviewWidget.vue

src/**/*.ts

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safety

src/**/*.ts: Minimize the surface area (exported values) of each module and composable
Use es-toolkit for utility functions

Files:

• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts

src/**/{services,composables}/**/*.{ts,tsx}

📄 CodeRabbit inference engine (src/CLAUDE.md)

src/**/{services,composables}/**/*.{ts,tsx}: Use api.apiURL() for backend endpoints instead of constructing URLs directly
Use api.fileURL() for static file access instead of constructing URLs directly

Files:

• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts

src/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (src/CLAUDE.md)

src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase

src/**/*.{ts,tsx,vue}: Use separate import type statements; do not mix inline type imports in the same statement
Sort and group imports by plugin; run pnpm format before committing
Derive component types using vue-component-type-helpers (ComponentProps, ComponentSlots) instead of separate type files
Code should be well-designed with clear names for everything; write code that is expressive and self-documenting
Avoid redundant comments and clean up code as you go; comments should explain why, not what
Ask if there is a simpler way to implement functionality; refactor complex code to simplify it
Minimize nesting depth (e.g., if () { ... } or for () { ... }); watch for arrow anti-pattern
Watch out for code smells and refactor to avoid them
Never use any type; use proper TypeScript types
Never use as any type assertions; fix the underlying type issue instead
Indent with 2 spaces; use single quotes; no trailing semicolons; max line width 80 (per .prettierrc)
Complex type definitions used in multiple related places should be extracted and named for reuse
Implement proper error handling

Files:

• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts
• src/components/graph/widgets/TextPreviewWidget.vue

src/**/{composables,components}/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (src/CLAUDE.md)

Clean up subscriptions in state management to prevent memory leaks

Files:

• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts
• src/components/graph/widgets/TextPreviewWidget.vue

src/**/*.{vue,ts,tsx}

📄 CodeRabbit inference engine (src/CLAUDE.md)

Follow Vue 3 composition API style guide

Files:

• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts
• src/components/graph/widgets/TextPreviewWidget.vue

src/**/{components,composables}/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (src/CLAUDE.md)

Use vue-i18n for ALL user-facing strings by adding them to src/locales/en/main.json

Files:

• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts
• src/components/graph/widgets/TextPreviewWidget.vue

src/**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

src/**/*.{ts,tsx}: Keep functions short and functional; use function declarations instead of function expressions when possible
Avoid mutable state; prefer immutability and assignment at point of declaration
Favor pure functions, especially testable ones

Files:

• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts

src/**/*.vue

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventions

src/**/*.vue: Use Vue 3 Single File Components (SFCs) with Composition API only; never use Options API
Use <script setup lang="ts"> syntax for component logic
Use Tailwind 4 utility classes for styling; avoid <style> blocks in Vue components
Do not use the dark: Tailwind variant; use semantic values from style.css theme instead (e.g., bg-node-component-surface)
Use cn() utility from @/utils/tailwindUtil for merging class names; never use :class="[]" syntax
Never use !important or the ! prefix for Tailwind classes; find and fix interfering classes instead
Use Tailwind fraction utilities instead of arbitrary percentages (e.g., w-4/5 instead of w-[80%], w-1/2 instead of w-[50%])
Use Vue 3.5 TypeScript style default prop declaration with destructuring; avoid withDefaults and runtime props
Use defineModel for v-model bindings instead of separately defining props and emits
Prefer reactive props destructuring over const props = defineProps<...>
Define slots via template usage, not defineSlots
Use same-name shorthand for slot prop bindings (e.g., :isExpanded instead of :is-expanded="isExpanded")
Use ref for reactive state, computed() for computed properties, and watch/watchEffect for side effects
Avoid using ref and watch t...

Files:

• src/components/graph/widgets/TextPreviewWidget.vue

src/components/**/*.vue

📄 CodeRabbit inference engine (src/components/CLAUDE.md)

src/components/**/*.vue: Use setup() function in Vue 3 Composition API
Destructure props using Vue 3.5 style in Vue components
Use ref/reactive for state management in Vue 3 Composition API
Implement computed() for derived state in Vue 3 Composition API
Use provide/inject for dependency injection in Vue components
Prefer emit/@event-name for state changes over other communication patterns
Use defineExpose only for imperative operations (such as form.validate(), modal.open())
Replace PrimeVue Dropdown component with Select
Replace PrimeVue OverlayPanel component with Popover
Replace PrimeVue Calendar component with DatePicker
Replace PrimeVue InputSwitch component with ToggleSwitch
Replace PrimeVue Sidebar component with Drawer
Replace PrimeVue Chips component with AutoComplete with multiple enabled
Replace PrimeVue TabMenu component with Tabs without panels
Replace PrimeVue Steps component with Stepper without panels
Replace PrimeVue InlineMessage component with Message
Extract complex conditionals to computed properties
Implement cleanup for async operations in Vue components
Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Use Teleport/Suspense when needed for component rendering
Define proper props and emits definitions in Vue components

Name Vue components in PascalCase (e.g., MenuHamburger.vue)

Files:

• src/components/graph/widgets/TextPreviewWidget.vue

src/components/**/*.{vue,css}

📄 CodeRabbit inference engine (src/components/CLAUDE.md)

src/components/**/*.{vue,css}: Use Tailwind CSS only for styling (no custom CSS)
Use the correct tokens from style.css in the design system package

Files:

• src/components/graph/widgets/TextPreviewWidget.vue

src/components/**/*.{vue,ts,js}

📄 CodeRabbit inference engine (src/components/CLAUDE.md)

src/components/**/*.{vue,ts,js}: Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Use useIntersectionObserver for visibility detection instead of custom scroll handlers
Use vue-i18n for ALL UI strings

Files:

• src/components/graph/widgets/TextPreviewWidget.vue

🧠 Learnings (30)

📚 Learning: 2026-01-09T00:50:57.103Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-09T00:50:57.103Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Ask if there is a simpler way to implement functionality; refactor complex code to simplify it

Applied to files:

• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts

📚 Learning: 2026-01-09T00:50:57.103Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-09T00:50:57.103Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Watch out for code smells and refactor to avoid them

Applied to files:

• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts

📚 Learning: 2025-12-11T03:55:57.926Z

Learnt from: simula-r
Repo: Comfy-Org/ComfyUI_frontend PR: 7252
File: src/renderer/extensions/vueNodes/components/ImagePreview.vue:151-158
Timestamp: 2025-12-11T03:55:57.926Z
Learning: In src/renderer/extensions/vueNodes/components/ImagePreview.vue and LGraphNode.vue, keyboard navigation for image galleries should respond to node-level focus (via keyEvent injection from LGraphNode), not require focus within the image preview wrapper itself. This allows users to navigate the gallery with arrow keys immediately when the node is focused/selected.

Applied to files:

• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts
• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2026-01-09T00:50:57.103Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-09T00:50:57.103Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Minimize nesting depth (e.g., `if () { ... }` or `for () { ... }`); watch for arrow anti-pattern

Applied to files:

• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts

📚 Learning: 2025-12-09T03:39:54.501Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7169
File: src/platform/remote/comfyui/jobs/jobTypes.ts:1-107
Timestamp: 2025-12-09T03:39:54.501Z
Learning: In the ComfyUI_frontend project, Zod is on v3.x. Do not suggest Zod v4 standalone validators (z.uuid, z.ulid, z.cuid2, z.nanoid) until an upgrade to Zod 4 is performed. When reviewing TypeScript files (e.g., src/platform/remote/comfyui/jobs/jobTypes.ts) validate against Zod 3 capabilities and avoid introducing v4-specific features; flag any proposal to upgrade or incorporate v4-only validators and propose staying with compatible 3.x patterns.

Applied to files:

• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts

📚 Learning: 2025-12-13T11:03:11.264Z

Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7416
File: src/stores/imagePreviewStore.ts:5-7
Timestamp: 2025-12-13T11:03:11.264Z
Learning: In the ComfyUI_frontend repository, lint rules require keeping 'import type' statements separate from non-type imports, even if importing from the same module. Do not suggest consolidating them into a single import statement. Ensure type imports remain on their own line (import type { ... } from 'module') and regular imports stay on separate lines.

Applied to files:

• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts

📚 Learning: 2025-12-17T00:40:09.635Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7537
File: src/components/ui/button/Button.stories.ts:45-55
Timestamp: 2025-12-17T00:40:09.635Z
Learning: Prefer pure function declarations over function expressions (e.g., use function foo() { ... } instead of const foo = () => { ... }) for pure functions in the repository. Function declarations are more functional-leaning, offer better hoisting clarity, and can improve readability and tooling consistency. Apply this guideline across TypeScript files in Comfy-Org/ComfyUI_frontend, including story and UI component code, except where a function expression is semantically required (e.g., callbacks, higher-order functions with closures).

Applied to files:

• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts

📚 Learning: 2025-12-30T22:22:33.836Z

Learnt from: kaili-yang
Repo: Comfy-Org/ComfyUI_frontend PR: 7805
File: src/composables/useCoreCommands.ts:439-439
Timestamp: 2025-12-30T22:22:33.836Z
Learning: When accessing reactive properties from Pinia stores in TypeScript files, avoid using .value on direct property access (e.g., useStore().isOverlayExpanded). Pinia auto-wraps refs when accessed directly, returning the primitive value. The .value accessor is only needed when destructuring store properties or when using storeToRefs().

Applied to files:

• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts

📚 Learning: 2025-12-11T12:25:15.470Z

Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7358
File: src/components/dialog/content/signin/SignUpForm.vue:45-54
Timestamp: 2025-12-11T12:25:15.470Z
Learning: This repository uses CI automation to format code (pnpm format). Do not include manual formatting suggestions in code reviews for Comfy-Org/ComfyUI_frontend. If formatting issues are detected, rely on the CI formatter or re-run pnpm format. Focus reviews on correctness, readability, performance, accessibility, and maintainability rather than style formatting.

Applied to files:

• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts
• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.{vue,ts,js} : Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-12-18T20:39:30.137Z

Learnt from: jtydhr88
Repo: Comfy-Org/ComfyUI_frontend PR: 7621
File: src/components/load3d/Load3DScene.vue:4-4
Timestamp: 2025-12-18T20:39:30.137Z
Learning: In src/components/load3d/Load3DScene.vue, the scoped `<style>` block with `!important` declarations for the canvas element is necessary because Three.js dynamically creates the canvas with inline styles, preventing direct application of Tailwind classes. This is a valid exception to the Tailwind-only styling guideline.

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2026-01-09T00:50:57.103Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-09T00:50:57.103Z
Learning: Applies to src/**/*.vue : Use `ref` for reactive state, `computed()` for computed properties, and `watch`/`watchEffect` for side effects

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-11-24T19:47:02.860Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Utilize ref and reactive for reactive state

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use ref/reactive for state management in Vue 3 Composition API

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2026-01-09T00:50:57.103Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-09T00:50:57.103Z
Learning: Applies to src/**/*.vue : Avoid using `ref` and `watch` together if a `computed` would work instead

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2026-01-09T00:50:57.103Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-09T00:50:57.103Z
Learning: Applies to src/**/*.{vue,ts} : Leverage VueUse functions for performance-enhancing utilities

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Implement computed() for derived state in Vue 3 Composition API

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-11-24T19:47:02.860Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.{vue,ts} : Leverage VueUse functions for performance-enhancing styles

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-12-04T21:43:49.363Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7137
File: src/components/rightSidePanel/parameters/TabParameters.vue:10-0
Timestamp: 2025-12-04T21:43:49.363Z
Learning: Vue 3.5+ supports reactive props destructure in <script setup>. Destructuring props directly (e.g., `const { nodes } = defineProps<{ nodes: LGraphNode[] }>()`) maintains reactivity through compiler transformation. This is the recommended modern approach and does not require using `props.x` or `toRef`/`toRefs`.

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2026-01-09T00:50:57.103Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-09T00:50:57.103Z
Learning: Applies to src/**/*.vue : Be judicious with state additions: prefer props, avoid `computed` for simple values, use `computed` instead of `watch` for derived values

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-12-09T03:49:52.828Z

Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 6300
File: src/platform/updates/components/WhatsNewPopup.vue:5-13
Timestamp: 2025-12-09T03:49:52.828Z
Learning: In Vue files across the ComfyUI_frontend repo, when a button is needed, prefer the repo's common button components from src/components/button/ (IconButton.vue, TextButton.vue, IconTextButton.vue) over plain HTML <button> elements. These components wrap PrimeVue with the project’s design system styling. Use only the common button components for consistency and theming, and import them from src/components/button/ as needed.

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-12-09T21:40:12.361Z

Learnt from: benceruleanlu
Repo: Comfy-Org/ComfyUI_frontend PR: 7297
File: src/components/actionbar/ComfyActionbar.vue:33-43
Timestamp: 2025-12-09T21:40:12.361Z
Learning: In Vue single-file components, allow inline Tailwind CSS class strings for static classes and avoid extracting them into computed properties solely for readability. Prefer keeping static class names inline for simplicity and performance. For dynamic or conditional classes, use Vue bindings (e.g., :class) to compose classes.

Applies to all Vue files in the repository (e.g., src/**/*.vue) where Tailwind utilities are used for static styling.

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-12-16T22:26:49.463Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7537
File: src/components/ui/button/Button.vue:17-17
Timestamp: 2025-12-16T22:26:49.463Z
Learning: In Vue 3.5+ with <script setup>, when using defineProps<Props>() with partial destructuring (e.g., const { as = 'button', class: customClass = '' } = defineProps<Props>() ), props that are not destructured (e.g., variant, size) stay accessible by name in the template scope. This pattern is valid: you can destructure only a subset of props for convenience while referencing the remaining props directly in template expressions. Apply this guideline to Vue components across the codebase (all .vue files).

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-12-22T21:36:08.369Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7649
File: src/platform/cloud/subscription/components/PricingTable.vue:185-201
Timestamp: 2025-12-22T21:36:08.369Z
Learning: In Vue components, avoid creating single-use variants for common UI components (e.g., Button and other shared components). Aim for reusable variants that cover multiple use cases. It’s acceptable to temporarily mix variant props with inline Tailwind classes when a styling need is unique to one place, but plan and consolidate into shared, reusable variants as patterns emerge across the codebase.

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2026-01-08T02:26:18.357Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7893
File: src/components/button/IconGroup.vue:5-6
Timestamp: 2026-01-08T02:26:18.357Z
Learning: In components that use the cn utility from '@/utils/tailwindUtil' with tailwind-merge, rely on the behavior that conflicting Tailwind classes are resolved by keeping the last one. For example, cn('base-classes bg-default', propClass) will have any conflicting background class from propClass override bg-default. This additive pattern is intentional and aligns with the shadcn-ui convention; ensure you document or review expectations accordingly in Vue components.

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-12-18T02:07:38.870Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7598
File: src/components/sidebar/tabs/AssetsSidebarTab.vue:131-131
Timestamp: 2025-12-18T02:07:38.870Z
Learning: Tailwind CSS v4 safe utilities (e.g., items-center-safe, justify-*-safe, place-*-safe) are allowed in Vue components under src/ and in story files. Do not flag these specific safe variants as invalid when reviewing code in src/**/*.vue or related stories.

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-12-18T21:15:46.862Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7603
File: src/components/queue/QueueOverlayHeader.vue:49-59
Timestamp: 2025-12-18T21:15:46.862Z
Learning: In the ComfyUI_frontend repository, for Vue components, do not add aria-label to buttons that have visible text content (e.g., buttons containing <span> text). The visible text provides the accessible name. Use aria-label only for elements without visible labels (e.g., icon-only buttons). If a button has no visible label, provide a clear aria-label or associate with an aria-labelledby describing its action.

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-12-21T01:06:02.786Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7649
File: src/components/graph/selectionToolbox/ColorPickerButton.vue:15-18
Timestamp: 2025-12-21T01:06:02.786Z
Learning: In Comfy-Org/ComfyUI_frontend, in Vue component files, when a filled icon is required (e.g., 'pi pi-circle-fill'), you may mix PrimeIcons with Lucide icons since Lucide lacks filled variants. This mixed usage is acceptable when one icon library does not provide an equivalent filled icon. Apply consistently across Vue components in the src directory where icons are used, and document the rationale when a mixed approach is chosen.

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-12-18T16:03:02.066Z

Learnt from: henrikvilhelmberglund
Repo: Comfy-Org/ComfyUI_frontend PR: 7617
File: src/components/actionbar/ComfyActionbar.vue:301-308
Timestamp: 2025-12-18T16:03:02.066Z
Learning: In the ComfyUI frontend queue system, useQueuePendingTaskCountStore().count indicates the number of tasks in the queue, where count = 1 means a single active/running task and count > 1 means there are pending tasks in addition to the active task. Therefore, in src/components/actionbar/ComfyActionbar.vue, enable the 'Clear Pending Tasks' button only when count > 1 to avoid clearing the currently running task. The active task should be canceled using the 'Cancel current run' button instead. This rule should be enforced via a conditional check on the queue count, with appropriate disabled/aria-disabled states for accessibility, and tests should verify behavior for count = 1 and count > 1.

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

[coderabbitai]

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Search for useCanvasInteractions implementation
fd . --type=f -e ts -e tsx | xargs grep -l "useCanvasInteractions\|export.*useCanvasInteractions" | head -20

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 600

---

🏁 Script executed:

#!/bin/bash
# Find the TextPreviewWidget component file
find . -name "TextPreviewWidget.vue" -type f

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 122

---

🏁 Script executed:

#!/bin/bash
# Explore composables directory structure
fd . --type=f -e ts -path "*/composables/*" | head -30

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 238

---

🏁 Script executed:

#!/bin/bash
# Read the useCanvasInteractions composable
cat -n src/renderer/core/canvas/useCanvasInteractions.ts

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 5069

---

🏁 Script executed:

#!/bin/bash
# Read the TextPreviewWidget component
cat -n src/components/graph/widgets/TextPreviewWidget.vue

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 3749

---

In legacy navigation mode, wheel events are unconditionally forwarded to canvas, blocking local scroll despite overflow-y-auto.

The handleWheel function forwards all wheel events to the canvas in legacy mode (line 50-52), calling preventDefault() unconditionally. Since TextPreviewWidget doesn't use the [data-capture-wheel="true"] opt-out attribute, users cannot scroll long previews in legacy mode. Text selection/copy are unaffected (pointer events allow normal selection unless space+dragging).

Consider either: (1) adding data-capture-wheel="true" to the preview div to preserve scroll in all modes, or (2) adjusting canvas wheel handling to not block preview scrolling.

🤖 Prompt for AI Agents

In @src/components/graph/widgets/TextPreviewWidget.vue around lines 2 - 6, The
preview div's wheel events are being unconditionally forwarded to the canvas via
canvasInteractions.handleWheel in legacy navigation mode, which prevents
vertical scrolling of long previews; to fix this either add the opt-out
attribute data-capture-wheel="true" to the TextPreviewWidget's root div so the
canvas handler will not capture wheel events for this element, or modify the
canvasInteractions.handleWheel implementation to detect and ignore wheel events
coming from elements inside TextPreviewWidget (e.g., by checking event.target or
walking up DOM for an element with a specific class or attribute) so the div's
native overflow-y-auto scrolling still works.

[coderabbitai]

🧹 Nitpick | 🔵 Trivial

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# First, locate the files mentioned
find src -name "useMarkdownWidget.ts" -o -name "useStringWidget.ts" | head -20

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 215

---

🏁 Script executed:

#!/bin/bash
# Examine the useMarkdownWidget.ts file
cat -n src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 6248

---

🏁 Script executed:

#!/bin/bash
# Examine the useStringWidget.ts file
cat -n src/renderer/extensions/vueNodes/widgets/composables/useStringWidget.ts

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 5124

---

🏁 Script executed:

#!/bin/bash
# Search for wheel event handling and the specific setting read
rg -n "LiteGraph\.Pointer\.TrackpadGestures|TRACKPAD_DETECTION_THRESHOLD|isLikelyTrackpad" -A3 -B3 src/renderer/extensions/vueNodes/widgets

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 6259

---

🏁 Script executed:

#!/bin/bash
# Find all wheel event listeners in the widgets directory
rg -n "addEventListener.*wheel" src/renderer/extensions/vueNodes/widgets -A5 -B2

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 1755

---

Extract shared wheel-event routing logic and cache the trackpad setting in useMarkdownWidget.

The settingStore.get('LiteGraph.Pointer.TrackpadGestures') call at lines 103–105 fires on every wheel event (a hot path), and nearly identical wheel-routing logic exists in both useMarkdownWidget.ts (101–153) and useStringWidget.ts (56–105). Cache the setting value once and subscribe to changes with settingStore.$subscribe(...) to avoid repeated reads. Extract the shared detection and routing logic into a reusable helper to prevent divergence and reduce code duplication. Remember to unsubscribe on widget cleanup.

[coderabbitai]

⚠️ Potential issue | 🔴 Critical

Fix wheel routing at scroll boundaries (currently can still “trap” scroll) and account for deltaMode.

if (isEditing ? canScrollYTextarea : canScrollYMarkdown) { event.stopPropagation(); return } consumes all vertical wheel events whenever the area is scrollable, even when already at the top/bottom—so the canvas still won’t receive wheel in the “can’t scroll further” cases. Also, TRACKPAD_DETECTION_THRESHOLD uses raw deltaX/deltaY without considering event.deltaMode, which can make the heuristic device/browser-dependent.

Proposed fix (boundary-aware + deltaMode normalization)

 const TRACKPAD_DETECTION_THRESHOLD = 50

+function canScrollInDirection(
+  el: HTMLElement,
+  deltaY: number
+): boolean {
+  // deltaY > 0 => scroll down, deltaY < 0 => scroll up
+  if (deltaY > 0) {
+    return el.scrollTop + el.clientHeight < el.scrollHeight
+  }
+  if (deltaY < 0) {
+    return el.scrollTop > 0
+  }
+  return false
+}
+
+function normalizeWheelDeltaY(event: WheelEvent): number {
+  // 0: pixels, 1: lines, 2: pages
+  if (event.deltaMode === 1) return event.deltaY * 16
+  if (event.deltaMode === 2) return event.deltaY * window.innerHeight
+  return event.deltaY
+}
+
   inputEl.addEventListener('wheel', (event: WheelEvent) => {
     // Use the cached settingStore
     const gesturesEnabled = settingStore.get(
       'LiteGraph.Pointer.TrackpadGestures'
     )
     const deltaX = event.deltaX
-    const deltaY = event.deltaY
+    const deltaY = normalizeWheelDeltaY(event)

     const canScrollYMarkdown = editorDom.scrollHeight > editorDom.clientHeight
     const canScrollYTextarea = textarea.scrollHeight > textarea.clientHeight
     const isHorizontal = Math.abs(deltaX) > Math.abs(deltaY)
@@
     const isEditing = inputEl.classList.contains('editing')
-    if (isEditing ? canScrollYTextarea : canScrollYMarkdown) {
-      event.stopPropagation()
-      return
-    }
+    const scrollEl = (isEditing ? textarea : editorDom) as unknown as HTMLElement
+    const canScrollY = isEditing ? canScrollYTextarea : canScrollYMarkdown
+    if (canScrollY && canScrollInDirection(scrollEl, deltaY)) {
+      event.stopPropagation()
+      return
+    }

     // If textarea can't scroll vertically, pass to canvas
     event.preventDefault()
+    event.stopPropagation()
     app.canvas.processMouseWheel(event)
   })

Also applies to: 101-153

🤖 Prompt for AI Agents

In @src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts
around lines 16 - 17, The wheel handler currently stops propagation whenever the
area is scrollable, and the TRACKPAD_DETECTION_THRESHOLD uses raw delta values;
update the wheel handling logic (the onWheel / wheel event handler that
references isEditing, canScrollYTextarea, canScrollYMarkdown and calls
event.stopPropagation()) to first normalize event.deltaX / deltaY by
event.deltaMode (use 1 for lines, 16 for DOM_DELTA_PIXEL fallback) and then only
stop propagation when the scrollable element can actually scroll further in the
wheel direction (i.e., check current scrollTop/scrollHeight/clientHeight for
vertical boundaries and only call event.stopPropagation() if not at the top when
scrolling up or not at the bottom when scrolling down); also adjust
TRACKPAD_DETECTION_THRESHOLD to operate on normalized deltas and apply the same
fixed logic in the other occurrence around lines 101-153 so both handlers are
boundary-aware and deltaMode-normalized.

[coderabbitai]

⚠️ Potential issue | 🟠 Major

Make wheel listener explicitly non-passive and keep propagation handling consistent.

You call preventDefault() in multiple branches, so it’s safer to register the wheel listener with { passive: false }. Also the last branch currently doesn’t stopPropagation(), unlike the other canvas-routing branches, risking double-handling by other listeners.

Proposed fix (listener options + consistent stopPropagation)

-  inputEl.addEventListener('wheel', (event: WheelEvent) => {
+  inputEl.addEventListener('wheel', (event: WheelEvent) => {
     ...
-    event.preventDefault()
-    app.canvas.processMouseWheel(event)
-  })
+    event.preventDefault()
+    event.stopPropagation()
+    app.canvas.processMouseWheel(event)
+  }, { passive: false })

Also applies to: 101-105, 151-153

🤖 Prompt for AI Agents

In @src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts
around lines 42 - 44, Register the wheel event listeners with explicit options {
passive: false } and ensure every canvas-routing branch calls
event.stopPropagation() just like the other branches to prevent double-handling;
find the addEventListener('wheel', ...) usages in useMarkdownWidget.ts
(including the occurrences around the commented locations ~101-105 and ~151-153)
and change the third parameter to { passive: false }, and in the last
canvas-routing branch add event.stopPropagation() alongside the existing
preventDefault() so all branches handle propagation consistently.

[DrJKL]

@Myestery Since the 'wheel' event handler code is identical for useMarkdownWidget.ts and useStringWidget.ts, should I also implement caching in useStringWidget.ts the same way in this PR?

Or we can open an issue to follow-up.

[github-actions]

Bundle Size Report

Summary

• Raw size: 17.6 MB baseline 18.8 MB — 🟢 -1.17 MB
• Gzip: 3.6 MB baseline 3.84 MB — 🟢 -237 kB
• Brotli: 2.75 MB baseline 2.93 MB — 🟢 -184 kB
• Bundles: 94 current • 94 baseline • 90 added / 90 removed

Category Glance
Other 🟢 -1.13 MB (3.6 MB) · Panels & Settings 🟢 -35.3 kB (302 kB) · App Entry Points 🟢 -5.48 kB (3.24 MB) · UI Components 🟢 -1.46 kB (198 kB) · Graph Workspace 🔴 +7 B (1.05 MB) · Vendor & Third-Party ⚪ 0 B (9.19 MB) · + 3 more

Per-category breakdown

App Entry Points — 3.24 MB (baseline 3.25 MB) • 🟢 -5.48 kB

Main entry bundles and manifests

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
assets/index-CGJIy6kS.js (removed)	3.05 MB	—	🟢 -3.05 MB	🟢 -641 kB	🟢 -487 kB
assets/index-2xuJjp5B.js (new)	—	3.05 MB	🔴 +3.05 MB	🔴 +640 kB	🔴 +486 kB
assets/index-CaDHVXKM.js (new)	—	194 kB	🔴 +194 kB	🔴 +42.3 kB	🔴 +35.1 kB
assets/index-CAqnHJ9W.js (removed)	194 kB	—	🟢 -194 kB	🟢 -42.3 kB	🟢 -35.2 kB
assets/index-68eWBmZV.js (removed)	345 B	—	🟢 -345 B	🟢 -246 B	🟢 -239 B
assets/index-DrQirrBk.js (new)	—	345 B	🔴 +345 B	🔴 +244 B	🔴 +202 B

Status: 3 added / 3 removed

Graph Workspace — 1.05 MB (baseline 1.05 MB) • 🔴 +7 B

Graph editor runtime, canvas, workflow orchestration

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
assets/GraphView-YfZPrwIM.js (new)	—	1.05 MB	🔴 +1.05 MB	🔴 +203 kB	🔴 +154 kB
assets/GraphView-CYupGKe5.js (removed)	1.05 MB	—	🟢 -1.05 MB	🟢 -203 kB	🟢 -154 kB

Status: 1 added / 1 removed

Views & Navigation — 6.63 kB (baseline 6.63 kB) • ⚪ 0 B

Top-level views, pages, and routed surfaces

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
assets/UserSelectView-CvSHEdA7.js (new)	—	6.63 kB	🔴 +6.63 kB	🔴 +2.14 kB	🔴 +1.9 kB
assets/UserSelectView-JPS7Fvyj.js (removed)	6.63 kB	—	🟢 -6.63 kB	🟢 -2.15 kB	🟢 -1.9 kB

Status: 1 added / 1 removed

Panels & Settings — 302 kB (baseline 337 kB) • 🟢 -35.3 kB

Configuration panels, inspectors, and settings screens

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
assets/settings-DiVjuKQX.js (removed)	34.4 kB	—	🟢 -34.4 kB	🟢 -8.07 kB	🟢 -6.82 kB
assets/settings-CjlRFMdL.js (new)	—	32.8 kB	🔴 +32.8 kB	🔴 +7.65 kB	🔴 +6.43 kB
assets/settings-DKkx6nFR.js (removed)	28.2 kB	—	🟢 -28.2 kB	🟢 -6.88 kB	🟢 -5.75 kB
assets/settings-y_-zNlA6.js (removed)	27.5 kB	—	🟢 -27.5 kB	🟢 -7.32 kB	🟢 -6.3 kB
assets/settings-DkGwvylK.js (new)	—	26.9 kB	🔴 +26.9 kB	🔴 +6.5 kB	🔴 +5.43 kB
assets/settings-pR7Ue3ei.js (removed)	26.7 kB	—	🟢 -26.7 kB	🟢 -6.95 kB	🟢 -6.26 kB
assets/settings-BIdKi-OT.js (new)	—	26.2 kB	🔴 +26.2 kB	🔴 +6.92 kB	🔴 +5.97 kB
assets/settings-CtIClcWI.js (removed)	26 kB	—	🟢 -26 kB	🟢 -6.84 kB	🟢 -6.18 kB
assets/settings-DJiF1Y59.js (removed)	25.8 kB	—	🟢 -25.8 kB	🟢 -6.7 kB	🟢 -5.88 kB
assets/settings-ByL6gy5c.js (new)	—	25.4 kB	🔴 +25.4 kB	🔴 +6.56 kB	🔴 +5.91 kB
assets/settings-BbW1wrcp.js (removed)	25.2 kB	—	🟢 -25.2 kB	🟢 -6.55 kB	🟢 -5.88 kB
assets/LegacyCreditsPanel-CLv5l7Nq.js (removed)	25.1 kB	—	🟢 -25.1 kB	🟢 -5.74 kB	🟢 -5.01 kB
assets/LegacyCreditsPanel-kuJ5_shT.js (new)	—	25.1 kB	🔴 +25.1 kB	🔴 +5.74 kB	🔴 +4.99 kB
assets/settings-DX5qVgIQ.js (removed)	24.9 kB	—	🟢 -24.9 kB	🟢 -6.95 kB	🟢 -5.96 kB
assets/settings-Dyd027Dx.js (new)	—	24.7 kB	🔴 +24.7 kB	🔴 +6.47 kB	🔴 +5.83 kB
assets/settings-Bu3OR-lX.js (new)	—	24.6 kB	🔴 +24.6 kB	🔴 +6.32 kB	🔴 +5.55 kB
assets/settings-xx2Yb6R2.js (new)	—	23.8 kB	🔴 +23.8 kB	🔴 +6.56 kB	🔴 +5.63 kB
assets/settings-D_f3uAqO.js (removed)	22.4 kB	—	🟢 -22.4 kB	🟢 -6.83 kB	🟢 -5.67 kB
assets/settings-wwBxqLH5.js (new)	—	21.3 kB	🔴 +21.3 kB	🔴 +6.46 kB	🔴 +5.35 kB
assets/KeybindingPanel-DTwyqLPZ.js (new)	—	14.8 kB	🔴 +14.8 kB	🔴 +3.57 kB	🔴 +3.12 kB
assets/KeybindingPanel-PJBasDD7.js (removed)	14.8 kB	—	🟢 -14.8 kB	🟢 -3.58 kB	🟢 -3.12 kB
assets/ExtensionPanel-BvPeiyvJ.js (removed)	11.1 kB	—	🟢 -11.1 kB	🟢 -2.62 kB	🟢 -2.3 kB
assets/ExtensionPanel-cYNjLDkz.js (new)	—	11.1 kB	🔴 +11.1 kB	🔴 +2.62 kB	🔴 +2.3 kB
assets/AboutPanel-B9--xgaT.js (removed)	9.16 kB	—	🟢 -9.16 kB	🟢 -2.46 kB	🟢 -2.21 kB
assets/AboutPanel-BfkK3W0_.js (new)	—	9.16 kB	🔴 +9.16 kB	🔴 +2.46 kB	🔴 +2.21 kB
assets/ServerConfigPanel-B8wbyxHX.js (new)	—	7.51 kB	🔴 +7.51 kB	🔴 +2.04 kB	🔴 +1.81 kB
assets/ServerConfigPanel-iRHTIe0k.js (removed)	7.51 kB	—	🟢 -7.51 kB	🟢 -2.04 kB	🟢 -1.81 kB
assets/UserPanel-CrCJ5XIG.js (removed)	6.88 kB	—	🟢 -6.88 kB	🟢 -1.79 kB	🟢 -1.57 kB
assets/UserPanel-gJAbmihP.js (new)	—	6.88 kB	🔴 +6.88 kB	🔴 +1.79 kB	🔴 +1.57 kB
assets/settings-BhbWhsRg.js (new)	—	101 B	🔴 +101 B	🔴 +107 B	🔴 +84 B
assets/settings-MzsBgiwB.js	21.7 kB	21.7 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B

Status: 15 added / 15 removed

UI Components — 198 kB (baseline 199 kB) • 🟢 -1.46 kB

Reusable component library chunks

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
assets/LazyImage.vue_vue_type_script_setup_true_lang-CxJdNUUK.js (removed)	64.4 kB	—	🟢 -64.4 kB	🟢 -13.1 kB	🟢 -11.4 kB
assets/LazyImage.vue_vue_type_script_setup_true_lang-CH7Yz9x_.js (new)	—	63 kB	🔴 +63 kB	🔴 +12.9 kB	🔴 +11.2 kB
assets/Load3D.vue_vue_type_script_setup_true_lang-BuJgBBaa.js (new)	—	56.4 kB	🔴 +56.4 kB	🔴 +8.78 kB	🔴 +7.53 kB
assets/Load3D.vue_vue_type_script_setup_true_lang-Dt0MmFuw.js (removed)	56.4 kB	—	🟢 -56.4 kB	🟢 -8.78 kB	🟢 -7.54 kB
assets/WidgetSelect.vue_vue_type_script_setup_true_lang-DiO8yrJa.js (removed)	49 kB	—	🟢 -49 kB	🟢 -10.6 kB	🟢 -9.14 kB
assets/WidgetSelect.vue_vue_type_script_setup_true_lang-DpR55ZZn.js (new)	—	49 kB	🔴 +49 kB	🔴 +10.5 kB	🔴 +9.15 kB
assets/WidgetInputNumber.vue_vue_type_script_setup_true_lang-Cclsg1IM.js (removed)	10.9 kB	—	🟢 -10.9 kB	🟢 -2.89 kB	🟢 -2.56 kB
assets/WidgetInputNumber.vue_vue_type_script_setup_true_lang-Dpu-bRIk.js (new)	—	10.9 kB	🔴 +10.9 kB	🔴 +2.89 kB	🔴 +2.55 kB
assets/ComfyQueueButton-BMqQfvO1.js (new)	—	8.83 kB	🔴 +8.83 kB	🔴 +2.57 kB	🔴 +2.29 kB
assets/ComfyQueueButton-N1RFHz6g.js (removed)	8.83 kB	—	🟢 -8.83 kB	🟢 -2.58 kB	🟢 -2.3 kB
assets/WidgetWithControl.vue_vue_type_script_setup_true_lang-BneNapIC.js (new)	—	3.72 kB	🔴 +3.72 kB	🔴 +1.45 kB	🔴 +1.32 kB
assets/WidgetWithControl.vue_vue_type_script_setup_true_lang-CwwoNaCU.js (removed)	3.72 kB	—	🟢 -3.72 kB	🟢 -1.46 kB	🟢 -1.32 kB
assets/WidgetButton-B5M4v57B.js (new)	—	2.21 kB	🔴 +2.21 kB	🔴 +995 B	🔴 +905 B
assets/WidgetButton-C9wgUoXo.js (removed)	2.21 kB	—	🟢 -2.21 kB	🟢 -996 B	🟢 -894 B
assets/WidgetLayoutField.vue_vue_type_script_setup_true_lang-DcSPJyqE.js (new)	—	2.14 kB	🔴 +2.14 kB	🔴 +890 B	🔴 +770 B
assets/WidgetLayoutField.vue_vue_type_script_setup_true_lang-Ds3yUJWY.js (removed)	2.14 kB	—	🟢 -2.14 kB	🟢 -891 B	🟢 -771 B
assets/UserAvatar.vue_vue_type_script_setup_true_lang-CeCwbTE5.js (new)	—	1.34 kB	🔴 +1.34 kB	🔴 +687 B	🔴 +597 B
assets/UserAvatar.vue_vue_type_script_setup_true_lang-DIK87nsO.js (removed)	1.34 kB	—	🟢 -1.34 kB	🟢 -687 B	🟢 -593 B

Status: 9 added / 9 removed

Data & Services — 12.5 kB (baseline 12.5 kB) • ⚪ 0 B

Stores, services, APIs, and repositories

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
assets/keybindingService-CGSX2-Hz.js (new)	—	7.51 kB	🔴 +7.51 kB	🔴 +1.83 kB	🔴 +1.57 kB
assets/keybindingService-QcPgB-QQ.js (removed)	7.51 kB	—	🟢 -7.51 kB	🟢 -1.83 kB	🟢 -1.57 kB
assets/serverConfigStore-B2t_j388.js (removed)	2.83 kB	—	🟢 -2.83 kB	🟢 -908 B	🟢 -789 B
assets/serverConfigStore-CIQxbNDP.js (new)	—	2.83 kB	🔴 +2.83 kB	🔴 +907 B	🔴 +789 B
assets/audioService-CLaWTaZH.js (removed)	2.2 kB	—	🟢 -2.2 kB	🟢 -962 B	🟢 -824 B
assets/audioService-DEazn-iJ.js (new)	—	2.2 kB	🔴 +2.2 kB	🔴 +961 B	🔴 +821 B

Status: 3 added / 3 removed

Utilities & Hooks — 1.41 kB (baseline 1.41 kB) • ⚪ 0 B

Helpers, composables, and utility bundles

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
assets/audioUtils-DeOeRExx.js (removed)	1.41 kB	—	🟢 -1.41 kB	🟢 -651 B	🟢 -547 B
assets/audioUtils-DWnDwn7Q.js (new)	—	1.41 kB	🔴 +1.41 kB	🔴 +651 B	🔴 +554 B

Status: 1 added / 1 removed

Vendor & Third-Party — 9.19 MB (baseline 9.19 MB) • ⚪ 0 B

External libraries and shared vendor chunks

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
assets/vendor-other-BFut6aiM.js (new)	—	3.9 MB	🔴 +3.9 MB	🔴 +848 kB	🔴 +678 kB
assets/vendor-other-CTAuztsb.js (removed)	3.9 MB	—	🟢 -3.9 MB	🟢 -848 kB	🟢 -678 kB
assets/vendor-three-B_f9r0GW.js (removed)	2.08 MB	—	🟢 -2.08 MB	🟢 -430 kB	🟢 -308 kB
assets/vendor-three-DLCc9JZY.js (new)	—	2.08 MB	🔴 +2.08 MB	🔴 +430 kB	🔴 +308 kB
assets/vendor-primevue-ByQ7Bmb6.js (new)	—	1.95 MB	🔴 +1.95 MB	🔴 +333 kB	🔴 +201 kB
assets/vendor-primevue-VcXE4r8X.js (removed)	1.95 MB	—	🟢 -1.95 MB	🟢 -333 kB	🟢 -201 kB
assets/vendor-chart-CocMNjJK.js (new)	—	452 kB	🔴 +452 kB	🔴 +99 kB	🔴 +81 kB
assets/vendor-chart-DUP4WQ_9.js (removed)	452 kB	—	🟢 -452 kB	🟢 -99 kB	🟢 -81 kB
assets/vendor-tiptap-B8b7Kqfl.js (removed)	232 kB	—	🟢 -232 kB	🟢 -45.7 kB	🟢 -37.7 kB
assets/vendor-tiptap-Dfyk4vcr.js (new)	—	232 kB	🔴 +232 kB	🔴 +45.7 kB	🔴 +37.7 kB
assets/vendor-vue-BggM5WRa.js (removed)	160 kB	—	🟢 -160 kB	🟢 -37 kB	🟢 -31.3 kB
assets/vendor-vue-CxnLir5q.js (new)	—	160 kB	🔴 +160 kB	🔴 +37 kB	🔴 +31.3 kB
assets/vendor-xterm-BF8peZ5_.js	420 kB	420 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B

Status: 6 added / 6 removed

Other — 3.6 MB (baseline 4.73 MB) • 🟢 -1.13 MB

Bundles that do not match a named category

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
assets/nodeDefs-JuuXdMpv.js (removed)	391 kB	—	🟢 -391 kB	🟢 -57.8 kB	🟢 -40.8 kB
assets/nodeDefs-C6xl5-mL.js (removed)	358 kB	—	🟢 -358 kB	🟢 -54 kB	🟢 -39 kB
assets/nodeDefs-BGwoeek4.js (removed)	329 kB	—	🟢 -329 kB	🟢 -52.3 kB	🟢 -37.6 kB
assets/nodeDefs-CvmVDWYd.js (new)	—	323 kB	🔴 +323 kB	🔴 +47.7 kB	🔴 +33.9 kB
assets/nodeDefs-Du8VrAwA.js (removed)	320 kB	—	🟢 -320 kB	🟢 -51.1 kB	🟢 -37.3 kB
assets/nodeDefs-jjlLVrIs.js (removed)	317 kB	—	🟢 -317 kB	🟢 -51 kB	🟢 -38.3 kB
assets/nodeDefs-B-XzzBeS.js (removed)	317 kB	—	🟢 -317 kB	🟢 -49.7 kB	🟢 -37.6 kB
assets/nodeDefs-l2Y20bod.js (removed)	314 kB	—	🟢 -314 kB	🟢 -48.8 kB	🟢 -36.7 kB
assets/nodeDefs-CRZGOJB7.js (removed)	310 kB	—	🟢 -310 kB	🟢 -47.9 kB	🟢 -36.1 kB
assets/nodeDefs-Dz-0ZIBN.js (new)	—	297 kB	🔴 +297 kB	🔴 +44.8 kB	🔴 +32.3 kB
assets/nodeDefs-JQwk1kgy.js (removed)	292 kB	—	🟢 -292 kB	🟢 -50 kB	🟢 -36 kB
assets/nodeDefs-D8-Yzlzh.js (removed)	289 kB	—	🟢 -289 kB	🟢 -48.8 kB	🟢 -34.7 kB
assets/nodeDefs-BDbge6_f.js (new)	—	279 kB	🔴 +279 kB	🔴 +47 kB	🔴 +33.6 kB
assets/nodeDefs-BIckSVgU.js (new)	—	273 kB	🔴 +273 kB	🔴 +43.1 kB	🔴 +31.2 kB
assets/nodeDefs-D_wreoPJ.js (new)	—	267 kB	🔴 +267 kB	🔴 +42.3 kB	🔴 +31.1 kB
assets/nodeDefs-VZsNmhG7.js (new)	—	264 kB	🔴 +264 kB	🔴 +42 kB	🔴 +31.7 kB
assets/nodeDefs-BiYpVi7D.js (new)	—	263 kB	🔴 +263 kB	🔴 +41 kB	🔴 +31.2 kB
assets/nodeDefs-aW9En70v.js (new)	—	260 kB	🔴 +260 kB	🔴 +40.1 kB	🔴 +30.4 kB
assets/nodeDefs-CCEXtYfM.js (new)	—	243 kB	🔴 +243 kB	🔴 +41.3 kB	🔴 +29.9 kB
assets/main-7lTF3od4.js (removed)	148 kB	—	🟢 -148 kB	🟢 -39.3 kB	🟢 -31.6 kB
assets/main-BQbZqz2p.js (removed)	128 kB	—	🟢 -128 kB	🟢 -35.4 kB	🟢 -28.7 kB
assets/main-Byq_ZSjS.js (removed)	122 kB	—	🟢 -122 kB	🟢 -35.2 kB	🟢 -28.7 kB
assets/main-CzXbUjyx.js (removed)	112 kB	—	🟢 -112 kB	🟢 -34.1 kB	🟢 -29.1 kB
assets/main-OzGsrlqJ.js (new)	—	112 kB	🔴 +112 kB	🔴 +30.3 kB	🔴 +24.6 kB
assets/main-BKj_6mJM.js (removed)	109 kB	—	🟢 -109 kB	🟢 -33.9 kB	🟢 -28 kB
assets/main-B2EzieSY.js (removed)	108 kB	—	🟢 -108 kB	🟢 -33.3 kB	🟢 -28.2 kB
assets/main-B9UYJSy5.js (removed)	106 kB	—	🟢 -106 kB	🟢 -33.5 kB	🟢 -28.6 kB
assets/main-CCgU1dqT.js (removed)	106 kB	—	🟢 -106 kB	🟢 -33 kB	🟢 -28.3 kB
assets/main-Bdc58rJq.js (new)	—	97.1 kB	🔴 +97.1 kB	🔴 +27 kB	🔴 +22.2 kB
assets/main-CeY1eBVB.js (removed)	94.4 kB	—	🟢 -94.4 kB	🟢 -33 kB	🟢 -26.8 kB
assets/main-CM3nY77t.js (removed)	93.7 kB	—	🟢 -93.7 kB	🟢 -33.1 kB	🟢 -26.6 kB
assets/main-DLHyaEcz.js (new)	—	92.1 kB	🔴 +92.1 kB	🔴 +27 kB	🔴 +22.3 kB
assets/main-JzWMbEh0.js (new)	—	91.2 kB	🔴 +91.2 kB	🔴 +32.3 kB	🔴 +25.9 kB
assets/main-CAL83XT3.js (new)	—	84.6 kB	🔴 +84.6 kB	🔴 +26 kB	🔴 +22.5 kB
assets/main-CHLLfvpG.js (new)	—	82.4 kB	🔴 +82.4 kB	🔴 +26.1 kB	🔴 +21.7 kB
assets/main-C9ZJBRdI.js (new)	—	81.5 kB	🔴 +81.5 kB	🔴 +25.6 kB	🔴 +21.7 kB
assets/main-O7KfJeMO.js (new)	—	79.9 kB	🔴 +79.9 kB	🔴 +25.6 kB	🔴 +22.1 kB
assets/main-DDqR5EuX.js (new)	—	71.3 kB	🔴 +71.3 kB	🔴 +25.2 kB	🔴 +20.8 kB
assets/SubscriptionRequiredDialogContent-K04AyA1K.js (new)	—	29.3 kB	🔴 +29.3 kB	🔴 +6.51 kB	🔴 +5.64 kB
assets/SubscriptionRequiredDialogContent-U3_3QKM8.js (removed)	29.3 kB	—	🟢 -29.3 kB	🟢 -6.51 kB	🟢 -5.66 kB
assets/WidgetRecordAudio-2AajoG9_.js (new)	—	20.4 kB	🔴 +20.4 kB	🔴 +5.23 kB	🔴 +4.64 kB
assets/WidgetRecordAudio-DKvLhaJl.js (removed)	20.4 kB	—	🟢 -20.4 kB	🟢 -5.24 kB	🟢 -4.63 kB
assets/commands-BtYX0Lg9.js (removed)	17.7 kB	—	🟢 -17.7 kB	🟢 -3.43 kB	🟢 -2.81 kB
assets/commands-DLFlLaoZ.js (removed)	16.4 kB	—	🟢 -16.4 kB	🟢 -3.14 kB	🟢 -2.56 kB
assets/commands-edqUNgZp.js (removed)	16 kB	—	🟢 -16 kB	🟢 -3.21 kB	🟢 -2.68 kB
assets/commands-DalfIW5f.js (new)	—	15.9 kB	🔴 +15.9 kB	🔴 +3.07 kB	🔴 +2.5 kB
assets/commands-DDahbUT-.js (removed)	15.7 kB	—	🟢 -15.7 kB	🟢 -2.98 kB	🟢 -2.64 kB
assets/commands-DlbDMAz3.js (removed)	15.2 kB	—	🟢 -15.2 kB	🟢 -2.95 kB	🟢 -2.59 kB
assets/commands-CyGop0zh.js (removed)	15.1 kB	—	🟢 -15.1 kB	🟢 -2.87 kB	🟢 -2.5 kB
assets/commands-zgiVm_G2.js (removed)	15.1 kB	—	🟢 -15.1 kB	🟢 -2.82 kB	🟢 -2.49 kB
assets/commands-CXF6rcF5.js (removed)	14.9 kB	—	🟢 -14.9 kB	🟢 -3.08 kB	🟢 -2.54 kB
assets/commands-COSt-Bjx.js (new)	—	14.9 kB	🔴 +14.9 kB	🔴 +2.81 kB	🔴 +2.28 kB
assets/commands-CcfGaui5.js (new)	—	14.4 kB	🔴 +14.4 kB	🔴 +2.88 kB	🔴 +2.39 kB
assets/commands-SQ5j-1oJ.js (removed)	14.3 kB	—	🟢 -14.3 kB	🟢 -3.02 kB	🟢 -2.41 kB
assets/commands-CoH2DJa6.js (new)	—	14.2 kB	🔴 +14.2 kB	🔴 +2.66 kB	🔴 +2.35 kB
assets/commands-BwenEAzL.js (removed)	14.2 kB	—	🟢 -14.2 kB	🟢 -2.99 kB	🟢 -2.33 kB
assets/commands-bTEY9Mp6.js (new)	—	13.8 kB	🔴 +13.8 kB	🔴 +2.91 kB	🔴 +2.28 kB
assets/commands-DwSJL865.js (new)	—	13.7 kB	🔴 +13.7 kB	🔴 +2.63 kB	🔴 +2.3 kB
assets/commands-CisfgZf5.js (new)	—	13.7 kB	🔴 +13.7 kB	🔴 +2.56 kB	🔴 +2.24 kB
assets/commands-DfTl0eCm.js (new)	—	13.5 kB	🔴 +13.5 kB	🔴 +2.77 kB	🔴 +2.29 kB
assets/AudioPreviewPlayer-Bz8Az2ET.js (new)	—	13.3 kB	🔴 +13.3 kB	🔴 +3.35 kB	🔴 +2.99 kB
assets/AudioPreviewPlayer-CrdvRHv9.js (removed)	13.3 kB	—	🟢 -13.3 kB	🟢 -3.35 kB	🟢 -3 kB
assets/commands-CkU12Foh.js (new)	—	13 kB	🔴 +13 kB	🔴 +2.68 kB	🔴 +2.16 kB
assets/ValueControlPopover-D0yod08K.js (removed)	5.49 kB	—	🟢 -5.49 kB	🟢 -1.71 kB	🟢 -1.51 kB
assets/ValueControlPopover-DB8pG8Nl.js (new)	—	5.49 kB	🔴 +5.49 kB	🔴 +1.71 kB	🔴 +1.52 kB
assets/WidgetGalleria-BbQJ-xiR.js (new)	—	4.1 kB	🔴 +4.1 kB	🔴 +1.45 kB	🔴 +1.3 kB
assets/WidgetGalleria-mA4GBYlc.js (removed)	4.1 kB	—	🟢 -4.1 kB	🟢 -1.45 kB	🟢 -1.31 kB
assets/WidgetColorPicker-B4W44OZo.js (removed)	3.41 kB	—	🟢 -3.41 kB	🟢 -1.39 kB	🟢 -1.24 kB
assets/WidgetColorPicker-s-ylWif9.js (new)	—	3.41 kB	🔴 +3.41 kB	🔴 +1.38 kB	🔴 +1.23 kB
assets/WidgetImageCompare-BpH9qHbL.js (removed)	3.21 kB	—	🟢 -3.21 kB	🟢 -1.1 kB	🟢 -979 B
assets/WidgetImageCompare-uq92H0rB.js (new)	—	3.21 kB	🔴 +3.21 kB	🔴 +1.1 kB	🔴 +953 B
assets/WidgetTextarea-D13iYN45.js (removed)	3.08 kB	—	🟢 -3.08 kB	🟢 -1.22 kB	🟢 -1.08 kB
assets/WidgetTextarea-DHgkSzDT.js (new)	—	3.08 kB	🔴 +3.08 kB	🔴 +1.21 kB	🔴 +1.08 kB
assets/WidgetMarkdown-BkzmnIMF.js (new)	—	3.08 kB	🔴 +3.08 kB	🔴 +1.28 kB	🔴 +1.13 kB
assets/WidgetMarkdown-Bp4WAg2_.js (removed)	3.08 kB	—	🟢 -3.08 kB	🟢 -1.28 kB	🟢 -1.12 kB
assets/WidgetAudioUI-9hzV617b.js (removed)	2.89 kB	—	🟢 -2.89 kB	🟢 -1.17 kB	🟢 -1.06 kB
assets/WidgetAudioUI-scH0aEUW.js (new)	—	2.89 kB	🔴 +2.89 kB	🔴 +1.17 kB	🔴 +1.06 kB
assets/WidgetToggleSwitch-B1UuEyEr.js (removed)	2.66 kB	—	🟢 -2.66 kB	🟢 -1.13 kB	🟢 -1.02 kB
assets/WidgetToggleSwitch-CA3kQdW2.js (new)	—	2.66 kB	🔴 +2.66 kB	🔴 +1.13 kB	🔴 +1.03 kB
assets/MediaVideoTop-9cP_AzIo.js (removed)	2.65 kB	—	🟢 -2.65 kB	🟢 -1.01 kB	🟢 -867 B
assets/MediaVideoTop-CG6er7Lz.js (new)	—	2.65 kB	🔴 +2.65 kB	🔴 +1.01 kB	🔴 +868 B
assets/WidgetChart-CHjQtBkp.js (new)	—	2.48 kB	🔴 +2.48 kB	🔴 +931 B	🔴 +820 B
assets/WidgetChart-CZhjICiW.js (removed)	2.48 kB	—	🟢 -2.48 kB	🟢 -932 B	🟢 -816 B
assets/WidgetInputText-BNsM8YEj.js (removed)	1.99 kB	—	🟢 -1.99 kB	🟢 -923 B	🟢 -847 B
assets/WidgetInputText-Hp3JMRRu.js (new)	—	1.99 kB	🔴 +1.99 kB	🔴 +921 B	🔴 +851 B
assets/MediaImageTop-B_idcQw8.js (removed)	1.75 kB	—	🟢 -1.75 kB	🟢 -840 B	🟢 -713 B
assets/MediaImageTop-DWmb0VHz.js (new)	—	1.75 kB	🔴 +1.75 kB	🔴 +841 B	🔴 +719 B
assets/Media3DTop-BCEwzUFE.js (new)	—	1.49 kB	🔴 +1.49 kB	🔴 +767 B	🔴 +651 B
assets/Media3DTop-NFxHWfwM.js (removed)	1.49 kB	—	🟢 -1.49 kB	🟢 -770 B	🟢 -654 B
assets/MediaAudioTop-CQjLxZui.js (new)	—	1.46 kB	🔴 +1.46 kB	🔴 +740 B	🔴 +620 B
assets/MediaAudioTop-Dc3cUA9O.js (removed)	1.46 kB	—	🟢 -1.46 kB	🟢 -739 B	🟢 -619 B
assets/WidgetSelect-DvuTyVki.js (removed)	733 B	—	🟢 -733 B	🟢 -364 B	🟢 -325 B
assets/WidgetSelect-GxtiP56D.js (new)	—	733 B	🔴 +733 B	🔴 +360 B	🔴 +326 B
assets/WidgetInputNumber-Bim5A__V.js (new)	—	673 B	🔴 +673 B	🔴 +343 B	🔴 +286 B
assets/WidgetInputNumber-CHTK2Fep.js (removed)	673 B	—	🟢 -673 B	🟢 -349 B	🟢 -286 B
assets/Load3D-Bhoztm3_.js (new)	—	424 B	🔴 +424 B	🔴 +263 B	🔴 +226 B
assets/Load3D-DWHJ6gyU.js (removed)	424 B	—	🟢 -424 B	🟢 -270 B	🟢 -225 B
assets/WidgetLegacy-BWDXg-U1.js (removed)	364 B	—	🟢 -364 B	🟢 -238 B	🟢 -195 B
assets/WidgetLegacy-DZVe4oYy.js (new)	—	364 B	🔴 +364 B	🔴 +235 B	🔴 +194 B
assets/commands-BWp4HdfU.js (new)	—	101 B	🔴 +101 B	🔴 +107 B	🔴 +82 B
assets/nodeDefs-Bw_Jitw_.js (new)	—	101 B	🔴 +101 B	🔴 +107 B	🔴 +92 B
assets/main-Cw9RZWRY.js (new)	—	89 B	🔴 +89 B	🔴 +103 B	🔴 +81 B
assets/OBJLoader2WorkerModule-DTMpvldF.js	109 kB	109 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/widgetPropFilter-BIbGSUAt.js	1.28 kB	1.28 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B

Status: 51 added / 51 removed

[kaalibro]

Or we can open an issue to follow-up.

I've got the commit ready, so I'll push it here to keep things consistent and save us the extra hassle.

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/renderer/extensions/vueNodes/widgets/composables/useStringWidget.ts (1)

15-22: Use the cached settingStore consistently.

The settingStore is cached at line 16 to avoid repeated calls to useSettingStore(), but line 22 still calls useSettingStore().get('Comfy.TextareaWidget.Spellcheck') instead of using the cached variable. This defeats the purpose of the caching optimization.

🔧 Proposed fix

-  inputEl.spellcheck = useSettingStore().get('Comfy.TextareaWidget.Spellcheck')
+  inputEl.spellcheck = settingStore.get('Comfy.TextareaWidget.Spellcheck')

🤖 Fix all issues with AI agents

In @src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts:
- Line 16: TRACKPAD_DETECTION_THRESHOLD is a magic-number heuristic used to
distinguish trackpad gestures from mouse wheel events; add a short comment above
the constant explaining the rationale (e.g., measured delta magnitude
difference, empirical value good for common hardware), note its limitations
across devices, and make it configurable by exposing it as an optional parameter
or prop in useMarkdownWidget (or read from a settings/config source) so users
can override the default if they report issues; reference the constant name
TRACKPAD_DETECTION_THRESHOLD and the composable useMarkdownWidget to locate and
update the code.

📜 Review details

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b7c638d and 428db57.

📒 Files selected for processing (3)

• src/components/graph/widgets/TextPreviewWidget.vue
• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts
• src/renderer/extensions/vueNodes/widgets/composables/useStringWidget.ts

🧰 Additional context used

📓 Path-based instructions (13)

src/**/*.vue

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventions

src/**/*.vue: Use Vue 3 Single File Components (SFCs) with Composition API only
Use <script setup lang="ts"> for component logic in Vue SFCs
Avoid <style> blocks in Vue components - use Tailwind 4 styling instead
Use vue-i18n for all string literals in Vue components - place translation entries in src/locales/en/main.json
Use Tailwind utility classes instead of dark: variant - use semantic values from style.css theme (e.g., bg-node-component-surface)
Use cn() utility from @/utils/tailwindUtil for merging Tailwind class names instead of :class="[]" or hardcoding
Never use !important or ! Tailwind prefix - fix interfering classes instead
Use Tailwind fraction utilities instead of arbitrary percentage values (e.g., w-4/5 instead of w-[80%])
Use TypeScript Vue 3.5 style default prop declaration with reactive props destructuring - avoid withDefaults or runtime props
Prefer defineModel over separately defining a prop and emit for v-model bindings
Define slots via template usage, not via defineSlots
Use same-name shorthand for slot prop bindings (e.g., :isExpanded instead of :is-expanded="isExpanded")
Do not import Vue macros unnecessarily
Avoid new usage of PrimeVue components
Use Tailwind's plurals system via i18n instead of hardcoding ...

Files:

• src/components/graph/widgets/TextPreviewWidget.vue

src/**/*.{vue,ts}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json

Files:

• src/components/graph/widgets/TextPreviewWidget.vue
• src/renderer/extensions/vueNodes/widgets/composables/useStringWidget.ts
• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts

src/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (src/CLAUDE.md)

src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase

src/**/*.{ts,tsx,vue}: Use separate import type statements instead of inline type in mixed imports
Apply Prettier formatting with 2-space indentation, single quotes, no trailing semicolons, 80-character width
Sort and group imports by plugin, run pnpm format before committing
Never use any type - use proper TypeScript types
Never use as any type assertions - fix the underlying type issue
Write code that is expressive and self-documenting - avoid unnecessary comments
Do not add or retain redundant comments - clean as you go
Avoid mutable state - prefer immutability and assignment at point of declaration
Watch out for Code Smells and refactor to avoid them

Files:

• src/components/graph/widgets/TextPreviewWidget.vue
• src/renderer/extensions/vueNodes/widgets/composables/useStringWidget.ts
• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts

src/**/{composables,components}/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (src/CLAUDE.md)

Clean up subscriptions in state management to prevent memory leaks

Files:

• src/components/graph/widgets/TextPreviewWidget.vue
• src/renderer/extensions/vueNodes/widgets/composables/useStringWidget.ts
• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts

src/**/*.{vue,ts,tsx}

📄 CodeRabbit inference engine (src/CLAUDE.md)

Follow Vue 3 composition API style guide

Files:

• src/components/graph/widgets/TextPreviewWidget.vue
• src/renderer/extensions/vueNodes/widgets/composables/useStringWidget.ts
• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts

src/**/{components,composables}/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (src/CLAUDE.md)

Use vue-i18n for ALL user-facing strings by adding them to src/locales/en/main.json

Files:

• src/components/graph/widgets/TextPreviewWidget.vue
• src/renderer/extensions/vueNodes/widgets/composables/useStringWidget.ts
• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts

src/components/**/*.vue

📄 CodeRabbit inference engine (src/components/CLAUDE.md)

src/components/**/*.vue: Use setup() function in Vue 3 Composition API
Destructure props using Vue 3.5 style in Vue components
Use ref/reactive for state management in Vue 3 Composition API
Implement computed() for derived state in Vue 3 Composition API
Use provide/inject for dependency injection in Vue components
Prefer emit/@event-name for state changes over other communication patterns
Use defineExpose only for imperative operations (such as form.validate(), modal.open())
Replace PrimeVue Dropdown component with Select
Replace PrimeVue OverlayPanel component with Popover
Replace PrimeVue Calendar component with DatePicker
Replace PrimeVue InputSwitch component with ToggleSwitch
Replace PrimeVue Sidebar component with Drawer
Replace PrimeVue Chips component with AutoComplete with multiple enabled
Replace PrimeVue TabMenu component with Tabs without panels
Replace PrimeVue Steps component with Stepper without panels
Replace PrimeVue InlineMessage component with Message
Extract complex conditionals to computed properties
Implement cleanup for async operations in Vue components
Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Use Teleport/Suspense when needed for component rendering
Define proper props and emits definitions in Vue components

Name Vue components in PascalCase (e.g., MenuHamburger.vue)

Files:

• src/components/graph/widgets/TextPreviewWidget.vue

src/components/**/*.{vue,css}

📄 CodeRabbit inference engine (src/components/CLAUDE.md)

src/components/**/*.{vue,css}: Use Tailwind CSS only for styling (no custom CSS)
Use the correct tokens from style.css in the design system package

Files:

• src/components/graph/widgets/TextPreviewWidget.vue

src/components/**/*.{vue,ts,js}

📄 CodeRabbit inference engine (src/components/CLAUDE.md)

src/components/**/*.{vue,ts,js}: Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Use useIntersectionObserver for visibility detection instead of custom scroll handlers
Use vue-i18n for ALL UI strings

Files:

• src/components/graph/widgets/TextPreviewWidget.vue

src/**/*.{ts,vue}

📄 CodeRabbit inference engine (AGENTS.md)

src/**/*.{ts,vue}: Use ref for reactive state, computed() for derived values, and watch/watchEffect for side effects in Composition API
Avoid using ref with watch if a computed would suffice - minimize refs and derived state
Use provide/inject for dependency injection only when simpler alternatives (Store or shared composable) won't work
Leverage VueUse functions for performance-enhancing composables
Use VueUse function for useI18n in composition API for string literals

Files:

• src/components/graph/widgets/TextPreviewWidget.vue
• src/renderer/extensions/vueNodes/widgets/composables/useStringWidget.ts
• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts

src/**/*.ts

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safety

src/**/*.ts: Derive component types using vue-component-type-helpers (ComponentProps, ComponentSlots) instead of separate type files
Use es-toolkit for utility functions
Minimize the surface area (exported values) of each module and composable
Favor pure functions, especially testable ones

Files:

• src/renderer/extensions/vueNodes/widgets/composables/useStringWidget.ts
• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts

src/**/{services,composables}/**/*.{ts,tsx}

📄 CodeRabbit inference engine (src/CLAUDE.md)

src/**/{services,composables}/**/*.{ts,tsx}: Use api.apiURL() for backend endpoints instead of constructing URLs directly
Use api.fileURL() for static file access instead of constructing URLs directly

Files:

• src/renderer/extensions/vueNodes/widgets/composables/useStringWidget.ts
• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts

src/**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

src/**/*.{ts,tsx}: Keep functions short and functional
Minimize nesting (if statements, for loops, etc.)
Use function declarations instead of function expressions when possible

Files:

• src/renderer/extensions/vueNodes/widgets/composables/useStringWidget.ts
• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts

🧠 Learnings (30)

📚 Learning: 2025-12-11T03:55:57.926Z

Learnt from: simula-r
Repo: Comfy-Org/ComfyUI_frontend PR: 7252
File: src/renderer/extensions/vueNodes/components/ImagePreview.vue:151-158
Timestamp: 2025-12-11T03:55:57.926Z
Learning: In src/renderer/extensions/vueNodes/components/ImagePreview.vue and LGraphNode.vue, keyboard navigation for image galleries should respond to node-level focus (via keyEvent injection from LGraphNode), not require focus within the image preview wrapper itself. This allows users to navigate the gallery with arrow keys immediately when the node is focused/selected.

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue
• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts

📚 Learning: 2025-12-18T20:39:30.137Z

Learnt from: jtydhr88
Repo: Comfy-Org/ComfyUI_frontend PR: 7621
File: src/components/load3d/Load3DScene.vue:4-4
Timestamp: 2025-12-18T20:39:30.137Z
Learning: In src/components/load3d/Load3DScene.vue, the scoped `<style>` block with `!important` declarations for the canvas element is necessary because Three.js dynamically creates the canvas with inline styles, preventing direct application of Tailwind classes. This is a valid exception to the Tailwind-only styling guideline.

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.{vue,ts,js} : Use useIntersectionObserver for visibility detection instead of custom scroll handlers

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2026-01-10T00:24:17.662Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.662Z
Learning: Applies to src/**/*.{ts,vue} : Use `ref` for reactive state, `computed()` for derived values, and `watch`/`watchEffect` for side effects in Composition API

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-11-24T19:47:02.860Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Utilize ref and reactive for reactive state

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use ref/reactive for state management in Vue 3 Composition API

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2026-01-10T00:24:17.662Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.662Z
Learning: Applies to src/**/*.{ts,vue} : Leverage VueUse functions for performance-enhancing composables

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Implement computed() for derived state in Vue 3 Composition API

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2026-01-10T00:24:17.662Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.662Z
Learning: Applies to src/**/*.{ts,vue} : Avoid using `ref` with `watch` if a `computed` would suffice - minimize refs and derived state

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue
• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-11-24T19:47:02.860Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.{vue,ts} : Leverage VueUse functions for performance-enhancing styles

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-12-04T21:43:49.363Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7137
File: src/components/rightSidePanel/parameters/TabParameters.vue:10-0
Timestamp: 2025-12-04T21:43:49.363Z
Learning: Vue 3.5+ supports reactive props destructure in <script setup>. Destructuring props directly (e.g., `const { nodes } = defineProps<{ nodes: LGraphNode[] }>()`) maintains reactivity through compiler transformation. This is the recommended modern approach and does not require using `props.x` or `toRef`/`toRefs`.

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.{vue,ts,js} : Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue
• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts

📚 Learning: 2025-12-09T03:49:52.828Z

Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 6300
File: src/platform/updates/components/WhatsNewPopup.vue:5-13
Timestamp: 2025-12-09T03:49:52.828Z
Learning: In Vue files across the ComfyUI_frontend repo, when a button is needed, prefer the repo's common button components from src/components/button/ (IconButton.vue, TextButton.vue, IconTextButton.vue) over plain HTML <button> elements. These components wrap PrimeVue with the project’s design system styling. Use only the common button components for consistency and theming, and import them from src/components/button/ as needed.

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-12-09T21:40:12.361Z

Learnt from: benceruleanlu
Repo: Comfy-Org/ComfyUI_frontend PR: 7297
File: src/components/actionbar/ComfyActionbar.vue:33-43
Timestamp: 2025-12-09T21:40:12.361Z
Learning: In Vue single-file components, allow inline Tailwind CSS class strings for static classes and avoid extracting them into computed properties solely for readability. Prefer keeping static class names inline for simplicity and performance. For dynamic or conditional classes, use Vue bindings (e.g., :class) to compose classes.

Applies to all Vue files in the repository (e.g., src/**/*.vue) where Tailwind utilities are used for static styling.

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-12-16T22:26:49.463Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7537
File: src/components/ui/button/Button.vue:17-17
Timestamp: 2025-12-16T22:26:49.463Z
Learning: In Vue 3.5+ with <script setup>, when using defineProps<Props>() with partial destructuring (e.g., const { as = 'button', class: customClass = '' } = defineProps<Props>() ), props that are not destructured (e.g., variant, size) stay accessible by name in the template scope. This pattern is valid: you can destructure only a subset of props for convenience while referencing the remaining props directly in template expressions. Apply this guideline to Vue components across the codebase (all .vue files).

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-12-22T21:36:08.369Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7649
File: src/platform/cloud/subscription/components/PricingTable.vue:185-201
Timestamp: 2025-12-22T21:36:08.369Z
Learning: In Vue components, avoid creating single-use variants for common UI components (e.g., Button and other shared components). Aim for reusable variants that cover multiple use cases. It’s acceptable to temporarily mix variant props with inline Tailwind classes when a styling need is unique to one place, but plan and consolidate into shared, reusable variants as patterns emerge across the codebase.

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2026-01-08T02:26:18.357Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7893
File: src/components/button/IconGroup.vue:5-6
Timestamp: 2026-01-08T02:26:18.357Z
Learning: In components that use the cn utility from '@/utils/tailwindUtil' with tailwind-merge, rely on the behavior that conflicting Tailwind classes are resolved by keeping the last one. For example, cn('base-classes bg-default', propClass) will have any conflicting background class from propClass override bg-default. This additive pattern is intentional and aligns with the shadcn-ui convention; ensure you document or review expectations accordingly in Vue components.

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-12-11T12:25:15.470Z

Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7358
File: src/components/dialog/content/signin/SignUpForm.vue:45-54
Timestamp: 2025-12-11T12:25:15.470Z
Learning: This repository uses CI automation to format code (pnpm format). Do not include manual formatting suggestions in code reviews for Comfy-Org/ComfyUI_frontend. If formatting issues are detected, rely on the CI formatter or re-run pnpm format. Focus reviews on correctness, readability, performance, accessibility, and maintainability rather than style formatting.

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue
• src/renderer/extensions/vueNodes/widgets/composables/useStringWidget.ts
• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts

📚 Learning: 2025-12-18T02:07:38.870Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7598
File: src/components/sidebar/tabs/AssetsSidebarTab.vue:131-131
Timestamp: 2025-12-18T02:07:38.870Z
Learning: Tailwind CSS v4 safe utilities (e.g., items-center-safe, justify-*-safe, place-*-safe) are allowed in Vue components under src/ and in story files. Do not flag these specific safe variants as invalid when reviewing code in src/**/*.vue or related stories.

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-12-18T21:15:46.862Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7603
File: src/components/queue/QueueOverlayHeader.vue:49-59
Timestamp: 2025-12-18T21:15:46.862Z
Learning: In the ComfyUI_frontend repository, for Vue components, do not add aria-label to buttons that have visible text content (e.g., buttons containing <span> text). The visible text provides the accessible name. Use aria-label only for elements without visible labels (e.g., icon-only buttons). If a button has no visible label, provide a clear aria-label or associate with an aria-labelledby describing its action.

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-12-21T01:06:02.786Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7649
File: src/components/graph/selectionToolbox/ColorPickerButton.vue:15-18
Timestamp: 2025-12-21T01:06:02.786Z
Learning: In Comfy-Org/ComfyUI_frontend, in Vue component files, when a filled icon is required (e.g., 'pi pi-circle-fill'), you may mix PrimeIcons with Lucide icons since Lucide lacks filled variants. This mixed usage is acceptable when one icon library does not provide an equivalent filled icon. Apply consistently across Vue components in the src directory where icons are used, and document the rationale when a mixed approach is chosen.

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2025-12-18T16:03:02.066Z

Learnt from: henrikvilhelmberglund
Repo: Comfy-Org/ComfyUI_frontend PR: 7617
File: src/components/actionbar/ComfyActionbar.vue:301-308
Timestamp: 2025-12-18T16:03:02.066Z
Learning: In the ComfyUI frontend queue system, useQueuePendingTaskCountStore().count indicates the number of tasks in the queue, where count = 1 means a single active/running task and count > 1 means there are pending tasks in addition to the active task. Therefore, in src/components/actionbar/ComfyActionbar.vue, enable the 'Clear Pending Tasks' button only when count > 1 to avoid clearing the currently running task. The active task should be canceled using the 'Cancel current run' button instead. This rule should be enforced via a conditional check on the queue count, with appropriate disabled/aria-disabled states for accessibility, and tests should verify behavior for count = 1 and count > 1.

Applied to files:

• src/components/graph/widgets/TextPreviewWidget.vue

📚 Learning: 2026-01-10T00:24:17.662Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.662Z
Learning: Applies to src/**/*.{ts,vue} : Use VueUse function for useI18n in composition API for string literals

Applied to files:

• src/renderer/extensions/vueNodes/widgets/composables/useStringWidget.ts

📚 Learning: 2025-12-09T03:39:54.501Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7169
File: src/platform/remote/comfyui/jobs/jobTypes.ts:1-107
Timestamp: 2025-12-09T03:39:54.501Z
Learning: In the ComfyUI_frontend project, Zod is on v3.x. Do not suggest Zod v4 standalone validators (z.uuid, z.ulid, z.cuid2, z.nanoid) until an upgrade to Zod 4 is performed. When reviewing TypeScript files (e.g., src/platform/remote/comfyui/jobs/jobTypes.ts) validate against Zod 3 capabilities and avoid introducing v4-specific features; flag any proposal to upgrade or incorporate v4-only validators and propose staying with compatible 3.x patterns.

Applied to files:

• src/renderer/extensions/vueNodes/widgets/composables/useStringWidget.ts
• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts

📚 Learning: 2025-12-13T11:03:11.264Z

Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7416
File: src/stores/imagePreviewStore.ts:5-7
Timestamp: 2025-12-13T11:03:11.264Z
Learning: In the ComfyUI_frontend repository, lint rules require keeping 'import type' statements separate from non-type imports, even if importing from the same module. Do not suggest consolidating them into a single import statement. Ensure type imports remain on their own line (import type { ... } from 'module') and regular imports stay on separate lines.

Applied to files:

• src/renderer/extensions/vueNodes/widgets/composables/useStringWidget.ts
• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts

📚 Learning: 2025-12-17T00:40:09.635Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7537
File: src/components/ui/button/Button.stories.ts:45-55
Timestamp: 2025-12-17T00:40:09.635Z
Learning: Prefer pure function declarations over function expressions (e.g., use function foo() { ... } instead of const foo = () => { ... }) for pure functions in the repository. Function declarations are more functional-leaning, offer better hoisting clarity, and can improve readability and tooling consistency. Apply this guideline across TypeScript files in Comfy-Org/ComfyUI_frontend, including story and UI component code, except where a function expression is semantically required (e.g., callbacks, higher-order functions with closures).

Applied to files:

• src/renderer/extensions/vueNodes/widgets/composables/useStringWidget.ts
• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts

📚 Learning: 2025-12-30T22:22:33.836Z

Learnt from: kaili-yang
Repo: Comfy-Org/ComfyUI_frontend PR: 7805
File: src/composables/useCoreCommands.ts:439-439
Timestamp: 2025-12-30T22:22:33.836Z
Learning: When accessing reactive properties from Pinia stores in TypeScript files, avoid using .value on direct property access (e.g., useStore().isOverlayExpanded). Pinia auto-wraps refs when accessed directly, returning the primitive value. The .value accessor is only needed when destructuring store properties or when using storeToRefs().

Applied to files:

• src/renderer/extensions/vueNodes/widgets/composables/useStringWidget.ts
• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts

📚 Learning: 2026-01-10T00:24:17.662Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.662Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Watch out for Code Smells and refactor to avoid them

Applied to files:

• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts

📚 Learning: 2025-11-24T19:47:56.371Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : Do not replace `&&=` or `||=` with `=` when there is no reason to do so. If you do find a reason to remove either `&&=` or `||=`, leave a comment explaining why the removal occurred

Applied to files:

• src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts

🧬 Code graph analysis (1)

src/renderer/extensions/vueNodes/widgets/composables/useStringWidget.ts (1)

src/platform/settings/settingStore.ts (1)

• useSettingStore (46-252)

🔇 Additional comments (2)

src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts (2)

101-153: Comprehensive wheel event handling implementation.

The wheel event handler properly addresses the canvas interaction issues by:

1. Preventing page pinch-zoom and routing ctrl+wheel to canvas
2. Detecting trackpad gestures using deltaX/deltaY heuristics
3. Conditionally routing events based on the trackpad gestures setting
4. Handling both horizontal and vertical scroll with appropriate fallback to canvas
5. Respecting the editing vs. viewing mode when determining scroll capability

The implementation is consistent with the pattern in useStringWidget.ts and properly delegates events to the canvas when appropriate while preserving local scrolling when needed.

---

42-43: Good practice: caching the settings store.

Caching the settingStore avoids repeated calls to useSettingStore() within the event handlers, which is a good optimization for frequently-fired events like wheel handlers.

[coderabbitai]

🧹 Nitpick | 🔵 Trivial

Consider documenting the trackpad detection heuristic.

The TRACKPAD_DETECTION_THRESHOLD = 50 is a heuristic that distinguishes trackpad gestures from mouse wheel events. While this value works well in practice, it may not be perfect for all hardware configurations. Consider adding a brief comment explaining the rationale, or make it configurable if users report issues with specific trackpad/mouse combinations.

🤖 Prompt for AI Agents

In @src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts at
line 16, TRACKPAD_DETECTION_THRESHOLD is a magic-number heuristic used to
distinguish trackpad gestures from mouse wheel events; add a short comment above
the constant explaining the rationale (e.g., measured delta magnitude
difference, empirical value good for common hardware), note its limitations
across devices, and make it configurable by exposing it as an optional parameter
or prop in useMarkdownWidget (or read from a settings/config source) so users
can override the default if they report issues; reference the constant name
TRACKPAD_DETECTION_THRESHOLD and the composable useMarkdownWidget to locate and
update the code.