path: root/public/index.php

<?php
function imagickCleanAndWriteImage(string $image_data, string $local_path): bool // "string" parce que file_get_contents...
{
    $format = strtolower(pathinfo($local_path)['extension']);
    try{
        $imagick = new Imagick();
        $imagick->readImageBlob($image_data);
        $imagick->stripImage(); // nettoyage métadonnées
        //$imagick->setImageFormat($format); // inutile, writeImage force la conversion

        // compression
        switch($format){
            case 'jpeg': // particularité du switch, si 'jpeg' le test de 'jpg' est ignoré et on va jusqu'au break
            case 'jpg':
                $imagick->setImageCompression(Imagick::COMPRESSION_JPEG);
                $imagick->setImageCompressionQuality(85);
                break;
            case 'webp':
                $imagick->setImageCompression(Imagick::COMPRESSION_WEBP);
                $imagick->setImageCompressionQuality(85);
                break;
            case 'png':
                $imagick->setImageCompression(Imagick::COMPRESSION_ZIP);
                $imagick->setImageCompressionQuality(7); // 9 est sans perte
                break;
            case 'tiff':
                $imagick->setImageCompression(Imagick::COMPRESSION_LZW);  // LZW est sans perte
                break;
        }

        // enregistrement
        // writeImage utilise l'extension du fichier et ignore le format détecté
        // imagemagick est à l'origine une appli console, elle considère que l'extension montre l'intention de l'utilisateur
        $imagick->writeImage($local_path);
        $imagick->clear();
        $imagick->destroy();
        return true;
    }
    catch(Exception $e){
        return false;
    }
}

function curlDownloadImage(string $url, int $maxRetries = 3, int $timeout = 10): string|false
{
    $attempt = 0;
    $imageData = false;

    while($attempt < $maxRetries){
        $ch = curl_init($url); // instance de CurlHandle
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
        curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
        curl_setopt($ch, CURLOPT_TIMEOUT, $timeout);
        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, true);
        curl_setopt($ch, CURLOPT_USERAGENT, 'TinyMCE-Image-Downloader');

        $imageData = curl_exec($ch);
        $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
        //$curlError = curl_error($ch);

        curl_close($ch);

        if($imageData !== false && $httpCode >= 200 && $httpCode < 300){
            return $imageData;
        }

        $attempt++;
        sleep(1);
    }

    return false; // échec après trois tentatives
}

function sanitizeFileName(string $filename): string {
    $filename = preg_replace('/[^a-zA-Z0-9_-]/', '_', $filename); // ne garder que les lettres, chiffres, tirets et underscores
    $filename = preg_replace('/_+/', '_', $filename); // doublons d'underscores
    return trim($filename, '_');
}

function checkFileDownload(array $file): bool
{
	$extensions_white_list = ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'odt', 'ods', 'odp'];
	$mime_type_white_list = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-powerpoint', 'application/vnd.openxmlformats-officedocument.presentationml.presentation', 'application/vnd.oasis.opendocument.text', 'application/vnd.oasis.opendocument.spreadsheet', 'application/vnd.oasis.opendocument.presentation'];
	
	// 1/ extension
	$extension = strtolower(pathinfo($file['name'], PATHINFO_EXTENSION));
	if(!in_array($extension, $extensions_white_list, true)){
		return false;
    }
	
	// 2/ fichier obtenu par HTTP POST (théoriquement inutile si le routeur est solide, mais ça ne mange pas de pain)
	if(!is_uploaded_file($file['tmp_name'])){
		return false;
	}
	
	$finfo = finfo_open(FILEINFO_MIME_TYPE);
	
	// 3/ objet $finfo valide (dépend du paramètre FILEINFO_MIME_TYPE)
	if($finfo === false){
        return false;
    }
	
	$real_type = finfo_file($finfo, $file['tmp_name']);
	finfo_close($finfo);
	
	// 4/ contrôle du "vrai" type mime (finfo_file lit les 1ers octets des fichiers pour y trouver des "signatures", très fiable sauf avec les conteneurs: doc, zip...)
    return in_array($real_type, $mime_type_white_list, true);
}

