components: Add actions for open read-only mode

Signed-off-by: Benjamin Thiemann <[email protected]>
nextcloud · Feb 26, 2024 · d1bb0ae · d1bb0ae
1 parent 3bf84e3
commit d1bb0ae
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 12 deletions.
diff --git a/src/components/Editor.vue b/src/components/Editor.vue
@@ -40,12 +40,13 @@
 			:content-loaded="contentLoaded"
 			:show-author-annotations="showAuthorAnnotations"
 			:show-outline-outside="showOutlineOutside"
+			@read-only-toggled="readOnlyToggled"
 			@outline-toggled="outlineToggled">
 			<MainContainer v-if="hasEditor">
 				<!-- Readonly -->
-				<div v-if="readOnly" class="text-editor--readonly-bar">
+				<div v-if="readOnly || (openReadOnlyEnabled && !editMode)" class="text-editor--readonly-bar">
 					<slot name="readonlyBar">
-						<ReadonlyBar>
+						<ReadonlyBar :open-read-only="openReadOnlyEnabled">
 							<Status :document="document"
 								:dirty="dirty"
 								:sessions="filteredSessions"
@@ -59,6 +60,7 @@
 					<MenuBar v-if="renderMenus"
 						ref="menubar"
 						:is-hidden="hideMenu"
+						:open-read-only="openReadOnlyEnabled"
 						:loaded.sync="menubarLoaded">
 						<Status :document="document"
 							:dirty="dirty"
