Refactor editor structure

Author: cp-megh-l

app/src/main/assets/android-quill-sample.json

@@ -0,0 +1,3 @@
+{
+  "spans": [{"insert":"RichEditor","attributes":{"bold":true,"header":1}},{"insert":"\nAndroid ","attributes":{}},{"insert":"WYSIWYG ","attributes":{"bold":true,"italic":true}},{"insert":"Rich editor for ","attributes":{}},{"insert":"Jetpack compose.\n\n","attributes":{"bold":true,"underline":true}},{"insert":"Features","attributes":{"bold":true,"header":3}},{"insert":"\nThe editor offers the following ","attributes":{}},{"insert":"options:\n","attributes":{"bold":true,"italic":true,"underline":true}},{"insert":"\n","attributes":{}},{"insert":"Bold\n","attributes":{"bold":true}},{"insert":"Italic\n","attributes":{"italic":true}},{"insert":"Underline\n","attributes":{"underline":true}},{"insert":"Different ","attributes":{}},{"insert":"Headings\n\n","attributes":{"bold":true,"italic":true,"underline":true}},{"insert":"Bullet List:\n","attributes":{"bold":true}},{"insert":"Item 1","attributes":{"list":"bullet"}},{"insert":"\n","attributes":{}},{"insert":"Item 2","attributes":{"list":"bullet"}},{"insert":"\n","attributes":{}},{"insert":"Item 3","attributes":{"list":"bullet"}},{"insert":"\n","attributes":{}},{"insert":"Item 4\n","attributes":{"list":"bullet"}},{"insert":"\n","attributes":{}},{"insert":"Credits","attributes":{"bold":true,"header":3}},{"insert":"\n\n","attributes":{}},{"insert":"RichEditor ","attributes":{"bold":true}},{"insert":"for compose is developed and maintained by the ","attributes":{}},{"insert":"canopas team.\n\n","attributes":{"bold":true,"italic":true,"underline":true}},{"insert":"Thank You! 😊\n\n","attributes":{}}]
+}

app/src/main/assets/sample-data.json

@@ -39,10 +39,10 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.PopupProperties
-import com.canopas.editor.ui.data.RichEditorState
+import com.canopas.editor.ui.data.QuillEditorState
 import com.canopas.editor.ui.ui.RichEditor
 import com.canopas.editor.ui.utils.TextSpanStyle
