https://github.com/yetanalytics/re-codemirror

A reagent component that wraps CodeMirror
https://github.com/yetanalytics/re-codemirror

Last synced: 8 days ago
JSON representation

A reagent component that wraps CodeMirror

• Host: GitHub
• URL: https://github.com/yetanalytics/re-codemirror
• Owner: yetanalytics
• License: apache-2.0
• Created: 2020-02-07T17:39:36.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2024-01-17T21:22:42.000Z (12 months ago)
• Last Synced: 2024-12-16T19:43:36.985Z (19 days ago)
• Language: Clojure
• Size: 12.7 KB
• Stars: 1
• Watchers: 5
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# re-codemirror

A reagent component that wraps [CodeMirror](https://codemirror.net/) and provides entry points for a reactive state manager.

## Usage

To use `re-codemirror` add the git dependency to your project and use the latest sha release.

### Basic

```clojure

(ns ...

  (require [re-codemirror.core :as re-cm]))

;; Reagent Component

(defn editor

  []

  [re-cm/codemirror

   {:lineNumbers true}

   {:name "form-input"}])

```

### Mode

```clojure

(ns ...

  (require ...

           [cljsjs.codemirror.mode.clojure]))

;; CodeMirror component

(defn clojure-editor

  []

  [re-cm/codemirror

   {:mode "clojure"}

   {:name "form-input}])

```

### Linting

```clojure

(ns ...

  (require ...

           [cljsjs.codemirror.mode.javascript]

           [cljsjs.codemirror.addon.lint.javascript-lint]))

           

;; CodeMirror component

(defn javascript-editor

  []

  [re-cm/codemirror

   {:mode    "javascript"

    :gutters ["CodeMirror-link-markers"]

    :lint    true}

   {:name "form-input"}])

```

### Reactive Statement Management

Manage state through [re-frame](https://github.com/yetanalytics/re-frame).

```clojure

(ns ...

  (require ...

           [re-frame.core :refer [subscribe dispatch]]))

;; CodeMirror component

(defn re-frame-editor

  [sub-key dis-key]

  [re-cm/codemirror

   {}

   {:name   "form-input"

    ;; subscribe to re-frame and get a possible text value

    :value  @(subscribe [sub-key])

    ;; This supports a simple use case of just catching when the text value changes.

    ;; Update the full text value from the .getValue function from CodeMirror

    ;; Any event can be added that is supported through CodeMirror in the map

    ;;    "name" (callback-fn ...)

    :events {"change" (fn [this [code-mirror-obj change-obj]]

                        (dispatch [dis-key (.getValue code-mirror-obj)]))}}])

```

You can also manage state through any other library of your choice.