react-native-marcus 0.1.0 → 0.2.0

package/README.md

@@ -11,9 +11,10 @@ Marcus takes a different approach to editing markdown: formatting is rendered li
 - ⚛️ Drop-in replacement for `<TextInput>` component
 - ⌨️ Live synchronous formatting on every keystroke
 - ⚡ Fully native experience (selection, spellcheck, autocomplete)
-- 🔧 Customizable logic
+- 🔧 Customizable markdown flavor
 - 🎨 Customizable styles
 - 🌐 Universal support (Android, iOS, web)
+- ➗ Optional LaTeX math, typeset by MathJax and drawn identically on all three
 - 🏗️ Supports only the New Architecture
 
 ## Differences from Expensify/react-native-live-markdown
@@ -55,12 +56,12 @@ The library includes native code so you will need to re-build the native app.
 
 ```tsx
 import { useState } from "react"
-import { MarkdownTextInput, parseMicroMark } from "react-native-marcus"
+import { MarkdownTextInput } from "react-native-marcus"
 
 export default function App() {
   const [text, setText] = useState("Hello, **world**!")
 
-  return <MarkdownTextInput value={text} onChangeText={setText} parser={parseMicroMark} />
+  return <MarkdownTextInput value={text} onChangeText={setText} />
 }
 ```
 
