Thread viewer for Bluesky
at svelte 210 lines 5.6 kB view raw
1/* 2 Extracted from https://github.com/bluesky-social/atproto/ 3 4 Copyright (c) 2022-2025 Bluesky Social PBC, and Contributors 5 6 MIT License 7 8 Permission is hereby granted, free of charge, to any person obtaining a copy 9 of this software and associated documentation files (the "Software"), to deal 10 in the Software without restriction, including without limitation the rights 11 to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 12 copies of the Software, and to permit persons to whom the Software is 13 furnished to do so, subject to the following conditions: 14 15 The above copyright notice and this permission notice shall be included in all 16 copies or substantial portions of the Software. 17 18 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 19 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 20 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 21 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 22 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 23 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 24 SOFTWARE. 25*/ 26 27// packages/api/src/rich-text/rich-text.ts 28 29export interface ByteSlice { 30 $type?: 'app.bsky.richtext.facet#byteSlice' 31 byteStart: number 32 byteEnd: number 33} 34 35export interface Facet { 36 $type?: 'app.bsky.richtext.facet' 37 index: ByteSlice 38 features: (FacetMention | FacetLink | FacetTag | { $type: string })[] 39} 40 41export interface FacetTag { 42 $type?: 'app.bsky.richtext.facet#tag' 43 tag: string 44} 45 46export interface FacetLink { 47 $type?: 'app.bsky.richtext.facet#link' 48 uri: string 49} 50 51export interface FacetMention { 52 $type?: 'app.bsky.richtext.facet#mention' 53 did: string 54} 55 56export interface RichTextProps { 57 text: string 58 facets?: Facet[] | undefined 59} 60 61export class RichTextSegment { 62 constructor(public text: string, public facet?: Facet) {} 63 64 get link(): FacetLink | undefined { 65 return this.facet?.features.find(v => v.$type === 'app.bsky.richtext.facet#link') as FacetLink 66 } 67 68 isLink() { 69 return !!this.link 70 } 71 72 get mention(): FacetMention | undefined { 73 return this.facet?.features.find(v => v.$type === 'app.bsky.richtext.facet#mention') as FacetMention 74 } 75 76 isMention() { 77 return !!this.mention 78 } 79 80 get tag(): FacetTag | undefined { 81 return this.facet?.features.find(v => v.$type === 'app.bsky.richtext.facet#tag') as FacetTag 82 } 83 84 isTag() { 85 return !!this.tag 86 } 87} 88 89export class RichText { 90 unicodeText: UnicodeString 91 facets?: Facet[] | undefined 92 93 constructor(props: RichTextProps) { 94 this.unicodeText = new UnicodeString(props.text); 95 this.facets = props.facets; 96 97 if (this.facets) { 98 this.facets = this.facets.filter(facetFilter).sort(facetSort) 99 } 100 } 101 102 get text() { 103 return this.unicodeText.toString(); 104 } 105 106 get length() { 107 return this.unicodeText.length; 108 } 109 110 get graphemeLength() { 111 return this.unicodeText.graphemeLength; 112 } 113 114 *segments(): Generator<RichTextSegment, void, void> { 115 const facets = this.facets || []; 116 117 if (!facets.length) { 118 yield new RichTextSegment(this.unicodeText.utf16); 119 return; 120 } 121 122 let textCursor = 0; 123 let facetCursor = 0; 124 125 do { 126 const currFacet = facets[facetCursor]; 127 128 if (textCursor < currFacet.index.byteStart) { 129 yield new RichTextSegment(this.unicodeText.slice(textCursor, currFacet.index.byteStart)); 130 } else if (textCursor > currFacet.index.byteStart) { 131 facetCursor++; 132 continue; 133 } 134 135 if (currFacet.index.byteStart < currFacet.index.byteEnd) { 136 const subtext = this.unicodeText.slice(currFacet.index.byteStart, currFacet.index.byteEnd); 137 138 if (!subtext.trim()) { 139 // dont empty string entities 140 yield new RichTextSegment(subtext); 141 } else { 142 yield new RichTextSegment(subtext, currFacet); 143 } 144 } 145 146 textCursor = currFacet.index.byteEnd; 147 facetCursor++; 148 } while (facetCursor < facets.length); 149 150 if (textCursor < this.unicodeText.length) { 151 yield new RichTextSegment(this.unicodeText.slice(textCursor, this.unicodeText.length)); 152 } 153 } 154} 155 156const facetSort = (a: Facet, b: Facet) => a.index.byteStart - b.index.byteStart 157 158const facetFilter = (facet: Facet) => 159 // discard negative-length facets. zero-length facets are valid 160 facet.index.byteStart <= facet.index.byteEnd 161 162 163// packages/api/src/rich-text/unicode.ts 164 165/** 166 * Javascript uses utf16-encoded strings while most environments and specs 167 * have standardized around utf8 (including JSON). 168 * 169 * After some lengthy debated we decided that richtext facets need to use 170 * utf8 indices. This means we need tools to convert indices between utf8 171 * and utf16, and that's precisely what this library handles. 172 */ 173 174const encoder = new TextEncoder() 175const decoder = new TextDecoder() 176const segmenter = new Intl.Segmenter(); 177 178export const graphemeLen = (str: string): number => { 179 return Array.from(segmenter.segment(str)).length; 180} 181 182export class UnicodeString { 183 utf16: string 184 utf8: Uint8Array 185 private _graphemeLen?: number | undefined 186 187 constructor(utf16: string) { 188 this.utf16 = utf16; 189 this.utf8 = encoder.encode(utf16); 190 } 191 192 get length() { 193 return this.utf8.byteLength; 194 } 195 196 get graphemeLength() { 197 if (!this._graphemeLen) { 198 this._graphemeLen = graphemeLen(this.utf16) 199 } 200 return this._graphemeLen; 201 } 202 203 slice(start?: number, end?: number): string { 204 return decoder.decode(this.utf8.slice(start, end)); 205 } 206 207 toString() { 208 return this.utf16; 209 } 210}