Refactor editor structure

Author: cp-megh-l

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

@@ -0,0 +1,84 @@
+{
+  "spans": [
+    {
+      "insert": "Android Quill Editor",
+      "attributes": {
+        "bold": true,
+        "header": 1
+      }
+    },
+    {
+      "insert": "\n",
+      "attributes": {}
+    },
+    {
+      "insert": "\nRich text editor for Android",
+      "attributes": {
+        "bold": true,
+        "header": 2
+      }
+    },
+    {
+      "insert": "\n",
+      "attributes": {}
+    },
+    {
+      "insert": "Quill component for Android\n",
+      "attributes": {
+        "header": 3,
+        "italic": true
+      }
+    },
+    {
+      "insert": "Bullet Journal :\nTrack personal and group journals (ToDo, Note, Ledger) from multiple views with timely reminders",
+      "attributes": {
+        "bold": true
+      }
+    },
+    {
+      "insert": "\nShare your tasks and notes with teammates, and see changes as they happen in real-time, across all devices\n",
+      "attributes": {}
+    },
+    {
+      "insert": "Splitting bills with friends can never be easier.",
+      "attributes": {
+        "list": "bullet"
+      }
+    },
+    {
+      "insert": "\n",
+      "attributes": {}
+    },
+    {
+      "insert": "Testing span addition to the editor.",
+      "attributes": {
+        "list": "bullet"
+      }
+    },
+    {
+      "insert": "\n",
+      "attributes": {}
+    },
+    {
+      "insert": "Start creating a group and invite your friends to join.",
+      "attributes": {
+        "list": "bullet"
+      }
+    },
+    {
+      "insert": "\n",
+      "attributes": {}
+    },
+    {
+      "insert": "Create a BuJo of Ledger type to see expense or balance summary.",
+      "attributes": {
+        "bold": true,
+        "list": "bullet"
+      }
+    },
+    {
+      "insert": "\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")
+        }
+    }
+}