jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged PR 137: ContentEditor into main

Browse Source
This commit is contained in:
Dominic Villemure
2024-10-13 15:00:59 +00:00
parent 7249c42c3b 74ca00bd07
commit 18e0b5ad03
133 changed files with 10986 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

193
src/views/contents/ContentEditorPage.vue Normal file
View File

@@ -0,0 +1,193 @@
<script setup>
import {ref} from 'vue';
import Editor from '@tinymce/tinymce-vue';
import '@tinymce/tinymce-vue';
import {useClient} from "@/plugins/api.js";
import {useUserProfileStore} from "@/stores/userProfileStore.js";
import {v7} from "uuid";
import {useRouter} from "vue-router";
const router = useRouter();
const client = useClient();
const tinymceScriptSrc = '/tinymce/js/tinymce/tinymce.min.js';
const content = ref('');
const title = ref('');
let lastUploadedFileName = '';
const isSnackbarOpen = ref(false);
const snackbarTimeout = ref(2000);
const snackbarText = ref('');
const snackbarColor = ref('red');
const selectedBackgroundColor = ref('#f0f0f0');
const userStore = useUserProfileStore();
// Custom image upload handler
const imagesUploadHandler = async (blobInfo) => {
const formData = new FormData();
formData.append('id', v7());
formData.append('files', blobInfo.blob(), lastUploadedFileName);
formData.append('creatorId', userStore.user.id);
let response = await client.post("/api/content/insert-image", formData);
let imageUrl = response.data[0];
/* global tinymce */
const editor = tinymce.activeEditor;
const images = editor.dom.select('img');
const lastImage = images.find(x => x.alt = lastUploadedFileName);
if (lastImage) {
// Replace the source of the image
editor.dom.setAttrib(lastImage, 'src', imageUrl);
editor.dom.setAttrib(lastImage, 'alt', lastUploadedFileName);
// Adds the change to the undo stack
editor.undoManager.add();
} else {
console.error('No image found in the content.');
}
};
const filePickerCallback = (callback, value, meta) => {
const input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
input.onchange = function () {
const file = input.files[0];
const reader = new FileReader();
reader.onload = function () {
lastUploadedFileName = file.name;
callback(reader.result);
}
reader.readAsDataURL(file);
};
input.click();
};
const saveAsync = async () => {
if (title.value === '') {
snackbarText.value = "Vous avez besoin d'un titre";
isSnackbarOpen.value = true;
}
const fullHtmlContent = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${title.value}</title>
</head>
<body>
${content.value}
</body>
</html>`;
const formData = new FormData();
formData.append('id', v7());
formData.append('creatorId', userStore.user.id);
formData.append('title', title.value);
formData.append('htmlContent', fullHtmlContent);
const response = await client.post("/api/contents/html", formData);
if (response.status === 200) {
snackbarText.value = "Publier";
snackbarColor.value = "green";
isSnackbarOpen.value = true;
router.go(-1)
}
};
const setupTinyMCE = (editor) => {
// Custom button for selecting background color
editor.ui.registry.addButton('myCustomBgColorButton', {
text: 'Page BG Color',
onAction: function () {
editor.windowManager.open({
title: 'Select Page Background Color',
body: {
type: 'panel',
items: [
{
type: 'colorpicker',
name: 'colorpicker',
label: 'Background Color'
}
]
},
buttons: [
{
text: 'Save',
type: 'submit',
primary: true
}
],
onSubmit: function (dialog) {
console.log('supppp');
const color = dialog.getData().colorpicker;
console.log(color);
selectedBackgroundColor.value = color;
// Insert style into TinyMCE's content
const styleTag = `<style>body { background-color: ${color}; }</style>`;
editor.execCommand('mceInsertContent', false, styleTag);
dialog.close(); // Close dialog after selecting color
}
});
}
});
}
</script>
<template>
<v-snackbar v-model="isSnackbarOpen" :timeout="snackbarTimeout">
{{ snackbarText }}
<template v-slot:actions>
<v-btn :color="snackbarColor" variant="text" @click="isSnackbarOpen = false">
Fermer
</v-btn>
</template>
</v-snackbar>
<div class="w-full h-full flex flex-col items-center justify-start">
<v-btn class="mb-4 text-xl px-6 py-3" @click="router.go(-1)">Return</v-btn>
<v-text-field
v-model="title"
placeholder="Title"
style="width: 40%; font-size: 1.5rem; padding: 10px;"
></v-text-field>
<Editor
style="max-width: 400px; width: 50%; font-size: 1.5rem; padding: 10px; height: 120%"
:tinymceScriptSrc="tinymceScriptSrc"
v-model="content"
:init="{
branding: false,
promotion: false,
plugins: 'lists link emoticons image imagetools code help wordcount media autoresize textcolor colorpicker',
block_formats: 'Paragraph=p; Header 1=h1; Header 2=h2; Header 3=h3',
toolbar: 'undo redo image align myCustomBgColorButton',
automatic_uploads: true,
file_picker_types: 'image',
min_height: 600,
max_height: 1200,
images_upload_handler: imagesUploadHandler,
file_picker_callback: filePickerCallback,
// setup: setupTinyMCE, Possible to change background color of the html
}"
/>
<v-btn @click="saveAsync()">POST</v-btn>
</div>
</template>
<style scoped>
</style>

13
src/views/contents/PublishContentButton.vue
View File

@@ -3,15 +3,11 @@ import {useClient} from '@/plugins/api.js';
import {ref} from 'vue';
import {v7} from 'uuid';
import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
import {useUserProfileStore} from "@/stores/userProfileStore.js";
const props = defineProps({
creator: {type: Object, required: true},
});
import {useBrandingStore} from "@/stores/brandingStore.js";
const emits = defineEmits(['content-posted'])
const userProfileStore = useUserProfileStore()
const brandingStore = useBrandingStore()
const creatorProfileStore = useCreatorProfileStore()
const isDialogActive = ref(false);
@@ -33,7 +29,7 @@ const removeUrl = (index) => {
async function publishPost() {
const formData = new FormData();
formData.append('id', v7());
formData.append('creatorId', creatorProfileStore.value.id);
formData.append('creatorId', creatorProfileStore.creator.id);
formData.append('title', title.value);
formData.append('description', message.value);
files.value.forEach(file => {
@@ -75,7 +71,6 @@ const closeDialog = () => {
<template>
<button
v-if="creator && userProfileStore.value && creator.id === userProfileStore.value.id"
class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125 px-4"
@click="isDialogActive = true">
<v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-text-box-plus-outline</v-icon>
@@ -85,7 +80,7 @@ const closeDialog = () => {
<v-form>
<v-card class="text-center rounded-xl"
:style="{
border: `3px solid ${creator.colors.menu}`
border: `3px solid ${brandingStore.value.colors.menu}`
}">
<v-card-title class="font-medium">

55
src/views/contents/contentcards/NContentCard.vue
View File

@@ -18,7 +18,7 @@
</span>
</div>
<v-menu>
<v-menu v-if="creatorIsCurrentUser">
<template v-slot:activator="{ props }">
<v-btn variant="plain" v-bind="props">
<v-icon>mdi-dots-vertical</v-icon>
@@ -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
@@ -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}`;
}

