RichText form components

8 files changed, 157 insertions, 16 deletions

diff --git a/src/main/assets/css/style.css b/src/main/assets/css/style.css
index 61696cb2..fbb29c37 100644
--- a/src/main/assets/css/style.css
+++ b/src/main/assets/css/style.css
@@ -52,3 +52,11 @@
   background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAICAQAAADdTl4aAAAAIElEQVQoz2MwrTD9TxFsZ7jPcV+IIsjFQAUw6hFqegQA+xzRHT2p7pEAAAAASUVORK5CYII=') center center no-repeat #cecece;
   cursor: row-resize;
 }
+
+.trix-control {
+  overflow-y: auto;
+}
+
+trix-toolbar .trix-button-group {
+  margin-bottom: 3px;
+}
diff --git a/src/main/kotlin/pl/treksoft/kvision/Showcase.kt b/src/main/kotlin/pl/treksoft/kvision/Showcase.kt
index b6444720..084b60d6 100644
--- a/src/main/kotlin/pl/treksoft/kvision/Showcase.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/Showcase.kt
@@ -7,19 +7,20 @@ import pl.treksoft.kvision.data.DataComponent
 import pl.treksoft.kvision.data.DataContainer
 import pl.treksoft.kvision.dropdown.DD.*
 import pl.treksoft.kvision.dropdown.DropDown
-import pl.treksoft.kvision.form.check.CheckBox
 import pl.treksoft.kvision.form.INPUTSIZE
-import pl.treksoft.kvision.form.text.TEXTINPUTTYPE
-import pl.treksoft.kvision.form.text.Text
-import pl.treksoft.kvision.form.text.TextArea
-import pl.treksoft.kvision.form.text.TextAreaInput
-import pl.treksoft.kvision.form.text.TextInput
+import pl.treksoft.kvision.form.check.CheckBox
 import pl.treksoft.kvision.form.select.AjaxOptions
 import pl.treksoft.kvision.form.select.SELECTWIDTHTYPE
 import pl.treksoft.kvision.form.select.Select
 import pl.treksoft.kvision.form.select.SelectInput
 import pl.treksoft.kvision.form.select.SelectOptGroup
 import pl.treksoft.kvision.form.select.SelectOption
+import pl.treksoft.kvision.form.text.RichText
+import pl.treksoft.kvision.form.text.TEXTINPUTTYPE
+import pl.treksoft.kvision.form.text.Text
+import pl.treksoft.kvision.form.text.TextArea
+import pl.treksoft.kvision.form.text.TextAreaInput
+import pl.treksoft.kvision.form.text.TextInput
 import pl.treksoft.kvision.html.*
 import pl.treksoft.kvision.html.TAG.DIV
 import pl.treksoft.kvision.html.TAG.H1
@@ -217,6 +218,25 @@ class Showcase : ApplicationBase() {
         }
         root.add(mbuttons8)
 
+        val htmlArea = RichText("test<b>Boldzik</b>", "Pole html").apply {
+            size = INPUTSIZE.SMALL
+            placeholder = "Wprowadź rich text"
+            width = 50.perc()
+            inputHeight = 200.px()
+        }
+        root.add(htmlArea)
+        htmlArea.setEventListener<RichText> {
+            change = {
+                console.log(self.value)
+            }
+        }
+        val mbuttons9 = Button("Sprawdz html").setEventListener<Button> {
+            click = {
+                println(htmlArea.value)
+            }
+        }
+        root.add(mbuttons9)
+
         val container = SimplePanel(setOf("abc", "def"))
         val h1 = Tag(H1, "To jest <i>test pisania</i> tekstu", false, null, classes = setOf("test", "test2"))
         container.add(h1)
@@ -482,6 +502,11 @@ class Showcase : ApplicationBase() {
                 } else {
                     split.show()
                 }
+                if (htmlArea.visible) {
+                    htmlArea.hide()
+                } else {
+                    htmlArea.show()
+                }
             }
         }
         root.add(button)
