chore(ckeditor5/plugins): integrate cuttonote

packages/ckeditor5/src/plugins/cuttonote.ts

@@ -0,0 +1,62 @@
+import scissorsIcon from '../icons/scissors.svg?raw';
+import { ButtonView, HtmlDataProcessor, Plugin } from 'ckeditor5';
+
+export default class CutToNotePlugin extends Plugin {
+
+    private htmlDataProcessor!: HtmlDataProcessor;
+
+	init() {
+        // @ts-ignore Not sure why we need to pass a document.
+		this.htmlDataProcessor = new HtmlDataProcessor();
+
+		this.editor.ui.componentFactory.add( 'cutToNote', locale => {
+			const view = new ButtonView( locale );
+
+            console.log("Got ", scissorsIcon);
+			view.set( {
+				label: 'Cut & paste selection to sub-note',
+				// icon: scissorsIcon,
+				tooltip: true
+			} );
+
+			// Callback executed once the image is clicked.
+			view.on('execute', () => {
+				const editorEl = this.editor.editing.view.getDomRoot();
+				const component = glob.getComponentByEl(editorEl);
+
+				component.triggerCommand('cutIntoNote');
+			});
+
+			return view;
+		} );
+
+		this.editor.getSelectedHtml = () => this.getSelectedHtml();
+		this.editor.removeSelection = () => this.removeSelection();
+	}
+
+	getSelectedHtml() {
+		const model = this.editor.model;
+		const document = model.document;
+
+		const content = this.editor.data.toView(model.getSelectedContent(document.selection));
+
+		return this.htmlDataProcessor.toData(content);
+	}
+
+	async removeSelection() {
+		const model = this.editor.model;
+
+		model.deleteContent(model.document.selection);
+		this.editor.execute("paragraph");
+
+		const component = this.getComponent();
+
+		await component.triggerCommand('saveNoteDetailNow');
+	}
+
+	getComponent() {
+		const editorEl = this.editor.editing.view.getDomRoot();
+
+		return glob.getComponentByEl( editorEl );
+	}
+}