react-native-marcus 0.1.0

package/lib/typescript/module/src/web/utils/parserUtils.d.ts

@@ -0,0 +1,44 @@
+import type { HTMLMarkdownElement, MarkdownTextInputElement } from "../../MarkdownTextInput.web.js";
+import type { TreeNode } from "./treeUtils.js";
+import type { PartialMarkdownStyle } from "../../styleUtils.js";
+import type { LineLayout } from "./blockLayout.js";
+import type { TextMeasurer } from "./measureUtils.js";
+import type { MarkdownRange } from "../../commonTypes.js";
+type Paragraph = {
+    text: string;
+    start: number;
+    length: number;
+    markdownRanges: MarkdownRange[];
+    /** Where the containers this line sits in put its text, once they are all placed. */
+    layout?: LineLayout;
+};
+/**
+ * For singleline markdown types, the function splits markdown ranges that spread beyond the line length into separate lines.
+ * For multiline markdown types (like `pre`), it merges them and corresponding text into one line.
+ */
+declare function normalizeLines(lines: Paragraph[], ranges: MarkdownRange[]): Paragraph[];
+/** Builds HTML DOM structure based on passed text and markdown ranges */
+declare function parseRangesToHTMLNodes(text: string, ranges: MarkdownRange[], isMultiline?: boolean, markdownStyle?: PartialMarkdownStyle, disableInlineStyles?: boolean, measure?: TextMeasurer): {
+    dom: HTMLMarkdownElement;
+    tree: TreeNode;
+};
+/**
+ * A line as it was last rendered: what it was built from, the markup it produced, and its subtree.
+ */
+type CachedLine = {
+    signature: string;
+    html: string;
+    node: TreeNode;
+};
+type LineCache = {
+    markdownStyle: PartialMarkdownStyle;
+    isMultiline: boolean;
+    lines: CachedLine[];
+};
+declare function updateInputStructure(parserFunction: (input: string) => MarkdownRange[], target: MarkdownTextInputElement, text: string, cursorPositionIndex: number | null, isMultiline?: boolean, markdownStyle?: PartialMarkdownStyle, alwaysMoveCursorToTheEnd?: boolean, shouldForceDOMUpdate?: boolean, shouldScrollIntoView?: boolean): {
+    text: string;
+    cursorPosition: number;
+};
+export { updateInputStructure, parseRangesToHTMLNodes, normalizeLines };
+export type { Paragraph, LineCache };
+//# sourceMappingURL=parserUtils.d.ts.map

package/lib/typescript/module/src/web/utils/parserUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parserUtils.d.ts","sourceRoot":"","sources":["../../../../../../src/web/utils/parserUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,MAAM,gCAA6B,CAAA;AAEhG,OAAO,KAAK,EAAY,QAAQ,EAAE,MAAM,gBAAa,CAAA;AACrD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qBAAkB,CAAA;AAS5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAe,CAAA;AAE/C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAgB,CAAA;AAClD,OAAO,KAAK,EAAE,aAAa,EAAgB,MAAM,sBAAmB,CAAA;AAGpE,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,cAAc,EAAE,aAAa,EAAE,CAAA;IAC/B,qFAAqF;IACrF,MAAM,CAAC,EAAE,UAAU,CAAA;CACpB,CAAA;AAmFD;;;GAGG;AACH,iBAAS,cAAc,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,eA2BlE;AA2SD,yEAAyE;AACzE,iBAAS,sBAAsB,CAC7B,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,aAAa,EAAE,EACvB,WAAW,UAAO,EAClB,aAAa,GAAE,oBAAyB,EACxC,mBAAmB,UAAQ,EAC3B,OAAO,GAAE,YAAuC;;;EAyBjD;AAED;;GAEG;AACH,KAAK,UAAU,GAAG;IAChB,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,QAAQ,CAAA;CACf,CAAA;AAED,KAAK,SAAS,GAAG;IACf,aAAa,EAAE,oBAAoB,CAAA;IACnC,WAAW,EAAE,OAAO,CAAA;IACpB,KAAK,EAAE,UAAU,EAAE,CAAA;CACpB,CAAA;AA0QD,iBAAS,oBAAoB,CAC3B,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,aAAa,EAAE,EAClD,MAAM,EAAE,wBAAwB,EAChC,IAAI,EAAE,MAAM,EACZ,mBAAmB,EAAE,MAAM,GAAG,IAAI,EAClC,WAAW,UAAO,EAClB,aAAa,GAAE,oBAAyB,EACxC,wBAAwB,UAAQ,EAChC,oBAAoB,UAAQ,EAC5B,oBAAoB,UAAQ;;;EAiD7B;AAED,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,cAAc,EAAE,CAAA;AACvE,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,CAAA"}

