feature #2792 Added a new text editor form type based on Trix (javier…

…eguiluz)

This PR was squashed before being merged into the 2.0.x-dev branch (closes #2792).

Discussion
----------

Added a new text editor form type based on Trix

This is similar to #2766 but creates a regular text editor instead of a source code editor.

The type is not configurable on purpose to keep it simple. If you need advanced features, you can keep using the FOSCKEditor bundle.

This is how it looks:

![image](https://user-images.githubusercontent.com/73419/60042629-75740080-96be-11e9-9163-4f53105f61e7.png)

Commits
-------

f9940c2 Added a new text editor form type based on Trix

assets/css/form-type-text-editor.css

@@ -0,0 +1,28 @@
+@import '~trix/dist/trix.css';
+
+.easyadmin-text-editor-wrapper {
+    background: var(--white);
+    border: 0;
+    border-radius: var(--border-radius);
+    box-shadow: 0 0 0 1px rgba(43, 45, 80, .16), 0 0 0 1px rgba(6, 122, 184, 0), 0 0 0 2px rgba(6, 122, 184, 0), 0 1px 1px rgba(0, 0, 0, .08);
+    padding: 7px;
+}
+trix-toolbar {
+    margin-bottom: 10px;
+}
+trix-toolbar .trix-button-group {
+    border-color: var(--gray-500);
+    margin-bottom: 0;
+    border-width: 1px 1px 2px;
+}
+trix-toolbar .trix-button {
+    border: 0;
+    color: var(--gray-500);
+}
+trix-toolbar .trix-button.trix-active {
+    color: var(--gray-700);
+}
+trix-editor {
+    border: 0;
+    padding: 3px;
+}

assets/js/app.js

@@ -29,6 +29,7 @@ window.addEventListener('load', function() {
     createContentResizer();
     createNavigationToggler();
     createCodeEditorFields();
+    createTextEditorFields();
 });
 
 function createNullableControls() {
@@ -159,3 +160,23 @@ function createCodeEditorFields()
     document.querySelector('head').appendChild(codeEditorCss);
     document.querySelector('body').appendChild(codeEditorJs);
 }
+
+// Text editor fields require extra JavaScript dependencies, which are loaded
+// dynamically only when there are code editor fields in the page
+function createTextEditorFields()
+{
+    const textEditorElements = document.querySelectorAll('trix-editor');
+    if (textEditorElements.length === 0) {
+        return;
+    }
+
+    const textEditorJs = document.createElement('script');
+    textEditorJs.setAttribute('src', textEditorElements[0].dataset.jsUrl);
+
+    const textEditorCss = document.createElement('link');
+    textEditorCss.setAttribute('rel', 'stylesheet');
+    textEditorCss.setAttribute('href', textEditorElements[0].dataset.cssUrl);
+
+    document.querySelector('head').appendChild(textEditorCss);
+    document.querySelector('body').appendChild(textEditorJs);
+}

assets/js/form-type-text-editor.js

@@ -0,0 +1,3 @@
+require('../css/form-type-text-editor.css');
+
+import 'trix/dist/trix';

doc/book/edit-new-configuration.rst

@@ -384,8 +384,8 @@ These are the options that you can define for each field:
   done internally by the bundle). The allowed values are:
 
   * Any of the `Symfony Form types`_.
-  * Any of the custom EasyAdmin form types: ``code_editor``, ``easyadmin_autocomplete``
-    (they are explained later in this chapter).
+  * Any of the custom EasyAdmin form types: ``code_editor``, ``text_editor``,
+    ``easyadmin_autocomplete`` (they are explained later in this chapter).
 * ``type_options`` (optional), a hash with the options passed to the Symfony
   Form type used to render the field.
 
@@ -605,6 +605,33 @@ This type defines the following configuration options:
                         # ...
         # ...
 
+.. _form-type-text-editor:
+
+Text Editor
+-----------
+
+It displays a JavaScript-based WYSIWYG text editor based on the popular
+`Trix editor`_. You don't need to install any external dependencies because
+EasyAdmin includes them dynamically when needed. The result of editing the
+contents is stored as HTML in the given property:
+
+.. code-block:: yaml
+
+    # config/packages/easy_admin.yaml
+    easy_admin:
+        entities:
+            ExamQuestion:
+                class: App\Entity\BlogPost
+                form:
+                    fields:
+                        - { property: 'content', type: 'text_editor' }
+                        # ...
+        # ...
+
+This field does not define any configuration option. It has been designed to
+provide the most commonly needed formatted options. If this doesn't fit your
+needs, you can :doc:`integrate the popular CKEditor text editor with EasyAdmin </integration/ivoryckeditorbundle>`.
+
 .. _edit-new-advanced-form-design:
 
 Advanced Form Design
@@ -970,6 +997,7 @@ and override only the ``content_title`` Twig block:
 .. _`customize individual form fields`: https://symfony.com/doc/current/form/form_customization.html#how-to-customize-an-individual-field
 .. _`form fragment naming rules`: https://symfony.com/doc/current/form/form_themes.html#form-template-blocks
 .. _`override any part of third-party bundles`: https://symfony.com/doc/current/bundles/override.html
+.. _`Trix editor`: https://trix-editor.org/
 
 -----
 

doc/integration/ivoryckeditorbundle.rst

@@ -1,6 +1,14 @@
 Integrating FOSCKEditorBundle to Create a WYSIWYG Editor
 ========================================================
 
+.. note::
+
+    Starting from 2.2.1 version, EasyAdmin provides a built-in and ready to use
+    text editor based on the `Trix editor`_. It doesn't require installing or
+    configuring anything and it covers the needs of most applications.
+    :ref:`Learn more about the built-in text editor <form-type-text-editor>`
+    and if it doesn't fit your needs, keep reading this article.
+
 EasyAdmin uses a ``<textarea>`` form field to render long text properties:
 
 .. image:: ../images/wysiwyg/default-textarea.png
@@ -185,3 +193,4 @@ page loaded by EasyAdmin:
 .. _`its full list of configuration options`: http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html
 .. _`CKFinder`: https://cksource.com/ckfinder
 .. _`CKEditor integration docs`: https://docs.ckeditor.com/ckeditor4/docs/#!/guide/dev_ckfinder_integration
+.. _`Trix editor`: https://trix-editor.org/

package.json

@@ -15,7 +15,8 @@
     "postcss-loader": "^3.0.0",
     "sass-loader": "^7.1.0",
     "select2": "4.0.5",
-    "select2-bootstrap-theme": "^0.1.0-beta.10"
+    "select2-bootstrap-theme": "^0.1.0-beta.10",
+    "trix": "^1.1.1"
   },
   "license": "UNLICENSED",
   "private": true,

