Add markdown element

README.md

@@ -21,6 +21,9 @@ This plugin adds a rich editor on the fields you want. Now you can manage your c
 
 ## Installation
 
+
+### Require the plugin
+
 If you want to use our recipes, you can configure your composer.json by running:
 
 ```bash
@@ -31,6 +34,10 @@ composer config --no-plugins --json extra.symfony.endpoint '["https://api.github
 composer require monsieurbiz/sylius-rich-editor-plugin
 ```
 
+<details>
+<summary>For the installation without flex, follow these additional steps</summary>
+<p>
+
 Change your `config/bundles.php` file to add the line for the plugin : 
 
 ```php
@@ -56,8 +63,37 @@ monsieurbiz_richeditor_admin:
     resource: "@MonsieurBizSyliusRichEditorPlugin/Resources/config/routing/admin.yaml"
     prefix: /%sylius_admin.path_name%
 ```
+</p>
+</details>
+
+### Correct `Twig\Extra\Intl\IntlExtension` conflict
+
+Update the file `config/packages/twig.yaml` to remove the `IntlExtension` service :
+
+```yaml
+twig:
+    paths: ['%kernel.project_dir%/templates']
+    debug: '%kernel.debug%'
+    strict_variables: '%kernel.debug%'
+
+services:
+    # Removed by Rich Editor because it is loaded by the quire of twig/extra-bundle
+    #
+    # _defaults:
+    #     public: false
+    #     autowire: true
+    #     autoconfigure: true
+    #
+    # Twig\Extra\Intl\IntlExtension: ~
+
+when@test_cached:
+    twig:
+        strict_variables: true
+
+```
+
+### Install the assets
 
-And install the assets
 ```yaml
 bin/console asset:install
 ```
@@ -198,6 +234,13 @@ You can distinguish the `Row` element and the `Column` element by their dotted b
 
 ![The HTML element](docs/images/screenshots/html.png)
 
+### Markdown Element
+
+![The Markdown element](docs/images/screenshots/markdown.png)
+
+Use can use `MONSIEURBIZ_SYLIUS_RICH_EDITOR_ENABLED_HIGHLIGHT_JS_SHOP` to enable code highlighting in the shop.
+Also you can change the theme with `MONSIEURBIZ_SYLIUS_RICH_EDITOR_ENABLED_HIGHLIGHT_JS_THEME`.
+
 ### Text element
 
 ![The text element](docs/images/screenshots/text.png)

assets/js/highlight.js

@@ -0,0 +1,8 @@
+import hljs from 'highlight.js';
+import 'highlight.js/styles/default.css';
+
+document.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll('pre code').forEach((block) => {
+    hljs.highlightElement(block);
+  });
+});

composer.json

@@ -6,7 +6,10 @@
     "license": "MIT",
     "require": {
         "php": "^8.0",
-        "sylius/sylius": ">=1.11 <1.14"
+        "sylius/sylius": ">=1.11 <1.14",
+        "twig/markdown-extra": "^2.16|^3.12",
+        "twig/extra-bundle": "^2.16|^3.12",
+        "league/commonmark": "^2.5"
     },
     "require-dev": {
         "friendsofphp/php-cs-fixer": "^3.16",

dist/.env.local

@@ -1 +1,3 @@
 SYLIUS_FIXTURES_HOSTNAME=${SYMFONY_DEFAULT_ROUTE_HOST:-localhost}
+MONSIEURBIZ_SYLIUS_RICH_EDITOR_ENABLED_HIGHLIGHT_JS_SHOP=true
+MONSIEURBIZ_SYLIUS_RICH_EDITOR_ENABLED_HIGHLIGHT_JS_THEME=atom-one-dark

dist/config/packages/twig.yaml

@@ -0,0 +1,18 @@
+twig:
+    paths: ['%kernel.project_dir%/templates']
+    debug: '%kernel.debug%'
+    strict_variables: '%kernel.debug%'
+
+services:
+    # Removed by Rich Editor because it is loaded by the quire of twig/extra-bundle
+    #
+    # _defaults:
+    #     public: false
+    #     autowire: true
+    #     autoconfigure: true
+    #
+    # Twig\Extra\Intl\IntlExtension: ~
+
+when@test_cached:
+    twig:
+        strict_variables: true

package.json

@@ -29,6 +29,7 @@
     "a11y-dialog-component": "^5.5.1",
     "codemirror": "5",
     "gulp": "^4.0.2",
+    "highlight.js": "^11.10.0",
     "mustache": "^4.0.1",
     "suneditor": "^2.45.1"
   }

src/Form/Type/UiElement/MarkdownType.php

