fix: Replace NcRichContenteditable with textarea

Signed-off-by: Ferdinand Thiessen <rpm@fthiessen.de>

Author: susnux

src/components/Questions/Question.vue

@@ -75,13 +75,13 @@
 				</NcActions>
 			</div>
 			<div v-if="hasDescription || edit || !questionValid" class="question__header__description">
-				<NcRichContenteditable v-if="edit || !questionValid"
-					:multiline="true"
+				<textarea v-if="edit || !questionValid"
+					ref="description"
 					:value="description"
 					:placeholder="t('forms', 'Description (formatting using Markdown is supported)')"
 					:maxlength="maxStringLengths.questionDescription"
 					class="question__header__description__input"
-					@update:value="onDescriptionChange" />
+					@input="onDescriptionChange" />
 				<!-- eslint-disable-next-line vue/no-v-html -->
 				<div v-else class="question__header__description__output" v-html="computedDescription" />
 			</div>
@@ -98,7 +98,6 @@ import { directive as ClickOutside } from 'v-click-outside'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox.js'
-import NcRichContenteditable from '@nextcloud/vue/dist/Components/NcRichContenteditable.js'
 
 import IconAlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
 import IconDelete from 'vue-material-design-icons/Delete.vue'
@@ -118,7 +117,6 @@ export default {
 		NcActions,
 		NcActionButton,
 		NcActionCheckbox,
-		NcRichContenteditable,
 	},
 
 	inject: ['$markdownit'],
@@ -204,20 +202,36 @@ export default {
 			return this.description !== ''
 		},
 	},
+	watch: {
+		edit(newEdit) {
+			if (newEdit || !this.questionValid) {
+				this.resizeDescription()
+			}
+		},
+	},
 
 	methods: {
 		onTitleChange({ target }) {
 			this.$emit('update:text', target.value)
 		},
 
-		onDescriptionChange(value) {
-			this.$emit('update:description', value)
+		onDescriptionChange({ target }) {
+			this.resizeTextarea()
+			this.$emit('update:description', target.value)
 		},
 
 		onRequiredChange(isRequired) {
 			this.$emit('update:isRequired', isRequired)
 		},
 
+		resizeDescription() {
+			// next tick ensures that the textarea is attached to DOM
+			this.$nextTick(() => {
+				const rows = this.$refs.description.value.split('\n').length
+				this.$refs.description.setAttribute('rows', rows)
+			})
+		},
+
 		/**
 		 * Enable the edit mode
 		 */
@@ -349,6 +363,7 @@ export default {
 				position: relative;
 				left: -12px;
 				padding: 4px 10px;
+				resize: none;
 			}
 
 			&__input,

src/views/Create.vue

@@ -58,13 +58,13 @@
 				<label class="hidden-visually" for="form-desc">
 					{{ t('forms', 'Description') }}
 				</label>
-				<NcRichContenteditable id="form-desc"
+				<textarea id="form-desc"
+					ref="description"
 					class="form-desc form-desc__input"
 					:value="form.description"
-					:multiline="true"
 					:placeholder="t('forms', 'Description (formatting using Markdown is supported)')"
 					:maxlength="maxStringLengths.formDescription"
-					@update:value="updateDescription" />
+					@input="updateDescription" />
 			</template>
 			<!-- eslint-disable-next-line vue/no-v-html -->
 			<div v-else class="form-desc form-desc__output" v-html="formDescription" />
@@ -142,7 +142,6 @@ import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
 import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
-import NcRichContenteditable from '@nextcloud/vue/dist/Components/NcRichContenteditable.js'
 import IconPlus from 'vue-material-design-icons/Plus.vue'
 
 import answerTypes from '../models/AnswerTypes.js'
@@ -168,7 +167,6 @@ export default {
 		NcAppContent,
 		NcEmptyContent,
 		NcLoadingIcon,
-		NcRichContenteditable,
 		Question,
 		QuestionLong,
 		QuestionShort,
@@ -284,24 +282,34 @@ export default {
 
 		enableEdit() {
 			this.edit = true
+			this.resizeDescription()
 		},
 
 		initEdit() {
 			if (this.form.title) {
 				this.edit = false
 			} else {
 				this.edit = true
+				this.resizeDescription()
 			}
 		},
 
+		resizeDescription() {
+			// nextTick to ensure textarea is attached to DOM
+			this.$nextTick(() => {
+				const rows = this.$refs.description.value.split('\n').length
+				this.$refs.description.setAttribute('rows', rows)
+			})
+		},
+
 		/**
 		 * Update the description
 		 *
-		 * @param {string} value New description
+		 * @param {InputEvent} ev The input event of the textarea
 		 */
-		updateDescription(value = '') {
-			// We need this for nextcloud/nextcloud-vue#3669
-			this.form.description = value.trimEnd()
+		updateDescription({ target }) {
+			this.form.description = target.value
+			this.resizeDescription()
 			this.saveDescription()
 		},
 
@@ -485,6 +493,7 @@ export default {
 
 			&__input {
 				padding: 3px 14px 18px; // 2px smaller because of border
+				resize: none;
 			}
 
 			// Styling for rendered Output