if(isset($_GET['action']) && $_GET['action'] == 'editor_submit'){
    // récupération des données
    $data = file_get_contents('php://input');
    $json = json_decode($data, true);
    
    if(json_last_error() === JSON_ERROR_NONE) {
        // Traitement côté serveur
        $articleId = $json['id'];
        $content = $json['content'];

        // retour au client
        echo json_encode(['success' => true]);
    }
    else{
        echo json_encode(['success' => false, 'message' => 'Erreur de décodage JSON']);
    }
    die;
}
elseif(isset($_GET['action']) && $_GET['action'] == 'delete_article'){
    // récupération des données
    $post = json_decode(file_get_contents('php://input'), true);
    
    if(json_last_error() === JSON_ERROR_NONE){
        // Traitement côté serveur
        $success = true;
        
        // retour au client
        if($success) {
            echo json_encode(['success' => true]);
        }
        else {
            http_response_code(500);
            echo json_encode(['success' => false, 'message' => 'Erreur lors de la suppression de l\'article.']);
        }
    }
    die;
}


elseif(isset($_GET['action']) && in_array($_GET['action'], ['upload_image', 'upload_image_url', 'upload_image_base64'])){
    $dest = 'images/';
    if(!is_dir($dest)){
        mkdir($dest, 0755, true);
    }
    $allowed_extensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'tiff', 'tif'];

    if($_GET['action'] == 'upload_image'){
        if(!isset($_FILES['file'])){
            http_response_code(400);
            echo json_encode(['message' => 'Erreur 400: Bad Request']);
            die;
        }
        if(!is_uploaded_file($_FILES['file']['tmp_name'])) {
            http_response_code(500);
            echo json_encode(['message' => "Le fichier n'a pas été téléchargé correctement."]);
            die;
        }
        
        $name = sanitizeFileName(pathinfo($_FILES['file']['name'], PATHINFO_FILENAME));
        $extension = strtolower(pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION));
        $image_data = file_get_contents($_FILES['file']['tmp_name']);
    }
    elseif($_GET['action'] == 'upload_image_url'){
        $json = json_decode(file_get_contents('php://input'), true);
        if(!isset($json['image_url'])){
            http_response_code(400);
            echo json_encode(['message' => 'Erreur 400: Bad Request']);
            die;
        }

        $image_data = curlDownloadImage($json['image_url']); // téléchargement de l’image par le serveur avec cURL au lieu de file_get_contents
        if($image_data === false){
            http_response_code(400);
            echo json_encode(['message' => "Erreur, le serveur n'a pas réussi à télécharger l'image."]);
            die;
        }
        
        $url_path = parse_url($json['image_url'], PHP_URL_PATH);
        $name = sanitizeFileName(pathinfo($url_path, PATHINFO_FILENAME));
        $extension = strtolower(pathinfo($url_path, PATHINFO_EXTENSION));
    }
    elseif($_GET['action'] == 'upload_image_base64'){
        $json = json_decode(file_get_contents('php://input'), true);
        
        // détection de data:image/ et de ;base64, et capture du format dans $type
        if(!isset($json['image_base64']) || !preg_match('/^data:image\/(\w+);base64,/', $json['image_base64'], $type)){ // $type est déclaré et passé par référence
            http_response_code(400);
            echo json_encode(['message' => 'Données image base64 manquantes ou invalides']);
            die;
        }
        $extension = strtolower($type[1]); // dans (\w+)

        $name = 'pasted_image';        
        $image_data = base64_decode(substr($json['image_base64'], strpos($json['image_base64'], ',') + 1)); // découpe la chaine à la virgule puis convertit en binaire
        if($image_data === false){
            http_response_code(400);
            echo json_encode(['message' => 'Décodage base64 invalide']);
            die;
        }
    }

    if(!in_array($extension, $allowed_extensions)){
        $extension = 'jpeg';
    }
    $local_path = $dest . $name . '_' . uniqid() . '.' . $extension;
    if(imagickCleanAndWriteImage($image_data, $local_path)){
        echo json_encode(['location' => $local_path]);
    }
    else{
        http_response_code(500);
        echo json_encode(['message' => 'Erreur image non valide']);
    }
    die;
}


