Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Upstarts/editor.js-kit-ios
https://github.com/Upstarts/editor.js-kit-ios
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/Upstarts/editor.js-kit-ios
- Owner: Upstarts
- License: mit
- Created: 2019-06-24T09:54:43.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-04-18T09:15:01.000Z (7 months ago)
- Last Synced: 2024-07-08T03:01:21.825Z (4 months ago)
- Language: Swift
- Size: 1.51 MB
- Stars: 31
- Watchers: 4
- Forks: 6
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-editorjs - editor.js-kit-ios - iOS framework for parsing and rendering blocks (Libraries / Swift)
README
[](https://cocoapods.org/pods/EditorJSKit)
[](https://cocoapods.org/pods/EditorJSKit)
[](https://cocoapods.org/pods/EditorJSKit)
## About
A non-official iOS Framework for [Editor.js](https://editorjs.io) - block styled editor. It's purpose to make easy use of rendering and parsing of blocks.
Converts clean json blocks data like [this](Example/EditorJSKit/EditorJSMock.json) into native views like that 👇
#### Supported blocks
* 🎩 Header
* 🥑 Raw HTML
* 📷 Image
* 🖌 Delimiter
* 💌 Paragraph
* 🕸 Link
* 🌿 List
#### TODO's
* 📋 Table block support
* `UITableView` rendering
* Documentation on how to apply custom styles
* Documentation on how to create custom blocks
* Documentation on how to create custom renderers
## Developers note
Essentially the Kit is built on multiple levels of abstractions. It is pretty handy since it provides an ability to customize the behavior of rendering clean json data and adding custom blocks.
Note that the framework has a built-in protocol-oriented tools to implement your own adapters, renderers and custom blocks. These features are not documented yet, we're working on it.
## Usage
For now we only support blocks rendering within a `UICollectionView` out of the box. If your collection view contains only EJ blocks, use `EJCollectionViewAdapter`, it encapsulates collection's dataSource and delegate and is super easy to use.
Here's the example of `EJCollectionViewAdapter` usage:
1. Create an instance of kit:
``` swift
let kit = EJKit.shared
```
2. Decode your data to `EJBLockList` (array of json blocks):
``` swift
let blockList = try kit.decode(data: data)
```
3. Inside of your ViewController create a `collectionView`:
``` swift
lazy var collectionView = UICollectionView(frame: view.bounds, collectionViewLayout: UICollectionViewFlowLayout())
```
4. Create an adapter:
``` swift
lazy var adapter = EJCollectionViewAdapter(collectionView: collectionView)
```
5. Confirm to `EJCollectionDataSource` and return your parsed blocks in the `data` variable.
``` swift
extension ViewController: EJCollectionDataSource {
var data: EJBlocksList? { blockList }
}
```
6. Assign your `ViewController` to `adapter`'s `dataSource`
``` swift
override func viewDidLoad() {
super.viewDidLoad()
adapter.dataSource = self
}
```
In case you'd like to mix EJ blocks with some other cells, use `EJCollectionRenderer`. It provides you with more flexibility, here's how to use it:
1. Repeat steps 1-3 from the guide above.
2. Create a renderer:
``` swift
lazy var renderer = EJCollectionRenderer(collectionView: collectionView)
```
3. Implement and assign collection's data source and delegate methods.
``` swift
///
extension ViewController: UICollectionViewDataSource {
/**
*/
func numberOfSections(in collectionView: UICollectionView) -> Int {
return blockList.blocks.count
}
/**
*/
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return blockList.blocks[section].data.numberOfItems
}
/**
*/
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
do {
let block = blockList.blocks[indexPath.section]
let style = kit.style.getStyle(forBlockType: block.type)
return try renderer.render(block: block, indexPath: indexPath, style: style)
}
catch {
// Ensure you won't ever get here
return UICollectionViewCell()
}
}
}
///
extension ViewController: UICollectionViewDelegateFlowLayout {
/**
*/
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
do {
let block = blockList.blocks[indexPath.section]
let style = kit.style.getStyle(forBlockType: block.type)
return try renderer.size(forBlock: block,
itemIndex: indexPath.item,
style: style,
superviewSize: collectionView.frame.size)
} catch {
return .zero
}
}
/**
*/
public func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return renderer.spacing(forBlock: blockList.blocks[section])
}
/**
*/
public func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
return renderer.insets(forBlock: blockList.blocks[section])
}
}
```
## Example
To run the example project, clone the repo, and run `pod install` from the Example directory first.
## Installation
EditorJSKit is available through [CocoaPods](https://cocoapods.org). To install
it, simply add the following line to your Podfile:
```ruby
pod 'EditorJSKit'
```
## Author
[Upstarts team](https://upstarts.work)
[Vadim Popov](https://github.com/PopovVadim) - Architecture, implementation, code review
[Ivan Glushko](https://github.com/ivanglushko) - Implementation