fix: dragging (e.g., when selecting text) in Markdown note causes node to drag #8413
+57
−0
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…selection When attempting to select text inside Vue node Markdown widget's textarea (edit mode), the node would drag instead of text being selected. Root cause: WidgetMarkdown.vue's Textarea only had @click.stop and @keydown.stop, but was missing pointer event modifiers. The pointerdown event bubbled up to LGraphNode.vue which initiated node drag. Fix: Add @pointerdown.capture.stop, @pointermove.capture.stop, and @pointerup.capture.stop to match the pattern used in WidgetTextarea.vue. Fixes text selection in Markdown widgets for FE 1.35.9 and FE 1.37.3. Amp-Thread-ID: https://ampcode.com/threads/T-019c082d-5d8e-7532-95d5-77163b51aabc Co-authored-by: Amp <amp@ampcode.com>
dosubot
bot
added
the
size:M
Contributor
📝 WalkthroughWalkthroughThis PR adds pointer event handling to the WidgetMarkdown component by adding stop-propagation modifiers to the textarea element for pointerdown, pointermove, and pointerup events. Corresponding tests verify that these events don't propagate to parent handlers. Changes
Possibly related PRs
Suggested reviewers
✨ Finishing touches
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. Comment |
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 01/29/2026, 07:01:22 AM UTC 🔗 Links🎉 Your Storybook is ready for review! |
🎭 Playwright Tests:
|
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 26 kB (baseline 26 kB) • ⚪ 0 BMain entry bundles and manifests
Status: 1 added / 1 removed Graph Workspace — 973 kB (baseline 973 kB) • ⚪ 0 BGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 80.7 kB (baseline 80.7 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Status: 9 added / 9 removed Panels & Settings — 471 kB (baseline 471 kB) • 🟢 -8 BConfiguration panels, inspectors, and settings screens
Status: 12 added / 12 removed User & Accounts — 3.94 kB (baseline 3.94 kB) • ⚪ 0 BAuthentication, profile, and account management bundles
Status: 3 added / 3 removed Editors & Dialogs — 2.89 kB (baseline 2.89 kB) • ⚪ 0 BModals, dialogs, drawers, and in-app editors
Status: 2 added / 2 removed UI Components — 33.7 kB (baseline 33.7 kB) • ⚪ 0 BReusable component library chunks
Status: 4 added / 4 removed Data & Services — 2.7 MB (baseline 2.7 MB) • 🔴 +1 BStores, services, APIs, and repositories
Status: 8 added / 8 removed Utilities & Hooks — 25.3 kB (baseline 25.3 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Status: 7 added / 7 removed Vendor & Third-Party — 10.7 MB (baseline 10.7 MB) • ⚪ 0 BExternal libraries and shared vendor chunks
Other — 7.05 MB (baseline 7.05 MB) • 🔴 +67 BBundles that do not match a named category
Status: 35 added / 35 removed |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.test.ts`:
- Around line 211-260: The tests use the clickToEdit helper which triggers a
single click but WidgetMarkdown enters edit mode on `@dblclick`, so update the
tests to actually enter edit mode: either change the clickToEdit helper to
trigger a 'dblclick' (or call wrapper.find(...).trigger('dblclick') directly in
each test) and then assert the textarea is visible (since the component uses
v-show) before firing pointer events; reference the clickToEdit helper and the
component's `@dblclick` handler in WidgetMarkdown.vue when making the change.
Comment on lines
+211
to
+260
| it('stops pointerdown propagation to prevent node drag during text selection', async () => { | ||
| const widget = createMockWidget('# Test') | ||
| const wrapper = mountComponent(widget, '# Test') | ||
|
|
||
| await clickToEdit(wrapper) | ||
|
|
||
| const textarea = wrapper.find('textarea') | ||
| expect(textarea.exists()).toBe(true) | ||
|
|
||
| const parentPointerdownHandler = vi.fn() | ||
| const wrapperEl = wrapper.element as HTMLElement | ||
| wrapperEl.addEventListener('pointerdown', parentPointerdownHandler) | ||
|
|
||
| await textarea.trigger('pointerdown') | ||
|
|
||
| expect(parentPointerdownHandler).not.toHaveBeenCalled() | ||
| }) | ||
|
|
||
| it('stops pointermove propagation during text selection', async () => { | ||
| const widget = createMockWidget('# Test') | ||
| const wrapper = mountComponent(widget, '# Test') | ||
|
|
||
| await clickToEdit(wrapper) | ||
|
|
||
| const textarea = wrapper.find('textarea') | ||
|
|
||
| const parentPointermoveHandler = vi.fn() | ||
| const wrapperEl = wrapper.element as HTMLElement | ||
| wrapperEl.addEventListener('pointermove', parentPointermoveHandler) | ||
|
|
||
| await textarea.trigger('pointermove') | ||
|
|
||
| expect(parentPointermoveHandler).not.toHaveBeenCalled() | ||
| }) | ||
|
|
||
| it('stops pointerup propagation after text selection', async () => { | ||
| const widget = createMockWidget('# Test') | ||
| const wrapper = mountComponent(widget, '# Test') | ||
|
|
||
| await clickToEdit(wrapper) | ||
|
|
||
| const textarea = wrapper.find('textarea') | ||
|
|
||
| const parentPointerupHandler = vi.fn() | ||
| const wrapperEl = wrapper.element as HTMLElement | ||
| wrapperEl.addEventListener('pointerup', parentPointerupHandler) | ||
|
|
||
| await textarea.trigger('pointerup') | ||
|
|
||
| expect(parentPointerupHandler).not.toHaveBeenCalled() |
Contributor
There was a problem hiding this comment.
Ensure pointer-propagation tests actually enter edit mode (dblclick).
The component enters edit mode via @dblclick (Line 2 in WidgetMarkdown.vue), but these tests call clickToEdit which triggers a single click. With v-show, the textarea still exists when not editing, so the tests can pass without exercising edit-mode behavior.
Consider switching the helper to trigger dblclick (and optionally assert visibility) so the new tests validate the real edit path.
Suggested update (outside this hunk)
const clickToEdit = async (wrapper: ReturnType<typeof mount>) => {
const container = wrapper.find('.widget-markdown')
- await container.trigger('click')
+ await container.trigger('dblclick')
await nextTick()
return container
}🤖 Prompt for AI Agents
In `@src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.test.ts`
around lines 211 - 260, The tests use the clickToEdit helper which triggers a
single click but WidgetMarkdown enters edit mode on `@dblclick`, so update the
tests to actually enter edit mode: either change the clickToEdit helper to
trigger a 'dblclick' (or call wrapper.find(...).trigger('dblclick') directly in
each test) and then assert the textarea is visible (since the component uses
v-show) before firing pointer events; reference the clickToEdit helper and the
component's `@dblclick` handler in WidgetMarkdown.vue when making the change.
DrJKL
reviewed
Jan 29, 2026
| @pointerdown.capture.stop | ||
| @pointermove.capture.stop | ||
| @pointerup.capture.stop | ||
| @click.stop |
Contributor
There was a problem hiding this comment.
If we're stopping pointerdown, do we also need to stop click?
Contributor
Author
There was a problem hiding this comment.
For the purposes of extensions / API consistency?
DrJKL
reviewed
Jan 29, 2026
| expect(textarea.exists()).toBe(true) | ||
|
|
||
| const parentPointerdownHandler = vi.fn() | ||
| const wrapperEl = wrapper.element as HTMLElement |
Contributor
There was a problem hiding this comment.
Nit: I'd always rather an instanceof gate.
DrJKL
approved these changes
Jan 29, 2026
christian-byrne
added
needs-backport
github-actions bot
pushed a commit
that referenced
this pull request
Jan 29, 2026
…e to drag (#8413) ## Summary When attempting to select text inside Vue node Markdown widget's textarea (edit mode), the node would drag instead of text being selected. Root cause: WidgetMarkdown.vue's Textarea only had @click.stop and @keydown.stop, but was missing pointer event modifiers. The pointerdown event bubbled up to LGraphNode.vue which initiated node drag. *Fix*: Add @pointerdown.capture.stop, @pointermove.capture.stop, and @pointerup.capture.stop to match the pattern used in WidgetTextarea.vue. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8413-fix-dragging-e-g-when-selecting-text-in-Markdown-note-causes-node-to-drag-2f76d73d3650816dbf9bdf893775c3d4) by [Unito](https://www.unito.io) Co-authored-by: Subagent 5 <subagent@example.com> Co-authored-by: Amp <amp@ampcode.com>
github-actions bot
pushed a commit
that referenced
this pull request
Jan 29, 2026
…e to drag (#8413) ## Summary When attempting to select text inside Vue node Markdown widget's textarea (edit mode), the node would drag instead of text being selected. Root cause: WidgetMarkdown.vue's Textarea only had @click.stop and @keydown.stop, but was missing pointer event modifiers. The pointerdown event bubbled up to LGraphNode.vue which initiated node drag. *Fix*: Add @pointerdown.capture.stop, @pointermove.capture.stop, and @pointerup.capture.stop to match the pattern used in WidgetTextarea.vue. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8413-fix-dragging-e-g-when-selecting-text-in-Markdown-note-causes-node-to-drag-2f76d73d3650816dbf9bdf893775c3d4) by [Unito](https://www.unito.io) Co-authored-by: Subagent 5 <subagent@example.com> Co-authored-by: Amp <amp@ampcode.com>
Member
|
@christian-byrne Successfully backported to #8427 |
Member
|
@christian-byrne Successfully backported to #8428 |
github-actions
bot
removed
the
needs-backport
AustinMroz
pushed a commit
that referenced
this pull request
Jan 29, 2026
…kdown note causes node to drag (#8427) Backport of #8413 to `core/1.38` Automatically created by backport workflow. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8427-backport-core-1-38-fix-dragging-e-g-when-selecting-text-in-Markdown-note-causes-no-2f76d73d3650813e8e28c101270bc42f) by [Unito](https://www.unito.io) Co-authored-by: Christian Byrne <cbyrne@comfy.org> Co-authored-by: Subagent 5 <subagent@example.com> Co-authored-by: Amp <amp@ampcode.com>
AustinMroz
pushed a commit
that referenced
this pull request
Jan 29, 2026
…rkdown note causes node to drag (#8428) Backport of #8413 to `cloud/1.38` Automatically created by backport workflow. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8428-backport-cloud-1-38-fix-dragging-e-g-when-selecting-text-in-Markdown-note-causes-n-2f76d73d36508132b067e6cee1122dc8) by [Unito](https://www.unito.io) Co-authored-by: Christian Byrne <cbyrne@comfy.org> Co-authored-by: Subagent 5 <subagent@example.com> Co-authored-by: Amp <amp@ampcode.com>
christian-byrne
added a commit
that referenced
this pull request
Jan 30, 2026
…e to drag (#8413) ## Summary When attempting to select text inside Vue node Markdown widget's textarea (edit mode), the node would drag instead of text being selected. Root cause: WidgetMarkdown.vue's Textarea only had @click.stop and @keydown.stop, but was missing pointer event modifiers. The pointerdown event bubbled up to LGraphNode.vue which initiated node drag. *Fix*: Add @pointerdown.capture.stop, @pointermove.capture.stop, and @pointerup.capture.stop to match the pattern used in WidgetTextarea.vue. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8413-fix-dragging-e-g-when-selecting-text-in-Markdown-note-causes-node-to-drag-2f76d73d3650816dbf9bdf893775c3d4) by [Unito](https://www.unito.io) Co-authored-by: Subagent 5 <subagent@example.com> Co-authored-by: Amp <amp@ampcode.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
When attempting to select text inside Vue node Markdown widget's textarea (edit mode), the node would drag instead of text being selected.
Root cause: WidgetMarkdown.vue's Textarea only had @click.stop and @keydown.stop, but was missing pointer event modifiers. The pointerdown event bubbled up to LGraphNode.vue which initiated node drag.
Fix: Add @pointerdown.capture.stop, @pointermove.capture.stop, and @pointerup.capture.stop to match the pattern used in WidgetTextarea.vue.
┆Issue is synchronized with this Notion page by Unito