[BUGFIX] Fix some dirty field checks in FormEngine

In some cases, the "dirty" field checks were still not working for both
ckeditor and flexform fields. The following changes were made:

- Flexform elements can use dots for html id attributes, which are not
officially supported by the W3C CSS specification. So escape the
corresponding element selectors to work with the validation.
- When maximizing an RTE, ckeditor4 automatically removes all the
classes from the connected html elements (and reapplies them once leaving
the fullscreen mode), so the markFieldAsChanged() validation won't work
here. In this case, apply an event for remembering the changes, once the
user leaves fullscreen again.

Resolves: #88978
Resolves: #88776
Releases: master, 9.5
Change-Id: Ib21d415766b67be8d6c6e9aae8b8e937d03850bd
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/63747
Tested-by: TYPO3com <noreply@typo3.com>
Tested-by: Benni Mack <benni@typo3.org>
Reviewed-by: Benni Mack <benni@typo3.org>

typo3/sysext/rte_ckeditor/Classes/Form/Element/RichTextElement.php

@@ -206,18 +206,28 @@ protected function getCkEditorRequireJsModuleCode(string $fieldId): string
                 ' . $externalPlugins . '
                 require([\'jquery\', \'TYPO3/CMS/Backend/FormEngine\'], function($, FormEngine) {
                     $(function(){
+                        var escapedFieldSelector = \'#\' + $.escapeSelector(\'' . $fieldId . '\');
                         CKEDITOR.replace("' . $fieldId . '", ' . $jsonConfiguration . ');
-                        CKEDITOR.instances["' . $fieldId . '"].on(\'change\', function() {
+                        CKEDITOR.instances["' . $fieldId . '"].on(\'change\', function(e) {
+                            var commands = e.sender.commands;
                             CKEDITOR.instances["' . $fieldId . '"].updateElement();
                             FormEngine.Validation.validate();
-                            FormEngine.Validation.markFieldAsChanged($(\'#' . $fieldId . '\'));
+                            FormEngine.Validation.markFieldAsChanged($(escapedFieldSelector));
+
+                            // remember changes done in maximized state and mark field as changed, once minimized again
+                            if (typeof commands.maximize !== \'undefined\' && commands.maximize.state === 1) {
+                                CKEDITOR.instances["' . $fieldId . '"].on(\'maximize\', function(e) {
+                                    $(this).off(\'maximize\');
+                                    FormEngine.Validation.markFieldAsChanged($(escapedFieldSelector));
+                                });
+                            }
                         });
                         CKEDITOR.instances["' . $fieldId . '"].on(\'mode\', function() {
                             // detect field changes in source mode
                             if (this.mode === \'source\') {
                                 var sourceArea = CKEDITOR.instances["' . $fieldId . '"].editable();
                                 sourceArea.attachListener(sourceArea, \'change\', function() {
-                                    FormEngine.Validation.markFieldAsChanged($(\'#' . $fieldId . '\'));
+                                    FormEngine.Validation.markFieldAsChanged($(escapedFieldSelector));
                                 });
                             }
                         });