add builder as post editor

fix editorjs

.mage.yml.dist

@@ -18,6 +18,7 @@ magephp:
                 - "/var/cache/*"
                 - "/var/log/*"
                 - "/public/media"
+                - "/.secrets"
             hosts:
                 - ssh_host
             on-deploy:

.novops.yml

@@ -0,0 +1,39 @@
+environments:
+  build:
+    variables:
+      - name: MYSQLDUMP
+        value:
+          hvault_kv2:
+            mount: kv
+            path: deblan/deblan.io-murph
+            key: mysqldump
+
+  deploy:
+    variables:
+      - name: SSH_USER
+        value:
+          hvault_kv2:
+            mount: kv
+            path: deblan/deblan.io-murph
+            key: ssh_user
+
+      - name: SSH_HOST
+        value:
+          hvault_kv2:
+            mount: kv
+            path: deblan/deblan.io-murph
+            key: ssh_host
+
+      - name: SSH_PRIV_KEY
+        value:
+          hvault_kv2:
+            mount: kv
+            path: deblan/deblan.io-murph
+            key: ssh_priv_key
+
+      - name: APP_DIRECTORY
+        value:
+          hvault_kv2:
+            mount: kv
+            path: deblan/deblan.io-murph
+            key: app_directory

.woodpecker/build.yml

@@ -1,51 +1,51 @@
 variables:
