Use text editor for editing question description

Signed-off-by: Konstantin Myakshin <molodchick@gmail.com>
nextcloud · May 23, 2024 · bc3ff30 · bc3ff30
1 parent e6fe25b
commit bc3ff30
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 65 deletions.
diff --git a/src/components/Questions/Question.vue b/src/components/Questions/Question.vue
@@ -127,21 +127,23 @@
 				</NcActions>
 			</div>
 			<div v-if="hasDescription || !readOnly" class="question__header__description">
-<!--				<textarea -->
-<!--					ref="description"-->
-<!--					dir="auto"-->
-<!--					:value="description"-->
-<!--					:placeholder="t('forms', 'Description (formatting using Markdown is supported)')"-->
-<!--					:maxlength="maxStringLengths.questionDescription"-->
-<!--					class="question__header__description__input"-->
-<!--					@input="onDescriptionChange" />-->
-				<div>{{ t('forms', 'Description') }}</div>
-				<div ref="editor" v-if="!readOnly">
-
+				<div v-show="editor">
+					<label>{{ t('forms', 'Description') }}</label>
+					<div v-if="!readOnly" ref="editor" />
 				</div>
 
-				<!-- eslint-disable-next-line vue/no-v-html -->
-				<div v-else class="question__header__description__output" v-html="computedDescription" />
+				<template v-if="!editor">
+					<textarea ref="description"
+						dir="auto"
+						:value="description"
+						:placeholder="t('forms', 'Description (formatting using Markdown is supported)')"
+						:maxlength="maxStringLengths.questionDescription"
+						class="question__header__description__input"
+						@input="onDescriptionChange" />
+
+					<!-- eslint-disable-next-line vue/no-v-html -->
+					<div class="question__header__description__output" v-html="computedDescription" />
+				</template>
 			</div>
 		</div>
 
@@ -247,6 +249,12 @@ export default {
 		},
 	},
 
