react-native-marcus 0.1.1 → 0.2.0

package/src/MarcusTextInputDecoratorViewNativeComponent.ts

@@ -3,66 +3,145 @@ import type { ColorValue, ViewProps } from "react-native"
 
 import type { Float, Int32 } from "react-native/Libraries/Types/CodegenTypes"
 
-// Font, colour and background, and nothing else: neither formatter draws a
-// border or reserves padding around a code run, so there is nothing to
-// configure.
-interface CodeBlockStyle {
-  fontFamily: string
-  fontSize: Float
-  color: ColorValue
-  backgroundColor: ColorValue
+// The text attributes one styled run can carry: the subset of React Native's
+// `TextStyle` that survives as an `NSAttributedString` attribute on iOS, as a
+// span on Android, and as a declaration on an inline element on the web.
+//
+// Everything here is optional and everything unset is inherited, which is what a
+// run of markdown wants -- a mention that only names a colour keeps the face,
+// the size and the weight of the prose it sits in. Native reads "unset" off the
+// zero value: an empty string, a null colour, a zero length. That costs nothing,
+// because a zero-length `letterSpacing`, `lineHeight` or `fontSize` means the
+// same as leaving it out.
+//
+// `fontWeight`, `fontStyle`, `textDecorationLine` and `textDecorationStyle`
+// arrive as plain strings rather than as unions. Codegen turns a union of string
+// literals into an enum named after the prop it was found on, so the same
+// spelling on twelve entries would become twelve unrelated C++ types and the one
+// conversion template in `RCTMarcusStyle+Codegen.h` could not read any of them.
+// The public type in `styleUtils` is the narrow one; this is the wire.
+interface MarkdownTextStyle {
+  color?: ColorValue
+  fontFamily?: string
+  fontSize?: Float
+  fontStyle?: string
+  fontWeight?: string
+  letterSpacing?: Float
+  // Applies to whole lines: the platforms set it on the paragraph, so a range
+  // covering part of a line raises the height of all of it.
+  lineHeight?: Float
+  textDecorationLine?: string
+  // iOS and web only. Android draws an underline and a strikethrough in the text
+  // colour and offers no way to say otherwise.
+  textDecorationColor?: ColorValue
+  textDecorationStyle?: string
+  textShadowColor?: ColorValue
+  textShadowOffset?: { width: Float; height: Float }
+  textShadowRadius?: Float
+}
+
+// A run drawn as a box rather than as a background behind the glyphs: an inline
+// or fenced run of code, or a mention's pill. Rounded, optionally bordered, with
+// room inside it and around it, on top of whatever text attributes it carries.
+//
+// What the room holds open differs, because a block owns its lines and a run
+// shares one. A block's padding and margin are held open on the leading edge and
+// vertically, and a line long enough to wrap reaches the padding on the trailing
+// edge rather than stopping in front of it: neither platform can reserve a
+// trailing indent per paragraph. An inline run holds its padding and margin open
+// on both sides, by widening the characters it starts and ends with, and grows
+// into the line's own spacing above and below rather than pushing the lines
+// apart.
+//
+// `padding` is the fallback for both axes; `paddingHorizontal` and
+// `paddingVertical` win over it where they are set, and `margin` the same. A
+// fenced block usually wants more room above and below than beside it, and one
+// number cannot say that.
+interface MarkdownBoxStyle extends MarkdownTextStyle {
+  backgroundColor?: ColorValue
+  borderColor?: ColorValue
+  borderWidth?: Float
+  borderRadius?: Float
+  padding?: Float
+  paddingHorizontal?: Float
+  paddingVertical?: Float
+  margin?: Float
+  marginHorizontal?: Float
+  marginVertical?: Float
+}
+
+interface MarkdownHeadingStyle extends MarkdownTextStyle {
+  // Each level down multiplies the one above, so level N is
+  // fontSize * scale^(N - 1). Six levels, matching HTML.
+  scale?: Float
+}
+
+// The bar beside a quoted block, the indent it opens, and the text inside it.
+//
+// `marginStart` and `paddingStart` rather than `marginLeft`/`paddingLeft`
+// because the gutter opens on the line's leading edge, which is the right-hand
+// side of a right-to-left paragraph. Both platforms already indent from the
+// leading edge -- `NSParagraphStyle`'s head indent and Android's leading margin
+// are both writing-direction relative -- so the names now say what was always
+// drawn, and the web builder resolves them to `padding-inline-start`.
+interface MarkdownBlockquoteStyle extends MarkdownTextStyle {
+  borderColor?: ColorValue
+  borderWidth?: Float
+  // Rounds the bar's ends. A bar whose radius is half its width comes out a
+  // capsule.
+  borderRadius?: Float
+  marginStart?: Float
+  paddingStart?: Float
+}
+
+// Indent, and the marker that sits in the gutter it opens. Kept as two separate
+// entries so a renderer can style ordered and unordered lists differently, which
+// is exactly what `markerScale` ends up meaning: an ordered item's number is
+// text, an unordered item's bullet is a shape.
+//
+// Both markers are sized from the base font -- the size the wrapped `Text`
+// renders at -- rather than from a size of their own, so a list marks itself in
+// proportion to the prose it marks however that prose is sized. `marker` styles
+// the marker itself, and what it leaves unset falls back to `syntax`, which is
+// where a marker's colour came from before this entry existed.
+//
+// Only `MarkdownText` draws them. An input shows the marker you typed, in the
+// base font, because it is text you are editing rather than a rendering of it.
+interface MarkdownListStyle {
+  marginStart?: Float
+  paddingStart?: Float
+  // An ordered item's number is drawn at this fraction of the base font size; an
+  // unordered item's bullet takes it as a diameter, as a fraction of the same.
+  markerScale?: Float
+  // Room held open either side of the marker, between the gutter and the text.
+  markerPadding?: Float
+  marker?: MarkdownTextStyle
+}
+
+// Left as the two values it always was rather than folded into
+// `MarkdownTextStyle`: an emoji run is swapped onto a font that has the glyph
+// and sized to sit with the prose, and nothing else about it is worth saying.
+interface MarkdownEmojiStyle {
+  fontSize?: Float
+  fontFamily?: string
 }
 
 interface MarkdownStyle {
-  syntax: {
-    color: ColorValue
-  }
-  emoji: {
-    fontSize: Float
-    fontFamily: string
-  }
-  link: {
-    color: ColorValue
-  }
-  heading: {
-    fontSize: Float
-    // Each level down multiplies the one above, so level N is
-    // fontSize * scale^(N - 1). Six levels, matching HTML.
-    scale: Float
-  }
-  blockquote: {
-    borderColor: ColorValue
-    borderWidth: Float
-    marginLeft: Float
-    paddingLeft: Float
-  }
-  // Indent only, no gutter decoration. Kept as two separate entries so a
-  // renderer can style ordered and unordered lists differently.
-  orderedList: {
-    marginLeft: Float
-    paddingLeft: Float
-  }
-  unorderedList: {
-    marginLeft: Float
-    paddingLeft: Float
-  }
-  code: CodeBlockStyle
-  pre: CodeBlockStyle
-  mentionHere: {
-    color: ColorValue
-    backgroundColor: ColorValue
-    borderRadius?: Float
-  }
-  mentionUser: {
-    color: ColorValue
-    backgroundColor: ColorValue
-    borderRadius?: Float
-  }
-  mentionReport: {
-    color: ColorValue
-    backgroundColor: ColorValue
-    borderRadius?: Float
-  }
+  syntax: MarkdownTextStyle
+  emoji: MarkdownEmojiStyle
+  link: MarkdownTextStyle
+  strong: MarkdownTextStyle
+  emphasis: MarkdownTextStyle
+  strikethrough: MarkdownTextStyle
+  heading: MarkdownHeadingStyle
+  blockquote: MarkdownBlockquoteStyle
+  orderedList: MarkdownListStyle
+  unorderedList: MarkdownListStyle
+  code: MarkdownBoxStyle
+  pre: MarkdownBoxStyle
+  // A name with an `@` in front of it, drawn as a pill: the same inline box an
+  // inline run of code sits in, and so the same lengths.
+  mention: MarkdownBoxStyle
 }
 
 interface NativeProps extends ViewProps {
@@ -74,4 +153,12 @@ export default codegenNativeComponent<NativeProps>("MarcusTextInputDecoratorView
   interfaceOnly: true,
 })
 
-export type { MarkdownStyle }
+export type {
+  MarkdownStyle,
+  MarkdownTextStyle,
+  MarkdownEmojiStyle,
+  MarkdownBoxStyle,
+  MarkdownHeadingStyle,
+  MarkdownBlockquoteStyle,
+  MarkdownListStyle,
+}

package/src/MarkdownText.tsx

@@ -0,0 +1,472 @@
+import { StyleSheet, Text, View } from "react-native"
+import React from "react"
+import type { TextProps } from "react-native"
+
+import MarcusTextDecoratorViewNativeComponent from "./MarcusTextDecoratorViewNativeComponent"
+import type {
+  MarkdownRangeStruct,
+  MarkdownSubstitutionStruct,
+} from "./MarcusTextDecoratorViewNativeComponent"
+import { processMarkdownStyle } from "./styleUtils"
+import type { PartialMarkdownStyle } from "./styleUtils"
+import { stripSyntax } from "./stripUtils"
+import type { StrippedMarkdown } from "./stripUtils"
+import { atomsOf, describeAtoms, sourceOf } from "./atomUtils"
+import type { Atom } from "./atomUtils"
+import { available as mathAvailable, renderMath, speakMath } from "./math"
+import { flattenText } from "./childrenUtils"
+import { createParser } from "./parser"
+import type { MarkdownRange } from "./commonTypes"
+
+/**
+ * What to show in place of an image.
+ *
+ * Must return a single view with a definite width and height, or nothing: the
+ * text layout has to know how much room to leave before it can lay the line
+ * out, and markdown carries no dimensions. Anything that reports no size --
+ * a bare `Image` with a remote source, most obviously -- measures zero and
+ * disappears.
+ *
+ * The alt text is passed through rather than used: what it is good for, an
+ * accessibility label most of all, is a question only the caller can answer.
+ *
+ * `inline` says whether the image shares its line with anything else, which is
+ * usually what decides how big it should be: alone on a line it is a figure,
+ * and in the middle of a sentence it is a badge. A block marker does not count
+ * as company, and another image does.
+ *
+ * Every string is always a string: an image written without a title is handed
+ * an empty one rather than nothing, so a caller never has to tell the two
+ * apart.
+ */
+type RenderEmbed = (
+  uri: string,
+  alt: string,
+  title: string,
+  inline: boolean,
+) => React.ReactElement | null | undefined
+
+/**
+ * What to draw an SVG with.
+ *
+ * Handed a complete SVG document and the box it belongs in, and expected to
+ * return a view of exactly that size. There is deliberately nothing else in the
+ * signature: everything a picture needs -- the colour, the glyph outlines, the
+ * baseline it sits on -- is either inside the XML already or has been taken
+ * care of by the time this is called, so `<SvgXml xml={xml} width={width}
+ * height={height} />` is the whole of a correct implementation.
+ *
+ * It exists because a renderer for SVG is a dependency, and which one is not
+ * this library's business: `react-native-svg` on native, whatever you like on
+ * the web.
+ *
+ * Returning nothing leaves the drawing out, and the span it stood for still
+ * costs its one character either way.
+ */
+type RenderSVG = (
+  xml: string,
+  width: number,
+  height: number,
+) => React.ReactElement | null | undefined
+
+/**
+ * What to do when a link is pressed.
+ *
+ * The label is the text the link was rendered as, which is all a reader saw of
+ * it: the destination is not in the document any more. Reference links are not
+ * covered -- their destination is written somewhere else and is not resolved
+ * yet -- so they render as links and do nothing.
+ *
+ * Opening the URL is deliberately not done for you: what a link means is the
+ * application's to decide, and a message from a stranger is the last place to
+ * hand an arbitrary URL to `Linking.openURL` without looking at it first.
+ *
+ * Every string is always a string: a link written without a title is handed an
+ * empty one rather than nothing.
+ */
+type OnLinkPress = (uri: string, label: string, title: string) => void
+
+interface MarkdownTextProps extends TextProps {
+  markdownStyle?: PartialMarkdownStyle
+  /**
+   * GFM's strikethrough (`~~a~~`) and bare autolinks (`www.example.com`).
+   *
+   * @default false
+   */
+  gfm?: boolean
+  /**
+   * `@name` mentions, which no flavour of markdown has a notion of.
+   *
+   * @default false
+   */
+  mention?: boolean
+  /**
+   * LaTeX between double dollar signs: `$$x^2$$` inline, and the same on lines
+   * of its own for a block.
+   *
+   * @default false
+   */
+  math?: boolean
+  renderEmbed?: RenderEmbed
+  /**
+   * What to draw a maths span with. Nothing is drawn without it, and `$$x^2$$`
+   * is left on the screen as it was written.
+   */
+  renderSVG?: RenderSVG
+  /**
+   * The language a drawn equation is read out in, as the speech engine names
+   * it: `af`, `ca`, `da`, `de`, `en`, `es`, `fr`, `hi`, `it`, `ko`, `nb`, `nn`
+   * or `sv`.
+   *
+   * What a document is written in and what its reader speaks are two different
+   * questions, and only the application knows the answer to the second, so this
+   * is usually whatever the rest of the interface is translated into. It
+   * changes only how the maths is *said*: the prose around it is read in the
+   * language it was written in, and the drawing itself is the same picture in
+   * every language.
+   *
+   * The rules for one language are around 300KB, so only the ones named in
+   * `withMath(config, { locales })` are in the bundle. A language that is not
+   * is read in English, with a warning in the console saying which line of
+   * Metro config would fix it.
+   *
+   * @default "en"
+   */
+  mathAccessibilityLocale?: string
+  onLinkPress?: OnLinkPress
+}
+
+type MarkdownText = Text & React.Component<MarkdownTextProps>
+
+/**
+ * The stripped text with the embeds spliced back in and the links wrapped, as
+ * the children of one `Text`.
+ *
+ * A view nested in a `Text` is one character to the platform -- iOS and Android
+ * both put a single U+FFFC in the string their formatters index -- and it is
+ * the very character the strip left behind, so the ranges need no adjusting and
+ * an embed inside a blockquote is laid out inside the quote's indent by the
+ * same code that indents the prose around it.
+ *
+ * A nested `Text` costs no characters at all: its content goes into that same
+ * string where it stands. So a link can be wrapped in one to be pressed without
+ * moving anything either, and the decorator styles it through the ranges the
+ * way it styles a link nobody can press.
+ */
+function textChildren(
+  markdown: StrippedMarkdown,
+  renderEmbed: RenderEmbed | undefined,
+  renderSVG: RenderSVG | undefined,
+  fontSize: number,
+  color: string | undefined,
+  locale: string | undefined,
+  onLinkPress: React.RefObject<OnLinkPress | undefined>,
+) {
+  const { text, links } = markdown
+  const children: React.ReactNode[] = []
+  const atoms = atomsOf(markdown)
+  // Atoms are in text order and each is used once, whether it falls inside a
+  // link or between two, so one walk covers both.
+  let next = 0
+
+  /** What stands where one placeholder character is. */
+  function draw(atom: Atom) {
+    if (atom.kind === "embed") {
+      return renderEmbed?.(atom.uri, atom.alt, atom.title, atom.inline)
+    }
+
+    const drawn = renderMath(atom.tex, atom.display, fontSize, color)
+
+    if (drawn === null) {
+      return null
+    }
+
+    const element = renderSVG?.(drawn.svg, drawn.width, drawn.height)
+
+    if (!element) {
+      return null
+    }
+
+    // Wrapped rather than cloned: what came back is the caller's element and
+    // its own props are not ours to rewrite.
+    //
+    // The wrapper does two things. It carries the label -- what the picture
+    // says, read out the way a screen reader reads maths on the web, because a
+    // drawing is the one thing in a document that cannot be read for itself.
+    // And it shifts the picture down by its depth -- both platforms put the
+    // *bottom* edge of a view mounted in a `Text` on the baseline, so without
+    // this a fraction floats above the line. The shift happens after
+    // measurement, so the line keeps the height the maths asked for.
+    return (
+      <View
+        accessible
+        accessibilityLabel={speakMath(atom.tex, atom.display, locale) ?? atom.tex}
+        style={drawn.depth ? { transform: [{ translateY: drawn.depth }] } : undefined}
+      >
+        {element}
+      </View>
+    )
+  }
+
+  /** The text between two offsets, with any atoms in it spliced in. */
+  function content(from: number, to: number) {
+    const between: React.ReactNode[] = []
+    let cursor = from
+
+    while (next < atoms.length && atoms[next]!.index < to) {
+      const atom = atoms[next]!
+
+      if (atom.index > cursor) {
+        between.push(text.slice(cursor, atom.index))
+      }
+
+      between.push(
+        <React.Fragment key={`atom-${atom.index}`}>
+          {/* Something has to stand in the placeholder's place even when the
+              caller declines to render anything, or every range after it would
+              be one character out. An empty view is the cheapest attachment
+              there is, and takes up as much room as the nothing it draws. */}
+          {draw(atom) ?? <View />}
+        </React.Fragment>,
+      )
+
+      cursor = atom.index + 1
+      next++
+    }
+
+    if (cursor < to) {
+      between.push(text.slice(cursor, to))
+    }
+
+    return between
+  }
+
+  let cursor = 0
+
+  for (const link of links) {
+    if (link.start > cursor) {
+      children.push(...content(cursor, link.start))
+    }
+
+    const end = link.start + link.length
+
+    children.push(
+      <Text
+        key={`link-${link.start}`}
+        role="link"
+        onPress={() => onLinkPress.current?.(link.uri, link.label, link.title)}
+      >
+        {content(link.start, end)}
+      </Text>,
+    )
+
+    cursor = end
+  }
+
+  children.push(...content(cursor, text.length))
+
+  return children
+}
+
+const EMPTY_RANGES: MarkdownRangeStruct[] = []
+const NO_SUBSTITUTIONS: MarkdownSubstitutionStruct[] = []
+
+/**
+ * What maths is sized against when the caller set no size at all, which is
+ * React Native's own default for a `Text`.
+ */
+const DEFAULT_FONT_SIZE = 14
+
+function toRangeStructs(ranges: MarkdownRange[]): MarkdownRangeStruct[] {
+  return ranges.map((range) => ({
+    type: range.type,
+    start: range.start,
+    length: range.length,
+    depth: range.depth ?? 0,
+  }))
+}
+
+/**
+ * `Text`, with the markdown in its content rendered rather than shown.
+ *
+ * The syntax is removed in JavaScript before the text ever reaches the shadow
+ * tree, so what gets measured, drawn, selected, copied and read out is the
+ * finished prose. What is left over -- which run is bold, where a quote starts
+ * -- is handed to the native decorator as ranges over that stripped string, and
+ * styled by the same formatter the input uses, so a message and the composer it
+ * was typed in agree by construction.
+ *
+ * List markers are the exception that stays: `1.` numbers an item and `-`
+ * stands in for a bullet, so they are laid out rather than removed.
+ */
+const MarkdownText = React.forwardRef<MarkdownText, MarkdownTextProps>((props, ref) => {
+  const {
+    markdownStyle: markdownStyleProp,
+    gfm,
+    mention,
+    math,
+    renderEmbed,
+    renderSVG,
+    mathAccessibilityLocale,
+    onLinkPress,
+    children,
+    ...textProps
+  } = props
+
+  const markdownStyle = React.useMemo(
+    () => processMarkdownStyle(markdownStyleProp),
+    [markdownStyleProp],
+  )
+
+  // Whether there is a handler, not which one: a caller who writes the callback
+  // inline would otherwise re-parse the document on every render.
+  const withEmbeds = renderEmbed !== undefined
+  // Maths is only taken out of the text when there is both something to draw it
+  // with and a backend to typeset it -- see `./math`. Left in, `$$x^2$$` is
+  // shown as it was written, which beats an empty box where an equation should
+  // be and is the one hint an application gets that its Metro config is a line
+  // short.
+  const withMath = renderSVG !== undefined && mathAvailable
+  const withLinks = onLinkPress !== undefined
+
+  // The same worklet for as long as the flavour is the same one, so the
+  // document is only re-parsed when the document itself changes.
+  const parser = createParser({ gfm, mention, math })
+
+  const markdown = React.useMemo(() => {
+    const text = flattenText(children)
+
+    return text === null
+      ? null
+      : stripSyntax(text, parser(text), {
+          embeds: withEmbeds,
+          math: withMath,
+          links: withLinks,
+        })
+  }, [children, parser, withEmbeds, withMath, withLinks])
+
+  // What the maths has to be sized against. Read off the style the caller gave
+  // this element, because that is the only size known here -- a size inherited
+  // from an enclosing `Text` is resolved by the platform, long after this.
+  const { fontSize, color } = React.useMemo(() => {
+    const flattened = StyleSheet.flatten(textProps.style)
+
+    return {
+      fontSize:
+        typeof flattened?.fontSize === "number" ? flattened.fontSize : DEFAULT_FONT_SIZE,
+      // MathJax paints in `currentColor`, and a view mounted in a `Text`
+      // inherits none of its text attributes on either platform, so the colour
+      // is painted into the SVG before it is handed over. Left unset, maths is
+      // drawn in whatever the SVG renderer makes of `currentColor` -- so a
+      // display that means to be readable in the dark should say what colour it
+      // is, which it had to do for its own text anyway.
+      color: typeof flattened?.color === "string" ? flattened.color : undefined,
+    }
+  }, [textProps.style])
+
+  // The handler as the caller last wrote it, kept beside the text rather than
+  // baked into it. Written inline -- which is how a handler that reaches for
+  // component state has to be written -- it is a different function on every
+  // render, and rebuilding the children for each press means rebuilding the
+  // string the platform lays out, on the main thread, for every press.
+  const pressHandler = React.useRef(onLinkPress)
+
+  React.useEffect(() => {
+    pressHandler.current = onLinkPress
+  }, [onLinkPress])
+
+  // Rebuilt when the document changes, or when a caller hands over a different
+  // renderer -- one that draws from state has to be able to draw again.
+  const spliced = React.useMemo(
+    () =>
+      markdown === null ||
+      (markdown.embeds.length === 0 &&
+        markdown.maths.length === 0 &&
+        markdown.links.length === 0)
+        ? null
+        : textChildren(
+            markdown,
+            renderEmbed,
+            renderSVG,
+            fontSize,
+            color,
+            mathAccessibilityLocale,
+            pressHandler,
+          ),
+    [markdown, renderEmbed, renderSVG, fontSize, color, mathAccessibilityLocale],
+  )
+
+  // What the paragraph reads as. A drawing is one U+FFFC in the string the
+  // platform lays out -- that is what a view nested in a `Text` costs -- and
+  // there is nothing in that character for a screen reader to say, so the whole
+  // paragraph is described instead with each placeholder written back out as
+  // the alt text or the spoken form of the equation it stands for. Only when
+  // the caller has not described it themselves, and only when there is
+  // something to describe.
+  const accessibilityLabel = React.useMemo(
+    () =>
+      textProps.accessibilityLabel ??
+      (markdown === null || (markdown.embeds.length === 0 && markdown.maths.length === 0)
+        ? undefined
+        : describeAtoms(markdown, speakMath, mathAccessibilityLocale)),
+    [markdown, textProps.accessibilityLabel, mathAccessibilityLocale],
+  )
+
+  // What each of those placeholders copies as, which is the markdown it was
+  // written as. Handed to the decorator rather than used here: the copy is the
+  // platform's, made from the string it laid out, and only the platform can
+  // catch it -- Android at the moment the action mode's copy is pressed, iOS
+  // when the paragraph is asked for its own `copy:`.
+  const substitutions = React.useMemo(
+    () =>
+      markdown === null || (markdown.embeds.length === 0 && markdown.maths.length === 0)
+        ? NO_SUBSTITUTIONS
+        : atomsOf(markdown).map((atom) => ({ index: atom.index, text: sourceOf(atom) })),
+    [markdown],
+  )
+
+  // The same array while the document is the same one: a new one is a new props
+  // object to the mounting layer, and every press that a caller answers with a
+  // `setState` would otherwise have the decorator format the paragraph again.
+  const ranges = React.useMemo(
+    () => (markdown === null ? EMPTY_RANGES : toRangeStructs(markdown.ranges)),
+    [markdown],
+  )
+
+  if (markdown === null) {
+    if (__DEV__) {
+      console.warn(
+        "[react-native-marcus] `MarkdownText` was given children other than text and is rendering them unformatted.",
+      )
+    }
+
+    return (
+      <Text {...textProps} ref={ref}>
+        {children}
+      </Text>
+    )
+  }
+
+  return (
+    <MarcusTextDecoratorViewNativeComponent
+      style={styles.displayContents}
+      markdownStyle={markdownStyle}
+      ranges={ranges}
+      substitutions={substitutions}
+    >
+      <Text {...textProps} accessibilityLabel={accessibilityLabel} ref={ref}>
+        {spliced ?? markdown.text}
+      </Text>
+    </MarcusTextDecoratorViewNativeComponent>
+  )
+})
+
+const styles = StyleSheet.create({
+  displayContents: {
+    display: "contents",
+  },
+})
+
+export type { MarkdownTextProps, OnLinkPress, RenderEmbed, RenderSVG }
+
+export default MarkdownText