feat(editor): Use text editor

Signed-off-by: Julius Härtl <jus@bitgrid.net>

Author: juliusknorr

lib/Controller/PageController.php

@@ -6,10 +6,12 @@
 
 use OCA\Notes\Service\NotesService;
 
+use OCA\Text\Event\LoadEditor;
 use OCP\AppFramework\Controller;
 use OCP\AppFramework\Http\TemplateResponse;
 use OCP\AppFramework\Http\ContentSecurityPolicy;
 use OCP\AppFramework\Http\RedirectResponse;
+use OCP\EventDispatcher\IEventDispatcher;
 use OCP\IRequest;
 use OCP\IURLGenerator;
 use OCP\IUserSession;
@@ -18,18 +20,21 @@ class PageController extends Controller {
 	private NotesService $notesService;
 	private IUserSession $userSession;
 	private IURLGenerator $urlGenerator;
+	private IEventDispatcher $eventDispatcher;
 
 	public function __construct(
 		string $AppName,
 		IRequest $request,
 		NotesService $notesService,
 		IUserSession $userSession,
-		IURLGenerator $urlGenerator
+		IURLGenerator $urlGenerator,
+		IEventDispatcher $eventDispatcher
 	) {
 		parent::__construct($AppName, $request);
 		$this->notesService = $notesService;
 		$this->userSession = $userSession;
 		$this->urlGenerator = $urlGenerator;
+		$this->eventDispatcher = $eventDispatcher;
 	}
 
 
@@ -45,6 +50,10 @@ public function index() : TemplateResponse {
 			[ ]
 		);
 
+		if (class_exists(LoadEditor::class)) {
+			$this->eventDispatcher->dispatchTyped(new LoadEditor());
+		}
+
 		$csp = new ContentSecurityPolicy();
 		$csp->addAllowedImageDomain('*');
 		$response->setContentSecurityPolicy($csp);

src/components/Note.vue

@@ -1,6 +1,7 @@
 <template>
 	<NcAppContent :class="{ loading: loading || isManualSave, 'icon-error': !loading && (!note || note.error), 'sidebar-open': sidebarOpen }">
-		<div v-if="!loading && note && !note.error && !note.deleting"
+		<div class="text-editor" v-if="useTextEditor" ref="editor" v-show="!loading"></div>
+		<div v-else-if="!loading && note && !note.error && !note.deleting"
 			id="note-container"
 			class="note-container"
 			:class="{ fullscreen: fullscreen }"
@@ -27,7 +28,7 @@
 					</div>
 				</div>
 			</NcModal>
-			<div class="note-editor">
+			<div class="note-editor" v-else>
 				<div v-show="!note.content" class="placeholder">
 					{{ preview ? t('notes', 'Empty note') : t('notes', 'Write …') }}
 				</div>
@@ -154,6 +155,7 @@ export default {
 
 	data() {
 		return {
+			useTextEditor: true,
 			loading: false,
 			fullscreen: false,
 			preview: false,
@@ -163,6 +165,7 @@ export default {
 			refreshTimer: null,
 			etag: null,
 			showConflict: false,
+			editor: null,
 		}
 	},
 
@@ -217,8 +220,10 @@ export default {
 		this.onUpdateTitle(null)
 	},
 
+
+
 	methods: {
-		fetchData() {
+		async fetchData() {
 			this.etag = null
 			this.stopRefreshTimer()
 
@@ -235,11 +240,38 @@ export default {
 						showError(t('notes', 'Error from Nextcloud server: {msg}', { msg: note.errorType }))
 					}
 					this.startRefreshTimer()
+					this.loadTextEditor()
 				})
 				.catch(() => {
 					// note not found
 				})
 				.then(() => {
+					this.loading = this.useTextEditor || false
+				})
+		},
+
+		async loadTextEditor() {
+			if (!this.useTextEditor) {
+				return
+			}
+			if (this.useTextEditor && !this.$refs?.editor) {
+				await this.$nextTick
+			}
+			this?.editor?.destroy()
+			this.loading = true
+			this.editor = (await window.OCA.Text.createEditor({
+				el: this.$refs.editor,
+				fileId: parseInt(this.noteId),
+				readOnly: false,
+				onUpdate: ({ markdown }) => {
+					if (this.note) {
+						this.onEdit(markdown)
+					}
+					//this.content = markdown
+					//this.editorFile.setContent(markdown)
+				},
+			}))
+				.onLoaded(() => {
 					this.loading = false
 				})
 		},
@@ -299,6 +331,7 @@ export default {
 		},
 
 		onVisibilityChange() {
+			return;
 			if (document.visibilityState === 'visible') {
 				this.stopRefreshTimer()
 				this.refreshNote()
@@ -336,6 +369,21 @@ export default {
 		},
 
 		onEdit(newContent) {
+			if (this.useTextEditor) {
+				const note = {
+					...this.note,
+					content: newContent,
+					unsaved: true,
+				}
+				store.commit('updateNote', note)
+				if (this.isNewNote) {
+					queueCommand(note.id, 'autotitle')
+				}
+				this.$forceUpdate()
+
+				return
+			}
+
 			if (this.note.content !== newContent) {
 				this.stopRefreshTimer()
 				const note = {
@@ -376,6 +424,9 @@ export default {
 		},
 
 		onKeyPress(event) {
+			if (this.useTextEditor) {
+				return
+			}
 			if (event.ctrlKey || event.metaKey) {
 				switch (event.key.toLowerCase()) {
 				case 's':
@@ -391,6 +442,10 @@ export default {
 		},
 
 		onManualSave() {
+			if (!this.useTextEditor) {
+				return
+			}
+
 			const note = {
 				...this.note,
 			}
@@ -413,6 +468,10 @@ export default {
 }
 </script>
 <style scoped>
+.text-editor {
+	height: 100%;
+}
+
 .note-container {
 	min-height: 100%;
 	width: 100%;