Support dark mode (#45)

* Updated bundle identifier

* Fix updating view within view update created undefine behaviour warning

* support dark mode

Author: cp-divyesh-v

RichEditorDemo/RichEditorDemo.xcodeproj/project.pbxproj

@@ -310,7 +310,7 @@
 				"LD_RUNPATH_SEARCH_PATHS[sdk=macosx*]" = "@executable_path/../Frameworks";
 				MACOSX_DEPLOYMENT_TARGET = 14.0;
 				MARKETING_VERSION = 1.0;
-				PRODUCT_BUNDLE_IDENTIFIER = com.canopas.nolonely.RichEditorDemo;
+				PRODUCT_BUNDLE_IDENTIFIER = com.canopas.RichEditorDemo;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SDKROOT = auto;
 				SUPPORTED_PLATFORMS = "iphoneos iphonesimulator";
@@ -347,7 +347,7 @@
 				"LD_RUNPATH_SEARCH_PATHS[sdk=macosx*]" = "@executable_path/../Frameworks";
 				MACOSX_DEPLOYMENT_TARGET = 14.0;
 				MARKETING_VERSION = 1.0;
-				PRODUCT_BUNDLE_IDENTIFIER = com.canopas.nolonely.RichEditorDemo;
+				PRODUCT_BUNDLE_IDENTIFIER = com.canopas.RichEditorDemo;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SDKROOT = auto;
 				SUPPORTED_PLATFORMS = "iphoneos iphonesimulator";

RichEditorDemo/RichEditorDemo/ContentView.swift

@@ -9,6 +9,8 @@ import SwiftUI
 import RichEditorSwiftUI
 
 struct ContentView: View {
+    @Environment(\.colorScheme) var colorScheme
+
     @ObservedObject var state: RichEditorState
 
     init(state: RichEditorState? = nil) {
@@ -27,7 +29,11 @@ struct ContentView: View {
     var body: some View {
         NavigationStack {
             VStack {
+                EditorToolBarView(state: state)
+
                 RichEditor(state: _state)
+                    .textPadding(12)
+                    .cornerRadius(10)
             }
             .padding(10)
             .toolbar {
@@ -41,6 +47,7 @@ struct ContentView: View {
                     })
                 }
             }
+            .background(colorScheme == .dark ? .black : .gray.opacity(0.07))
             .navigationTitle("Rich Editor")
             .navigationBarTitleDisplayMode(.inline)
         }

Sources/RichEditorSwiftUI/Helper/Buildable.swift

@@ -0,0 +1,25 @@
+//
+//  Buildable.swift
+//  RichEditorSwiftUI
+//
+//  Created by Divyesh Vekariya on 24/09/24.
+//
+
+import Foundation
+
+/// Adds a helper function to mutate a properties and help implement _Builder_ pattern
+@available(iOS 13.0, macOS 10.15, tvOS 13.0, watchOS 6.0, *)
+protocol Buildable {}
+
+@available(iOS 13.0, macOS 10.15, tvOS 13.0, watchOS 6.0, *)
+extension Buildable {
+    /// Mutates a property of the instance
+    ///
+    /// - Parameter keyPath:    `WritableKeyPath` to the instance property to be modified
+    /// - Parameter value:      value to overwrite the  instance property
+    func mutating<T>(keyPath: WritableKeyPath<Self, T>, value: T) -> Self {
+        var newSelf = self
+        newSelf[keyPath: keyPath] = value
+        return newSelf
+    }
+}

Sources/RichEditorSwiftUI/UI/Editor/RichEditor+Buildable.swift

@@ -0,0 +1,51 @@
+//
+//  RichEditor+Buildable.swift
+//  RichEditorSwiftUI
+//
+//  Created by Divyesh Vekariya on 24/09/24.
+//
+
+import SwiftUI
+
+extension RichEditor: Buildable {
+
+    ///A Boolean value that indicates whether the text view is editable.
+    public func isEditable(_ isEditable: Bool = true) -> Self {
+        return mutating(keyPath: \.isEditable, value: isEditable)
+    }
+
+    ///A Boolean value that determines whether user events are ignored and removed from the event queue.
+    public func isUserInteractionEnabled(_ enabled: Bool = true) -> Self {
+        return mutating(keyPath: \.isUserInteractionEnabled, value: enabled)
+    }
+
+    ///A Boolean value that determines whether scrolling is enabled.
+    public func isScrollEnabled(_ enabled: Bool = true) -> Self {
+        return mutating(keyPath: \.isScrollEnabled, value: enabled)
+    }
+
+    ///The maximum number of lines that the text container can store.
+    public func linelimit(_ linelimit: Int?) -> Self {
+        return mutating(keyPath: \.linelimit, value: linelimit)
+    }
+
+    ///The color of the text.
+    public func fontColor(_ color: Color? = nil) -> Self {
+        return mutating(keyPath: \.fontColor, value: color)
+    }
+
+    ///The view’s background color.
+    public func backgroundColor(_ color: Color? = nil) -> Self {
+        return mutating(keyPath: \.backgroundColor, value: color)
+    }
+
+    ///Add padding to all side of textContent
+    public func textPadding(_ padding: CGFloat? = nil) -> Self {
+        return mutating(keyPath: \.textPadding, value: padding)
+    }
+
+    ///An integer that you can use to identify view objects in your application.
+    public func tagId(_ tag: Int? = nil) -> Self {
+        return mutating(keyPath: \.tag, value: tag)
+    }
+}

Sources/RichEditorSwiftUI/UI/Editor/RichEditor.swift

@@ -10,19 +10,46 @@ import SwiftUI
 public struct RichEditor: View {
     @ObservedObject var state: RichEditorState
 
+    ///A Boolean value that indicates whether the text view is editable.
+    var isEditable: Bool = true
+
+    ///A Boolean value that determines whether user events are ignored and removed from the event queue.
+    var isUserInteractionEnabled: Bool = true
+
+    ///A Boolean value that determines whether scrolling is enabled.
+    var isScrollEnabled: Bool = true
+
+    ///The maximum number of lines that the text container can store.
+    var linelimit: Int?
+
+    ///The color of the text.
+    var fontColor: Color? = nil
+
+    ///The view’s background color.
+    var backgroundColor:Color? = nil
+
+    ///Add padding to all side of textContent
+    var textPadding: CGFloat? = nil
+
+    ///An integer that you can use to identify view objects in your application.
+    var tag: Int? = nil
+
     public init(state: ObservedObject<RichEditorState>) {
         self._state = state
     }
 
     public var body: some View {
-        VStack(content: {
-            EditorToolBarView(state: state)
-
-            TextViewWrapper(state: _state,
-                            attributesToApply:  $state.attributesToApply,
-                            isScrollEnabled: true,
-                            fontStyle: state.currentFont,
-                            onTextViewEvent: state.onTextViewEvent(_:))
-        })
+        TextViewWrapper(state: _state,
+                        attributesToApply:  $state.attributesToApply,
+                        isEditable: isEditable,
+                        isUserInteractionEnabled: isUserInteractionEnabled,
+                        isScrollEnabled: isScrollEnabled,
+                        linelimit: linelimit,
+                        fontStyle: state.currentFont,
+                        fontColor: fontColor,
+                        backGroundColor: backgroundColor,
+                        tag: tag,
+                        textPadding: textPadding,
+                        onTextViewEvent: state.onTextViewEvent(_:))
     }
 }

Sources/RichEditorSwiftUI/UI/Editor/RichEditorState.swift

@@ -6,6 +6,7 @@
 //
 
 import Foundation
+import SwiftUI
 
 public class RichEditorState: ObservableObject {
     private var adapter: EditorAdapter = DefaultAdapter()
@@ -295,7 +296,9 @@ extension RichEditorState {
     private func updateAttributes(spans: [(RichTextSpanInternal, shouldApply: Bool)]) {
         if attributesToApply == nil {
             attributesToApply = (spans: spans, onCompletion: { [weak self] in
-                self?.attributesToApply = nil
+                Task { @MainActor in
+                    self?.attributesToApply = nil
+                }
                 if let updateQueue = self?.updateAttributesQueue, !updateQueue.isEmpty {
                     self?.updateAttributes(spans: updateQueue)
                     self?.updateAttributesQueue.removeAll(where: { item in

Sources/RichEditorSwiftUI/UI/EditorToolBar/EditorToolBarView.swift

@@ -7,10 +7,20 @@
 
 import SwiftUI
 
-struct EditorToolBarView: View {
+public struct EditorToolBarView: View {
+    @Environment(\.colorScheme) var colorScheme
+
     @ObservedObject var state: RichEditorState
 
-    var body: some View {
+    var selectedColor: Color {
+        colorScheme == .dark ? .white.opacity(0.3) : .gray.opacity(0.1)
+    }
+
+    public init(state: RichEditorState) {
+        self.state = state
+    }
+
+    public var body: some View {
         LazyHStack(spacing: 5, content: {
             ForEach(EditorTool.allCases, id: \.self) { tool in
                 if tool.isContainManu {
@@ -21,12 +31,15 @@ struct EditorToolBarView: View {
             }
         })
         .frame(height: 50)
+        .padding(.horizontal, 15)
         .frame(maxWidth: .infinity, alignment: .leading)
-        .background(Color.gray.opacity(0.1))
+        .background(selectedColor)
+        .clipShape(.capsule)
     }
 }
 
 private struct ToggleStyleButton: View {
+    @Environment(\.colorScheme) var colorScheme
 
     let tool: EditorTool
     let appliedTools: Set<TextSpanStyle>
@@ -36,6 +49,13 @@ private struct ToggleStyleButton: View {
         tool.isSelected(appliedTools)
     }
 
+    var normalDarkColor: Color {
+        colorScheme == .dark ? .white : .black
+    }
+
+    var selectedColor: Color {
+        colorScheme == .dark ? .gray.opacity(0.4) : .gray.opacity(0.1)
+    }
 
     var body: some View {
         Button(action: {
@@ -45,15 +65,18 @@ private struct ToggleStyleButton: View {
                 Image(systemName: tool.systemImageName)
                     .font(.title)
             })
-            .foregroundColor(isSelected ? .blue : .black)
-            .frame(width: 45, height: 50, alignment: .center)
-            .padding(.horizontal, 3)
-            .background(isSelected ? Color.gray.opacity(0.1) : Color.clear)
+            .foregroundColor(isSelected ? .blue : normalDarkColor)
+            .frame(width: 40, height: 40, alignment: .center)
+            .background(isSelected ? selectedColor : Color.clear)
+            .cornerRadius(5)
+            .padding(.vertical, 5)
         })
     }
 }
 
 struct TitleStyleButton: View {
+    @Environment(\.colorScheme) var colorScheme
+
     let tool: EditorTool
     let appliedTools: Set<TextSpanStyle>
     let setStyle: (TextSpanStyle) -> Void
@@ -64,6 +87,10 @@ struct TitleStyleButton: View {
 
     @State var isExpanded: Bool = false
 
+    var normalDarkColor: Color {
+        colorScheme == .dark ? .white : .black
+    }
+
     var body: some View {
 
         Menu(content: {
@@ -74,7 +101,7 @@ struct TitleStyleButton: View {
                 }, label: {
                     if hasStyle(header.getTextSpanStyle()) {
                         Label(header.title, systemImage:"checkmark")
-                            .foregroundColor(.blue)
+                            .foregroundColor(normalDarkColor)
                     } else {
                         Text(header.title)
                     }
@@ -88,10 +115,12 @@ struct TitleStyleButton: View {
                 Image(systemName: "chevron.down")
                     .font(.subheadline)
             })
-            .foregroundColor(isSelected ? .blue : .black)
-            .frame(width: 60, height: 50, alignment: .center)
+            .foregroundColor(isSelected ? .blue : normalDarkColor)
+            .frame(width: 50, height: 40, alignment: .center)
             .padding(.horizontal, 3)
             .background(isSelected ? Color.gray.opacity(0.1) : Color.clear)
+            .cornerRadius(5)
+            .padding(.vertical, 5)
         })
         .onTapGesture {
             isExpanded.toggle()