add editorjs config

assets/css/app.scss

@@ -782,6 +782,53 @@ $links: (
     }
 }
 
+.ejs-link {
+    margin: 10px auto;
+    max-width: 80%;
+    border: 2px solid $color-very-light-grey;
+    border-radius: 5px;
+
+    &--anchor {
+        display: block;
+        padding: 30px;
+    }
+
+    &-content {
+        display: inline-block;
+        vertical-align: top;
+
+        &--title {
+            font-weight: bold;
+        }
+
+        &--description {
+            font-size: 15px;
+        }
+
+        &--link {
+            padding-top: 10px;
+            font-size: 14px;
+            line-height: 20px;
+        }
+    }
+
+    $image-size: 85px;
+
+    &--anchor--with-image &-content {
+        width: calc(100% - $image-size - 5px);
+        padding-right: 25px;
+    }
+
+    &--image {
+        display: inline-block;
+        width: $image-size;
+        height: $image-size;
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+    }
+}
+
 @media screen and (max-width: 1280px) {
     .mesh-wrapper {
         width: 100%;
@@ -893,11 +940,20 @@ $links: (
     .quick-video .video-ratio,
     .quick-image img,
     .content hr,
+    .ejs-link,
     .alert
     {
         border-color: #86899f;
     }
 
+    .quick-body {
+        background: #43444f;
+    }
+
+    .ejs-link {
+        background: #43444f;
+    }
+
     .code-title {
         background: #000000;
     }

config/packages/app.yaml

@@ -68,6 +68,10 @@ core:
                 templates:
                     - {name: "Par défaut", file: "page/text/default.txt.twig"}
 
+    editor_js:
+        blocks:
+            link: 'editorjs/link.html.twig'
+
     file_manager:
         mimes:
             - image/png

src/Entity/Blog/Post.php

@@ -4,12 +4,11 @@ namespace App\Entity\Blog;
 
 use App\Core\Doctrine\Timestampable;
 use App\Core\Entity\EntityInterface;
+use App\Core\File\FileAttribute;
 use App\Repository\Blog\PostRepository;
 use Doctrine\Common\Collections\ArrayCollection;
 use Doctrine\Common\Collections\Collection;
 use Doctrine\ORM\Mapping as ORM;
-use Symfony\Component\HttpFoundation\File\File;
-use App\Core\File\FileAttribute;
 
 /**
  * @ORM\Entity(repositoryClass=PostRepository::class)
@@ -154,6 +153,10 @@ class Post implements EntityInterface
 
     public function getContent(): ?string
     {
+        if ('editorjs' === $this->getContentFormat()) {
+            return $this->content ?? '[]';
+        }
+
         return $this->content;
     }
 

src/Form/Blog/PostType.php

@@ -22,6 +22,7 @@ use Symfony\Component\Validator\Constraints\NotBlank;
 use Symfony\Component\Validator\Constraints\Range;
 use Symfony\Component\Validator\Constraints\Url;
 use App\Form\Type\SimpleMdTextareaType;
+use App\Core\Form\Type\EditorJsTextareaType;
 
 class PostType extends AbstractType
 {
@@ -49,6 +50,7 @@ class PostType extends AbstractType
                 'choices' => [
                     'Markdown' => 'markdown',
                     'HTML' => 'html',
+                    'Editor JS' => 'editorjs',
                 ],
                 'constraints' => [
                     new NotBlank(),
@@ -56,9 +58,15 @@ class PostType extends AbstractType
             ]
         );
 
+        $types = [
+            'markdown' => SimpleMdTextareaType::class,
+            'html' => SimpleMdTextareaType::class,
+            'editorjs' => EditorJsTextareaType::class,
+        ];
+
         $builder->add(
             'content',
-            SimpleMdTextareaType::class,
+            $types[$builder->getData()->getContentFormat() ?? 'markdown'],
             [
                 'label' => 'Contenu',
                 'required' => false,

templates/editorjs/link.html.twig

@@ -0,0 +1,21 @@
+{% block render %}
+    <div class="ejs-link">
+        <a href="{{ link }}" class="ejs-link--anchor {% if meta.image %}ejs-link--anchor--with-image{% endif %}">
+            <div class="ejs-link-content">
+                {% if meta.title %}
+                    <div class="ejs-link-content--title">{{- meta.title -}}</div>
+                {% endif %}
+                {% if meta.title %}
+                    <div class="ejs-link-content--description">{{- meta.description -}}</div>
+                {% endif %}
+                {% if link %}
+                    <div class="ejs-link-content--link">{{- link -}}</div>
+                {% endif %}
+            </div>
+
+            {% if meta.image %}
+                <div class="ejs-link--image" style="background-image: url('{{ meta.image.url }}')"></div>
+            {% endif %}
+        </a>
+    </div>
+{% endblock %}

templates/page/post/_post.html.twig

@@ -43,10 +43,10 @@
 
                     {% if post.contentFormat == 'html' %}
                         {{- post.content|murph_url|file_attributes|post -}}
-                    {% endif %}
-
-                    {% if post.contentFormat == 'markdown' %}
+                    {% elseif post.contentFormat == 'markdown' %}
                         {{- post.content|murph_url|file_attributes|markdown('post') -}}
+                    {% elseif post.contentFormat == 'editorjs' %}
+                        {{- post.content|murph_url|file_attributes|editorjs_to_html -}}
                     {% endif %}
 
                     {% if not full %}
@@ -92,11 +92,11 @@
 
             <div class="body-content">
                 {% if post.contentFormat == 'html' %}
-                    {{- post.content|murph_url|post -}}
-                {% endif %}
-
-                {% if post.contentFormat == 'markdown' %}
-                    {{- post.content|murph_url|markdown('post')|lazy_load -}}
+                    {{- post.content|murph_url|file_attributes|post -}}
+                {% elseif post.contentFormat == 'markdown' %}
+                    {{- post.content|murph_url|file_attributes|markdown('post')|lazy_load -}}
+                {% elseif post.contentFormat == 'editorjs' %}
+                    {{- post.content|murph_url|file_attributes|editorjs_to_html|raw -}}
                 {% endif %}
             </div>
         {% endif %}