Forward port localization value change mode changes from V23 version

src/main/java/org/vaadin/tinymce/Language.java

@@ -0,0 +1,41 @@
+package org.vaadin.tinymce;
+
+public enum Language {
+    //@formatter:off
+    ENGLISH(""),
+    NORWEGIAN("nb_NO"),
+    FINNISH("fi"),
+    GERMAN("de"),
+    SWEDISH("sv_SE"),
+    PORTUGESE("pt_PT"),
+    POLISH("pl"),
+    DUTCH("nl"),
+    ESTONIAN("et"),
+    SERBIAN("sr"),
+    SPANISH("es"),
+    SLOVENIAN("sl_SI"),
+    BULGARIAN("bg_BG"),
+    FRENCH("fr_FR"),
+    ROMANIAN("ro"),
+    LATVIAN("lt"),
+    LITHUANIAN("li"),
+    RUSSIAN("ru"),
+    UKRANIAN("uk"),
+    SLOVAK("sk"),
+    TURKISH("tr"),
+    DANISH("da"),
+    CROATIAN("hr"),
+    ITALIAN("it");
+    //@formatter:on
+
+    public final String language;
+
+    private Language(String language) {
+        this.language = language;
+    }
+
+    @Override
+    public String toString() {
+        return language;
+    }
+}

src/main/java/org/vaadin/tinymce/TinyMce.java

@@ -64,7 +64,7 @@ public class TinyMce extends AbstractCompositeField<Div, TinyMce, String>
     JsonObject config = Json.createObject();
     private Element ta = new Element("div");
 
-    private int debounceTimeout = 5000;
+    private int debounceTimeout = 0;
     private boolean basicTinyMCECreated;
     private boolean enabled = true;
     private boolean readOnly = false;
@@ -106,15 +106,53 @@ public TinyMce(boolean shadowRoot) {
         domListenerRegistration.debounce(debounceTimeout);
     }
 
+
     /**
-     * Sets the debounce timeout for the value change event. The default is
-     * 5000.
-     * 
+     * Define the mode of value change triggering. BLUR: Value is triggered only
+     * when TinyMce loses focus, TIMEOUT: TinyMce will send value change eagerly
+     * but debounced with timeout, CHANGE: value change is sent when TinyMce
+     * emits change event (e.g. enter, tab)
+     *
+     * @see setDebounceTimeout(int)
+     * @param mode
+     *            The mode.
+     */
+    public void setValueChangeMode(ValueChangeMode mode) {
+        if (mode == ValueChangeMode.BLUR) {
+            runBeforeClientResponse(ui -> {
+                getElement().callJsFunction("$connector.setMode", "blur");
+            });
+        } else if (mode == ValueChangeMode.TIMEOUT) {
+            runBeforeClientResponse(ui -> {
+                getElement().callJsFunction("$connector.setMode", "timeout");
+            });
+        } else if (mode == ValueChangeMode.CHANGE) {
+            runBeforeClientResponse(ui -> {
+                getElement().callJsFunction("$connector.setMode", "change");
+            });
+        }
+    }
+
+    /**
+     * Sets the debounce timeout for the value change event. The default is 0,
+     * when value change is triggered on blur and enter key presses. When value
+     * is more than 0 the value change is emitted with delay of given timeout
+     * milliseconds after last keystroke.
+     *
+     * @see setValueChangeMode(ValueChangeMode)
      * @param debounceTimeout
      *            the debounce timeout in milliseconds
      */
     public void setDebounceTimeout(int debounceTimeout) {
-        this.debounceTimeout = debounceTimeout;
+        if (debounceTimeout > 0) {
+            runBeforeClientResponse(ui -> {
+                getElement().callJsFunction("$connector.setEager", "timeout");
+            });
+        } else {
+            runBeforeClientResponse(ui -> {
+                getElement().callJsFunction("$connector.setEager", "change");
+            });
+        }
         domListenerRegistration.debounce(debounceTimeout);
     }
 
@@ -141,10 +179,11 @@ protected void onAttach(AttachEvent attachEvent) {
             id = UUID.randomUUID().toString();
             ta.setAttribute("id", id);
         }
