fix(settings): respect the writing mode in the signature editor

src/components/EditorSettings.vue

@@ -8,20 +8,24 @@
 		<p>
 			<input
 				id="plaintext"
-				v-model="mode"
+				ref="plaintext"
+				:name="radioGroupName"
 				type="radio"
 				class="radio"
-				value="plaintext">
-			<label :class="{ primary: mode === 'plaintext' }" for="plaintext">
+				:checked="account.editorMode === EDITOR_MODE_TEXT"
+				@change="selectMode(EDITOR_MODE_TEXT)">
+			<label :class="{ primary: account.editorMode === EDITOR_MODE_TEXT }" for="plaintext">
 				{{ t('mail', 'Plain text') }}
 			</label>
 			<input
 				id="richtext"
-				v-model="mode"
+				ref="richtext"
+				:name="radioGroupName"
 				type="radio"
 				class="radio"
-				value="richtext">
-			<label :class="{ primary: mode === 'richtext' }" for="richtext">
+				:checked="account.editorMode === EDITOR_MODE_HTML"
+				@change="selectMode(EDITOR_MODE_HTML)">
+			<label :class="{ primary: account.editorMode === EDITOR_MODE_HTML }" for="richtext">
 				{{ t('mail', 'Rich text') }}
 			</label>
 		</p>
@@ -31,6 +35,7 @@
 <script>
 import { mapStores } from 'pinia'
 import Logger from '../logger.js'
+import { EDITOR_MODE_HTML, EDITOR_MODE_TEXT } from '../store/constants.js'
 import useMainStore from '../store/mainStore.js'
 
 export default {
@@ -42,33 +47,70 @@ export default {
 		},
 	},
 
-	data() {
-		return {
-			mode: this.account.editorMode,
-		}
-	},
-
 	computed: {
 		...mapStores(useMainStore),
+
+		EDITOR_MODE_TEXT: () => EDITOR_MODE_TEXT,
+		EDITOR_MODE_HTML: () => EDITOR_MODE_HTML,
+		radioGroupName() {
+			return `editor-mode-${this.account.id}`
+		},
 	},
 
-	watch: {
-		mode(val, oldVal) {
+	methods: {
+		selectMode(mode) {
+			if (mode === this.account.editorMode) {
+				return
+			}
+
+			if (this.account.editorMode === EDITOR_MODE_HTML && mode === EDITOR_MODE_TEXT) {
+				this.syncRadios()
+				OC.dialogs.confirmDestructive(
+					t('mail', 'Switching to plain text removes any existing formatting such as bold, italic, underline and inline images — including those in your signature.'),
+					t('mail', 'Switch to plain text'),
+					{
+						type: OC.dialogs.YES_NO_BUTTONS,
+						confirm: t('mail', 'Switch and remove formatting'),
+						confirmClasses: 'error',
+						cancel: t('mail', 'Keep rich text'),
+					},
+					(decision) => {
+						if (decision) {
+							this.persistMode(mode)
+						}
+					},
+				)
+				return
+			}
+
+			this.persistMode(mode)
+		},
+
+		persistMode(mode) {
 			this.mainStore.patchAccount({
 				account: this.account,
 				data: {
-					editorMode: val,
+					editorMode: mode,
 				},
 			})
 				.then(() => {
 					Logger.info('editor mode updated')
 				})
 				.catch((error) => {
 					Logger.error('could not update editor mode', { error })
-					this.editorMode = oldVal
+					this.syncRadios()
 					throw error
 				})
 		},
+
+		syncRadios() {
+			if (this.$refs.plaintext) {
+				this.$refs.plaintext.checked = this.account.editorMode === EDITOR_MODE_TEXT
+			}
+			if (this.$refs.richtext) {
+				this.$refs.richtext.checked = this.account.editorMode === EDITOR_MODE_HTML
+			}
+		},
 	},
 }
 </script>

src/components/SignatureSettings.vue

@@ -28,8 +28,9 @@
 		<!-- Added wrapper to give the signature editor a clear input-style border -->
 		<div class="signature-editor-wrapper">
 			<TextEditor
+				:key="account.editorMode"
 				v-model="signature"
-				:html="true"
+				:html="editorIsHtml"
 				:placeholder="t('mail', 'Signature …')"
 				:bus="bus"
 				class="signature-editor-wrapper__editor" />
@@ -66,8 +67,9 @@ import { mapStores } from 'pinia'
 import IconCheck from 'vue-material-design-icons/Check.vue'
 import TextEditor from './TextEditor.vue'
 import logger from '../logger.js'
+import { EDITOR_MODE_HTML } from '../store/constants.js'
 import useMainStore from '../store/mainStore.js'
-import { detect, toHtml } from '../util/text.js'
+import { detect, toHtml, toPlain } from '../util/text.js'
 
 export default {
 	name: 'SignatureSettings',
@@ -98,6 +100,10 @@ export default {
 
 	computed: {
 		...mapStores(useMainStore),
+		editorIsHtml() {
+			return this.account.editorMode === EDITOR_MODE_HTML
+		},
+
 		identities() {
 			const identities = this.account.aliases.map((alias) => {
 				return {
@@ -122,6 +128,10 @@ export default {
 	},
 
 	watch: {
+		editorIsHtml() {
+			this.signature = this.formatSignature(this.signature)
+		},
+
 		async signatureAboveQuote(val, oldVal) {
 			try {
 				await this.mainStore.patchAccount({
@@ -146,9 +156,15 @@ export default {
 		changeIdentity(identity) {
 			logger.debug('select identity', { identity })
 			this.identity = identity
-			this.signature = identity.signature
-				? toHtml(detect(identity.signature)).value
-				: ''
+			this.signature = this.formatSignature(identity.signature)
+		},
+
+		formatSignature(signature) {
+			if (!signature) {
+				return ''
+			}
+			const detected = detect(signature)
+			return this.editorIsHtml ? toHtml(detected).value : toPlain(detected).value
 		},
 
 		async deleteSignature() {

src/tests/unit/components/SignatureSettings.vue.spec.js

@@ -6,6 +6,7 @@
 import { createLocalVue, shallowMount } from '@vue/test-utils'
 import SignatureSettings from '../../../components/SignatureSettings.vue'
 import Nextcloud from '../../../mixins/Nextcloud.js'
+import { EDITOR_MODE_HTML } from '../../../store/constants.js'
 
 const localVue = createLocalVue()
 
@@ -18,6 +19,7 @@ describe('SignatureSettings', () => {
 			propsData: {
 				account: {
 					aliases: [],
+					editorMode: EDITOR_MODE_HTML,
 					signature: String('<p>Lorem ipsum</p>').repeat(120000),
 				},
 			},