src/Form/Type/TextEditorType.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace EasyCorp\Bundle\EasyAdminBundle\Form\Type;
+
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\TextareaType;
+
+/**
+ * @author Javier Eguiluz <javier.eguiluz@gmail.com>
+ */
+class TextEditorType extends AbstractType
+{
+    /**
+     * {@inheritdoc}
+     */
+    public function getParent(): string
+    {
+        return TextareaType::class;
+    }
+
+    /**
+     * {@inheritdoc}
+     */
+    public function getBlockPrefix(): string
+    {
+        return 'easyadmin_text_editor';
+    }
+}

src/Form/Util/FormTypeHelper.php

@@ -8,6 +8,7 @@
 use EasyCorp\Bundle\EasyAdminBundle\Form\Type\EasyAdminFormType;
 use EasyCorp\Bundle\EasyAdminBundle\Form\Type\EasyAdminGroupType;
 use EasyCorp\Bundle\EasyAdminBundle\Form\Type\EasyAdminSectionType;
+use EasyCorp\Bundle\EasyAdminBundle\Form\Type\TextEditorType;
 use Symfony\Bridge\Doctrine\Form\Type\EntityType;
 use Symfony\Component\Form\Extension\Core\Type\BirthdayType;
 use Symfony\Component\Form\Extension\Core\Type\ButtonType;
@@ -92,6 +93,9 @@ final class FormTypeHelper
         'submit' => SubmitType::class,
         'tel' => TelType::class,
         'textarea' => TextareaType::class,
+        // allow using underscore and dashes to improve DX
+        'text-editor' => TextEditorType::class,
+        'text_editor' => TextEditorType::class,
         'text' => TextType::class,
         'time' => TimeType::class,
         'time_immutable' => TimeType::class,

src/Resources/public/entrypoints.json

@@ -31,6 +31,14 @@
       "js": [
         "./form-type-code-editor.js"
       ]
+    },
+    "form-type-text-editor": {
+      "css": [
+        "./form-type-text-editor.css"
+      ],
+      "js": [
+        "./form-type-text-editor.js"
+      ]
     }
   }
 }