A branch and start towards #31

Author: mstahv

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

@@ -20,6 +20,7 @@
 import com.vaadin.flow.component.ComponentEventListener;
 import com.vaadin.flow.component.DetachEvent;
 import com.vaadin.flow.component.Focusable;
+import com.vaadin.flow.component.HasLabel;
 import com.vaadin.flow.component.HasSize;
 import com.vaadin.flow.component.Tag;
 import com.vaadin.flow.component.UI;
@@ -52,7 +53,7 @@
 @JavaScript("context://frontend/tinymceConnector.js")
 @StyleSheet("context://frontend/tinymceLumo.css")
 public class TinyMce extends AbstractCompositeField<Div, TinyMce, String>
-        implements HasSize, Focusable<TinyMce> {
+        implements HasSize, Focusable<TinyMce>, HasLabel {
 
     private final DomListenerRegistration domListenerRegistration;
     private String id;

src/main/resources/META-INF/resources/frontend/tinymceLumo.css

@@ -147,4 +147,34 @@ div.tox-collection__item > div.tox-collection__item-icon {
 
 .tinymce-flow[disabled]:not([readonly]) {
   opacity: 0.5;
-}
+}
+
+tinymce-flow label {
+	align-self: flex-start;
+    color: var(--lumo-secondary-text-color);
+	font-weight: 500;
+	font-size: var(--lumo-font-size-s);
+	transition: color 0.2s;
+	line-height: 1;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	position: relative;
+	max-width: 100%;
+	box-sizing: border-box;
+    padding-right: 1em;
+    padding-bottom: 0.5em;
+    margin-left: calc(var(--lumo-border-radius-m) / 4);
+}
+
+.tinymce-flow label::after {
+    content: var(--lumo-required-field-indicator, "\2022");
+    transition: opacity 0.2s;
+    opacity: var(--tcs-required-dot-opacity);
+    color: var(--lumo-primary-text-color);
+    right: 0;
+    width: 1em;
+    margin-left: 4px;
+    text-align: center;
+}
+

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

@@ -0,0 +1,56 @@
+package org.vaadin.tinymce;
+
+import com.vaadin.flow.component.Key;
+import com.vaadin.flow.component.KeyModifier;
+import com.vaadin.flow.component.button.Button;
+import com.vaadin.flow.component.formlayout.FormLayout;
+import com.vaadin.flow.component.html.Div;
+import com.vaadin.flow.component.html.H5;
+import com.vaadin.flow.component.notification.Notification;
+import com.vaadin.flow.component.orderedlayout.VerticalLayout;
+import com.vaadin.flow.component.textfield.TextField;
+import com.vaadin.flow.router.Route;
+import org.vaadin.firitin.components.RichText;
+
+@Route
+public class FormAndFeatures extends FormLayout {
+
+
+    protected TinyMce tinyMce;
+
+    public FormAndFeatures() {
+
+        tinyMce = new TinyMce();
+        tinyMce.setLabel("Label for RTE");
+        // TODO tinyMce.setRequired(true);
+        tinyMce.setRequiredIndicatorVisible(true);
+        tinyMce.setValue("<p>Voi <strong>jorma</strong>!<p>");
+        tinyMce.setHeight("400px");
+        
+        add(tinyMce);
+
+        TextField textField = new TextField("Normal text field");
+        textField.setValue("This is here for a reference...");
+        textField.setRequired(true);
+        add(textField);
+
+        Button b = new Button("Set content dynamically", e -> {
+            tinyMce.setValue("New value");
+        });
+        add(b);
+
+        Button b2 = new Button("Show content", e -> {
+
+            var n = new Notification("", 3000);
+            n.add(new VerticalLayout(
+                    new H5("New value:"),
+                    new RichText(tinyMce.getCurrentValue())
+                    )
+            );
+            n.open();
+        });
+        add(b2);
+
+    }
+
+}