fix(ViewerComponent): use MarkdownContentEditor for readonly views

Also pass the `fileId` to the component. This adds support for displaying images and attachments in the read-only view. Fixes: #6267 Signed-off-by: Jonas <[email protected]>
nextcloud · Aug 27, 2024 · 6c0871e · 6c0871e
1 parent 0d5dc79
commit 6c0871e
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 15 deletions.
diff --git a/cypress/e2e/versions.spec.js b/cypress/e2e/versions.spec.js
@@ -34,12 +34,12 @@ describe('Versions', () => {
 			cy.get('[data-files-versions-versions-list] li a').should('have.length', 3)
 
 			cy.get('[data-files-versions-versions-list] li a').eq(1).click()
-			cy.get('.viewer__content #read-only-editor')
+			cy.getContent()
 				.find('h1')
 				.should('contain.text', 'V2')
 
 			cy.get('[data-files-versions-versions-list] li a').eq(2).click()
-			cy.get('.viewer__content #read-only-editor')
+			cy.getContent()
 				.find('h1')
 				.should('contain.text', 'V1')
 
@@ -68,12 +68,12 @@ describe('Versions', () => {
 			cy.get('[data-files-versions-versions-list] li a').should('have.length', 3)
 
 			cy.get('[data-files-versions-versions-list] li a').eq(1).click()
-			cy.get('.viewer__content #read-only-editor')
+			cy.getContent()
 				.find('h1')
 				.should('contain.text', 'V2')
 
 			cy.get('[data-files-versions-versions-list] li a').eq(2).click()
-			cy.get('.viewer__content #read-only-editor')
+			cy.getContent()
 				.find('h1')
 				.should('contain.text', 'V1')
 
@@ -113,7 +113,7 @@ describe('Versions', () => {
 				.should('contain', 'Compare to current version')
 				.click()
 
-			cy.get('.viewer__content #read-only-editor')
+			cy.getContent()
 				.find('h1')
 				.should('contain.text', '#V1')
 

diff --git a/src/components/Editor/MarkdownContentEditor.vue b/src/components/Editor/MarkdownContentEditor.vue
@@ -8,10 +8,12 @@
 		:show-outline-outside="showOutlineOutside"
 		@outline-toggled="outlineToggled">
 		<MainContainer>
-			<MenuBar v-if="!readOnly" :autohide="false" />
-			<slot v-else name="readonlyBar">
-				<ReadonlyBar />
-			</slot>
+			<template v-if="showMenuBar">
+				<MenuBar v-if="!readOnly" :autohide="false" />
+				<slot v-else name="readonlyBar">
+					<ReadonlyBar />
+				</slot>
+			</template>
 			<ContentContainer />
 		</MainContainer>
 	</Wrapper>
@@ -75,6 +77,10 @@ export default {
 			type: String,
 			default: null,
 		},
+		showMenuBar: {
+			type: Boolean,
+			default: true,
+		},
 		showOutlineOutside: {
 			type: Boolean,
 			default: false,
@@ -175,6 +181,7 @@ export default {
 }
 </script>
 
-<style scoped>
-
+<style lang="scss">
+@import './../../css/prosemirror';
+@import './../../css/print';
 </style>
diff --git a/src/components/ViewerComponent.vue b/src/components/ViewerComponent.vue
@@ -17,7 +17,11 @@
 		id="editor-container"
 		data-text-el="editor-container"
 		class="text-editor source-viewer">
-		<Component :is="readerComponent" :content="content" />
+		<Component :is="readerComponent"
+			:content="content"
+			:file-id="fileid"
+			:read-only="true"
+			:show-menu-bar="false" />
 		<NcButton v-if="isEmbedded" class="toggle-interactive" @click="toggleEdit">
 			{{ t('text', 'Edit') }}
 			<template #icon>
@@ -33,7 +37,7 @@ import axios from '@nextcloud/axios'
 import PencilIcon from 'vue-material-design-icons/Pencil.vue'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import PlainTextReader from './PlainTextReader.vue'
-import RichTextReader from './RichTextReader.vue'
+import MarkdownContentEditor from './Editor/MarkdownContentEditor.vue'
 import { translate, translatePlural } from '@nextcloud/l10n'
 
 import { getSharingToken } from '../helpers/token.js'
@@ -47,8 +51,8 @@ export default {
 	components: {
 		NcButton: Vue.extend(NcButton),
 		PencilIcon: Vue.extend(PencilIcon),
-		RichTextReader: Vue.extend(RichTextReader),
 		PlainTextReader: Vue.extend(PlainTextReader),
+		MarkdownContentEditor: Vue.extend(MarkdownContentEditor),
 		Editor: getEditorInstance,
 	},
 	provide() {
@@ -112,7 +116,7 @@ export default {
 
 		/** @return {boolean} */
 		readerComponent() {
-			return this.mime === 'text/markdown' ? RichTextReader : PlainTextReader
+			return this.mime === 'text/markdown' ? MarkdownContentEditor : PlainTextReader
 		},
 	},