diff --git a/app/blog/[identifier]/index.tsx b/app/blog/[identifier]/index.tsx index 74700dc..88f0209 100644 --- a/app/blog/[identifier]/index.tsx +++ b/app/blog/[identifier]/index.tsx @@ -7,7 +7,7 @@ import { Profile, resolveProfile } from "@/src/lib/profile"; import { fetchBlogPosts } from "@/src/lib/query/feed"; import { useLocalSearchParams } from "expo-router"; import { useContext, useEffect, useState } from "react"; -import { Dimensions, ScrollView, StyleSheet, useWindowDimensions, View } from "react-native"; +import { ScrollView, StyleSheet, useWindowDimensions, View } from "react-native"; const styles = StyleSheet.create({ postScroller: { diff --git a/lexicons/dev/maelstrom/bramblr/richtext/facet.json b/lexicons/dev/maelstrom/bramblr/richtext/facet.json index cefe571..5477aae 100644 --- a/lexicons/dev/maelstrom/bramblr/richtext/facet.json +++ b/lexicons/dev/maelstrom/bramblr/richtext/facet.json @@ -21,7 +21,8 @@ "type": "union", "refs": [ "#color", - "#link" + "#link", + "#emphasis" ] } } @@ -70,6 +71,24 @@ "description": "The complete URL to an http or https web page" } } + }, + "emphasis": { + "type": "object", + "description": "Add bold, italic, strikethrough, or small emphasis onto text", + "properties": { + "bold": { + "type": "boolean" + }, + "italic": { + "type": "boolean" + }, + "strike": { + "type": "boolean" + }, + "small": { + "type": "boolean" + } + } } } } \ No newline at end of file diff --git a/src/lexicons/dev/maelstrom/bramblr/richtext/facet.defs.ts b/src/lexicons/dev/maelstrom/bramblr/richtext/facet.defs.ts index 6df4cf9..a343728 100644 --- a/src/lexicons/dev/maelstrom/bramblr/richtext/facet.defs.ts +++ b/src/lexicons/dev/maelstrom/bramblr/richtext/facet.defs.ts @@ -12,7 +12,12 @@ export { $nsid } type Main = { $type?: 'dev.maelstrom.bramblr.richtext.facet' index: ByteSlice - features: (l.$Typed | l.$Typed | l.Unknown$TypedObject)[] + features: ( + | l.$Typed + | l.$Typed + | l.$Typed + | l.Unknown$TypedObject + )[] } export type { Main } @@ -28,6 +33,7 @@ const main = l.typedObject
( [ l.typedRef((() => color) as any), l.typedRef((() => link) as any), + l.typedRef((() => emphasis) as any), ], false, ), @@ -108,3 +114,28 @@ const link = l.typedObject( ) export { link } + +/** Add bold, italic, strikethrough, or small emphasis onto text */ +type Emphasis = { + $type?: 'dev.maelstrom.bramblr.richtext.facet#emphasis' + bold?: boolean + italic?: boolean + strike?: boolean + small?: boolean +} + +export type { Emphasis } + +/** Add bold, italic, strikethrough, or small emphasis onto text */ +const emphasis = l.typedObject( + $nsid, + 'emphasis', + l.object({ + bold: l.optional(l.boolean()), + italic: l.optional(l.boolean()), + strike: l.optional(l.boolean()), + small: l.optional(l.boolean()), + }), +) + +export { emphasis } diff --git a/src/lib/richtext/render.tsx b/src/lib/richtext/render.tsx index 9472ade..43ed3aa 100644 --- a/src/lib/richtext/render.tsx +++ b/src/lib/richtext/render.tsx @@ -63,6 +63,15 @@ function renderText(text: string, facets?: RichTextFacet[]) { linkHref = /(^(?:https|http):\/\/.*)/.exec(linkFeature.uri ?? "")?.[1]; segmentStyles.push({ textDecorationLine: "underline" }); + } else if (feature.$type === "dev.maelstrom.bramblr.richtext.facet#emphasis") { + const emphasisFeature = feature as dev.maelstrom.bramblr.richtext.facet.Emphasis + + segmentStyles.push({ + textDecorationLine: emphasisFeature.strike ? "line-through" : undefined, + fontWeight: emphasisFeature.bold ? 700 : undefined, + fontStyle: emphasisFeature.italic ? "italic" : undefined, + fontSize: emphasisFeature.small ? 10 : undefined, + }) } }