Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Upstarts/editor.js-kit-android
https://github.com/Upstarts/editor.js-kit-android
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/Upstarts/editor.js-kit-android
- Owner: Upstarts
- License: mit
- Created: 2019-06-18T13:49:21.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-04-27T10:42:08.000Z (7 months ago)
- Last Synced: 2024-05-20T17:19:28.374Z (6 months ago)
- Language: Kotlin
- Size: 1.02 MB
- Stars: 26
- Watchers: 5
- Forks: 7
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-editorjs - editor.js-kit-android - Android framework for parsing and rendering blocks (Libraries / Kotlin)
README
[](https://jitpack.io/#Upstarts/editor.js-kit-android)
## About
A non-official Android 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](app/src/main/assets/dummy_data.json) into native views like that 👇
#### Supported blocks
* 🎩 Header
* 🥑 Raw HTML
* 📷 Image
* 🖌 Delimiter
* 💌 Paragraph
* 🌿 List
* 📋 Table
## Installation
add jitpack repo:
```
repositories {
maven { url "https://jitpack.io" }
}
*.kts
repositories {
maven { setUrl("https://jitpack.io") }
}
```
add dependency:
```
implementation 'com.github.Upstarts.editor-js-kit-android:ejkit:X.X.X' - look at badge above for latest version
implementation 'com.github.Upstarts.editor-js-kit-android:ejkit-gson:X.X.X' - adds GSON adapter. If you use other library for parsing json, you need to write adapter yourself.
implementation 'com.github.Upstarts.editor-js-kit-android:ejkit-moshi:X.X.X' - adds Moshi adapter.
```
## Setup
1. Create adapter instance in your activity/fragment (Style parameter is optional)
```
private val rvAdapter: EditorJsAdapter by lazy {
EditorJsAdapter(EJStyle.create(this.applicationContext))
}
```
2. Set adapter to recyclerview in your layout
3. Init gson with custom Deserializer
```
val blocksType = object : TypeToken>() {}.type
val gson = GsonBuilder()
.registerTypeAdapter(blocksType, EJDeserializer())
.create()
```
4. Apply received data to adapter
```
rvAdapter.items = ejResponse.blocks
```
## Customizing
You can set style globally via `EJKit.style = ...` for all adapters, or pass `EJStyle` instance for specific adapter.
```
EJStyle.builderWithDefaults(applicationContext)
.linkColor(ContextCompat.getColor(this,R.color.default_color))
.blockMargin(10)
.dividerMargin(10, 10)
.headingMargin(10, 10, HeadingLevel.h1)
.imageMargin(10, 10)
.paragraphMargin(10, 10)
.rawHtmlMargin(10, 10)
.tableMargin(10, 10)
.listItemColor(ContextCompat.getColor(this,R.color.default_color))
.listBulletColor(ContextCompat.getColor(this,R.color.default_color))
.bulletSize(6, 6)
.bulletMargin(10, 10, 10, 10)
.listTextItemMargin(10, 10, 10, 10)
.listTextItemTypeFace(ResourcesCompat.getFont(this, R.font.montserrat_bold)!!)
.listTextItemTextSize(18f)
.bulletDrawableRes(R.drawable.list_circle)
.paragraphTextColor(ContextCompat.getColor(this,R.color.default_color))
.paragraphBackgroundColor(ContextCompat.getColor(this,R.color.default_color))
.paragraphTypeface(ResourcesCompat.getFont(this, R.font.my_font)!!)
.paragraphTextColor(ContextCompat.getColor(this,R.color.default_color))
.headingTypeface(ResourcesCompat.getFont(this, R.font.my_font)!!)
.headingTypefaceDetailed(ResourcesCompat.getFont(this, R.font.my_font)!!, HeadingLevel.h1)
.headingFontStyleDetailed(R.style.ParagraphText, HeadingLevel.h1)
.headingColorDetailed(R.color.default_color, HeadingLevel.h1)
.headingTextSizes(floatArrayOf( 12f, 12f, 12f,12f,12f,12f))
.dividerBreakColor(ContextCompat.getColor(this,R.color.default_color))
.dividerBreakHeight(10)
.tableColumnDrawableRes(R.drawable.table_content_cell_bg)
.tableColumnTextColor(ContextCompat.getColor(this,R.color.default_color))
.imageBackgroundRes(R.drawable.image_background)
.imageBorderRes(R.drawable.image_background)
.build()
```
### Override android style in styles.xml
```
<item name="android:textColor">@color/colorPrimary</item>
<item name="android:textSize">16sp</item>
```
### Create custom block
If you have block that library does not provide currently, you can add it by yourself.
1. Create custom block type and extend it from `EJAbstractBlockType`
```
enum class CustomBlockType(override val jsonName: String) : EJAbstractBlockType {
TABLE("table")
}
```
2. Create data class for block
```
data class EJTableData(
val content: List>
): EJData()
```
3. And register it
`EJKit.register(EJCustomBlock(CustomB.TABLE, EJTableData::class.java))
`
## Example
You can find and test the example in a [sample activity](app/src/main/java/work/upstarts/MainActivity.kt)
## Author
[Upstarts team](https://upstarts.work)
[Ruslan Aliev](https://github.com/heckslam) - Architecture, Implementation
[Vadim Popov](https://github.com/PopovVadim) - Architecture draft