Skip to content
This repo shows how to integrate the slatejs editor into a re-frame (and reagent) clojurescript app
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
npm-webpack
resources/public
src
.gitignore
LICENSE
README.md
project.clj
proof_of_existence.md

README.md

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.

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.

Play with the code yourself

Figwheel

Cd into <app_root>

lein clean
rlwrap lein figwheel dev

Figwheel will automatically push cljs changes to the browser.

Wait a bit, then browse to 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 <app_root> as cljs would pick it up and auto process it as module dependencies. We'd end up with those dependencies twice.

Cd into <app_root>/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
You can’t perform that action at this time.