Skip to content

Commit 1089961

Browse files
authored
Added quick first pass at adding basic usage docs.
1 parent 1408fc5 commit 1089961

1 file changed

Lines changed: 78 additions & 1 deletion

File tree

README.md

Lines changed: 78 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,79 @@
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.

0 commit comments

Comments
 (0)