diff --git a/.nextcloudignore b/.nextcloudignore
new file mode 100644
index 000000000..90b486c88
--- /dev/null
+++ b/.nextcloudignore
@@ -0,0 +1,28 @@
+/build/
+/.git
+/.github
+/docs/
+/tests
+/babel.config.js
+/.editorconfig
+/.eslintrc.js
+/.nextcloudignore
+/webpack.*.js
+/.codecov.yml
+/composer.json
+/composer.lock
+/_config.yml
+/.drone.yml
+/.travis.yml
+/.eslintignore
+/.eslintrc.yml
+/.gitignore
+/issue_template.md
+/krankerl.toml
+/Makefile
+/mkdocs.yml
+/run-eslint.sh
+/package.json
+/package-lock.json
+/node_modules/
+/src/
diff --git a/appinfo/info.xml b/appinfo/info.xml
index 4014d76a3..bf162a42a 100644
--- a/appinfo/info.xml
+++ b/appinfo/info.xml
@@ -7,7 +7,7 @@
 	<description><![CDATA[
 The Notes app is a distraction free notes taking app for [Nextcloud](https://www.nextcloud.com/). It provides categories for better organization and supports formatting using [Markdown](https://en.wikipedia.org/wiki/Markdown) syntax. Notes are saved as files in your Nextcloud, so you can view and edit them with every Nextcloud client. Furthermore, a separate [REST API](https://github.com/nextcloud/notes/blob/master/docs/api/README.md) allows for an easy integration into third-party apps (currently, there are notes apps for [Android](https://github.com/nextcloud/notes-android), [iOS](https://github.com/nextcloud/notes-ios) and the [console](https://git.danielmoch.com/nncli/about) which allow convenient access to your Nextcloud notes). Further features include marking notes as favorites.
 ]]></description>
-	<version>4.6.0</version>
+	<version>4.7.0-beta.0</version>
 	<licence>agpl</licence>
 	<author>Kristof Hamann</author>
 	<author>Bernhard Posselt</author>
@@ -22,12 +22,13 @@ The Notes app is a distraction free notes taking app for [Nextcloud](https://www
 	<repository type="git">https://github.com/nextcloud/notes.git</repository>
 	<screenshot small-thumbnail="https://raw.githubusercontent.com/nextcloud/screenshots/master/apps/Notes/notes-thumbnail.jpg">https://raw.githubusercontent.com/nextcloud/screenshots/master/apps/Notes/notes.png</screenshot>
 	<dependencies>
-		<php min-version="7.4" max-version="8.1" />
+		<php min-version="7.4" max-version="8.2" />
 		<nextcloud min-version="25" max-version="27" />
 	</dependencies>
 	<repair-steps>
 		<post-migration>
 			<step>OCA\Notes\Migration\Cleanup</step>
+			<step>OCA\Notes\Migration\EditorHint</step>
 		</post-migration>
 	</repair-steps>
 
diff --git a/appinfo/routes.php b/appinfo/routes.php
index bc16fec3d..b1a7cd8b6 100644
--- a/appinfo/routes.php
+++ b/appinfo/routes.php
@@ -100,6 +100,7 @@
 	//////////  S E T T I N G S  //////////
 	['name' => 'settings#set', 'url' => '/settings', 'verb' => 'PUT'],
 	['name' => 'settings#get', 'url' => '/settings', 'verb' => 'GET'],
+	['name' => 'settings#migrate', 'url' => '/settings/migrate', 'verb' => 'POST'],
 
 
 	//////////  A P I  //////////
diff --git a/krankerl.toml b/krankerl.toml
new file mode 100644
index 000000000..2c98a14f4
--- /dev/null
+++ b/krankerl.toml
@@ -0,0 +1,5 @@
+[package]
+before_cmds = [
+    'npm ci',
+	'npm run build'
+]
diff --git a/lib/Controller/PageController.php b/lib/Controller/PageController.php
index b9baf3e0c..d61803461 100644
--- a/lib/Controller/PageController.php
+++ b/lib/Controller/PageController.php
@@ -4,38 +4,55 @@
 
 namespace OCA\Notes\Controller;
 
+use OCA\Notes\AppInfo\Application;
 use OCA\Notes\Service\NotesService;
 
+use OCA\Notes\Service\SettingsService;
+use OCA\Text\Event\LoadEditor;
+use OCP\App\IAppManager;
 use OCP\AppFramework\Controller;
 use OCP\AppFramework\Http\TemplateResponse;
 use OCP\AppFramework\Http\ContentSecurityPolicy;
 use OCP\AppFramework\Http\RedirectResponse;
+use OCP\AppFramework\Services\IInitialState;
+use OCP\EventDispatcher\IEventDispatcher;
+use OCP\IConfig;
 use OCP\IRequest;
 use OCP\IURLGenerator;
 use OCP\IUserSession;
 
 class PageController extends Controller {
 	private NotesService $notesService;
+	private IConfig $config;
 	private IUserSession $userSession;
 	private IURLGenerator $urlGenerator;
+	private IEventDispatcher $eventDispatcher;
+	private IInitialState $initialState;
 
 	public function __construct(
 		string $AppName,
 		IRequest $request,
 		NotesService $notesService,
+		IConfig $config,
 		IUserSession $userSession,
-		IURLGenerator $urlGenerator
+		IURLGenerator $urlGenerator,
+		IEventDispatcher $eventDispatcher,
+		IInitialState $initialState
 	) {
 		parent::__construct($AppName, $request);
 		$this->notesService = $notesService;
+		$this->config = $config;
 		$this->userSession = $userSession;
 		$this->urlGenerator = $urlGenerator;
+		$this->eventDispatcher = $eventDispatcher;
+		$this->initialState = $initialState;
 	}
 
 
 	/**
 	 * @NoAdminRequired
 	 * @NoCSRFRequired
+	 * @suppress PhanUndeclaredClassReference, PhanTypeMismatchArgument, PhanUndeclaredClassMethod
 	 */
 	public function index() : TemplateResponse {
 		$devMode = !is_file(dirname(__FILE__).'/../../js/notes-main.js');
@@ -45,6 +62,20 @@ public function index() : TemplateResponse {
 			[ ]
 		);
 
+		if (\OCP\Server::get(IAppManager::class)->isEnabledForUser('text') && class_exists(LoadEditor::class)) {
+			$this->eventDispatcher->dispatchTyped(new LoadEditor());
+		}
+
+		$this->initialState->provideInitialState(
+			'config',
+			\OCP\Server::get(SettingsService::class)->getPublic($this->userSession->getUser()->getUID())
+		);
+
+		$this->initialState->provideInitialState(
+			'editorHint',
+			$this->config->getUserValue($this->userSession->getUser()->getUID(), Application::APP_ID, 'editorHint', '')
+		);
+
 		$csp = new ContentSecurityPolicy();
 		$csp->addAllowedImageDomain('*');
 		$response->setContentSecurityPolicy($csp);
diff --git a/lib/Controller/SettingsController.php b/lib/Controller/SettingsController.php
index 1d6efb340..9d7a6fbd9 100644
--- a/lib/Controller/SettingsController.php
+++ b/lib/Controller/SettingsController.php
@@ -48,4 +48,9 @@ public function set(): JSONResponse {
 	public function get(): JSONResponse {
 		return new JSONResponse($this->service->getAll($this->getUID()));
 	}
+
+	public function migrate(): JSONResponse {
+		$this->service->delete($this->getUID(), 'editorHint');
+		return new JSONResponse();
+	}
 }
diff --git a/lib/Migration/EditorHint.php b/lib/Migration/EditorHint.php
new file mode 100644
index 000000000..1a1f922ea
--- /dev/null
+++ b/lib/Migration/EditorHint.php
@@ -0,0 +1,63 @@
+<?php
+
+declare(strict_types=1);
+
+/**
+ * @copyright Copyright (c) 2023 Julius Härtl <jus@bitgrid.net>
+ *
+ * @author Julius Härtl <jus@bitgrid.net>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * 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/>.
+ */
+
+
+namespace OCA\Notes\Migration;
+
+use OCA\Notes\AppInfo\Application;
+use OCP\IConfig;
+use OCP\IUser;
+use OCP\IUserManager;
+use OCP\Migration\IOutput;
+use OCP\Migration\IRepairStep;
+
+class EditorHint implements IRepairStep {
+	private IConfig $config;
+	private IUserManager $userManager;
+	public function __construct(IConfig $config, IUserManager $userManager) {
+		$this->config = $config;
+		$this->userManager = $userManager;
+	}
+
+	public function getName() {
+		return 'Show a hint about the new editor to existing users';
+	}
+
+	public function run(IOutput $output) {
+		$appVersion = $this->config->getAppValue('text', 'installed_version');
+
+		if (!$appVersion || version_compare($appVersion, '4.7.0') !== -1) {
+			return;
+		}
+
+		$this->userManager->callForSeenUsers(function (IUser $user) {
+			if ($this->config->getUserValue($user->getUID(), Application::APP_ID, 'notesLastViewedNote', '') === '') {
+				return;
+			}
+
+			$this->config->setUserValue($user->getUID(), Application::APP_ID, 'editorHint', 'yes');
+		});
+	}
+}
diff --git a/lib/Service/SettingsService.php b/lib/Service/SettingsService.php
index 5fb97bcba..5f9a8d571 100644
--- a/lib/Service/SettingsService.php
+++ b/lib/Service/SettingsService.php
@@ -18,7 +18,7 @@ class SettingsService {
 	/* Allowed attributes */
 	private array $attrs;
 
-	private $defaultSuffixes = [ '.txt', '.md' ];
+	private $defaultSuffixes = [ '.md', '.txt' ];
 
 	public function __construct(
 		IConfig $config,
@@ -48,7 +48,7 @@ public function __construct(
 					return implode(DIRECTORY_SEPARATOR, $path);
 				},
 			],
-			'noteMode' => $this->getListAttrs('noteMode', ['edit', 'preview']),
+			'noteMode' => $this->getListAttrs('noteMode', ['rich', 'edit', 'preview']),
 			'customSuffix' => [
 				'default' => $this->defaultSuffixes[0],
 				'validate' => function ($value) {
@@ -168,6 +168,10 @@ public function get(string $uid, string $name) : string {
 		}
 	}
 
+	public function delete(string $uid, string $name): void {
+		$this->config->deleteUserValue($uid, Application::APP_ID, $name);
+	}
+
 	public function getPublic(string $uid) : \stdClass {
 		// initialize and load settings
 		$settings = $this->getAll($uid, true);
diff --git a/package-lock.json b/package-lock.json
index 39e20d53e..b61f1e226 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
         "@nextcloud/axios": "^2.2.0",
         "@nextcloud/dialogs": "^3.2.0",
         "@nextcloud/event-bus": "^3.0.2",
+        "@nextcloud/initial-state": "^2.0.0",
         "@nextcloud/moment": "^1.2.1",
         "@nextcloud/router": "^2.0.1",
         "@nextcloud/vue": "^7.3.0",
diff --git a/package.json b/package.json
index 66b28972c..f0b766197 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@nextcloud/axios": "^2.2.0",
     "@nextcloud/dialogs": "^3.2.0",
     "@nextcloud/event-bus": "^3.0.2",
+    "@nextcloud/initial-state": "^2.0.0",
     "@nextcloud/moment": "^1.2.1",
     "@nextcloud/router": "^2.0.1",
     "@nextcloud/vue": "^7.3.0",
diff --git a/src/App.vue b/src/App.vue
index d36b2616d..f9f0bff7d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,6 @@
 <template>
-	<NcContent app-name="notes" :content-class="{loading: loading.notes}">
+	<EditorHint v-if="editorHint" @close="editorHint=false" />
+	<NcContent v-else app-name="notes" :content-class="{loading: loading.notes}">
 		<NcAppNavigation :class="{loading: loading.notes, 'icon-error': error}">
 			<NcAppNavigationNew
 				v-show="!loading.notes && !error"
@@ -52,6 +53,7 @@ import {
 	NcAppNavigationItem,
 	NcContent,
 } from '@nextcloud/vue'
+import { loadState } from '@nextcloud/initial-state'
 import { showSuccess, TOAST_UNDO_TIMEOUT, TOAST_PERMANENT_TIMEOUT } from '@nextcloud/dialogs'
 import '@nextcloud/dialogs/styles/toast.scss'
 
@@ -61,6 +63,7 @@ import PlusIcon from 'vue-material-design-icons/Plus.vue'
 import AppSettings from './components/AppSettings.vue'
 import NavigationList from './components/NavigationList.vue'
 import AppHelp from './components/AppHelp.vue'
+import EditorHint from './components/Modal/EditorHint.vue'
 
 import { config } from './config.js'
 import { fetchNotes, noteExists, createNote, undoDeleteNote } from './NotesService.js'
@@ -72,6 +75,7 @@ export default {
 	components: {
 		AppHelp,
 		AppSettings,
+		EditorHint,
 		InfoIcon,
 		NavigationList,
 		NcAppContent,
@@ -97,6 +101,7 @@ export default {
 			deletedNotes: [],
 			refreshTimer: null,
 			helpVisible: false,
+			editorHint: loadState('notes', 'editorHint', '') === 'yes' && window.oc_appswebroots.text,
 		}
 	},
 
diff --git a/src/NotesService.js b/src/NotesService.js
index 0e927da51..ebbab6e9a 100644
--- a/src/NotesService.js
+++ b/src/NotesService.js
@@ -46,6 +46,15 @@ export const setSettings = settings => {
 		})
 }
 
+export const deleteEditorMode = () => {
+	return axios
+		.post(url('/settings/migrate'))
+		.catch(err => {
+			console.error(err)
+			throw err
+		})
+}
+
 export const getDashboardData = () => {
 	return axios
 		.get(url('/notes/dashboard'))
diff --git a/src/components/AppSettings.vue b/src/components/AppSettings.vue
index 2bb89eee3..f80bea2f3 100644
--- a/src/components/AppSettings.vue
+++ b/src/components/AppSettings.vue
@@ -63,11 +63,12 @@ export default {
 	data() {
 		return {
 			extensions: [
-				{ value: '.txt', label: '.txt' },
 				{ value: '.md', label: '.md' },
+				{ value: '.txt', label: '.txt' },
 				{ value: 'custom', label: t('notes', 'User defined') },
 			],
 			noteModes: [
+				{ value: 'rich', label: t('notes', 'Open in rich text mode') },
 				{ value: 'edit', label: t('notes', 'Open in edit mode') },
 				{ value: 'preview', label: t('notes', 'Open in preview mode') },
 			],
diff --git a/src/components/Modal/EditorHint.vue b/src/components/Modal/EditorHint.vue
new file mode 100644
index 000000000..3f0728c07
--- /dev/null
+++ b/src/components/Modal/EditorHint.vue
@@ -0,0 +1,72 @@
+<template>
+	<NcModal>
+		<div class="editor-hint-modal">
+			<h2>{{ t('notes', 'Rich text editor') }}</h2>
+
+			<p>{{ t('notes', 'You can now switch to use the easy to use and distraction free rich text editor. It allows you to edit notes without seeing any markdown marks.') }}</p>
+
+			<p>{{ t('notes', 'This option can also be changed later on in the Notes app settings.') }}</p>
+
+			<div class="submit-buttons">
+				<NcButton type="secondary" :disabled="loading" @click="useOld">
+					{{ t('notes', 'Keep plain markdown editor') }}
+				</NcButton>
+				<NcButton type="primary" :disabled="loading" @click="useNew">
+					{{ t('notes', 'Use rich editor') }}
+				</NcButton>
+			</div>
+		</div>
+	</NcModal>
+</template>
+<script>
+import { NcModal, NcButton } from '@nextcloud/vue'
+import { loadState } from '@nextcloud/initial-state'
+
+import { deleteEditorMode, setSettings } from './../../NotesService.js'
+
+export default {
+	components: {
+		NcModal,
+		NcButton,
+	},
+	data() {
+		return {
+			loading: false,
+		}
+	},
+	methods: {
+		async useOld() {
+			const oldState = loadState('notes', 'config', {})
+			setSettings({
+				...oldState,
+				noteMode: oldState?.nodeMode ?? 'edit',
+			})
+			await deleteEditorMode()
+			this.$emit('close')
+		},
+		async useNew() {
+			setSettings({
+				...loadState('notes', 'config', {}),
+				noteMode: 'rich',
+			})
+			await deleteEditorMode()
+			this.$emit('close')
+		},
+	},
+}
+</script>
+<style lang="scss" scoped>
+.editor-hint-modal {
+	margin: 24px;
+}
+
+.submit-buttons {
+	display: flex;
+	justify-content: flex-end;
+	margin-top: 24px;
+
+	button {
+		margin-left: 12px;
+	}
+}
+</style>
diff --git a/src/components/NavigationNoteItem.vue b/src/components/NavigationNoteItem.vue
index 4ee74b96b..e222d64cc 100644
--- a/src/components/NavigationNoteItem.vue
+++ b/src/components/NavigationNoteItem.vue
@@ -15,6 +15,10 @@
 			<NcActionButton :icon="actionFavoriteIcon" @click="onToggleFavorite">
 				{{ actionFavoriteText }}
 			</NcActionButton>
+			<NcActionButton icon="icon-details" @click="onToggleSidebar">
+				<SidebarIcon slot="icon" :size="20" />
+				{{ t('notes', 'Details') }}
+			</NcActionButton>
 			<NcActionButton v-if="!note.readonly" :icon="actionDeleteIcon" @click="onDeleteNote">
 				{{ t('notes', 'Delete note') }}
 			</NcActionButton>
@@ -32,7 +36,9 @@ import {
 	NcActionSeparator,
 	NcAppNavigationItem,
 } from '@nextcloud/vue'
+import SidebarIcon from 'vue-material-design-icons/PageLayoutSidebarRight.vue'
 import { showError } from '@nextcloud/dialogs'
+import store from '../store.js'
 
 import { setFavorite, setTitle, fetchNote, deleteNote } from '../NotesService.js'
 import { categoryLabel, routeIsNewNote } from '../Util.js'
@@ -44,6 +50,7 @@ export default {
 		NcActionButton,
 		NcActionSeparator,
 		NcAppNavigationItem,
+		SidebarIcon,
 	},
 
 	props: {
@@ -117,6 +124,11 @@ export default {
 			this.$emit('category-selected', this.note.category)
 		},
 
+		onToggleSidebar() {
+			this.actionsOpen = false
+			store.commit('setSidebarOpen', !store.state.app.sidebarOpen)
+		},
+
 		onRename(newTitle) {
 			this.loading.note = true
 			setTitle(this.note.id, newTitle)
diff --git a/src/components/Note.vue b/src/components/Note.vue
index 28eb36679..d74ad9ef5 100644
--- a/src/components/Note.vue
+++ b/src/components/Note.vue
@@ -1,150 +1,20 @@
 <template>
-	<NcAppContent :class="{ loading: loading || isManualSave, 'icon-error': !loading && (!note || note.error), 'sidebar-open': sidebarOpen }">
-		<div v-if="!loading && note && !note.error && !note.deleting"
-			id="note-container"
-			class="note-container"
-			:class="{ fullscreen: fullscreen }"
-		>
-			<NcModal v-if="note.conflict && showConflict" size="full" @close="showConflict=false">
-				<div class="conflict-modal">
-					<div class="conflict-header">
-						<SyncAlertIcon slot="icon" :size="30" fill-color="var(--color-error)" />
-						{{ t('notes', 'The note has been changed in another session. Please choose which version should be saved.') }}
-					</div>
-					<div class="conflict-solutions">
-						<ConflictSolution
-							:content="note.conflict.content"
-							:reference="note.reference.content"
-							:button="t('notes', 'Use version from server')"
-							@on-choose-solution="onUseRemoteVersion"
-						/>
-						<ConflictSolution
-							:content="note.content"
-							:reference="note.reference.content"
-							:button="t('notes', 'Use current version')"
-							@on-choose-solution="onUseLocalVersion"
-						/>
-					</div>
-				</div>
-			</NcModal>
-			<div class="note-editor">
-				<div v-show="!note.content" class="placeholder">
-					{{ preview ? t('notes', 'Empty note') : t('notes', 'Write …') }}
-				</div>
-				<ThePreview v-if="preview"
-					:value="note.content"
-					:noteid="noteId"
-					:readonly="note.readonly"
-					@input="onEdit"
-				/>
-				<TheEditor v-else
-					:value="note.content"
-					:noteid="noteId"
-					:notecategory="note.category"
-					:readonly="note.readonly"
-					@input="onEdit"
-				/>
-			</div>
-			<span class="action-buttons">
-				<NcActions :open.sync="actionsOpen" container=".action-buttons" menu-align="right">
-					<NcActionButton v-show="!sidebarOpen && !fullscreen"
-						icon="icon-details"
-						@click="onToggleSidebar"
-					>
-						<SidebarIcon slot="icon" :size="20" />
-						{{ t('notes', 'Details') }}
-					</NcActionButton>
-					<NcActionButton
-						v-tooltip.left="t('notes', 'CTRL + /')"
-						@click="onTogglePreview"
-					>
-						<EditIcon v-if="preview" slot="icon" :size="20" />
-						<EyeIcon v-else slot="icon" :size="20" />
-						{{ preview ? t('notes', 'Edit') : t('notes', 'Preview') }}
-					</NcActionButton>
-					<NcActionButton
-						:class="{ active: fullscreen }"
-						@click="onToggleDistractionFree"
-					>
-						<FullscreenIcon slot="icon" :size="20" />
-						{{ fullscreen ? t('notes', 'Exit full screen') : t('notes', 'Full screen') }}
-					</NcActionButton>
-				</NcActions>
-				<NcActions v-if="note.readonly">
-					<NcActionButton>
-						<NoEditIcon slot="icon" :size="20" />
-						{{ t('notes', 'Note is read-only. You cannot change it.') }}
-					</NcActionButton>
-				</NcActions>
-				<NcActions v-if="note.saveError" class="action-error">
-					<NcActionButton @click="onManualSave">
-						<SyncAlertIcon slot="icon" :size="20" fill-color="var(--color-text)" />
-						{{ t('notes', 'Save failed. Click to retry.') }}
-					</NcActionButton>
-				</NcActions>
-				<NcActions v-if="note.conflict" class="action-error">
-					<NcActionButton @click="showConflict=true">
-						<SyncAlertIcon slot="icon" :size="20" fill-color="var(--color-text)" />
-						{{ t('notes', 'Update conflict. Click for resolving manually.') }}
-					</NcActionButton>
-				</NcActions>
-			</span>
-		</div>
-	</NcAppContent>
+	<NoteRich v-if="rich" :note-id="noteId" />
+	<NotePlain v-else :note-id="noteId" />
 </template>
 <script>
-
-import {
-	NcActions,
-	NcActionButton,
-	NcAppContent,
-	NcModal,
-	Tooltip,
-	isMobile,
-} from '@nextcloud/vue'
-import { showError } from '@nextcloud/dialogs'
-import { emit } from '@nextcloud/event-bus'
-
-import EditIcon from 'vue-material-design-icons/LeadPencil.vue'
-import EyeIcon from 'vue-material-design-icons/Eye.vue'
-import FullscreenIcon from 'vue-material-design-icons/Fullscreen.vue'
-import NoEditIcon from 'vue-material-design-icons/PencilOff.vue'
-import SidebarIcon from 'vue-material-design-icons/PageLayoutSidebarRight.vue'
-import SyncAlertIcon from 'vue-material-design-icons/SyncAlert.vue'
-
-import { config } from '../config.js'
-import { fetchNote, refreshNote, saveNoteManually, queueCommand, conflictSolutionLocal, conflictSolutionRemote } from '../NotesService.js'
-import { routeIsNewNote } from '../Util.js'
-import TheEditor from './EditorEasyMDE.vue'
-import ThePreview from './EditorMarkdownIt.vue'
-import ConflictSolution from './ConflictSolution.vue'
+import NoteRich from './NoteRich.vue'
+import NotePlain from './NotePlain.vue'
 import store from '../store.js'
 
 export default {
 	name: 'Note',
 
 	components: {
-		ConflictSolution,
-		EditIcon,
-		EyeIcon,
-		FullscreenIcon,
-		NcActions,
-		NcActionButton,
-		NcAppContent,
-		NcModal,
-		NoEditIcon,
-		SidebarIcon,
-		SyncAlertIcon,
-		TheEditor,
-		ThePreview,
+		NoteRich,
+		NotePlain,
 	},
 
-	directives: {
-		tooltip: Tooltip,
-	},
-
-	mixins: [isMobile],
-
 	props: {
 		noteId: {
 			type: String,
@@ -152,354 +22,10 @@ export default {
 		},
 	},
 
-	data() {
-		return {
-			loading: false,
-			fullscreen: false,
-			preview: false,
-			actionsOpen: false,
-			autosaveTimer: null,
-			autotitleTimer: null,
-			refreshTimer: null,
-			etag: null,
-			showConflict: false,
-		}
-	},
-
 	computed: {
-		note() {
-			return store.getters.getNote(parseInt(this.noteId))
-		},
-		title() {
-			return this.note ? this.note.title : ''
-		},
-		isNewNote() {
-			return routeIsNewNote(this.$route)
-		},
-		isManualSave() {
-			return store.state.app.isManualSave
-		},
-		sidebarOpen() {
-			return store.state.app.sidebarOpen
-		},
-	},
-
-	watch: {
-		$route(to, from) {
-			if (to.name !== from.name || to.params.noteId !== from.params.noteId) {
-				this.fetchData()
-			}
-		},
-		title: 'onUpdateTitle',
-		'note.conflict'(newConflict, oldConflict) {
-			if (newConflict) {
-				this.showConflict = true
-			}
-		},
-	},
-
-	created() {
-		this.fetchData()
-		document.addEventListener('webkitfullscreenchange', this.onDetectFullscreen)
-		document.addEventListener('mozfullscreenchange', this.onDetectFullscreen)
-		document.addEventListener('fullscreenchange', this.onDetectFullscreen)
-		document.addEventListener('keydown', this.onKeyPress)
-		document.addEventListener('visibilitychange', this.onVisibilityChange)
-	},
-
-	destroyed() {
-		this.stopRefreshTimer()
-		document.removeEventListener('webkitfullscreenchange', this.onDetectFullscreen)
-		document.removeEventListener('mozfullscreenchange', this.onDetectFullscreen)
-		document.removeEventListener('fullscreenchange', this.onDetectFullscreen)
-		document.removeEventListener('keydown', this.onKeyPress)
-		document.removeEventListener('visibilitychange', this.onVisibilityChange)
-		this.onUpdateTitle(null)
-	},
-
-	methods: {
-		fetchData() {
-			this.etag = null
-			this.stopRefreshTimer()
-
-			if (this.isMobile) {
-				emit('toggle-navigation', { open: false })
-			}
-
-			this.onUpdateTitle(this.title)
-			this.loading = true
-			this.preview = store.state.app.settings.noteMode === 'preview' && !this.isNewNote
-			fetchNote(parseInt(this.noteId))
-				.then((note) => {
-					if (note.error) {
-						showError(t('notes', 'Error from Nextcloud server: {msg}', { msg: note.errorType }))
-					}
-					this.startRefreshTimer()
-				})
-				.catch(() => {
-					// note not found
-				})
-				.then(() => {
-					this.loading = false
-				})
-		},
-
-		onUpdateTitle(title) {
-			const defaultTitle = store.state.app.documentTitle
-			if (title) {
-				document.title = title + ' - ' + defaultTitle
-			} else {
-				document.title = defaultTitle
-			}
-		},
-
-		onTogglePreview() {
-			this.preview = !this.preview
-			this.actionsOpen = false
-		},
-
-		onDetectFullscreen() {
-			this.fullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen
-		},
-
-		onToggleDistractionFree() {
-			function launchIntoFullscreen(element) {
-				if (element.requestFullscreen) {
-					element.requestFullscreen()
-				} else if (element.mozRequestFullScreen) {
-					element.mozRequestFullScreen()
-				} else if (element.webkitRequestFullscreen) {
-					element.webkitRequestFullscreen()
-				} else if (element.msRequestFullscreen) {
-					element.msRequestFullscreen()
-				}
-			}
-
-			function exitFullscreen() {
-				if (document.exitFullscreen) {
-					document.exitFullscreen()
-				} else if (document.mozCancelFullScreen) {
-					document.mozCancelFullScreen()
-				} else if (document.webkitExitFullscreen) {
-					document.webkitExitFullscreen()
-				}
-			}
-
-			if (this.fullscreen) {
-				exitFullscreen()
-			} else {
-				launchIntoFullscreen(document.getElementById('note-container'))
-			}
-			this.actionsOpen = false
-		},
-
-		onToggleSidebar() {
-			store.commit('setSidebarOpen', !store.state.app.sidebarOpen)
-			this.actionsOpen = false
-		},
-
-		onVisibilityChange() {
-			if (document.visibilityState === 'visible') {
-				this.stopRefreshTimer()
-				this.refreshNote()
-			}
-		},
-
-		stopRefreshTimer() {
-			if (this.refreshTimer !== null) {
-				clearTimeout(this.refreshTimer)
-				this.refreshTimer = null
-			}
-		},
-
-		startRefreshTimer() {
-			this.stopRefreshTimer()
-			const interval = document.visibilityState === 'visible' ? config.interval.note.refresh : config.interval.note.refreshHidden
-			this.refreshTimer = setTimeout(() => {
-				this.refreshTimer = null
-				this.refreshNote()
-			}, interval * 1000)
-		},
-
-		refreshNote() {
-			if (this.note.unsaved && !this.note.conflict) {
-				this.startRefreshTimer()
-				return
-			}
-			refreshNote(parseInt(this.noteId), this.etag).then(etag => {
-				if (etag) {
-					this.etag = etag
-					this.$forceUpdate()
-				}
-				this.startRefreshTimer()
-			})
-		},
-
-		onEdit(newContent) {
-			if (this.note.content !== newContent) {
-				this.stopRefreshTimer()
-				const note = {
-					...this.note,
-					content: newContent,
-					unsaved: true,
-				}
-				store.commit('updateNote', note)
-				this.$forceUpdate()
-
-				// queue auto saving note content
-				if (this.autosaveTimer === null) {
-					this.autosaveTimer = setTimeout(() => {
-						this.autosaveTimer = null
-						queueCommand(note.id, 'content')
-					}, config.interval.note.autosave * 1000)
-				}
-
-				// (re-) start auto refresh timer
-				// TODO should be after save is finished
-				this.startRefreshTimer()
-
-				// stop old autotitle timer
-				if (this.autotitleTimer !== null) {
-					clearTimeout(this.autotitleTimer)
-					this.autotitleTimer = null
-				}
-				// start autotitle timer if note is new
-				if (this.isNewNote) {
-					this.autotitleTimer = setTimeout(() => {
-						this.autotitleTimer = null
-						if (this.isNewNote) {
-							queueCommand(note.id, 'autotitle')
-						}
-					}, config.interval.note.autotitle * 1000)
-				}
-			}
-		},
-
-		onKeyPress(event) {
-			if (event.ctrlKey || event.metaKey) {
-				switch (event.key.toLowerCase()) {
-				case 's':
-					event.preventDefault()
-					this.onManualSave()
-					break
-				case '/':
-					event.preventDefault()
-					this.onTogglePreview()
-					break
-				}
-			}
-		},
-
-		onManualSave() {
-			const note = {
-				...this.note,
-			}
-			store.commit('updateNote', note)
-			saveNoteManually(this.note.id)
-		},
-
-		onUseLocalVersion() {
-			console.debug('conflict solution: use local version')
-			conflictSolutionLocal(this.note)
-			this.showConflict = false
-		},
-
-		onUseRemoteVersion() {
-			console.debug('conflict solution: use remote version')
-			conflictSolutionRemote(this.note)
-			this.showConflict = false
+		rich() {
+			return window.oc_appswebroots.text && store.state.app.settings.noteMode === 'rich'
 		},
 	},
 }
 </script>
-<style scoped>
-.note-container {
-	min-height: 100%;
-	width: 100%;
-	background-color: var(--color-main-background);
-}
-
-.note-editor {
-	max-width: 47em;
-	font-size: 16px;
-	padding: 1em;
-	padding-bottom: 0;
-}
-
-/* center editor on large screens */
-@media (min-width: 1600px) {
-	.note-editor {
-		margin: 0 auto;
-	}
-	.note-container {
-		padding-right: 250px;
-		transition-duration: var(--animation-quick);
-		transition-property: padding-right;
-	}
-	.sidebar-open .note-container {
-		padding-right: 0px;
-	}
-}
-
-/* distraction free styles */
-.note-container.fullscreen {
-	width: 100vw;
-	height: 100vh;
-	overflow-y: auto;
-	padding: 0;
-}
-
-.note-container.fullscreen .note-editor {
-	margin: 0 auto;
-}
-
-/* placeholder */
-.placeholder {
-	position: absolute;
-	padding: 1em;
-	opacity: 0.5;
-}
-
-/* main editor button */
-.action-buttons {
-	position: fixed;
-	top: 50px;
-	right: 20px;
-	width: 44px;
-	margin-top: 1em;
-	z-index: 2000;
-}
-
-.action-buttons .action-error {
-	background-color: var(--color-error);
-	margin-top: 1ex;
-}
-
-.note-container.fullscreen .action-buttons {
-	top: 0px;
-}
-
-/* Conflict Modal */
-.conflict-modal {
-	width: 70vw;
-	margin: auto;
-}
-
-.conflict-header {
-	padding: 1ex 1em;
-}
-
-.conflict-solutions {
-	display: flex;
-	flex-direction: row-reverse;
-	max-height: 75vh;
-	overflow-y: auto;
-}
-
-@media (max-width: 60em) {
-	.conflict-solutions {
-		flex-direction: column;
-	}
-}
-
-</style>
diff --git a/src/components/NotePlain.vue b/src/components/NotePlain.vue
new file mode 100644
index 000000000..5eac70a26
--- /dev/null
+++ b/src/components/NotePlain.vue
@@ -0,0 +1,505 @@
+<template>
+	<NcAppContent :class="{ loading: loading || isManualSave, 'icon-error': !loading && (!note || note.error), 'sidebar-open': sidebarOpen }">
+		<div v-if="!loading && note && !note.error && !note.deleting"
+			id="note-container"
+			class="note-container"
+			:class="{ fullscreen: fullscreen }"
+		>
+			<NcModal v-if="note.conflict && showConflict" size="full" @close="showConflict=false">
+				<div class="conflict-modal">
+					<div class="conflict-header">
+						<SyncAlertIcon slot="icon" :size="30" fill-color="var(--color-error)" />
+						{{ t('notes', 'The note has been changed in another session. Please choose which version should be saved.') }}
+					</div>
+					<div class="conflict-solutions">
+						<ConflictSolution
+							:content="note.conflict.content"
+							:reference="note.reference.content"
+							:button="t('notes', 'Use version from server')"
+							@on-choose-solution="onUseRemoteVersion"
+						/>
+						<ConflictSolution
+							:content="note.content"
+							:reference="note.reference.content"
+							:button="t('notes', 'Use current version')"
+							@on-choose-solution="onUseLocalVersion"
+						/>
+					</div>
+				</div>
+			</NcModal>
+			<div class="note-editor">
+				<div v-show="!note.content" class="placeholder">
+					{{ preview ? t('notes', 'Empty note') : t('notes', 'Write …') }}
+				</div>
+				<ThePreview v-if="preview"
+					:value="note.content"
+					:noteid="noteId"
+					:readonly="note.readonly"
+					@input="onEdit"
+				/>
+				<TheEditor v-else
+					:value="note.content"
+					:noteid="noteId"
+					:notecategory="note.category"
+					:readonly="note.readonly"
+					@input="onEdit"
+				/>
+			</div>
+			<span class="action-buttons">
+				<NcActions :open.sync="actionsOpen" container=".action-buttons" menu-align="right">
+					<NcActionButton v-show="!sidebarOpen && !fullscreen"
+						icon="icon-details"
+						@click="onToggleSidebar"
+					>
+						<SidebarIcon slot="icon" :size="20" />
+						{{ t('notes', 'Details') }}
+					</NcActionButton>
+					<NcActionButton
+						v-tooltip.left="t('notes', 'CTRL + /')"
+						@click="onTogglePreview"
+					>
+						<EditIcon v-if="preview" slot="icon" :size="20" />
+						<EyeIcon v-else slot="icon" :size="20" />
+						{{ preview ? t('notes', 'Edit') : t('notes', 'Preview') }}
+					</NcActionButton>
+					<NcActionButton
+						:class="{ active: fullscreen }"
+						@click="onToggleDistractionFree"
+					>
+						<FullscreenIcon slot="icon" :size="20" />
+						{{ fullscreen ? t('notes', 'Exit full screen') : t('notes', 'Full screen') }}
+					</NcActionButton>
+				</NcActions>
+				<NcActions v-if="note.readonly">
+					<NcActionButton>
+						<NoEditIcon slot="icon" :size="20" />
+						{{ t('notes', 'Note is read-only. You cannot change it.') }}
+					</NcActionButton>
+				</NcActions>
+				<NcActions v-if="note.saveError" class="action-error">
+					<NcActionButton @click="onManualSave">
+						<SyncAlertIcon slot="icon" :size="20" fill-color="var(--color-text)" />
+						{{ t('notes', 'Save failed. Click to retry.') }}
+					</NcActionButton>
+				</NcActions>
+				<NcActions v-if="note.conflict" class="action-error">
+					<NcActionButton @click="showConflict=true">
+						<SyncAlertIcon slot="icon" :size="20" fill-color="var(--color-text)" />
+						{{ t('notes', 'Update conflict. Click for resolving manually.') }}
+					</NcActionButton>
+				</NcActions>
+			</span>
+		</div>
+	</NcAppContent>
+</template>
+<script>
+
+import {
+	NcActions,
+	NcActionButton,
+	NcAppContent,
+	NcModal,
+	Tooltip,
+	isMobile,
+} from '@nextcloud/vue'
+import { showError } from '@nextcloud/dialogs'
+import { emit } from '@nextcloud/event-bus'
+
+import EditIcon from 'vue-material-design-icons/LeadPencil.vue'
+import EyeIcon from 'vue-material-design-icons/Eye.vue'
+import FullscreenIcon from 'vue-material-design-icons/Fullscreen.vue'
+import NoEditIcon from 'vue-material-design-icons/PencilOff.vue'
+import SidebarIcon from 'vue-material-design-icons/PageLayoutSidebarRight.vue'
+import SyncAlertIcon from 'vue-material-design-icons/SyncAlert.vue'
+
+import { config } from '../config.js'
+import { fetchNote, refreshNote, saveNoteManually, queueCommand, conflictSolutionLocal, conflictSolutionRemote } from '../NotesService.js'
+import { routeIsNewNote } from '../Util.js'
+import TheEditor from './EditorEasyMDE.vue'
+import ThePreview from './EditorMarkdownIt.vue'
+import ConflictSolution from './ConflictSolution.vue'
+import store from '../store.js'
+
+export default {
+	name: 'NotePlain',
+
+	components: {
+		ConflictSolution,
+		EditIcon,
+		EyeIcon,
+		FullscreenIcon,
+		NcActions,
+		NcActionButton,
+		NcAppContent,
+		NcModal,
+		NoEditIcon,
+		SidebarIcon,
+		SyncAlertIcon,
+		TheEditor,
+		ThePreview,
+	},
+
+	directives: {
+		tooltip: Tooltip,
+	},
+
+	mixins: [isMobile],
+
+	props: {
+		noteId: {
+			type: String,
+			required: true,
+		},
+	},
+
+	data() {
+		return {
+			loading: false,
+			fullscreen: false,
+			preview: false,
+			actionsOpen: false,
+			autosaveTimer: null,
+			autotitleTimer: null,
+			refreshTimer: null,
+			etag: null,
+			showConflict: false,
+		}
+	},
+
+	computed: {
+		note() {
+			return store.getters.getNote(parseInt(this.noteId))
+		},
+		title() {
+			return this.note ? this.note.title : ''
+		},
+		isNewNote() {
+			return routeIsNewNote(this.$route)
+		},
+		isManualSave() {
+			return store.state.app.isManualSave
+		},
+		sidebarOpen() {
+			return store.state.app.sidebarOpen
+		},
+	},
+
+	watch: {
+		$route(to, from) {
+			if (to.name !== from.name || to.params.noteId !== from.params.noteId) {
+				this.fetchData()
+			}
+		},
+		title: 'onUpdateTitle',
+		'note.conflict'(newConflict, oldConflict) {
+			if (newConflict) {
+				this.showConflict = true
+			}
+		},
+	},
+
+	created() {
+		this.fetchData()
+		document.addEventListener('webkitfullscreenchange', this.onDetectFullscreen)
+		document.addEventListener('mozfullscreenchange', this.onDetectFullscreen)
+		document.addEventListener('fullscreenchange', this.onDetectFullscreen)
+		document.addEventListener('keydown', this.onKeyPress)
+		document.addEventListener('visibilitychange', this.onVisibilityChange)
+	},
+
+	destroyed() {
+		this.stopRefreshTimer()
+		document.removeEventListener('webkitfullscreenchange', this.onDetectFullscreen)
+		document.removeEventListener('mozfullscreenchange', this.onDetectFullscreen)
+		document.removeEventListener('fullscreenchange', this.onDetectFullscreen)
+		document.removeEventListener('keydown', this.onKeyPress)
+		document.removeEventListener('visibilitychange', this.onVisibilityChange)
+		this.onUpdateTitle(null)
+	},
+
+	methods: {
+		fetchData() {
+			this.etag = null
+			this.stopRefreshTimer()
+
+			if (this.isMobile) {
+				emit('toggle-navigation', { open: false })
+			}
+
+			this.onUpdateTitle(this.title)
+			this.loading = true
+			this.preview = store.state.app.settings.noteMode === 'preview' && !this.isNewNote
+			fetchNote(parseInt(this.noteId))
+				.then((note) => {
+					if (note.error) {
+						showError(t('notes', 'Error from Nextcloud server: {msg}', { msg: note.errorType }))
+					}
+					this.startRefreshTimer()
+				})
+				.catch(() => {
+					// note not found
+				})
+				.then(() => {
+					this.loading = false
+				})
+		},
+
+		onUpdateTitle(title) {
+			const defaultTitle = store.state.app.documentTitle
+			if (title) {
+				document.title = title + ' - ' + defaultTitle
+			} else {
+				document.title = defaultTitle
+			}
+		},
+
+		onTogglePreview() {
+			this.preview = !this.preview
+			this.actionsOpen = false
+		},
+
+		onDetectFullscreen() {
+			this.fullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen
+		},
+
+		onToggleDistractionFree() {
+			function launchIntoFullscreen(element) {
+				if (element.requestFullscreen) {
+					element.requestFullscreen()
+				} else if (element.mozRequestFullScreen) {
+					element.mozRequestFullScreen()
+				} else if (element.webkitRequestFullscreen) {
+					element.webkitRequestFullscreen()
+				} else if (element.msRequestFullscreen) {
+					element.msRequestFullscreen()
+				}
+			}
+
+			function exitFullscreen() {
+				if (document.exitFullscreen) {
+					document.exitFullscreen()
+				} else if (document.mozCancelFullScreen) {
+					document.mozCancelFullScreen()
+				} else if (document.webkitExitFullscreen) {
+					document.webkitExitFullscreen()
+				}
+			}
+
+			if (this.fullscreen) {
+				exitFullscreen()
+			} else {
+				launchIntoFullscreen(document.getElementById('note-container'))
+			}
+			this.actionsOpen = false
+		},
+
+		onToggleSidebar() {
+			store.commit('setSidebarOpen', !store.state.app.sidebarOpen)
+			this.actionsOpen = false
+		},
+
+		onVisibilityChange() {
+			if (document.visibilityState === 'visible') {
+				this.stopRefreshTimer()
+				this.refreshNote()
+			}
+		},
+
+		stopRefreshTimer() {
+			if (this.refreshTimer !== null) {
+				clearTimeout(this.refreshTimer)
+				this.refreshTimer = null
+			}
+		},
+
+		startRefreshTimer() {
+			this.stopRefreshTimer()
+			const interval = document.visibilityState === 'visible' ? config.interval.note.refresh : config.interval.note.refreshHidden
+			this.refreshTimer = setTimeout(() => {
+				this.refreshTimer = null
+				this.refreshNote()
+			}, interval * 1000)
+		},
+
+		refreshNote() {
+			if (this.note.unsaved && !this.note.conflict) {
+				this.startRefreshTimer()
+				return
+			}
+			refreshNote(parseInt(this.noteId), this.etag).then(etag => {
+				if (etag) {
+					this.etag = etag
+					this.$forceUpdate()
+				}
+				this.startRefreshTimer()
+			})
+		},
+
+		onEdit(newContent) {
+			if (this.note.content !== newContent) {
+				this.stopRefreshTimer()
+				const note = {
+					...this.note,
+					content: newContent,
+					unsaved: true,
+				}
+				store.commit('updateNote', note)
+				this.$forceUpdate()
+
+				// queue auto saving note content
+				if (this.autosaveTimer === null) {
+					this.autosaveTimer = setTimeout(() => {
+						this.autosaveTimer = null
+						queueCommand(note.id, 'content')
+					}, config.interval.note.autosave * 1000)
+				}
+
+				// (re-) start auto refresh timer
+				// TODO should be after save is finished
+				this.startRefreshTimer()
+
+				// stop old autotitle timer
+				if (this.autotitleTimer !== null) {
+					clearTimeout(this.autotitleTimer)
+					this.autotitleTimer = null
+				}
+				// start autotitle timer if note is new
+				if (this.isNewNote) {
+					this.autotitleTimer = setTimeout(() => {
+						this.autotitleTimer = null
+						if (this.isNewNote) {
+							queueCommand(note.id, 'autotitle')
+						}
+					}, config.interval.note.autotitle * 1000)
+				}
+			}
+		},
+
+		onKeyPress(event) {
+			if (event.ctrlKey || event.metaKey) {
+				switch (event.key.toLowerCase()) {
+				case 's':
+					event.preventDefault()
+					this.onManualSave()
+					break
+				case '/':
+					event.preventDefault()
+					this.onTogglePreview()
+					break
+				}
+			}
+		},
+
+		onManualSave() {
+			const note = {
+				...this.note,
+			}
+			store.commit('updateNote', note)
+			saveNoteManually(this.note.id)
+		},
+
+		onUseLocalVersion() {
+			console.debug('conflict solution: use local version')
+			conflictSolutionLocal(this.note)
+			this.showConflict = false
+		},
+
+		onUseRemoteVersion() {
+			console.debug('conflict solution: use remote version')
+			conflictSolutionRemote(this.note)
+			this.showConflict = false
+		},
+	},
+}
+</script>
+<style scoped>
+.note-container {
+	min-height: 100%;
+	width: 100%;
+	background-color: var(--color-main-background);
+}
+
+.note-editor {
+	max-width: 47em;
+	font-size: 16px;
+	padding: 1em;
+	padding-bottom: 0;
+}
+
+/* center editor on large screens */
+@media (min-width: 1600px) {
+	.note-editor {
+		margin: 0 auto;
+	}
+	.note-container {
+		padding-right: 250px;
+		transition-duration: var(--animation-quick);
+		transition-property: padding-right;
+	}
+	.sidebar-open .note-container {
+		padding-right: 0px;
+	}
+}
+
+/* distraction free styles */
+.note-container.fullscreen {
+	width: 100vw;
+	height: 100vh;
+	overflow-y: auto;
+	padding: 0;
+}
+
+.note-container.fullscreen .note-editor {
+	margin: 0 auto;
+}
+
+/* placeholder */
+.placeholder {
+	position: absolute;
+	padding: 1em;
+	opacity: 0.5;
+}
+
+/* main editor button */
+.action-buttons {
+	position: fixed;
+	top: 50px;
+	right: 20px;
+	width: 44px;
+	margin-top: 1em;
+	z-index: 2000;
+}
+
+.action-buttons .action-error {
+	background-color: var(--color-error);
+	margin-top: 1ex;
+}
+
+.note-container.fullscreen .action-buttons {
+	top: 0px;
+}
+
+/* Conflict Modal */
+.conflict-modal {
+	width: 70vw;
+	margin: auto;
+}
+
+.conflict-header {
+	padding: 1ex 1em;
+}
+
+.conflict-solutions {
+	display: flex;
+	flex-direction: row-reverse;
+	max-height: 75vh;
+	overflow-y: auto;
+}
+
+@media (max-width: 60em) {
+	.conflict-solutions {
+		flex-direction: column;
+	}
+}
+
+</style>
diff --git a/src/components/NoteRich.vue b/src/components/NoteRich.vue
new file mode 100644
index 000000000..210c51c95
--- /dev/null
+++ b/src/components/NoteRich.vue
@@ -0,0 +1,138 @@
+<template>
+	<NcAppContent :class="{ loading: loading, 'icon-error': !loading && (!note || note.error), 'sidebar-open': sidebarOpen, 'is-mobile': isMobile }">
+		<div v-show="!loading" ref="editor" class="text-editor" />
+	</NcAppContent>
+</template>
+<script>
+
+import {
+	NcAppContent,
+	isMobile,
+} from '@nextcloud/vue'
+import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
+
+import { queueCommand } from '../NotesService.js'
+import { routeIsNewNote } from '../Util.js'
+import store from '../store.js'
+
+export default {
+	name: 'NoteRich',
+
+	components: {
+		NcAppContent,
+	},
+
+	mixins: [isMobile],
+
+	props: {
+		noteId: {
+			type: String,
+			required: true,
+		},
+	},
+
+	data() {
+		return {
+			loading: false,
+			editor: null,
+		}
+	},
+
+	computed: {
+		note() {
+			return store.getters.getNote(parseInt(this.noteId))
+		},
+		isNewNote() {
+			return routeIsNewNote(this.$route)
+		},
+		sidebarOpen() {
+			return store.state.app.sidebarOpen
+		},
+	},
+
+	watch: {
+		$route(to, from) {
+			if (to.name !== from.name || to.params.noteId !== from.params.noteId) {
+				this.fetchData()
+			}
+		},
+	},
+
+	created() {
+		this.fetchData()
+		subscribe('files:file:updated', this.fileUpdated)
+
+	},
+
+	destroyed() {
+		this?.editor?.destroy()
+		unsubscribe('files:file:updated', this.fileUpdated)
+	},
+
+	methods: {
+		async fetchData() {
+			this.etag = null
+
+			if (this.isMobile) {
+				emit('toggle-navigation', { open: false })
+			}
+
+			this.loading = true
+
+			await this.loadTextEditor()
+		},
+
+		async loadTextEditor() {
+			if (!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({ content: markdown, unsaved: true })
+					}
+				},
+			}))
+				.onLoaded(() => {
+					this.loading = false
+				})
+		},
+
+		onEdit(noteData = {}) {
+			store.commit('updateNote', {
+				...this.note,
+				...noteData,
+			})
+		},
+
+		fileUpdated({ fileid }) {
+			if (this.note.id === fileid) {
+				this.onEdit({ unsaved: false })
+				queueCommand(fileid, 'autotitle')
+			}
+		},
+	},
+}
+</script>
+<style lang="scss" scoped>
+.text-editor {
+	height: 100%;
+}
+
+.note-container {
+	min-height: 100%;
+	width: 100%;
+	background-color: var(--color-main-background);
+}
+
+.is-mobile:deep(.text-menubar) {
+	// Avoid overlapping the navigation toggle
+	margin-left: 44px;
+	margin-top: 4px;
+}
+</style>
diff --git a/src/store/app.js b/src/store/app.js
index 3f291beee..3ddc20d63 100644
--- a/src/store/app.js
+++ b/src/store/app.js
@@ -1,3 +1,5 @@
+import { set } from 'vue'
+
 const state = {
 	settings: {},
 	isSaving: false,
@@ -14,6 +16,10 @@ const mutations = {
 		state.settings = settings
 	},
 
+	setNoteMode(state, mode) {
+		set(state.settings, 'noteMode', mode)
+	},
+
 	setSaving(state, isSaving) {
 		state.isSaving = isSaving
 	},
diff --git a/tests/api/APIv1Test.php b/tests/api/APIv1Test.php
index 65e4a3b9e..5567d61af 100644
--- a/tests/api/APIv1Test.php
+++ b/tests/api/APIv1Test.php
@@ -195,14 +195,14 @@ public function testSettings(array $refNotes, \stdClass $settings) : void {
 		$this->updateSettings($settings, (object)[
 			'fileSuffix' => '',
 		], (object)[
-			'fileSuffix' => '.txt',
+			'fileSuffix' => '.md',
 		], 'Update fileSuffix with empty value');
 		$this->updateSettings($settings, (object)[
 			'notesPath' => null,
 			'fileSuffix' => null,
 		], (object)[
 			'notesPath' => 'Notes',
-			'fileSuffix' => '.txt',
+			'fileSuffix' => '.md',
 		], 'Update settings with default values');
 		$this->updateSettings($settings, (object)[
 			'notesPath' => $originalPath,