diff --git a/src/main/kotlin/pl/treksoft/kvision/core/KVManager.kt b/src/main/kotlin/pl/treksoft/kvision/core/KVManager.kt
index 541733b3..e3c34190 100644
--- a/src/main/kotlin/pl/treksoft/kvision/core/KVManager.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/core/KVManager.kt
@@ -27,6 +27,8 @@ object KVManager {
     private val bootstrapSelectAjaxCss = require("ajax-bootstrap-select/dist/css/ajax-bootstrap-select.min.css")
     private val bootstrapSelectAjax = require("ajax-bootstrap-select/dist/js/ajax-bootstrap-select.min.js")
     private val bootstrapSelectAjaxI18n = require("./js/ajax-bootstrap-select.pl-PL.js")
+    private val trixCss = require("trix/dist/trix.css")
+    private val trix = require("trix")
 
     private val sdPatch = Snabbdom.init(arrayOf(classModule, attributesModule, propsModule, styleModule,
             eventListenersModule, datasetModule))
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/text/AbstractTextInput.kt b/src/main/kotlin/pl/treksoft/kvision/form/text/AbstractTextInput.kt
index 09d9ec50..a71a84a5 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/text/AbstractTextInput.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/text/AbstractTextInput.kt
@@ -7,17 +7,12 @@ import pl.treksoft.kvision.snabbdom.StringBoolPair
 import pl.treksoft.kvision.snabbdom.StringPair
 
 abstract class AbstractTextInput(value: String? = null,
-                                 classes: Set<String> = setOf()) : Widget(classes + "form-control"), StringFormField {
+                                 classes: Set<String> = setOf()) : Widget(classes), StringFormField {
 
     init {
         this.setInternalEventListener<AbstractTextInput> {
             input = {
-                val v = getElementJQuery()?.`val`() as String?
-                if (v != null && v.isNotEmpty()) {
-                    self.value = v
-                } else {
-                    self.value = null
-                }
+                self.changeValue()
             }
         }
     }
@@ -105,9 +100,18 @@ abstract class AbstractTextInput(value: String? = null,
         return sn
     }
 
-    private fun refreshState() {
+    protected open fun refreshState() {
         value?.let {
             getElementJQuery()?.`val`(it)
         } ?: getElementJQueryD()?.`val`(null)
     }
+
+    protected open fun changeValue() {
+        val v = getElementJQuery()?.`val`() as String?
+        if (v != null && v.isNotEmpty()) {
+            this.value = v
+        } else {
+            this.value = null
+        }
+    }
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/text/RichText.kt b/src/main/kotlin/pl/treksoft/kvision/form/text/RichText.kt
new file mode 100644
index 00000000..b963b4ea
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/form/text/RichText.kt
@@ -0,0 +1,19 @@
+package pl.treksoft.kvision.form.text
+
+open class RichText(value: String? = null,
+                    label: String? = null, rich: Boolean = false) : AbstractText(label, rich) {
+
+    var inputHeight
+        get() = input.height
+        set(value) {
+            input.height = value
+        }
+
+    final override val input: RichTextInput = RichTextInput(value).apply { id = idc }
+
+    init {
+        @Suppress("LeakingThis")
+        input.eventTarget = this
+        this.addInternal(input)
+    }
+}
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/text/RichTextInput.kt b/src/main/kotlin/pl/treksoft/kvision/form/text/RichTextInput.kt
new file mode 100644
index 00000000..5f791c94
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/form/text/RichTextInput.kt
@@ -0,0 +1,83 @@
+package pl.treksoft.kvision.form.text
+
+import com.github.snabbdom.VNode
+import pl.treksoft.jquery.jQuery
+import pl.treksoft.kvision.snabbdom.StringPair
+import kotlin.browser.document
+
+open class RichTextInput(value: String? = null, classes: Set<String> = setOf()) :
+        AbstractTextInput(value, classes + "form-control" + "trix-control") {
+
+    private var trixId: String? = null
+
+    override fun render(): VNode {
+        return kvh("trix-editor")
+    }
+
+    override fun getSnAttrs(): List<StringPair> {
+        val sn = super.getSnAttrs().toMutableList()
+        placeholder?.let {
+            sn.add("placeholder" to it)
+        }
+        name?.let {
+            sn.add("name" to it)
+        }
+        autofocus?.let {
+            if (it) {
+                sn.add("autofocus" to "autofocus")
+            }
+        }
+        if (disabled) {
+            sn.add("disabled" to "true")
+        }
+        return sn
+    }
+
+    @Suppress("UnsafeCastFromDynamic")
+    override fun afterInsert(node: VNode) {
+        if (this.disabled || this.readonly == true) {
+            this.getElementJQuery()?.removeAttr("contenteditable")
+        } else {
+            this.getElementJQuery()?.on("trix-change", { _, _ ->
+                if (trixId != null) {
+                    val v = document.getElementById("trix-input-" + trixId)?.let { jQuery(it).`val`() as String? }
+                    value = if (v != null && v.isNotEmpty()) {
+                        v
+                    } else {
+                        null
+                    }
+                    val event = org.w3c.dom.events.Event("change")
+                    this.getElement()?.dispatchEvent(event)
+                }
+            })
+        }
+        this.getElementJQuery()?.on("trix-initialize", { _, _ ->
+            trixId = this.getElementJQuery()?.attr("trix-id")
+            value?.let {
+                this.getElement().asDynamic().editor.loadHTML(it)
+            }
+        })
+        this.getElementJQuery()?.on("trix-file-accept", { e, _ -> e.preventDefault() })
+    }
+
+    override fun afterDestroy() {
+        document.getElementById("trix-input-" + trixId)?.remove()
+        document.getElementById("trix-toolbar-" + trixId)?.remove()
+        trixId = null
+    }
+
+    @Suppress("UnsafeCastFromDynamic")
+    override fun refreshState() {
+        val v = document.getElementById("trix-input-" + trixId)?.let { jQuery(it).`val`() as String? }
+        if (value != v) {
+            val editor = this.getElement().asDynamic().editor
+            value?.let {
+                editor.loadHTML(it)
+            } ?: editor.loadHTML("")
+        }
+    }
+
+    override fun changeValue() {
+        // disabled parent class functionality
+    }
+}
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/text/TextAreaInput.kt b/src/main/kotlin/pl/treksoft/kvision/form/text/TextAreaInput.kt
index e8fd9a43..2b5ff31d 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/text/TextAreaInput.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/text/TextAreaInput.kt
@@ -4,7 +4,7 @@ import com.github.snabbdom.VNode
 import pl.treksoft.kvision.snabbdom.StringPair
 
 open class TextAreaInput(cols: Int? = null, rows: Int? = null, value: String? = null, classes: Set<String> = setOf()) :
-        AbstractTextInput(value, classes) {
+        AbstractTextInput(value, classes + "form-control") {
 
     var cols: Int? = cols
         set(value) {
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/text/TextInput.kt b/src/main/kotlin/pl/treksoft/kvision/form/text/TextInput.kt
index 436c0fec..3cd86e04 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/text/TextInput.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/text/TextInput.kt
@@ -9,7 +9,7 @@ enum class TEXTINPUTTYPE(val type: String) {
 }
 
 open class TextInput(type: TEXTINPUTTYPE = TEXTINPUTTYPE.TEXT, value: String? = null, classes: Set<String> = setOf()) :
-        AbstractTextInput(value, classes) {
+        AbstractTextInput(value, classes + "form-control") {
 
     var type: TEXTINPUTTYPE = type
         set(value) {