package/lib/typescript/module/src/web/utils/treeUtils.d.ts

@@ -0,0 +1,25 @@
+import type { HTMLMarkdownElement } from "../../MarkdownTextInput.web.js";
+import type { MarkdownRange, MarkdownType } from "../../commonTypes.js";
+type NodeType = MarkdownType | "line" | "text" | "br" | "root";
+type TreeNode = Omit<MarkdownRange, "type"> & {
+    element: HTMLMarkdownElement;
+    parentNode: TreeNode | null;
+    childNodes: TreeNode[];
+    type: NodeType;
+    orderIndex: string;
+    isGeneratingNewline: boolean;
+};
+declare function createRootTreeNode(target: HTMLMarkdownElement, length?: number, start?: number): TreeNode;
+/**
+ * @param start Where the node begins in the text, when the caller knows it. A markdown range
+ * carries its own offset, and taking it is the only way to be right when ranges do not tile the
+ * line -- overlapping emphasis split across lines leaves gaps, and a node placed at wherever its
+ * previous sibling happened to end then reports an offset the text never had. Text and line breaks
+ * genuinely do follow on from what precedes them, so they still accumulate.
+ */
+declare function addNodeToTree(element: HTMLMarkdownElement, parentTreeNode: TreeNode, type: NodeType, length?: number | null, start?: number | null): TreeNode;
+declare function findHTMLElementInTree(treeRoot: TreeNode, element: HTMLElement): TreeNode | null;
+declare function getTreeNodeByIndex(treeRoot: TreeNode, index: number): TreeNode | null;
+export { addNodeToTree, findHTMLElementInTree, getTreeNodeByIndex, createRootTreeNode };
+export type { TreeNode, NodeType };
+//# sourceMappingURL=treeUtils.d.ts.map

package/lib/typescript/module/src/web/utils/treeUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"treeUtils.d.ts","sourceRoot":"","sources":["../../../../../../src/web/utils/treeUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gCAA6B,CAAA;AACtE,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,sBAAmB,CAAA;AAEpE,KAAK,QAAQ,GAAG,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,MAAM,CAAA;AAE9D,KAAK,QAAQ,GAAG,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC,GAAG;IAC5C,OAAO,EAAE,mBAAmB,CAAA;IAC5B,UAAU,EAAE,QAAQ,GAAG,IAAI,CAAA;IAC3B,UAAU,EAAE,QAAQ,EAAE,CAAA;IACtB,IAAI,EAAE,QAAQ,CAAA;IACd,UAAU,EAAE,MAAM,CAAA;IAClB,mBAAmB,EAAE,OAAO,CAAA;CAC7B,CAAA;AAED,iBAAS,kBAAkB,CAAC,MAAM,EAAE,mBAAmB,EAAE,MAAM,SAAI,EAAE,KAAK,SAAI,GAAG,QAAQ,CAWxF;AAED;;;;;;GAMG;AACH,iBAAS,aAAa,CACpB,OAAO,EAAE,mBAAmB,EAC5B,cAAc,EAAE,QAAQ,EACxB,IAAI,EAAE,QAAQ,EACd,MAAM,GAAE,MAAM,GAAG,IAAW,EAC5B,KAAK,GAAE,MAAM,GAAG,IAAW,YAyC5B;AAED,iBAAS,qBAAqB,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,GAAG,QAAQ,GAAG,IAAI,CAuBxF;AAED,iBAAS,kBAAkB,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,GAAG,QAAQ,GAAG,IAAI,CAqC9E;AAED,OAAO,EAAE,aAAa,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,CAAA;AAEvF,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAA"}

package/lib/typescript/module/src/web/utils/webStyleUtils.d.ts

@@ -0,0 +1,7 @@
+import type { TextStyle } from "react-native";
+import type { MarkdownStyle } from "../../MarcusTextInputDecoratorViewNativeComponent";
+declare function processMarkdownStyle(input: MarkdownStyle | undefined): MarkdownStyle;
+declare function parseToReactDOMStyle(style: TextStyle): any;
+declare const idGenerator: Generator<string, void, unknown>;
+export { parseToReactDOMStyle, processMarkdownStyle, idGenerator };
+//# sourceMappingURL=webStyleUtils.d.ts.map

