react-native-marcus 0.1.0

package/src/rangeUtils.ts

@@ -0,0 +1,68 @@
+"worklet"
+
+import type { MarkdownRange } from "./commonTypes"
+
+// A range is emitted when the construct it belongs to opens, so the parser's order is already
+// containment order: whatever encloses something opened before it. `sortRanges` keeps that order
+// for ranges it cannot separate, which is just as well, because for two containers of the same size
+// the answer is not a property of their types at all -- `> - a` and `- > a` are the same pair over
+// the same line, nested opposite ways.
+//
+// One pairing breaks the rule, deliberately. `flushLine` emits a container's `block-prefix` before
+// the container itself, because the native formatters lay a line out in one left-to-right walk and
+// hand each marker to the container that follows it; the `syntax` inside that marker is emitted
+// earlier still, when the marker's own token opens. Typing a bare `>` therefore produces three
+// ranges over one character, in exactly the wrong order for a tree.
+//
+// This table exists to invert that one pairing, and nothing else: a block container outranks the
+// `block-prefix` holding its marker, which outranks the `syntax` of the marker itself. `heading`
+// sits above the default so it encloses what a heading line contains, and `emoji` below everything
+// because it is always innermost. A container type left out of the table sorts level with the
+// marker it should contain, and the marker then renders once per range -- see
+// `reportAmbiguousNesting`, which is the check for exactly that.
+function getTagPriority(tag: string) {
+  switch (tag) {
+    case "blockquote":
+    case "list-ordered":
+    case "list-unordered":
+      return 3
+    case "block-prefix":
+      return 2
+    case "heading":
+      return 1
+    case "emoji":
+      return -1
+    default:
+      return 0
+  }
+}
+
+// Sorts into the containment order the web builder nests by: outermost first, and for anything the
+// three keys below cannot separate, the order the parser emitted them in. That last step is load
+// bearing rather than incidental -- `Array.prototype.sort` is required to be stable, and emission
+// order is what decides which of two equally sized containers encloses the other.
+function sortRanges(ranges: MarkdownRange[]) {
+  // sort ranges by start position, then by length, then by tag hierarchy
+  return ranges.sort(
+    (a, b) =>
+      a.start - b.start ||
+      b.length - a.length ||
+      getTagPriority(b.type) - getTagPriority(a.type) ||
+      0,
+  )
+}
+
+function ungroupRanges(ranges: MarkdownRange[]): MarkdownRange[] {
+  const ungroupedRanges: MarkdownRange[] = []
+  ranges.forEach((range) => {
+    if (!range.depth) {
+      ungroupedRanges.push(range)
+    }
+    const { depth, ...rangeWithoutDepth } = range
+    Array.from({ length: depth! }).forEach(() => {
+      ungroupedRanges.push(rangeWithoutDepth)
+    })
+  })
+  return ungroupedRanges
+}
+export { getTagPriority, sortRanges, ungroupRanges }

package/src/react-native-web.d.ts

@@ -0,0 +1 @@
+declare module "react-native-web/dist/exports/StyleSheet/compiler/createReactDOMStyle"

package/src/styleUtils.ts

