add "click-to-edit" textarea component and markdown->html conversion
This commit is contained in:
parent
153fc9d390
commit
27cccf5c4f
|
@ -33,6 +33,7 @@
|
|||
[slugger "1.0.1"]
|
||||
[cheshire "5.6.1"]
|
||||
[cljsjs/chartjs "2.0.1-0"]
|
||||
[cljsjs/showdown "1.4.2-0"]
|
||||
[luminus/ring-ttl-session "0.3.1"]
|
||||
|
||||
[gered/config "0.1"]]
|
||||
|
|
|
@ -2,9 +2,11 @@
|
|||
(:require
|
||||
[clojure.string :as string]
|
||||
[reagent.core :as r]
|
||||
[cljsjs.showdown]
|
||||
[webtools.reagent.bootstrap :as bs]
|
||||
[webtools.reagent.components :as c]
|
||||
[webtools.cljs.utils :refer [->url]]))
|
||||
[webtools.cljs.utils :refer [->url]]
|
||||
[mtgcoll.client.utils :refer [get-field-value]]))
|
||||
|
||||
(defn symbol-image
|
||||
[symbol & {:keys [size]}]
|
||||
|
@ -86,4 +88,35 @@
|
|||
[:div
|
||||
components
|
||||
(if sorting-on-this?
|
||||
[c/raw-html :span (if ascending? "▲" "▼")])]]]))
|
||||
[c/raw-html :span (if ascending? "▲" "▼")])]]]))
|
||||
|
||||
(def ^:private markdown-converter (new js/showdown.Converter))
|
||||
|
||||
(defn markdown
|
||||
[s]
|
||||
[c/raw-html :span (.makeHtml markdown-converter s)])
|
||||
|
||||
(defn click-to-edit-textarea
|
||||
[value & [{:keys [placeholder rows on-update render]}]]
|
||||
(let [editing? (r/atom false)
|
||||
current-value (r/atom value)]
|
||||
(fn [value & [{:keys [placeholder rows]}]]
|
||||
[bs/FormGroup
|
||||
(if-not @editing?
|
||||
[bs/FormControl.Static
|
||||
{:on-mouse-down #(reset! editing? true)}
|
||||
(let [content (or @current-value placeholder)]
|
||||
(if render
|
||||
(render content)
|
||||
content))]
|
||||
[bs/FormControl
|
||||
{:component-class "textarea"
|
||||
:ref #(if % (.focus (r/dom-node %)))
|
||||
:rows rows
|
||||
:default-value @current-value
|
||||
:placeholder placeholder
|
||||
:on-blur (fn [_]
|
||||
(let [value (string/trim (str @current-value))]
|
||||
(reset! editing? false)
|
||||
(if on-update (on-update (if (string/blank? value) nil value)))))
|
||||
:on-change #(reset! current-value (get-field-value %))}])])))
|
Loading…
Reference in a new issue