@@ -244,6 +246,8 @@ export default {
 			hasConnectionIssue: false,
 			hasEditor: false,
 			readOnly: true,
+			openReadOnlyEnabled: OCA.Text.OpenReadOnlyEnabled,
+			editMode: true,
 			forceRecreate: false,
 			menubarLoaded: false,
 			draggedOver: false,
@@ -470,8 +474,10 @@ export default {
 			this.currentSession = session
 			this.document = document
 			this.readOnly = document.readOnly
+			this.editMode = !document.readOnly && !this.openReadOnlyEnabled
+
 			if (this.$editor) {
-				this.$editor.setEditable(!this.readOnly)
+				this.$editor.setEditable(this.editMode)
 			}
 			this.lock = this.$syncService.lock
 			localStorage.setItem('nick', this.currentSession.guestName)
@@ -558,7 +564,7 @@ export default {
 			this.document = document
 
 			this.syncError = null
-			this.$editor.setEditable(!this.readOnly)
+			this.$editor.setEditable(this.editMode)
 		},
 
 		onSync({ steps, document }) {
@@ -627,7 +633,8 @@ export default {
 			this.$syncService.close()
 			this.idle = true
 			this.readOnly = true
-			this.$editor.setEditable(!this.readOnly)
+			this.editMode = false
+			this.$editor.setEditable(this.editMode)
 
 			this.$nextTick(() => {
 				this.emit('sync-service:idle')
@@ -734,6 +741,14 @@ export default {
 			this.emit('outline-toggled', visible)
 		},
 
+		readOnlyToggled() {
+			if (this.editMode) {
+				this.$syncService.save()
+			}
+			this.editMode = !this.editMode
+			this.$editor.setEditable(this.editMode)
+		},
+
 		onKeyDown(event) {
 			if (event.key === 'Escape') {
 				event.preventDefault()

diff --git a/src/components/Editor/Wrapper.provider.js b/src/components/Editor/Wrapper.provider.js
@@ -1,5 +1,6 @@
 export const OUTLINE_STATE = Symbol('wrapper:outline-state')
 export const OUTLINE_ACTIONS = Symbol('wrapper:outline-actions')
+export const READ_ONLY_ACTIONS = Symbol('wrapper:read-only-actions')
 
 export const useOutlineStateMixin = {
 	inject: {
@@ -23,3 +24,14 @@ export const useOutlineActions = {
 		},
 	},
 }
+
+export const useReadOnlyActions = {
+	inject: {
+		$readOnlyActions: {
+			from: READ_ONLY_ACTIONS,
+			default: {
+				toggle: () => {},
+			},
+		},
+	},
+}
diff --git a/src/components/Editor/Wrapper.vue b/src/components/Editor/Wrapper.vue
@@ -35,7 +35,7 @@
 <script>
 import { ERROR_TYPE } from './../../services/SyncService.js'
 import { useIsRichEditorMixin, useIsRichWorkspaceMixin } from './../Editor.provider.js'
-import { OUTLINE_STATE, OUTLINE_ACTIONS } from './Wrapper.provider.js'
+import { OUTLINE_STATE, OUTLINE_ACTIONS, READ_ONLY_ACTIONS } from './Wrapper.provider.js'
 import useStore from '../../mixins/store.js'
 import { mapState } from 'vuex'
 
@@ -54,6 +54,11 @@ export default {
 					toggle: this.outlineToggle,
 				}),
 			},
+			[READ_ONLY_ACTIONS]: {
+				get: () => ({
+					toggle: this.readOnlyToggle,
+				}),
+			},
 		})
 
 		return val
@@ -133,6 +138,9 @@ export default {
 			this.outline.visible = !this.outline.visible
 			this.$emit('outline-toggled', this.outline.visible)
 		},
+		readOnlyToggle() {
+			this.$emit('read-only-toggled')
+		},
 	},
 
 }

diff --git a/src/components/Menu/BaseActionEntry.js b/src/components/Menu/BaseActionEntry.js
@@ -25,7 +25,7 @@
 import debounce from 'debounce'
 
 import { useEditorMixin, useIsMobileMixin } from '../Editor.provider.js'
-import { useOutlineActions, useOutlineStateMixin } from '../Editor/Wrapper.provider.js'
+import { useOutlineActions, useOutlineStateMixin, useReadOnlyActions } from '../Editor/Wrapper.provider.js'
 import { getActionState, getKeys, getKeyshortcuts } from './utils.js'
 import useStore from '../../mixins/store.js'
 
@@ -35,7 +35,14 @@ import './ActionEntry.scss'
  * @type {import("vue").ComponentOptions} BaseActionEntry
  */
 const BaseActionEntry = {
-	mixins: [useEditorMixin, useIsMobileMixin, useStore, useOutlineActions, useOutlineStateMixin],
+	mixins: [
+		useEditorMixin,
+		useIsMobileMixin,
+		useStore,
+		useOutlineActions,
+		useOutlineStateMixin,
+		useReadOnlyActions,
+	],
 	props: {
 		actionEntry: {
 			type: Object,

diff --git a/src/components/Menu/MenuBar.vue b/src/components/Menu/MenuBar.vue
@@ -93,7 +93,7 @@ import CharacterCount from './CharacterCount.vue'
 import HelpModal from '../HelpModal.vue'
 import ToolBarLogic from './ToolBarLogic.js'
 import Translate from './../Modal/Translate.vue'
-import actionsFullEntries from './entries.js'
+import { ReadOnlyDoneEntries, MenuEntries } from './entries.js'
 import { MENU_ID } from './MenuBar.provider.js'
 import { DotsHorizontal, TranslateVariant } from '../icons.js'
 import {
@@ -139,10 +139,14 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		openReadOnly: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {
-			entries: [...actionsFullEntries],
+			entries: this.openReadOnly ? [...ReadOnlyDoneEntries, ...MenuEntries] : [...MenuEntries],
 			randomID: `menu-bar-${(Math.ceil((Math.random() * 10000) + 500)).toString(16)}`,
 			displayHelp: false,
 			displayTranslate: false,

diff --git a/src/components/Menu/ReadonlyBar.vue b/src/components/Menu/ReadonlyBar.vue
@@ -20,7 +20,7 @@
 
 <script>
 import { defineComponent } from 'vue'
-import { ReadonlyEntries as entries } from './entries.js'
+import { ReadOnlyEditEntries, OutlineEntries } from './entries.js'
 
 import ActionList from './ActionList.vue'
 import ActionSingle from './ActionSingle.vue'
@@ -33,9 +33,15 @@ export default defineComponent({
 		ActionSingle,
 	},
 	extends: ToolBarLogic,
+	props: {
+		openReadOnly: {
+			type: Boolean,
+			default: false,
+		},
+	},
 	data() {
 		return {
-			entries,
+			entries: this.openReadOnly ? [...ReadOnlyEditEntries, ...OutlineEntries] : [...OutlineEntries],
 		}
 	},
 })