set wysiwyg editor to readonly mode when disabled or readonly attribute is set and let ir react to dynamic changes of these attributes, fixes #4979

Closes #4979

Merge request studip/studip!3738

1 files changed, 26 insertions, 0 deletions

diff --git a/resources/assets/javascripts/lib/wysiwyg.js b/resources/assets/javascripts/lib/wysiwyg.js
index 09ad477..1cc90e0 100644
--- a/resources/assets/javascripts/lib/wysiwyg.js
+++ b/resources/assets/javascripts/lib/wysiwyg.js
@@ -39,6 +39,27 @@ const wysiwyg = {
 
 export default wysiwyg;
 
+const observeTextarea = (() => {
+    const observer = new MutationObserver(mutations => {
+        mutations.forEach(mutation => {
+            const editor = getEditor(mutation.target);
+            const disabledFromAttributes = mutation.target.matches('[readonly],[disabled]');
+            const disabledFromEditor = editor.isReadOnly;
+
+            if (disabledFromAttributes && !disabledFromEditor) {
+                editor.enableReadOnlyMode('studip');
+            } else if (!disabledFromAttributes && disabledFromEditor) {
+                editor.disableReadOnlyMode('studip');
+            }
+        });
+    });
+
+    return textarea => observer.observe(textarea, {
+        attributes: true,
+        attributeFilter: ['disabled', 'readonly'],
+    });
+})();
+
 async function replaceTextarea(textarea) {
     if (hasEditor(textarea)) {
         return getEditor(textarea);
@@ -54,6 +75,11 @@ async function replaceTextarea(textarea) {
     const editor = await createEditor(chunk, textarea, editorType, options);
     enhanceEditor($textarea, editor);
 
+    if ($textarea[0].matches('[readonly],[disabled]')) {
+        editor.enableReadOnlyMode('studip');
+    }
+    observeTextarea($textarea[0]);
+
     setEditor(textarea, editor);
     $textarea.trigger('load.wysiwyg');