feat: add maxShowViewContainerHeightPx and compactShowPreview props for the markdown editor

https://web.tracklify.com/project/2b7ZVgE5/AdminForth/1401/j3wbyLxf/add-compactpreview-and-maxheig

Author: yaroslav8765

custom/MarkdownRenderer.vue

@@ -1,39 +1,121 @@
 <template>
-    <div 
-      v-html="purifiedHtml"   
-      class="prose
-         prose-p:my-0
-         prose-headings:my-0
-         prose-h1:text-[1.6rem]
-         prose-ul:my-0
-         prose-ol:my-0
-         prose-li:my-0
-         prose-pre:my-0
-         prose-hr:my-1
-         leading-tight
-         dark: dark:text-gray-300
-         dark:[&_th]:text-white
-         dark:[&_td]:text-white
-         dark:[&_thead]:border-b-gray-600
-         dark:[&_code]:text-white
-         dark:[&_h1]:text-white dark:[&_h2]:text-gray-100 dark:[&_h3]:text-gray-200
-         dark:[&_a]:text-white dark:[&_a:hover]:text-white
-         dark:[&_pre]:bg-black dark:[&_pre]:border dark:[&_border-slate-800]
-         dark:[&_strong]:text-white
-         dark:[&_em]:text-gray-400
-         dark:[&_del]:text-gray-600">
-      </div>
-  </template>
-  
-  <script setup lang="ts">
-  import { computed } from 'vue';
-  import { marked } from "marked";
-  import DOMPurify from "dompurify";
-  
-  const props = defineProps<{ column: any; record: any }>();
+  <div>
+    <div
+      :class="{ 'overflow-hidden': !expanded && isOverflowing }"
+      :style="!expanded && isOverflowing ? computedMaxHeight : {}"
+    >
+      <div
+        ref="contentRef"
+        v-html="purifiedHtml"
+        class="prose
+           prose-p:my-0
+           prose-headings:my-0
+           prose-h1:text-[1.6rem]
+           prose-ul:my-0
+           prose-ol:my-0
+           prose-li:my-0
+           prose-pre:my-0
+           prose-hr:my-1
+           prose-table:my-0
+           leading-none
+           dark: dark:text-gray-300
+           dark:[&_th]:text-white
+           dark:[&_td]:text-white
+           dark:[&_thead]:border-b-gray-600
+           dark:[&_code]:text-white
+           dark:[&_h1]:text-white dark:[&_h2]:text-gray-100 dark:[&_h3]:text-gray-200
+           dark:[&_a]:text-white dark:[&_a:hover]:text-white
+           dark:[&_pre]:bg-black dark:[&_pre]:border dark:[&_border-slate-800]
+           dark:[&_strong]:text-white
+           dark:[&_em]:text-gray-400
+           dark:[&_del]:text-gray-600"
+           :class="compactPreviewStyles"
+      ></div>
+    </div>
+    <button
+      v-if="isOverflowing || expanded"
+      @click="expanded = !expanded"
+      class="mt-1 text-sm text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300 font-medium focus:outline-none hover:underline"
+    >
+      {{ expanded ? 'Show less' : 'Show more' }}
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
+import { marked } from "marked";
+import DOMPurify from "dompurify";
   
-  const purifiedHtml = computed(() => {
+  const props = defineProps<{ 
+    column: any; 
+    record: any; 
+    meta: {
+      pluginInstanceId: string;
+      compactShowPreview?: boolean;
+      maxShowViewContainerHeightPx?: number;
+    }
+  }>();
+
+  const compactPreviewStyles = computed(() => {
+    if (props.meta.compactShowPreview) {
+      return `
+        prose-ul:leading-[0.2]
+        prose-ol:leading-[0.2]
+        prose-li:leading-[1]
+        prose-h1:leading-none
+        prose-h2:leading-none
+        prose-h3:leading-none
+        prose-h1:text-[1.3rem]
+        prose-h2:text-[1.2rem]
+        prose-h3:text-[1.1rem]
+        prose-blockquote:my-0
+      `
+    } else {
+      return '';
+    }
+  });
+
+  const computedMaxHeight = computed(() => {
+    if (props.meta.maxShowViewContainerHeightPx) {
+      return { maxHeight: `${props.meta.maxShowViewContainerHeightPx}px` };
+    }
+    return {};
+  });
+
+  const contentRef = ref<HTMLElement | null>(null);
+  const expanded = ref(false);
+  const isOverflowing = ref(false);
 
+  let resizeObserver: ResizeObserver | null = null;
+
+  function checkOverflow() {
+    if (!props.meta.maxShowViewContainerHeightPx || !contentRef.value) {
+      isOverflowing.value = false;
+      return;
+    }
+    isOverflowing.value = contentRef.value.scrollHeight > props.meta.maxShowViewContainerHeightPx;
+  }
+
+  function setupObserver() {
+    resizeObserver?.disconnect();
+    if (!props.meta.maxShowViewContainerHeightPx || !contentRef.value) return;
+
+    resizeObserver = new ResizeObserver(() => checkOverflow());
+    resizeObserver.observe(contentRef.value);
+  }
+
+  onMounted(async () => {
+    await nextTick();
+    checkOverflow();
+    setupObserver();
+  });
+
+  onBeforeUnmount(() => {
+    resizeObserver?.disconnect();
+  });
+
+  const purifiedHtml = computed(() => {
     if (!props.record[props.column.name]) return '-';
     const html = marked(String(props.record[props.column.name]));
     if (html instanceof Promise) {
@@ -42,5 +124,13 @@
     }
     return DOMPurify.sanitize(html);
   });
+
+  // Re-check overflow whenever content changes
+  watch(purifiedHtml, async () => {
+    expanded.value = false;
+    await nextTick();
+    checkOverflow();
+    setupObserver();
+  });
   </script>
 

index.ts

@@ -106,6 +106,8 @@ export default class MarkdownPlugin extends AdminForthPlugin {
       meta: {
         pluginInstanceId: this.pluginInstanceId,
         columnName: fieldName,
+        compactShowPreview: this.options.compactShowPreview ?? true,
+        maxShowViewContainerHeightPx: this.options.maxShowViewContainerHeightPx,
       },
     };
 
@@ -114,6 +116,8 @@ export default class MarkdownPlugin extends AdminForthPlugin {
       meta: {
         pluginInstanceId: this.pluginInstanceId,
         columnName: fieldName,
+        compactShowPreview: this.options.compactShowPreview ?? true,
+        maxShowViewContainerHeightPx: this.options.maxShowViewContainerHeightPx,
       },
     };
 

types.ts

@@ -82,4 +82,16 @@ export interface PluginOptions {
     link?: boolean;
     codeBlock?: boolean;
   };
+
+  /**
+   * When true, the preview will be shown in a compact mode with a "Show more" button if the content exceeds the specified max height.
+   * This allows users to expand and collapse the preview as needed, improving readability for long content.
+   * Default is true.
+   */
+  compactShowPreview?: boolean;
+  /**
+   * Maximum height in pixels for the preview container when `compactShowPreview` is enabled.
+   * If the content exceeds this height, a "Show more" button will appear to allow users to expand the preview.
+   */
+  maxShowViewContainerHeightPx?: number;
 }