From 56f74964ed326910a2a462075e8463ae4dc39a60 Mon Sep 17 00:00:00 2001
From: James Collins <james.collins@outlook.com.au>
Date: Fri, 7 Jul 2023 07:21:14 +1000
Subject: [PATCH] removed mdpreview and added SMHTML

---
 resources/js/components/SMHTML.vue | 79 ++++++++++++++++++++++++++++++
 resources/js/views/Article.vue     |  8 +--
 resources/js/views/Event.vue       | 20 ++++----
 3 files changed, 92 insertions(+), 15 deletions(-)
 create mode 100644 resources/js/components/SMHTML.vue

diff --git a/resources/js/components/SMHTML.vue b/resources/js/components/SMHTML.vue
new file mode 100644
index 0000000..5362421
--- /dev/null
+++ b/resources/js/components/SMHTML.vue
@@ -0,0 +1,79 @@
+<template>
+    <component :is="computedContent.template"></component>
+</template>
+
+<script setup lang="ts">
+import DOMPurify from "dompurify";
+import { computed } from "vue";
+import { ImportMetaExtras } from "../../../import-meta";
+// import SMImageGallery from "./SMImageGallery.vue";
+
+const props = defineProps({
+    html: {
+        type: String,
+        default: "",
+        required: true,
+    },
+});
+
+/**
+ * Return the html as a component, relative links as router-link and sanitized.
+ */
+const computedContent = computed(() => {
+    let html = "";
+
+    // Sanitize HTML
+    html = DOMPurify.sanitize(html);
+
+    // Convert local links to router-links
+    const regexHref = new RegExp(
+        `<a ([^>]*?)href="${
+            (import.meta as ImportMetaExtras).env.APP_URL
+        }(.*?>.*?)</a>`,
+        "ig",
+    );
+    html = props.html.replace(regexHref, '<router-link $1to="$2</router-link>');
+
+    // Convert image galleries to SMImageGallery component
+    // const regexGallery =
+    //     /<div.*?class="tinymce-gallery".*?>\s*((?:<div class="tinymce-gallery-item" style="background-image: url\('.*?'\);">.*?<\/div>\s*)*)<\/div>/gi;
+
+    // const matches = [...html.matchAll(regexGallery)];
+    // for (const match of matches) {
+    //     const images = match[1]; // Extract the captured group from the match
+    //     const imageSrcs = images
+    //         .match(/style="background-image: url\('(.*?)'\)/gi)
+    //         .map((m) => m.match(/background-image: url\('(.*?)'\)/i)[1]);
+    //     const smImageGallery = `<SMImageGallery :images='${JSON.stringify(
+    //         imageSrcs
+    //     )}' />`;
+    //     html = html.replace(images, smImageGallery);
+    // }
+
+    // Update local images to use at most the large size
+    const regexImg = new RegExp(
+        `<img ([^>]*?)src="${
+            (import.meta as ImportMetaExtras).env.APP_URL
+        }/uploads/([^"]*?)"`,
+        "ig",
+    );
+    html = html.replace(
+        regexImg,
+        `<img $1src="${
+            (import.meta as ImportMetaExtras).env.APP_URL
+        }/uploads/$2?size=large"`,
+    );
+
+    return {
+        template: `<div class="html">${html}</div>`,
+        ...{},
+    };
+
+    // return {
+    //     template: `<div class="html">${html}</div>`,
+    //     // components: {
+    //     // SMImageGallery,
+    //     // },
+    // };
+});
+</script>
diff --git a/resources/js/views/Article.vue b/resources/js/views/Article.vue
index bf76dbb..f701d37 100644
--- a/resources/js/views/Article.vue
+++ b/resources/js/views/Article.vue
@@ -35,7 +35,7 @@
                     >Edit Article</router-link
                 >
             </div>
-            <MdPreview :model-value="article.content" />
+            <SMHTML :html="article.content" />
             <SMAttachments :attachments="article.attachments || []" />
         </div>
     </template>
@@ -53,7 +53,7 @@ import { mediaGetVariantUrl } from "../helpers/media";
 import { userHasPermission } from "../helpers/utils";
 import SMLoading from "../components/SMLoading.vue";
 import SMPageStatus from "../components/SMPageStatus.vue";
-import { MdPreview } from "md-editor-v3";
+import SMHTML from "../components/SMHTML.vue";
 
 const applicationStore = useApplicationStore();
 
@@ -112,12 +112,12 @@ const handleLoad = async () => {
                     {
                         format: "ymd",
                         utc: true,
-                    }
+                    },
                 ).format("yyyy/MM/dd HH:mm:ss");
 
                 backgroundImageUrl.value = mediaGetVariantUrl(
                     article.value.hero,
-                    "large"
+                    "large",
                 );
                 applicationStore.setDynamicTitle(article.value.title);
             } else {
diff --git a/resources/js/views/Event.vue b/resources/js/views/Event.vue
index be2eb94..5bb5c98 100644
--- a/resources/js/views/Event.vue
+++ b/resources/js/views/Event.vue
@@ -11,7 +11,7 @@
                 :style="{
                     backgroundImage: `url('${mediaGetVariantUrl(
                         event.hero,
-                        'large'
+                        'large',
                     )}')`,
                 }"></div>
             <img
@@ -23,9 +23,7 @@
                 class="max-w-4xl mx-auto px-4 flex flex-col-reverse sm:flex-row">
                 <div class="sm:pr-8 mt-4 sm:mt-0">
                     <h1 class="pb-6">{{ event.title }}</h1>
-                    <MdPreview
-                        :model-value="event.content"
-                        class="workshop-content" />
+                    <SMHTML :html="event.content" class="workshop-content" />
                     <SMAttachments :attachments="event.attachments || []" />
                 </div>
                 <div class="sm:min-w-68">
@@ -181,7 +179,7 @@ import { mediaGetVariantUrl } from "../helpers/media";
 import { userHasPermission } from "../helpers/utils";
 import SMLoading from "../components/SMLoading.vue";
 import SMPageStatus from "../components/SMPageStatus.vue";
-import { MdPreview } from "md-editor-v3";
+import SMHTML from "../components/SMHTML.vue";
 
 const applicationStore = useApplicationStore();
 
@@ -206,13 +204,13 @@ const workshopDate = computed(() => {
             event.value.end_at.length > 0 &&
             event.value.start_at.substring(
                 0,
-                event.value.start_at.indexOf(" ")
+                event.value.start_at.indexOf(" "),
             ) !=
                 event.value.end_at.substring(0, event.value.end_at.indexOf(" "))
         ) {
             str = [
                 new SMDate(event.value.start_at, { format: "ymd" }).format(
-                    "dd/MM/yyyy"
+                    "dd/MM/yyyy",
                 ),
             ];
             if (event.value.end_at.length > 0) {
@@ -220,20 +218,20 @@ const workshopDate = computed(() => {
                     str[0] +
                     " - " +
                     new SMDate(event.value.end_at, { format: "ymd" }).format(
-                        "dd/MM/yyyy"
+                        "dd/MM/yyyy",
                     );
             }
         } else {
             str = [
                 new SMDate(event.value.start_at, { format: "ymd" }).format(
-                    "EEEE dd MMM yyyy"
+                    "EEEE dd MMM yyyy",
                 ),
                 new SMDate(event.value.start_at, { format: "ymd" }).format(
-                    "h:mm aa"
+                    "h:mm aa",
                 ) +
                     " - " +
                     new SMDate(event.value.end_at, { format: "ymd" }).format(
-                        "h:mm aa"
+                        "h:mm aa",
                     ),
             ];
         }