diff --git a/assets/css/app.scss b/assets/css/app.scss index 3ec5e1e..b21edcb 100644 --- a/assets/css/app.scss +++ b/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; } diff --git a/config/packages/app.yaml b/config/packages/app.yaml index c2cf954..c0c7b2f 100644 --- a/config/packages/app.yaml +++ b/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 diff --git a/src/Entity/Blog/Post.php b/src/Entity/Blog/Post.php index 02fe2ab..bedd671 100644 --- a/src/Entity/Blog/Post.php +++ b/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; } diff --git a/src/Form/Blog/PostType.php b/src/Form/Blog/PostType.php index fd86a8c..50d5086 100644 --- a/src/Form/Blog/PostType.php +++ b/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, diff --git a/templates/editorjs/link.html.twig b/templates/editorjs/link.html.twig new file mode 100644 index 0000000..86ba4cd --- /dev/null +++ b/templates/editorjs/link.html.twig @@ -0,0 +1,21 @@ +{% block render %} + +{% endblock %} diff --git a/templates/page/post/_post.html.twig b/templates/page/post/_post.html.twig index e42f993..8f488d7 100644 --- a/templates/page/post/_post.html.twig +++ b/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 @@
{% 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 %}
{% endif %}