25
src/views/creators/CreatorContent.vue
View File

@@ -1,5 +1,11 @@
<template>
<div class="w-full h-full">
<div class="w-full h-full">
<div v-if="creatorIsCurrentUser" class="flex space-x-4">
<publish-content-button></publish-content-button>
<v-btn icon @click="createHtmlContent">
<v-icon>mdi-pencil</v-icon>
</v-btn>
</div>
<div v-if="brandingStore.value.loading">
<v-progress-linear indeterminate></v-progress-linear>
</div>
@@ -13,5 +19,22 @@
<script async setup>
import {useBrandingStore} from "@/stores/brandingStore.js";
import ContentList from "@/views/contents/ContentList.vue";
import {useRouter} from "vue-router";
import PublishContentButton from "@/views/contents/PublishContentButton.vue";
import {computed} from "vue";
import {useAuthStore} from "@/stores/authStore.js";
const brandingStore = useBrandingStore()
const authStore = useAuthStore();
const router = useRouter();
const creatorIsCurrentUser = computed(() => authStore.isAuthenticated && authStore.userId === brandingStore.value.id);
const createHtmlContent = () => {
router.push('/content/editor');
}
const createContent = () => {
router.push('/content/post');
}
</script>

2
src/views/creators/CreatorLayout.vue
View File

@@ -1,14 +1,12 @@
<template>
<div class="flex flex-col min-h-screen max-w-[1500px] mx-auto">
<div v-if="brandingStore.loading">
<v-progress-linear indeterminate></v-progress-linear>
</div>
<div v-else>
<creator-banner></creator-banner>
</div>
<div class="py-8 flex-grow">
<router-view></router-view>
</div>