-import com.example.texteditor.parser.JsonEditorParser
+import com.example.texteditor.parser.QuillJsonEditorParser
 import com.example.texteditor.ui.theme.TextEditorTheme
 
 class MainActivity : ComponentActivity() {
@@ -66,21 +66,21 @@ fun Sample() {
     TextEditorTheme {
         val context = LocalContext.current
 
-        val state = remember {
+        val quillState = remember {
             val input =
-                context.assets.open("sample-data.json").bufferedReader().use { it.readText() }
-            RichEditorState.Builder()
+                context.assets.open("android-quill-sample.json").bufferedReader().use { it.readText() }
+            QuillEditorState.Builder()
                 .setInput(input)
-                .adapter(JsonEditorParser())
+                .adapter(QuillJsonEditorParser())
                 .build()
         }
 
         Column {
 
-            StyleContainer(state)
+            StyleContainer(quillState)
 
             RichEditor(
-                state = state,
+                state = quillState,
                 modifier = Modifier
                     .fillMaxWidth()
                     .weight(1f)
@@ -94,7 +94,7 @@ fun Sample() {
 
 @Composable
 fun StyleContainer(
-    state: RichEditorState,
+    state: QuillEditorState,
 ) {
     Row(
         Modifier
@@ -123,6 +123,12 @@ fun StyleContainer(
             value = state,
         )
 
+        StyleButton(
+            icon = R.drawable.baseline_format_list_bulleted_24,
+            style = TextSpanStyle.BulletStyle,
+            value = state,
+        )
+
         IconButton(
             modifier = Modifier
                 .padding(2.dp)
@@ -144,7 +150,7 @@ fun StyleContainer(
 
 @Composable
 fun TitleStyleButton(
-    value: RichEditorState
+    value: QuillEditorState
 ) {
     var expanded by remember { mutableStateOf(false) }
 
@@ -220,7 +226,7 @@ fun DropDownItem(
 fun StyleButton(
     @DrawableRes icon: Int,
     style: TextSpanStyle,
-    value: RichEditorState,
+    value: QuillEditorState,
 ) {
     IconButton(
         modifier = Modifier

app/src/main/java/com/example/texteditor/MainActivity.kt

@@ -0,0 +1,23 @@
+package com.example.texteditor.parser
+
+import com.canopas.editor.ui.model.QuillSpan
+import com.canopas.editor.ui.model.Span
+import com.canopas.editor.ui.parser.QuillEditorAdapter
+import com.google.gson.Gson
+import com.google.gson.GsonBuilder
+import com.google.gson.reflect.TypeToken
+
+class QuillJsonEditorParser : QuillEditorAdapter {
+
+    private val gson: Gson = GsonBuilder()
+        .registerTypeAdapter(Span::class.java, QuillRichTextStateAdapter())
+        .create()
+
+    override fun encode(input: String): QuillSpan {
+        return gson.fromJson(input, object : TypeToken<QuillSpan>() {}.type)
+    }
+
+    override fun decode(editorValue: QuillSpan): String {
+        return gson.toJson(editorValue)
+    }
+}

app/src/main/java/com/example/texteditor/parser/JsonEditorParser.kt

@@ -0,0 +1,45 @@
+package com.example.texteditor.parser
+
+import android.util.Log
+import com.canopas.editor.ui.model.Attributes
+import com.canopas.editor.ui.model.Span
+import com.google.gson.JsonDeserializationContext
+import com.google.gson.JsonDeserializer
+import com.google.gson.JsonElement
+import com.google.gson.JsonObject
+import com.google.gson.JsonParseException
+import com.google.gson.JsonSerializationContext
+import com.google.gson.JsonSerializer
+import java.lang.reflect.Type
+
+class QuillRichTextStateAdapter : JsonSerializer<Span>, JsonDeserializer<Span> {
+    override fun serialize(
+        src: Span?,
+        typeOfSrc: Type?,
+        context: JsonSerializationContext?
+    ): JsonElement {
+        val jsonObject = JsonObject()
+        jsonObject.add("insert", context?.serialize(src?.insert))
+        jsonObject.add("attributes", context?.serialize(src?.attributes))
+        return jsonObject
+    }
+
+    override fun deserialize(
+        json: JsonElement?,
+        typeOfT: Type?,
+        context: JsonDeserializationContext?
+    ): Span {
+        try {
+            val jsonObject = json?.asJsonObject ?: throw JsonParseException("Invalid JSON")
+            val insert = jsonObject.get("insert")
+            val attributes = jsonObject.get("attributes")
+            return Span(
+                insert = context?.deserialize<String>(insert, String::class.java),
+                attributes = context?.deserialize<Attributes>(attributes, Attributes::class.java)
+            )
+        } catch (e: Exception) {
+            Log.e("QuillRichTextStateAdapter", "deserialize: ", e)
+            throw JsonParseException("Invalid JSON")
+        }
+    }
+}

app/src/main/java/com/example/texteditor/parser/QuillJsonEditorParser.kt

@@ -0,0 +1,5 @@
+<vector android:autoMirrored="true" android:height="24dp"
+    android:tint="#000000" android:viewportHeight="24"
+    android:viewportWidth="24" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="@android:color/white" android:pathData="M4,10.5c-0.83,0 -1.5,0.67 -1.5,1.5s0.67,1.5 1.5,1.5 1.5,-0.67 1.5,-1.5 -0.67,-1.5 -1.5,-1.5zM4,4.5c-0.83,0 -1.5,0.67 -1.5,1.5S3.17,7.5 4,7.5 5.5,6.83 5.5,6 4.83,4.5 4,4.5zM4,16.5c-0.83,0 -1.5,0.68 -1.5,1.5s0.68,1.5 1.5,1.5 1.5,-0.68 1.5,-1.5 -0.67,-1.5 -1.5,-1.5zM7,19h14v-2L7,17v2zM7,13h14v-2L7,11v2zM7,5v2h14L21,5L7,5z"/>
+</vector>

app/src/main/java/com/example/texteditor/parser/QuillRichTextStateAdapter.kt

@@ -1,7 +1,7 @@
 // Top-level build file where you can add configuration options common to all sub-projects/modules.
 plugins {
-    id 'com.android.application' version '8.0.2' apply false
-    id 'com.android.library' version '8.0.2' apply false
+    id 'com.android.application' version '8.2.2' apply false
+    id 'com.android.library' version '8.2.2' apply false
     id 'org.jetbrains.kotlin.android' version '1.7.20' apply false
     id 'io.github.gradle-nexus.publish-plugin' version "1.3.0"
 }