Refactor editor with quill structure (#41)

* Refactor editor to show new structure from json

* Fix style not applying for newly typed character and update span accordingly

* Added attributed string providing variable

* Fix apply style by selecting text

* Fix apply style by selecting text

* Fix remove style from selected text

* Fix remove header style

* Fix duplication in adding character

* Fix active style are applied to whole header

* Fix removing work remove extra space between word leads to miscalculation of span lenth

* Fix add same style between similar styled text not reflecting on editor

* Fix span get broken with emoji in text

* Fix header style is not applying to full header when emoji present above it

* Update formats and grouped methods

* Update template JSON

Author: cp-divyesh-v

RichEditorDemo/RichEditorDemo/ContentView.swift

@@ -10,19 +10,20 @@ import RichEditorSwiftUI
 
 struct ContentView: View {
     @ObservedObject var state: RichEditorState
-    
+
     init(state: RichEditorState? = nil) {
         if let state {
             self.state = state
         } else {
-            if let richText = readJSONFromFile(fileName: "Sample_json", type: RichText.self) {
-                self.state = .init(input: richText.text, spans: richText.spans)
+            if let richText = readJSONFromFile(fileName: "Sample_json",
+                                               type: RichText.self) {
+                self.state = .init(richText: richText)
             } else {
                 self.state = .init(input: "Hello World!")
             }
         }
     }
-    
+
     var body: some View {
         NavigationStack {
             VStack {
@@ -32,7 +33,8 @@ struct ContentView: View {
             .toolbar {
                 ToolbarItem(placement: .topBarTrailing) {
                     Button(action: {
-                        print("Export JSON")
+
+                        print("Export JSON == \(state.output())")
                     }, label: {
                         Image(systemName: "checkmark")
                             .padding()

RichEditorDemo/RichEditorDemo/JsonUtils.swift

@@ -8,8 +8,11 @@
 import Foundation
 
 
-internal func readJSONFromFile<T: Decodable>(fileName: String, type: T.Type, bundle: Bundle? = nil) -> T? {
-    if let url = (bundle ?? Bundle.main).url(forResource: fileName, withExtension: "json") {
+internal func readJSONFromFile<T: Decodable>(fileName: String,
+                                             type: T.Type,
+                                             bundle: Bundle? = nil) -> T? {
+    if let url = (bundle ?? Bundle.main)
+        .url(forResource: fileName, withExtension: "json") {
         do {
             let data = try Data(contentsOf: url)
             let decoder = JSONDecoder()
@@ -30,3 +33,25 @@ internal extension Bundle {
         return Bundle(for: RichBundleFakeClass.self)
     }
 }
+
+
+func encode<T: Encodable>(model: T?) throws -> String? {
+    guard let model else { return nil }
+    do {
+        let jsonData = try JSONEncoder().encode(model)
+        let jsonString = String(data: jsonData, encoding: .utf8)
+        return jsonString
+    } catch {
+        throw error
+    }
+}
+
+func decode<T: Decodable>(json string: String) throws -> T? {
+    guard let data = string.data(using: .utf8) else { return nil }
+    do {
+        let content = try JSONDecoder().decode(T.self, from: data)
+        return content
+    } catch {
+        throw error
+    }
+}

RichEditorDemo/RichEditorDemo/Sample_json.json

@@ -1,110 +1,123 @@
 {
     "spans": [
         {
-            "from": 0,
-            "to": 10,
-            "style": "h1"
+            "insert": "RichEditor",
+            "attributes": {
+                "bold": true,
+                "header": 1
+            }
         },
         {
-            "from": 0,
-            "to": 10,
-            "style": "bold"
+            "insert": "\niOS ",
+            "attributes": {}
         },
         {
-            "from": 27,
-            "to": 35,
-            "style": "bold"
+            "insert": "RichEditorSwiftUI ",
+            "attributes": {
+                "bold": true,
+                "italic": true
+            }
         },
         {
-            "from": 52,
-            "to": 61,
-            "style": "bold"
+            "insert": "Rich editor for ",
+            "attributes": {}
         },
         {
-            "from": 52,
-            "to": 59,
-            "style": "italic"
+            "insert": "SwiftUI.\n\n",
+            "attributes": {
+                "bold": true,
+                "underline": true
+            }
         },
         {
-            "from": 52,
-            "to": 61,
-            "style": "underline"
+            "insert": "Features",
+            "attributes": {
+                "bold": true,
+                "header": 3
+            }
         },
         {
-            "from": 61,
-            "to": 69,
-            "style": "h3"
+            "insert": "\nThe editor offers the following ",
+            "attributes": {}
         },
         {
-            "from": 62,
-            "to": 69,
-            "style": "bold"
+            "insert": "options:\n",
+            "attributes": {
+                "bold": true,
+                "italic": true,
+                "underline": true
+            }
         },
         {
-            "from": 103,
-            "to": 118,
-            "style": "bold"
+            "insert": "\n",
+            "attributes": {}
         },
         {
-            "from": 119,
-            "to": 126,
-            "style": "italic"
+            "insert": "Bold\n",
+            "attributes": {
+                "bold": true
+            }
         },
         {
-            "from": 130,
-            "to": 138,
-            "style": "underline"
+            "insert": "Italic\n",
+            "attributes": {
+                "italic": true
+            }
         },
         {
-            "from": 160,
-            "to": 167,
-            "style": "h3"
+            "insert": "Underline\n",
+            "attributes": {
+                "underline": true
+            }
         },
         {
-            "from": 161,
-            "to": 167,
-            "style": "bold"
+            "insert": "Different ",
+            "attributes": {}
         },
         {
-            "from": 169,
-            "to": 180,
-            "style": "bold"
+            "insert": "Headings\n\n",
+            "attributes": {
+                "bold": true,
+                "italic": true,
+                "underline": true
+            }
         },
         {
-            "from": 224,
-            "to": 235,
-            "style": "bold"
+            "insert": "\n",
+            "attributes": {}
         },
         {
-            "from": 224,
-            "to": 235,
-            "style": "italic"
+            "insert": "Credits",
+            "attributes": {
+                "bold": true,
+                "header": 3
+            }
         },
         {
-            "from": 224,
-            "to": 235,
-            "style": "underline"
+            "insert": "\n\n",
+            "attributes": {}
         },
         {
-            "from": 237,
-            "to": 250,
-            "style": "h4"
+            "insert": "RichEditor ",
+            "attributes": {
+                "bold": true
+            }
         },
         {
-            "from": 238,
-            "to": 250,
-            "style": "bold"
+            "insert": "for SwiftUI is developed and maintained by the ",
+            "attributes": {}
         },
         {
-            "from": 238,
-            "to": 250,
-            "style": "italic"
+            "insert": "Canopas Team.\n\n",
+            "attributes": {
+                "bold": true,
+                "italic": true,
+                "underline": true
+            }
         },
         {
-            "from": 238,
-            "to": 250,
-            "style": "underline"
+            "insert": "Thank You! 😊\n\n",
+            "attributes": {}
         }
-    ],
-    "text": "Rich Editor\nApple iOS/macOS WYSIWYG Rich editor for SwiftUI.\n\nFeatures\nThe editor offers the following options\n\n- Bold\n- Italic\n- Underline\n- Different headers\n\nCredits\nRich Editor for swiftUI is owned and maintained by the canopas team\n\nThanks You ☺️\n"
+    ]
 }

Sources/RichEditorSwiftUI/Attributes/RichTextAttributeReader.swift

@@ -32,7 +32,7 @@ public extension RichTextAttributeReader {
     func richTextAttributes(
         at range: NSRange
     ) -> RichTextAttributes {
-        if richText.string.count == 0 { return [:] }
+        if richText.string.utf16Length == 0 { return [:] }
         let range = safeRange(for: range, isAttributeOperation: true)
         return richText.attributes(at: range.location, effectiveRange: nil)
     }

Sources/RichEditorSwiftUI/Attributes/RichTextAttributeWriter+Style.swift

@@ -46,7 +46,7 @@ public extension NSMutableAttributedString {
     }
 
     /**
-     This will reset font size befor multiplying new size
+     This will reset font size before multiplying new size
      */
     private func byTogglingFontSizeFor(style: TextSpanStyle, font: FontRepresentable, shouldAdd: Bool) -> CGFloat {
         guard style.isHeaderStyle || style.isDefault else { return  font.pointSize }