GH-7141: Add ckeditor plugin for mail

- Move conversion for paragraph to <p style="margin:0;"></p> to plugin

Signed-off-by: Daniel Kesselberg <mail@danielkesselberg.de>

src/ckeditor/mail/MailPlugin.js

@@ -0,0 +1,53 @@
+/**
+ * @author Daniel Kesselberg <mail@danielkesselberg.de>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This code is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License, version 3,
+ * as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License, version 3,
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>
+ *
+ */
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin'
+import {Paragraph} from '@ckeditor/ckeditor5-paragraph'
+
+export default class Mail extends Plugin {
+
+	static get requires() {
+		return [Paragraph]
+	}
+
+	init() {
+		this._overwriteParagraphConversion()
+	}
+
+	/**
+	 * Overwrite the elementToElement conversion
+	 * from the default paragraph plugin to add
+	 * margin:0 to every <p>.
+	 *
+	 * @private
+	 */
+	_overwriteParagraphConversion() {
+		this.editor.conversion.elementToElement({
+			model: 'paragraph',
+			view: {
+				name: 'p',
+				styles: {
+					'margin': 0,
+				},
+			},
+			converterPriority: 'high',
+		})
+	}
+
+}

src/components/TextEditor.vue

@@ -52,6 +52,7 @@ import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/base64u
 import ImagePlugin from '@ckeditor/ckeditor5-image/src/image'
 import ImageResizePlugin from '@ckeditor/ckeditor5-image/src/imageresize'
 import ImageUploadPlugin from '@ckeditor/ckeditor5-image/src/imageupload'
+import MailPlugin from '../ckeditor/mail/MailPlugin'
 
 import { getLanguage } from '@nextcloud/l10n'
 
@@ -108,6 +109,7 @@ export default {
 				ImageUploadPlugin,
 				Base64UploadAdapter,
 				ImageResizePlugin,
+				MailPlugin,
 			])
 			toolbar.unshift(...[
 				'heading',
@@ -181,20 +183,6 @@ export default {
 
 			this.editorInstance = editor
 
-			// Set 0 pixel margin to all <p> elements
-			editor.conversion.for('downcast').add((dispatcher) => {
-				dispatcher.on(
-					'insert:paragraph',
-					(evt, data, conversionApi) => {
-						const viewWriter = conversionApi.writer
-						viewWriter.setStyle('margin', '0', conversionApi.mapper.toViewElement(data.item))
-					},
-					{
-						priority: 'low',
-					}
-				)
-			})
-
 			schema.on(
 				'checkChild',
 				(evt, args) => {

src/tests/unit/components/MailPlugin.spec.js

@@ -0,0 +1,40 @@
+/*
+ * @copyright 2022 Daniel Kesselberg <mail@danielkesselberg.de>
+ *
+ * @author 2022 Daniel Kesselberg <mail@danielkesselberg.de>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import VirtualTestEditor from '../../virtualtesteditor'
+import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph'
+import MailPlugin from '../../../ckeditor/mail/MailPlugin'
+
+describe('MailPlugin', () => {
+
+	it('Add margin:0 to paragraph', async() => {
+		const text = '<p>bonjour bonjour</p>'
+		const expected = '<p style="margin:0;">bonjour bonjour</p>'
+
+		const editor = await VirtualTestEditor.create({
+			initialData: text,
+			plugins: [ParagraphPlugin, MailPlugin],
+		})
+
+		expect(editor.getData()).toEqual(expected)
+	})
+
+})