package/lib/typescript/module/src/web/utils/webStyleUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"webStyleUtils.d.ts","sourceRoot":"","sources":["../../../../../../src/web/utils/webStyleUtils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAC7C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mDAAmD,CAAA;AAiDtF,iBAAS,oBAAoB,CAAC,KAAK,EAAE,aAAa,GAAG,SAAS,GAAG,aAAa,CAE7E;AAED,iBAAS,oBAAoB,CAAC,KAAK,EAAE,SAAS,GAAG,GAAG,CAEnD;AASD,QAAA,MAAM,WAAW,kCAAqB,CAAA;AAEtC,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,WAAW,EAAE,CAAA"}

package/package.json

@@ -0,0 +1,167 @@
+{
+  "name": "react-native-marcus",
+  "version": "0.1.0",
+  "description": "Drop-in replacement for React Native's TextInput component with Markdown formatting.",
+  "author": {
+    "name": "Tomas Ravinskas",
+    "email": "tomas@tomasrav.me",
+    "url": "https://tomasrav.me/"
+  },
+  "contributors": [
+    "Expensify, Inc."
+  ],
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:getbullet-app/react-native-marcus.git"
+  },
+  "bugs": {
+    "url": "https://github.com/getbullet-app/react-native-marcus/issues"
+  },
+  "homepage": "https://github.com/getbullet-app/react-native-marcus",
+  "main": "./lib/commonjs/index.js",
+  "module": "./lib/module/index.js",
+  "types": "./lib/typescript/commonjs/src/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./lib/typescript/module/src/index.d.ts",
+        "default": "./lib/module/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/src/index.d.ts",
+        "default": "./lib/commonjs/index.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "clean": "del-cli '{.,example}/{android,ios}/**/{build,.cxx}' lib",
+    "clean:codegen": "del-cli '{.,example}/{android,ios}/**/build/generated' '{.,example}/ios/Pod{s,file.lock}' && npx --workspace=marcus-example pod-install",
+    "example": "npm run --workspace=marcus-example",
+    "prepare": "patch-package && bob build && node scripts/bundle-parser.mjs",
+    "watch": "nodemon --watch src --ext 'ts tsx js jsx json' --exec npm run prepare",
+    "fixtures": "tsx scripts/emit-fixtures.mts",
+    "fixtures:check": "tsx scripts/emit-fixtures.mts --check",
+    "web:build": "npm run --workspace=marcus-example export:web",
+    "web:serve": "npm run --workspace=marcus-example serve:web",
+    "test": "npm run fixtures:check && tsc --noEmit && npm run test:unit && npm run web:build && npm run test:web && npm run test:android && npm run test:ios",
+    "test:unit": "jest",
+    "test:unit:watch": "jest --watch",
+    "test:update": "npm run fixtures && npm run test:unit -- -u && npm run web:build && npm run test:web -- -u && npm run test:android:update && npm run test:ios:update",
+    "test:web": "playwright test",
+    "test:e2e": "npm run test:e2e:ios && npm run test:e2e:android",
+    "test:e2e:ios": "detox build-framework-cache && detox build -c ios && detox test -c ios",
+    "test:e2e:android": "detox build -c android && detox test -c android",
+    "test:android": "cd example/android && ./gradlew :react-native-marcus:testDebugUnitTest",
+    "test:android:update": "rm -f android/src/test/resources/render-model.txt && npm run test:android",
+    "test:ios": "node scripts/ios-test.mjs -quiet",
+    "test:ios:update": "rm -f ios-tests/Tests/MarcusFormatterTests/__baselines__/render-model.txt && npm run test:ios"
+  },
+  "workspaces": [
+    "./example"
+  ],
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "apple",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!apple/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "keywords": [
+    "react-native",
+    "ios",
+    "android",
+    "web",
+    "markdown"
+  ],
+  "peerDependencies": {
+    "react": "*",
+    "react-native": ">=0.81",
+    "react-native-web": "^0.21.0",
+    "react-native-worklets": ">=0.7.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native-web": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.62.1",
+    "@react-native/babel-preset": "^0.86.3",
+    "@react-native/jest-preset": "^0.86.3",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.2.0",
+    "del-cli": "^7.0.0",
+    "detox": "^20.51.4",
+    "emoji-regex": "^10.6.0",
+    "esbuild": "^0.25.0",
+    "fast-check": "^4.9.0",
+    "jest": "^29.6.3",
+    "jest-environment-jsdom": "^29.7.0",
+    "kleur": "^4.1.5",
+    "mdast-util-from-markdown": "^2.0.3",
+    "micromark-extension-gfm-autolink-literal": "^2.1.0",
+    "micromark-extension-gfm-strikethrough": "^2.1.0",
+    "nodemon": "^3.1.14",
+    "patch-package": "^8.0.0",
+    "prettier": "2.8.8",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-native": "^0.86.3",
+    "react-native-builder-bob": "^0.43.0",
+    "react-native-web": "^0.21.2",
+    "react-native-worklets": "0.10.1",
+    "tsx": "^4.23.13",
+    "typescript": "~6.0.3"
+  },
+  "overrides": {
+    "react": "19.2.3",
+    "react-dom": "19.2.3"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "commonjs",
+        {
+          "esm": true
+        }
+      ],
+      "typescript"
+    ],
+    "exclude": "**/{__tests__,__fixtures__,__mocks__,parser}/**"
+  },
+  "codegenConfig": {
+    "name": "RNMarcusSpec",
+    "type": "all",
+    "jsSrcsDir": "src",
+    "android": {
+      "javaPackageName": "app.getbullet.marcus"
+    },
+    "ios": {
+      "componentProvider": {
+        "MarcusTextInputDecoratorView": "MarcusTextInputDecoratorComponentView"
+      }
+    }
+  }
+}

