ehealthsolutions/element-x-ios
3
0
Fork 0
mirror of https://github.com/Novaloop-AG/element-x-ios.git synced 2026-11-02 21:33:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Horizontally scrollable code blocks (#5001)

Browse Source 
* Remove attributed string backed codeblock background color

* Add code block support to attributed string componentization

* Render code blocks within their own custom horizontal scroll view within the timeline

* Update preview test snapshots

* Introduce a attributed string component type instead of a 2 different booleans.
This commit is contained in:
Stefan Ceriu
2026-01-26 12:39:55 +02:00
committed by GitHub
parent bb801d0be1
commit cf79cb9b01
9 changed files with 75 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ElementX/Sources/Other/Extensions/AttributedString.swift
+20 -5
View File
@@ -15,8 +15,12 @@ extension AttributedString {
}
var formattedComponents: [AttributedStringBuilderComponent] {
runs[\.blockquote].map { value, range in
var attributedString = AttributedString(self[range])
var components = [AttributedStringBuilderComponent]()
for run in runs[\.blockquote, \.codeBlock] {
let isBlockquote = run.0 != nil
let isCodeBlock = run.1 != nil
var attributedString = AttributedString(self[run.2])
// Remove trailing new lines if any
if attributedString.characters.last?.isNewline ?? false,
@@ -24,10 +28,21 @@ extension AttributedString {
attributedString.removeSubrange(range)
}
let isBlockquote = value != nil
return AttributedStringBuilderComponent(id: String(attributedString.characters), attributedString: attributedString, isBlockquote: isBlockquote)
let componentType: AttributedStringBuilderComponent.ComponentType = switch (isBlockquote, isCodeBlock) {
case (true, _):
.blockquote
case (false, true):
.codeBlock
case (false, false):
.plainText
}
components.append(AttributedStringBuilderComponent(id: String(attributedString.characters),
attributedString: attributedString,
type: componentType))
}
return components
}
/// Replaces the specified placeholder with a string that links to the specified URL.
ElementX/Sources/Other/HTMLParsing/AttributedStringBuilder.swift
-1
View File
@@ -204,7 +204,6 @@ struct AttributedStringBuilder: AttributedStringBuilderProtocol {
content.setFontPreservingSymbolicTraits(UIFont.monospacedSystemFont(ofSize: fontPointSize, weight: .regular))
content.addAttribute(.CodeBlock, value: true, range: NSRange(location: 0, length: content.length))
content.addAttribute(.backgroundColor, value: UIColor.compound._bgCodeBlock as Any, range: NSRange(location: 0, length: content.length))
// Don't allow identifiers or links in code blocks
content.removeAttribute(.MatrixRoomID, range: NSRange(location: 0, length: content.length))
ElementX/Sources/Other/HTMLParsing/AttributedStringBuilderProtocol.swift
+7 -1
View File
@@ -9,9 +9,15 @@
import Foundation
struct AttributedStringBuilderComponent: Hashable, Identifiable {
enum ComponentType {
case plainText
case blockquote
case codeBlock
}
let id: String
let attributedString: AttributedString
let isBlockquote: Bool
let type: ComponentType
}
protocol AttributedStringBuilderProtocol {
ElementX/Sources/Screens/Timeline/View/TimelineItemViews/FormattedBodyText.swift
+38 -19
View File
@@ -81,34 +81,53 @@ struct FormattedBodyText: View {
// Ignore if the string contains only the layout correction
if String(component.attributedString.characters) == layoutDirection.isolateLayoutUnicodeString {
EmptyView()
} else if component.isBlockquote {
// The rendered blockquote with a greedy width. The custom layout prevents the
// infinite width from increasing the overall width of the view.
MessageText(attributedString: component.attributedString.mergingAttributes(blockquoteAttributes))
.fixedSize(horizontal: false, vertical: true)
.frame(maxWidth: .infinity, alignment: .leading)
.padding(.leading, 12.0)
.overlay(alignment: .leading) {
// User an overlay here so that the rectangle's infinite height doesn't take priority
Capsule()
.frame(width: 2.0)
.padding(.leading, 5.0)
.foregroundColor(.compound.textSecondary)
.padding(.vertical, 2)
}
.layoutPriority(TimelineBubbleLayout.Priority.visibleQuote)
} else {
MessageText(attributedString: component.attributedString)
.padding(.horizontal, 4)
switch component.type {
case .blockquote:
// The rendered blockquote with a greedy width. The custom layout prevents the
// infinite width from increasing the overall width of the view.
MessageText(attributedString: component.attributedString.mergingAttributes(blockquoteAttributes))
.fixedSize(horizontal: false, vertical: true)
.frame(maxWidth: .infinity, alignment: .leading)
.padding(.leading, 12.0)
.overlay(alignment: .leading) {
// User an overlay here so that the rectangle's infinite height doesn't take priority
Capsule()
.frame(width: 2.0)
.padding(.leading, 5.0)
.foregroundColor(.compound.textSecondary)
.padding(.vertical, 2)
}
.layoutPriority(TimelineBubbleLayout.Priority.visibleQuote)
case .codeBlock:
ScrollView(.horizontal) {
MessageText(attributedString: component.attributedString)
.padding([.horizontal, .top], 4)
.padding(.bottom, 8)
}
.background(.compound._bgCodeBlock)
.scrollIndicatorsFlash(onAppear: true)
.fixedSize(horizontal: false, vertical: true)
.padding(.horizontal, 4)
.layoutPriority(TimelineBubbleLayout.Priority.regularText)
.contextMenu {
Button(L10n.actionCopy) {
UIPasteboard.general.string = component.attributedString.string
}
}
case .plainText:
MessageText(attributedString: component.attributedString)
.padding(.horizontal, 4)
.fixedSize(horizontal: false, vertical: true)
.layoutPriority(TimelineBubbleLayout.Priority.regularText)
}
}
}
// Make a second iteration through the components adding fixed width blockquotes
// which are used for layout calculations but won't be rendered.
ForEach(attributedComponents) { component in
if component.isBlockquote {
if case .blockquote = component.type {
MessageText(attributedString: component.attributedString.mergingAttributes(blockquoteAttributes))
.fixedSize(horizontal: false, vertical: true)
.padding(.leading, 12.0)