TinyMce for posts

src/views/contents/contentcards/NContentCard.vue

@@ -40,6 +40,26 @@
         <div>
           {{ props.content.description }}
         </div>
+        <div v-if="props.content.htmlFileUrl !== ''" class="html-content">
+
+          <div v-if="isIframeLoading">
+            <v-progress-circular indeterminate color="primary"></v-progress-circular>
+          </div>
+          
+          <iframe 
+              ref="iframe"
+              :src="props.content.htmlFileUrl"
+              class="w-full"
+              :style="{ height: iframeHeight + 'px', overflow: 'hidden' }"
+              allowfullscreen
+              @load="isIframeLoading = false"
+              v-show="!isIframeLoading"
+          ></iframe>
+          <!-- Expand button to toggle full size -->
+          <v-btn v-if="showExpandButton" @click="toggleExpand">
+            {{ isExpanded ? 'Collapse' : 'Expand' }}
+          </v-btn>
+        </div>
       </v-card-title>
 
       <v-carousel
@@ -131,7 +151,7 @@
 </template>
 
 <script setup>
-import {computed, onBeforeMount, ref} from 'vue';
+import {computed, onBeforeMount, onMounted, onUnmounted, ref} from 'vue';
 import {time_ago} from "@/internal_time_ago.js";
 import MessageList from "@/views/messages/MessageList.vue";
 import PostMessage from "@/views/messages/PostMessage.vue";
@@ -166,6 +186,12 @@ const messagesVisible = ref(false);
 const messages = ref([]);
 const hasMessages = computed(() => messages.value.length > 0);
 
+const iframeHeight = ref(300);
+const minHeight = ref(200);
+const maxHeight = ref(1200);
+const isExpanded = ref(false);
+const showExpandButton = ref(false);
+const isIframeLoading = ref(true);
 
 onBeforeMount(async () => {
   messageCount.value = await messageStore.fetchMessageCount(contentId.value)
@@ -205,6 +231,33 @@ async function deleteContent() {
   }
 }
 
+const observeIframeSize = () => {
+  const iframe = document.querySelector('iframe');
+
+  if (iframe && iframe.contentWindow) {
+    // Access the iframe's content document and measure the scrollHeight
+    const iframeDocument = iframe.contentWindow.document;
+    const contentHeight = iframeDocument.body.scrollHeight;
+
+    console.log('Content height:', contentHeight);
+
+    // If content height exceeds 200px, show the expand button
+    if (contentHeight > 200) {
+      showExpandButton.value = true;
+    } else {
+      showExpandButton.value = false;
+    }
+
+    // Set iframe height initially to the smaller value (200px) or full content height if expanded
+    iframeHeight.value = isExpanded.value ? contentHeight : Math.min(contentHeight, 200);
+  }
+};
+
+const toggleExpand = () => {
+  isExpanded.value = !isExpanded.value;
+  observeIframeSize();
+};
+
 function redirectToContent() {
   window.location.href = `/content/${props.content.id}`;
 }