package/react-native.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  dependency: {
+    platforms: {
+      android: {
+        componentDescriptors: ["MarcusTextInputDecoratorViewComponentDescriptor"],
+        cmakeListsPath: "../android/src/main/new_arch/CMakeLists.txt",
+      },
+    },
+  },
+}

package/src/MarcusTextInputDecoratorViewNativeComponent.ts

@@ -0,0 +1,77 @@
+import { codegenNativeComponent } from "react-native"
+import type { ColorValue, ViewProps } from "react-native"
+
+import type { Float, Int32 } from "react-native/Libraries/Types/CodegenTypes"
+
+// Font, colour and background, and nothing else: neither formatter draws a
+// border or reserves padding around a code run, so there is nothing to
+// configure.
+interface CodeBlockStyle {
+  fontFamily: string
+  fontSize: Float
+  color: ColorValue
+  backgroundColor: ColorValue
+}
+
+interface MarkdownStyle {
+  syntax: {
+    color: ColorValue
+  }
+  emoji: {
+    fontSize: Float
+    fontFamily: string
+  }
+  link: {
+    color: ColorValue
+  }
+  heading: {
+    fontSize: Float
+    // Each level down multiplies the one above, so level N is
+    // fontSize * scale^(N - 1). Six levels, matching HTML.
+    scale: Float
+  }
+  blockquote: {
+    borderColor: ColorValue
+    borderWidth: Float
+    marginLeft: Float
+    paddingLeft: Float
+  }
+  // Indent only, no gutter decoration. Kept as two separate entries so a
+  // renderer can style ordered and unordered lists differently.
+  orderedList: {
+    marginLeft: Float
+    paddingLeft: Float
+  }
+  unorderedList: {
+    marginLeft: Float
+    paddingLeft: Float
+  }
+  code: CodeBlockStyle
+  pre: CodeBlockStyle
+  mentionHere: {
+    color: ColorValue
+    backgroundColor: ColorValue
+    borderRadius?: Float
+  }
+  mentionUser: {
+    color: ColorValue
+    backgroundColor: ColorValue
+    borderRadius?: Float
+  }
+  mentionReport: {
+    color: ColorValue
+    backgroundColor: ColorValue
+    borderRadius?: Float
+  }
+}
+
+interface NativeProps extends ViewProps {
+  markdownStyle: MarkdownStyle
+  parserId: Int32
+}
+
+export default codegenNativeComponent<NativeProps>("MarcusTextInputDecoratorView", {
+  interfaceOnly: true,
+})
+
+export type { MarkdownStyle }

package/src/MarkdownTextInput.tsx

