From babe2d1edcc8fbd20a3609db4d3a98b9fcd99b7e Mon Sep 17 00:00:00 2001
From: Benjamin Kott <benjamin.kott@outlook.com>
Date: Tue, 10 Jan 2023 13:36:15 +0100
Subject: [PATCH] [BUGFIX] Provide tag to add JavaScript Modules to importmap
 in Backend Form

The JavaScript module import map is static and only generated and
loaded in the first request to a document. All possible future
modules requested in later Ajax calls need to be registered already
in the first initial request.

We are adding a new tag 'backend.form' that is used to identify
JavaScript modules that can be used within the backend forms. This
will ensure that the import maps are available for these modules even
if the element is not displayed directly.

A typical use case for this is an InlineRelationRecord where the
CKEditor is not part of the main record but needs to be loaded for the
child record.

Resolves: #99490
Releases: main
Change-Id: Ie30e70a37abcebb0b9381b29ec9f55730a93976a
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/77317
Tested-by: core-ci <typo3@b13.com>
Tested-by: Benjamin Franzke <bfr@qbus.de>
Reviewed-by: Benjamin Franzke <bfr@qbus.de>
Tested-by: Georg Ringer <georg.ringer@gmail.com>
Tested-by: Jan Delius <me@jandelius.eu>
Tested-by: Rico Drexler <rico.drexler@gmx.de>
Reviewed-by: Georg Ringer <georg.ringer@gmail.com>
---
 .../Controller/EditDocumentController.php     |  1 +
 .../Configuration/JavaScriptModules.php       |  1 +
 ...aScriptModulesToImportmapInBackendForm.rst | 49 +++++++++++++++++++
 .../Configuration/JavaScriptModules.php       |  3 ++
 .../Configuration/JavaScriptModules.php       |  3 ++
 5 files changed, 57 insertions(+)
 create mode 100644 typo3/sysext/core/Documentation/Changelog/12.2/Important-99490-ProvideTagToAddJavaScriptModulesToImportmapInBackendForm.rst

diff --git a/typo3/sysext/backend/Classes/Controller/EditDocumentController.php b/typo3/sysext/backend/Classes/Controller/EditDocumentController.php
index 270981f4b779..a387a0cc001b 100644
--- a/typo3/sysext/backend/Classes/Controller/EditDocumentController.php
+++ b/typo3/sysext/backend/Classes/Controller/EditDocumentController.php
@@ -792,6 +792,7 @@ class EditDocumentController
         $this->R_URL_getvars['returnUrl'] = $this->retUrl;
         $this->R_URI = $this->R_URL_parts['path'] . HttpUtility::buildQueryString($this->R_URL_getvars, '?');
 
+        $this->pageRenderer->getJavaScriptRenderer()->includeTaggedImports('backend.form');
         $this->pageRenderer->addInlineLanguageLabelFile('EXT:backend/Resources/Private/Language/locallang_alt_doc.xlf');
 
         $event = new AfterFormEnginePageInitializedEvent($this, $request);
diff --git a/typo3/sysext/backend/Configuration/JavaScriptModules.php b/typo3/sysext/backend/Configuration/JavaScriptModules.php
index a52c8cf153dd..aea25a8bf165 100644
--- a/typo3/sysext/backend/Configuration/JavaScriptModules.php
+++ b/typo3/sysext/backend/Configuration/JavaScriptModules.php
@@ -6,6 +6,7 @@ return [
     ],
     'tags' => [
         'backend.module',
+        'backend.form',
         'backend.navigation-component',
     ],
     'imports' => [
diff --git a/typo3/sysext/core/Documentation/Changelog/12.2/Important-99490-ProvideTagToAddJavaScriptModulesToImportmapInBackendForm.rst b/typo3/sysext/core/Documentation/Changelog/12.2/Important-99490-ProvideTagToAddJavaScriptModulesToImportmapInBackendForm.rst
new file mode 100644
index 000000000000..82e42d0bbc57
--- /dev/null
+++ b/typo3/sysext/core/Documentation/Changelog/12.2/Important-99490-ProvideTagToAddJavaScriptModulesToImportmapInBackendForm.rst
@@ -0,0 +1,49 @@
+.. include:: /Includes.rst.txt
+
+.. _important-99490-1673358047:
+
+======================================================================================
+Important: #99490 - Provide tag to add JavaScript Modules to importmap in Backend Form
+======================================================================================
+
+See :issue:`99490`
+
+Description
+===========
+
+The JavaScript module import map is static and only generated and
+loaded in the first request to a document. All possible future
+modules requested in later Ajax calls need to be registered already
+in the first initial request.
+
+We are adding a new tag 'backend.form' that is used to identify
+JavaScript modules that can be used within the backend forms. This
+will ensure that the import maps are available for these modules
+even if the element is not displayed directly.
+
+A typical use case for this is an InlineRelationRecord where the
+CKEditor is not part of the main record but needs to be loaded for
+the child record.
+
+Example Configuration/JavaScriptModules.php
+-------------------------------------------
+
+.. code-block:: php
+
+    <?php
+
+    return [
+        'dependencies' => [
+            'backend',
+        ],
+        'tags' => [
+            'backend.form',
+        ],
+        'imports' => [
+            '@typo3/rte-ckeditor/' => 'EXT:rte_ckeditor/Resources/Public/JavaScript/',
+            '@typo3/ckeditor5-bundle.js' => 'EXT:rte_ckeditor/Resources/Public/Contrib/ckeditor5-bundle.js',
+        ],
+    ];
+
+
+.. index:: Backend, FlexForm, JavaScript, ext:backend
diff --git a/typo3/sysext/rte_ckeditor/Configuration/JavaScriptModules.php b/typo3/sysext/rte_ckeditor/Configuration/JavaScriptModules.php
index 10ad48a56880..1a8a1b563a8a 100644
--- a/typo3/sysext/rte_ckeditor/Configuration/JavaScriptModules.php
+++ b/typo3/sysext/rte_ckeditor/Configuration/JavaScriptModules.php
@@ -4,6 +4,9 @@ return [
     'dependencies' => [
         'backend',
     ],
+    'tags' => [
+        'backend.form',
+    ],
     'imports' => [
         '@typo3/rte-ckeditor/' => 'EXT:rte_ckeditor/Resources/Public/JavaScript/',
         '@typo3/ckeditor5-bundle.js' => 'EXT:rte_ckeditor/Resources/Public/Contrib/ckeditor5-bundle.js',
diff --git a/typo3/sysext/t3editor/Configuration/JavaScriptModules.php b/typo3/sysext/t3editor/Configuration/JavaScriptModules.php
index 41ce35c00d00..2ea4afd6712b 100644
--- a/typo3/sysext/t3editor/Configuration/JavaScriptModules.php
+++ b/typo3/sysext/t3editor/Configuration/JavaScriptModules.php
@@ -4,6 +4,9 @@ return [
     'dependencies' => [
         'backend',
     ],
+    'tags' => [
+        'backend.form',
+    ],
     'imports' => [
         '@typo3/t3editor/' => [
             'path' => 'EXT:t3editor/Resources/Public/JavaScript/',
-- 
GitLab