Skip to content

fix(assistant): render markdown in TextInput output #540

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
n-iv wants to merge 2 commits into
base: main
Choose a base branch
from
+65 −1
Open

fix(assistant): render markdown in TextInput output #540

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
57e8154
fix(assistant): render markdown in TextInput output
n-iv May 13, 2026
1f9318f
fix(assistant): allow editing rendered markdown output via double-click
n-iv May 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 65 additions & 1 deletion src/components/fields/TextInput.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,19 @@
<br v-if="limitLabel">
{{ limitLabel ?? '' }}
</label>
<div
Copy link
Copy Markdown
Member

@janepie janepie May 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why wrapping it in a div? Should work with directly using NcRichText

Copy link
Copy Markdown
Member

@julien-nc julien-nc May 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the wrapper can be easily removed, I agree with Jana it would be nice to remove it. But if it's way more convenient to have it because styling NcRichText directly is sketchy, then let's keep the wrapper.

v-if="isOutput && hasValue && !isEditing"
class="output-wrapper"
:title="t('assistant', 'Double-click to edit')"
@dblclick="enterEditMode">
<NcRichText
class="rendered-output"
:text="value ?? ''"
:use-markdown="true"
:autolink="true" />
</div>
<NcRichContenteditable
v-else
:id="id"
ref="input"
:model-value="value ?? ''"
Expand All @@ -21,7 +33,8 @@
:placeholder="placeholder"
:title="title"
@submit="hasValue && $emit('submit', $event)"
@update:model-value="$emit('update:value', $event)" />
@update:model-value="$emit('update:value', $event)"
@blur="onEditableBlur" />
<NcButton v-if="isOutput && hasValue"
class="copy-button"
variant="secondary"
Expand Down Expand Up @@ -52,6 +65,7 @@ import ContentCopyIcon from 'vue-material-design-icons/ContentCopy.vue'

import NcButton from '@nextcloud/vue/components/NcButton'
import NcRichContenteditable from '@nextcloud/vue/components/NcRichContenteditable'
import { NcRichText } from '@nextcloud/vue/components/NcRichText'

import isMobile from '../../mixins/isMobile.js'

Expand All @@ -77,6 +91,7 @@ export default {

components: {
NcRichContenteditable,
NcRichText,
NcButton,
FileDocumentOutlineIcon,
ClipboardCheckOutlineIcon,
Expand Down Expand Up @@ -126,6 +141,7 @@ export default {
data() {
return {
copied: false,
isEditing: false,
maxLength: MAX_TEXT_INPUT_LENGTH,
}
},
Expand Down Expand Up @@ -194,6 +210,39 @@ export default {
showError(t('assistant', 'Result could not be copied to clipboard'))
}
},
enterEditMode() {
if (!this.isOutput) {
return
}
this.isEditing = true
this.$nextTick(() => {
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
}
},
},
}
</script>
Expand All @@ -215,6 +264,7 @@ body[dir="rtl"] .choose-file-button {
.copy-button,
.choose-file-button {
position: absolute !important;
z-index: 10;
Copy link
Copy Markdown
Member

@janepie janepie May 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's this for?

Copy link
Copy Markdown
Member

@julien-nc julien-nc May 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried removing it and couldn't see any difference. Is it fixing something in a very special case?

}

.choose-file-button {
Expand All @@ -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;
Copy link
Copy Markdown
Member

@julien-nc julien-nc May 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be --border-radius-large to be consistent with the NcRichContenteditable border radius.

padding: 8px !important;
padding-bottom: 42px !important;
max-height: 35vh !important;
overflow-y: auto !important;
cursor: text;
Copy link
Copy Markdown
Member

@julien-nc julien-nc May 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not enough.

Suggested change
cursor: text;
.rendered-output, .rendered-output * {
cursor: text;
}

}

.rich-contenteditable__input {
min-height: calc(var(--default-clickable-area) + 4px);
padding-top: 5px !important;
Expand All @@ -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;
Copy link
Copy Markdown
Member

@julien-nc julien-nc May 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

.rich-contenteditable__input already has overflow-y: auto set by the server style. This can be removed.

}
}
</style>
Loading