+	data() {
+		return {
+			editor: null,
+		}
+	},
+
 	computed: {
 		/**
 		 * Extend text with asterisk if question is required
@@ -285,9 +293,10 @@ export default {
 			return this.description !== ''
 		},
 	},
+
 	// Ensure description is sized correctly on initial render
 	async mounted() {
-		// this.$nextTick(() => this.resizeDescription())
+		this.$nextTick(() => this.resizeDescription())
 
 		await this.setupEditor()
 	},
@@ -296,20 +305,13 @@ export default {
 		this.editor?.destroy()
 	},
 
-
-	data() {
-		return {
-			editor: null,
-		}
-	},
-
 	methods: {
 		onTitleChange({ target }) {
 			this.$emit('update:text', target.value)
 		},
 
 		onDescriptionChange({ target }) {
-			// this.resizeDescription()
+			this.resizeDescription()
 			this.$emit('update:description', target.value)
 		},
 
@@ -321,17 +323,17 @@ export default {
 			this.$emit('update:isRequired', isRequired)
 		},
 
-		// resizeDescription() {
-		// 	// next tick ensures that the textarea is attached to DOM
-		// 	this.$nextTick(() => {
-		// 		const textarea = this.$refs.description
-		// 		if (textarea) {
-		// 			textarea.style.cssText = 'height: 0'
-		// 			// include 2px border
-		// 			textarea.style.cssText = `height: ${textarea.scrollHeight + 4}px`
-		// 		}
-		// 	})
-		// },
+		resizeDescription() {
+			// next tick ensures that the textarea is attached to DOM
+			this.$nextTick(() => {
+				const textarea = this.$refs.description
+				if (textarea) {
+					textarea.style.cssText = 'height: 0'
+					// include 2px border
+					textarea.style.cssText = `height: ${textarea.scrollHeight + 4}px`
+				}
+			})
+		},
 
 		/**
 		 * Reorder question but keep focus on the button
@@ -359,29 +361,22 @@ export default {
 			this.$emit('clone')
 		},
 
-		//fixme: move to editor mixin
 		async setupEditor() {
+			if (!window.OCA.Text) {
+				return
+			}
+
 			this.editor = await window.OCA.Text.createEditor({
-					el: this.$refs.editor,
-					content: this.description,
-					readOnly: false,
-					// shareToken: this.shareTokenParam || null,
-					// autofocus: false,
-					// onLoaded: () => {
-					// 	this.done('editor')
-					// },
-					onUpdate: ({ markdown }) => {
-						this.updateEditorContent(markdown)
-					},
-					// onOutlineToggle: (visible) => {
-					// 	this.toggleOutlineFromEditor(visible)
-					// },
-				})
+				el: this.$refs.editor,
+				content: this.description,
+				readOnly: false,
+				onUpdate: ({ markdown }) => {
+					this.updateEditorContent(markdown)
+				},
+			})
 		},
 
 		updateEditorContent: debounce(function(markdown) {
-			this.description = markdown
-			this.reader?.setContent(this.description)
 			this.$emit('update:description', this.description)
 		}, 200, { immediate: true }),
 	},

diff --git a/src/views/Create.vue b/src/views/Create.vue
@@ -65,18 +65,27 @@
 						autofocus
 						@input="onTitleChange" />
 				</h2>
-				<label class="hidden-visually" for="form-desc">
-					{{ t('forms', 'Description') }}
-				</label>
-				<textarea id="form-desc"
-					ref="description"
-					class="form-desc"
-					rows="1"
-					dir="auto"
-					:value="form.description"
-					:placeholder="t('forms', 'Description (formatting using Markdown is supported)')"
-					:maxlength="maxStringLengths.formDescription"
-					@input="updateDescription" />
+
+				<div v-show="editor">
+					<label for="form-desc">{{ t('forms', 'Description') }}</label>
+					<div id="form-desc" ref="editor" />
+				</div>
+
+				<template v-if="!editor">
+					<label class="hidden-visually" for="form-desc">
+						{{ t('forms', 'Description') }}
+					</label>
+					<textarea id="form-desc"
+						ref="description"
+						class="form-desc"
+						rows="1"
+						dir="auto"
+						:value="form.description"
+						:placeholder="t('forms', 'Description (formatting using Markdown is supported)')"
+						:maxlength="maxStringLengths.formDescription"
+						@input="updateDescription" />
+				</template>
+
 				<!-- Show expiration message-->
 				<p v-if="form.expires && form.showExpiration" class="info-message">
 					{{ expirationMessage }}
@@ -177,6 +186,7 @@ window.axios = axios
 
 export default {
 	name: 'Create',
+
 	components: {
 		Draggable,
 		IconLock,
@@ -193,7 +203,9 @@ export default {
 		TopBar,
 	},
 
-	mixins: [ViewsMixin],
+	mixins: [
+		ViewsMixin,
+	],
 
 	data() {
 		return {
@@ -205,6 +217,7 @@ export default {
 
 			maxStringLengths: loadState('forms', 'maxStringLengths'),
 			questionMenuOpened: false,
+			editor: null,
 		}
 	},
 
@@ -285,9 +298,15 @@ export default {
 		},
 	},
 
-	mounted() {
+	async mounted() {
 		this.fetchFullForm(this.form.id)
 		SetWindowTitle(this.formTitle)
+
+		await this.setupEditor()
+	},
+
+	beforeDestroy() {
+		this.editor?.destroy()
 	},
 
 	methods: {
@@ -465,6 +484,22 @@ export default {
 				this.isLoadingQuestions = false
 			}
 		},
+
+		async setupEditor() {
+			if (!window.OCA.Text) {
+				return
+			}
+
+			this.editor = await window.OCA.Text.createEditor({
+				el: this.$refs.editor,
+				content: this.form.description,
+				readOnly: false,
+				onUpdate: ({ markdown }) => {
+					this.form.description = markdown
+					this.saveDescription()
+				},
+			})
+		},
 	},
 }
 </script>