@@ -0,0 +1,100 @@
+import { Platform } from "react-native"
+import type { MarkdownStyle } from "./MarcusTextInputDecoratorViewNativeComponent"
+
+type PartialMarkdownStyle = Partial<{
+  [K in keyof MarkdownStyle]: Partial<MarkdownStyle[K]>
+}>
+
+const FONT_FAMILY_MONOSPACE = Platform.select({
+  ios: "Courier",
+  default: "monospace",
+})
+
+const FONT_FAMILY_EMOJI = Platform.select({
+  ios: "System",
+  android: "Noto Color Emoji",
+  default: "System, Apple Color Emoji, Segoe UI Emoji, Noto Color Emoji",
+})
+
+function makeDefaultMarkdownStyle(): MarkdownStyle {
+  return {
+    syntax: {
+      color: "gray",
+    },
+    link: {
+      color: "blue",
+    },
+    heading: {
+      fontSize: 38,
+      scale: 0.85,
+    },
+    emoji: {
+      fontSize: 16,
+      fontFamily: FONT_FAMILY_EMOJI,
+    },
+    blockquote: {
+      borderColor: "gray",
+      borderWidth: 6,
+      marginLeft: 6,
+      paddingLeft: 6,
+    },
+    orderedList: {
+      marginLeft: 6,
+      paddingLeft: 18,
+    },
+    unorderedList: {
+      marginLeft: 6,
+      paddingLeft: 18,
+    },
+    code: {
+      fontFamily: FONT_FAMILY_MONOSPACE,
+      fontSize: 16,
+      color: "black",
+      backgroundColor: "lightgray",
+    },
+    pre: {
+      fontFamily: FONT_FAMILY_MONOSPACE,
+      fontSize: 16,
+      color: "black",
+      backgroundColor: "lightgray",
+    },
+    mentionHere: {
+      color: "green",
+      backgroundColor: "lime",
+      borderRadius: 5,
+    },
+    mentionUser: {
+      color: "blue",
+      backgroundColor: "cyan",
+      borderRadius: 5,
+    },
+    mentionReport: {
+      color: "red",
+      backgroundColor: "pink",
+      borderRadius: 5,
+    },
+  }
+}
+
+function mergeMarkdownStyleWithDefault(input: PartialMarkdownStyle | undefined): MarkdownStyle {
+  const output = makeDefaultMarkdownStyle()
+
+  if (input !== undefined) {
+    Object.keys(input).forEach((key) => {
+      if (!(key in output)) {
+        return
+      }
+
+      const outputValue = output[key as keyof MarkdownStyle]
+      if (outputValue) {
+        Object.assign(outputValue, input[key as keyof MarkdownStyle])
+      }
+    })
+  }
+
+  return output
+}
+
+export type { PartialMarkdownStyle }
+
+export { mergeMarkdownStyleWithDefault }

package/src/web/InputHistory.ts

@@ -0,0 +1,137 @@
+type HistoryItem = {
+  text: string
+  cursorPosition: number | null
+}
+
+export default class InputHistory {
+  depth: number
+
+  items: HistoryItem[]
+
+  historyIndex: number
+
+  currentText: string | null = null
+
+  timeout: NodeJS.Timeout | null = null
+
+  debounceTime: number
+
+  constructor(depth: number, debounceTime = 150, startingText = "") {
+    this.depth = depth
+    this.items = [{ text: startingText, cursorPosition: startingText.length }]
+    this.historyIndex = 0
+    this.debounceTime = debounceTime
+  }
+
+  getCurrentItem(): HistoryItem | null {
+    return this.items[this.historyIndex] || null
+  }
+
+  setHistory(newHistory: HistoryItem[]): void {
+    this.items = newHistory.slice(newHistory.length - this.depth)
+    this.historyIndex = newHistory.length - 1
+  }
+
+  setHistoryIndex(index: number): void {
+    this.historyIndex = index
+  }
+
+  clear(): void {
+    this.items = []
+    this.historyIndex = 0
+  }
+
+  throttledAdd(text: string, cursorPosition: number): void {
+    if (this.timeout) {
+      clearTimeout(this.timeout)
+    }
+
+    if (this.currentText === null) {
+      this.timeout = null
+      this.add(text, cursorPosition)
+    } else {
+      this.items[this.historyIndex] = { text, cursorPosition }
+    }
+    this.currentText = text
+
+    this.timeout = setTimeout(() => {
+      this.currentText = null
+    }, this.debounceTime)
+  }
+
+  stopTimeout(): void {
+    if (this.timeout) {
+      clearTimeout(this.timeout)
+      this.timeout = null
+    }
+    this.currentText = null
+  }
+
+  add(text: string, cursorPosition: number): void {
+    if (this.items.length > 0) {
+      const currentItem = this.items[this.historyIndex]
+      if (currentItem && text === currentItem.text) {
+        return
+      }
+    }
+
+    if (this.historyIndex < this.items.length - 1) {
+      this.items.splice(this.historyIndex + 1)
+      this.historyIndex = this.items.length - 1
+    }
+
+    this.items.push({ text, cursorPosition })
+    if (this.items.length > this.depth) {
+      this.items.shift()
+    } else {
+      this.historyIndex += 1
+    }
+  }
+
+  undo(): HistoryItem | null {
+    this.stopTimeout()
+
+    if (this.items.length === 0 || this.historyIndex - 1 < 0) {
+      return null
+    }
+
+    const currentHistoryItem = this.items[this.historyIndex]
+    const previousHistoryItem = this.items[this.historyIndex - 1]
+
+    const undoItem = previousHistoryItem
+      ? {
+          text: previousHistoryItem.text,
+          cursorPosition: Math.min(
+            (currentHistoryItem?.cursorPosition ?? 0) -
+              ((currentHistoryItem?.text ?? "").length -
+                (previousHistoryItem?.text ?? "").length),
+            (previousHistoryItem?.text ?? "").length,
+          ),
+        }
+      : null
+
+    if (this.historyIndex > 0) {
+      this.historyIndex -= 1
+    }
+
+    return undoItem
+  }
+
+  redo(): HistoryItem | null {
+    if (this.currentText !== null && this.timeout) {
+      this.stopTimeout()
+    }
+
+    if (this.items.length === 0 || this.historyIndex + 1 > this.items.length) {
+      return null
+    }
+
+    if (this.historyIndex < this.items.length - 1) {
+      this.historyIndex += 1
+    } else {
+      return null
+    }
+
+    return this.items[this.historyIndex] || null
+  }
+}

