RichText form components

5 files changed, 116 insertions, 10 deletions

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) {