From fddebd4a738a438bb42cb7ad652ee44f60bb7eed Mon Sep 17 00:00:00 2001
From: Alexander Brown <drjkl@comfy.org>
Date: Sun, 2 Nov 2025 08:42:45 -0800
Subject: [PATCH] Feat: Nicer click behavior for the Markdown Widget (#6537)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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)
---
 .git-blame-ignore-revs                        |  3 +++
 .../widgets/components/WidgetMarkdown.test.ts | 26 -------------------
 .../widgets/components/WidgetMarkdown.vue     | 18 +++----------
 3 files changed, 6 insertions(+), 41 deletions(-)

diff --git a/.git-blame-ignore-revs b/.git-blame-ignore-revs
index 06139b08a..3c9750e0f 100644
--- a/.git-blame-ignore-revs
+++ b/.git-blame-ignore-revs
@@ -25,3 +25,6 @@ e3bb29ceb8174b8bbca9e48ec7d42cd540f40efa
 
 # [refactor] Improve updates/notifications domain organization (#5590)
 27ab355f9c73415dc39f4d3f512b02308f847801
+
+# Migrate Tailwind styles to design-system package
+9f19d8fb4bd22518879343b49c05634dca777df0
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.test.ts b/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.test.ts
index aaa29489b..ee788cc4d 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.test.ts
@@ -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')
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue
index 24d33c573..da0227828 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue
@@ -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"
     />
@@ -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>