mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 14:30:41 +00:00
36b8972442
## Summary
Backport of #6950 onto core/1.33 (clean cherry-pick of 4b87b1fdc).
## Testing
- pnpm typecheck
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6984-backport-core-1-33-fix-remove-LOD-from-vue-nodes-2b86d73d36508151bf1ae4a879016211)
by [Unito](https://www.unito.io)
Co-authored-by: Simula_r <18093452+simula-r@users.noreply.github.com>
Co-authored-by: github-actions <github-actions@github.com>
71 lines
1.8 KiB
Vue
71 lines
1.8 KiB
Vue
<template>
|
|
<div
|
|
class="widget-expands widget-markdown relative w-full"
|
|
@dblclick="startEditing"
|
|
>
|
|
<!-- Display mode: Rendered markdown -->
|
|
<div
|
|
class="comfy-markdown-content size-full min-h-[60px] overflow-y-auto rounded-lg text-sm"
|
|
:class="isEditing === false ? 'visible' : 'invisible'"
|
|
v-html="renderedHtml"
|
|
/>
|
|
|
|
<!-- Edit mode: Textarea -->
|
|
<Textarea
|
|
v-show="isEditing"
|
|
ref="textareaRef"
|
|
v-model="modelValue"
|
|
:aria-label="`${$t('g.edit')} ${widget.name || $t('g.markdown')} ${$t('g.content')}`"
|
|
class="absolute inset-0 min-h-[60px] w-full resize-none"
|
|
:pt="{
|
|
root: {
|
|
class: 'text-sm w-full h-full',
|
|
onBlur: handleBlur
|
|
}
|
|
}"
|
|
data-capture-wheel="true"
|
|
@click.stop
|
|
@keydown.stop
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Textarea from 'primevue/textarea'
|
|
import { computed, nextTick, ref } from 'vue'
|
|
|
|
import type { SimplifiedWidget } from '@/types/simplifiedWidget'
|
|
import { renderMarkdownToHtml } from '@/utils/markdownRendererUtil'
|
|
|
|
const { widget } = defineProps<{
|
|
widget: SimplifiedWidget<string>
|
|
}>()
|
|
|
|
const modelValue = defineModel<string>({ default: '' })
|
|
|
|
// State
|
|
const isEditing = ref(false)
|
|
const textareaRef = ref<InstanceType<typeof Textarea> | undefined>()
|
|
|
|
// Computed
|
|
const renderedHtml = computed(() => {
|
|
return renderMarkdownToHtml(modelValue.value || '')
|
|
})
|
|
|
|
// Methods
|
|
const startEditing = async () => {
|
|
if (isEditing.value || widget.options?.read_only) return
|
|
|
|
isEditing.value = true
|
|
await nextTick()
|
|
|
|
// Focus the textarea
|
|
// @ts-expect-error - $el is an internal property of the Textarea component
|
|
textareaRef.value?.$el?.focus()
|
|
}
|
|
|
|
const handleBlur = () => {
|
|
isEditing.value = false
|
|
}
|
|
</script>
|