Feat: Doubleclick to toggle edit for Markdown (litegraph) (#6560)

## Summary

See https://github.com/Comfy-Org/ComfyUI_frontend/pull/6537, but for
litegraph widget.

Doesn't allow dragging the node through the rendered markdown yet, that
would be more complicated (DOMWidget complication)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6560-Feat-Doubleclick-to-toggle-edit-for-Markdown-litegraph-2a06d73d36508189bf6eedd7cdeba6db)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>

packages/design-system/src/css/style.css

@@ -509,36 +509,40 @@ body {
 .comfy-markdown {
   /* We assign the textarea and the Tiptap editor to the same CSS grid area to stack them on top of one another. */
   display: grid;
-}
+  & > textarea,
+  .tiptap {
+    grid-area: 1 / 1 / 2 / 2;
+  }
 
-.comfy-markdown > textarea {
+  & > textarea {
-  grid-area: 1 / 1 / 2 / 2;
+    opacity: 0;
-}
+    pointer-events: none;
+  }
 
-.comfy-markdown .tiptap {
+  &.editing {
-  grid-area: 1 / 1 / 2 / 2;
+    & > textarea {
-  background-color: var(--comfy-input-bg);
+      opacity: 1;
-  color: var(--input-text);
+      pointer-events: all;
-  overflow: hidden;
+    }
-  overflow-y: auto;
-  resize: none;
-  border: none;
-  box-sizing: border-box;
-  font-size: var(--comfy-textarea-font-size);
-  height: 100%;
-  padding: 0.5em;
-}
 
-.comfy-markdown.editing .tiptap {
+    .tiptap {
-  display: none;
+      opacity: 0;
-}
+      pointer-events: none;
+    }
+  }
 
-.comfy-markdown .tiptap :first-child {
+  .tiptap {
-  margin-top: 0;
+    overflow-y: auto;
-}
+    font-size: var(--comfy-textarea-font-size);
 
-.comfy-markdown .tiptap :last-child {
+    :first-child {
-  margin-bottom: 0;
+      margin-top: 0;
+    }
+
+    :last-child {
+      margin-bottom: 0;
+    }
+  }
 }
 
 .comfy-markdown .tiptap blockquote {

src/lib/litegraph/src/LGraphCanvas.ts

@@ -2169,7 +2169,7 @@ export class LGraphCanvas
     }
   }
 
-  processMouseDown(e: PointerEvent): void {
+  processMouseDown(e: MouseEvent): void {
     if (
       this.dragZoomEnabled &&
       e.ctrlKey &&

src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts

@@ -53,14 +53,7 @@ function addMarkdownWidget(
   widget.inputEl = inputEl
   widget.options.minNodeSize = [400, 200]
 
-  inputEl.addEventListener('pointerdown', (event: PointerEvent) => {
+  inputEl.addEventListener('dblclick', () => {
-    if (event.button !== 0) {
-      app.canvas.processMouseDown(event)
-      return
-    }
-    if (event.target instanceof HTMLAnchorElement) {
-      return
-    }
     inputEl.classList.add('editing')
     setTimeout(() => {
       textarea.focus()