-  - &volumes
-    - node16_cache:/root/.npm
-    - /data/deblan/deblan.io-murph:/builds
+  volumes: &volumes
+    - node_cache:/root/.npm
+    - /data/${CI_REPO}:/builds
 
 when:
   event: [push, pull_request, tag, manual]
   branch: [master, master-*, develop, develop-*, feature/*]
 
 steps:
-  db-wait:
+  "Wait the database":
     image: gitnet.fr/deblan/timeout:latest
     commands:
       - /bin/timeout -t 30 -v -c 'while true; do nc -z -v db 3306 2>&1 | grep succeeded && exit 0; sleep 0.5; done'
 
-  db-create:
+  "Create database":
     image: mariadb:10.3
     secrets: [mysqldump]
     commands:
       - mysql -hdb -uroot -proot -e "CREATE DATABASE app"
       - eval "$MYSQLDUMP" | mysql -hdb -uroot -proot app
 
-  app-config:
+  "Configure app":
     image: deblan/php:8.1
     commands:
       - echo APP_ENV=prod >> .env.local
       - echo APP_SECRET=$(openssl rand -hex 32) >> .env.local
       - echo DATABASE_URL=mysql://root:root@db/app >> .env.local
 
-  php-composer:
+  "Installs PHP dependencies":
     image: deblan/php:8.1
     commands:
       - apt-get update && apt-get -y install git
       - composer install --no-scripts
 
-  db-migrate:
+  "Migrates database":
     image: deblan/php:8.1
     environment:
       - PHP=php
     commands:
       - ./bin/doctrine-migrate
 
-  app-jsroutes:
+  "Generates JS routes":
     image: deblan/php:8.1
     commands:
       - php bin/console fos:js-routing:dump --format=json --target=public/js/fos_js_routes.json
 
-  node-build:
+  "Build assets":
     image: node:16-alpine
     environment:
       - CPU_COUNT=3
@@ -60,13 +60,13 @@ steps:
       - test -f public/js/fos_js_routes.json || echo "{}" > public/js/fos_js_routes.json
       - npm run build
 
-  security-check:
+  "Check dependencies":
     image: gitnet.fr/deblan/osv-detector:v0.9
     commands:
       - osv-detector composer.lock yarn.lock
     failure: ignore
 
-  cache-build:
+  "Build the cache":
     image: deblan/mage
     volumes: *volumes
     commands:
@@ -80,4 +80,4 @@ services:
       - MARIADB_ROOT_PASSWORD=root
 
 volumes:
-  node16_cache:
+  node_cache:

.woodpecker/deploy.yml

@@ -1,6 +1,6 @@
 variables:
-  - &volumes
-    - /data/deblan/deblan.io-murph:/builds
+  volumes: &volumes
+    - /data/${CI_REPO}:/builds
 
 when:
   event: [deployment]
@@ -8,9 +8,9 @@ when:
 skip_clone: true
 
 steps:
-  app-deploy:
+  "Deploy":
     image: deblan/mage
-    secrets: [ssh_user, ssh_host, ssh_priv_key, app_directory]
+    secrets: [ssh_priv_key, ssh_user, ssh_host, app_directory]
     volumes: *volumes
     commands:
       - cd "/builds/$CI_COMMIT_SHA"

assets/css/admin.scss

@@ -1,57 +1,63 @@
-@import "../../vendor/murph/murph-core/src/core/Resources/assets/css/admin.scss";
-@import "~simplemde/dist/simplemde.min.css";
-
-.CodeMirror-fullscreen, .editor-toolbar.fullscreen {
-    z-index: 2000;
-}
+@import '../../vendor/murph/murph-core/src/core/Resources/assets/css/admin.scss';
+@import '@kangc/v-md-editor/lib/style/base-editor.css';
+@import '@kangc/v-md-editor/lib/theme/style/vuepress.css';
 
 .ejs-link {
-    margin: 10px auto;
-    max-width: 80%;
-    border: 2px solid #333;
-    border-radius: 5px;
+  margin: 10px auto;
+  max-width: 80%;
+  border: 2px solid #333;
+  border-radius: 5px;
 
-    &--anchor {
-        display: block;
-        padding: 30px;
+  &--anchor {
+    display: block;
+    padding: 30px;
+  }
+
+  &-content {
+    display: inline-block;
+    vertical-align: top;
+
+    &--title {
+      font-weight: bold;
     }
 
-    &-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;
-        }
+    &--description {
+      font-size: 15px;
     }
 
-    $image-size: 85px;
-
-    &--anchor--with-image &-content {
-        width: calc(100% - $image-size - 5px);
-        padding-right: 25px;
+    &--link {
+      padding-top: 10px;
+      font-size: 14px;
+      line-height: 20px;
     }
+  }
 
-    &--image {
-        display: inline-block;
-        width: $image-size;
-        height: $image-size;
-        background-position: center center;
-        background-repeat: no-repeat;
-        background-size: cover;
-    }
+  $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;
+  }
 }
 
 .choices__list--dropdown {
   z-index: 3;
 }
+
+.v-md-editor {
+  border: 1px solid $input-border-color;
+  box-shadow: none;
+}
+
+.v-md-editor--fullscreen {
+  z-index: 3000;
+}

assets/css/app.scss

@@ -411,6 +411,9 @@ pre[class*="language-"] {
   .h1 {
     font-weight: normal;
     font-size: 40px;
+    font-family: MainFont;
+    text-shadow: none;
+    color: hsla(0, 0%, 100%, 0.7);
   }
 
   .h3 {

assets/js/admin.js

@@ -1,6 +1,6 @@
 import '../../vendor/murph/murph-core/src/core/Resources/assets/js/admin.js'
 
-require('./admin_modules/simplemde')()
+require('./admin_modules/md-editor')()
 
 const $ = require('jquery')
 const Sortable = require('sortablejs').Sortable

assets/js/admin_modules/md-editor.js

@@ -0,0 +1,34 @@
+const Vue = require('vue').default
+const VueMarkdownEditor = require('@kangc/v-md-editor')
+const githubTheme = require('@kangc/v-md-editor/lib/theme/github.js')
+const fr = require('@kangc/v-md-editor/lib/lang/fr-FR').default
+const hljs = require('highlight.js')
+
+VueMarkdownEditor.use(githubTheme, {Hljs: hljs})
+VueMarkdownEditor.lang.use('fr-FR', fr)
+Vue.use(VueMarkdownEditor)
+
+module.exports = () => {
+  const components = document.querySelectorAll('.markdown-editor')
+
+  components.forEach((component) => {
+    return new Vue({
+      el: component,
+      template: `
+        <div>
+          <textarea :name="name" v-model="value" class="d-none"></textarea>
+          <v-md-editor v-model="value" mode="edit"></v-md-editor>
+        </div>
+      `,
+      data() {
+        return {
+          name: component.getAttribute('data-name'),
+          value: JSON.parse(component.getAttribute('data-value')),
+        }
+      },
+      components: {
+        VueMarkdownEditor
+      }
+    })
+  })
+}

bin/messenger

@@ -22,7 +22,7 @@ help() {
     -l debug|info|notice|warning|error
           Debug level
 
-	-a start|stop|restart
+	-a start|stop|restart|status
 EOH
 }
 
@@ -35,13 +35,18 @@ on_interrupt() {
 
 start_messenger() {
 	nohup php8.1 bin/console messenger:consume 2>/dev/null >/dev/null &
+	log -t -l notice "Started"
 }
 
 stop_messenger() {
-	php8.1 bin/console messenger:stop-workers
+	php8.1 bin/console messenger:stop-workers 2>/dev/null >/dev/null
 	log -t -l notice "Stopped"
 }
 
+get_pid() {
+	pgrep -f messenger:consume
+}
+
 main() {
 	cd "$(dirname "0")"
 
@@ -63,8 +68,10 @@ main() {
 	elif [ "$ACTION" = "restart" ]; then
 		stop_messenger
 		start_messenger
+	elif [ "$ACTION" = "status" ]; then
+		get_pid
 	else
-		log -l error "Action no defined."
+		log -l error "Action is required."
 	fi
 
 	exit 0

config/packages/twig.yaml

@@ -1,6 +1,6 @@
 twig:
     default_path: '%kernel.project_dir%/templates'
-    form_themes: ['@Core/form/bootstrap_4_form_theme.html.twig']
+    form_themes: ['form/bootstrap_4_form_theme.html.twig']
     auto_reload: true
     paths:
         '%kernel.project_dir%/templates/core/': Core

package.json

@@ -8,13 +8,15 @@
         "build": "./node_modules/.bin/encore production"
     },
     "dependencies": {
+        "@kangc/v-md-editor": "^1.7.12",
         "daisyui": "^2.31.0",
+        "editorjs-hyperlink": "^1.0.6",
+        "editorjs-inline-tool": "^0.4.0",
         "encore": "^0.0.30-beta",
         "lozad": "^1.16.0",
-        "murph-project": "^1",
+        "murph-project": "^1.9.4",
         "particles.js": "^2.0.0",
         "prismjs": "^1.23.0",
-        "simplemde": "^1.11.2",
         "tingle.js": "^0.16.0",
         "vanillajs-datepicker": "^1.1.4",
         "vue": "^2.6.14"

src/Controller/Blog/PostAdminController.php

@@ -2,31 +2,30 @@
 
 namespace App\Controller\Blog;
 
+use App\Analytic\DateRangeAnalytic;
 use App\Core\Controller\Admin\Crud\CrudController;
 use App\Core\Crud\CrudConfiguration;
 use App\Core\Crud\Field\DatetimeField;
 use App\Core\Crud\Field\TextField;
+use App\Core\Entity\EntityInterface;
 use App\Core\Form\FileUploadHandler;
 use App\Core\Manager\EntityManager;
+use App\Core\Repository\Site\NodeRepository;
+use App\Entity\Blog\Post;
 use App\Entity\Blog\Post as Entity;
 use App\Factory\Blog\PostFactory as EntityFactory;
 use App\Form\Blog\Filter\PostFilterType;
 use App\Form\Blog\PostType;
-use App\Form\Blog\PostType as EntityType;
 use App\Repository\Blog\PostRepositoryQuery as RepositoryQuery;
+use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
+use Symfony\Component\Form\Extension\Core\Type\DateTimeType;
+use Symfony\Component\Form\Form;
+use Symfony\Component\Form\FormBuilderInterface;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\HttpFoundation\Session\Session;
 use Symfony\Component\Routing\Annotation\Route;
-use Symfony\Component\Form\Form;
-use App\Core\Entity\EntityInterface;
-use App\Entity\Blog\Post;
-use App\Analytic\DateRangeAnalytic;
-use App\Core\Repository\Site\NodeRepository;
-use Symfony\Component\Form\FormBuilderInterface;
-use Symfony\Component\Form\Extension\Core\Type\DateTimeType;
 use Symfony\Component\Validator\Constraints\NotBlank;
-use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
 
 #[Route(path: '/admin/blog/post')]
 class PostAdminController extends CrudController
@@ -68,7 +67,7 @@ class PostAdminController extends CrudController
                 'attr' => ['class' => 'miw-400'],
             ])
             ->setField('index', 'ID', TextField::class, [
-                'property_builder' => function(EntityInterface $entity) {
+                'property_builder' => function (EntityInterface $entity) {
                     return sprintf('#%d', $entity->getId());
                 },
                 'sort' => ['id', '.id'],
@@ -85,7 +84,7 @@ class PostAdminController extends CrudController
                 'format' => 'd/m/Y H:i',
                 'sort' => ['publishedAt', '.publishedAt'],
                 'attr' => ['class' => 'miw-200'],
-                'inline_form' => function(FormBuilderInterface $builder) {
+                'inline_form' => function (FormBuilderInterface $builder) {
                     $builder->add(
                         'publishedAt',
                         DateTimeType::class,
@@ -107,7 +106,7 @@ class PostAdminController extends CrudController
                 'view' => 'blog/post_admin/field/status.html.twig',
                 'sort' => ['status', '.status'],
                 'attr' => ['class' => 'miw-100'],
-                'inline_form' => function(FormBuilderInterface $builder) {
+                'inline_form' => function (FormBuilderInterface $builder) {
                     $builder->add(
                         'status',
                         ChoiceType::class,
@@ -125,15 +124,15 @@ class PostAdminController extends CrudController
                             ],
                         ]
                     );
-                }
+                },
             ])
-            ->setBatchAction('index', 'delete', 'Delete', function(EntityInterface $entity, EntityManager $manager) {
+            ->setBatchAction('index', 'delete', 'Delete', function (EntityInterface $entity, EntityManager $manager) {
                 $manager->delete($entity);
             })
-            ->setBatchAction('index', 'draft', 'Statut : publier', function(EntityInterface $entity, EntityManager $manager) {
+            ->setBatchAction('index', 'draft', 'Statut : publier', function (EntityInterface $entity, EntityManager $manager) {
                 $manager->update($entity->setStatus(Post::PUBLISHED));
             })
-            ->setBatchAction('index', 'publish', 'Statut : brouillon', function(EntityInterface $entity, EntityManager $manager) {
+            ->setBatchAction('index', 'publish', 'Statut : brouillon', function (EntityInterface $entity, EntityManager $manager) {
                 $manager->update($entity->setStatus(Post::DRAFT));
             })
         ;
@@ -152,7 +151,7 @@ class PostAdminController extends CrudController
             $factory->create($this->getUser()),
             $entityManager,
             $request,
-            function(Entity $entity, Form $form, Request $request) use ($fileUpload) {
+            function (Entity $entity, Form $form, Request $request) use ($fileUpload) {
                 $directory = 'uploads/post/'.date('Y');
 
                 $fileUpload->handleForm(
@@ -173,7 +172,7 @@ class PostAdminController extends CrudController
             $entity,
             $entityManager,
             $request,
-            function(Entity $entity, Form $form, Request $request) use ($fileUpload) {
+            function (Entity $entity, Form $form, Request $request) use ($fileUpload) {
                 $directory = 'uploads/post/'.date('Y');
 
                 $fileUpload->handleForm(
@@ -187,7 +186,7 @@ class PostAdminController extends CrudController
         );
     }
 
-    #[Route(path: "/inline_edit/{entity}/{context}/{label}", name: 'admin_blog_post_inline_edit', methods: ['GET', 'POST'])]
+    #[Route(path: '/inline_edit/{entity}/{context}/{label}', name: 'admin_blog_post_inline_edit', methods: ['GET', 'POST'])]
     public function inlineEdit(string $context, string $label, Entity $entity, EntityManager $entityManager, Request $request): Response
     {
         return $this->doInlineEdit($context, $label, $entity, $entityManager, $request);
@@ -268,8 +267,7 @@ class PostAdminController extends CrudController
         DateRangeAnalytic $analytic,
         NodeRepository $nodeRepository,
         string $range = '7days'
-    ): Response
-    {
+    ): Response {
         if (!in_array($range, ['7days', '30days', '90days', '1year'])) {
             throw $this->createNotFoundException();
         }

src/Entity/Page/SimplePage.php

@@ -7,6 +7,7 @@ use App\Core\Entity\Site\Page\FileBlock;
 use App\Form\Type\SimpleMdTextareaBlockType;
 use Doctrine\ORM\Mapping as ORM;
 use Symfony\Component\Form\FormBuilderInterface;
+use App\Form\MarkdownBlockType;
 
 #[ORM\Entity]
 class SimplePage extends TitledPage
@@ -17,7 +18,7 @@ class SimplePage extends TitledPage
 
         $builder->add(
             'content',
-            SimpleMdTextareaBlockType::class,
+            MarkdownBlockType::class,
             [
                 'label' => 'Contenu',
                 'options' => [

src/Form/Blog/PostType.php

@@ -25,6 +25,8 @@ use App\Form\Type\SimpleMdTextareaType;
 use App\Core\Form\Type\EditorJsTextareaType;
 use App\Core\Form\FileManager\FilePickerType;
 use App\Core\Form\Type\CollectionType as MurphCollectionType;
+use App\Form\MarkdownType;
+use App\Core\Form\Type\BuilderType;
 
 class PostType extends AbstractType
 {
@@ -51,6 +53,7 @@ class PostType extends AbstractType
                 'required' => true,
                 'choices' => [
                     'Markdown' => 'markdown',
+                    'Builder' => 'builder',
                     'HTML' => 'html',
                     'Editor JS' => 'editorjs',
                 ],
@@ -61,8 +64,9 @@ class PostType extends AbstractType
         );
 
         $types = [
-            'markdown' => SimpleMdTextareaType::class,
-            'html' => SimpleMdTextareaType::class,
+            'markdown' => MarkdownType::class,
+            'builder' => BuilderType::class,
+            'html' => MarkdownType::class,
             'editorjs' => EditorJsTextareaType::class,
         ];
 

src/Form/MarkdownBlockType.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Form;
+
+use App\Core\Form\Site\Page\TextareaBlockType;
+use Symfony\Component\Form\FormBuilderInterface;
+
+class MarkdownBlockType extends TextareaBlockType
+{
+    public function buildForm(FormBuilderInterface $builder, array $options)
+    {
+        $builder->add(
+            'value',
+            MarkdownType::class,
+            array_merge([
+                'required' => false,
+                'label' => false,
+            ], $options['options']),
+        );
+    }
+}

src/Form/MarkdownType.php

@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Form;
+
+use Symfony\Component\Form\Extension\Core\Type\TextareaType;
+
+class MarkdownType extends TextareaType
+{
+    public function getBlockPrefix()
+    {
+        return 'markdown';
+    }
+}

src/Kernel.php

@@ -2,7 +2,9 @@
 
 namespace App;
 
+use App\Core\DependencyInjection\Compiler\BuilderBlockPass;
 use Symfony\Bundle\FrameworkBundle\Kernel\MicroKernelTrait;
+use Symfony\Component\DependencyInjection\ContainerBuilder;
 use Symfony\Component\DependencyInjection\Loader\Configurator\ContainerConfigurator;
 use Symfony\Component\HttpKernel\Kernel as BaseKernel;
 use Symfony\Component\Routing\Loader\Configurator\RoutingConfigurator;
@@ -35,4 +37,9 @@ class Kernel extends BaseKernel
             (require $path)($routes->withPath($path), $this);
         }
     }
+
+    protected function build(ContainerBuilder $container): void
+    {
+        $container->addCompilerPass(new BuilderBlockPass());
+    }
 }

templates/form/bootstrap_4_form_theme.html.twig

@@ -0,0 +1,8 @@
+{% extends '@Core/form/bootstrap_4_form_theme.html.twig' %}
+
+{% block markdown_widget %}
+    <div {% for attr, value in row_attr %}{{ attr }}="{{ value }}" {% endfor %}>
+        <div class="markdown-editor" data-value="{{ value|json_encode }}" data-name="{{ full_name }}" data-id="{{ id }}">
+        </div>
+    </div>
+{% endblock %}

templates/page/post/_post.html.twig

@@ -55,6 +55,8 @@
                     {{- post.content|murph_url|file_attributes|post -}}
                 {% elseif post.contentFormat == 'markdown' %}
                     {{- post.content|murph_url|file_attributes|markdown('post')|lazy_load -}}
+                {% elseif post.contentFormat == 'builder' %}
+                    {{- post.content|block_to_html|lazy_load -}}
                 {% elseif post.contentFormat == 'editorjs' %}
                     {{- post.content|murph_url|file_attributes|editorjs_to_html|raw -}}
                 {% endif %}