diff --git a/src/core/js/edit_mode.js b/src/core/js/edit_mode.js index 1c72d1ce9677e556f74cc8402080c3991f91b415..d1b922c413e13072a3d2a9cb5079aa1dda27a110 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 07f9117d1365de5213d63cb287feb36804f9aee0..e9736c4197a62a8f18b6540ff2963d95d428e5ba 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") {