change markdown editor

fix editorjs

assets/css/admin.scss

@@ -1,9 +1,6 @@
-@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;
@@ -56,6 +53,11 @@
   z-index: 3;
 }
 
-.editor-toolbar, .CodeMirror {
-  border-color: $input-border-color;
+.v-md-editor {
+  border: 1px solid $input-border-color;
+  box-shadow: none;
+}
+
+.v-md-editor--fullscreen {
+  z-index: 3000;
 }

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
+      }
+    })
+  })
+}

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,33 @@
         "build": "./node_modules/.bin/encore production"
     },
     "dependencies": {
+        "@babel/plugin-proposal-class-properties": "^7.18.6",
+        "@editorjs/checklist": "^1.6.0",
+        "@editorjs/code": "^2.9.0",
+        "@editorjs/delimiter": "^1.4.0",
+        "@editorjs/editorjs": "2.23.*",
+        "@editorjs/header": "^2.8.1",
+        "@editorjs/inline-code": "^1.5.0",
+        "@editorjs/link": "^2.6.2",
+        "@editorjs/link-autocomplete": "^0.1.0",
+        "@editorjs/list": "^1.9.0",
+        "@editorjs/marker": "^1.4.0",
+        "@editorjs/nested-list": "^1.4.2",
+        "@editorjs/paragraph": "^2.11.4",
+        "@editorjs/quote": "^2.6.0",
+        "@editorjs/raw": "^2.5.0",
+        "@editorjs/table": "^2.3.0",
+        "@editorjs/underline": "^1.1.0",
+        "@editorjs/warning": "^1.4.0",
+        "@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",
         "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/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,7 @@ 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;
 
 class PostType extends AbstractType
 {
@@ -61,8 +62,8 @@ class PostType extends AbstractType
         );
 
         $types = [
-            'markdown' => SimpleMdTextareaType::class,
-            'html' => SimpleMdTextareaType::class,
+            'markdown' => MarkdownType::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 %}