Fix color issue of text view with theme change

Author: cp-divyesh-v

RichEditorDemo/RichEditorDemo/ContentView.swift

@@ -46,6 +46,7 @@ struct ContentView: View {
 
                     }
                 )
+                .background(colorScheme == .dark ? .gray.opacity(0.3) : Color.white)
                 .cornerRadius(10)
 
                 #if os(iOS)

RichEditorDemo/RichEditorDemo/Sample_json.json

@@ -1,122 +1,177 @@
 {
     "spans": [
         {
-            "insert": "RichEditor",
+            "insert": "RichEditorSwiftUI",
             "attributes": {
-                "bold": true,
-                "header": 1
+                "color": "#FF9500",
+                "size": 24,
+                "font": "Academy Engraved LET"
             }
         },
         {
-            "insert": "\niOS ",
-            "attributes": {}
+            "attributes": {},
+            "insert": "\n\nIt’s Support "
         },
         {
-            "insert": "RichEditorSwiftUI ",
+            "insert": "bold",
             "attributes": {
-                "bold": true,
-                "italic": true
+                "bold": true
             }
         },
         {
-            "insert": "Rich editor for ",
-            "attributes": {}
+            "attributes": {},
+            "insert": ", "
+        },
+        {
+            "attributes": {
+                "italic": true
+            },
+            "insert": "italic"
+        },
+        {
+            "attributes": {},
+            "insert": ", "
         },
         {
-            "insert": "SwiftUI.\n\n",
             "attributes": {
-                "bold": true,
                 "underline": true
-            }
+            },
+            "insert": "underline"
         },
         {
-            "insert": "Features",
+            "attributes": {},
+            "insert": " and "
+        },
+        {
+            "insert": "striketrhough",
             "attributes": {
-                "bold": true,
-                "header": 3
+                "strike": true
             }
         },
         {
-            "insert": "\nThe editor offers the following ",
-            "attributes": {}
+            "attributes": {},
+            "insert": " formats.\n\nWe have different headings\n"
         },
         {
-            "insert": "options:\n",
+            "insert": "Heading 1\n",
             "attributes": {
-                "bold": true,
-                "italic": true,
-                "underline": true
+                "header": 1
             }
         },
         {
-            "insert": "\n",
-            "attributes": {}
+            "insert": "Heading 2",
+            "attributes": {
+                "header": 2
+            }
+        },
+        {
+            "attributes": {},
+            "insert": "\n"
         },
         {
-            "insert": "Bold\n",
+            "insert": "Heading 3\n",
             "attributes": {
-                "bold": true
+                "header": 3
             }
         },
         {
-            "insert": "Italic\n",
+            "insert": "Heading 4\n",
             "attributes": {
-                "italic": true
+                "header": 4
             }
         },
         {
-            "insert": "Underline\n",
+            "insert": "Heading 5\n",
             "attributes": {
-                "underline": true
+                "header": 5
+            }
+        },
+        {
+            "insert": "Heading 6\n",
+            "attributes": {
+                "header": 6
             }
         },
         {
-            "insert": "Different ",
+            "insert": "\nHere we have ",
             "attributes": {}
         },
         {
-            "insert": "Headings\n\n",
             "attributes": {
-                "bold": true,
-                "italic": true,
-                "underline": true
+                "size": 24
+            },
+            "insert": "large"
+        },
+        {
+            "attributes": {},
+            "insert": " and "
+        },
+        {
+            "attributes": {
+                "size": 10
+            },
+            "insert": "small"
+        },
+        {
+            "attributes": {},
+            "insert": " text and "
+        },
+        {
+            "insert": "custom fonts",
+            "attributes": {
+                "font": "ChalkboardSE-Light",
+                "color": "#007AFF"
             }
         },
         {
-            "insert": "\n",
+            "insert": " as well.\n\nYou can align text differently\nHere is the left align\n",
             "attributes": {}
         },
         {
-            "insert": "Credits",
             "attributes": {
-                "bold": true,
-                "header": 3
+                "align": "center"
+            },
+            "insert": "This is center align\n"
+        },
+        {
+            "insert": "This is right align\n",
+            "attributes": {
+                "align": "right"
             }
         },
         {
-            "insert": "\n\n",
+            "attributes": {},
+            "insert": "\nDifferent font "
+        },
+        {
+            "insert": "color",
+            "attributes": {
+                "color": "#34C759"
+            }
+        },
+        {
+            "insert": " and ",
             "attributes": {}
         },
         {
-            "insert": "RichEditor ",
+            "insert": "background",
             "attributes": {
-                "bold": true
+                "background": "#32ADE6"
             }
         },
         {
-            "insert": "for SwiftUI is developed and maintained by the ",
+            "insert": "\n\nThank You! Team ",
             "attributes": {}
         },
         {
-            "insert": "Canopas Team.",
             "attributes": {
                 "bold": true,
-                "italic": true,
-                "underline": true
-            }
+                "color": "#F67C8E"
+            },
+            "insert": "Canopas"
         },
         {
-            "insert": "\n\nThank You! 😊\n\n",
+            "insert": " 😊",
             "attributes": {}
         }
     ]

