From 829b0155f4859f0176c37b1fd1fa91b60fef7f5b Mon Sep 17 00:00:00 2001
From: fspreck <f.spreckelsen@indiscale.com>
Date: Wed, 1 Dec 2021 17:52:15 +0100
Subject: [PATCH] ENH: Use better events to inser the editor
---
src/core/js/edit_mode.js | 9 +----
src/core/js/ext_editmode_wysiwyg_text.js | 46 +++++++++++++++++-------
2 files changed, 34 insertions(+), 21 deletions(-)
diff --git a/src/core/js/edit_mode.js b/src/core/js/edit_mode.js
index 1c72d1ce..d1b922c4 100644
--- a/src/core/js/edit_mode.js
+++ b/src/core/js/edit_mode.js
@@ -961,14 +961,7 @@ var edit_mode = new function () {
this.createElementForProperty = function (property, options) {
var result;
if (property.datatype == "TEXT") {
- let area_id;
- if (property.name) {
- area_id = property.name;
- } else {
- // TODO: Treat list properties
- area_id = "";
- }
- result = `<textarea id=${area_id}>${property.value || ""}</textarea>`;
+ result = `<textarea>${property.value || ""}</textarea>`;
} else if (property.datatype == "DATETIME") {
var dateandtime = [""];
if (property.value) {
diff --git a/src/core/js/ext_editmode_wysiwyg_text.js b/src/core/js/ext_editmode_wysiwyg_text.js
index 07f9117d..e9736c41 100644
--- a/src/core/js/ext_editmode_wysiwyg_text.js
+++ b/src/core/js/ext_editmode_wysiwyg_text.js
@@ -23,13 +23,18 @@
/**
* Replaces textareas in the edit mode by a wysiwyg editor
*/
-var ext_editmode_wysiwyg_text = function ($, logger, ClassicEditor, edit_mode) {
+var ext_editmode_wysiwyg_text = function ($, logger, ClassicEditor, edit_mode, getPropertyElements, getPropertyDatatype, getPropertyName) {
+
+ var insertEditorInProperty = function (prop) {
+ if (!(getPropertyDatatype(prop) === 'TEXT')) {
+ // Ignore anything that isn't a list property, even LIST<TEXT>
+ return;
+ }
- var _insertEditor = function (fieldId) {
let editor;
ClassicEditor
- .create(document.querySelector('#' + fieldId), {
+ .create(prop.querySelector('textarea'), {
// use all plugins since we built the editor dependency to
// contain only those we need.
plugins: ClassicEditor.builtinPlugins,
@@ -42,14 +47,13 @@ var ext_editmode_wysiwyg_text = function ($, logger, ClassicEditor, edit_mode) {
},
})
.then(newEditor => {
- console.log('Initialized editor for ' + fieldId);
+ 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) => {
- console.log('Something changed...');
editor.updateSourceElement();
});
}
@@ -59,30 +63,46 @@ var ext_editmode_wysiwyg_text = function ($, logger, ClassicEditor, edit_mode) {
});
}
- var replaceTextAreas = function () {
- const fields = $('textarea');
- for (let field of fields) {
+ var replaceTextAreas = function (entity) {
+ const properties = getPropertyElements(entity);
+ for (let prop of properties) {
// TODO(fspreck): This will be replaced by a whitelist of properties
- // in the future
- if (field.id) {
- _insertEditor(field.id);
+ // in the future.
+ if (getPropertyName(prop)) {
+ insertEditorInProperty(prop);
}
}
}
var init = function () {
+ // Insert an editor into all TEXT properties of the entity which is
+ // being edited.
document.body.addEventListener(edit_mode.start_edit.type, (e) => {
console.log('Replacing text areas ...');
- ext_editmode_wysiwyg_text.replaceTextAreas();
+ ext_editmode_wysiwyg_text.replaceTextAreas(e.target);
+ }, true);
+
+ // Listen to added properties and replace the textarea if necessary
+ document.body.addEventListener(edit_mode.property_added.type, (e) => {
+ console.log('Replacing textarea in ' + getPropertyName(e.target));
+ ext_editmode_wysiwyg_text.insertEditorInProperty(e.target);
+ }, true)
+
+ // Listen to properties, the data type of which has changed. Mainly
+ // because of change from list to scalar and vice versa.
+ document.body.addEventListener(edit_mode.property_data_type_changed.type, (e) => {
+ console.log('Re-rendering ' + getPropertyName(e.target));
+ ext_editmode_wysiwyg_text.insertEditorInProperty(e.target);
}, true);
};
return {
init: init,
replaceTextAreas: replaceTextAreas,
+ insertEditorInProperty: insertEditorInProperty,
};
-}($, log.getLogger("ext_editmode_wysiwyg_text"), ClassicEditor, edit_mode);
+}($, log.getLogger("ext_editmode_wysiwyg_text"), ClassicEditor, edit_mode, getPropertyElements, getPropertyDatatype, getPropertyName);
$(document).ready(() => {
if ("${BUILD_MODULE_EXT_EDITMODE_WYSIWYG_TEXT}" == "ENABLED") {
--
GitLab