FIX: Save WYSIWYG saving in source mode

Summary

See https://gitlab.indiscale.com/caosdb/customers/cfaed/management/-/issues/36. This fixes a bug whereby changes made in Source Mode of the WYSIWYG editor would not be saved.

Focus

Instead of listening to CKEditor's change:data event, we're now using the edit mode's state machine and its insert and update transitions to update the text areas that were replaced by the WYSIWYG editor.

Test Environment

Start any CaosDB server with the BUILD_MODULE_EXT_EDITMODE_WYSIWYG_TEXT build property enabled. Verify that changes made in a text property using the WYSIWYG editor are now saved correctly both within and outside Source Editing after clicking save. Also test this with records that have multiple text properties.

Check List for the Author

Please, prepare your MR for a review. Be sure to write a summary and a focus and create gitlab comments for the reviewer. They should guide the reviewer through the changes, explain your changes and also point out open questions. For further good practices have a look at our review guidelines

• All automated tests pass
• Reference related Issues
• Up-to-date CHANGELOG.md
• Annotations in code (Gitlab comments)
  • Intent of new code
  • Problems with old code
  • Why this implementation?

Check List for the Reviewer

• I understand the intent of this MR
• All automated tests pass
• Up-to-date CHANGELOG.md
• The test environment setup works and the intended behavior is reproducible in the test environment
• In-code documentation and comments are up-to-date.
• Check: Are there spezifications? Are they satisfied?

For further good practices have a look at our review guidelines.

src/core/js/ext_editmode_wysiwyg_text.js

@@ -39,6 +39,8 @@
  */
 var ext_editmode_wysiwyg_text = function ($, logger, ClassicEditor, edit_mode, getPropertyElements, getPropertyDatatype, getPropertyName) {
 
+    var _callOnSave = [];
+
     var insertEditorInProperty = async function (prop) {
         if (!(getPropertyDatatype(prop) === 'TEXT')) {
             // Ignore anything that isn't a list property, even LIST<TEXT>
@@ -62,16 +64,17 @@ var ext_editmode_wysiwyg_text = function ($, logger, ClassicEditor, edit_mode, g
             logger.debug('Initialized editor for ' + getPropertyName(prop));
             // Manually implement saving the data since edit mode is not
             // a form to be submitted.
-            editor.model.document.on("change:data", (e) => {
+            _callOnSave.push(() => { editor.updateSourceElement() });
+            //editor.model.document.on("change:data", (e) => {
 
-                // console.log(editor.getData());
-                // console.log(editor.sourceElement.value);
-                console.log(editor.getData() != editor.sourceElement.value);
-                if (editor.getData() != editor.sourceElement.value) {
-                    console.log("Saving editor...");
-                    editor.updateSourceElement();
-                }
-            });
+                //// console.log(editor.getData());
+                //// console.log(editor.sourceElement.value);
+                //console.log(editor.getData() != editor.sourceElement.value);
+                //if (editor.getData() != editor.sourceElement.value) {
+                    //console.log("Saving editor...");
+                    //editor.updateSourceElement();
+                //}
+            //});
             // TODO(fspreck): Add an event listener to save also changes made in
             // source mode. What event can we listen to? The following doesn't
             // work either.
@@ -79,28 +82,42 @@ var ext_editmode_wysiwyg_text = function ($, logger, ClassicEditor, edit_mode, g
             //     console.log("Saving after input...");
             //     editor.updateSourceElement();
             // }, true);
-            const sourceEditingPlugin = editor.plugins.get("SourceEditing");
-            sourceEditingPlugin.on("change:isSourceEditingMode", (e, name, isSourceEditingMode) => {
-                if (isSourceEditingMode) {
-                    // Maybe this helps?
-                    console.log("Entering source editing");
-                    const [domSourceEditingElementWrapper] = sourceEditingPlugin._replacedRoots.values();
-                    const textarea = domSourceEditingElementWrapper.querySelector('textarea');
+            //const sourceEditingPlugin = editor.plugins.get("SourceEditing");
+            //sourceEditingPlugin.on("change:isSourceEditingMode", (e, name, isSourceEditingMode) => {
+                //if (isSourceEditingMode) {
+                    //// Maybe this helps?
+                    //console.log("Entering source editing");
+                    //const [domSourceEditingElementWrapper] = sourceEditingPlugin._replacedRoots.values();
+                    //const textarea = domSourceEditingElementWrapper.querySelector('textarea');
 
-                    // TODO(fspreck) this has to be more intelligent since it
-                    // leads to an infinite update loop...
-                    textarea.addEventListener("input", (e) => {
-                        console.log("Input in source mode");
-                        // sourceEditingPlugin._updateEditorData();
-                    });
-                }
-            });
+                    //// TODO(fspreck) this has to be more intelligent since it
+                    //// leads to an infinite update loop...
+                    //textarea.addEventListener("input", (e) => {
+                        //console.log("Input in source mode");
+                        //// sourceEditingPlugin._updateEditorData();
+                    //});
+                //}
+            //});
         } catch (error) {
             logger.error(error.stack);
         }
     }
 
+    const proxySaveMethod = function (original) {
+        const result = function (entity) {
+            _callOnSave.forEach(cb => {cb();});
+            if(typeof original === "function") {
+                return original(entity);
+            }
+            return undefined;
+        }
+        return result;
+    }
+
     var replaceTextAreas = function (entity) {
+        // on save, call callbacks
+        edit_mode.app.onBeforeInsert = proxySaveMethod(edit_mode.app.onBeforeInsert);
+        edit_mode.app.onBeforeUpdate = proxySaveMethod(edit_mode.app.onBeforeUpdate);
         const properties = getPropertyElements(entity);
         for (let prop of properties) {
             // TODO(fspreck): This will be replaced by a whitelist of properties