@@ -0,0 +1,42 @@
+<?php
+
+/*
+ * This file is part of Monsieur Biz' Rich Editor plugin for Sylius.
+ *
+ * (c) Monsieur Biz <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE.txt
+ * file that was distributed with this source code.
+ */
+
+declare(strict_types=1);
+
+namespace MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement;
+
+use MonsieurBiz\SyliusRichEditorPlugin\Form\Type\AlignmentType;
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\TextareaType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\Validator\Constraints as Assert;
+
+class MarkdownType extends AbstractType
+{
+    /**
+     * @inheritdoc
+     */
+    public function buildForm(FormBuilderInterface $builder, array $options): void
+    {
+        $builder
+            ->add('content', TextareaType::class, [
+                'required' => true,
+                'label' => 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.markdown.field.content',
+                'constraints' => [
+                    new Assert\NotBlank([]),
+                ],
+            ])
+            ->add('align', AlignmentType::class, [
+                'show_justify' => true,
+            ])
+        ;
+    }
+}

src/Resources/config/config.yaml

@@ -17,6 +17,17 @@ knp_gaufrette:
 parameters:
     env(MONSIEURBIZ_SYLIUS_RICH_EDITOR_UPLOAD_DIR): /media/rich-editor
     env(MONSIEURBIZ_SYLIUS_RICH_EDITOR_IMAGE_UPLOAD_DIR): /media/image
+    env(MONSIEURBIZ_SYLIUS_RICH_EDITOR_ENABLED_HIGHLIGHT_JS_SHOP): 'false'
+    env(MONSIEURBIZ_SYLIUS_RICH_EDITOR_ENABLED_HIGHLIGHT_JS_THEME): 'default'
+
+twig:
+    globals:
+        monsieurbiz_sylius_rich_editor: {
+            highlight_js: {
+                shop_enabled: '%env(MONSIEURBIZ_SYLIUS_RICH_EDITOR_ENABLED_HIGHLIGHT_JS_SHOP)%',
+                theme: '%env(MONSIEURBIZ_SYLIUS_RICH_EDITOR_ENABLED_HIGHLIGHT_JS_THEME)%',
+            }
+        }
 
 liip_imagine:
     loaders:

src/Resources/config/richeditor.yaml

@@ -179,3 +179,15 @@ monsieurbiz_sylius_richeditor:
             templates:
                 admin_render: '@MonsieurBizSyliusRichEditorPlugin/Admin/UiElement/row.html.twig'
                 front_render: '@MonsieurBizSyliusRichEditorPlugin/Shop/UiElement/row.html.twig'
+        monsieurbiz.markdown:
+            alias: markdown
+            title: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.markdown.title'
+            description: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.markdown.description'
+            icon: file code
+            wireframe: markdown
+            tags: [ default ]
+            classes:
+                form: MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement\MarkdownType
+            templates:
+                admin_render: '@MonsieurBizSyliusRichEditorPlugin/Admin/UiElement/markdown.html.twig'
+                front_render: '@MonsieurBizSyliusRichEditorPlugin/Shop/UiElement/markdown.html.twig'

src/Resources/config/sylius/ui.yaml

@@ -4,3 +4,8 @@ sylius_ui:
             blocks:
                 monsieurbiz_richeditor_init_app:
                     template: '@MonsieurBizSyliusRichEditorPlugin/Admin/app.html.twig'
+
+        sylius.shop.layout.javascripts:
+            blocks:
+                monsieurbiz_richeditor_init_shop:
+                    template: '@MonsieurBizSyliusRichEditorPlugin/Shop/app.html.twig'

src/Resources/public/entrypoints.json

@@ -7,6 +7,14 @@
       "js": [
         "/public/js/rich-editor.js"
       ]
+    },
+    "rich-editor-highlight": {
+      "css": [
+        "/public/css/rich-editor-highlight.css"
+      ],
+      "js": [
+        "/public/js/rich-editor-highlight.js"
+      ]
     }
   }
 }

src/Resources/public/manifest.json

@@ -1,4 +1,6 @@
 {
   "public/rich-editor.css": "/public/css/rich-editor.css",
-  "public/rich-editor.js": "/public/js/rich-editor.js"
+  "public/rich-editor.js": "/public/js/rich-editor.js",
+  "public/rich-editor-highlight.css": "/public/css/rich-editor-highlight.css",
+  "public/rich-editor-highlight.js": "/public/js/rich-editor-highlight.js"
 }

src/Resources/translations/messages.en.yml

@@ -94,6 +94,11 @@ monsieurbiz_richeditor_plugin:
       description: 'An element with multiple images. A link can be added on each image.'
       field:
         images: 'Images list'