Sources/RichEditorSwiftUI/BaseFoundation/RichTextCoordinator.swift

@@ -238,6 +238,12 @@ extension RichTextCoordinator {
         sync(&context.paragraphStyle, with: textView.richTextParagraphStyle ?? .default)
         sync(&context.textAlignment, with: textView.richTextAlignment ?? .left)
 
+        RichTextColor.allCases.forEach {
+            if let color = textView.richTextColor($0) {
+                context.setColor($0, to: color)
+            }
+        }
+
         let styles = textView.richTextStyles
         RichTextStyle.allCases.forEach {
             let style = styles.hasStyle($0)

Sources/RichEditorSwiftUI/Components/RichTextViewComponent.swift

@@ -61,9 +61,15 @@ public protocol RichTextViewComponent: AnyObject,
     var typingAttributes: RichTextAttributes { get set }
 
     // MARK: - Setup
-
     /// Setup the view with a text and data format.
-    func setup()
+    func setup(
+        with text: NSAttributedString,
+        format: RichTextDataFormat?
+    )
+
+    func setup(
+        with text: RichText
+    )
 
     // MARK: - Functions
 
@@ -111,13 +117,13 @@ public extension RichTextViewComponent {
     }
 
     /// Setup the view with data and a data format.
-//    func setup(
-//        with data: Data,
-//        format: RichTextDataFormat
-//    ) throws {
-//        let string = try NSAttributedString(data: data, format: format)
-//        setup(with: string, format: format)
-//    }
+    func setup(
+        with data: Data,
+        format: RichTextDataFormat
+    ) throws {
+        let string = try NSAttributedString(data: data, format: format)
+        setup(with: string, format: format)
+    }
 
     /// Get the image configuration for a certain format.
 //    func standardImageConfiguration(

Sources/RichEditorSwiftUI/UI/Context/RichEditorState.swift

@@ -134,11 +134,13 @@ public class RichEditorState: ObservableObject {
         return internalSpans.map({ .init(insert: getStringWith(from: $0.from, to: $0.to), attributes: $0.attributes) })
     }
 
+    var internalRichText: RichText = .init()
     //MARK: - Initializers
     /**
      Init with richText which is of type RichText
      */
     public init(richText: RichText) {
+        internalRichText = richText
         let input = richText.spans.map({ $0.insert }).joined()
         var tempSpans: [RichTextSpanInternal] = []
         var text = ""
@@ -154,6 +156,9 @@ public class RichEditorState: ObservableObject {
 
         tempSpans.forEach { span in
             str.addAttributes(span.attributes?.toAttributes(font: .standardRichTextFont) ?? [:], range: span.spanRange)
+            if span.attributes?.color == nil {
+                str.addAttributes([.foregroundColor: RichTextView.Theme.standard.fontColor], range: span.spanRange)
+            }
         }
 
         self.attributedString = str
@@ -186,7 +191,6 @@ public class RichEditorState: ObservableObject {
 
         rawText = input
     }
-
 }
 
 public extension RichEditorState {

Sources/RichEditorSwiftUI/UI/Editor/RichEditor.swift

@@ -65,9 +65,11 @@ public struct RichTextEditor: ViewRepresentable {
     ///   - viewConfiguration: A platform-specific view configuration, if any.
     public init(
         context: ObservedObject<RichEditorState>,
+        format: RichTextDataFormat = .archivedData,
         viewConfiguration: @escaping ViewConfiguration = { _ in }
     ) {
         self._context = context
+        self.format = format
         self.viewConfiguration = viewConfiguration
     }
 
@@ -78,6 +80,8 @@ public struct RichTextEditor: ViewRepresentable {
 
     private var viewConfiguration: ViewConfiguration
 
+    private var format: RichTextDataFormat
+
     @Environment(\.richTextEditorConfig)
     private var config
 
@@ -106,7 +110,7 @@ public struct RichTextEditor: ViewRepresentable {
 
 #if iOS || os(tvOS) || os(visionOS)
     public func makeUIView(context: Context) -> some UIView {
-        textView.setup()
+        textView.setup(with: self.context.attributedString, format: format)
         textView.configuration = config
         textView.theme = style
         viewConfiguration(textView)
@@ -119,15 +123,10 @@ public struct RichTextEditor: ViewRepresentable {
             self.textView.typingAttributes = [.font: style.font]
         }
     }
-
 #else
 
     public func makeNSView(context: Context) -> some NSView {
-        if self.context.internalSpans.isEmpty {
-            textView.setup()
-        } else {
-            textView.setup()
-        }
+        textView.setup(with: self.context.attributedString, format: format)
         textView.configuration = config
         textView.theme = style
         viewConfiguration(textView)

Sources/RichEditorSwiftUI/UI/Extensions/NSAttributedString+Empty.swift

@@ -0,0 +1,16 @@
+//
+//  NSAttributedString+Empty.swift
+//  RichEditorSwiftUI
+//
+//  Created by Divyesh Vekariya on 13/12/24.
+//
+
+import Foundation
+
+public extension NSAttributedString {
+
+    /// Create an empty attributed string.
+    static var empty: NSAttributedString {
+        .init(string: "")
+    }
+}