Added header style selection too (#60)

Author: cp-divyesh-v

Sources/RichEditorSwiftUI/Data/Models/HeaderType.swift

@@ -6,8 +6,9 @@
 //
 
 import Foundation
+import SwiftUI
 
-public enum HeaderType: Int, CaseIterable, Codable {
+public enum HeaderType: Int, CaseIterable, Codable, Equatable, Identifiable, RichTextLabelValue {
     case `default` = 0
     case h1 = 1
     case h2 = 2
@@ -16,22 +17,22 @@ public enum HeaderType: Int, CaseIterable, Codable {
     case h5 = 5
     case h6 = 6
 
-    var title: String {
+    var titleLabel: String {
         switch self {
         case .default:
-            return "Normal Text"
+            return "Body"
         case .h1:
-            return "Header 1"
+            return "H1"
         case .h2:
-            return "Header 2"
+            return "H2"
         case .h3:
-            return "Header 3"
+            return "H3"
         case .h4:
-            return "Header 4"
+            return "H4"
         case .h5:
-            return "Header 5"
+            return "H5"
         case .h6:
-            return "Header 6"
+            return "H6"
         }
     }
 
@@ -47,3 +48,44 @@ public enum HeaderType: Int, CaseIterable, Codable {
         }
     }
 }
+
+
+public extension Collection where Element == HeaderType {
+
+    static var all: [Element] { HeaderType.allCases }
+}
+
+public extension HeaderType {
+
+    /// The unique header ID.
+    var id: String { "\(rawValue)" }
+
+    /// The standard icon to use for the header.
+    var icon: Image {
+        switch self {
+        case .default: .richTextHeaderDefault
+        case .h1: .richTextHeader1
+        case .h2: .richTextHeader2
+        case .h3: .richTextHeader3
+        case .h4: .richTextHeader4
+        case .h5: .richTextHeader5
+        case .h6: .richTextHeader6
+        }
+    }
+
+    /// standard title to use for the headers.
+    var title: String { titleKey.text }
+
+    /// The standard title key to use for the header.
+    var titleKey: RTEL10n {
+        switch self {
+        case .default: .headerDefault
+        case .h1: .header1
+        case .h2: .header2
+        case .h3: .header3
+        case .h4: .header4
+        case .h5: .header5
+        case .h6: .header6
+        }
+    }
+}

Sources/RichEditorSwiftUI/Format/RichTextFormat+Toolbar.swift

@@ -114,6 +114,10 @@ private extension RichTextFormat.Toolbar {
     var controlsContent: some View {
         HStack {
             #if macOS
+            headerPicker(value: $context.headerType)
+                .onChangeBackPort(of: context.headerType) { newValue in
+                    context.updateStyle(style: newValue.getTextSpanStyle())
+                }
             fontPicker(value: $context.fontName)
                 .onChangeBackPort(of: context.fontName) { newValue in
                     context.updateStyle(style: .font(newValue))
@@ -129,6 +133,12 @@ private extension RichTextFormat.Toolbar {
             }
         }
         HStack {
+            #if !macOS
+            headerPicker(value: $context.headerType)
+                .onChangeBackPort(of: context.headerType) { newValue in
+                    context.updateStyle(style: newValue.getTextSpanStyle())
+                }
+            #endif
             alignmentPicker(value: $context.textAlignment)
 //            superscriptButtons(for: context, greedy: false)
 //            indentButtons(for: context, greedy: false)

Sources/RichEditorSwiftUI/Format/RichTextFormat+ToolbarConfig.swift

@@ -14,6 +14,7 @@ public extension RichTextFormat {
     struct ToolbarConfig {
 
         public init(
+            headers: [HeaderType] = .all,
             alignments: [RichTextAlignment] = .all,
             colorPickers: [RichTextColor] = [.foreground],
             colorPickersDisclosed: [RichTextColor] = [.background],
@@ -24,6 +25,7 @@ public extension RichTextFormat {
             styles: [RichTextStyle] = [.bold, .italic, .underline, .strikethrough],
             superscriptButtons: Bool = true
         ) {
+            self.headers = headers
             self.alignments = alignments
             self.colorPickers = colorPickers
             self.colorPickersDisclosed = colorPickersDisclosed
@@ -39,6 +41,7 @@ public extension RichTextFormat {
             #endif
         }
 
+        public var headers: [HeaderType]
         public var alignments: [RichTextAlignment]
         public var colorPickers: [RichTextColor]
         public var colorPickersDisclosed: [RichTextColor]

Sources/RichEditorSwiftUI/Format/RichTextFormatToolbarBase.swift

@@ -40,6 +40,19 @@ extension RichTextFormatToolbarBase {
         }
     }
 
+    @ViewBuilder
+    func headerPicker(
+        value: Binding<HeaderType>
+    ) -> some View {
+        if !config.headers.isEmpty {
+            RichTextHeader.Picker(
+                selection: value,
+                values: config.headers
+            )
+            .pickerStyle(.segmented)
+        }
+    }
+
     @ViewBuilder
     func colorPickers(
         for context: RichEditorState
@@ -88,7 +101,6 @@ extension RichTextFormatToolbarBase {
                     .labelStyle(.iconOnly)
                     .frame(minWidth: 30)
             }
-            .padding(.horizontal)
         }
     }
 

Sources/RichEditorSwiftUI/Headers/RichTextHeader+Picker.swift

@@ -0,0 +1,71 @@
+//
+//  RichTextHeader+Picker.swift
+//  RichEditorSwiftUI
+//
+//  Created by Divyesh Vekariya on 25/11/24.
+//
+
+import SwiftUI
+
+public extension RichTextHeader {
+
+    /**
+     This picker can be used to pick a Header type.
+
+     The view returns a plain SwiftUI `Picker` view that can
+     be styled and configured with plain SwiftUI.
+
+     You can configure this picker by applying a config view
+     modifier to your view hierarchy:
+
+     ```swift
+     VStack {
+     RichTextHeader.HeaderTypePicker(...)
+     ...
+     }
+     ```
+     */
+    struct Picker: View {
+
+        /**
+         Create a font size picker.
+
+         - Parameters:
+         - selection: The selected font size.
+         */
+        public init(
+            selection: Binding<HeaderType>,
+            values: [HeaderType]
+        ) {
+            self._selection = selection
+            self.values = values
+        }
+
+        @Binding
+        private var selection: HeaderType
+
+        private let values: [HeaderType]
+
+        public var body: some View {
+            SwiftUI.Picker("", selection: $selection) {
+                ForEach(values,
+                        id: \.self) {
+                    text(for: $0)
+                        .tag($0)
+                }
+            }
+            .pickerStyle(.automatic)
+        }
+    }
+}
+
+private extension RichTextHeader.Picker {
+
+    func text(
+        for headerType: HeaderType
+    ) -> some View {
+        Text(headerType.titleLabel)
+            .fixedSize(horizontal: true, vertical: false)
+    }
+}
+

Sources/RichEditorSwiftUI/Headers/RichTextHeader.swift

@@ -0,0 +1,11 @@
+//
+//  RichTextHeader.swift
+//  RichEditorSwiftUI
+//
+//  Created by Divyesh Vekariya on 25/11/24.
+//
+
+import SwiftUI
+
+/// This is a namespace for header-related types and views.
+public struct RichTextHeader {}

Sources/RichEditorSwiftUI/Images/Image+RichText.swift

@@ -31,6 +31,14 @@ public extension Image {
     static let richTextColorUnderline = symbol("underline")
     static let richTextColorUndefined = symbol("questionmark.app")
 
+    static let richTextHeaderDefault = symbol("textformat")
+    static let richTextHeader1 = symbol("textformat")
+    static let richTextHeader2 = symbol("textformat")
+    static let richTextHeader3 = symbol("textformat")
+    static let richTextHeader4 = symbol("textformat")
+    static let richTextHeader5 = symbol("textformat")
+    static let richTextHeader6 = symbol("textformat")
+
     static let richTextDocument = symbol("doc.text")
     static let richTextDocuments = symbol("doc.on.doc")
 

Sources/RichEditorSwiftUI/Keyboard/RichTextKeyboardToolbar.swift

@@ -114,6 +114,7 @@ public struct RichTextKeyboardToolbar<LeadingButtons: View, TrailingButtons: Vie
             HStack(spacing: style.itemSpacing) {
                 leadingViews
                 Spacer()
+                    .frame(minWidth: 0, maxWidth: .infinity)
                 trailingViews
             }
             .padding(10)

Sources/RichEditorSwiftUI/Localization/RTEL10n.swift

@@ -90,6 +90,14 @@ public enum RTEL10n: String, CaseIterable, Identifiable {
     textAlignmentCentered,
     textAlignmentJustified,
 
+    headerDefault,
+    header1,
+    header2,
+    header3,
+    header4,
+    header5,
+    header6,
+
     ignoreIt
 }
 

Sources/RichEditorSwiftUI/UI/Context/RichEditorState.swift

@@ -53,6 +53,9 @@ public class RichEditorState: ObservableObject {
     @Published
     public var isEditingText = false
 
+    @Published
+    public var headerType: HeaderType = .default
+
     /// The current text alignment, if any.
     @Published
     public var textAlignment: RichTextAlignment = .left