Sync html content right after insertion has happened

Also added disclaimers for the functionality.

Fixes #40

Author: mstahv

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

@@ -272,6 +272,12 @@ public TinyMce configureLanguage(Language language) {
 
     /**
      * Replaces text in the editors selection (can be just a caret position).
+     * <p>
+     *     Note, that this updates the value on the client-side on the next round-trip,
+     *     so the value on the server side is not necessarily up-to-date, right after this
+     *     call, but will be synced soon and a value change event will be fired after a
+     *     small timeout.
+     * </p>
      *
      * @param htmlString
      *            the html snippet to be inserted

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

@@ -13,7 +13,13 @@ window.Vaadin.Flow.tinymceConnector = {
         };
 
         window.removeEventListener("beforeunload", beforeUnloadHandler);
- 
+
+        const syncValue = () => {
+            const event = new Event("tchange");
+            event.htmlString = c.$connector.editor.getContent();
+            c.dispatchEvent(event);
+        }
+
         // Check whether the connector was already initialized
         if (c.$connector) {
             // If connector was already set, this is re-attach, remove editor
@@ -33,6 +39,7 @@ window.Vaadin.Flow.tinymceConnector = {
 
             replaceSelectionContent : function(html) {
               this.editor.selection.setContent(html);
+              syncValue();
             },
 
             focus : function() {
@@ -122,17 +129,13 @@ window.Vaadin.Flow.tinymceConnector = {
 
             ed.on('change', function(e) {
 			  if (changeMode === 'timeout') {
-                const event = new Event("tchange");
-                event.htmlString = ed.getContent();
-                c.dispatchEvent(event);
+			    syncValue();
               }
             });
             ed.on('blur', function(e) {
               const blurEvent = new Event("tblur");
               c.dispatchEvent(blurEvent);
-              const changeEvent = new Event("tchange");
-              changeEvent.htmlString = ed.getContent();
-              c.dispatchEvent(changeEvent);
+              syncValue();
             });
             ed.on('focus', function(e) {
               const event = new Event("tfocus");
@@ -141,9 +144,7 @@ window.Vaadin.Flow.tinymceConnector = {
 
             ed.on('input', function(e) {
               if (changeMode === 'timeout') {
-                const event = new Event("tchange");
-                event.htmlString = ed.getContent();
-                c.dispatchEvent(event);
+                syncValue();
               }
             });
 

src/test/java/org/vaadin/tinymce/ReplaceSelectionContent.java

@@ -1,13 +1,12 @@
 package org.vaadin.tinymce;
 
-import java.time.LocalDateTime;
-
-import org.vaadin.tinymce.TinyMce;
-
 import com.vaadin.flow.component.button.Button;
+import com.vaadin.flow.component.notification.Notification;
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
 import com.vaadin.flow.router.Route;
 
+import java.time.LocalDateTime;
+
 @Route
 public class ReplaceSelectionContent extends VerticalLayout {
 
@@ -22,11 +21,21 @@ public ReplaceSelectionContent() {
     		String now = LocalDateTime.now().toString();
 
     		editor.replaceSelectionContent(now);
-    		
-    	});
+
+			// Note, this is not up to date yet as the replacement happens on the client side
+			String value = editor.getValue();
+		});
+
+		editor.addValueChangeListener(e -> {
+			Notification.show("ValueChange event: " + e.getValue());
+			System.out.println(e.getValue());
+		});
 
     	add(editor, insertCurrentTime);
-    	
+
+		add(new Button("Show value", e -> {
+			Notification.show(editor.getValue());
+		}));
 
     }
 }