-        if(!getEventBus().hasListener(BlurEvent.class)) {
+        if (!getEventBus().hasListener(BlurEvent.class)) {
             // adding fake blur listener so throttled value
             // change events happen by latest at blur
-            addBlurListener(e -> {});
+            addBlurListener(e -> {
+            });
         }
         if (!attachEvent.isInitialAttach()) {
             // Value after initial attach should be set via TinyMCE JavaScript
@@ -160,10 +199,10 @@ protected void onAttach(AttachEvent attachEvent) {
     @Override
     protected void onDetach(DetachEvent detachEvent) {
         // See https://github.com/parttio/tinymce-for-flow/issues/33
-        if(isVisible()) {
+        if (isVisible()) {
             detachEvent.getUI().getPage().executeJs("""
-                tinymce.get($0).remove();
-                """, id);
+                    tinymce.get($0).remove();
+                    """, id);
         }
         super.onDetach(detachEvent);
         initialContentSent = false;
@@ -220,6 +259,11 @@ public TinyMce configure(String configurationKey, double value) {
         return this;
     }
 
+    public TinyMce configureLanguage(Language language) {
+        config.put("language", language.toString());
+        return this;
+    }
+
     /**
      * Replaces text in the editors selection (can be just a caret position).
      *
@@ -244,20 +288,20 @@ protected void injectTinyMceScript() {
 
     @Override
     public void focus() {
-        runBeforeClientResponse(
-                ui -> {
-                    // Dialog has timing issues...
-                    getElement().executeJs("""
-                        const el = this;
-                        if(el.$connector.isInDialog()) {
-                            setTimeout(() => {
-                                el.$connector.focus()
-                            }, 150);
-                        } else {
-                            el.$connetor.focus();
-                        }
-                        """);
-                ;});
+        runBeforeClientResponse(ui -> {
+            // Dialog has timing issues...
+            getElement().executeJs("""
+                    const el = this;
+                    if(el.$connector.isInDialog()) {
+                        setTimeout(() => {
+                            el.$connector.focus()
+                        }, 150);
+                    } else {
+                        el.$connetor.focus();
+                    }
+                    """);
+            ;
+        });
     }
 
     @Override
@@ -359,7 +403,8 @@ public TinyMce configureMenubar(boolean basicTinyMCE, Menubar... menubars) {
             createBasicTinyMce();
         }
 
-        String newconfig  = Arrays.stream(menubars).map(m -> m.menubarLabel).collect(Collectors.joining(" "));
+        String newconfig = Arrays.stream(menubars).map(m -> m.menubarLabel)
+                .collect(Collectors.joining(" "));
 
         String menubar;
         if (config.hasKey("menubar")) {

src/main/java/org/vaadin/tinymce/ValueChangeMode.java

@@ -0,0 +1,5 @@
+package org.vaadin.tinymce;
+
+public enum ValueChangeMode {
+    CHANGE, BLUR, TIMEOUT
+}

src/main/resources/META-INF/resources/frontend/tinymceConnector.js

@@ -2,6 +2,7 @@ window.Vaadin.Flow.tinymceConnector = {
     initLazy: function (customConfig, c, ta, options, initialContent, enabled) {
 		var currentValue = ta.innerHTML;
         var readonlyTimeout;
+        var changeMode = 'change';
 
         // Check whether the connector was already initialized
         if (c.$connector) {
@@ -36,7 +37,11 @@ window.Vaadin.Flow.tinymceConnector = {
               }, 20);
             },
 
-            isInDialog: function() {
+            setMode : function(newChangeMode) {
+              changeMode = newChangeMode;
+            },
+
+			isInDialog: function() {
                 let inDialog = false;
                 let parent = c.parentElement;
                 while(parent != null) {
@@ -94,27 +99,30 @@ window.Vaadin.Flow.tinymceConnector = {
             });
 
             ed.on('change', function(e) {
-                // console.log("TMCE change");
+			  if (changeMode === 'timeout') {
                 const event = new Event("tchange");
                 event.htmlString = ed.getContent();
                 c.dispatchEvent(event);
+              }
             });
             ed.on('blur', function(e) {
-            //console.log("TMCE blur");
-            const event = new Event("tblur");
-            c.dispatchEvent(event);
+              const blurEvent = new Event("tblur");
+              c.dispatchEvent(blurEvent);
+              const changeEvent = new Event("tchange");
+              changeEvent.htmlString = ed.getContent();
+              c.dispatchEvent(changeEvent);
             });
             ed.on('focus', function(e) {
-            //console.log("TMCE focus");
-            const event = new Event("tfocus");
-            c.dispatchEvent(event);
+              const event = new Event("tfocus");
+              c.dispatchEvent(event);
             });
 
             ed.on('input', function(e) {
-            //console.log("TMCE input");
-            const event = new Event("tchange");
-            event.htmlString = ed.getContent();
-            c.dispatchEvent(event);
+              if (changeMode === 'timeout') {
+                const event = new Event("tchange");
+                event.htmlString = ed.getContent();
+                c.dispatchEvent(event);
+              }
             });
 
         };