package/src/web/MarkdownTextInput.css

@@ -0,0 +1,72 @@
+.react-native-marcus-input-multiline {
+  white-space: pre-wrap;
+}
+
+.react-native-marcus-input-singleline p {
+  display: inline-block;
+}
+
+.react-native-marcus-input-multiline p {
+  display: block;
+}
+
+.react-native-marcus-input-singleline::-webkit-scrollbar {
+  display: none;
+}
+
+.react-native-marcus-input-singleline br {
+  display: none;
+}
+
+.react-native-marcus-input-singleline span[data-type='text'] {
+  vertical-align: middle;
+}
+
+.react-native-marcus-input-singleline span[data-type='link'] span[data-type='text'] {
+  vertical-align: top;
+}
+
+.react-native-marcus-input-singleline > p:last-child {
+  padding-right: 1px !important;
+}
+
+.react-native-marcus-input-singleline:empty::before,
+.react-native-marcus-input-multiline:empty::before {
+  pointer-events: none;
+  display: block; /* For Firefox */
+  content: attr(placeholder);
+}
+
+.react-native-marcus-input-multiline *[data-type='pre'] {
+  line-height: 1.3;
+  display: block;
+  width: fit-content;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.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;
+}
+
+.react-native-marcus-input-singleline *[data-type='code'] > *[data-type='emoji'],
+.react-native-marcus-input-multiline *[data-type='code'] > *[data-type='emoji'] {
+  font-size: inherit !important;
+  line-height: inherit !important;
+  vertical-align: unset !important;
+}
+
+.react-native-marcus-input-multiline *[data-type='line'] *[data-type='syntax']:has(+ *[data-type='pre']),
+.react-native-marcus-input-multiline *[data-type='line'] *[data-type='pre'] + *[data-type='syntax'] {
+  display: block;
+  line-height: 1.3;
+}
+
+[class^='react-native-marcus-input'] [data-type='strikethrough'] * {
+  text-decoration: inherit;
+}

package/src/web/utils/blockLayout.ts