@@ -0,0 +1,139 @@
+import { StyleSheet, TextInput, processColor } from "react-native"
+import React from "react"
+import type { TextInputProps } from "react-native"
+import { createSerializable, createWorkletRuntime } from "react-native-worklets"
+import type { SerializableRef, WorkletFunction, WorkletRuntime } from "react-native-worklets"
+import MarcusTextInputDecoratorViewNativeComponent from "./MarcusTextInputDecoratorViewNativeComponent"
+import type { MarkdownStyle } from "./MarcusTextInputDecoratorViewNativeComponent"
+import NativeMarcusModule from "./NativeMarcusModule"
+import { mergeMarkdownStyleWithDefault } from "./styleUtils"
+import type { PartialMarkdownStyle } from "./styleUtils"
+import type { MarkdownRange } from "./commonTypes"
+
+declare global {
+  // eslint-disable-next-line no-var
+  var jsi_setMarcusRuntime: (runtime: WorkletRuntime) => void
+  // eslint-disable-next-line no-var
+  var jsi_registerMarcusWorklet: (
+    shareableWorklet: SerializableRef<WorkletFunction<[string], MarkdownRange[]>>,
+  ) => number
+  // eslint-disable-next-line no-var
+  var jsi_unregisterMarcusWorklet: (parserId: number) => void
+}
+
+let initialized = false
+let workletRuntime: WorkletRuntime | undefined
+
+function getWorkletRuntime(): WorkletRuntime {
+  if (workletRuntime === undefined) {
+    throw new Error(
+      "[react-native-marcus] Worklet runtime hasn't been created yet. Please avoid calling `getWorkletRuntime()` in top-level scope. Instead, call `getWorkletRuntime()` directly in `runOnRuntime` arguments list.",
+    )
+  }
+  return workletRuntime
+}
+
+function initializeMarcusIfNeeded() {
+  if (initialized) {
+    return
+  }
+  if (NativeMarcusModule) {
+    NativeMarcusModule.install()
+  }
+  if (!global.jsi_setMarcusRuntime) {
+    throw new Error("[react-native-marcus] global.jsi_setMarcusRuntime is not available")
+  }
+  workletRuntime = createWorkletRuntime({ name: "MarcusRuntime" })
+  global.jsi_setMarcusRuntime(workletRuntime)
+  initialized = true
+}
+
+function registerParser(parser: (input: string) => MarkdownRange[]): number {
+  initializeMarcusIfNeeded()
+  const serializableWorklet = createSerializable(
+    parser as WorkletFunction<[string], MarkdownRange[]>,
+  )
+  const parserId = global.jsi_registerMarcusWorklet(serializableWorklet)
+  return parserId
+}
+
+function unregisterParser(parserId: number) {
+  global.jsi_unregisterMarcusWorklet(parserId)
+}
+
+interface MarkdownTextInputProps extends TextInputProps {
+  markdownStyle?: PartialMarkdownStyle
+  parser: (value: string) => MarkdownRange[]
+}
+
+type MarkdownTextInput = TextInput & React.Component<MarkdownTextInputProps>
+
+function processColorsInMarkdownStyle(input: MarkdownStyle): MarkdownStyle {
+  const output = JSON.parse(JSON.stringify(input))
+
+  Object.keys(output).forEach((key) => {
+    const obj = output[key]
+    Object.keys(obj).forEach((prop) => {
+      // TODO: use ReactNativeStyleAttributes from 'react-native/Libraries/Components/View/ReactNativeStyleAttributes'
+      if (!(prop === "color" || prop.endsWith("Color"))) {
+        return
+      }
+      obj[prop] = processColor(obj[prop])
+    })
+  })
+
+  return output as MarkdownStyle
+}
+
+function processMarkdownStyle(input: PartialMarkdownStyle | undefined): MarkdownStyle {
+  return processColorsInMarkdownStyle(mergeMarkdownStyleWithDefault(input))
+}
+
+const MarkdownTextInput = React.forwardRef<MarkdownTextInput, MarkdownTextInputProps>(
+  (props, ref) => {
+    const markdownStyle = React.useMemo(
+      () => processMarkdownStyle(props.markdownStyle),
+      [props.markdownStyle],
+    )
+
+    if (props.parser === undefined) {
+      throw new Error("[react-native-marcus] `parser` is undefined")
+    }
+
+    // eslint-disable-next-line no-underscore-dangle
+    const workletHash = (props.parser as { __workletHash?: number }).__workletHash
+    if (workletHash === undefined) {
+      throw new Error("[react-native-marcus] `parser` is not a worklet")
+    }
+
+    const parserId = React.useMemo(() => {
+      return registerParser(props.parser)
+    }, [props.parser])
+
+    React.useEffect(() => {
+      return () => unregisterParser(parserId)
+    }, [parserId])
+
+    return (
+      <MarcusTextInputDecoratorViewNativeComponent
+        style={styles.displayContents}
+        markdownStyle={markdownStyle}
+        parserId={parserId}
+      >
+        <TextInput {...props} ref={ref} />
+      </MarcusTextInputDecoratorViewNativeComponent>
+    )
+  },
+)
+
+const styles = StyleSheet.create({
+  displayContents: {
+    display: "contents",
+  },
+})
+
+export type { PartialMarkdownStyle as MarkdownStyle, MarkdownTextInputProps }
+
+export default MarkdownTextInput
+
+export { getWorkletRuntime }