Change blockquote rendering

Text is italic, drawn with a green border. (Would be nice to use the tint color but that's not known at VC creation time)

Author: bdewey

CHANGELOG.md

@@ -6,6 +6,10 @@
 
 - `CodeSpan` support
 
+### Changed
+
+- Formatting for block quotes
+
 ## [0.11.0] - 2019-09-16
 
 ### Added

CommonplaceBookApp.xcodeproj/project.pbxproj

@@ -65,6 +65,7 @@
 		D35C72C32189E0720082396D /* TextCollectionViewCell.swift in Sources */ = {isa = PBXBuildFile; fileRef = D35C72C22189E0720082396D /* TextCollectionViewCell.swift */; };
 		D35E90C7230C5AD300A46B3F /* UserDefault.swift in Sources */ = {isa = PBXBuildFile; fileRef = D35E90C6230C5AD300A46B3F /* UserDefault.swift */; };
 		D35E90C9230C755D00A46B3F /* UIApplication+Environment.swift in Sources */ = {isa = PBXBuildFile; fileRef = D35E90C8230C755D00A46B3F /* UIApplication+Environment.swift */; };
+		D36214662334F607008C8FF4 /* LayoutManager.swift in Sources */ = {isa = PBXBuildFile; fileRef = D36214652334F607008C8FF4 /* LayoutManager.swift */; };
 		D36BC17C21B572ED00935691 /* TestMetadataProvider.swift in Sources */ = {isa = PBXBuildFile; fileRef = D36BC17B21B572ED00935691 /* TestMetadataProvider.swift */; };
 		D374AB56229380E500F54561 /* TemporaryFile.swift in Sources */ = {isa = PBXBuildFile; fileRef = D374AB55229380E500F54561 /* TemporaryFile.swift */; };
 		D374AB6B229655BA00F54561 /* TextSnippetArchive.swift in Sources */ = {isa = PBXBuildFile; fileRef = D374AB6A229655BA00F54561 /* TextSnippetArchive.swift */; };
@@ -198,6 +199,7 @@
 		D35C72C22189E0720082396D /* TextCollectionViewCell.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TextCollectionViewCell.swift; sourceTree = "<group>"; };
 		D35E90C6230C5AD300A46B3F /* UserDefault.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = UserDefault.swift; sourceTree = "<group>"; };
 		D35E90C8230C755D00A46B3F /* UIApplication+Environment.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "UIApplication+Environment.swift"; sourceTree = "<group>"; };
+		D36214652334F607008C8FF4 /* LayoutManager.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LayoutManager.swift; sourceTree = "<group>"; };
 		D36BC17B21B572ED00935691 /* TestMetadataProvider.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TestMetadataProvider.swift; sourceTree = "<group>"; };
 		D374AB55229380E500F54561 /* TemporaryFile.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TemporaryFile.swift; sourceTree = "<group>"; };
 		D374AB6A229655BA00F54561 /* TextSnippetArchive.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TextSnippetArchive.swift; sourceTree = "<group>"; };
@@ -409,6 +411,7 @@
 				D3591503231C3AC800883AC4 /* View+Locale.swift */,
 				D3D50A2C231AC8EB007440F1 /* VocabularyChallengeTemplate.swift */,
 				D30D261723193F9A0031AA20 /* VocabularyViewController.swift */,
+				D36214652334F607008C8FF4 /* LayoutManager.swift */,
 			);
 			path = CommonplaceBookApp;
 			sourceTree = "<group>";
@@ -674,6 +677,7 @@
 				D35C72C32189E0720082396D /* TextCollectionViewCell.swift in Sources */,
 				D37E6D34228D7AC6006CD0FA /* Observable.swift in Sources */,
 				D348A97A21C6C586005CA937 /* FileNameGenerator.swift in Sources */,
+				D36214662334F607008C8FF4 /* LayoutManager.swift in Sources */,
 				D31AFAC3229D61EE00ED2B76 /* String+Typography.swift in Sources */,
 				D3591500231C205500883AC4 /* EditVocabularyView.swift in Sources */,
 				D3E4476023254FAF00F21F91 /* EncodedImage.swift in Sources */,