+    monsieurbiz.markdown:
+      title: 'Markdown Element'
+      description: 'An element with markdown content'
+      field:
+        content: 'Content'
   file:
     change: 'Change file'
   form:

src/Resources/translations/messages.es.yml

@@ -94,6 +94,11 @@ monsieurbiz_richeditor_plugin:
       description: 'Un elemento con varias imágenes. Se puede agregar un enlace a cada imagen.'
       field:
         images: 'Lista de imágenes'
+    monsieurbiz.markdown:
+      title: 'Elemento de markdown'
+      description: 'Un elemento con contenido en markdown'
+      field:
+        content: 'Contenido'
   file:
     change: 'Cambiar archivo'
   form:

src/Resources/translations/messages.fr.yml

@@ -94,6 +94,11 @@ monsieurbiz_richeditor_plugin:
       description: 'Une lame contenant une liste d''images.'
       field:
         images: 'Liste d''images'
+    monsieurbiz.markdown:
+      title: 'Lame Markdown'
+      description: 'Une lame affichant un contenu rédigé en Markdown'
+      field:
+        content: 'Contenu'
   file:
     change: 'Changer de fichier'
   form:

src/Resources/translations/messages.hr.yml

@@ -94,6 +94,11 @@ monsieurbiz_richeditor_plugin:
       description: 'Element s više slika. Svaka slika može biti link.'
       field:
         images: 'Slike'
+    monsieurbiz.markdown:
+      title: 'Markdown'
+      description: 'Element koji sadrži Markdown.'
+      field:
+        content: 'Sadržaj'
   file:
     change: 'Zamijeni datoteku'
   form:

src/Resources/translations/messages.nl.yml

@@ -76,6 +76,11 @@ monsieurbiz_richeditor_plugin:
       description: 'Een element met meerdere afbeeldingen. Aan elke afbeelding kan een link worden toegevoegd.'
       field:
         images: 'Lijst van afbeeldingen'
+    monsieurbiz.markdown:
+      title: 'Markdown'
+      description: 'Een element met inhoud in markdown'
+      field:
+        content: 'Inhoud'
   file:
     change: 'Bestand aanpassen'
   form:

src/Resources/translations/messages.pl.yaml

@@ -94,6 +94,11 @@ monsieurbiz_richeditor_plugin:
             description: 'Element z wieloma obrazami. Można dodać link do każdego obrazu.'
             field:
                 images: 'Lista obrazów'
+        monsieurbiz.markdown:
+            title: 'Element Markdown'
+            description: 'Element z treścią Markdown'
+            field:
+                content: 'Treść'
     file:
         change: 'Zmień plik'
     form:

src/Resources/views/Admin/UiElement/markdown.html.twig

@@ -0,0 +1,13 @@
+{#
+    UI Element template
+    type: markdown
+    element fields :
+        content
+        align
+#}
+{% set align = element.align is defined and element.align is not empty ? element.align : 'inherit' %}
+{% if element is not empty and element.content is not empty %}
+<div style="text-align: {{align}};">
+    {{ element.content|markdown_to_html }}
+</div>
+{% endif %}

src/Resources/views/Shop/UiElement/markdown.html.twig

@@ -0,0 +1,13 @@
+{#
+    UI Element template
+    type: markdown
+    element fields :
+        content
+        align
+#}
+{% set align = element.align is defined and element.align is not empty ? element.align : 'inherit' %}
+{% if element is not empty and element.content is not empty %}
+<div style="text-align: {{align}};">
+    {{ element.content|markdown_to_html }}
+</div>
+{% endif %}

src/Resources/views/Shop/app.html.twig

@@ -0,0 +1,12 @@
+{% set highlightJsEnabled = monsieurbiz_sylius_rich_editor.highlight_js.shop_enabled|default('false') %}
+{% set highlightJsTheme = monsieurbiz_sylius_rich_editor.highlight_js.theme|default('default') %}
+
+{% if highlightJsEnabled == 'true' %}
+    {% include '@SyliusUi/_javascripts.html.twig' with {'path': 'bundles/monsieurbizsyliusricheditorplugin/js/rich-editor-highlight.js'} %}
+    {% if highlightJsTheme == 'default' %}
+        {% include '@SyliusUi/_stylesheets.html.twig' with {'path': 'bundles/monsieurbizsyliusricheditorplugin/css/rich-editor-highlight.css'} %}
+    {% else %}
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/{{ highlightJsTheme|escape('html_attr') }}.min.css">
+    {% endif %}
+
+{% endif %}

webpack.config.js

@@ -8,6 +8,7 @@ Encore
 
     // entries
     .addEntry('rich-editor', './assets/js/app.js')
+    .addEntry('rich-editor-highlight', './assets/js/highlight.js')
 
     // copy images
     .copyFiles({