Fix text alignment issue (#63)

* Fix text alignment issue

* remove unused file

* added background color discloser row

* fix text alignment is not updading span properly

* Fix init with json was not ablle to add all style

Author: cp-divyesh-v

RichEditorDemo/RichEditorDemo/ContentView.swift

@@ -92,59 +92,65 @@ struct ContentView: View {
 
     var toolBarGroup: some View {
         return Group {
-                RichTextExportMenu.init(
-                    formatAction: { format in
-                        exportFormat = format
-                    },
-                    otherOptionAction: { format in
-                        otherExportFormat = format
-                    }
-                )
-#if !os(macOS)
+            RichTextExportMenu.init(
+                formatAction: { format in
+                    exportFormat = format
+                },
+                otherOptionAction: { format in
+                    otherExportFormat = format
+                }
+            )
+            #if !os(macOS)
                 .frame(width: 25, alignment: .center)
             #endif
-                Button(
-                    action: {
-                        print("Exported JSON == \(state.outputAsString())")
-                    },
-                    label: {
-                        Image(systemName: "printer.inverse")
-                    }
-                )
-#if !os(macOS)
-                .frame(width: 25, alignment: .center)
-#endif
-                Toggle(isOn: $isInspectorPresented) {
-                    Image.richTextFormatBrush
-                        .resizable()
-                        .aspectRatio(1, contentMode: .fit)
+            Button(
+                action: {
+                    print("Exported JSON == \(state.outputAsString())")
+                },
+                label: {
+                    Image(systemName: "printer.inverse")
                 }
-#if !os(macOS)
+            )
+            #if !os(macOS)
                 .frame(width: 25, alignment: .center)
-#endif
+            #endif
+            Toggle(isOn: $isInspectorPresented) {
+                Image.richTextFormatBrush
+                    .resizable()
+                    .aspectRatio(1, contentMode: .fit)
             }
+            #if !os(macOS)
+                .frame(width: 25, alignment: .center)
+            #endif
+        }
     }
 
     func getBindingAlert() -> Binding<Bool> {
-        .init(get: { exportFormat != nil || otherExportFormat != nil }, set: { newValue in
-            exportFormat = nil
-            otherExportFormat = nil
-        })
+        .init(
+            get: { exportFormat != nil || otherExportFormat != nil },
+            set: { newValue in
+                exportFormat = nil
+                otherExportFormat = nil
+            })
     }
 
     func submit() {
         guard !fileName.isEmpty else { return }
         var path: URL?
 
         if let exportFormat {
-            path = try? exportService.generateExportFile(withName: fileName, content: state.attributedString, format: exportFormat)
+            path = try? exportService.generateExportFile(
+                withName: fileName, content: state.attributedString,
+                format: exportFormat)
         }
         if let otherExportFormat {
             switch otherExportFormat {
             case .pdf:
-                path = try? exportService.generatePdfExportFile(withName: fileName, content: state.attributedString)
+                path = try? exportService.generatePdfExportFile(
+                    withName: fileName, content: state.attributedString)
             case .json:
-                path = try? exportService.generateJsonExportFile(withName: fileName, content: state.richText)
+                path = try? exportService.generateJsonExportFile(
+                    withName: fileName, content: state.richText)
             }
         }
         if let path {
@@ -153,14 +159,14 @@ struct ContentView: View {
     }
 }
 
-private extension ContentView {
+extension ContentView {
 
     var isMac: Bool {
-#if os(macOS)
-        true
-#else
-        false
-#endif
+        #if os(macOS)
+            true
+        #else
+            false
+        #endif
     }
 
     var colorPickers: [RichTextColor] {

Sources/RichEditorSwiftUI/Alignment/RichTextAlignment.swift

@@ -42,6 +42,12 @@ public enum RichTextAlignment: String, CaseIterable, Codable, Equatable, Identif
     case right
 }
 
+public extension RichTextAlignment {
+    func getTextSpanStyle() -> RichTextSpanStyle {
+        return .align(self)
+    }
+}
+
 public extension Collection where Element == RichTextAlignment {
 
     static var all: [Element] { RichTextAlignment.allCases }

Sources/RichEditorSwiftUI/BaseFoundation/RichTextCoordinator.swift

@@ -76,8 +76,6 @@ open class RichTextCoordinator: NSObject {
         super.init()
         self.textView.delegate = self
         subscribeToUserActions()
-
-//                observerAttributes()
     }
 #if canImport(UIKit)
 
@@ -237,6 +235,8 @@ extension RichTextCoordinator {
         sync(&context.fontName, with: font.fontName)
         sync(&context.fontSize, with: font.pointSize)
         sync(&context.isEditingText, with: textView.isFirstResponder)
+        sync(&context.paragraphStyle, with: textView.richTextParagraphStyle ?? .default)
+        sync(&context.textAlignment, with: textView.richTextAlignment ?? .left)
 
         let styles = textView.richTextStyles
         RichTextStyle.allCases.forEach {

Sources/RichEditorSwiftUI/Components/RichTextViewComponent+Alignment.swift

@@ -23,7 +23,7 @@ public extension RichTextViewComponent {
 
     /// Set the text alignment.
     func setRichTextAlignment(_ alignment: RichTextAlignment) {
-        if richTextAlignment == alignment { return }
+//        if richTextAlignment == alignment { return }
         let style = NSMutableParagraphStyle(
             from: richTextParagraphStyle,
             alignment: alignment

Sources/RichEditorSwiftUI/Data/Models/RichAttributes+RichTextAttributes.swift

@@ -31,7 +31,11 @@ extension RichAttributes {
         }
 
         if let fontName = self.font {
-            font = font.updateFontName(with: fontName)
+            let size = font.pointSize
+            let newFont = FontRepresentable(name: fontName, size: size)
+            if let newFont {
+                font = newFont
+            }
         }
 
         // Apply bold and italic styles

Sources/RichEditorSwiftUI/Data/Models/RichAttributes.swift

@@ -212,7 +212,7 @@ extension RichAttributes {
             styles.append(.background(.init(hex: background)))
         }
         if let align = align {
-            styles.append(.align(align))
+            styles.append(align.getTextSpanStyle())
         }
         return styles
     }
@@ -250,7 +250,7 @@ extension RichAttributes {
             styles.insert(.background(Color(hex: background)))
         }
         if let align = align {
-            styles.insert(.align(align))
+            styles.insert(align.getTextSpanStyle())
         }
         return styles
     }
@@ -318,38 +318,38 @@ internal func getRichAttributesFor(styles: [RichTextSpanStyle]) -> RichAttribute
 
     for style in styles {
         switch style {
-            case .bold:
-                bold = true
-            case .italic:
-                italic = true
-            case .underline:
-                underline = true
-            case .strikethrough:
-                strike = true
-            case .h1:
-                header = .h1
-            case .h2:
-                header = .h2
-            case .h3:
-                header = .h3
-            case .h4:
-                header = .h4
-            case .h5:
-                header = .h5
-            case .h6:
-                header = .h6
-            case .bullet(let indentIndex):
-                list = .bullet(indentIndex)
-                indent = indentIndex
-            case .default:
-                header = .default
-            case .size(let fontSize):
-                size = fontSize
-            case .font(let name):
-                font = name
-            case .color(let textColor):
+        case .bold:
+            bold = true
+        case .italic:
+            italic = true
+        case .underline:
+            underline = true
+        case .strikethrough:
+            strike = true
+        case .h1:
+            header = .h1
+        case .h2:
+            header = .h2
+        case .h3:
+            header = .h3
+        case .h4:
+            header = .h4
+        case .h5:
+            header = .h5
+        case .h6:
+            header = .h6
+        case .bullet(let indentIndex):
+            list = .bullet(indentIndex)
+            indent = indentIndex
+        case .default:
+            header = .default
+        case .size(let fontSize):
+            size = fontSize
+        case .font(let name):
+            font = name
+        case .color(let textColor):
             color = textColor?.hexString
-            case .background(let backgroundColor):
+        case .background(let backgroundColor):
             background = backgroundColor?.hexString
         case .align(let alignment):
             align = alignment

Sources/RichEditorSwiftUI/Format/RichTextFormat+Sidebar.swift

@@ -67,12 +67,13 @@ public extension RichTextFormat {
                         Spacer()
                         fontSizePicker(for: context)
                     }
+                    headerPicker(context: context)
                 }
 
                 Divider()
 
                 SidebarSection {
-                    alignmentPicker(value: $context.textAlignment)
+                    alignmentPicker(context: context)
                         .onChangeBackPort(of: context.textAlignment) { newValue in
                             context.updateStyle(style: .align(newValue))
                         }

Sources/RichEditorSwiftUI/Format/RichTextFormat+Toolbar.swift

@@ -133,7 +133,7 @@ private extension RichTextFormat.Toolbar {
             #if !macOS
             headerPicker(context: context)
             #endif
-            alignmentPicker(value: $context.textAlignment)
+            alignmentPicker(context: context)
 //            superscriptButtons(for: context, greedy: false)
 //            indentButtons(for: context, greedy: false)
         }

Sources/RichEditorSwiftUI/Format/RichTextFormat+ToolbarConfig.swift

@@ -17,12 +17,12 @@ public extension RichTextFormat {
             headers: [HeaderType] = .all,
             alignments: [RichTextAlignment] = .all,
             colorPickers: [RichTextColor] = [.foreground],
-            colorPickersDisclosed: [RichTextColor] = [.background],
+            colorPickersDisclosed: [RichTextColor] = [],
             fontPicker: Bool = true,
             fontSizePicker: Bool = true,
             indentButtons: Bool = true,
             lineSpacingPicker: Bool = false,
-            styles: [RichTextStyle] = [.bold, .italic, .underline, .strikethrough],
+            styles: [RichTextStyle] = .all,
             superscriptButtons: Bool = true
         ) {
             self.headers = headers

Sources/RichEditorSwiftUI/Format/RichTextFormatToolbarBase.swift

@@ -29,11 +29,11 @@ extension RichTextFormatToolbarBase {
 
     @ViewBuilder
     func alignmentPicker(
-        value: Binding<RichTextAlignment>
+        context: RichEditorState
     ) -> some View {
         if !config.alignments.isEmpty {
             RichTextAlignment.Picker(
-                selection: value,
+                selection: context.textAlignmentBinding(),
                 values: config.alignments
             )
             .pickerStyle(.segmented)

Sources/RichEditorSwiftUI/UI/EditorToolBar/ListType.swift renamed to Sources/RichEditorSwiftUI/ListStyle/ListType.swift

@@ -0,0 +1,41 @@
+//
+//  RichEditorState+TextAlignment.swift
+//  RichEditorSwiftUI
+//
+//  Created by Divyesh Vekariya on 29/12/24.
+//
+
+import SwiftUI
+
+public extension RichEditorState {
+
+    /// Get a binding for a certain TextAlignment style.
+    func textAlignmentBinding() -> Binding<RichTextAlignment> {
+        Binding(
+            get: { self.currentTextAlignment() },
+            set: { self.setTextAlignmentStyle($0) }
+        )
+    }
+
+    /// Check whether or not the context has a certain TextAlignment style.
+    func currentTextAlignment() -> RichTextAlignment {
+        return textAlignment
+    }
+
+    /// Set whether or not the context has a certain TextAlignment style.
+    func setTextAlignmentStyle(
+        _ alignment: RichTextAlignment
+    ) {
+        guard alignment != textAlignment else { return }
+        updateStyle(style: alignment.getTextSpanStyle())
+        setTextAlignmentInternal(alignment: alignment)
+    }
+
+    func setTextAlignmentInternal(
+        alignment: RichTextAlignment
+    ) {
+        guard alignment != textAlignment else { return }
+        textAlignment = alignment
+    }
+}
+