Thread viewer for Bluesky
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}