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.
You can view the demo.
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.
Play with the code yourself
lein clean rlwrap lein figwheel dev
Figwheel will automatically push cljs changes to the browser.
Wait a bit, then browse to http://localhost:3449.
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
<app_root> as cljs would pick it up and auto process it as module dependencies. We'd end up with those dependencies twice.
npm install npm run watch
This will compile all dependencies into
Include this file in
lein cljfmt check src/cljs/
lein cljfmt fix src/cljs/
lein clean lein with-profile production cljsbuild once min