removed mdpreview and added SMHTML
This commit is contained in:
79
resources/js/components/SMHTML.vue
Normal file
79
resources/js/components/SMHTML.vue
Normal file
@@ -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>
|
||||
@@ -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 {
|
||||
|
||||
@@ -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",
|
||||
),
|
||||
];
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user