Fix/vue nodes markdown (#5771)

## Summary

Improve markdown node by making the textarea match the rendered output
width and height.

## Screenshots (if applicable)


https://github.com/user-attachments/assets/4701f947-0a4f-40f3-83c0-94e53cd10106


┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5771-Fix-vue-nodes-markdown-2796d73d365081129428fe9c38178cc4)
by [Unito](https://www.unito.io)
This commit is contained in:
Simula_r
2025-09-25 13:21:17 -07:00
committed by GitHub
parent 415ebfd67b
commit 703de3e669

View File

@@ -5,22 +5,21 @@
>
<!-- Display mode: Rendered markdown -->
<div
v-if="!isEditing"
class="comfy-markdown-content text-xs min-h-[60px] rounded-lg px-4 py-2 overflow-y-auto lod-toggle"
class="comfy-markdown-content hover:bg-[var(--p-content-hover-background)] text-sm min-h-[60px] w-full rounded-lg px-4 py-2 overflow-y-auto lod-toggle"
:class="isEditing === false ? 'visible' : 'invisible'"
v-html="renderedHtml"
/>
<!-- Edit mode: Textarea -->
<Textarea
v-else
v-show="isEditing"
ref="textareaRef"
v-model="localValue"
:disabled="readonly"
class="w-full text-xs"
size="small"
:rows="6"
class="w-full min-h-[60px] absolute inset-0 resize-none"
:pt="{
root: {
class: 'text-sm w-full h-full',
onBlur: handleBlur
}
}"
@@ -92,7 +91,7 @@ const handleBlur = () => {
border-radius: var(--p-border-radius);
}
.widget-markdown:hover:not(:has(textarea)) {
.comfy-markdown-content:hover {
background-color: var(--p-content-hover-background);
}
</style>