mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-26 10:59:53 +00:00
Feat: Nicer click behavior for the Markdown Widget (#6537)
## 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:
@@ -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
|
||||||
|
|||||||
@@ -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')
|
||||||
|
|||||||
@@ -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>
|
|
||||||
|
|||||||
Reference in New Issue
Block a user