react-native-marcus 0.1.0 → 0.2.0

package/src/web/utils/parserUtils.ts

@@ -1,16 +1,18 @@
 import type { HTMLMarkdownElement, MarkdownTextInputElement } from "../../MarkdownTextInput.web"
 import { addNodeToTree, createRootTreeNode } from "./treeUtils"
 import type { NodeType, TreeNode } from "./treeUtils"
-import type { PartialMarkdownStyle } from "../../styleUtils"
+import type { ResolvedMarkdownStyle } from "../../styleUtils"
 import { getCurrentCursorPosition, moveCursorToEnd, setCursorPosition } from "./cursorUtils"
 import {
   addBlockPrefixGap,
   addLineLayout,
   addStyleToBlock,
   isMultilineMarkdownType,
+  setRibbonEdge,
 } from "./blockUtils"
-import { layoutBlocks } from "./blockLayout"
-import type { LineLayout } from "./blockLayout"
+import { createMarkdownElement, isBlockLevelType } from "./elementUtils"
+import { layoutBlocks, SHOWN_MARKERS } from "./blockLayout"
+import type { LineLayout, MarkerRendering } from "./blockLayout"
 import { createTextMeasurer } from "./measureUtils"
 import type { TextMeasurer } from "./measureUtils"
 import type { MarkdownRange, MarkdownType } from "../../commonTypes"
