$escaped" + ) + } + ) + } + + fun read(context: Context): Map
\(escaped)".utf8) + } + } + UIPasteboard.general.items = [items] + } + + static func read() -> [String: String] { + let board = UIPasteboard.general + return [ + "text": board.string ?? "", + "fragment": board.data(forPasteboardType: fragmentType).flatMap { String(data: $0, encoding: .utf8) } ?? "", + "html": board.data(forPasteboardType: "public.html").flatMap { String(data: $0, encoding: .utf8) } ?? "", + ] + } +} public class T3ComposerEditorModule: Module { public func definition() -> ModuleDefinition { Name("T3ComposerEditor") + AsyncFunction("writeContextClipboard") { (text: String, fragment: String) in + T3ComposerClipboard.write(text: text, fragment: fragment) + }.runOnQueue(.main) + View(T3ComposerEditorView.self) { Prop("controlledDocumentJson") { (view: T3ComposerEditorView, documentJson: String) in view.setControlledDocumentJson(documentJson) @@ -11,6 +51,9 @@ public class T3ComposerEditorModule: Module { Prop("themeJson") { (view: T3ComposerEditorView, themeJson: String) in view.setThemeJson(themeJson) } + Prop("clipboardFragment") { (view: T3ComposerEditorView, fragment: String) in + view.setClipboardFragment(fragment) + } Prop("placeholder") { (view: T3ComposerEditorView, placeholder: String) in view.setPlaceholder(placeholder) } @@ -52,6 +95,8 @@ public class T3ComposerEditorModule: Module { "onComposerBlur", "onComposerSubmit", "onComposerPasteImages", + "onComposerContextPress", + "onComposerPasteContext", "onComposerContentSizeChange" ) diff --git a/apps/mobile/modules/t3-composer-editor/ios/T3ComposerEditorView.swift b/apps/mobile/modules/t3-composer-editor/ios/T3ComposerEditorView.swift index fe63acc8eb94..11c62f36f226 100644 --- a/apps/mobile/modules/t3-composer-editor/ios/T3ComposerEditorView.swift +++ b/apps/mobile/modules/t3-composer-editor/ios/T3ComposerEditorView.swift @@ -6,6 +6,9 @@ private struct ComposerTokenPayload: Decodable { let source: String let label: String let iconUri: String? + let accent: String? + let symbol: String? + let detail: String? let start: Int let end: Int } @@ -44,9 +47,11 @@ private struct ComposerChipStyle { private final class ComposerTextAttachment: NSTextAttachment { let source: String + let label: String - init(source: String, image: UIImage, size: CGSize, baselineOffset: CGFloat) { + init(source: String, label: String, image: UIImage, size: CGSize, baselineOffset: CGFloat) { self.source = source + self.label = label super.init(data: nil, ofType: nil) self.image = image bounds = CGRect(x: 0, y: baselineOffset, width: size.width, height: size.height) @@ -57,6 +62,14 @@ private final class ComposerTextAttachment: NSTextAttachment { } } +private final class ComposerContextAccessibilityElement: UIAccessibilityElement { + var activate: (() -> Bool)? + + override func accessibilityActivate() -> Bool { + activate?() ?? false + } +} + private final class ComposerTextView: UITextView { private static let pastedImageDirectoryName = "t3-composer-paste" private static let stalePastedImageAge: TimeInterval = 60 * 60 @@ -72,6 +85,8 @@ private final class ComposerTextView: UITextView { ]) var onPasteImages: (([String]) -> Void)? + var onPasteContext: (([String: String]) -> Void)? + var clipboardFragment = "" var onAttributedMutation: (() -> Void)? var onSubmit: (() -> Void)? var isReadOnly = false @@ -114,6 +129,11 @@ private final class ComposerTextView: UITextView { return } let pasteboard = UIPasteboard.general + let context = T3ComposerClipboard.read() + if !context["fragment", default: ""].isEmpty || context["html", default: ""].contains("data-t3-context-fragment=") { + onPasteContext?(context) + return + } let imageProviders = pasteboard.itemProviders.filter { $0.canLoadObject(ofClass: UIImage.self) } @@ -194,7 +214,7 @@ private final class ComposerTextView: UITextView { guard selectedRange.length > 0 else { return super.copy(sender) } - UIPasteboard.general.string = serializedText(in: selectedRange) + T3ComposerClipboard.write(text: serializedText(in: selectedRange), fragment: clipboardFragment) } override func cut(_ sender: Any?) { @@ -308,7 +328,7 @@ private final class ComposerTextView: UITextView { } } -public final class T3ComposerEditorView: ExpoView, UITextViewDelegate, UITextDropDelegate { +public final class T3ComposerEditorView: ExpoView, UITextViewDelegate, UITextDropDelegate, UIGestureRecognizerDelegate { private let textView = ComposerTextView() private let placeholderLabel = UILabel() private var value = "" @@ -346,6 +366,8 @@ public final class T3ComposerEditorView: ExpoView, UITextViewDelegate, UITextDro let onComposerBlur = EventDispatcher() let onComposerSubmit = EventDispatcher() let onComposerPasteImages = EventDispatcher() + let onComposerContextPress = EventDispatcher() + let onComposerPasteContext = EventDispatcher() let onComposerContentSizeChange = EventDispatcher() public required init(appContext: AppContext? = nil) { @@ -364,12 +386,19 @@ public final class T3ComposerEditorView: ExpoView, UITextViewDelegate, UITextDro textView.onPasteImages = { [weak self] urls in self?.onComposerPasteImages(["uris": urls]) } + textView.onPasteContext = { [weak self] context in + self?.onComposerPasteContext(context) + } textView.onAttributedMutation = { [weak self] in self?.emitTextChange() } textView.onSubmit = { [weak self] in self?.onComposerSubmit([:]) } + let contextTap = UITapGestureRecognizer(target: self, action: #selector(openContext(_:))) + contextTap.cancelsTouchesInView = false + contextTap.delegate = self + textView.addGestureRecognizer(contextTap) addSubview(textView) placeholderLabel.numberOfLines = 0 @@ -379,6 +408,70 @@ public final class T3ComposerEditorView: ExpoView, UITextViewDelegate, UITextDro applyTheme() } + @objc private func openContext(_ recognizer: UITapGestureRecognizer) { + guard let (index, attachment) = contextAttachment(at: recognizer.location(in: textView)) else { + textView.becomeFirstResponder() + return + } + openContext(index: index, attachment: attachment) + } + + private func openContext(index: Int, attachment: ComposerTextAttachment) { + let start = textView.sourceOffset(forDisplayOffset: index) + onComposerContextPress(["source": attachment.source, "start": start, "end": start + (attachment.source as NSString).length]) + } + + public override var accessibilityElements: [Any]? { + get { + var elements: [Any] = [textView] + let layout = textView.layoutManager + textView.textStorage.enumerateAttribute(.attachment, in: NSRange(location: 0, length: textView.textStorage.length)) { value, range, _ in + guard let attachment = value as? ComposerTextAttachment else { return } + let glyphRange = layout.glyphRange(forCharacterRange: range, actualCharacterRange: nil) + let rect = layout.boundingRect(forGlyphRange: glyphRange, in: textView.textContainer) + .offsetBy(dx: textView.textContainerInset.left, dy: textView.textContainerInset.top) + guard rect.intersects(textView.bounds) else { return } + let element = ComposerContextAccessibilityElement(accessibilityContainer: self) + element.accessibilityLabel = attachment.label + element.accessibilityTraits = .button + element.accessibilityFrameInContainerSpace = textView.convert(rect, to: self) + element.activate = { [weak self] in + guard let self, range.location < self.textView.textStorage.length, + self.textView.textStorage.attribute(.attachment, at: range.location, effectiveRange: nil) as? ComposerTextAttachment === attachment else { return false } + self.openContext(index: range.location, attachment: attachment) + return true + } + elements.append(element) + } + return elements + } + set { super.accessibilityElements = newValue } + } + + public func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldReceive touch: UITouch) -> Bool { + true + } + + public func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool { + true + } + + public func textView(_ textView: UITextView, shouldInteractWith textAttachment: NSTextAttachment, in characterRange: NSRange, interaction: UITextItemInteraction) -> Bool { + // A chip is text context, not an image to save to the camera roll. + !(textAttachment is ComposerTextAttachment) + } + + private func contextAttachment(at point: CGPoint) -> (Int, ComposerTextAttachment)? { + let containerPoint = CGPoint(x: point.x - textView.textContainerInset.left, y: point.y - textView.textContainerInset.top) + let layout = textView.layoutManager + let index = layout.characterIndex(for: containerPoint, in: textView.textContainer, fractionOfDistanceBetweenInsertionPoints: nil) + guard index < textView.textStorage.length, + let attachment = textView.textStorage.attribute(.attachment, at: index, effectiveRange: nil) as? ComposerTextAttachment else { return nil } + let glyphRange = layout.glyphRange(forCharacterRange: NSRange(location: index, length: 1), actualCharacterRange: nil) + guard layout.boundingRect(forGlyphRange: glyphRange, in: textView.textContainer).contains(containerPoint) else { return nil } + return (index, attachment) + } + public override func layoutSubviews() { super.layoutSubviews() textView.frame = bounds @@ -398,6 +491,10 @@ public final class T3ComposerEditorView: ExpoView, UITextViewDelegate, UITextDro emitContentSizeIfNeeded() } + func setClipboardFragment(_ fragment: String) { + textView.clipboardFragment = fragment + } + public override func didMoveToWindow() { super.didMoveToWindow() guard window != nil, shouldAutoFocus, !didAutoFocus else { @@ -646,21 +743,26 @@ public final class T3ComposerEditorView: ExpoView, UITextViewDelegate, UITextDro private func makeAttachmentString(_ token: ComposerTokenPayload) -> NSAttributedString { let isSkill = token.type == "skill" - let tint = UIColor(composerHex: isSkill ? theme.skillText : theme.fileTint) ?? .secondaryLabel - let iconName = isSkill ? "cube" : "doc" + let accent = token.accent.flatMap { UIColor(composerHex: $0) } + let foreground = UIColor(composerHex: theme.chipText) ?? .label + let border = UIColor(composerHex: theme.chipBorder) ?? .separator + let tint = accent.map { blend($0, over: foreground, weight: 0.22) } + ?? UIColor(composerHex: isSkill ? theme.skillText : theme.fileTint) ?? .secondaryLabel + let iconName = token.symbol ?? (isSkill ? "cube" : "doc") let iconImage = token.iconUri.flatMap(iconImage(for:)) let style = ComposerChipStyle( tint: tint, - backgroundColor: UIColor( + backgroundColor: accent?.withAlphaComponent(0.11) ?? UIColor( composerHex: isSkill ? theme.skillBackground : theme.chipBackground ) ?? .secondarySystemFill, - borderColor: UIColor( + borderColor: accent.map { blend($0, over: border, weight: 0.34) } ?? UIColor( composerHex: isSkill ? theme.skillBorder : theme.chipBorder ) ?? .separator, - textColor: UIColor(composerHex: isSkill ? theme.skillText : theme.chipText) ?? .label + textColor: tint ) let image = renderChip( label: token.label, + detail: token.detail, iconName: iconName, iconImage: iconImage, style: style @@ -670,6 +772,7 @@ public final class T3ComposerEditorView: ExpoView, UITextViewDelegate, UITextDro let baselineOffset = floor((font.capHeight - image.size.height) / 2) let attachment = ComposerTextAttachment( source: token.source, + label: token.label, image: image, size: image.size, baselineOffset: baselineOffset @@ -682,60 +785,138 @@ public final class T3ComposerEditorView: ExpoView, UITextViewDelegate, UITextDro return attributedAttachment } + /// Chip glyphs with no SF Symbol that reads correctly. A pull request would otherwise land on + /// `arrow.triangle.branch`, a road-sign fork that says "branch", not "pull request", so it is + /// drawn from the same lucide geometry web and Android use. + private static func vectorIcon(named name: String, size: CGFloat, color: UIColor) -> UIImage? { + guard name == "git-pull-request" else { return nil } + return UIGraphicsImageRenderer(size: CGSize(width: size, height: size)).image { _ in + let s = size / 24 // lucide authors on a 24pt grid. + let path = UIBezierPath() + for centre in [CGPoint(x: 18 * s, y: 18 * s), CGPoint(x: 6 * s, y: 6 * s)] { + path.append(UIBezierPath(arcCenter: centre, radius: 3 * s, startAngle: 0, + endAngle: .pi * 2, clockwise: true)) + } + path.move(to: CGPoint(x: 13 * s, y: 6 * s)) + path.addLine(to: CGPoint(x: 16 * s, y: 6 * s)) + path.addCurve(to: CGPoint(x: 18 * s, y: 8 * s), + controlPoint1: CGPoint(x: 17.1 * s, y: 6 * s), + controlPoint2: CGPoint(x: 18 * s, y: 6.9 * s)) + path.addLine(to: CGPoint(x: 18 * s, y: 15 * s)) + path.move(to: CGPoint(x: 6 * s, y: 9 * s)) + path.addLine(to: CGPoint(x: 6 * s, y: 21 * s)) + path.lineWidth = 2 * s + path.lineCapStyle = .round + path.lineJoinStyle = .round + color.setStroke() + path.stroke() + } + } + private func renderChip( label: String, + detail: String?, iconName: String, iconImage: UIImage?, style: ComposerChipStyle ) -> UIImage { - let font = UIFont(name: "DMSans-Medium", size: max(12, fontSize - 2)) - ?? UIFont.systemFont(ofSize: max(12, fontSize - 2), weight: .medium) - let fallbackIcon = UIImage( - systemName: iconName, - withConfiguration: UIImage.SymbolConfiguration(pointSize: 12, weight: .medium) - ) + // Kept in step with `T3ContextChipVectorIcon` in the markdown module: a chip drawn here and + // the same chip drawn in a sent message have to be the same picture. + let chipFontSize = fontSize * 0.86 + let font = UIFont(name: "DMSans-Medium", size: chipFontSize) + ?? UIFont.systemFont(ofSize: chipFontSize, weight: .medium) + let fallbackIcon = Self.vectorIcon(named: iconName, size: 14, color: style.textColor) + ?? UIImage( + systemName: iconName, + withConfiguration: UIImage.SymbolConfiguration(pointSize: 12, weight: .medium) + ) let icon = iconImage ?? fallbackIcon - let textSize = (label as NSString).size(withAttributes: [.font: font]) - let iconWidth = icon == nil ? 0 : 14 - let iconGap = icon == nil ? 0 : 5 - let height: CGFloat = 24 - let width = ceil(9 + CGFloat(iconWidth + iconGap) + textSize.width + 9) + // The size reads as metadata, not part of the name, so it renders a step down from the + // label the way the web chip does. + let paragraph = NSMutableParagraphStyle() + paragraph.alignment = .left + let detailFont = UIFont(name: "DMSans-Medium", size: chipFontSize * 0.84) + ?? UIFont.systemFont(ofSize: chipFontSize * 0.84, weight: .medium) + let attributedLabel = NSMutableAttributedString( + string: label, + attributes: [.font: font, .foregroundColor: style.textColor, .paragraphStyle: paragraph] + ) + if let detail, !detail.isEmpty { + attributedLabel.append( + NSAttributedString( + string: " \(detail)", + attributes: [ + .font: detailFont, + .foregroundColor: style.textColor, + .paragraphStyle: paragraph, + ] + ) + ) + } + let iconWidth: CGFloat = icon == nil ? 0 : chipFontSize * 1.17 + let iconGap: CGFloat = icon == nil ? 0 : chipFontSize * 0.33 + let padding = chipFontSize * 0.5 + let height = ceil(chipFontSize * 1.41) + // A long path would otherwise draw a chip wider than the composer and clip. Cap the label + // to the text the editor can actually show and truncate inside it, as Android's + // `maximumWidth` does, so the chip always fits the line it sits on. + let availableWidth = textView.textContainer.size.width > 0 + ? textView.textContainer.size.width - textView.textContainer.lineFragmentPadding * 2 + : UIScreen.main.bounds.width + let maximumLabelWidth = max(chipFontSize * 3, availableWidth - padding * 2 - iconWidth - iconGap) + paragraph.lineBreakMode = .byTruncatingMiddle + attributedLabel.addAttribute( + .paragraphStyle, + value: paragraph, + range: NSRange(location: 0, length: attributedLabel.length) + ) + let measured = attributedLabel.size() + let textSize = CGSize(width: min(measured.width, maximumLabelWidth), height: measured.height) + let width = ceil(padding * 2 + iconWidth + iconGap + textSize.width) let format = UIGraphicsImageRendererFormat.preferred() format.opaque = false let renderer = UIGraphicsImageRenderer(size: CGSize(width: width, height: height), format: format) return renderer.image { context in let rect = CGRect(origin: .zero, size: CGSize(width: width, height: height)) - let path = UIBezierPath(roundedRect: rect.insetBy(dx: 0.5, dy: 0.5), cornerRadius: 7) + let path = UIBezierPath(roundedRect: rect.insetBy(dx: 0.5, dy: 0.5), cornerRadius: chipFontSize * 0.5) style.backgroundColor.setFill() path.fill() style.borderColor.setStroke() path.lineWidth = 1 path.stroke() - var x: CGFloat = 9 + var x = padding if let icon { let renderedIcon = iconImage == nil ? icon.withTintColor(style.tint, renderingMode: .alwaysOriginal) : icon renderedIcon.draw( - in: CGRect(x: x, y: 5, width: 14, height: 14) + in: CGRect(x: x, y: (height - iconWidth) / 2, width: iconWidth, height: iconWidth) ) - x += 19 + x += iconWidth + iconGap } - let paragraph = NSMutableParagraphStyle() - paragraph.alignment = .left - (label as NSString).draw( - in: CGRect(x: x, y: 3, width: textSize.width + 1, height: 18), - withAttributes: [ - .font: font, - .foregroundColor: style.textColor, - .paragraphStyle: paragraph, - ] + // Exactly the measured width: a spare pixel here would let a capped label draw past + // the cap instead of truncating inside it. + attributedLabel.draw( + in: CGRect(x: x, y: (height - textSize.height) / 2, width: textSize.width, height: textSize.height) ) context.cgContext.setAllowsAntialiasing(true) } } + private func blend(_ accent: UIColor, over base: UIColor, weight: CGFloat) -> UIColor { + var ar: CGFloat = 0, ag: CGFloat = 0, ab: CGFloat = 0, aa: CGFloat = 0 + var br: CGFloat = 0, bg: CGFloat = 0, bb: CGFloat = 0, ba: CGFloat = 0 + accent.getRed(&ar, green: &ag, blue: &ab, alpha: &aa) + base.getRed(&br, green: &bg, blue: &bb, alpha: &ba) + return UIColor( + red: ar * weight + br * (1 - weight), + green: ag * weight + bg * (1 - weight), + blue: ab * weight + bb * (1 - weight), + alpha: aa * weight + ba * (1 - weight) + ) + } + private func iconImage(for uri: String) -> UIImage? { if let image = iconImages[uri] { return image diff --git a/apps/mobile/modules/t3-markdown-text/android/src/main/java/expo/modules/t3markdowntext/T3ContextChip.kt b/apps/mobile/modules/t3-markdown-text/android/src/main/java/expo/modules/t3markdowntext/T3ContextChip.kt new file mode 100644 index 000000000000..09b49c956407 --- /dev/null +++ b/apps/mobile/modules/t3-markdown-text/android/src/main/java/expo/modules/t3markdowntext/T3ContextChip.kt @@ -0,0 +1,176 @@ +package expo.modules.t3markdowntext + +import android.graphics.Canvas +import android.graphics.Color +import android.graphics.Paint +import android.graphics.Path +import android.graphics.RectF +import android.graphics.Typeface +import android.text.TextPaint +import android.text.TextUtils +import kotlin.math.ceil +import kotlin.math.min + +/** Shared by editable spans and inline chat images so their metrics and colors agree. */ +class T3ContextChip( + content: Content, + fontSize: Float, + colors: Colors, + maximumWidth: Float, + private val density: Float +) { + /** What the chip says: its name, the size beside it, and the glyph that leads it. */ + data class Content(val label: String, val symbol: String, val detail: String = "") + + data class Colors(val accent: Int, val foreground: Int, val border: Int) + + private val symbol = content.symbol + + private val paint = TextPaint(Paint.ANTI_ALIAS_FLAG).apply { + textSize = fontSize + typeface = Typeface.create("sans-serif-medium", Typeface.NORMAL) + } + private val em = fontSize + + // The size reads as metadata beside the name, so it draws a step down from the label the + // way the web chip does. + private val detailPaint = TextPaint(Paint.ANTI_ALIAS_FLAG).apply { + textSize = fontSize * 0.84f + typeface = Typeface.create("sans-serif-medium", Typeface.NORMAL) + } + private val detailText = if (content.detail.isEmpty()) "" else " ${content.detail}" + private val detailWidth = if (detailText.isEmpty()) 0f else detailPaint.measureText(detailText) + + // The border is stroked, and a stroke straddles the path it follows, so the box has to + // reserve a stroke on every side it insets. Reserving it once left the right edge a + // stroke short, and antialiasing shaved that curve flat against the span bounds. + private val strokeWidth = density + private val inset = strokeWidth * 2f + val width = ceil( + min( + maximumWidth.coerceAtLeast(em * 3), + paint.measureText(content.label) + detailWidth + em * 2.5f + inset + ) + ) + val height = ceil(em * 1.41f + inset) + private val text = TextUtils.ellipsize( + content.label, + paint, + (width - em * 2.5f - inset - detailWidth).coerceAtLeast(0f), + TextUtils.TruncateAt.MIDDLE + ).toString() + private val fill = Color.argb( + 28, + Color.red(colors.accent), + Color.green(colors.accent), + Color.blue(colors.accent) + ) + private val textColor = blend(colors.accent, colors.foreground, 0.22f) + private val borderColor = blend(colors.accent, colors.border, 0.34f) + + // Half a stroke keeps the border inside the box; the rest of the reserved margin is + // slack, so an antialiased edge fades out before it reaches the span bounds. + private val shape = + RectF(inset / 2f, inset / 2f, width - inset / 2f, height - inset / 2f) + private val icon = iconPath(symbol) + + fun draw(canvas: Canvas, x: Float, y: Float) { + canvas.save() + canvas.translate(x, y) + paint.style = Paint.Style.FILL + paint.color = fill + canvas.drawRoundRect(shape, em / 2, em / 2, paint) + paint.style = Paint.Style.STROKE + paint.strokeWidth = strokeWidth + paint.color = borderColor + canvas.drawRoundRect(shape, em / 2, em / 2, paint) + paint.color = textColor + canvas.save() + val iconSize = em * 1.17f + canvas.translate(em / 2 + inset / 2f, (height - iconSize) / 2) + canvas.scale(iconSize / 24, iconSize / 24) + paint.strokeWidth = 1.7f + paint.strokeJoin = Paint.Join.ROUND + paint.strokeCap = Paint.Cap.ROUND + canvas.drawPath(icon, paint) + canvas.restore() + paint.style = Paint.Style.FILL + val metrics = paint.fontMetrics + val baseline = (height - metrics.descent - metrics.ascent) / 2 + canvas.drawText(text, em * 2 + inset / 2f, baseline, paint) + if (detailText.isNotEmpty()) { + detailPaint.color = paint.color + canvas.drawText( + detailText, + em * 2 + inset / 2f + paint.measureText(text), + baseline, + detailPaint + ) + } + canvas.restore() + } + + companion object { + fun color( + value: String, + fallback: Int + ): Int = runCatching { Color.parseColor(value) }.getOrDefault(fallback) + + private fun blend(accent: Int, base: Int, weight: Float): Int = Color.rgb( + (Color.red(accent) * weight + Color.red(base) * (1 - weight)).toInt(), + (Color.green(accent) * weight + Color.green(base) * (1 - weight)).toInt(), + (Color.blue(accent) * weight + Color.blue(base) * (1 - weight)).toInt(), + ) + + private fun iconPath(symbol: String) = Path().apply { + fun line(vararg points: Float) { + moveTo(points[0], points[1]) + for (index in 2 until points.size step 2) lineTo(points[index], points[index + 1]) + } + when (symbol) { + "cube" -> { + line(12f, 2f, 21f, 7f, 21f, 17f, 12f, 22f, 3f, 17f, 3f, 7f, 12f, 2f) + line(3f, 7f, 12f, 12f, 21f, 7f) + line(12f, 12f, 12f, 22f) + } + // lucide `git-pull-request`, the glyph web draws: two nodes, an elbow, and a stem. + "git-pull-request" -> { + addCircle(18f, 18f, 3f, Path.Direction.CW) + addCircle(6f, 6f, 3f, Path.Direction.CW) + moveTo(13f, 6f) + lineTo(16f, 6f) + cubicTo(17.1f, 6f, 18f, 6.9f, 18f, 8f) + lineTo(18f, 15f) + line(6f, 9f, 6f, 21f) + } + "cursorarrow.click" -> { + line(4f, 3f, 19f, 12f, 12f, 14f, 9f, 21f, 4f, 3f) + line(13f, 15f, 18f, 21f) + } + "text.bubble" -> { + line(3f, 4f, 21f, 4f, 21f, 17f, 10f, 17f, 5f, 21f, 5f, 17f, 3f, 17f, 3f, 4f) + line(7f, 8f, 17f, 8f) + line(7f, 12f, 14f, 12f) + } + "terminal", "play.rectangle", "photo" -> { + addRoundRect(2f, 4f, 22f, 20f, 2f, 2f, Path.Direction.CW) + when (symbol) { + "terminal" -> { + line(6f, 8f, 10f, 12f, 6f, 16f) + line(13f, 16f, 18f, 16f) + } + "play.rectangle" -> line(9f, 8f, 16f, 12f, 9f, 16f, 9f, 8f) + else -> { + addCircle(8f, 9f, 1.5f, Path.Direction.CW) + line(3f, 18f, 11f, 12f, 15f, 15f, 18f, 12f, 21f, 16f) + } + } + } + else -> { + line(5f, 2f, 14f, 2f, 20f, 8f, 20f, 22f, 5f, 22f, 5f, 2f) + line(14f, 2f, 14f, 8f, 20f, 8f) + } + } + } + } +} diff --git a/apps/mobile/modules/t3-markdown-text/android/src/main/java/expo/modules/t3markdowntext/T3MarkdownTextSelectionModule.kt b/apps/mobile/modules/t3-markdown-text/android/src/main/java/expo/modules/t3markdowntext/T3MarkdownTextSelectionModule.kt index 63a4d59f93fb..26ceb2023235 100644 --- a/apps/mobile/modules/t3-markdown-text/android/src/main/java/expo/modules/t3markdowntext/T3MarkdownTextSelectionModule.kt +++ b/apps/mobile/modules/t3-markdown-text/android/src/main/java/expo/modules/t3markdowntext/T3MarkdownTextSelectionModule.kt @@ -3,20 +3,34 @@ package expo.modules.t3markdowntext import android.content.ClipData import android.content.ClipboardManager import android.content.Context +import android.graphics.Bitmap +import android.graphics.Canvas +import android.graphics.Color +import android.graphics.Paint +import android.graphics.Typeface import android.text.Spannable import android.text.SpannableStringBuilder import android.text.Spanned +import android.text.TextPaint import android.text.style.ReplacementSpan import android.view.ActionMode import android.view.Menu import android.view.MenuItem import android.widget.TextView +import android.util.Base64 +import android.util.LruCache import com.facebook.react.bridge.ReactContext +import com.facebook.react.common.assets.ReactFontManager import com.facebook.react.uimanager.UIManagerHelper import expo.modules.kotlin.modules.Module import expo.modules.kotlin.modules.ModuleDefinition import kotlin.math.max import kotlin.math.min +import org.json.JSONObject +import org.json.JSONArray +import java.net.URLEncoder +import java.io.ByteArrayOutputStream +import kotlin.math.ceil private const val OBJECT_REPLACEMENT_CHARACTER = "\uFFFC" @@ -49,9 +63,65 @@ internal fun copyTextWithoutInlineImages( } } +private fun canonicalSelection( + originalText: String, + start: Int, + end: Int, + ranges: JSONArray? +): String? { + if (ranges == null) return null + val canonical = StringBuilder(originalText) + var hasContext = false + for (index in ranges.length() - 1 downTo 0) { + val range = ranges.optJSONObject(index) ?: continue + val first = max(start, range.optInt("start")) + val last = min(end, range.optInt("end")) + if (last > first) { + canonical.replace(first - start, last - start, range.optString("text")) + hasContext = true + } + } + return if (hasContext) canonical.toString().replace(OBJECT_REPLACEMENT_CHARACTER, "") else null +} + +private fun selectedContextRecords(records: JSONArray, selectedText: String): JSONArray { + val ids = mutableSetOf
$escaped" + ) +} + private class SanitizingSelectionActionModeCallback( private val textView: TextView, - private val delegate: ActionMode.Callback? + private val delegate: ActionMode.Callback?, + var contextClipboardConfig: String ) : ActionMode.Callback { override fun onCreateActionMode(mode: ActionMode, menu: Menu): Boolean = delegate?.onCreateActionMode(mode, menu) ?: true @@ -60,34 +130,131 @@ private class SanitizingSelectionActionModeCallback( delegate?.onPrepareActionMode(mode, menu) ?: false override fun onActionItemClicked(mode: ActionMode, item: MenuItem): Boolean { - if (item.itemId == android.R.id.copy) { - val start = min(textView.selectionStart, textView.selectionEnd) - val end = max(textView.selectionStart, textView.selectionEnd) - if (start >= 0 && end > start) { - val originalText = textView.text.subSequence(start, end).toString() - val selectedText = copyTextWithoutInlineImages(textView.text, start, end) - if (selectedText != originalText) { - val clipboard = - textView.context.getSystemService(Context.CLIPBOARD_SERVICE) as ClipboardManager - clipboard.setPrimaryClip(ClipData.newPlainText(null, selectedText)) - mode.finish() - return true - } - } + if (item.itemId == android.R.id.copy && copySelection()) { + mode.finish() + return true } return delegate?.onActionItemClicked(mode, item) ?: false } + private fun copySelection(): Boolean { + val start = min(textView.selectionStart, textView.selectionEnd) + val end = max(textView.selectionStart, textView.selectionEnd) + if (start < 0 || end <= start) return false + val originalText = textView.text.subSequence(start, end).toString() + val config = runCatching { JSONObject(contextClipboardConfig) }.getOrNull() + val canonical = canonicalSelection(originalText, start, end, config?.optJSONArray("ranges")) + val selectedText = canonical ?: copyTextWithoutInlineImages(textView.text, start, end) + val handled = canonical != null || selectedText != originalText + if (handled) { + val clipboard = + textView.context.getSystemService(Context.CLIPBOARD_SERVICE) as ClipboardManager + val clip = if (canonical != null) { + contextClipData(selectedText, config?.optString("fragment") ?: "") + } else { + ClipData.newPlainText(null, selectedText) + } + clipboard.setPrimaryClip(clip) + } + return handled + } + override fun onDestroyActionMode(mode: ActionMode) { delegate?.onDestroyActionMode(mode) } } class T3MarkdownTextSelectionModule : Module() { + private val chipImages = LruCache
%@", attribute, escaped] dataUsingEncoding:NSUTF8StringEncoding]; + } + UIPasteboard.generalPasteboard.items = @[item]; +} +@end + static void T3MarkdownTextApplyParagraphStyles( NSMutableAttributedString *attributedString, const std::vector
draft
"); + const canonicalHtmlPath = yield* fileSystem.realPath(htmlPath); + + const result = yield* issueAssetUrl({ + resource: { _tag: "draft-workspace-file", cwd: root, path: "report.html" }, + }); + const suffix = result.relativeUrl.slice(`${ASSET_ROUTE_PREFIX}/`.length); + const separatorIndex = suffix.indexOf("/"); + const token = suffix.slice(0, separatorIndex); + + expect(yield* resolveAsset(token, "report.html")).toEqual({ + kind: "file", + path: canonicalHtmlPath, + }); + }).pipe(Effect.provide(testLayer)), + ); + it.effect("preserves non-missing canonical path failures when issuing asset URLs", () => Effect.gen(function* () { const fileSystem = yield* FileSystem.FileSystem; @@ -677,6 +767,40 @@ describe("AssetAccess", () => { }).pipe(Effect.provide(testLayer)), ); + it.effect("serves audio previews with their stored format and keeps saving explicit", () => + Effect.gen(function* () { + const config = yield* ServerConfig.ServerConfig; + const fileSystem = yield* FileSystem.FileSystem; + const path = yield* Path.Path; + const attachmentId = "thread-1-00000000-0000-4000-8000-000000000003-wav"; + const attachmentPath = path.join(config.attachmentsDir, `${attachmentId}.wav`); + yield* fileSystem.makeDirectory(config.attachmentsDir, { recursive: true }); + yield* fileSystem.writeFile(attachmentPath, new Uint8Array([1, 2, 3])); + for (const disposition of ["inline", "attachment"] as const) { + const result = yield* issueAssetUrl({ + resource: { + _tag: "attachment", + attachmentId, + fileName: "recording.wav", + mimeType: "application/octet-stream", + disposition, + }, + }); + const suffix = result.relativeUrl.slice(`${ASSET_ROUTE_PREFIX}/`.length); + const separatorIndex = suffix.indexOf("/"); + expect( + yield* resolveAsset(suffix.slice(0, separatorIndex), suffix.slice(separatorIndex + 1)), + ).toEqual({ + kind: "file", + path: attachmentPath, + fileName: "recording.wav", + mimeType: disposition === "inline" ? "audio/wav" : "application/octet-stream", + ...(disposition === "attachment" ? { download: true } : {}), + }); + } + }).pipe(Effect.provide(testLayer)), + ); + it.effect("keeps inline requests for other attachment types as downloads", () => Effect.gen(function* () { const config = yield* ServerConfig.ServerConfig; diff --git a/apps/server/src/assets/AssetAccess.ts b/apps/server/src/assets/AssetAccess.ts index 956c4ac44211..700aeacb19a5 100644 --- a/apps/server/src/assets/AssetAccess.ts +++ b/apps/server/src/assets/AssetAccess.ts @@ -15,6 +15,7 @@ import { ToolActivityNativeAppReference, } from "@t3tools/contracts"; import { + audioMimeTypeFromExtension, hostPreviewMimeTypeFromExtension, isWorkspaceImagePreviewPath, isWorkspacePreviewEntryPath, @@ -58,14 +59,15 @@ const ASSET_TOKEN_TTL_MS = 60 * 60 * 1000; const PROJECT_FAVICON_TOKEN_BUCKET_MS = 30 * 60 * 1000; const PROJECT_FAVICON_VERSION_PREFIX = "v"; const INLINE_VIDEO_MIME_TYPE_PATTERN = /^video\/[\w!#$&^.+-]+$/i; -// Extensions a document viewer may request inline. The extension comes from +// Extensions a document viewer or audio player may request inline. The extension comes from // the attachment id the server assigned, never from the client's mime type. -const INLINE_DOCUMENT_EXTENSIONS = new Set(["pdf", "html", "htm"]); -const INLINE_DOCUMENT_MIME_TYPES: Recorddraft
"); + + yield* Effect.scoped( + withWsRpcClient(wsUrl, (client) => + Effect.gen(function* () { + const issued = yield* client[WS_METHODS.assetsCreateUrl]({ + resource: { _tag: "draft-workspace-file", cwd: directory, path: "note.html" }, + }); + const response = yield* HttpClient.get(issued.relativeUrl); + assert.equal(response.status, 200); + assert.equal(response.headers["content-type"], "text/html; charset=utf-8"); + assert.equal(yield* response.text, "draft
"); + }), + ), + ); + }).pipe(Effect.provide(NodeHttpServer.layerTest)), + ); + it.effect("uploads image bytes through a signed URL issued by websocket rpc", () => Effect.gen(function* () { const config = yield* buildAppUnderTest(); diff --git a/apps/server/src/ws.ts b/apps/server/src/ws.ts index f59a753d9c72..e91fadd3155e 100644 --- a/apps/server/src/ws.ts +++ b/apps/server/src/ws.ts @@ -2464,6 +2464,14 @@ const makeWsRpcLayer = ( ) { return yield* issueAssetUrl({ resource: input.resource }); } + if (input.resource._tag === "draft-workspace-file") { + // A project draft names its workspace directly; there is no + // thread to resolve one from. + return yield* issueAssetUrl({ + resource: input.resource, + workspaceRoot: input.resource.cwd, + }); + } if (input.resource._tag === "project-favicon") { const project = yield* projectionSnapshotQuery .getActiveProjectByWorkspaceRoot(input.resource.cwd) diff --git a/apps/web/src/assets/assetUrls.ts b/apps/web/src/assets/assetUrls.ts index 5a9738c9fbfa..89a864f76d41 100644 --- a/apps/web/src/assets/assetUrls.ts +++ b/apps/web/src/assets/assetUrls.ts @@ -35,16 +35,19 @@ export function useAssetUrlState( export function useAssetUrlRefresh( environmentId: EnvironmentId | null, resource: AssetResource | null, -): () => Promise{props.skillLabel}
++ {skill?.description ?? + props.skillDescription ?? + "No description is available for this skill."} +
+ {skill?.path ? ( + + ) : null} +{metadata.headBranch}
+
+ {metadata.baseBranch}
+ - {annotation.comment.trim()} -
- ) : null} -