About

A non-official Android Framework for Editor.js - block styled editor. It's purpose to make easy use of rendering and parsing of blocks.

Converts clean json blocks data like this 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<MutableList<EJBlock>>() {}.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

<style name="HeaderText" parent="@android:style/TextAppearance">
    <item name="android:textColor">@color/colorPrimary</item>
</style>
<style name="ParagraphText" parent="@android:style/TextAppearance">
    <item name="android:textSize">16sp</item>
</style>

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<List<String>>
): 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

Author

Upstarts team

Ruslan Aliev - Architecture, Implementation

Vadim Popov - Architecture draft