Merge branch 'mde-prevent-jumping' into 'main'

Prevent page jumping when switching MDE mode See merge request reportcreator/reportcreator!354
Syslifters · Nov 28, 2023 · 8d59a98 · 8d59a98
2 parents 8d6b903 + a8a4890
commit 8d59a98
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,7 @@
 * Allow configuring regex patterns for list items
 * Add scheme to predefined URL regex
 * Fix list items not updated in design preview data form
+* Prevent page offset jumping when switching markdown editor mode
 
 
 ## v2023.142 - 2023-11-21

diff --git a/frontend/src/components/Markdown/Preview.vue b/frontend/src/components/Markdown/Preview.vue
@@ -22,10 +22,12 @@ const props = defineProps<{
   value?: string|null;
   rewriteFileUrl?: (fileSrc: string) => string;
   rewriteReferenceLink?: (src: string) => {href: string, title: string}|null;
+  cacheBuster?: string;
 }>();
 
 const renderedMarkdown = ref('');
-const cacheBuster = uuidv4();
+const cacheBusterFallback = uuidv4();
+const cacheBuster = computed(() => props.cacheBuster || cacheBusterFallback);
 
 function rewriteFileSource(imgSrc: string) {
   // Rewrite image source to handle image fetching from markdown.

diff --git a/frontend/src/components/Markdown/Toolbar.vue b/frontend/src/components/Markdown/Toolbar.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-toolbar density="compact" flat class="toolbar">
+  <v-toolbar ref="toolbarRef" density="compact" flat class="toolbar">
     <markdown-toolbar-button @click="codemirrorAction(toggleStrong)" title="Bold" icon="mdi-format-bold" :disabled="props.disabled" :active="isTypeInSelection(props.editorState, 'strong')" />
     <markdown-toolbar-button @click="codemirrorAction(toggleEmphasis)" title="Italic" icon="mdi-format-italic" :disabled="props.disabled" :active="isTypeInSelection(props.editorState, 'emphasis')" />
     <markdown-toolbar-button @click="codemirrorAction(toggleStrikethrough)" title="Strikethrough" icon="mdi-format-strikethrough" :disabled="props.disabled" :active="isTypeInSelection(props.editorState, 'strikethrough')" />
@@ -37,9 +37,9 @@
     <markdown-toolbar-button @click="codemirrorAction(redo)" title="Redo" icon="mdi-redo" :disabled="props.disabled || !canRedo" />
     <span class="separator" />
     <v-spacer />
-    <markdown-toolbar-button v-if="localSettings.markdownEditorMode === MarkdownEditorMode.MARKDOWN" @click="localSettings.markdownEditorMode = MarkdownEditorMode.MARKDOWN_AND_PREVIEW" title="Markdown" icon="mdi-language-markdown" :active="true" />
-    <markdown-toolbar-button v-else-if="localSettings.markdownEditorMode === MarkdownEditorMode.MARKDOWN_AND_PREVIEW" @click="localSettings.markdownEditorMode = MarkdownEditorMode.PREVIEW" title="Side-by-Side View" icon="mdi-view-split-vertical" :active="true" />
-    <markdown-toolbar-button v-else-if="localSettings.markdownEditorMode === MarkdownEditorMode.PREVIEW" @click="localSettings.markdownEditorMode = MarkdownEditorMode.MARKDOWN" title="Preview" icon="mdi-image-filter-hdr" :active="true" />
+    <markdown-toolbar-button v-if="localSettings.markdownEditorMode === MarkdownEditorMode.MARKDOWN" @click="setMarkdownEditorMode(MarkdownEditorMode.MARKDOWN_AND_PREVIEW)" title="Markdown" icon="mdi-language-markdown" :active="true" />
+    <markdown-toolbar-button v-else-if="localSettings.markdownEditorMode === MarkdownEditorMode.MARKDOWN_AND_PREVIEW" @click="setMarkdownEditorMode(MarkdownEditorMode.PREVIEW)" title="Side-by-Side View" icon="mdi-view-split-vertical" :active="true" />
+    <markdown-toolbar-button v-else-if="localSettings.markdownEditorMode === MarkdownEditorMode.PREVIEW" @click="setMarkdownEditorMode(MarkdownEditorMode.MARKDOWN)" title="Preview" icon="mdi-image-filter-hdr" :active="true" />
   </v-toolbar>
 </template>
 
@@ -63,6 +63,8 @@ import {
   isTypeInSelection,
   // @ts-ignore
 } from 'reportcreator-markdown/editor';
+import type { VToolbar } from 'vuetify/lib/components/index.mjs';
+import { MarkdownEditorMode } from '@/utils/types';
 
 const props = defineProps<{
   editorView: EditorView;
@@ -119,6 +121,30 @@ function codemirrorAction(actionFn: (view: EditorView) => void) {
   }
 }
 
+const toolbarRef = ref<VToolbar>();
+function getScrollParent(node?: HTMLElement|null) {
+  if (!node) { return null; }
+  if (node.scrollHeight > node.clientHeight) {
+    return node;
+  } else {
+    return getScrollParent(node.parentElement);
+  }
+}
+async function setMarkdownEditorMode(mode: MarkdownEditorMode) {
+  const scrollParent = getScrollParent(toolbarRef.value!.$el);
+  const { y: prevTop } = toolbarRef.value!.$el.getBoundingClientRect();
+
+  // Update editor mode => changes view and potentially causes layout jump
+  localSettings.markdownEditorMode = mode;
+  await nextTick();
+
+  // Restore position, such the toolbar is at the same position
+  const { y: newTop } = toolbarRef.value!.$el.getBoundingClientRect();
+  if (scrollParent) {
+    scrollParent.scrollTop += newTop - prevTop;
+  }
+}
+
 </script>
 
 <style lang="scss" scoped>

diff --git a/frontend/src/composables/markdown.ts b/frontend/src/composables/markdown.ts
@@ -1,3 +1,4 @@
+import { v4 as uuid4 } from 'uuid';
 import type { PropType } from "vue";
 import {
   createEditorExtensionToggler,
@@ -79,6 +80,7 @@ export function useMarkdownEditor({ props, emit, extensions }: {
     !props.value.disabled &&
     !!props.value.spellcheckSupported &&
     localSettings.spellcheckBrowserEnabled(props.value.lang || null))
+  const previewCacheBuster = uuid4();
 
   async function performSpellcheckRequest(data: any): Promise<any> {
     if (!props.value.lang) {
@@ -263,6 +265,7 @@ export function useMarkdownEditor({ props, emit, extensions }: {
     value: props.value.modelValue,
     rewriteFileUrl: props.value.rewriteFileUrl,
     rewriteReferenceLink: props.value.rewriteReferenceLink,
+    cacheBuster: previewCacheBuster,
   }));
 
   return {