Skip to content

DKVekariya/RichTextEditorDemo

Repository files navigation

iOS Swift SwiftUI

πŸ“ SwiftUI Rich Text Editor

A modern, native rich text editor built with SwiftUI and iOS 26+ APIs. This demo showcases the power of AttributedString, AttributedTextSelection, and TextEditor to create a fully-featured text formatting experience without UIKit.

✨ Features

🎨 Text Formatting

  • Bold - Make your text stand out
  • Italic - Add emphasis with style
  • Underline - Highlight important content
  • Strikethrough - Mark completed items or revisions

🌈 Color Controls

  • Text Color - Full color picker for foreground text
  • Background Color - Highlight text with custom backgrounds
  • Clear Background - Remove highlighting with one tap

πŸ“ Font Customization

  • Font Size Control - Adjust from 8pt to 72pt
  • Increment/Decrement - Precise 2pt adjustments
  • Visual Feedback - Live size indicator

🎯 Smart Features

  • Active State Indicators - Visual feedback for applied formatting
  • Clear Formatting - Remove all formatting with one tap
  • Select All - Quick text selection
  • Sample Text Insertion - Demo formatted text
  • Character Counter - Track document length in real-time

🎨 Modern UI/UX

  • Horizontal Scrolling Toolbar - Fits all controls elegantly
  • Color Picker Integration - Native iOS color selection
  • Status Bar - Live document statistics
  • Responsive Design - Works on all iOS devices

Article

I have also written detaild article on this which explains it well, You can have a look here: https://medium.com/@dkvekariya/how-to-build-rich-text-editor-in-swiftui-f09a39d2dce9

πŸ“± Screenshots

mac Editor dark

πŸš€ Getting Started

Prerequisites

  • Xcode 16.0+ or later
  • iOS 26.0+ deployment target
  • macOS Sonoma or later (for development)

Installation

  1. Clone the repository

    git clone https://github.com/yourusername/swiftui-rich-text-editor.git
    cd swiftui-rich-text-editor
  2. Open in Xcode

    open RichTextEditorDemo.xcodeproj
  3. Build and Run

    • Select your target device or simulator
    • Press ⌘ + R to build and run

πŸ’» Code Structure

RichTextEditorDemo/
β”œβ”€β”€ ContentView.swift          # Main editor view
β”œβ”€β”€ ToolbarButton.swift        # Reusable toolbar button component
β”œβ”€β”€ RichTextEditorApp.swift    # App entry point
└── Assets.xcassets/           # App assets

πŸŽ“ Key Concepts

Using FontResolutionContext

The app leverages fontResolutionContext to accurately detect font traits:

@Environment(\.fontResolutionContext) var fontResolutionContext

private var isBold: Bool {
    let attributes = selection.typingAttributes(in: attributedText)
    if let font = attributes.font {
        let resolved = font.resolve(in: fontResolutionContext)
        return resolved.isBold
    }
    return false
}

Transform Attributes Pattern

All formatting uses the modern transformAttributes(in:) API:

func toggleBold() {
    attributedText.transformAttributes(in: &selection) { container in
        let currentFont = container.font ?? .body
        let resolved = currentFont.resolve(in: fontResolutionContext)
        container.font = currentFont.bold(!resolved.isBold)
    }
}

Typing Attributes

Check current formatting state without accessing internal ranges:

let attributes = selection.typingAttributes(in: attributedText)
if let font = attributes.font {
    // Work with font attributes
}

πŸ—οΈ Architecture Highlights

State Management

  • Uses @State for local view state
  • Leverages SwiftUI's automatic UI updates
  • Minimal state for optimal performance

Environment Integration

  • Proper use of @Environment for system values
  • Respects iOS design patterns

Reusable Components

  • ToolbarButton - Custom button with active states
  • Modular design for easy extension

🎯 iOS 26+ API Features

This demo exclusively uses iOS 26+ APIs:

βœ… AttributedTextSelection - Modern selection handling
βœ… FontResolutionContext - Accurate trait detection
βœ… transformAttributes(in:) - Safe attribute modification
βœ… typingAttributes(in:) - State inspection
βœ… AttributedString - Rich text representation

πŸ“š Learning Resources

Key Concepts Demonstrated

  1. Working with AttributedTextSelection

    • No direct range access
    • Using typingAttributes(in:) and transformAttributes(in:)
  2. Font Trait Resolution

    • Using fontResolutionContext for accurate detection
    • Proper bold/italic toggling
  3. Color Management

    • ColorPicker integration
    • Foreground and background colors
  4. Attribute Containers

    • Modifying multiple attributes efficiently
    • Clearing all formatting

πŸ”§ Customization

Adding New Formatting Options

// Example: Add superscript
func toggleSuperscript() {
    attributedText.transformAttributes(in: &selection) { container in
        let currentOffset = container.baselineOffset ?? 0
        container.baselineOffset = currentOffset == 0 ? 5 : 0
    }
}

Changing Color Scheme

Modify the toolbar background:

.background(Color(.systemGray6))  // Change to your preferred color

πŸ› Known Limitations

  • iOS 26+ Only - Requires latest iOS version
  • No Undo/Redo - Not implemented in this demo
  • Single Font Family - Uses system font only
  • No Persistence - Text is not saved between sessions

πŸ‘¨β€πŸ’» Author

Your Name

πŸ™ Acknowledgments

  • Inspired by Apple's WWDC 2024 sessions on SwiftUI
  • Built following iOS 26+ design patterns
  • Special thanks to the SwiftUI community

⭐ Show Your Support

If this project helped you, please give it a ⭐️!


Built with ❀️ using SwiftUI

Last Updated: October 2025

Releases

No releases published

Packages

No packages published

Languages