react-native-marcus 0.1.0

package/src/web/utils/blockUtils.ts

@@ -0,0 +1,245 @@
+import type { PartialMarkdownStyle } from "../../styleUtils"
+import { toNumber } from "./blockLayout"
+import type { LineLayout } from "./blockLayout"
+import type { NodeType } from "./treeUtils"
+
+/**
+ * Assigns CSS properties, skipping the ones the style does not define.
+ *
+ * Lengths arrive here already carrying their unit -- `processMarkdownStyle` runs the style through
+ * react-native-web's compiler before it reaches the builder -- but `parseRangesToHTMLNodes` can be
+ * called with a plain object that has not, and `CSSStyleDeclaration` silently drops a bare number.
+ * Adding the unit here means both spellings render the same.
+ */
+function applyStyle(node: HTMLElement, styles: Record<string, string | number | undefined>) {
+  const target = node
+  Object.entries(styles).forEach(([property, value]) => {
+    if (value === undefined || value === null || value === "") {
+      return
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ;(target.style as any)[property] = typeof value === "number" ? `${value}px` : value
+  })
+}
+
+/**
+ * Applies the layout the block walk computed for one line.
+ *
+ * Everything a container contributes lands here rather than on the container's own span: its gutter
+ * is part of the paragraph's indent, and its ribbon is painted behind the whole paragraph. That is
+ * how the native formatters do it too, and on the web it is the only placement that works -- a
+ * container's span begins before the markers of the containers outside it, so a border drawn on it
+ * would sit in front of a bullet that is meant to precede it, and a gutter set on it would open
+ * before that bullet rather than after.
+ *
+ * `padding-left` holds every line of the paragraph at the indent, and the negative `text-indent`
+ * pulls the first one back to where its own marker starts -- `firstLineHeadIndent` and `headIndent`,
+ * spelled in CSS. A line that wraps, or a line continuing the block with no marker of its own, then
+ * lines up with the text above it instead of with the marker.
+ */
+function addLineLayout(
+  node: HTMLElement,
+  layout: LineLayout | undefined,
+  markdownStyle: PartialMarkdownStyle,
+) {
+  applyStyle(node, {
+    margin: "0",
+    padding: "0",
+  })
+
+  if (!layout) {
+    return
+  }
+
+  if (layout.indent > 0) {
+    applyStyle(node, {
+      paddingLeft: `${layout.indent}px`,
+      textIndent: `${layout.firstLineIndent - layout.indent}px`,
+    })
+  }
+
+  const width = toNumber(markdownStyle.blockquote?.borderWidth)
+  if (layout.ribbons.length === 0 || width <= 0) {
+    return
+  }
+
+  // One background layer per ribbon, each a solid bar of its own. They are painted on the paragraph
+  // rather than on any span so that they run its full height -- a quote that wraps gets one
+  // unbroken bar, exactly as `MarkdownTextLayoutFragment` draws it over the whole fragment.
+  const color = (markdownStyle.blockquote?.borderColor as string) || "transparent"
+  applyStyle(node, {
+    backgroundImage: layout.ribbons.map(() => `linear-gradient(${color}, ${color})`).join(", "),
+    backgroundPosition: layout.ribbons.map((x) => `${x}px 0`).join(", "),
+    backgroundSize: layout.ribbons.map(() => `${width}px 100%`).join(", "),
+    backgroundRepeat: "no-repeat",
+  })
+}
+
+/**
+ * Opens the space a marker holds for the container that follows it.
+ *
+ * `MarkdownFormatter` kerns the marker's last character; the effect is the same, and it is what
+ * puts a nested list's indent between the quote's `>` and the bullet rather than in front of both.
+ */
+function addBlockPrefixGap(node: HTMLElement, gap: number | undefined) {
+  if (gap) {
+    node.style.marginRight = `${gap}px`
+  }
+}
+
+function addStyleToBlock(
+  targetElement: HTMLElement,
+  type: NodeType,
+  markdownStyle: PartialMarkdownStyle,
+  isMultiline = true,
+) {
+  const node = targetElement
+
+  switch (type) {
+    case "syntax":
+      applyStyle(node, { color: markdownStyle.syntax?.color as string })
+      break
+    case "bold":
+      node.style.fontWeight = "bold"
+      break
+    case "italic":
+      node.style.fontStyle = "italic"
+      break
+    case "strikethrough":
+      node.style.textDecoration = "line-through"
+      break
+    case "emoji":
+      applyStyle(node, {
+        fontFamily: markdownStyle.emoji?.fontFamily,
+        fontSize: markdownStyle.emoji?.fontSize,
+        // Native re-centres a run whose font changed against the line height; the browser has no
+        // equivalent, and an emoji font left on the alphabetic baseline sits low.
+        verticalAlign: "middle",
+      })
+      break
+    case "mention-here":
+      addMentionStyle(node, markdownStyle.mentionHere)
+      break
+    case "mention-user":
+      addMentionStyle(node, markdownStyle.mentionUser)
+      break
+    case "mention-report":
+      addMentionStyle(node, markdownStyle.mentionReport)
+      break
+    case "link":
+      applyStyle(node, {
+        color: markdownStyle.link?.color as string,
+        textDecoration: "underline",
+      })
+      break
+    // Both carry a font, a colour and a background, and nothing else: native draws no border, no
+    // corner radius and no padding around either, so neither does this.
+    case "code":
+      applyStyle(node, {
+        fontFamily: markdownStyle.code?.fontFamily,
+        fontSize: markdownStyle.code?.fontSize,
+        color: markdownStyle.code?.color as string,
+        backgroundColor: markdownStyle.code?.backgroundColor as string,
+      })
+      break
+    case "pre":
+      applyStyle(node, {
+        fontFamily: markdownStyle.pre?.fontFamily,
+        fontSize: markdownStyle.pre?.fontSize,
+        color: markdownStyle.pre?.color as string,
+        backgroundColor: markdownStyle.pre?.backgroundColor as string,
+      })
+      break
+    // Block containers hold no box of their own: their gutters and ribbons belong to the
+    // paragraph, in `addLineLayout`. All that is left is letting a long unbroken word inside one
+    // break rather than push the line past the input's edge.
+    case "blockquote":
+    case "list-ordered":
+    case "list-unordered":
+      applyStyle(node, { overflowWrap: "anywhere" })
+      break
+    case "heading":
+      addHeadingStyle(node, markdownStyle)
+      break
+    case "text":
+      if (!isMultiline && targetElement.parentElement?.style) {
+        // Move text background styles from parent to the text node
+        const parentElement = targetElement.parentElement
+        node.style.cssText = parentElement.style.cssText
+        parentElement.style.cssText = ""
+      }
+      break
+    default:
+      break
+  }
+}
+
+function addMentionStyle(
+  node: HTMLElement,
+  style:
+    | { color?: unknown; backgroundColor?: unknown; borderRadius?: string | number }
+    | undefined,
+) {
+  applyStyle(node, {
+    color: style?.color as string,
+    backgroundColor: style?.backgroundColor as string,
+    borderRadius: style?.borderRadius,
+  })
+}
+
+/**
+ * Sizes a heading the way native does: level N is the base size scaled N-1 times.
+ *
+ * The level does not reach here -- `ungroupRanges` turns it into one nested span per level -- so
+ * the scaling is expressed in `em` and compounds down the nesting to the same number. This runs
+ * once the span is in the tree, which is what lets it tell an inner level from the outermost one.
+ */
+function addHeadingStyle(node: HTMLElement, markdownStyle: PartialMarkdownStyle) {
+  const nested = isChildOfMarkdownElement(node, "heading")
+  const scale = markdownStyle.heading?.scale
+
+  applyStyle(node, {
+    fontWeight: "bold",
+    fontSize: nested ? `${scale === undefined ? 1 : scale}em` : markdownStyle.heading?.fontSize,
+  })
+}
+
+const MULTILINE_MARKDOWN_TYPES = ["codeblock"]
+
+function isMultilineMarkdownType(type: NodeType) {
+  return MULTILINE_MARKDOWN_TYPES.includes(type)
+}
+
+function isDescendantOfMarkdownElement(
+  node: HTMLElement,
+  predicate: (type: string | null) => boolean,
+): boolean {
+  let currentNode = node.parentNode
+  while (currentNode && (currentNode as HTMLElement)?.contentEditable !== "true") {
+    const elementType = (currentNode as HTMLElement).getAttribute?.("data-type")
+    if (predicate(elementType)) {
+      return true
+    }
+    currentNode = currentNode.parentNode
+  }
+  return false
+}
+
+function isChildOfMarkdownElement(node: HTMLElement, elementType: NodeType): boolean {
+  return isDescendantOfMarkdownElement(node, (type) => type === elementType)
+}
+function isChildOfMultilineMarkdownElement(node: HTMLElement): boolean {
+  return isDescendantOfMarkdownElement(node, (type) =>
+    MULTILINE_MARKDOWN_TYPES.includes(type as NodeType),
+  )
+}
+
+export {
+  addStyleToBlock,
+  addLineLayout,
+  addBlockPrefixGap,
+  isMultilineMarkdownType,
+  isChildOfMarkdownElement,
+  isChildOfMultilineMarkdownElement,
+  MULTILINE_MARKDOWN_TYPES,
+}

package/src/web/utils/browserUtils.ts

@@ -0,0 +1,41 @@
+// This module is imported during server-side rendering (e.g. Expo Router's static
+// web output), where `window`/`navigator` do not exist. All checks are therefore
+// evaluated lazily on first access instead of at module scope.
+const canUseDOM = typeof window !== "undefined" && typeof navigator !== "undefined"
+
+function memoize(compute: () => boolean): () => boolean {
+  let value: boolean | undefined
+  return () => {
+    if (value === undefined) {
+      value = canUseDOM && compute()
+    }
+    return value
+  }
+}
+
+const isFirefox = memoize(() => navigator.userAgent.toLowerCase().includes("firefox"))
+const isChromium = memoize(() => "chrome" in window)
+
+/**
+ * Whether the platform is a mobile browser.
+ * Copied from Expensify App https://github.com/Expensify/App/blob/90dee7accae79c49debf30354c160cab6c52c423/src/libs/Browser/index.website.ts#L41
+ */
+const isMobile = memoize(() =>
+  /Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Silk|Opera Mini/i.test(
+    navigator.userAgent,
+  ),
+)
+
+const BrowserUtils = {
+  get isFirefox() {
+    return isFirefox()
+  },
+  get isChromium() {
+    return isChromium()
+  },
+  get isMobile() {
+    return isMobile()
+  },
+}
+
+export default BrowserUtils

package/src/web/utils/cursorUtils.ts

@@ -0,0 +1,204 @@
+import type { MarkdownTextInputElement } from "../../MarkdownTextInput.web"
+import { isChildOfMultilineMarkdownElement } from "./blockUtils"
+import { findHTMLElementInTree, getTreeNodeByIndex } from "./treeUtils"
+import type { TreeNode } from "./treeUtils"
+
+function getMaxRangeOffset(node: ChildNode): number {
+  return node.nodeType === Node.TEXT_NODE
+    ? (node.textContent ?? "").length
+    : node.childNodes.length
+}
+
+/**
+ * Range offsets are applied to the real DOM node, not the parsed markdown tree.
+ * When the tree is temporarily stale, clamp to the DOM node's bounds so cursor
+ * restoration lands at the nearest valid position instead of throwing.
+ */
+function getClampedRangeOffset(node: ChildNode, offset: number): number {
+  return Math.max(0, Math.min(offset, getMaxRangeOffset(node)))
+}
+
+function setCursorPosition(
+  target: MarkdownTextInputElement,
+  startIndex: number,
+  endIndex: number | null = null,
+  shouldScrollIntoView = false,
+) {
+  // We don't want to move the cursor if the target is not focused
+  if (!target.tree || target !== document.activeElement) {
+    return
+  }
+
+  const start = Math.max(0, Math.min(startIndex, target.tree.length))
+  const end = endIndex ? Math.max(0, Math.min(endIndex, target.tree.length)) : null
+  if (end && end < start) {
+    return
+  }
+
+  const range = document.createRange()
+  range.selectNodeContents(target)
+
+  const startTreeNode = getTreeNodeByIndex(target.tree, start)
+  const endTreeNode =
+    end &&
+    startTreeNode &&
+    (end < startTreeNode.start || end >= startTreeNode.start + startTreeNode.length)
+      ? getTreeNodeByIndex(target.tree, end)
+      : startTreeNode
+  if (!startTreeNode || !endTreeNode) {
+    console.error("Invalid start or end tree node")
+    return
+  }
+
+  if (startTreeNode.type === "br") {
+    range.setStartBefore(startTreeNode.element)
+  } else {
+    const startElement = startTreeNode.element
+    const startNode = (startElement.childNodes[0] || startElement) as ChildNode
+    range.setStart(startNode, getClampedRangeOffset(startNode, start - startTreeNode.start))
+  }
+
+  if (endTreeNode.type === "br") {
+    range.setEndBefore(endTreeNode.element)
+  } else {
+    const endElement = endTreeNode.element
+    const endNode = (endElement.childNodes[0] || endElement) as ChildNode
+    range.setEnd(endNode, getClampedRangeOffset(endNode, (end || start) - endTreeNode.start))
+  }
+
+  if (!end) {
+    range.collapse(true)
+  }
+
+  const selection = window.getSelection()
+  if (selection) {
+    selection.setBaseAndExtent(
+      range.startContainer,
+      range.startOffset,
+      range.endContainer,
+      range.endOffset,
+    )
+  }
+
+  if (shouldScrollIntoView) {
+    scrollIntoView(target, endTreeNode)
+  }
+}
+
+function scrollIntoView(target: MarkdownTextInputElement, node: TreeNode) {
+  let scrollTargetElement = node.element
+  const targetElement = target
+
+  if (!isChildOfMultilineMarkdownElement(node.element)) {
+    const orderIndex = Number(node.orderIndex.split(",")[0])
+    const currentLine = target.tree.childNodes[orderIndex]?.element
+    if (currentLine) {
+      scrollTargetElement = currentLine
+    }
+  } else if (node.element.nodeName === "BR") {
+    // Force scrolling BR into view
+    const selection = window.getSelection()
+    if (selection) {
+      const range = document.createRange()
+
+      range.setStartBefore(node.element)
+      range.collapse(true)
+
+      selection.addRange(range)
+
+      // Scroll to caret
+      const span = document.createElement("span")
+      span.textContent = "\u200B" // zero-width space
+      range.insertNode(span)
+      span.scrollIntoView({ block: "center" })
+      span.remove() // cleanup
+      return
+    }
+  }
+
+  const caretRect = scrollTargetElement.getBoundingClientRect()
+  const targetRect = target.getBoundingClientRect()
+  // In case the caret is below the visible input area, scroll to the end of the node
+  if (caretRect.top + caretRect.height > targetRect.top + targetRect.height) {
+    targetElement.scrollTop =
+      caretRect.top -
+      targetRect.top +
+      target.scrollTop -
+      targetRect.height +
+      caretRect.height +
+      4
+    return
+  }
+
+  scrollTargetElement.scrollIntoView({
+    block: "nearest",
+  })
+}
+
+function moveCursorToEnd(target: HTMLElement) {
+  const range = document.createRange()
+  const selection = window.getSelection()
+  if (selection) {
+    range.setStart(target, target.childNodes.length)
+    range.collapse(true)
+    selection.setBaseAndExtent(
+      range.startContainer,
+      range.startOffset,
+      range.endContainer,
+      range.endOffset,
+    )
+  }
+}
+
+function getCurrentCursorPosition(target: MarkdownTextInputElement) {
+  function getHTMLElement(node: Node) {
+    let element = node as HTMLElement | Text
+    if (element instanceof Text) {
+      element = node.parentElement as HTMLElement
+    }
+    return element
+  }
+
+  const selection = window.getSelection()
+  if (!selection || (selection && selection.rangeCount === 0)) {
+    return null
+  }
+  const range = selection.getRangeAt(0)
+  const startElement = getHTMLElement(range.startContainer)
+  const endElement =
+    range.startContainer === range.endContainer
+      ? startElement
+      : getHTMLElement(range.endContainer)
+
+  const startTreeNode = findHTMLElementInTree(target.tree, startElement)
+  const endTreeNode = findHTMLElementInTree(target.tree, endElement)
+
+  let start = -1
+  let end = -1
+  if (startTreeNode && endTreeNode) {
+    start = startTreeNode.start + range.startOffset
+
+    // If the end node is a root node, we need to set the end to the end of the text (FireFox fix)
+    if (endTreeNode?.parentNode === null) {
+      end = target.value.length
+    } else {
+      end = endTreeNode.start + range.endOffset
+    }
+  }
+  return { start, end }
+}
+
+function removeSelection() {
+  const selection = window.getSelection()
+  if (selection) {
+    selection.removeAllRanges()
+  }
+}
+
+export {
+  getCurrentCursorPosition,
+  moveCursorToEnd,
+  setCursorPosition,
+  removeSelection,
+  scrollIntoView,
+}

package/src/web/utils/inputUtils.ts

@@ -0,0 +1,206 @@
+import type { CSSProperties } from "react"
+import type { MarkdownNativeEvent, MarkdownTextInputElement } from "../../MarkdownTextInput.web"
+import { isChildOfMarkdownElement, isChildOfMultilineMarkdownElement } from "./blockUtils"
+import BrowserUtils from "./browserUtils"
+
+const ZERO_WIDTH_SPACE = "\u200B"
+
+// If an Input Method Editor is processing key input, the 'keyCode' is 229.
+// https://www.w3.org/TR/uievents/#determine-keydown-keyup-keyCode
+function isEventComposing(nativeEvent: globalThis.KeyboardEvent | MarkdownNativeEvent) {
+  return nativeEvent.isComposing || nativeEvent.keyCode === 229
+}
+
+function getPlaceholderValue(placeholder: string | undefined) {
+  if (!placeholder) {
+    return ZERO_WIDTH_SPACE
+  }
+  return placeholder.length ? placeholder : ZERO_WIDTH_SPACE
+}
+
+function getElementHeight(
+  node: HTMLDivElement,
+  styles: CSSProperties,
+  numberOfLines: number | undefined,
+) {
+  if (numberOfLines) {
+    const tempElement = document.createElement("div")
+    tempElement.setAttribute("contenteditable", "true")
+    Object.assign(tempElement.style, styles)
+    tempElement.textContent = Array(numberOfLines).fill("A").join("\n")
+    if (node.parentElement) {
+      node.parentElement.appendChild(tempElement)
+      const height = tempElement.clientHeight
+      node.parentElement.removeChild(tempElement)
+      return height ? `${height}px` : "auto"
+    }
+  }
+  return styles.height ? `${styles.height}px` : "auto"
+}
+
+function normalizeValue(value: string) {
+  return value.replaceAll("\r\n", "\n")
+}
+
+/**
+ * Returns the parent of a given node that is higher in the hierarchy and is of a different type than 'text', 'br' or 'line'
+ */
+function getTopParentNode(node: ChildNode) {
+  let currentParentNode = node.parentNode
+  while (
+    currentParentNode &&
+    ["text", "br", "line"].includes(
+      currentParentNode.parentElement?.getAttribute("data-type") || "",
+    )
+  ) {
+    currentParentNode = currentParentNode?.parentNode || null
+  }
+  return currentParentNode
+}
+
+/**
+ * On Firefox, when breaking one codeblock, its syntax and the <br> after it can be merged into the closing syntax of the previous codeblock.
+ */
+function didTwoCodeblocksMerge(node: ChildNode | null) {
+  if (!node || !BrowserUtils.isFirefox) {
+    return
+  }
+  // To identify that two codeblock has merged, we check if current line ends with <br> tag, that previously was second codeblock's opening syntax line break
+  const hasPartOfBrokenCodeblock =
+    node.lastChild?.lastChild?.lastChild?.lastChild?.nodeName === "BR"
+  return (
+    BrowserUtils.isFirefox &&
+    (node.lastChild as HTMLElement)?.getAttribute("data-type") === "codeblock" &&
+    hasPartOfBrokenCodeblock
+  )
+}
+
+/**
+ * Parses the HTML structure of a MarkdownTextInputElement to a plain text string. Used for getting the correct value of the input element.
+ */
+function parseInnerHTMLToText(
+  target: MarkdownTextInputElement,
+  cursorPosition: number,
+  inputType?: string,
+  isMultiline = true,
+): string {
+  const stack: ChildNode[] = [target]
+  let text = ""
+  let shouldAddNewline = false
+  const lastNode = target.childNodes[target.childNodes.length - 1]
+  // Remove the last <br> element if it's the last child of the target element. Fixes the issue with adding extra newline when pasting into the empty input.
+  if (lastNode?.nodeName === "DIV" && (lastNode as HTMLElement)?.innerHTML === "<br>") {
+    target.removeChild(lastNode)
+  }
+
+  while (stack.length > 0) {
+    const node = stack.pop() as HTMLElement
+    if (!node) {
+      break
+    }
+
+    // If we are operating on the nodes that are children of the MarkdownTextInputElement, we need to add a newline after each
+    const isTopComponent = node.parentElement?.contentEditable === "true"
+    if (isTopComponent) {
+      // When inputType is undefined, the first part of the replaced text is added as a text node.
+      // Because of it, we need to prevent adding new lines in this case
+      if (!isMultiline || (!inputType && node.nodeType === Node.TEXT_NODE)) {
+        shouldAddNewline = false
+      } else {
+        const firstChild = node.firstChild as HTMLElement
+        const containsEmptyBlockElement =
+          firstChild?.getAttribute?.("data-type") === "block" && firstChild.textContent === ""
+        if (
+          firstChild &&
+          shouldAddNewline &&
+          !containsEmptyBlockElement &&
+          !didTwoCodeblocksMerge(node.previousSibling)
+        ) {
+          text += "\n"
+          shouldAddNewline = false
+        }
+        shouldAddNewline = true
+      }
+    }
+
+    if (node.nodeType === Node.TEXT_NODE) {
+      let hasAddedNewline = false
+      // Fix for codeblocks: Removing last codeblock newline, moves codeblock syntax too far into the codeblock content
+      // skipping one <br> after the codeblock syntax. We need to force parsing it before the text node is added.
+      if (
+        node.parentElement &&
+        !node.parentElement.getAttribute?.("data-type") &&
+        isChildOfMarkdownElement(node, "pre")
+      ) {
+        text += "\n"
+        const nextBR =
+          node.parentElement?.nextElementSibling?.firstElementChild ??
+          node.parentElement?.nextElementSibling
+        if (nextBR && nextBR.tagName === "BR") {
+          nextBR.remove()
+        }
+        hasAddedNewline = true
+      }
+
+      // Parse text nodes into text
+      text += node.textContent
+
+      // Fix for codeblocks: If we are adding text at the end of a multiline markdown type element, we need to add a newline
+      // because the new text can replace the last <br> element and it will not be added to the text.
+      if (
+        node.parentElement &&
+        node.parentNode?.parentElement?.nextSibling &&
+        !node.parentNode?.nextSibling &&
+        isChildOfMultilineMarkdownElement(node) &&
+        ((!hasAddedNewline && isChildOfMarkdownElement(node, "br")) ||
+          (!node.parentElement.getAttribute?.("data-type") &&
+            isChildOfMarkdownElement(node, "syntax")))
+      ) {
+        text += "\n"
+      }
+    } else if (node.nodeName === "BR") {
+      const parentNode = getTopParentNode(node)
+
+      if (
+        (isMultiline &&
+          parentNode &&
+          parentNode.parentElement?.contentEditable !== "true" &&
+          !!(
+            (node as HTMLElement).getAttribute("data-id") ||
+            (node.parentElement as HTMLElement).getAttribute("data-type") === "br"
+          )) ||
+        (node.parentElement?.getAttribute("data-type") === "text" &&
+          isChildOfMultilineMarkdownElement(node))
+      ) {
+        // Parse br elements into newlines only if their parent is not a child of the MarkdownTextInputElement (a paragraph when writing or a div when pasting).
+        // It prevents adding extra newlines when entering text - and now only for multiline inputs
+        text += "\n"
+      }
+    } else {
+      let i = node.childNodes.length - 1
+      while (i > -1) {
+        const child = node.childNodes[i]
+        if (!child) {
+          break
+        }
+        stack.push(child)
+        i--
+      }
+    }
+  }
+  text = text.replaceAll("\r\n", "\n")
+
+  // Force letter removal if the input value haven't changed but input type is 'delete'
+  if (text === target.value && inputType?.includes("delete")) {
+    text = text.slice(0, cursorPosition - 1) + text.slice(cursorPosition)
+  }
+  return text
+}
+
+export {
+  isEventComposing,
+  getPlaceholderValue,
+  getElementHeight,
+  parseInnerHTMLToText,
+  normalizeValue,
+}