mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-27 09:45:13 +00:00
4b87b1fdc5
## Summary Refactor to remove LOD from vue nodes. Also, hide Litegraph LOD settings in vue nodes to prevent confusion / stale setting. Keep litegraph LOD the exact same. ## Changes - **What**: settings, all LOD related code in vue nodes ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6950-fix-remove-LOD-from-vue-nodes-2b76d73d365081568723f8cbc7be7e17) by [Unito](https://www.unito.io) --------- 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>
|