@@ -68,7 +69,11 @@ export default function App() {
 
 `MarkdownTextInput` can be styled using `style` prop just like regular `TextInput` component.
 
-It is also possible to customize the styling of the formatted contents of `MarkdownTextInput` component. The style object supports all color representations from React Native including `PlatformColor` and `DynamicColorIOS` according to the [color reference](https://reactnative.dev/docs/colors). Currently, a limited set of styles is customizable but this is subject to change in the future.
+It is also possible to customize the styling of the formatted contents of `MarkdownTextInput` component. The style object supports all color representations from React Native including `PlatformColor` and `DynamicColorIOS` according to the [color reference](https://reactnative.dev/docs/colors).
+
+Every styled entry takes the same set of text properties, picked from React Native's own `TextStyle`: `color`, `fontFamily`, `fontSize`, `fontStyle`, `fontWeight`, `letterSpacing`, `lineHeight`, `textDecorationLine`, `textDecorationColor`, `textDecorationStyle`, `textShadowColor`, `textShadowOffset` and `textShadowRadius`. Anything left out is inherited, so an entry naming only a colour keeps the face, the size and the weight of the prose around it.
+
+Two of those are not honoured everywhere. `textDecorationColor` and `textDecorationStyle` are applied on iOS and the web; Android draws an underline and a strikethrough in the text's own colour as a solid line and offers no way to say otherwise. `lineHeight` is a property of a line rather than of a run on every platform, so a range that asks for one raises the whole line it sits on.
 
 ```tsx
 import type { MarkdownStyle } from "react-native-marcus"
@@ -90,39 +95,105 @@ const markdownStyle: MarkdownStyle = {
   },
   link: {
     color: "blue",
+    textDecorationLine: "underline",
+  },
+  // The marks that used to be hard-coded. Naming one replaces it rather than
+  // fighting it: `strong: { fontWeight: "600" }` is a lighter bold, not a bold
+  // with a 600 on top.
+  strong: {
+    fontWeight: "bold",
+  },
+  emphasis: {
+    fontStyle: "italic",
+  },
+  strikethrough: {
+    textDecorationLine: "line-through",
   },
-  h1: {
+  heading: {
+    // Level N is this size scaled N-1 times, so one pair of values covers all six.
     fontSize: 25,
+    scale: 0.85,
+    fontWeight: "bold",
   },
   emoji: {
     fontSize: 20,
     fontFamily: FONT_FAMILY_EMOJI,
   },
+  // The bar beside a quoted block, the indent it opens, and the text inside it.
+  // `marginStart` and `paddingStart` rather than left and right: the gutter
+  // opens on the line's leading edge, which is the right-hand side of a
+  // right-to-left paragraph.
   blockquote: {
     borderColor: "gray",
     borderWidth: 6,
-    marginLeft: 6,
-    paddingLeft: 6,
+    // Rounds the bar's ends. A radius of half the width gives a capsule.
+    borderRadius: 0,
+    marginStart: 6,
+    paddingStart: 6,
+    fontStyle: "italic",
+  },
+  // A list's indent, and the marker `MarkdownText` draws in the gutter it opens.
+  // Both markers are sized from the base font -- whatever the wrapped `Text`
+  // renders at. `marker` styles the marker itself, and what it leaves unset
+  // comes from `syntax`. A `MarkdownTextInput` shows the marker you typed
+  // instead, in the base font: there it is text being edited.
+  orderedList: {
+    marginStart: 6,
+    paddingStart: 18,
+    // The item's number, at this fraction of the base font size.
+    markerScale: 0.8,
+    // Room held open either side of the marker.
+    markerPadding: 2,
+    marker: { color: "gray" },
+  },
+  unorderedList: {
+    marginStart: 6,
+    paddingStart: 18,
+    // The bullet's diameter, as a fraction of the base font size. A circle,
+    // centred on the line rather than sat on the baseline.
+    markerScale: 0.3,
+    markerPadding: 2,
+    marker: { color: "gray" },
   },
   code: {
     fontFamily: FONT_FAMILY_MONOSPACE,
     fontSize: 20,
     color: "black",
     backgroundColor: "lightgray",
+    // An inline run is drawn as a box too, so it takes the same lengths. Its
+    // padding and margin hold space open on either side of the run and grow into
+    // the line's spacing above and below it.
+    borderRadius: 4,
+    borderWidth: 0,
+    borderColor: "gray",
+    padding: 2,
+    margin: 2,
   },
   pre: {
     fontFamily: FONT_FAMILY_MONOSPACE,
     fontSize: 20,
     color: "black",
     backgroundColor: "lightgray",
+    // A block is drawn as a box behind the whole of it: the padding is the space
+    // inside the box, the margin the space around it. `padding` and `margin`
+    // cover both axes; `paddingVertical` and the rest win over them where they
+    // are set, which is what a block usually wants -- more room above and below
+    // than beside it.
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: "gray",
+    paddingHorizontal: 8,
+    paddingVertical: 12,
+    margin: 4,
   },
-  mentionHere: {
-    color: "green",
-    backgroundColor: "lime",
-  },
-  mentionUser: {
+  // A name with an `@` in front of it, drawn as a pill: the same inline box a
+  // run of code sits in, and so the same lengths.
+  mention: {
     color: "blue",
     backgroundColor: "cyan",
+    borderRadius: 5,
+    padding: 2,
+    margin: 0,
   },
 }
 ```
@@ -141,70 +212,156 @@ The style object can be passed to multiple `MarkdownTextInput` components using
 > [!TIP]
 > We recommend to store the style object outside of a component body or memoize the style object with `React.useMemo`.
 
-## Parsing logic
+## Markdown flavors support
+
+`react-native-marcus` implements the [CommonMark](https://spec.commonmark.org/0.31.2/) spec, and on top of it three extensions you can ask for: two from [GFM (Github Flavored Markdown)](https://github.github.com/gfm/) — strikethrough (`~~text~~`) and bare autolinks (`www.example.com`, which CommonMark leaves as text) — and mentions, which no flavour of markdown has a notion of. [Math](./README.md#math) is a fourth, and has a section to itself.
 
-`MarkdownTextInput` behavior can be customized via `parser` property. Parser is a function that accepts a plaintext string and returns an array of `MarkdownRange` objects:
+Emoji are recognised too, but they are not an extension: they are a property of the characters rather than a way of writing something, so nothing turns them on or off.
 
-```ts
-interface MarkdownRange {
-  type: MarkdownType
-  start: number
-  length: number
-}
+A mention is an `@` followed by a name. The name starts with a letter and is made of letters, digits and marks, with `-`, `_` and another `@` joining two parts of it -- each needs a part on either side, so `@user@example.com` is a single mention while the `@` in `@user@ ` is left out of it. A `.` may appear anywhere, the last character included, so `@bullet.` is one mention; only the first of a run of dots belongs to the name, so `@bullet..` is `@bullet.` followed by a full stop.
+
+A mention cannot begin inside a word, or straight after another `@`: that is what keeps `user@example.com` an email address rather than an address with a mention buried in it. Anything else may sit against one -- `**@someone**`, `_@someone_`, `[@user](/u)` and `(@user)` all hold a mention, since the markup is gone by the time a display draws it and punctuation was never part of a name.
+
+Every extension is off unless it is asked for, on `MarkdownTextInput` and `MarkdownText` alike:
+
+```tsx
+<MarkdownTextInput value={text} onChangeText={setText} gfm mention />
 ```
 
-Currently, only the following types are supported:
-
-```ts
-type MarkdownType =
-  | "bold"
-  | "italic"
-  | "strikethrough"
-  | "emoji"
-  | "mention"
-  | "link"
-  | "code"
-  | "pre"
-  | "blockquote"
-  | "h1"
-  | "syntax"
-```
-
-Parser needs to be marked as a [worklet](https://docs.swmansion.com/react-native-worklets/docs/fundamentals/glossary#worklet) because it's executed on the UI thread as the user types.
-
-Here's a sample function that parses all substrings located between two asterisks as italic text:
-
-```ts
-function parser(input: string) {
-  "worklet"
-
-  const ranges = []
-  const regexp = /\*(.*?)\*/g
-  let match
-  while ((match = regexp.exec(input)) !== null) {
-    ranges.push({ start: match.index, length: 1, type: "syntax" })
-    ranges.push({ start: match.index + 1, length: match[1]!.length, type: "emphasis" })
-    ranges.push({ start: match.index + 1 + match[1]!.length, length: 1, type: "syntax" })
-  }
-  return ranges
-}
+Without them what is left is CommonMark: an `@name` is a word like any other and `~~text~~` keeps its tildes. That is the default because each extension changes what an ordinary character means, and a document written somewhere else — by someone who never heard of this library — is the worst possible place to guess at that. Emoji are a property of the characters rather than an extension, so they are always recognised.
+
+Each combination is parsed by one parser that is built once and shared by every component asking for the same one, so a flavour costs nothing to choose.
+
+## Math
+
+LaTeX between double dollar signs — `$$x^2$$` inline, and the same on lines of its own for a block — is recognised with the `math` prop.
+
+```tsx
+<MarkdownTextInput value={text} onChangeText={setText} math />
 ```
 
-> [!TIP]
-> We recommend to store the parser function outside of a component body or memoize the parser function with `React.useMemo`.
+**Two dollars, never one.** A single `$` is a currency sign far more often than it is a delimiter: with the single form recognised, `$5 and $6` is one maths span whose TeX is `5 and `, and a price list quietly becomes a picture. Two dollars cost a keystroke and can never be an accident.
 
-## Markdown flavors support
+In an input that is all `math` does. The TeX stays exactly where you typed it and the dollars are greyed as the markup they are — the caret moves through those characters and backspace deletes them, so drawing a picture over them would make both unexplainable.
+
+`MarkdownText` draws it instead, given two things: the maths backend, which is [MathJax and is switched on in `metro.config.js`](#enabling-mathjax), and `renderSVG`, which puts the finished drawing on the screen.
+
+```tsx
+import { SvgXml } from "react-native-svg"
+
+;<MarkdownText
+  math
+  style={{ fontSize: 16, color: "#111" }}
+  renderSVG={(xml, width, height) => <SvgXml xml={xml} width={width} height={height} />}
+>
+  {message}
+</MarkdownText>
+```
+
+That is the whole of it. `renderSVG` is handed a complete SVG document and the box it belongs in, and there is deliberately nothing else in the signature: the glyph outlines are inline, the colour is already painted in, and the baseline has been dealt with by the time it is called. It exists only because an SVG renderer is a dependency and which one you use is not this library's business.
+
+Three things follow from that:
+
+- **The colour comes from the `style` you gave the `MarkdownText`.** A view mounted in a `Text` inherits none of its text attributes on either platform, so the library reads `color` off the style and paints it into the SVG. A display with no `color` of its own draws maths in whatever your SVG renderer makes of `currentColor`, which is usually black.
+- **The size comes from `fontSize` on that same style**, because maths is the one kind of attachment that has to be sized in step with the prose around it. An inherited size is resolved by the platform long after this and cannot be read here.
+- **Returning nothing leaves the drawing out.** The span still costs its one character, so nothing shifts.
+
+Without the backend, or without `renderSVG`, no maths is taken out of the text: `$$x^2$$` is left on the screen exactly as it was written. That beats an empty box where an equation should be, and it is the one hint you will get that a line is missing from your Metro config.
+
+### Enabling MathJax
+
+[MathJax](https://www.mathjax.org/) is the only JavaScript typesetter that renders TeX to a standalone SVG, which is what lets Android, iOS and web draw identical glyphs from one implementation. It is also 11 MB, and most applications will never show an equation — so nothing in this library imports it, and turning it on is two lines:
+
+```sh
+npm install @mathjax/src speech-rule-engine react-native-svg
+```
+
+```js
+// metro.config.js
+const { getDefaultConfig } = require("expo/metro-config")
+const { withMath } = require("react-native-marcus/metro")
+
+module.exports = withMath(getDefaultConfig(__dirname))
+```
+
+`withMath` does two things. It points the library's maths backend — a stub that draws nothing — at the real one, which is what keeps MathJax out of every bundle that has not asked for it. And it teaches Metro the [subpath imports](https://nodejs.org/api/packages.html#subpath-imports) MathJax addresses its own modules with: the `imports` field in its `package.json`, which Metro does not implement, so without this every internal import fails to resolve. The mapping is read out of MathJax's own manifest rather than written down here. Any `resolveRequest` already on your config is kept and chained to.
+
+The whole font is bundled — all forty glyph ranges, about 3.5 MB gzipped — because the alternative is an expression that silently fails to draw. Everything else about running MathJax under Hermes and Metro is handled in [`src/math/mathjax.ts`](./src/math/mathjax.ts), which is worth reading if you are doing something similar: the `navigator.appVersion` it assumes exists, the synchronous font loader it needs instead of `fetch`, the inline line-breaking that has to be turned off, and the `ex` units that must not reach a browser.
+
+`speech-rule-engine` is MathJax's own accessibility engine and is what says an equation out loud — see [Accessibility and copying](#accessibility-and-copying). It comes with MathJax as a dependency of its own, and is named on the install line so that it resolves from this package too under a strict node_modules layout. Leave it out and everything still draws; equations are just read as their TeX.
+
+`withMath` takes the languages you want equations read out in, and bundles only those:
+
+```js
+module.exports = withMath(getDefaultConfig(__dirname), { locales: ["en", "fr"] })
+```
+
+The engine ships `af`, `ca`, `da`, `de`, `en`, `es`, `fr`, `hi`, `it`, `ko`, `nb`, `nn` and `sv`, at around 300 KB of rules each. `["en"]` is the default, and everything not named is resolved away to nothing — an application that reads its maths in English has no business carrying the four megabytes for the twelve languages it does not. Name the ones you already translate the rest of your interface into.
+
+## Accessibility and copying
+
+A drawing is one character in the text the platform lays out — U+FFFC, the object replacement character — which is what a view nested in a `Text` costs on both platforms. That one character is what makes the layout work, and it is also all that a screen reader and the clipboard would otherwise get.
+
+**Reading.** `MarkdownText` gives the paragraph an `accessibilityLabel` in which every placeholder is written back out as what it stands for: an image's `alt`, and, for maths, the equation said out loud.
+
+```
+$$\frac{a}{b}$$          →  "StartFraction a Over b EndFraction"
+$$\alpha\beta \in \mathbb{R}$$  →  "alpha beta element of double struck upper R"
+```
+
+That is [`speech-rule-engine`](https://github.com/zorkow/speech-rule-engine), the engine MathJax itself uses for the same job on the web, so an equation in your app is announced in the phrasing a screen reader user of maths already knows. An expression it cannot say falls back to its TeX, and so does every expression when the maths backend is not installed.
+
+**In whichever language your reader speaks.** `mathAccessibilityLocale` says which; it is usually the same value the rest of your interface is translated into, since what a document is written in and what its reader speaks are two different questions.
+
+```tsx
+<MarkdownText math renderSVG={renderSVG} mathAccessibilityLocale="fr">
+  {message}
+</MarkdownText>
+```
+
+```
+$$\frac{a}{b}$$   en →  "StartFraction a Over b EndFraction"
+                  fr →  "début fraction a sur b fin fraction"
+                  de →  "Anfang Bruch a durch b Ende Bruch"
+```
+
+Only the languages named in [`withMath(config, { locales })`](#enabling-mathjax) are in the bundle; asking for one that is not reads it in English and warns in the console saying which line would fix it. Nothing else about the drawing changes — the picture is the same in every language, and the prose around it is read in the language it was written in.
+
+An empty `alt` is left empty, since that is how a decorative image is declared, and your own `accessibilityLabel` always wins. On the web each drawing is a `role="math"` (or `role="img"`) element with an `aria-label`, so it is read in place rather than as part of one long string.
+
+`MarkdownTextInput` keeps the TeX, and should: there the TeX is what is on the screen, what the caret moves through and what backspace deletes, so reading anything else out would describe a document that is not there.
+
+**Copying.** Copying a selection puts the maths back on the clipboard as the markdown it was written as — `$$x^2$$`, not a hole where an equation was — so a message copied out of a chat pastes back into one, on all three platforms.
+
+|         | how                                                                                                              |
+| ------- | ---------------------------------------------------------------------------------------------------------------- |
+| Web     | the `copy` event is intercepted and the fragment the browser was about to serialise is walked                    |
+| Android | the selection toolbar's copy is answered by the decorator, which rebuilds the selected range from the source     |
+| iOS     | `copy:` on the paragraph is replaced with one that substitutes the placeholders before writing to the pasteboard |
+
+The rest of a copy is what a copy of styled text has always been: plain text. `**bold**` comes off the screen as "bold". List markers are laid out rather than removed, so they come with it; a heading's `#` and a quote's `>` are drawn rather than written, so they do not. An image copies as nothing, the way an `<img>` does on the web.
 
-Currently, `react-native-marcus` supports only [CommonMark](https://spec.commonmark.org/0.31.2/) flavor with [GFM (Github Flavored Markdown)](https://github.github.com/gfm/) extensions out-of-the-box. You can customize the behavior by passing a custom parser worklet function via the `parser` prop, as detailed in the [Parsing logic](#parsing-logic) section.
+On Android this only ever applies to a `Text` you have marked `selectable`, and only to paragraphs that have a drawing in them; everything else copies exactly as it did before.
 
 ## API reference
 
 `MarkdownTextInput` inherits all props of React Native's `TextInput` component as well as introduces the following properties:
 
-| Prop            | Type                                 | Default     | Note                                                                                                                                                   |
-| --------------- | ------------------------------------ | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `parser`        | `(value: string) => MarkdownRange[]` | `undefined` | A function that parses the current value and returns an array of ranges.                                                                               |
-| `markdownStyle` | `MarkdownStyle`                      | `undefined` | Adds custom styling to Markdown text. The provided value is merged with default style object. See [Styling](./README.md#styling) for more information. |
+| Prop            | Type            | Default     | Note                                                                                                                                                   |
+| --------------- | --------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `markdownStyle` | `MarkdownStyle` | `undefined` | Adds custom styling to Markdown text. The provided value is merged with default style object. See [Styling](./README.md#styling) for more information. |
+| `gfm`           | `boolean`       | `false`     | Recognises GFM's strikethrough and bare autolinks. See [Markdown flavors support](./README.md#markdown-flavors-support).                               |
+| `mention`       | `boolean`       | `false`     | Recognises `@name` mentions. See [Markdown flavors support](./README.md#markdown-flavors-support).                                                     |
+| `math`          | `boolean`       | `false`     | Recognises `$$x^2$$` LaTeX. See [Math](./README.md#math).                                                                                              |
+
+`MarkdownText` inherits all props of React Native's `Text` component, takes `markdownStyle` and the three flavour props above, and adds:
+
+| Prop          | Type                                    | Default     | Note                                                                                                 |
+| ------------- | --------------------------------------- | ----------- | ---------------------------------------------------------------------------------------------------- |
+| `renderEmbed` | `(uri, alt, title, inline) => element?` | `undefined` | What to put where an image was. Without it, images are left as markup.                               |
+| `renderSVG`   | `(xml, width, height) => element?`      | `undefined` | What to draw an SVG with. Without it, maths is left as it was written. See [Math](./README.md#math). |
+| `mathAccessibilityLocale` | `string`                    | `"en"`      | The language a drawn equation is read out in. See [Accessibility and copying](./README.md#accessibility-and-copying). |
+| `onLinkPress` | `(uri, label, title) => void`           | `undefined` | Called when a link is pressed. The URL is not opened for you.                                        |
 
 ## Compatibility
 

package/RNMarcus.podspec

@@ -37,10 +37,15 @@ Pod::Spec.new do |s|
   # the .mm/.cpp sources that actually need them.
   s.private_header_files = [
     "apple/MarcusModule.h",
+    "apple/MarcusSwizzle.h",
     "apple/MarkdownSwiftInterop.h",
     "apple/MarcusTextInputDecoratorComponentView.h",
     "apple/MarcusTextInputDecoratorShadowNode.h",
+    "apple/MarcusTextDecoratorComponentView.h",
+    "apple/MarcusTextDecoratorShadowNode.h",
+    "apple/MarcusTextLayoutManager.h",
     "apple/RCTMarcusStyle+Codegen.h",
+    "apple/RCTParagraphComponentView+Marcus.h",
     "apple/RCTTextInputComponentView+Marcus.h",
     "cpp/MarkdownGlobal.h",
     "cpp/MarkdownWorkletParser.h",
@@ -72,6 +77,7 @@ Pod::Spec.new do |s|
     add_dependency(s, "React-FabricComponents", :additional_framework_paths => [
       "react/renderer/textlayoutmanager/platform/ios",
       "react/renderer/components/textinput/platform/ios",
+      "react/renderer/components/text",
     ])
     add_dependency(s, "React-rendererconsistency")
   end

package/android/src/main/java/app/getbullet/marcus/MarcusPackage.kt

@@ -11,7 +11,8 @@ class MarcusPackage : BaseReactPackage() {
 
   override fun createViewManagers(
     reactContext: ReactApplicationContext
-  ): List<ViewManager<in Nothing, in Nothing>> = listOf(MarcusTextInputDecoratorViewManager())
+  ): List<ViewManager<in Nothing, in Nothing>> =
+    listOf(MarcusTextInputDecoratorViewManager(), MarcusTextDecoratorViewManager())
 
   override fun getReactModuleInfoProvider(): ReactModuleInfoProvider = ReactModuleInfoProvider {
     mapOf(

package/android/src/main/java/app/getbullet/marcus/MarcusTextDecoratorView.kt

@@ -0,0 +1,168 @@
+package app.getbullet.marcus
+
+import android.content.ClipData
+import android.content.ClipboardManager
+import android.content.Context
+import android.text.SpannableStringBuilder
+import android.view.ActionMode
+import android.view.Menu
+import android.view.MenuItem
+import android.view.ViewTreeObserver
+import android.widget.TextView
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.uimanager.ReactCompoundViewGroup
+import com.facebook.react.views.text.ReactTextView
+import com.facebook.react.views.view.ReactViewGroup
+
+/**
+ * Formats the spannable of the `Text` it wraps.
+ *
+ * Android splits text in two: the measure pass runs on the background thread through the
+ * `TextLayoutManager` the shadow node was given, and the mount pass builds a second spannable on
+ * the UI thread from the same fragments. `MarcusTextDecoratorShadowNode` covers the first; this
+ * covers the second, because the callback React Native offers there
+ * (`ReactTextViewManagerCallback`) belongs to the view manager and is therefore shared by every
+ * `Text` in the app, with no way to tell one instance's markdown from another's.
+ *
+ * Formatting is driven from a pre-draw listener rather than a text watcher: attaching a
+ * `TextWatcher` to a `TextView` makes it copy its text into an `Editable`, which would throw away
+ * the spannable React Native is holding. The listener is cheap -- `MarkdownUtils` stamps what it
+ * formatted onto the spannable, so all a quiet frame costs is reading one span -- and returning
+ * false on the frame that did format keeps a partly styled frame from ever being drawn.
+ */
+class MarcusTextDecoratorView(context: Context) : ReactViewGroup(context), ReactCompoundViewGroup {
+
+  private var markdownUtils: MarkdownUtils? = null
+
+  private val preDrawListener = ViewTreeObserver.OnPreDrawListener { applyMarkdown() }
+
+  var markdownStyle: MarkdownStyle? = null
+    set(value) {
+      field = value
+      markdownUtils?.markdownStyle = value
+    }
+
+  var ranges: List<MarkdownRange> = emptyList()
+    set(value) {
+      field = value
+      markdownUtils?.ranges = value
+    }
+
+  /** What each drawing in the text copies as; empty for a paragraph with none. */
+  var substitutions: List<MarkdownSubstitution> = emptyList()
+
+  /**
+   * Answers the selection toolbar's copy, and only that.
+   *
+   * Everything else in the toolbar -- select all, share, the app's own items -- is left to the
+   * `TextView`, and so is copy itself when there is nothing in the text that would copy wrong.
+   * `false` from `onActionItemClicked` means "not handled", which is exactly the fall-through
+   * wanted.
+   */
+  private val selectionActionMode =
+    object : ActionMode.Callback {
+      // Both true, and both have to be: the floating toolbar asks the callback
+      // to prepare its menu every time it is about to be shown, and takes false
+      // for "there is nothing to show" and finishes the mode. The menu itself is
+      // left exactly as the `TextView` built it.
+      override fun onCreateActionMode(mode: ActionMode, menu: Menu) = true
+
+      override fun onPrepareActionMode(mode: ActionMode, menu: Menu) = true
+
+      override fun onDestroyActionMode(mode: ActionMode) = Unit
+
+      override fun onActionItemClicked(mode: ActionMode, item: MenuItem): Boolean {
+        if (item.itemId != android.R.id.copy || substitutions.isEmpty()) {
+          return false
+        }
+
+        val child = getChildAt(0) as? TextView ?: return false
+        val start = child.selectionStart
+        val end = child.selectionEnd
+
+        if (start < 0 || end <= start) {
+          return false
+        }
+
+        val clipboard =
+          context.getSystemService(Context.CLIPBOARD_SERVICE) as? ClipboardManager ?: return false
+
+        clipboard.setPrimaryClip(
+          ClipData.newPlainText(null, MarkdownCopy.substitute(child.text, start, end, substitutions))
+        )
+
+        mode.finish()
+        return true
+      }
+    }
+
+  override fun onAttachedToWindow() {
+    super.onAttachedToWindow()
+
+    val child = getChildAt(0)
+    if (child is ReactTextView) {
+      markdownUtils =
+        MarkdownUtils(context as ReactContext, child.paint, display = true).also {
+          it.markdownStyle = markdownStyle
+          it.ranges = ranges
+        }
+
+      // Only reached when the `Text` is selectable, which is the only way a copy can be asked for
+      // in the first place.
+      child.customSelectionActionModeCallback = selectionActionMode
+    }
+
+    viewTreeObserver.addOnPreDrawListener(preDrawListener)
+  }
+
+  override fun onDetachedFromWindow() {
+    viewTreeObserver.removeOnPreDrawListener(preDrawListener)
+    markdownUtils = null
+
+    super.onDetachedFromWindow()
+  }
+
+  /**
+   * Answers for the `Text` below, so that a press is measured from where the text is drawn.
+   *
+   * `ReactTextView.reactTagForTouch` reads the touch straight off the layout without taking the
+   * view's padding off it first, so a `Text` with any padding at all looks up the character that
+   * many pixels down and to the right of the one under the finger. With 8dp of padding and a 19dp
+   * line that is the bottom of every line pressing the line below it, which is most of what makes
+   * a link feel like it has to be aimed at. Claiming the touch here is the only way to correct
+   * the coordinates: the child is asked first otherwise, and by then they are already wrong.
+   */
+  override fun interceptsTouchEvent(touchX: Float, touchY: Float): Boolean =
+    getChildAt(0) is ReactTextView
+
+  override fun reactTagForTouch(touchX: Float, touchY: Float): Int {
+    val child = getChildAt(0) as? ReactTextView ?: return id
+
+    // Nothing lands on the tag of a view that has no press to report, so a miss falling back to
+    // the text's own tag is the same as no target at all.
+    return child.reactTagForTouch(
+      touchX - child.left - child.totalPaddingLeft,
+      touchY - child.top - child.totalPaddingTop,
+    )
+  }
+
+  /** False when the frame was formatted, so it is drawn again rather than half styled. */
+  private fun applyMarkdown(): Boolean {
+    val child = getChildAt(0) as? ReactTextView ?: return true
+    val utils = markdownUtils ?: return true
+    if (utils.markdownStyle == null) {
+      return true
+    }
+
+    // The spannable React Native built for this commit. The view's own text is a copy of it --
+    // `TextView` freezes what it is given -- so the formatted result has to be set back below.
+    val spannable = child.spanned as? SpannableStringBuilder ?: return true
+
+    if (!utils.applyMarkdownFormatting(spannable)) {
+      return true
+    }
+
+    child.setText(spannable, TextView.BufferType.SPANNABLE)
+    return false
+  }
+}

package/android/src/main/java/app/getbullet/marcus/MarcusTextDecoratorViewManager.kt

@@ -0,0 +1,38 @@
+package app.getbullet.marcus
+
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.annotations.ReactProp
+
+@ReactModule(name = MarcusTextDecoratorViewManager.NAME)
+class MarcusTextDecoratorViewManager : MarcusTextDecoratorViewManagerSpec() {
+
+  override fun getName(): String = NAME
+
+  public override fun createViewInstance(context: ThemedReactContext): MarcusTextDecoratorView =
+    MarcusTextDecoratorView(context)
+
+  // The generated interface declares these parameters @Nullable, so the overrides have to accept
+  // null even though both props always arrive set.
+  @ReactProp(name = "markdownStyle")
+  override fun setMarkdownStyle(view: MarcusTextDecoratorView, value: ReadableMap?) {
+    val map = requireNotNull(value) { "[react-native-marcus] markdownStyle prop is required" }
+    view.markdownStyle = MarkdownStyle(map, view.context)
+  }
+
+  @ReactProp(name = "ranges")
+  override fun setRanges(view: MarcusTextDecoratorView, value: ReadableArray?) {
+    view.ranges = MarkdownRanges.read(value)
+  }
+
+  @ReactProp(name = "substitutions")
+  override fun setSubstitutions(view: MarcusTextDecoratorView, value: ReadableArray?) {
+    view.substitutions = MarkdownCopy.read(value)
+  }
+
+  companion object {
+    const val NAME = "MarcusTextDecoratorView"
+  }
+}

package/android/src/main/java/app/getbullet/marcus/MarcusTextDecoratorViewManagerSpec.kt

@@ -0,0 +1,19 @@
+package app.getbullet.marcus
+
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.viewmanagers.MarcusTextDecoratorViewManagerDelegate
+import com.facebook.react.viewmanagers.MarcusTextDecoratorViewManagerInterface
+
+// Not generic over the view type, for the same reason as
+// `MarcusTextInputDecoratorViewManagerSpec`: the generated delegate's second type parameter is a
+// Java intersection type, which Kotlin has no syntax for.
+abstract class MarcusTextDecoratorViewManagerSpec :
+  ViewGroupManager<MarcusTextDecoratorView>(),
+  MarcusTextDecoratorViewManagerInterface<MarcusTextDecoratorView> {
+
+  private val delegate: ViewManagerDelegate<MarcusTextDecoratorView> =
+    MarcusTextDecoratorViewManagerDelegate(this)
+
+  override fun getDelegate(): ViewManagerDelegate<MarcusTextDecoratorView> = delegate
+}