fix: Revert unnecessary enabled check. Fix readonly and disabled styles.

parttio · Jan 10, 2024 · f454d3c · f454d3c
1 parent ad24a86
commit f454d3c
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git a/src/main/java/org/vaadin/tinymce/TinyMce.java b/src/main/java/org/vaadin/tinymce/TinyMce.java
@@ -80,6 +80,7 @@ public TinyMce(boolean shadowRoot) {
         } else {
             getElement().appendChild(ta);
         }
+        getElement().getClassList().add("tinymce-flow");
     }
 
     public TinyMce() {
@@ -141,10 +142,8 @@ void runBeforeClientResponse(SerializableConsumer<UI> command) {
 
     @ClientCallable
     private void updateValue(String htmlString) {
-        if (this.isEnabled() && !this.isReadOnly()) {
-            this.currentValue = htmlString;
-            setModelValue(htmlString, true);
-        }
+        this.currentValue = htmlString;
+        setModelValue(htmlString, true);
     }
 
     public String getCurrentValue() {
@@ -207,6 +206,11 @@ public void setEnabled(boolean enabled) {
     public void setReadOnly(boolean readOnly) {
         super.setReadOnly(readOnly);
         setEnabled(!readOnly);
+        if (readOnly) {
+            getElement().setAttribute("readonly", "");
+        } else {
+            getElement().removeAttribute("readonly");
+        }
     }
 
     @Override

diff --git a/src/main/resources/META-INF/resources/frontend/tinymceLumo.css b/src/main/resources/META-INF/resources/frontend/tinymceLumo.css
@@ -129,3 +129,11 @@ div.tox-collection__item > div.tox-collection__item-icon {
 .tox .tox-fancymenuitem .tox-insert-table-picker .tox-insert-table-picker {
   border-color: var(--lumo-contrast-20pct);
 }
+
+.tinymce-flow[readonly] .tox-editor-header {
+  display: none;
+}
+
+.tinymce-flow[disabled]:not([readonly]) {
+  opacity: 0.5;
+}
diff --git a/src/test/java/org/vaadin/tinymce/OnAttachTest.java b/src/test/java/org/vaadin/tinymce/OnAttachTest.java
@@ -45,14 +45,15 @@ public OnAttachTest() {
 
     public static class EditorView extends Composite<TinyMce> {
         private String value;
-        private TinyMce tinyMce;
 
         public EditorView(String value) {
             this.value = value;
+            getContent().setWidth("600px");
             getContent().configurePlugin(true, Plugin.TABLE).configureToolbar(true,
                     Toolbar.TABLE);
             getContent().addValueChangeListener(e -> {
                 this.value = e.getValue();
+                Notification.show(this.value);
             });
             getContent().setEnabled(false);
         }