Add live code formatting in the chat input

Inline single-backtick spans and multi-line fenced ```blocks``` now
render with monospace styling as you type, plus real per-language
syntax highlighting for fenced blocks (reusing the existing
SyntaxHighlighter utility). Only complete, closed spans/fences light
up — an unterminated backtick or fence is left as plain text until
closed.

Pure regex/range logic extracted into testable static functions
(inlineCodeRanges, fencedCodeBlocks, fencedCodeBlockRanges) rather
than living inline in the NSTextView coordinator.
This commit is contained in:
2026-08-02 15:22:21 +02:00
parent 40c03108c9
commit 0e4389d272
2 changed files with 270 additions and 1 deletions
+96 -1
View File
@@ -1,6 +1,6 @@
//
// NativeTextEditor.swift
// oAI
// Confab
//
// NSViewRepresentable text editor with correct Enter-key semantics:
// plain Enter send, Shift+Enter or Cmd+Enter newline.
@@ -85,6 +85,10 @@ struct NativeTextEditor: NSViewRepresentable {
coord.onUpArrow = onUpArrow
coord.onDownArrow = onDownArrow
coord.onFocusChange = onFocusChange
coord.baseFont = font
coord.baseTextColor = textColor
coord.applyInlineCodeStyling()
if isFocused {
DispatchQueue.main.async {
@@ -96,6 +100,50 @@ struct NativeTextEditor: NSViewRepresentable {
func makeCoordinator() -> Coordinator { Coordinator() }
/// Ranges of complete, closed single-backtick spans on one line (e.g. "Hello `code` world"
/// the range covering `` `code` ``, backticks included). An unterminated backtick with no
/// closing pair yet is deliberately not matched it only lights up once closed. Doesn't match
/// across a newline, so a fenced block's opening/closing ``` triples never get mistaken for
/// this. Pulled out as a pure function so it's testable without a live NSTextView.
nonisolated static func inlineCodeRanges(in text: String) -> [NSRange] {
guard let regex = try? NSRegularExpression(pattern: "`[^`\\n]+`") else { return [] }
let nsText = text as NSString
return regex.matches(in: text, range: NSRange(location: 0, length: nsText.length)).map { $0.range }
}
/// Complete, closed fenced blocks, each with the full `````` range, the language tag (if any,
/// from right after the opening fence, e.g. "```python"), and the range of just the code
/// content (excluding the fences and the language-tag line). An unterminated fence with no
/// closing ``` yet is not matched, same "only when closed" rule as inline spans.
nonisolated static func fencedCodeBlocks(in text: String) -> [(fullRange: NSRange, language: String?, codeRange: NSRange)] {
guard let regex = try? NSRegularExpression(pattern: "```([A-Za-z0-9_+-]*)[ \\t]*\\n([\\s\\S]*?)```") else { return [] }
let nsText = text as NSString
let matches = regex.matches(in: text, range: NSRange(location: 0, length: nsText.length))
return matches.map { match in
let langRange = match.range(at: 1)
let language = langRange.length > 0 ? nsText.substring(with: langRange) : nil
return (fullRange: match.range, language: language, codeRange: match.range(at: 2))
}
}
/// Ranges of complete, closed triple-backtick fenced blocks (may span multiple lines,
/// including an optional language tag right after the opening fence). An unterminated fence
/// with no closing ``` yet is not matched, same "only when closed" rule as inline spans.
nonisolated static func fencedCodeBlockRanges(in text: String) -> [NSRange] {
fencedCodeBlocks(in: text).map { $0.fullRange }
}
/// Every range that should render as code: fenced ```blocks``` plus inline `spans` except
/// any inline span that falls inside a fenced block (so a stray backtick inside a code block's
/// own content never gets double-styled or splits the block's styling).
nonisolated static func codeStyledRanges(in text: String) -> [NSRange] {
let fenced = fencedCodeBlockRanges(in: text)
let inline = inlineCodeRanges(in: text).filter { inlineRange in
!fenced.contains { NSIntersectionRange($0, inlineRange).length > 0 }
}
return (fenced + inline).sorted { $0.location < $1.location }
}
// MARK: - Coordinator
final class Coordinator: NSObject, NSTextViewDelegate {
@@ -108,6 +156,8 @@ struct NativeTextEditor: NSViewRepresentable {
var onUpArrow: () -> Bool = { false }
var onDownArrow: () -> Bool = { false }
var onFocusChange: (Bool) -> Void = { _ in }
var baseFont: NSFont = .systemFont(ofSize: NSFont.systemFontSize)
var baseTextColor: NSColor = .textColor
override init() {
super.init()
@@ -117,6 +167,51 @@ struct NativeTextEditor: NSViewRepresentable {
func textDidChange(_ notification: Notification) {
guard let tv = notification.object as? NSTextView else { return }
textBinding?.wrappedValue = tv.string
applyInlineCodeStyling()
}
/// Re-applies code styling (inline spans and fenced blocks) to the whole text after any
/// edit purely visual (font/color attributes on the existing characters), never touches
/// the actual string content, so the backticks/fences stay in the sent message as typed.
func applyInlineCodeStyling() {
let storage = textView.textStorage!
let fullRange = NSRange(location: 0, length: storage.length)
let monoFont = NSFont.monospacedSystemFont(ofSize: baseFont.pointSize, weight: .regular)
storage.beginEditing()
storage.setAttributes([.font: baseFont, .foregroundColor: baseTextColor], range: fullRange)
for range in NativeTextEditor.codeStyledRanges(in: storage.string) {
storage.addAttributes([
.font: monoFont,
.backgroundColor: NSColor.textColor.withAlphaComponent(0.08)
], range: range)
}
applySyntaxHighlighting(to: storage)
storage.endEditing()
}
/// Colors keywords/strings/comments/numbers inside each fenced block's code content using
/// the same per-language `SyntaxHighlighter` already used to render assistant messages
/// only overlays `.foregroundColor` on top of the monospace/background pass above, so it
/// never fights that pass's font.
private func applySyntaxHighlighting(to storage: NSTextStorage) {
let nsText = storage.string as NSString
for block in NativeTextEditor.fencedCodeBlocks(in: storage.string) {
let codeRange = block.codeRange
guard codeRange.location != NSNotFound, codeRange.length > 0 else { continue }
let code = nsText.substring(with: codeRange)
let highlighted = SyntaxHighlighter.highlight(code: code, language: block.language)
// Read runs directly off the AttributedString rather than bridging to
// NSAttributedString that bridge stores SwiftUI's `.foregroundColor` under a
// private `SwiftUI.ForegroundColor` key, not the standard Cocoa `.foregroundColor`
// key, so it never actually carries the color over (confirmed empirically).
for run in highlighted.runs {
guard let color = run.foregroundColor else { continue }
let runNSRange = NSRange(run.range, in: highlighted)
let absoluteRange = NSRange(location: codeRange.location + runNSRange.location, length: runNSRange.length)
storage.addAttribute(.foregroundColor, value: NSColor(color), range: absoluteRange)
}
}
}
}
}