CommonplaceBookApp.xcworkspace/xcshareddata/swiftpm/Package.resolved

@@ -0,0 +1,52 @@
+// Copyright © 2017-present Brian's Brain. All rights reserved.
+
+import Foundation
+import Logging
+import MiniMarkdown
+import UIKit
+
+private let logger = Logger(label: "org.brians-brian.CommonplaceBookApp.LayoutManager")
+
+/// Custom layout manager that knows how to draw vertical bars next to block quotes.
+/// Implementation inspired by the Wordpress Aztec HTML editing component:
+/// https://github.com/wordpress-mobile/AztecEditor-iOS/blob/develop/Aztec/Classes/TextKit/LayoutManager.swift
+final class LayoutManager: NSLayoutManager {
+  override func drawBackground(forGlyphRange glyphsToShow: NSRange, at origin: CGPoint) {
+    super.drawBackground(forGlyphRange: glyphsToShow, at: origin)
+    drawBlockquotes(forGlyphRange: glyphsToShow, at: origin)
+  }
+}
+
+// MARK: - Private
+
+private extension LayoutManager {
+  /// Text with a `.blockquoteBorderColor` attribute gets rendered as a block quote:
+  /// - The background is `quaternarySystemFill`
+  /// - A 4 point border on the left edge is filled with `blockquoteBorderColor`
+  func drawBlockquotes(forGlyphRange glyphsToShow: NSRange, at origin: CGPoint) {
+    guard let textStorage = textStorage else {
+      return
+    }
+
+    guard let context = UIGraphicsGetCurrentContext() else {
+      preconditionFailure("When drawBackgroundForGlyphRange is called, the graphics context is supposed to be set by UIKit")
+    }
+
+    let characterRange = self.characterRange(forGlyphRange: glyphsToShow, actualGlyphRange: nil)
+    textStorage.enumerateAttribute(.blockquoteBorderColor, in: characterRange, options: []) { object, range, _ in
+      guard let color = object as? UIColor else {
+        return
+      }
+      logger.debug("Drawing a vertical bar")
+      let verticalBarGlyphRange = glyphRange(forCharacterRange: range, actualCharacterRange: nil)
+      enumerateLineFragments(forGlyphRange: verticalBarGlyphRange) { rect, _, _, _, _ in
+        var verticalBarRect = rect.offsetBy(dx: origin.x, dy: origin.y)
+        UIColor.quaternarySystemFill.setFill()
+        context.fill(verticalBarRect)
+        verticalBarRect.size.width = 4
+        color.setFill()
+        context.fill(verticalBarRect)
+      }
+    }
+  }
+}

CommonplaceBookApp/LayoutManager.swift

@@ -114,7 +114,7 @@ final class TextEditViewController: UIViewController {
       }
     }
     formatters[.bold] = { $1.bold = true }
-    formatters[.emphasis] = { $1.italic = true }
+    formatters[.emphasis] = { $1.italic.toggle() }
     formatters[.table] = { $1.familyName = "Menlo" }
     formatters[.codeSpan] = { $1.familyName = "Menlo" }
     formatters[.cloze] = { $1.backgroundColor = UIColor.systemYellow.withAlphaComponent(0.3) }
@@ -123,7 +123,8 @@ final class TextEditViewController: UIViewController {
     }
     formatters[.hashtag] = { $1.backgroundColor = UIColor.secondarySystemBackground }
     formatters[.blockQuote] = {
-      $1.backgroundColor = UIColor.secondarySystemBackground
+      $1.italic = true
+      $1.blockquoteBorderColor = UIColor.systemGreen
       $1.listLevel += 1
     }
     return formatters
@@ -172,7 +173,7 @@ final class TextEditViewController: UIViewController {
   }
 
   private lazy var textView: UITextView = {
-    let layoutManager = NSLayoutManager()
+    let layoutManager = LayoutManager()
     textStorage.addLayoutManager(layoutManager)
     let textContainer = NSTextContainer()
     layoutManager.addTextContainer(textContainer)