react-native-marcus 0.1.0 → 0.2.0

package/src/styleUtils.ts

@@ -1,7 +1,117 @@
-import { Platform } from "react-native"
-import type { MarkdownStyle } from "./MarcusTextInputDecoratorViewNativeComponent"
+import { Platform, processColor } from "react-native"
+import type { TextStyle, ViewStyle } from "react-native"
+import type {
+  MarkdownEmojiStyle,
+  MarkdownStyle,
+} from "./MarcusTextInputDecoratorViewNativeComponent"
 
-type PartialMarkdownStyle = Partial<{
+// The public spelling of a run's text attributes: React Native's own
+// `TextStyle`, narrowed to the properties the three formatters can honour.
+// Picked from it rather than restated so the names, the unions and the doc
+// comments are React Native's, and so a style object written for a `Text` can be
+// handed straight to a markdown entry.
+//
+// What is deliberately not here: everything `TextStyle` inherits from
+// `ViewStyle` -- an attributed-string run has no box to lay out -- along with
+// `textAlign`, `textTransform`, `fontVariant` and `writingDirection`, which are
+// paragraph- or string-level rather than run-level and would each mean something
+// different on each platform.
+type MarkdownTextStyleProps = Pick<
+  TextStyle,
+  | "color"
+  | "fontFamily"
+  | "fontSize"
+  | "fontStyle"
+  | "fontWeight"
+  | "letterSpacing"
+  | "lineHeight"
+  | "textDecorationLine"
+  | "textDecorationColor"
+  | "textDecorationStyle"
+  | "textShadowColor"
+  | "textShadowOffset"
+  | "textShadowRadius"
+>
+
+// The room a boxed run holds open, on top of its text attributes. Also picked
+// from React Native's own types, for the same reason.
+type MarkdownBoxStyleProps = MarkdownTextStyleProps &
+  Pick<
+    ViewStyle,
+    | "backgroundColor"
+    | "borderColor"
+    | "borderWidth"
+    | "borderRadius"
+    | "padding"
+    | "paddingHorizontal"
+    | "paddingVertical"
+    | "margin"
+    | "marginHorizontal"
+    | "marginVertical"
+  > & {
+    // Narrowed from `DimensionValue`: a percentage has nothing to be a
+    // percentage of inside a line of text.
+    padding?: number
+    paddingHorizontal?: number
+    paddingVertical?: number
+    margin?: number
+    marginHorizontal?: number
+    marginVertical?: number
+    borderWidth?: number
+    borderRadius?: number
+  }
+
+type MarkdownHeadingStyleProps = MarkdownTextStyleProps & {
+  scale?: number
+}
+
+type MarkdownBlockquoteStyleProps = MarkdownTextStyleProps &
+  Pick<ViewStyle, "borderColor"> & {
+    borderWidth?: number
+    borderRadius?: number
+    marginStart?: number
+    paddingStart?: number
+  }
+
+type MarkdownListStyleProps = {
+  marginStart?: number
+  paddingStart?: number
+  markerScale?: number
+  markerPadding?: number
+  marker?: MarkdownTextStyleProps
+}
+
+/**
+ * A markdown style as it is written: every entry optional, every property
+ * optional, and anything left out taken from the defaults below.
+ */
+type PartialMarkdownStyle = {
+  syntax?: MarkdownTextStyleProps
+  emoji?: MarkdownEmojiStyle
+  link?: MarkdownTextStyleProps
+  strong?: MarkdownTextStyleProps
+  emphasis?: MarkdownTextStyleProps
+  strikethrough?: MarkdownTextStyleProps
+  heading?: MarkdownHeadingStyleProps
+  blockquote?: MarkdownBlockquoteStyleProps
+  orderedList?: MarkdownListStyleProps
+  unorderedList?: MarkdownListStyleProps
+  code?: MarkdownBoxStyleProps
+  pre?: MarkdownBoxStyleProps
+  mention?: MarkdownBoxStyleProps
+}
+
+/**
+ * The style once the defaults have been merged in: every entry present, every
+ * property still optional.
+ *
+ * Distinct from `PartialMarkdownStyle`, which is what a caller writes. This is
+ * what a renderer reads, and on the web its lengths have been through React
+ * Native Web's compiler by the time they get there -- a `fontSize` of `16` is
+ * the string `"16px"` -- which is why everything downstream of it either casts
+ * or runs the value back through `toNumber`.
+ */
+type ResolvedMarkdownStyle = Partial<{
   [K in keyof MarkdownStyle]: Partial<MarkdownStyle[K]>
 }>
 
@@ -16,6 +126,15 @@ const FONT_FAMILY_EMOJI = Platform.select({
   default: "System, Apple Color Emoji, Segoe UI Emoji, Noto Color Emoji",
 })
 
+/**
+ * What every renderer draws before a style says otherwise.
+ *
+ * The marks that used to be hard-coded in the formatters -- a heading's and a
+ * strong run's bold, an emphasised run's italic, a link's underline, a
+ * strikethrough's line -- are written out here instead, so that the same switch
+ * that applies a custom weight applies the default one, and so that naming
+ * `strong.fontWeight` replaces the bold rather than fighting it.
+ */
 function makeDefaultMarkdownStyle(): MarkdownStyle {
   return {
     syntax: {
@@ -23,9 +142,20 @@ function makeDefaultMarkdownStyle(): MarkdownStyle {
     },
     link: {
       color: "blue",
+      textDecorationLine: "underline",
+    },
+    strong: {
+      fontWeight: "bold",
+    },
+    emphasis: {
+      fontStyle: "italic",
+    },
+    strikethrough: {
+      textDecorationLine: "line-through",
     },
     heading: {
       fontSize: 38,
+      fontWeight: "bold",
       scale: 0.85,
     },
     emoji: {
@@ -35,47 +165,131 @@ function makeDefaultMarkdownStyle(): MarkdownStyle {
     blockquote: {
       borderColor: "gray",
       borderWidth: 6,
-      marginLeft: 6,
-      paddingLeft: 6,
+      borderRadius: 0,
+      marginStart: 6,
+      paddingStart: 6,
     },
     orderedList: {
-      marginLeft: 6,
-      paddingLeft: 18,
+      marginStart: 6,
+      paddingStart: 18,
+      markerScale: 0.8,
+      markerPadding: 2,
+      marker: {},
     },
     unorderedList: {
-      marginLeft: 6,
-      paddingLeft: 18,
+      marginStart: 6,
+      paddingStart: 18,
+      markerScale: 0.3,
+      markerPadding: 2,
+      marker: {},
     },
     code: {
       fontFamily: FONT_FAMILY_MONOSPACE,
       fontSize: 16,
       color: "black",
       backgroundColor: "lightgray",
+      borderRadius: 4,
+      padding: 2,
+      margin: 2,
     },
     pre: {
       fontFamily: FONT_FAMILY_MONOSPACE,
       fontSize: 16,
       color: "black",
       backgroundColor: "lightgray",
+      borderRadius: 4,
+      padding: 8,
+      margin: 4,
     },
-    mentionHere: {
-      color: "green",
-      backgroundColor: "lime",
-      borderRadius: 5,
-    },
-    mentionUser: {
+    mention: {
       color: "blue",
       backgroundColor: "cyan",
       borderRadius: 5,
-    },
-    mentionReport: {
-      color: "red",
-      backgroundColor: "pink",
-      borderRadius: 5,
+      padding: 2,
+      margin: 0,
     },
   }
 }
 
+// The entries whose values are themselves style objects rather than lengths, and
+// so have to be merged rather than replaced: overriding `orderedList.marker`
+// must not drop the marker's colour from the defaults.
+const NESTED_KEYS = new Set(["marker", "textShadowOffset"])
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AnyObject = Record<string, any>
+
+function isPlainObject(value: unknown): value is AnyObject {
+  return typeof value === "object" && value !== null && !Array.isArray(value)
+}
+
+/**
+ * Copies `input` over `output` in place, one level deep, and two where the value
+ * is itself a style object.
+ *
+ * `undefined` is skipped rather than written, so spreading a style that spells a
+ * property out as `undefined` -- which is what an optional prop destructured
+ * from a component's props looks like -- leaves the default in place instead of
+ * erasing it.
+ */
+function assignStyle(output: AnyObject, input: AnyObject) {
+  Object.keys(input).forEach((key) => {
+    const value = input[key]
+
+    if (value === undefined) {
+      return
+    }
+
+    if (NESTED_KEYS.has(key) && isPlainObject(value)) {
+      const nested = isPlainObject(output[key]) ? output[key] : {}
+      assignStyle(nested, value)
+      // eslint-disable-next-line no-param-reassign
+      output[key] = nested
+      return
+    }
+
+    // React Native accepts a numeric font weight; the native decorators read it
+    // as a string, because codegen has no union of a number and a string.
+    // eslint-disable-next-line no-param-reassign
+    output[key] = key === "fontWeight" && typeof value === "number" ? String(value) : value
+  })
+}
+
+// The entries drawn as a box, and so written with lengths that may be given for
+// both axes at once.
+const BOX_KEYS = ["code", "pre", "mention"] as const
+const LIST_KEYS = ["orderedList", "unorderedList"] as const
+
+/**
+ * Settles the two questions a renderer would otherwise have to ask about where a
+ * value came from, so that none of the three has to ask them.
+ *
+ * A box's `padding` and `margin` cover both axes and `paddingHorizontal` and the
+ * rest win over them, but native cannot tell a length that was left out from one
+ * that was written as zero -- codegen has no optional numbers -- so the pair is
+ * resolved into the two axes here, once, rather than three times over.
+ *
+ * A list marker's style is `syntax` with the list's own `marker` over it, which
+ * is what keeps `syntax.color` meaning what it always meant for a marker while
+ * letting a list say something different.
+ */
+function resolveMarkdownStyle(style: MarkdownStyle): MarkdownStyle {
+  BOX_KEYS.forEach((key) => {
+    const box = style[key]
+
+    box.paddingHorizontal = box.paddingHorizontal ?? box.padding ?? 0
+    box.paddingVertical = box.paddingVertical ?? box.padding ?? 0
+    box.marginHorizontal = box.marginHorizontal ?? box.margin ?? 0
+    box.marginVertical = box.marginVertical ?? box.margin ?? 0
+  })
+
+  LIST_KEYS.forEach((key) => {
+    style[key].marker = { ...style.syntax, ...style[key].marker }
+  })
+
+  return style
+}
+
 function mergeMarkdownStyleWithDefault(input: PartialMarkdownStyle | undefined): MarkdownStyle {
   const output = makeDefaultMarkdownStyle()
 
@@ -85,16 +299,66 @@ function mergeMarkdownStyleWithDefault(input: PartialMarkdownStyle | undefined):
         return
       }
 
-      const outputValue = output[key as keyof MarkdownStyle]
-      if (outputValue) {
-        Object.assign(outputValue, input[key as keyof MarkdownStyle])
+      const outputValue = (output as AnyObject)[key]
+      const inputValue = (input as AnyObject)[key]
+
+      if (isPlainObject(outputValue) && isPlainObject(inputValue)) {
+        assignStyle(outputValue, inputValue)
       }
     })
   }
 
-  return output
+  return resolveMarkdownStyle(output)
 }
 
-export type { PartialMarkdownStyle }
+/**
+ * Turns every colour in the style into the platform's own representation.
+ *
+ * Walks the whole tree rather than its top two levels: a list's `marker` and a
+ * run's `textShadowOffset` put style values one level further down than the
+ * entries around them.
+ */
+function processColorsInMarkdownStyle(input: MarkdownStyle): MarkdownStyle {
+  const output = JSON.parse(JSON.stringify(input))
+
+  const walk = (node: AnyObject) => {
+    Object.keys(node).forEach((prop) => {
+      const value = node[prop]
+
+      if (isPlainObject(value)) {
+        walk(value)
+        return
+      }
+
+      // TODO: use ReactNativeStyleAttributes from 'react-native/Libraries/Components/View/ReactNativeStyleAttributes'
+      if (!(prop === "color" || prop.endsWith("Color"))) {
+        return
+      }
+      // eslint-disable-next-line no-param-reassign
+      node[prop] = processColor(value)
+    })
+  }
+
+  walk(output)
+
+  return output as MarkdownStyle
+}
+
+// The shape the native decorators take: defaults filled in, colours turned into
+// the platform representation. Shared by both components so a style means the
+// same thing whether it is being typed into or read.
+function processMarkdownStyle(input: PartialMarkdownStyle | undefined): MarkdownStyle {
+  return processColorsInMarkdownStyle(mergeMarkdownStyleWithDefault(input))
+}
+
+export type {
+  PartialMarkdownStyle,
+  ResolvedMarkdownStyle,
+  MarkdownTextStyleProps,
+  MarkdownBoxStyleProps,
+  MarkdownHeadingStyleProps,
+  MarkdownBlockquoteStyleProps,
+  MarkdownListStyleProps,
+}
 
-export { mergeMarkdownStyleWithDefault }
+export { mergeMarkdownStyleWithDefault, processMarkdownStyle }

package/src/web/MarkdownElements.css

@@ -0,0 +1,67 @@
+/*
+ * Undoes what the browser does on a tag's behalf.
+ *
+ * A markdown element is built as the tag that says what its text is -- `<blockquote>`, `<ul>`,
+ * `<h2>`, `<pre>` -- and every one of those arrives with a look of its own: a quote indented forty
+ * pixels, a heading sized and spaced by level, a list with a bullet and a gutter, a `<pre>` in a
+ * monospace font that refuses to wrap. None of it is wanted. Every measurement this component
+ * renders by is computed from the markdown style and set on the element, and the two native
+ * formatters draw from the same numbers; a browser default left in place is the one thing that
+ * would move the web off them.
+ *
+ * So the tag is taken for what it means and the look it carries is handed back. Anything the
+ * builder sets is an inline style and wins over all of this, which leaves `addStyleToBlock` in
+ * charge of the appearance exactly as it was when every element was a span.
+ *
+ * The class is on the elements rather than on a container: these rules must reach the input and
+ * `MarkdownText` alike, and naming the library is what keeps them off everything else on the page.
+ */
+
+blockquote.react-native-marcus,
+ul.react-native-marcus,
+ol.react-native-marcus,
+li.react-native-marcus,
+pre.react-native-marcus,
+h1.react-native-marcus,
+h2.react-native-marcus,
+h3.react-native-marcus,
+h4.react-native-marcus,
+h5.react-native-marcus,
+h6.react-native-marcus {
+  display: inline;
+  margin: 0;
+  padding: 0;
+}
+
+/* The marker a list draws is its own, measured and placed by `layoutBlocks`. */
+ul.react-native-marcus,
+ol.react-native-marcus,
+li.react-native-marcus {
+  list-style: none;
+}
+
+/* `font` rather than `font-family`: the monospace default comes with a size of its own, and a
+   heading's comes with a weight and a size per level. */
+pre.react-native-marcus,
+code.react-native-marcus,
+h1.react-native-marcus,
+h2.react-native-marcus,
+h3.react-native-marcus,
+h4.react-native-marcus,
+h5.react-native-marcus,
+h6.react-native-marcus {
+  font: inherit;
+}
+
+/* A `<pre>` holds its own `white-space`, so a fenced block would stop wrapping with the rest of
+   the input the moment it became one. */
+pre.react-native-marcus {
+  white-space: inherit;
+}
+
+/* A link is coloured and underlined by `markdownStyle`, in the same values the native formatters
+   are given, rather than in the browser's blue. */
+a.react-native-marcus {
+  color: inherit;
+  text-decoration: none;
+}

package/src/web/MarkdownTextInput.css

@@ -2,11 +2,11 @@
   white-space: pre-wrap;
 }
 
-.react-native-marcus-input-singleline p {
+.react-native-marcus-input-singleline *[data-type='line'] {
   display: inline-block;
 }
 
-.react-native-marcus-input-multiline p {
+.react-native-marcus-input-multiline *[data-type='line'] {
   display: block;
 }
 
@@ -22,12 +22,13 @@
   vertical-align: middle;
 }
 
-.react-native-marcus-input-singleline span[data-type='link'] span[data-type='text'] {
+.react-native-marcus-input-singleline *[data-type='link'] span[data-type='text'] {
   vertical-align: top;
 }
 
-.react-native-marcus-input-singleline > p:last-child {
-  padding-right: 1px !important;
+/* Room for the caret past the last character, on whichever side the line ends. */
+.react-native-marcus-input-singleline > *[data-type='line']:last-child {
+  padding-inline-end: 1px !important;
 }
 
 .react-native-marcus-input-singleline:empty::before,
@@ -45,10 +46,11 @@
   box-sizing: border-box;
 }
 
+/* A block is drawn as a box across the line, the way both native formatters
+   draw it, rather than as a background hugging the code. Its own padding and
+   margin are set on the element by `addCodeBlockStyle`. */
 .react-native-marcus-input-multiline *[data-type='codeblock'] {
   position: relative;
-  width: fit-content;
-  max-width: 100%;
   box-sizing: border-box;
   z-index: 2;
   display: block;

package/src/web/utils/blockLayout.ts

@@ -1,5 +1,5 @@
 import type { MarkdownRange, MarkdownType } from "../../commonTypes"
-import type { PartialMarkdownStyle } from "../../styleUtils"
+import type { ResolvedMarkdownStyle } from "../../styleUtils"
 import type { TextMeasurer } from "./measureUtils"
 
 const BLOCK_PREFIX = "block-prefix"
@@ -20,6 +20,26 @@ type LineLayout = {
   gaps: Map<number, number>
 }
 
+/**
+ * How a list's markers are drawn, which is the one thing a display does differently from an input.
+ *
+ * A display renders the marker rather than showing it: an unordered item's `-` becomes a bullet, an
+ * ordered item's `1.` stays the number it means but at its own scale, and both hold a little room
+ * either side. An input shows the marker you typed, in the base font, because there it is text
+ * being edited rather than a rendering of it. `MarkdownFormatter` draws the same distinction on
+ * both native platforms from the same style values.
+ *
+ * `fontSize` is what the wrapped element renders at, in pixels, which is what a marker is sized in
+ * proportion to.
+ */
+type MarkerRendering = {
+  display: boolean
+  fontSize: number
+}
+
+/** An input's markers, and the default everywhere the question does not arise. */
+const SHOWN_MARKERS: MarkerRendering = { display: false, fontSize: 0 }
+
 function toNumber(value: string | number | undefined | null): number {
   if (typeof value === "number") {
     return value
@@ -32,29 +52,104 @@ function toNumber(value: string | number | undefined | null): number {
 }
 
 /** The gutter one level of a container reserves, or null if the type is not one. */
-function stepOf(type: MarkdownType, markdownStyle: PartialMarkdownStyle): number | null {
+function stepOf(type: MarkdownType, markdownStyle: ResolvedMarkdownStyle): number | null {
   switch (type) {
     case "blockquote":
       return (
-        toNumber(markdownStyle.blockquote?.marginLeft) +
+        toNumber(markdownStyle.blockquote?.marginStart) +
         toNumber(markdownStyle.blockquote?.borderWidth) +
-        toNumber(markdownStyle.blockquote?.paddingLeft)
+        toNumber(markdownStyle.blockquote?.paddingStart)
       )
     case "list-ordered":
       return (
-        toNumber(markdownStyle.orderedList?.marginLeft) +
-        toNumber(markdownStyle.orderedList?.paddingLeft)
+        toNumber(markdownStyle.orderedList?.marginStart) +
+        toNumber(markdownStyle.orderedList?.paddingStart)
       )
     case "list-unordered":
       return (
-        toNumber(markdownStyle.unorderedList?.marginLeft) +
-        toNumber(markdownStyle.unorderedList?.paddingLeft)
+        toNumber(markdownStyle.unorderedList?.marginStart) +
+        toNumber(markdownStyle.unorderedList?.paddingStart)
       )
     default:
       return null
   }
 }
 
+/** The style entry a list type's markers are drawn from, or null if the type is not a list. */
+function listStyle(type: MarkdownType, markdownStyle: ResolvedMarkdownStyle) {
+  switch (type) {
+    case "list-ordered":
+      return markdownStyle.orderedList ?? null
+    case "list-unordered":
+      return markdownStyle.unorderedList ?? null
+    default:
+      return null
+  }
+}
+
+/** Room held open either side of a marker, or nothing where the marker is shown rather than drawn. */
+function markerPadding(
+  type: MarkdownType,
+  markdownStyle: ResolvedMarkdownStyle,
+  rendering: MarkerRendering,
+): number {
+  if (!rendering.display) {
+    return 0
+  }
+
+  return toNumber(listStyle(type, markdownStyle)?.markerPadding)
+}
+
+/**
+ * The marker at the end of a prefix: the `-` of a bullet or the `1.` of a numbered item, without
+ * the indent in front of it or the space after it.
+ *
+ * Read off the text rather than taken from the `syntax` range covering it, because a prefix runs
+ * from wherever the previous container's marker ended and so can carry another container's marker
+ * with it -- the ordered list in `- > 1. ` is handed `> 1. `. The last run of non-blanks is this
+ * container's own. `MarkdownFormatter` reads it the same way on both native platforms.
+ */
+function markerRun(prefix: string): string {
+  const trimmed = prefix.replace(/[ \t]+$/, "")
+  const match = /[^ \t]+$/.exec(trimmed)
+
+  return match ? match[0] : ""
+}
+
+/**
+ * The width a prefix's glyphs take up: what it measures, with whatever the display draws in place
+ * of the marker standing in for the marker's own width.
+ */
+function markerWidth(
+  prefix: string,
+  type: MarkdownType,
+  markdownStyle: ResolvedMarkdownStyle,
+  rendering: MarkerRendering,
+  measure: TextMeasurer,
+): number {
+  const width = measure(prefix)
+  const style = listStyle(type, markdownStyle)
+
+  if (!rendering.display || rendering.fontSize <= 0 || !style) {
+    return width
+  }
+
+  const run = markerRun(prefix)
+  const scale = toNumber(style.markerScale)
+
+  if (run === "" || scale <= 0) {
+    return width
+  }
+
+  // What is left of the prefix -- an indent in front, the space behind -- measures as it always
+  // did; only the marker itself is drawn differently.
+  const rest = width - measure(run)
+
+  return type === "list-unordered"
+    ? rest + rendering.fontSize * scale
+    : rest + measure(run) * scale
+}
+
 /**
  * Places the containers of every line, left to right -- the web half of `BlockLayout` in
  * `apple/MarkdownFormatter.swift` and `android/.../MarkdownFormatter.kt`, and deliberately the same
@@ -76,13 +171,14 @@ function stepOf(type: MarkdownType, markdownStyle: PartialMarkdownStyle): number
 function layoutBlocks(
   text: string,
   ranges: MarkdownRange[],
-  markdownStyle: PartialMarkdownStyle,
+  markdownStyle: ResolvedMarkdownStyle,
   measure: TextMeasurer,
+  rendering: MarkerRendering = SHOWN_MARKERS,
 ): Map<number, LineLayout> {
   const layouts = new Map<number, LineLayout>()
   /** Last marker seen for each container type, for the lines that continue it. */
   const markers = new Map<MarkdownType, MarkdownRange>()
-  const ribbonMargin = toNumber(markdownStyle.blockquote?.marginLeft)
+  const ribbonMargin = toNumber(markdownStyle.blockquote?.marginStart)
 
   let pendingPrefix: MarkdownRange | null = null
   let line: LineLayout | null = null
@@ -137,6 +233,14 @@ function layoutBlocks(
 
     offset += gutter
 
+    // The room either side of a list marker is indent on the way in -- the marker moves right with
+    // the text -- and a gap after the prefix on the way out, which is where the gutter of a nested
+    // container goes too.
+    const marker = pendingPrefix ?? markers.get(range.type)
+    const padding = marker ? markerPadding(range.type, markdownStyle, rendering) : 0
+
+    offset += padding
+
     if (pendingPrefix) {
       markers.set(range.type, pendingPrefix)
       if (textStart < 0) {
@@ -144,9 +248,15 @@ function layoutBlocks(
       }
     }
 
-    const marker = pendingPrefix ?? markers.get(range.type)
     if (marker) {
-      offset += measure(text.substring(marker.start, marker.start + marker.length))
+      const prefix = text.substring(marker.start, marker.start + marker.length)
+
+      offset += markerWidth(prefix, range.type, markdownStyle, rendering, measure)
+      offset += padding
+
+      if (pendingPrefix && padding > 0) {
+        current.gaps.set(pendingPrefix.start, (current.gaps.get(pendingPrefix.start) ?? 0) + padding)
+      }
     }
 
     padded = pendingPrefix
@@ -159,5 +269,5 @@ function layoutBlocks(
   return layouts
 }
 
-export { layoutBlocks, toNumber }
-export type { LineLayout }
+export { layoutBlocks, markerRun, SHOWN_MARKERS, toNumber }
+export type { LineLayout, MarkerRendering }