@@ -77,7 +79,7 @@ function splitRangeIntoSeparateLines(
 ) {
   const mainLineRangeLength = currentLine.start + currentLine.length - range.start
   // A range starting exactly at the newline has nothing on this line. Pushing the empty portion
-  // anyway made the builder render an empty span, and an empty span is given a `<br>` to keep the
+  // anyway made the builder render an empty element, and an empty one is given a `<br>` to keep the
   // line height -- a line break in the text that the user never typed.
   if (mainLineRangeLength > 0) {
     currentLine.markdownRanges.push({
@@ -164,8 +166,7 @@ function appendNode(
 }
 
 function addBrElement(node: TreeNode) {
-  const span = document.createElement("span") as HTMLMarkdownElement
-  span.setAttribute("data-type", "br")
+  const span = createMarkdownElement("br")
   appendValueToElement(span, node, "\n")
   const spanNode = appendNode(span, node, "br", 1)
   appendNode(document.createElement("br") as unknown as HTMLMarkdownElement, spanNode, "br", 1)
@@ -176,9 +177,8 @@ function addTextToElement(node: TreeNode, text: string, isMultiline = true) {
   const lines = text.split("\n")
   lines.forEach((line, index) => {
     if (line !== "") {
-      const span = document.createElement("span") as HTMLMarkdownElement
+      const span = createMarkdownElement("text")
       appendValueToElement(span, node, line)
-      span.setAttribute("data-type", "text")
       span.appendChild(document.createTextNode(line))
       appendNode(span, node, "text", line.length)
 
@@ -186,7 +186,7 @@ function addTextToElement(node: TreeNode, text: string, isMultiline = true) {
       if (
         !isMultiline &&
         parentType &&
-        ["pre", "code", "mention-here", "mention-user", "mention-report"].includes(parentType)
+        ["pre", "code", "mention"].includes(parentType)
       ) {
         // this is a fix to background colors being shifted downwards in a singleline input
         addStyleToBlock(span, "text", {}, false)
@@ -200,16 +200,34 @@ function addTextToElement(node: TreeNode, text: string, isMultiline = true) {
   })
 }
 
+/**
+ * Builds the element one line of the document is rendered into.
+ *
+ * A line of prose is a paragraph and is built as one. A line carrying a block -- a quote, a list
+ * item, a heading, a fenced block -- is not: `<p>` holds phrasing content only, and the elements
+ * those types are built as are flow content, so a `<p>` around them would be markup no browser
+ * would have parsed and no serializer will round-trip. Such a line gets a `<div>`, which says
+ * nothing and is allowed to hold anything -- the elements inside it are where the meaning is.
+ *
+ * `dir="auto"` makes the line its own bidi paragraph, taking its direction from the first strong
+ * character in it. That is what the two native platforms already do -- `NSWritingDirectionNatural`
+ * is UIKit's default and `firstStrong` is Android's -- so a quote in Arabic inside an otherwise
+ * English document opens its gutter on the right on all three rather than on two of them. It is
+ * also what `setRibbonEdge` asks the browser about, since the direction a line resolved to is
+ * readable through `:dir()` and not through anything the `direction` property leaves behind.
+ */
 function addParagraph(
   node: TreeNode,
   text: string | null,
   length: number,
   layout: LineLayout | undefined,
-  markdownStyle: PartialMarkdownStyle,
+  markdownStyle: ResolvedMarkdownStyle,
   disableInlineStyles = false,
+  tag: "p" | "div" = "p",
 ) {
-  const p = document.createElement("p")
+  const p = document.createElement(tag)
   p.setAttribute("data-type", "line")
+  p.setAttribute("dir", "auto")
   if (!disableInlineStyles) {
     addLineLayout(p, layout, markdownStyle)
   }
@@ -266,7 +284,34 @@ function reportAmbiguousNesting(ranges: MarkdownRange[]) {
 }
 
 /**
- * Builds one `<p data-type="line">` under `rootNode`.
+ * The heading level this range is, or 0 if it is one of the nested copies inside one.
+ *
+ * A heading arrives as one range per level -- `ungroupRanges` expands `depth` into the nesting the
+ * `em` sizing compounds down -- so the level is how many of them there are, and only the outermost
+ * can be the `<hN>`. The copies are identical objects, and a stable sort leaves them adjacent, so
+ * counting the ones still to come is counting the levels.
+ */
+function headingLevel(parent: TreeNode, range: MarkdownRange, remaining: MarkdownRange[]) {
+  for (let node: TreeNode | null = parent; node !== null; node = node.parentNode) {
+    if (node.type === "heading") {
+      return 0
+    }
+  }
+
+  let level = 1
+  while (
+    remaining[level - 1]?.type === "heading" &&
+    remaining[level - 1]?.start === range.start &&
+    remaining[level - 1]?.length === range.length
+  ) {
+    level += 1
+  }
+
+  return level
+}
+
+/**
+ * Builds one `data-type="line"` element under `rootNode`.
  *
  * Lines are independent: nothing carries across from the previous one, which is what lets an update
  * rebuild a single line and leave the rest of the document alone.
@@ -277,11 +322,12 @@ function addLine(
   textLength: number,
   hasRanges: boolean,
   isMultiline: boolean,
-  markdownStyle: PartialMarkdownStyle,
+  markdownStyle: ResolvedMarkdownStyle,
   disableInlineStyles: boolean,
+  rendering: MarkerRendering,
 ) {
   if (!hasRanges) {
-    return addParagraph(
+    const plainNode = addParagraph(
       rootNode,
       line.text,
       line.length,
@@ -289,8 +335,15 @@ function addLine(
       markdownStyle,
       disableInlineStyles,
     )
+
+    if (!disableInlineStyles) {
+      setRibbonEdge(plainNode.element, line.layout)
+    }
+
+    return plainNode
   }
 
+  const tag = line.markdownRanges.some((range) => isBlockLevelType(range.type)) ? "div" : "p"
   const lineNode = addParagraph(
     rootNode,
     null,
@@ -298,6 +351,7 @@ function addLine(
     line.layout,
     markdownStyle,
     disableInlineStyles,
+    tag,
   )
   let currentParentNode: TreeNode = lineNode
 
@@ -330,34 +384,57 @@ function addLine(
       addTextToElement(currentParentNode, textBeforeRange, isMultiline)
     }
 
-    // create markdown span element
-    const span = document.createElement("span") as HTMLMarkdownElement
-    span.setAttribute("data-type", range.type)
+    // create the markdown element
+    const element = createMarkdownElement(
+      range.type,
+      range.type === "heading" ? headingLevel(currentParentNode, range, lineMarkdownRanges) : 0,
+    )
 
-    const spanNode = appendNode(span, currentParentNode, range.type, range.length, range.start)
+    const rangeNode = appendNode(element, currentParentNode, range.type, range.length, range.start)
 
     // Styled once it is in the tree, not before: a heading's size depends on how many heading
     // levels enclose it, and an element with no parent looks like the outermost one.
     if (!disableInlineStyles) {
-      addStyleToBlock(span, range.type, markdownStyle, isMultiline)
+      addStyleToBlock(element, range.type, markdownStyle, isMultiline, rendering)
       if (range.type === "block-prefix") {
-        addBlockPrefixGap(span, line.layout?.gaps.get(range.start))
+        addBlockPrefixGap(element, line.layout?.gaps.get(range.start))
       }
     }
 
+    // A list container may hold nothing but items, so everything it contains goes into one. The
+    // item covers exactly what the container does -- a line of a list is an item of it -- and from
+    // here on it is what the walk fills and unwinds through.
+    const contentNode =
+      range.type === "list-ordered" || range.type === "list-unordered"
+        ? appendNode(
+            createMarkdownElement("list-item"),
+            rangeNode,
+            "list-item",
+            range.length,
+            range.start,
+          )
+        : rangeNode
+
     if (
       lineMarkdownRanges.length > 0 &&
       nextRangeStartIndex < endOfCurrentRange &&
       range.type !== "syntax"
     ) {
       // tag nesting
-      currentParentNode = spanNode
+      currentParentNode = contentNode
       lastRangeEndIndex = range.start
     } else {
       // adding markdown tag
-      addTextToElement(spanNode, line.text.substring(range.start - line.start, endOfCurrentRange - line.start), isMultiline)
+      addTextToElement(
+        contentNode,
+        line.text.substring(range.start - line.start, endOfCurrentRange - line.start),
+        isMultiline,
+      )
+      if (contentNode !== rangeNode) {
+        rangeNode.element.value = contentNode.element.value
+      }
       currentParentNode.element.value =
-        (currentParentNode.element.value || "") + (spanNode.element.value || "")
+        (currentParentNode.element.value || "") + (rangeNode.element.value || "")
       lastRangeEndIndex = endOfCurrentRange
       // tag unnesting and adding text after the tag
       while (
@@ -392,6 +469,12 @@ function addLine(
     }
   }
 
+  // Last, once the line holds all its text: a line's own direction is read from what is in it, and
+  // it is what says which edge a quote's ribbons hang from.
+  if (!disableInlineStyles) {
+    setRibbonEdge(lineNode.element, line.layout)
+  }
+
   return lineNode
 }
 
@@ -399,8 +482,9 @@ function addLine(
 function prepareLines(
   text: string,
   ranges: MarkdownRange[],
-  markdownStyle: PartialMarkdownStyle,
+  markdownStyle: ResolvedMarkdownStyle,
   measure: TextMeasurer,
+  rendering: MarkerRendering = SHOWN_MARKERS,
 ) {
   const lines = splitTextIntoLines(text)
 
@@ -411,7 +495,7 @@ function prepareLines(
   // Before anything reorders them: the block walk reads the ranges in the order the parser emits
   // them -- each marker immediately before the container it belongs to -- and `sortRanges` sorts
   // that order away in place.
-  const layouts = layoutBlocks(text, ranges, markdownStyle, measure)
+  const layouts = layoutBlocks(text, ranges, markdownStyle, measure, rendering)
 
   // Sort all ranges by start position, length, and by tag hierarchy so the styles and text are applied in correct order
   const sortedRanges = sortRanges(ranges)
@@ -441,9 +525,10 @@ function parseRangesToHTMLNodes(
   text: string,
   ranges: MarkdownRange[],
   isMultiline = true,
-  markdownStyle: PartialMarkdownStyle = {},
+  markdownStyle: ResolvedMarkdownStyle = {},
   disableInlineStyles = false,
   measure: TextMeasurer = createTextMeasurer(null),
+  rendering: MarkerRendering = SHOWN_MARKERS,
 ) {
   const rootElement: HTMLMarkdownElement = document.createElement("span") as HTMLMarkdownElement
   const textLength = text.length
@@ -452,7 +537,7 @@ function parseRangesToHTMLNodes(
   // Built line by line, exactly as an update builds the lines it has to replace, so the two agree
   // by construction and each line sits at the offset the text gives it rather than at wherever the
   // line before it happened to end.
-  prepareLines(text, ranges, markdownStyle, measure).forEach((line, index) => {
+  prepareLines(text, ranges, markdownStyle, measure, rendering).forEach((line, index) => {
     const node = buildLine(
       line,
       index,
@@ -461,6 +546,7 @@ function parseRangesToHTMLNodes(
       isMultiline,
       markdownStyle,
       disableInlineStyles,
+      rendering,
     )
     node.parentNode = rootNode
     rootNode.childNodes.push(node)
@@ -480,7 +566,7 @@ type CachedLine = {
 }
 
 type LineCache = {
-  markdownStyle: PartialMarkdownStyle
+  markdownStyle: ResolvedMarkdownStyle
   isMultiline: boolean
   lines: CachedLine[]
 }
@@ -563,8 +649,9 @@ function buildLine(
   textLength: number,
   hasRanges: boolean,
   isMultiline: boolean,
-  markdownStyle: PartialMarkdownStyle,
+  markdownStyle: ResolvedMarkdownStyle,
   disableInlineStyles = false,
+  rendering: MarkerRendering = SHOWN_MARKERS,
 ) {
   // The scratch root carries the line's offset, so the subtree comes out with the absolute `start`
   // values the builder compares against range offsets -- the same ones it would get if the whole
@@ -582,6 +669,7 @@ function buildLine(
     isMultiline,
     markdownStyle,
     disableInlineStyles,
+    rendering,
   )
 
   coverChildren(node)
@@ -628,7 +716,7 @@ function reconcileLines(
   textLength: number,
   hasRanges: boolean,
   isMultiline: boolean,
-  markdownStyle: PartialMarkdownStyle,
+  markdownStyle: ResolvedMarkdownStyle,
   shouldForceDOMUpdate: boolean,
 ) {
   const signatures = lines.map((line) => signatureOf(line, hasRanges))
@@ -755,7 +843,7 @@ function updateInputStructure(
   text: string,
   cursorPositionIndex: number | null,
   isMultiline = true,
-  markdownStyle: PartialMarkdownStyle = {},
+  markdownStyle: ResolvedMarkdownStyle = {},
   alwaysMoveCursorToTheEnd = false,
   shouldForceDOMUpdate = false,
   shouldScrollIntoView = false,

package/src/web/utils/treeUtils.ts

@@ -1,7 +1,12 @@
 import type { HTMLMarkdownElement } from "../../MarkdownTextInput.web"
 import type { MarkdownRange, MarkdownType } from "../../commonTypes"
 
-type NodeType = MarkdownType | "line" | "text" | "br" | "root"
+/**
+ * `list-item` is the one node with no range behind it: `<ul>` and `<ol>` may hold nothing but
+ * `<li>`, so the builder puts one inside each list container and everything the container holds
+ * goes in there. It covers exactly what its container does.
+ */
+type NodeType = MarkdownType | "line" | "text" | "br" | "root" | "list-item"
 
 type TreeNode = Omit<MarkdownRange, "type"> & {
   element: HTMLMarkdownElement

package/src/web/utils/webStyleUtils.ts

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { TextStyle } from "react-native"
 import type { MarkdownStyle } from "../../MarcusTextInputDecoratorViewNativeComponent"
+import type { PartialMarkdownStyle, ResolvedMarkdownStyle } from "../../styleUtils"
 import { mergeMarkdownStyleWithDefault } from "../../styleUtils"
 
 let createReactDOMStyle: (style: any) => any
@@ -36,20 +37,43 @@ try {
   )
 }
 
-function processUnitsInMarkdownStyle(input: MarkdownStyle): MarkdownStyle {
+// The three shadow properties are left as they were written. An offset is an object rather than a
+// length, and a radius that carried its unit here could not be composed with an offset that did
+// not: `blockUtils` builds the one `text-shadow` declaration out of all three instead.
+const RAW_PROPS = new Set(["textShadowOffset", "textShadowRadius"])
+
+/**
+ * Gives every length in the style its CSS unit.
+ *
+ * Walks the whole tree rather than its top two levels, because a list's `marker` puts style values
+ * one level further down than the entries around it.
+ */
+function processUnitsInMarkdownStyle(input: MarkdownStyle): ResolvedMarkdownStyle {
   const output = JSON.parse(JSON.stringify(input))
 
-  Object.keys(output).forEach((key) => {
-    const obj = output[key]
-    Object.keys(obj).forEach((prop) => {
-      obj[prop] = dangerousStyleValue(prop, obj[prop], false)
+  const walk = (node: any) => {
+    Object.keys(node).forEach((prop) => {
+      const value = node[prop]
+
+      if (RAW_PROPS.has(prop)) {
+        return
+      }
+
+      if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+        walk(value)
+        return
+      }
+
+      node[prop] = dangerousStyleValue(prop, value, false)
     })
-  })
+  }
+
+  walk(output)
 
-  return output as MarkdownStyle
+  return output as ResolvedMarkdownStyle
 }
 
-function processMarkdownStyle(input: MarkdownStyle | undefined): MarkdownStyle {
+function processMarkdownStyle(input: PartialMarkdownStyle | undefined): ResolvedMarkdownStyle {
   return processUnitsInMarkdownStyle(mergeMarkdownStyleWithDefault(input))
 }
 

package/android/src/main/java/app/getbullet/marcus/spans/MarkdownBackgroundColorSpan.kt

@@ -1,6 +0,0 @@
-package app.getbullet.marcus.spans
-
-import android.text.style.BackgroundColorSpan
-import androidx.annotation.ColorInt
-
-class MarkdownBackgroundColorSpan(@ColorInt color: Int) : BackgroundColorSpan(color), MarkdownSpan

package/android/src/main/java/app/getbullet/marcus/spans/MarkdownBoldSpan.kt

@@ -1,6 +0,0 @@
-package app.getbullet.marcus.spans
-
-import android.graphics.Typeface
-import android.text.style.StyleSpan
-
-class MarkdownBoldSpan : StyleSpan(Typeface.BOLD), MarkdownSpan

package/android/src/main/java/app/getbullet/marcus/spans/MarkdownItalicSpan.kt

@@ -1,6 +0,0 @@
-package app.getbullet.marcus.spans
-
-import android.graphics.Typeface
-import android.text.style.StyleSpan
-
-class MarkdownItalicSpan : StyleSpan(Typeface.ITALIC), MarkdownSpan

package/apple/RCTMarcusStyle+Codegen.mm

@@ -1,64 +0,0 @@
-#import <RNMarcus/RCTMarcusStyle+Codegen.h>
-
-#import <React/RCTConversions.h>
-
-@implementation RCTMarcusStyle (Codegen)
-
-- (instancetype)initWithStruct:
-  (const facebook::react::MarcusTextInputDecoratorViewMarkdownStyleStruct &)style {
-  if (self = [super init]) {
-    self.syntaxColor = RCTUIColorFromSharedColor(style.syntax.color);
-
-    self.linkColor = RCTUIColorFromSharedColor(style.link.color);
-
-    self.headingFontSize = style.heading.fontSize;
-    self.headingScale = style.heading.scale;
-
-    self.emojiFontSize = style.emoji.fontSize;
-    self.emojiFontFamily = RCTNSStringFromString(style.emoji.fontFamily);
-
-    self.blockquoteBorderColor =
-      RCTUIColorFromSharedColor(style.blockquote.borderColor);
-    self.blockquoteBorderWidth = style.blockquote.borderWidth;
-    self.blockquoteMarginLeft = style.blockquote.marginLeft;
-    self.blockquotePaddingLeft = style.blockquote.paddingLeft;
-
-    self.orderedListMarginLeft = style.orderedList.marginLeft;
-    self.orderedListPaddingLeft = style.orderedList.paddingLeft;
-
-    self.unorderedListMarginLeft = style.unorderedList.marginLeft;
-    self.unorderedListPaddingLeft = style.unorderedList.paddingLeft;
-
-    self.codeFontFamily = RCTNSStringFromString(style.code.fontFamily);
-    self.codeFontSize = style.code.fontSize;
-    self.codeColor = RCTUIColorFromSharedColor(style.code.color);
-    self.codeBackgroundColor =
-      RCTUIColorFromSharedColor(style.code.backgroundColor);
-
-    self.preFontFamily = RCTNSStringFromString(style.pre.fontFamily);
-    self.preFontSize = style.pre.fontSize;
-    self.preColor = RCTUIColorFromSharedColor(style.pre.color);
-    self.preBackgroundColor =
-      RCTUIColorFromSharedColor(style.pre.backgroundColor);
-
-    self.mentionHereColor = RCTUIColorFromSharedColor(style.mentionHere.color);
-    self.mentionHereBackgroundColor =
-      RCTUIColorFromSharedColor(style.mentionHere.backgroundColor);
-    self.mentionHereBorderRadius = style.mentionHere.borderRadius;
-
-    self.mentionUserColor = RCTUIColorFromSharedColor(style.mentionUser.color);
-    self.mentionUserBackgroundColor =
-      RCTUIColorFromSharedColor(style.mentionUser.backgroundColor);
-    self.mentionUserBorderRadius = style.mentionUser.borderRadius;
-
-    self.mentionReportColor =
-      RCTUIColorFromSharedColor(style.mentionReport.color);
-    self.mentionReportBackgroundColor =
-      RCTUIColorFromSharedColor(style.mentionReport.backgroundColor);
-    self.mentionReportBorderRadius = style.mentionReport.borderRadius;
-  }
-
-  return self;
-}
-
-@end

package/apple/RCTMarcusUtils.h

@@ -1,26 +0,0 @@
-#import <RNMarcus/RCTMarcusStyle.h>
-#import <UIKit/UIKit.h>
-
-NS_ASSUME_NONNULL_BEGIN
-
-// Parses and formats in one step for the view layer.
-//
-// Parsing is stateful (it owns the parser's memo cache) so it stays here rather
-// than moving to Swift; formatting itself is a stateless Swift call. One
-// instance is owned per text input and only ever touched on the main thread.
-@interface RCTMarcusUtils : NSObject
-
-// Nullable: both are assigned after init (props arrive after the view
-// hierarchy is built), and applyMarkdownFormatting: bails out when either is
-// still nil.
-@property(nonatomic, nullable) RCTMarcusStyle *markdownStyle;
-@property(nonatomic, nullable) NSNumber *parserId;
-
-- (void)applyMarkdownFormatting:
-          (nonnull NSMutableAttributedString *)attributedString
-      withDefaultTextAttributes:
-        (nonnull NSDictionary<NSAttributedStringKey, id> *)defaultTextAttributes;
-
-@end
-
-NS_ASSUME_NONNULL_END

package/apple/RCTMarcusUtils.mm

@@ -1,26 +0,0 @@
-#import <RNMarcus/MarkdownSwiftInterop.h>
-#import <RNMarcus/RCTMarcusUtils.h>
-
-@implementation RCTMarcusUtils
-
-- (void)applyMarkdownFormatting:
-          (nonnull NSMutableAttributedString *)attributedString
-      withDefaultTextAttributes:
-        (nonnull NSDictionary<NSAttributedStringKey, id> *)defaultTextAttributes {
-  // `markdownStyle` and `parserId` may not be set yet: props are applied after
-  // the view hierarchy is built.
-  if (_markdownStyle == nil || _parserId == nil) {
-    return;
-  }
-
-  NSArray<MarcusRange *> *markdownRanges =
-    [[MarkdownParser sharedParser] parse:attributedString.string
-                            withParserId:_parserId];
-
-  [MarkdownFormatter formatAttributedString:attributedString
-                      defaultTextAttributes:defaultTextAttributes
-                                     ranges:markdownRanges
-                                      style:_markdownStyle];
-}
-
-@end