Skip to content

Commit

Permalink
bump
Browse files Browse the repository at this point in the history
  • Loading branch information
Asko Nõmm committed Jul 18, 2021
1 parent 3b6764e commit 0fa183a
Show file tree
Hide file tree
Showing 3 changed files with 60 additions and 8 deletions.
61 changes: 56 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Blocko is a block-based WYSIWYG editor written in ClojureScript and compiled to
```javascript
blocko.core.init({
container: '#editor',
initialContent: [],
content: [],
onChange: (content) => {
// store `content` in your database here.
}
Expand All @@ -25,13 +25,28 @@ blocko.core.init({

#### API

- `container`: any JS element that can be targeted via `querySelector`
- `container`: any DOM element that can be targeted via `querySelector`
- `content`: a JS or JSON object representing the data
- `onChange`: a callback function called when content changes

### ClojureScript

1. Add `[org.clojars.askonomm/blocko "0.1"]` to your dependencies
2. Since Blocko is using NPM packages, make sure to run it with Shadow-CLJS and add the following dependencies to your `package.json`:

```json
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/free-regular-svg-icons": "^5.15.3",
"@fortawesome/free-solid-svg-icons": "^5.15.3",
"@fortawesome/react-fontawesome": "^0.1.14",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"sanitize-html": "^2.4.0"
}
```

**Note:** I do try to constantly get rid of the reliance on third-party packages, or at the very least non-Clojars packages, so that at one point there wouldn't be any reliance on NPM and you could also include Blocko in a CLJS project that does not use Shadow-CLJS. Until then however, if you use something other than Shadow-CLJS I recommend you get the browser build instead and add that to your project.

#### Usage

Expand All @@ -50,10 +65,46 @@ blocko.core.init({
- `content`: a vector containing the data
- `on-change`: a callback function called when content changes

## Data structure

Blocko uses a very simple data structure to define the content of the editor. It's simply an array of objects, each object representing one block.

### Paragraph block

#### JSON

```json
{"id": "uuid",
"type": "paragraph",
"content": "..."}
```

#### EDN
```clojure
{:id "uuid",
:type "paragraph",
:content "..."}
```

### Heading block

```json
{"id": "uuid",
"type": "heading",
"content": "..."}
```

#### EDN
```clojure
{:id "uuid",
:type "heading",
:content "..."}
```

## Development

To develop Blocko simply run `./build.sh dev`, which will then compile to `public/js/blocko.js` a development version of Blocko that also auto-reloads as you make changes. After that is done, open `public/index.html` in your browser and have fun!
To develop Blocko simply run `./build.sh dev`, which will then compile to `public/js/blocko.js` a development version of Blocko that also auto-reloads as you make changes. After that is done, open `localhost:8000` in your browser and have fun!

Once you're done with development and want to get production version, then:
- To get the browser production build, run `./build.sh release` and check inside `dist` for a brand new `blocko.js` and a `blocko.css` file.
Once you're done with development and want to get the production version, then:
- To get the browser production build, run `./build.sh release` and check inside `dist` for a brand new `blocko.js` file.

3 changes: 2 additions & 1 deletion project.clj
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,6 @@
:plugins [[camechis/deploy-uberjar "0.3.0"]]
:license {:name "The MIT License"
:url "http://opensource.org/licenses/MIT"}
:repositories [["releases" {:url "https://clojars.org"}]]
:repositories [["releases" {:url "https://clojars.org"
:sign-releases false}]]
:uberjar-name "blocko.jar")
4 changes: 2 additions & 2 deletions src/blocko/core.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,9 @@
content)])))

(defn ^:export init [args]
(let [{:keys [container initialContent onChange]} (js->clj args :keywordize-keys true)]
(let [{:keys [container content onChange]} (js->clj args :keywordize-keys true)]
(dispatch-sync [:initialise-db])
(set-content! initialContent true)
(set-content! content true)
(rdom/render [editor onChange true] (.querySelector js/document container))))

(defn run [args]
Expand Down

0 comments on commit 0fa183a

Please sign in to comment.