elseif(isset($_GET['action']) && $_GET['action'] == 'upload_file'){
    if(isset($_FILES['file'])){
        $dest = 'media/';
        if(!is_dir($dest)){ // Vérifier si le répertoire existe, sinon le créer
            mkdir($dest, 0755, true);
        }
        
        $name = sanitizeFileName(pathinfo($_FILES['file']['name'], PATHINFO_FILENAME)); // retirer caractères spéciaux et changer espaces en underscores
        $extension = strtolower(pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION)); 
        $file_path = $dest . $name . '_' . uniqid() . '.' . $extension; // nom unique
        
        if(checkFileDownload($_FILES['file'])){
        	if(move_uploaded_file($_FILES['file']['tmp_name'], $file_path)){
				echo json_encode(['location' => $file_path]);
			}
			else{
				http_response_code(500);
				echo json_encode(['message' => 'Erreur enregistrement du fichier.']);
			}
        }
        else{
        	http_response_code(400);
			echo json_encode(['message' => 'Erreur 400: fichier non valide.']);
		}
    }
    else{
        http_response_code(400);
        echo json_encode(['message' => 'Erreur 400: Bad Request']);
    }
    die;
}
?>
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Éditeur d'Article</title>
    <style>
        .tox-promotion{
    		display: none;
    	}
        .hidden{
            display: none;
        }
    </style>
    <script src="../vendor/tinymce/tinymce/tinymce.min.js"></script>
    <!-- peut-être qu'on devra utiliser un lien symbolique vers ce fichier dans /public -->
    <script>
        let editors = {};

        function openEditor(articleId) {
            // Récupérer et sauvegarder le contenu d'origine de l'article
            const articleContent = document.getElementById(articleId).innerHTML;
            document.getElementById(articleId).setAttribute('data-original-content', articleContent);

            tinymce.init({
                selector: `#${articleId}`,
                language: 'fr_FR', // télécharger des paquets de langue ici: https://www.tiny.cloud/get-tiny/language-packages/
                language_url: '../vendor/tweeb/tinymce-i18n/langs/fr_FR.js', // ou installer tweeb/tinymce-i18n avec composer
                license_key: 'gpl',
                branding: false,
                plugins: 'lists link autolink table image media autoresize help',
                toolbar: 'undo redo newdocument print selectall styles bold italic underline strikethrough fontsizeinput forecolor backcolor fontfamily align numlist bullist outdent indent table link image media help',
                menubar: false,
                toolbar_mode: 'wrap',
                statusbar: false,
                link_title: false, // supprime le champ compliqué "titre" (apparaît au survol du lien) dans la fenêtre "link"
                /*link_attributes_postprocess: (attrs) => { // modifier les attributs des liens créés
					console.log(attrs);
					if (attrs.rel) {
						attrs.rel += 'noreferrer'; // cacher la page d'où on vient
					}
				},*/
                //paste_data_images: true,
                setup: function (editor) {
                    editor.on('init', function () {
                        editors[articleId] = editor;
                        
                        // Masquer le bouton "Modifier" et afficher les boutons "Annuler" et "Soumettre"
                        document.querySelector(`#edit-${articleId}`).classList.add('hidden');
                        document.querySelector(`#delete-${articleId}`).classList.add('hidden');
                        document.querySelector(`#cancel-${articleId}`).classList.remove('hidden');
                        document.querySelector(`#submit-${articleId}`).classList.remove('hidden');
                    });
                    let skipPastePreProcess = false;
                    editor.on('Paste', function (e){ // déclenchement AVANT PastePreProcess et quelque que soit le contenu collé
                        const clipboardData = (e.clipboardData || e.originalEvent.clipboardData);
                        if(!clipboardData){
                            return;
                        }
                        const items = clipboardData.items;
                        let foundImage = false;

                        for(let i = 0; i < items.length; i++){
                            let item = items[i];

                            if(item.type.indexOf('image') !== -1){ // test type MIME contenant image
                                foundImage = true;

                                const file = item.getAsFile(); // presse-papier => fichier lisible
                                const reader = new FileReader();

                                reader.onload = function (event){ // fonction exécutée lorsque reader.readAsDataURL(file) est terminée
                                    const base64Data = event.target.result; // données de l'image

                                    fetch('index.php?action=upload_image_base64', {
                                        method: 'POST',
                                        headers: { 'Content-Type': 'application/json' },
                                        body: JSON.stringify({ image_base64: base64Data })
                                    })
                                    .then(response => response.json())
                                    .then(data => {
                                        if(data.location){
                                            editor.insertContent('<img src="' + data.location + '">');
                                        }
                                    })
                                    .catch(error => {
                                        console.error('Erreur lors de l’upload de l’image base64 :', error);
                                    });
                                };
                                reader.readAsDataURL(file); // lecture asynchrone du fichier
                            }
                        }

                        if(foundImage){
                            e.preventDefault(); // supprime le collage automatiue
                            skipPastePreProcess = true; // désactiver le PastePreProcess pour ce collage
                        }
                    });
                    editor.on('PastePreProcess', function (e){ // déclenchement au collage AVANT insertion dans l'éditeur SI le contenu est du HTML
                        if(skipPastePreProcess){
                            skipPastePreProcess = false; // réinitialiser pour la prochaine fois
                            return; // ignorer ce traitement
                        }

                        const parser = new DOMParser();
                        const doc = parser.parseFromString(e.content, 'text/html');
                        const images = doc.querySelectorAll('img');
                        
                        let downloads_in_progress = [];
                        
                        images.forEach(img => {
                            if(img.src.startsWith('file://')){ // détection d'images non insérables
                                console.warn('Image locale non insérable dans tinymce :', img.src);
                                img.outerHTML = `<div style="border:1px solid red; padding:10px; margin:5px 0; background-color:#ffe6e6; color:#a94442; font-size:14px;">
                                    "Image locale non insérée (vient-elle d'un document LibreOffice ?). Effacez ce message rouge et copiez-collez l'image seule.</div>`;
                            }
                            else if(img.src.startsWith('http')){ // détection d'images web
                                const promise = fetch('index.php?action=upload_image_url', { // promesse d'un fichier téléchargeable sur le serveur
                                    method: 'POST',
                                    headers: { 'Content-Type': 'application/json' },
                                    body: JSON.stringify({ image_url: img.src })
                                })
                                .then(response => response.json())
                                .then(data => {
                                    if(data.location){
                                        img.src = data.location; // remplacer l'image par celle du serveur
                                    }
                                })
                                .catch(error => {
                                    console.error('Erreur lors de l’upload de l’image distante:', error);
                                });
                                
                                downloads_in_progress.push(promise);
                            }
                        });
                        
                        // une image web ou plus: différer l'insertion dans l'éditeur le temps que le serveur télécharge les images
                        if(downloads_in_progress.length > 0){
                            e.preventDefault();

                            Promise.all(downloads_in_progress).then(() => {
                                e.content = doc.body.innerHTML; // remplacement du HTML dans l'éditeur par la copie modifiée (doc)
                                editor.insertContent(e.content);
                            });
                        }
                        else{
                            e.content = doc.body.innerHTML; // remplacement du HTML dans l'éditeur par la copie modifiée (doc)
                        }
                    });
                },
                // upload d'image natif de tinymce avec le bouton "Insérer une image"
                images_upload_handler: images_upload_handler, // = fonction fléchée
                // upload de documents (bouton "insérer un lien")
                files_upload_handler: files_upload_handler, // = fonction fléchée
                documents_file_types: [ // files_upload_handler a besoin qu'on lui donne tous les types mime
					{ mimeType: 'application/pdf', extensions: [ 'pdf' ] },
					{ mimeType: 'application/msword', extensions: [ 'doc' ] },
					{ mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', extensions: [ 'docx' ] },
					{ mimeType: 'application/vnd.ms-excel', extensions: [ 'xls' ] },
					{ mimeType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', extensions: [ 'xlsx' ] },
					{ mimeType: 'application/vnd.ms-powerpoint', extensions: [ 'ppt' ] },
					{ mimeType: 'application/vnd.openxmlformats-officedocument.presentationml.presentation', extensions: [ 'pptx' ] },
					{ mimeType: 'application/vnd.oasis.opendocument.text', extensions: [ 'odt' ] },
					{ mimeType: 'application/vnd.oasis.opendocument.spreadsheet', extensions: [ 'ods' ] },
					{ mimeType: 'application/vnd.oasis.opendocument.presentation', extensions: [ 'odp' ] }
				],
                image_caption: true
            });

            // Remplacer le contenu de l'article par l'éditeur
            document.getElementById(articleId).innerHTML = articleContent;
        }
        
        const images_upload_handler = (blobInfo, progress) => new Promise((resolve, reject) => {
            const formData = new FormData();
            formData.append("file", blobInfo.blob());

            fetch('index.php?action=upload_image', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if(data.location) {
                    resolve({url: data.location});
                }
                else {
                    reject("Erreur: Chemin d'image invalide");
                }
            })
            .catch(error => {
                reject("Erreur lors de l'upload");
            });
        });
        
        const files_upload_handler = (blobInfo, progress) => new Promise((resolve, reject) => {
            const formData = new FormData();
            formData.append("file", blobInfo.blob());

            fetch('index.php?action=upload_file', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if(data.location) {
                	console.log(blobInfo.filename());
                	console.log(data.location);
                	
                	// resolve et reject fonctionne avec Promise => type de retour standardisé et évite l'utilistion de callbacks
                    resolve({
                    	url: data.location,
                    	fileName: blobInfo.filename(),
                    });
                }
                else {
                    reject("Erreur: Chemin du fichier invalide");
                }
            })
            .catch(error => {
                reject("Erreur lors de l'upload");
            });
        });
        
        function deleteArticle(articleId) {
            if (confirm('Voulez-vous vraiment supprimer cet article ?')) {
                // Envoyer une requête au serveur pour supprimer l'article
                fetch('index.php?action=delete_article', {
                    method: 'POST',
                    headers: {
                    'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ id: articleId })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Supprimer l'article du DOM
                        const articleElement = document.getElementById(articleId);
                        articleElement.parentElement.remove();
                    }
                    else {
                        alert('Erreur lors de la suppression de l\'article.');
                    }
                })
                .catch(error => {
                    console.error('Erreur:', error);
                });
            }
        }
        
        function closeEditor(articleId){
            // Récupérer le contenu d'origine de l'article
            const originalContent = document.getElementById(articleId).getAttribute('data-original-content');

            // Fermer l'éditeur
            tinymce.remove(`#${articleId}`);
            delete editors[articleId];
            
            // Restaurer le contenu d'origine de l'article
            document.getElementById(articleId).innerHTML = originalContent;

            // Afficher le bouton "Modifier" et masquer les boutons "Annuler" et "Soumettre"
            document.querySelector(`#edit-${articleId}`).classList.remove('hidden');
            document.querySelector(`#delete-${articleId}`).classList.remove('hidden');
            document.querySelector(`#cancel-${articleId}`).classList.add('hidden');
            document.querySelector(`#submit-${articleId}`).classList.add('hidden');
        }
        
        function submitArticle(articleId) {
            // Récupérer l'éditeur correspondant à l'article
            const editor = editors[articleId];
            if(!editor){
                console.error('Éditeur non trouvé pour l\'article:', articleId);
                return;
            }
            
            // Récupérer le contenu de l'éditeur
            const newContent = editor.getContent();

            // Envoi AJAX au serveur
            fetch('index.php?action=editor_submit', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ id: articleId, content: newContent })
            })
            .then(response => response.json())
            .then(data => {
            	// Fermer l'éditeur et mettre à jour le contenu de l'article
                closeEditor(articleId);
                document.getElementById(articleId).innerHTML = newContent;
                //console.log(newContent);
                if(data.success){
                    // Fermer l'éditeur et mettre à jour le contenu de l'article
                    tinymce.remove(`#${articleId}`);
                    document.getElementById(articleId).innerHTML = newContent;
                }
                else{
                    alert('Erreur lors de la sauvegarde de l\'article.');
                }
            })
            .catch(error => {
                console.error('Erreur:', error);
            });
        }
    </script>
</head>
<body>
    <div>
        <h2>Article 1</h2>
        <div id="article-1">
            <p>Contenu de l'article 1.</p>
        </div>
        <button id="edit-article-1" onclick="openEditor('article-1')">Modifier</button>
        <button id="delete-article-1" onclick="deleteArticle('article-1')">Supprimer</button>
        <button id="cancel-article-1" class="hidden" onclick="closeEditor('article-1')">Annuler</button>
        <button id="submit-article-1" class="hidden" onclick="submitArticle('article-1')">Valider</button>
    </div>

    <div>
        <h2>Article 2</h2>
        <div id="article-2">
            <p>Contenu de l'article 2.</p>
        </div>
        <button id="edit-article-2" onclick="openEditor('article-2')">Modifier</button>
        <button id="delete-article-2" onclick="deleteArticle('article-2')">Supprimer</button>
        <button id="cancel-article-2" class="hidden" onclick="closeEditor('article-2')">Annuler</button>
        <button id="submit-article-2" class="hidden" onclick="submitArticle('article-2')">Valider</button>
    </div>
</body>
</html>