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 · a853705 · a853705
1 parent 5806197
commit a853705
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 10 deletions.
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,7 @@
  id="editor-container"
  data-text-el="editor-container"
  class="text-editor source-viewer">
- <Component :is="readerComponent" :content="content" />
+ <Component :is="readerComponent" :content="content" :fileId="fileid" :read-only="true" :show-menu-bar="false" />
  <NcButton v-if="isEmbedded" class="toggle-interactive" @click="toggleEdit">
  {{ t('text', 'Edit') }}
  <template #icon>
@@ -33,7 +33,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 +47,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 +112,7 @@ export default {
 
  /** @return {boolean} */
  readerComponent() {
- return this.mime === 'text/markdown' ? RichTextReader : PlainTextReader
+ return this.mime === 'text/markdown' ? MarkdownContentEditor : PlainTextReader
  },
  },