On passe en easyMDE + import d'images

.gitignore

@@ -23,3 +23,5 @@
 /public/assets/
 /assets/vendor/
 ###< symfony/asset-mapper ###
+
+/public/uploads/images/

assets/app.js

@@ -12,8 +12,11 @@ import './styles/app.css';
 import './styles/forms.css';
 import './styles/badges.css';
 
-import './styles/simplemde.min.css'
-import './js/simplemde.min.js'
+// import './styles/simplemde.min.css'
+// import './js/simplemde.min.js'
+
+import './styles/easymde.min.css'
+import './js/easymde.min.js'
 
 // document.addEventListener("turbo:load", function () {
 //     const simplemde = new SimpleMDE({ element: document.querySelector('.simple-mde') });

assets/controllers/easymde_controller.js

@@ -0,0 +1,25 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+    connect() {
+        const easyMde = new EasyMDE({
+            element: document.querySelector('textarea'),
+            spellChecker: false,
+            toolbar: [
+                'bold', 'italic', 'heading-2', 'heading-3', '|',
+                'quote', 'unordered-list', 'ordered-list', '|',
+                'link', 'image', 'upload-image' ,'|',
+                'preview', 'side-by-side', 'fullscreen', '|',
+                'guide'
+            ],
+            uploadImage:true,
+            imageUploadEndpoint: '/upload-image',
+            imagePathAbsolute: false,
+            imageMaxSize: 1024 * 1024 * 100,
+            imagePreviewInEditor: true,
+            imagesPreviewHandler: true
+        });
+
+        
+    }
+}

assets/controllers/simplemde_controller.js

@@ -1,7 +0,0 @@
-import { Controller } from '@hotwired/stimulus';
-
-export default class extends Controller {
-    connect() {
-        const simplemde = new SimpleMDE({ element: document.querySelector('textarea'), spellChecker: false });
-    }
-}

config/services.yaml

@@ -4,7 +4,7 @@
 # Put parameters here that don't need to change on each machine where the app is deployed
 # https://symfony.com/doc/current/best_practices.html#use-parameters-for-application-configuration
 parameters:
-
+    images_directory: '%kernel.project_dir%/public/uploads/images'
 services:
     # default configuration for services in *this* file
     _defaults:

src/Controller/ImageUploadController.php

@@ -0,0 +1,36 @@
+<?php
+
+namespace App\Controller;
+
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\JsonResponse;
+use Symfony\Component\Routing\Annotation\Route;
+use Symfony\Component\String\Slugger\SluggerInterface;
+use Symfony\Component\HttpFoundation\File\Exception\FileException;
+use Symfony\Component\Security\Http\Attribute\IsGranted;
+
+class ImageUploadController extends AbstractController
+{
+    #[Route('/upload-image', name: 'upload_image', methods: ['POST'])]
+    #[IsGranted('ROLE_AUTHOR')]
+    public function upload(Request $request, SluggerInterface $slugger): JsonResponse
+    {
+        $image = $request->files->get('image');
+
+        if ($image && $image->isValid()) {
+            $originalFilename = pathinfo($image->getClientOriginalName(), PATHINFO_FILENAME);
+            $safeFilename = $slugger->slug($originalFilename);
+            $newFilename = $safeFilename.'-'.uniqid().'.'.$image->guessExtension();
+
+            try {
+                $image->move($this->getParameter('images_directory'), $newFilename);
+                $url = '/uploads/images/' . $newFilename;
+                return new JsonResponse(['data' => ['filePath' => $url]], JsonResponse::HTTP_OK);
+            } catch (FileException $e) {
+                return new JsonResponse(['error' => $e->getCode()]);
+            }
+        }
+        return new JsonResponse(['error' => $image ? JsonResponse::HTTP_UNSUPPORTED_MEDIA_TYPE : JsonResponse::HTTP_BAD_REQUEST]);
+    }
+}

src/Form/ArticleType.php

@@ -21,7 +21,7 @@ class ArticleType extends AbstractType
             ->add('title')
             ->add('content', TextareaType::class, [
                 'attr'  =>  [
-                    'data-controller'   => 'simplemde'
+                    'data-controller'   => 'easymde'
                 ]
             ])
             ->add('publicationDate', null, [

src/Form/PageType.php

@@ -17,7 +17,7 @@ class PageType extends AbstractType
             ->add('title')
             ->add('content', TextareaType::class, [
                 'attr'  => [
-                    'data-controller'   => 'simplemde'
+                    'data-controller'   => 'easymde'
                 ]
             ])
         ;