Add slash command to mail composer

package.json

@@ -29,6 +29,7 @@
     "@ckeditor/ckeditor5-image": "37.1.0",
     "@ckeditor/ckeditor5-link": "37.1.0",
     "@ckeditor/ckeditor5-list": "37.1.0",
+    "@ckeditor/ckeditor5-mention": "37.1.0",
     "@ckeditor/ckeditor5-paragraph": "37.1.0",
     "@ckeditor/ckeditor5-remove-format": "37.1.0",
     "@ckeditor/ckeditor5-theme-lark": "37.1.0",
@@ -72,7 +73,6 @@
     "raw-loader": "^4.0.2",
     "stream-browserify": "^3.0.0",
     "stylelint": "^15.10.3",
-    "tributejs": "^5.1.3",
     "util": "^0.12.5",
     "uuid": "^9.0.1",
     "v-tooltip": "^2.1.3",

src/ckeditor/smartpicker/InsertItem.js

@@ -0,0 +1,81 @@
+/**
+ * @author Daniel Kesselberg <[email protected]>
+ *
+ * Mail
+ *
+ * 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 Command from '@ckeditor/ckeditor5-core/src/command'
+export default class InsertPickerItemCommand extends Command {
+
+	/**
+	 * @param {module:core/editor/editor~Editor} editor instance
+	 * @param {module:engine/model/writer~Writer} writer instance
+	 * @param {string} item smart picker or emoji picker
+	 * @param trigger
+	 */
+	InsertItem(editor, writer, item, trigger) {
+		const currentPosition = editor.model.document.selection.getLastPosition()
+		if (currentPosition === null) {
+			// null as current position is probably not possible
+			// @TODO Add error to handle such a situation in the callback
+			return
+		}
+
+		const range = editor.model.createRange(
+			currentPosition.getShiftedBy(-5),
+			currentPosition
+		)
+
+		// Iterate over all items in this range:
+		const walker = range.getWalker({ shallow: false, direction: 'backward' })
+
+		for (const value of walker) {
+			if (value.type === 'text' && value.item.data.includes(trigger)) {
+				writer.remove(value.item)
+
+				const text = value.item.data
+				const lastSlash = text.lastIndexOf(trigger)
+
+				const textElement = writer.createElement('paragraph')
+				writer.insertText(text.substring(0, lastSlash), textElement)
+				editor.model.insertContent(textElement)
+
+				const itemElement = writer.createElement('paragraph')
+				writer.insertText(item, itemElement)
+				editor.model.insertContent(itemElement)
+
+				return
+			}
+		}
+
+		// @TODO If we end up here, we did not find the slash. We should throw an error maybe.
+	}
+
+	/**
+	 * @param {string}  item link from smart picker or emoji from emoji picker
+	 * @param trigger
+	 */
+	execute(item, trigger) {
+		this.editor.model.change(writer => {
+			this.InsertItem(this.editor, writer, item, trigger)
+		})
+	}
+
+	refresh() {
+		this.isEnabled = true
+	}
+
+}

src/ckeditor/smartpicker/PickerPlugin.js

@@ -0,0 +1,31 @@
+/**
+ * @author Daniel Kesselberg <[email protected]>
+ *
+ * Mail
+ *
+ * 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 InsertItem from './InsertItem'
+export default class PickerPlugin extends Plugin {
+
+	init() {
+		this.editor.commands.add(
+			'InsertItem',
+			new InsertItem(this.editor)
+		)
+	}
+
+}