github
/
filebrowser
mirror of https://github.com/filebrowser/filebrowser
1
0
Fork 0
Code Issues Releases Wiki Activity

show preview action only for md file

pull/3431/head
Oleg Lobanov 2024-08-29 22:59:25 +02:00
parent 56ff13528f
commit 90043e0318
No known key found for this signature in database
2 changed files with 24 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/css/mdPreview.css
View File

@ -1,5 +1,5 @@
.md_preview { .md_preview {
overflow-y:auto; overflow-y: auto;
max-height: 80vh; max-height: 80vh;
padding: 1rem; padding: 1rem;
border: 1px solid #000; border: 1px solid #000;

29
frontend/src/views/files/Editor.vue
View File

@ -12,13 +12,23 @@
@action="save()" @action="save()"
/> />
<action icon="preview" :label="t('buttons.preview')" @action="preview()" /> <action
icon="preview"
:label="t('buttons.preview')"
@action="preview()"
v-show="isMarkdownFile"
/>
</header-bar> </header-bar>
<Breadcrumbs base="/files" noLink /> <Breadcrumbs base="/files" noLink />
<!-- preview container --> <!-- preview container -->
<div v-show="isPreview && isMarkdownFile" id="preview-container" class="md_preview" v-html="previewContent"></div> <div
v-show="isPreview && isMarkdownFile"
id="preview-container"
class="md_preview"
v-html="previewContent"
></div>
<form v-show="!isPreview || !isMarkdownFile" id="editor"></form> <form v-show="!isPreview || !isMarkdownFile" id="editor"></form>
</div> </div>
@ -42,7 +52,7 @@ import { inject, onBeforeUnmount, onMounted, ref, watchEffect } from "vue";
import { useRoute, useRouter } from "vue-router"; import { useRoute, useRouter } from "vue-router";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { getTheme } from "@/utils/theme"; import { getTheme } from "@/utils/theme";
import { marked } from 'marked'; import { marked } from "marked";
const $showError = inject<IToastError>("$showError")!; const $showError = inject<IToastError>("$showError")!;
@ -59,7 +69,9 @@ const editor = ref<Ace.Editor | null>(null);
const isPreview = ref(false); const isPreview = ref(false);
const previewContent = ref(""); const previewContent = ref("");
const isMarkdownFile = fileStore.req?.name.endsWith('.md') || fileStore.req?.name.endsWith('.markdown'); const isMarkdownFile =
fileStore.req?.name.endsWith(".md") ||
fileStore.req?.name.endsWith(".markdown");
onMounted(() => { onMounted(() => {
window.addEventListener("keydown", keyEvent); window.addEventListener("keydown", keyEvent);
@ -77,9 +89,11 @@ onMounted(() => {
previewContent.value = ""; previewContent.value = "";
} }
const previewContainer = document.getElementById('preview-container'); const previewContainer = document.getElementById("preview-container");
if (previewContainer) { if (previewContainer) {
previewContainer.addEventListener("wheel", handleScroll, { capture: true }); previewContainer.addEventListener("wheel", handleScroll, {
capture: true,
});
} }
} }
}); });
@ -132,7 +146,7 @@ const keyEvent = (event: KeyboardEvent) => {
}; };
const handleScroll = (event: WheelEvent) => { const handleScroll = (event: WheelEvent) => {
const editorContainer = document.getElementById('preview-container'); const editorContainer = document.getElementById("preview-container");
if (editorContainer) { if (editorContainer) {
editorContainer.scrollTop += event.deltaY; editorContainer.scrollTop += event.deltaY;
} }
@ -167,4 +181,3 @@ const preview = () => {
isPreview.value = !isPreview.value; isPreview.value = !isPreview.value;
}; };
</script> </script>