diff --git a/src/components/fields/TextInput.vue b/src/components/fields/TextInput.vue index c88045ee..7adeaae2 100644 --- a/src/components/fields/TextInput.vue +++ b/src/components/fields/TextInput.vue @@ -9,7 +9,19 @@
{{ limitLabel ?? '' }} +
+ +
+ @update:model-value="$emit('update:value', $event)" + @blur="onEditableBlur" /> { + const ref = this.$refs.input + if (!ref) { + return + } + if (typeof ref.focus === 'function') { + ref.focus() + return + } + const el = ref.$el + if (!el) { + return + } + if (typeof el.focus === 'function') { + el.focus() + return + } + const editable = el.querySelector?.('[contenteditable]') + if (editable && typeof editable.focus === 'function') { + editable.focus() + } + }) + }, + onEditableBlur() { + if (this.isOutput && this.isEditing) { + this.isEditing = false + } + }, }, } @@ -215,6 +264,7 @@ body[dir="rtl"] .choose-file-button { .copy-button, .choose-file-button { position: absolute !important; + z-index: 10; } .choose-file-button { @@ -226,6 +276,18 @@ body[dir="rtl"] .choose-file-button { right: 4px; } + .output-wrapper { + display: block !important; + box-sizing: border-box !important; + border: 2px solid var(--color-primary-element) !important; + border-radius: var(--border-radius) !important; + padding: 8px !important; + padding-bottom: 42px !important; + max-height: 35vh !important; + overflow-y: auto !important; + cursor: text; + } + .rich-contenteditable__input { min-height: calc(var(--default-clickable-area) + 4px); padding-top: 5px !important; @@ -234,6 +296,8 @@ body[dir="rtl"] .choose-file-button { .shadowed .rich-contenteditable__input { border: 2px solid var(--color-primary-element) !important; padding-bottom: 38px !important; + max-height: 35vh !important; + overflow-y: auto !important; } }