feature #5969 Show readonly code editor field on detail page (Radu Cr…

…istescu, Uplink03)

This PR was squashed before being merged into the 4.x branch.

Discussion
----------

Show readonly code editor field on detail page

This patch adds a read-only CodeMirror for CodeEditorField on the detail page.

Assets rebuilt with `make build-assets`.

## ~Problems with this PR~

~`@javiereguiluz` I need some help, if you don't mind.~

~Unfortunately, I can't get good results from `yarn build`, so this PR is a draft until I figure that out. The patch works even without a rebuild, but a build is necessary to make the CodeMirror editor read-only.~

~When I run `yarn build`, the following problems occur:~

-  ~`WARNING  The value passed to setPublicPath() should *usually* start with "/" or be a full URL (http://...). If you're not sure, then you should probably change your public path and make this message disappear.`~
- ~The `manifest.json` file refers to paths that start with `/`, therefore the browser just gets _404_ for everything.~
- ~Removing the leading `/` manually makes JS and CSS load again, but everything (and I mean everything rendered by EasyAdminBundle) is RTL, and the CodeEditor field doesn't accept input, and I'm also missing fonts~

Commits
-------

db3201e Show readonly code editor field on detail page

assets/js/field-code-editor.js

@@ -30,6 +30,7 @@ document.addEventListener('DOMContentLoaded', () => {
             tabSize: codeBlock.dataset.tabSize,
             theme: 'default',
             autoRefresh: true,
+            readOnly: codeBlock.readOnly,
         });
 
         if (codeBlock.required) {

src/Field/CodeEditorField.php

@@ -33,8 +33,8 @@ public static function new(string $propertyName, $label = null): self
             ->setTemplateName('crud/field/code_editor')
             ->setFormType(CodeEditorType::class)
             ->addCssClass('field-code_editor')
-            ->addCssFiles(Asset::fromEasyAdminAssetPackage('field-code-editor.css')->onlyOnForms())
-            ->addJsFiles(Asset::fromEasyAdminAssetPackage('field-code-editor.js')->onlyOnForms())
+            ->addCssFiles(Asset::fromEasyAdminAssetPackage('field-code-editor.css')->ignoreOnIndex())
+            ->addJsFiles(Asset::fromEasyAdminAssetPackage('field-code-editor.js')->ignoreOnIndex())
             ->setDefaultColumns('col-md-12 col-xxl-10')
             ->setCustomOption(self::OPTION_INDENT_WITH_TABS, false)
             ->setCustomOption(self::OPTION_LANGUAGE, 'markdown')

src/Resources/public/entrypoints.json

@@ -35,7 +35,7 @@
         "/field-code-editor.09574d54.rtl.css"
       ],
       "js": [
-        "/field-code-editor.8988bf27.js"
+        "/field-code-editor.6507533d.js"
       ]
     },
     "field-collection": {

src/Resources/public/manifest.json

@@ -8,7 +8,7 @@
   "field-boolean.js": "field-boolean.353e173e.js",
   "field-code-editor.css": "field-code-editor.09574d54.css",
   "field-code-editor.rtl.css": "field-code-editor.09574d54.rtl.css",
-  "field-code-editor.js": "field-code-editor.8988bf27.js",
+  "field-code-editor.js": "field-code-editor.6507533d.js",
   "field-collection.js": "field-collection.8ea41328.js",
   "field-file-upload.js": "field-file-upload.b5f460d6.js",
   "field-image.js": "field-image.b7b44654.js",

src/Resources/views/crud/field/code_editor.html.twig

@@ -2,11 +2,19 @@
 {# @var field \EasyCorp\Bundle\EasyAdminBundle\Dto\FieldDto #}
 {# @var entity \EasyCorp\Bundle\EasyAdminBundle\Dto\EntityDto #}
 {% if ea.crud.currentAction == 'detail' %}
-    {# TODO: improve this to highlight code #}
     {% set configuredHeight = field.customOptions.get('height') %}
-    <pre style="{{ configuredHeight is null ? 'max-height: 500px;' : 'max-height: unset; height: ' ~ configuredHeight ~ 'px' }}">
+    <textarea
+            readonly
+            style="{{ configuredHeight is null ? 'max-height: 500px;' : 'max-height: unset; height: ' ~ configuredHeight ~ 'px' }}"
+            data-ea-code-editor-field="true"
+            data-language="{{ field.customOptions.get('language')|e('html_attr') }}"
+            data-tab-size="{{ field.customOptions.get('tabSize')|e('html_attr') }}"
+            data-indent-with-tabs="{{ field.customOptions.get('indentWithTabs') ? 'true' : 'false' }}"
+            data-show-line-numbers="{{ field.customOptions.get('showLineNumbers') ? 'true' : 'false' }}"
+            data-number-of-rows="{{ field.customOptions.get('numOfRows')|e('html_attr') }}"
+    >
         {{- field.formattedValue|escape -}}
-    </pre>
+    </textarea>
 {% else %}
     {% set html_id = 'ea-code-editor-' ~ field.uniqueId %}
     <a href="#" data-bs-toggle="modal" data-bs-target="#{{ html_id }}">