@adminforth/markdown 1.11.1 → 1.12.0

package/build.log

@@ -14,5 +14,5 @@ custom/tsconfig.json
 custom/utils/
 custom/utils/monacoMarkdownToggle.ts
 
-sent 52,947 bytes  received 180 bytes  106,254.00 bytes/sec
-total size is 52,265  speedup is 0.98
+sent 55,455 bytes  received 180 bytes  111,270.00 bytes/sec
+total size is 54,773  speedup is 0.98

package/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>
   

package/dist/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>
   

package/dist/index.js

@@ -54,7 +54,7 @@ export default class MarkdownPlugin extends AdminForthPlugin {
             modifyResourceConfig: { get: () => super.modifyResourceConfig }
         });
         return __awaiter(this, void 0, void 0, function* () {
-            var _a, _b, _c;
+            var _a, _b, _c, _d, _e;
             _super.modifyResourceConfig.call(this, adminforth, resourceConfig);
             this.resourceConfig = resourceConfig;
             const fieldName = this.options.fieldName;
@@ -105,6 +105,8 @@ export default class MarkdownPlugin extends AdminForthPlugin {
                 meta: {
                     pluginInstanceId: this.pluginInstanceId,
                     columnName: fieldName,
+                    compactShowPreview: (_a = this.options.compactShowPreview) !== null && _a !== void 0 ? _a : true,
+                    maxShowViewContainerHeightPx: this.options.maxShowViewContainerHeightPx,
                 },
             };
             column.components.list = {
@@ -112,6 +114,8 @@ export default class MarkdownPlugin extends AdminForthPlugin {
                 meta: {
                     pluginInstanceId: this.pluginInstanceId,
                     columnName: fieldName,
+                    compactShowPreview: (_b = this.options.compactShowPreview) !== null && _b !== void 0 ? _b : true,
+                    maxShowViewContainerHeightPx: this.options.maxShowViewContainerHeightPx,
                 },
             };
             column.components.edit = {
@@ -119,7 +123,7 @@ export default class MarkdownPlugin extends AdminForthPlugin {
                 meta: {
                     pluginInstanceId: this.pluginInstanceId,
                     columnName: fieldName,
-                    uploadPluginInstanceId: (_a = this.uploadPlugin) === null || _a === void 0 ? void 0 : _a.pluginInstanceId,
+                    uploadPluginInstanceId: (_c = this.uploadPlugin) === null || _c === void 0 ? void 0 : _c.pluginInstanceId,
                 },
             };
             column.components.create = {
@@ -127,14 +131,14 @@ export default class MarkdownPlugin extends AdminForthPlugin {
                 meta: {
                     pluginInstanceId: this.pluginInstanceId,
                     columnName: fieldName,
-                    uploadPluginInstanceId: (_b = this.uploadPlugin) === null || _b === void 0 ? void 0 : _b.pluginInstanceId,
+                    uploadPluginInstanceId: (_d = this.uploadPlugin) === null || _d === void 0 ? void 0 : _d.pluginInstanceId,
                 },
             };
             const topPanelSettings = this.options.topPanelSettings || {};
             const commonMeta = {
                 pluginInstanceId: this.pluginInstanceId,
                 columnName: fieldName,
-                uploadPluginInstanceId: (_c = this.uploadPlugin) === null || _c === void 0 ? void 0 : _c.pluginInstanceId,
+                uploadPluginInstanceId: (_e = this.uploadPlugin) === null || _e === void 0 ? void 0 : _e.pluginInstanceId,
                 topPanelSettings: topPanelSettings,
             };
             column.components.edit = {

package/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,
       },
     };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adminforth/markdown",
-  "version": "1.11.1",
+  "version": "1.12.0",
   "description": "Markdown plugin for adminforth",
   "type": "module",
   "main": "dist/index.js",

package/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;
 }