https://github.com/jhund/re-frame-and-reagent-and-slatejs
This repo shows how to integrate the slatejs editor into a re-frame (and reagent) clojurescript app
https://github.com/jhund/re-frame-and-reagent-and-slatejs
clojurescript example-code re-frame reagent slatejs
Last synced: 15 days ago
JSON representation
This repo shows how to integrate the slatejs editor into a re-frame (and reagent) clojurescript app
- Host: GitHub
- URL: https://github.com/jhund/re-frame-and-reagent-and-slatejs
- Owner: jhund
- License: mit
- Created: 2018-11-29T17:33:50.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-07-12T21:22:57.000Z (almost 6 years ago)
- Last Synced: 2025-03-30T06:41:23.601Z (about 1 month ago)
- Topics: clojurescript, example-code, re-frame, reagent, slatejs
- Language: Clojure
- Size: 4.92 MB
- Stars: 7
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# re-frame and reagent and slatejs
This repo contains example code illustrating how to integrate the slatejs editor with a re-frame (and reagent) clojurescript app.
It's an advanced use case with the following features:
* Multiple editable sections exist on the page. One can be edited at a time. Select a section to edit by clicking on its card.
* Shared toolbar, separate from the editor. Acts on the currently selected editor.
* Bold and italic formatting via toolbar or keyboard shortcuts.
* Persistence of edited text into re-frame app-db (as HTML).
* Used in production with 1K editable sections on a single page.
## Demo
You can view the [demo](https://jhund.github.io/re-frame-and-reagent-and-slatejs/index.html).
## Some notes
Integrating SlateJS into re-frame/reagent is a bit tricky for advanced uses. There are some portions that are not idiomatic re-frame/reagent. E.g., we use regular atoms to cache editor values, and the editor reference.
The code is well commented. I would start exploring at (src/cljs/rrs/ui/slatejs/views.cljs)[https://github.com/jhund/re-frame-and-reagent-and-slatejs/blob/master/src/cljs/rrs/ui/slatejs/views.cljs] where the SlateJS editor is being rendered.
npm dependencies are handled separately and included via bundle.js file. The approach follows [Tomer Weller's recipe](http://blob.tomerweller.com/reagent-import-react-components-from-npm).
## Play with the code yourself
### Figwheel
Cd into ``
```
lein clean
rlwrap lein figwheel dev
```
Figwheel will automatically push cljs changes to the browser.
Wait a bit, then browse to [http://localhost:3449](http://localhost:3449).
### npm-webpack
We use npm and webpack separately from CLJS. We isolate this in a folder named `npm-webpack`. This is required so that there is no `node_modules` folder in `` as cljs would pick it up and auto process it as module dependencies. We'd end up with those dependencies twice.
Cd into `/npm-webpack`
```
npm install
npm run watch
```
This will compile all dependencies into `resources/public/js/bundle.js`.
Include this file in `index.html`.
### Run cljfmt
`lein cljfmt check src/cljs/`
or
`lein cljfmt fix src/cljs/`
## Production Build
To compile clojurescript to javascript:
```
lein clean
lein with-profile production cljsbuild once min
```