read-only editor for read-only notes

4 files changed, 24 insertions, 4 deletions

diff --git a/src/components/EditorEasyMDE.vue b/src/components/EditorEasyMDE.vue
index 4e36c078..803d30e4 100644
--- a/src/components/EditorEasyMDE.vue
+++ b/src/components/EditorEasyMDE.vue
@@ -15,6 +15,10 @@ export default {
 			type: String,
 			required: true,
 		},
+		readonly: {
+			type: Boolean,
+			required: true,
+		},
 	},
 
 	data() {
@@ -77,6 +81,10 @@ export default {
 				codeElement.addEventListener('mousedown', this.onClickCodeElement)
 				codeElement.addEventListener('touchstart', this.onClickCodeElement)
 			})
+
+			if (this.readonly) {
+				this.mde.codemirror.options.readOnly = true
+			}
 		},
 
 		onClickCodeElement(event) {
diff --git a/src/components/NavigationNoteItem.vue b/src/components/NavigationNoteItem.vue
index 2fdd2dcc..d8fe8a0b 100644
--- a/src/components/NavigationNoteItem.vue
+++ b/src/components/NavigationNoteItem.vue
@@ -6,7 +6,7 @@
 		:to="{ name: 'note', params: { noteId: note.id.toString() } }"
 		:class="{ actionsOpen }"
 		:loading="loading.note"
-		:editable="true"
+		:editable="!note.readonly"
 		:edit-label="t('notes', 'Rename')"
 		:edit-placeholder="t('notes', 'Note\'s title')"
 		@update:title="onRename"
@@ -15,7 +15,7 @@
 			<ActionButton :icon="actionFavoriteIcon" @click="onToggleFavorite">
 				{{ actionFavoriteText }}
 			</ActionButton>
-			<ActionButton :icon="actionDeleteIcon" @click="onDeleteNote">
+			<ActionButton v-if="!note.readonly" :icon="actionDeleteIcon" @click="onDeleteNote">
 				{{ t('notes', 'Delete note') }}
 			</ActionButton>
 			<ActionSeparator />
diff --git a/src/components/Note.vue b/src/components/Note.vue
index 1923d6aa..62caa563 100644
--- a/src/components/Note.vue
+++ b/src/components/Note.vue
@@ -31,7 +31,11 @@
 					{{ preview ? t('notes', 'Empty note') : t('notes', 'Write …') }}
 				</div>
 				<ThePreview v-if="preview" :value="note.content" />
-				<TheEditor v-else :value="note.content" @input="onEdit" />
+				<TheEditor v-else
+					:value="note.content"
+					:readonly="note.readonly"
+					@input="onEdit"
+				/>
 			</div>
 			<span class="action-buttons">
 				<Actions :open.sync="actionsOpen" container=".action-buttons" menu-align="right">
@@ -56,6 +60,12 @@
 						{{ fullscreen ? t('notes', 'Exit full screen') : t('notes', 'Full screen') }}
 					</ActionButton>
 				</Actions>
+				<Actions v-if="note.readonly">
+					<ActionButton>
+						<PencilOffIcon slot="icon" :size="18" fill-color="var(--color-main-text)" />
+						{{ t('notes', 'Note is read-only. You cannot change it.') }}
+					</ActionButton>
+				</Actions>
 				<Actions v-if="note.saveError" class="action-error">
 					<ActionButton @click="onManualSave">
 						<SyncAlertIcon slot="icon" :size="18" fill-color="var(--color-text)" />
@@ -86,6 +96,7 @@ import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
 
 import SyncAlertIcon from 'vue-material-design-icons/SyncAlert'
+import PencilOffIcon from 'vue-material-design-icons/PencilOff'
 
 import { config } from '../config'
 import { fetchNote, refreshNote, saveNote, saveNoteManually, autotitleNote, conflictSolutionLocal, conflictSolutionRemote } from '../NotesService'
@@ -104,6 +115,7 @@ export default {
 		AppContent,
 		ConflictSolution,
 		Modal,
+		PencilOffIcon,
 		SyncAlertIcon,
 		TheEditor,
 		ThePreview,
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 07847f49..67dd62b3 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -8,7 +8,7 @@
 		@close="onCloseSidebar"
 	>
 		<div class="sidebar-content-wrapper">
-			<div class="note-category" :title="t('notes', 'Set category')">
+			<div v-if="!note.readonly" class="note-category" :title="t('notes', 'Set category')">
 				<h4>{{ t('notes', 'Category') }} <span v-tooltip="categoriesInfo" class="icon-info svg" /></h4>
 				<form class="category" @submit.prevent.stop="">
 					<Multiselect id="category"