Skip to content

Feat: Nicer click behavior for the Markdown Widget #6537

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Nov 2, 2025
Merged

Feat: Nicer click behavior for the Markdown Widget #6537

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d13019d
feat: Double click to edit Markdown widgets, don't override the curso…
DrJKL Nov 2, 2025
e9917f4
devex: Add styles move PR to the ignored list
DrJKL Nov 2, 2025
2d35fb4
test: Remove change detection tests for classes in WidgetMarkdown
DrJKL Nov 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .git-blame-ignore-revs
View file
Open in desktop
Copy link
Contributor

@christian-byrne christian-byrne Nov 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh nice, thank you!

Original file line number Diff line number Diff line change
Expand Up @@ -25,3 +25,6 @@ e3bb29ceb8174b8bbca9e48ec7d42cd540f40efa

# [refactor] Improve updates/notifications domain organization (#5590)
27ab355f9c73415dc39f4d3f512b02308f847801

# Migrate Tailwind styles to design-system package
9f19d8fb4bd22518879343b49c05634dca777df0
26 changes: 0 additions & 26 deletions src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -369,32 +369,6 @@ Another line with more content.`
})
})

describe('Styling and Layout', () => {
it('applies widget-markdown class to container', () => {
const widget = createMockWidget('# Test')
const wrapper = mountComponent(widget, '# Test')

const container = wrapper.find('.widget-markdown')
expect(container.exists()).toBe(true)
expect(container.classes()).toContain('relative')
expect(container.classes()).toContain('w-full')
expect(container.classes()).toContain('cursor-text')
})

it('applies overflow handling to display mode', () => {
const widget = createMockWidget(
'# Long Content\n' + 'Content '.repeat(100)
)
const wrapper = mountComponent(
widget,
'# Long Content\n' + 'Content '.repeat(100)
)

const displayDiv = wrapper.find('.comfy-markdown-content')
expect(displayDiv.classes()).toContain('overflow-y-auto')
})
})

describe('Focus Management', () => {
it('creates textarea reference when entering edit mode', async () => {
const widget = createMockWidget('# Test')
Expand Down
18 changes: 3 additions & 15 deletions src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<template>
<div
class="widget-expands widget-markdown relative w-full cursor-text"
@click="startEditing"
class="widget-expands widget-markdown relative w-full"
@dblclick="startEditing"
>
<!-- Display mode: Rendered markdown -->
<div
class="comfy-markdown-content lod-toggle h-full min-h-[60px] w-full overflow-y-auto rounded-lg px-4 py-2 text-sm hover:bg-[var(--p-content-hover-background)]"
class="comfy-markdown-content lod-toggle size-full min-h-[60px] overflow-y-auto rounded-lg px-4 py-2 text-sm"
:class="isEditing === false ? 'visible' : 'invisible'"
v-html="renderedHtml"
/>
Expand Down Expand Up @@ -83,15 +83,3 @@ const handleBlur = () => {
isEditing.value = false
}
</script>

<style scoped>
.widget-markdown {
background-color: var(--p-muted-color);
border: 1px solid var(--p-border-color);
border-radius: var(--p-border-radius);
}

.comfy-markdown-content:hover {
background-color: var(--p-content-hover-background);
}
</style>
Loading