@@ -0,0 +1,163 @@
+import type { MarkdownRange, MarkdownType } from "../../commonTypes"
+import type { PartialMarkdownStyle } from "../../styleUtils"
+import type { TextMeasurer } from "./measureUtils"
+
+const BLOCK_PREFIX = "block-prefix"
+
+/**
+ * Where one line's text sits, and what has to be drawn in the space to its left.
+ *
+ * The same three numbers the native formatters produce: `firstLineIndent` is `firstLineHeadIndent`
+ * on iOS and `getLeadingMargin(true)` on Android, `indent` is the head indent the line resumes at
+ * when it wraps, and `ribbons` are the offsets `MarkdownTextLayoutFragment` and
+ * `MarkdownBlockIndentSpan` fill a blockquote's bars at.
+ */
+type LineLayout = {
+  firstLineIndent: number
+  indent: number
+  ribbons: number[]
+  /** Space to open after a marker, so the next container's gutter lands between the two. */
+  gaps: Map<number, number>
+}
+
+function toNumber(value: string | number | undefined | null): number {
+  if (typeof value === "number") {
+    return value
+  }
+  if (!value) {
+    return 0
+  }
+  const parsed = parseFloat(value)
+  return Number.isFinite(parsed) ? parsed : 0
+}
+
+/** The gutter one level of a container reserves, or null if the type is not one. */
+function stepOf(type: MarkdownType, markdownStyle: PartialMarkdownStyle): number | null {
+  switch (type) {
+    case "blockquote":
+      return (
+        toNumber(markdownStyle.blockquote?.marginLeft) +
+        toNumber(markdownStyle.blockquote?.borderWidth) +
+        toNumber(markdownStyle.blockquote?.paddingLeft)
+      )
+    case "list-ordered":
+      return (
+        toNumber(markdownStyle.orderedList?.marginLeft) +
+        toNumber(markdownStyle.orderedList?.paddingLeft)
+      )
+    case "list-unordered":
+      return (
+        toNumber(markdownStyle.unorderedList?.marginLeft) +
+        toNumber(markdownStyle.unorderedList?.paddingLeft)
+      )
+    default:
+      return null
+  }
+}
+
+/**
+ * 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
+ * walk.
+ *
+ * Each container reserves a gutter and is then followed by its own marker, which is text and so has
+ * to be stepped over rather than reserved: the container nested inside it starts after the marker,
+ * not in front of it. That is what puts a quote's ribbons after a list bullet, and a list's indent
+ * after a quote's `>`.
+ *
+ * A line continuing a block carries no marker of its own and reuses the one that opened it, which
+ * is why this runs across the whole document rather than per line: without it a continuation line
+ * would sit a marker's width to the left of the line above and break the block in two.
+ *
+ * It reads the ranges in the order the parser emits them -- marker, then the container it belongs
+ * to -- so it has to run before `sortRanges` rearranges them into the containment order the DOM
+ * builder needs.
+ */
+function layoutBlocks(
+  text: string,
+  ranges: MarkdownRange[],
+  markdownStyle: PartialMarkdownStyle,
+  measure: TextMeasurer,
+): 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)
+
+  let pendingPrefix: MarkdownRange | null = null
+  let line: LineLayout | null = null
+  let lineStart = -1
+  /** Offset reached so far, from the line's own left edge. */
+  let offset = 0
+  /**
+   * Where the line's first marker begins, if it has one. The text starts there; everything past it
+   * is held open with padding instead.
+   */
+  let textStart = -1
+  /** Marker of the container placed most recently, if it is on this line and so has something to
+   * pad. */
+  let padded: MarkdownRange | null = null
+
+  for (let i = 0; i < ranges.length; i++) {
+    const range = ranges[i] as MarkdownRange
+
+    if (range.type === BLOCK_PREFIX) {
+      pendingPrefix = range
+      continue
+    }
+
+    const step = stepOf(range.type, markdownStyle)
+    if (step === null) {
+      continue
+    }
+
+    const depth = range.depth && range.depth > 0 ? range.depth : 1
+    const gutter = step * depth
+
+    if (range.start !== lineStart) {
+      lineStart = range.start
+      offset = 0
+      textStart = -1
+      padded = null
+      line = { firstLineIndent: 0, indent: 0, ribbons: [], gaps: new Map() }
+      layouts.set(lineStart, line)
+    }
+
+    const current = line as LineLayout
+
+    if (padded) {
+      current.gaps.set(padded.start, (current.gaps.get(padded.start) ?? 0) + gutter)
+    }
+
+    if (range.type === "blockquote") {
+      for (let level = 0; level < depth; level++) {
+        current.ribbons.push(offset + ribbonMargin + step * level)
+      }
+    }
+
+    offset += gutter
+
+    if (pendingPrefix) {
+      markers.set(range.type, pendingPrefix)
+      if (textStart < 0) {
+        textStart = offset
+      }
+    }
+
+    const marker = pendingPrefix ?? markers.get(range.type)
+    if (marker) {
+      offset += measure(text.substring(marker.start, marker.start + marker.length))
+    }
+
+    padded = pendingPrefix
+    pendingPrefix = null
+
+    current.firstLineIndent = textStart >= 0 ? textStart : offset
+    current.indent = offset
+  }
+
+  return layouts
+}
+
+export { layoutBlocks, toNumber }
+export type { LineLayout }