ENH: Add a WYSIWYG editor for text properties

Summary

Needed for https://gitlab.indiscale.com/caosdb/customers/cfaed/management/-/issues/13. Adds a WYSIWYG editor to (scalar) text properties that produces markdown output.

Focus

ckeditor was added to the project's dependencies and is used in ext_editmode_wysiwyg_text.js to replace the textareas of scalar text properties. Do you think that the decision to leave out lists of text is a reasonable one?

Test Environment

Start the WebUI wit BUILD_MODULE_EXT_EDITMODE_WYSIWYG_TEXT = ENABLED. Verify that

• entities with text properties are assigned WYSIWYG editors when they are edited
• the editor does not appear in any other input fields
• newly added text properties also have the editor
• toggling a scalar property to a list makes the editor vanish, toggling back makes it re-appear

You may also test the output of the editor with various markdown commands together with the complexity wiki. Use the local-query branch of the cfaed server profile and main in complexitywiki for this.

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,42 +39,35 @@
  */
 var ext_editmode_wysiwyg_text = function ($, logger, ClassicEditor, edit_mode, getPropertyElements, getPropertyDatatype, getPropertyName) {
 
-    var insertEditorInProperty = function (prop) {
+    var insertEditorInProperty = async function (prop) {
         if (!(getPropertyDatatype(prop) === 'TEXT')) {
             // Ignore anything that isn't a list property, even LIST<TEXT>
             return;
         }
 
-        let editor;
-
-        ClassicEditor
-            .create(prop.querySelector('textarea'), {
-                // use all plugins since we built the editor dependency to
-                // contain only those we need.
-                plugins: ClassicEditor.builtinPlugins,
-                // Markdown needs a header row so enforce this
-                table: {
-                    defaultHeadings: {
-                        rows: 1,
-                        columns: 0
+        try{
+            const editor = await ClassicEditor
+                .create(prop.querySelector('textarea'), {
+                    // use all plugins since we built the editor dependency to
+                    // contain only those we need.
+                    plugins: ClassicEditor.builtinPlugins,
+                    // Markdown needs a header row so enforce this
+                    table: {
+                        defaultHeadings: {
+                            rows: 1,
+                            columns: 0
+                        },
                     },
-                },
-            })
-            .then(newEditor => {
-                console.log('Initialized editor for ' + getPropertyName(prop));
-                editor = newEditor;
-            }).then(
-                () => {
-                    // Manually implement saving the data since edit mode is not
-                    // a form to be submitted.
-                    editor.model.document.on("change:data", (e) => {
-                        editor.updateSourceElement();
-                    });
-                }
-            )
-            .catch(error => {
-                console.error(error.stack);
+                })
+            console.log('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) => {
+                editor.updateSourceElement();
             });
+        } catch(error) {
+            console.error(error.stack);
+        }
     }
 
     var replaceTextAreas = function (entity) {