File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change 11# re-codemirror
2- A reagent component that wraps CodeMirror
2+ A reagent component that wraps [ CodeMirror] ( https://codemirror.net/ ) and provides entry points for a reactive state manager.
3+
4+ ## Usage
5+ To use ` re-codemirror ` add the git dependency to your project and use the latest sha release.
6+
7+ ### Basic
8+
9+ ``` clojure
10+ (ns ...
11+ (require [re-codemirror.core :as re-cm]))
12+
13+ ; ; Reagent Component
14+ (defn editor
15+ []
16+ [re-cm/codemirror
17+ {:lineNumbers true }
18+ {:name " form-input" }])
19+ ```
20+
21+ ### Mode
22+
23+ ``` clojure
24+ (ns ...
25+ (require ...
26+ [cljsjs.codemirror.mode.clojure]))
27+
28+ ; ; CodeMirror component
29+ (defn clojure-editor
30+ []
31+ [re-cm/codemirror
32+ {:mode " clojure" }
33+ {:name " form-input}])
34+ ```
35+
36+ ### Linting
37+
38+ ```clojure
39+ (ns ...
40+ (require ...
41+ [cljsjs.codemirror.mode.javascript]
42+ [cljsjs.codemirror.addon.lint.javascript-lint]))
43+
44+ ;; CodeMirror component
45+ (defn javascript-editor
46+ []
47+ [re-cm/codemirror
48+ {:mode " javascript"
49+ :gutters [" CodeMirror-link-markers" ]
50+ :lint true}
51+ {:name " form-input" }])
52+ ```
53+
54+ ### Reactive Statement Management
55+
56+ Manage state through [re-frame](https://github.com/yetanalytics/re-frame).
57+
58+ ```clojure
59+ (ns ...
60+ (require ...
61+ [re-frame.core :refer [subscribe dispatch]]))
62+
63+ ;; CodeMirror component
64+ (defn re-frame-editor
65+ [sub-key dis-key]
66+ [re-cm/codemirror
67+ {}
68+ {:name " form-input"
69+ ;; subscribe to re-frame and get a possible text value
70+ :value @(subscribe [sub-key])
71+ ;; This supports a simple use case of just catching when the text value changes.
72+ ;; Update the full text value from the .getValue function from CodeMirror
73+ ;; Any event can be added that is supported through CodeMirror in the map
74+ ;; " name" (callback-fn ...)
75+ :events {" change" (fn [this [code-mirror-obj change-obj]]
76+ (dispatch [dis-key (.getValue code-mirror-obj)]))}}])
77+ ```
78+
79+ You can also manage state through any other library of your choice.
You can’t perform that action at this time.
0 commit comments