Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-01-26 19:09:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Feat: Nicer click behavior for the Markdown Widget (#6537)

Browse Source 
## Summary

Double click instead of single to edit. No longer changes background
color dramatically on hover.

<!-- Add screenshots or video recording to help explain your changes -->

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6537-Feat-Nicer-click-behavior-for-the-Markdown-Widget-29f6d73d365081a49119fcc2cc86fc11)
by [Unito](https://www.unito.io)
This commit is contained in:
Alexander Brown
2025-11-02 08:42:45 -08:00
committed by GitHub
parent 704de20245
commit fddebd4a73
3 changed files with 6 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.git-blame-ignore-revs
View File

@@ -25,3 +25,6 @@ e3bb29ceb8174b8bbca9e48ec7d42cd540f40efa
# [refactor] Improve updates/notifications domain organization (#5590) # [refactor] Improve updates/notifications domain organization (#5590)
27ab355f9c73415dc39f4d3f512b02308f847801 27ab355f9c73415dc39f4d3f512b02308f847801
# Migrate Tailwind styles to design-system package
9f19d8fb4bd22518879343b49c05634dca777df0

26
src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.test.ts
View File

@@ -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', () => { describe('Focus Management', () => {
it('creates textarea reference when entering edit mode', async () => { it('creates textarea reference when entering edit mode', async () => {
const widget = createMockWidget('# Test') const widget = createMockWidget('# Test')

18
src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue
View File

@@ -1,11 +1,11 @@
<template> <template>
<div <div
class="widget-expands widget-markdown relative w-full cursor-text" class="widget-expands widget-markdown relative w-full"
@click="startEditing" @dblclick="startEditing"
> >
<!-- Display mode: Rendered markdown --> <!-- Display mode: Rendered markdown -->
<div <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'" :class="isEditing === false ? 'visible' : 'invisible'"
v-html="renderedHtml" v-html="renderedHtml"
/> />
@@ -83,15 +83,3 @@ const handleBlur = () => {
isEditing.value = false isEditing.value = false
} }
</script> </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>