react-native-enriched-markdown-scaffold 0.7.4-scaffold.9 → 1.0.2-scaffold.10

package/src/EnrichedMarkdownTextNativeComponent.ts

@@ -1,9 +1,12 @@
 import {
   codegenNativeComponent,
+  codegenNativeCommands,
   type ViewProps,
   type CodegenTypes,
   type ColorValue,
+  type HostComponent,
 } from 'react-native';
+import type React from 'react';
 
 // All block styles extend this interface
 interface BaseBlockStyleInternal {
@@ -29,6 +32,8 @@ interface BlockquoteStyleInternal extends BaseBlockStyleInternal {
   borderWidth: CodegenTypes.Float;
   gapWidth: CodegenTypes.Float;
   backgroundColor: ColorValue;
+  borderRadius: CodegenTypes.Float;
+  padding: CodegenTypes.Float;
 }
 
 interface ListStyleInternal extends BaseBlockStyleInternal {
@@ -39,6 +44,24 @@ interface ListStyleInternal extends BaseBlockStyleInternal {
   markerFontWeight: string;
   gapWidth: CodegenTypes.Float;
   marginLeft: CodegenTypes.Float;
+  itemSpacing: CodegenTypes.Float;
+}
+
+interface CodeBlockSyntaxColorsInternal {
+  keyword: ColorValue;
+  operatorColor: ColorValue;
+  punctuation: ColorValue;
+  string: ColorValue;
+  number: ColorValue;
+  constant: ColorValue;
+  comment: ColorValue;
+  function: ColorValue;
+  type: ColorValue;
+  variable: ColorValue;
+  property: ColorValue;
+  tag: ColorValue;
+  attribute: ColorValue;
+  embedded: ColorValue;
 }
 
 interface CodeBlockStyleInternal extends BaseBlockStyleInternal {
@@ -47,6 +70,7 @@ interface CodeBlockStyleInternal extends BaseBlockStyleInternal {
   borderRadius: CodegenTypes.Float;
   borderWidth: CodegenTypes.Float;
   padding: CodegenTypes.Float;
+  syntaxColors: CodeBlockSyntaxColorsInternal;
 }
 
 interface LinkStyleInternal {
@@ -54,6 +78,11 @@ interface LinkStyleInternal {
   color: ColorValue;
   underline: boolean;
   backgroundColor: ColorValue;
+  borderRadius: CodegenTypes.Float;
+  paddingHorizontal: CodegenTypes.Float;
+  paddingVertical: CodegenTypes.Float;
+  borderColor: ColorValue;
+  borderWidth: CodegenTypes.Float;
 }
 
 // Mirrors EnrichedMarkdownNativeComponent.ts — kept in sync manually (codegen spec files must be self-contained).
@@ -62,6 +91,11 @@ interface LinkVariantEntryInternal {
   color: ColorValue;
   underline: boolean;
   backgroundColor: ColorValue;
+  borderRadius: CodegenTypes.Float;
+  paddingHorizontal: CodegenTypes.Float;
+  paddingVertical: CodegenTypes.Float;
+  borderColor: ColorValue;
+  borderWidth: CodegenTypes.Float;
 }
 
 interface StrongStyleInternal {
@@ -94,6 +128,10 @@ interface CodeStyleInternal {
 
 interface ImageStyleInternal {
   height: CodegenTypes.Float;
+  maxHeight: CodegenTypes.Float;
+  aspectRatio: CodegenTypes.Float;
+  // Nested struct fields cannot use WithDefault; default is applied in JS normalization.
+  resizeMode: string;
   borderRadius: CodegenTypes.Float;
   marginTop: CodegenTypes.Float;
   marginBottom: CodegenTypes.Float;
@@ -121,6 +159,8 @@ interface TableStyleInternal extends BaseBlockStyleInternal {
   borderRadius: CodegenTypes.Float;
   cellPaddingHorizontal: CodegenTypes.Float;
   cellPaddingVertical: CodegenTypes.Float;
+  horizontalOverflow: CodegenTypes.Float;
+  align: string;
 }
 
 interface TaskListStyleInternal {
@@ -142,12 +182,14 @@ interface MathStyleInternal {
   marginBottom: CodegenTypes.Float;
   textAlign: string;
   fontWeight: string;
+  glyphOverflow: CodegenTypes.Float;
 }
 
 interface InlineMathStyleInternal {
   color: ColorValue;
   paddingVertical: CodegenTypes.Float;
   fontWeight: string;
+  glyphOverflow: CodegenTypes.Float;
 }
 
 interface SpoilerParticlesStyleInternal {
@@ -219,17 +261,88 @@ export interface LinkLongPressEvent {
   url: string;
 }
 
+/**
+ * `fragments` holds one entry per laid-out line of a link (a wrapping link
+ * yields several). Rects are in dp, relative to the native view's origin, and
+ * cover the drawn chip (glyphs + padding). Flattened rather than nested per
+ * link, and written inline, because codegen only accepts inline object
+ * literals as event array elements.
+ */
+export interface LinkLayoutEvent {
+  fragments: {
+    linkIndex: CodegenTypes.Int32;
+    url: string;
+    text: string;
+    x: CodegenTypes.Double;
+    y: CodegenTypes.Double;
+    width: CodegenTypes.Double;
+    height: CodegenTypes.Double;
+  }[];
+}
+
+/**
+ * Current text selection, or a long-pressed table / math / code block while
+ * `contextMenuHidden` is on. `active: false` means the selection was cleared
+ * (every other field is then empty / zero). Rects are in dp / pt, relative to
+ * the native view's origin; rect objects are written inline because codegen
+ * only accepts inline object literals in event payloads.
+ */
+export interface SelectionChangeEvent {
+  active: boolean;
+  source: string;
+  text: string;
+  markdown: string;
+  whole: boolean;
+  rect: {
+    x: CodegenTypes.Double;
+    y: CodegenTypes.Double;
+    width: CodegenTypes.Double;
+    height: CodegenTypes.Double;
+  };
+  startRect: {
+    x: CodegenTypes.Double;
+    y: CodegenTypes.Double;
+    width: CodegenTypes.Double;
+    height: CodegenTypes.Double;
+  };
+  endRect: {
+    x: CodegenTypes.Double;
+    y: CodegenTypes.Double;
+    width: CodegenTypes.Double;
+    height: CodegenTypes.Double;
+  };
+  adjusting: boolean;
+}
+
 export interface TaskListItemPressEvent {
   index: CodegenTypes.Int32;
   checked: boolean;
   text: string;
 }
 
+export interface CopyPressEvent {
+  code: string;
+  language: string;
+}
+
+export interface CopyRequestEvent {
+  // 'selection' | 'math' | 'table' | 'code'
+  source: string;
+  markdown: string;
+  text: string;
+  whole: boolean;
+}
+
 export interface ContextMenuItemConfig {
   text: string;
   icon?: string;
 }
 
+export interface ImageRequestHeaderInternal {
+  name: string;
+  value: string;
+}
+
 export interface SelectionMenuConfig {
   copyAsMarkdown: boolean;
   copyImageUrl: boolean;
@@ -240,6 +353,16 @@ export interface SelectionMenuConfig {
   // Precomputed plural templates indexed by image count (0..100). Empty when no
   // pluralLabels are set; native then uses copyImageUrlLabel/copyImageUrlsLabel.
   copyImageUrlPluralTemplates: ReadonlyArray<string>;
+  // false removes the Copy item from the text and block menus.
+  copyEnabled: boolean;
+  // true: Copy writes Markdown (plain text) instead of rich text / raw block content.
+  copyFormatMarkdown: boolean;
+  // true: the text selection menu drops every system-provided item.
+  systemItemsNone: boolean;
+  // false hides the copy button in the code block header.
+  codeBlockCopyButton: boolean;
+  // true: the Copy item emits onCopyRequest instead of writing the clipboard.
+  interceptCopy: boolean;
 }
 
 export interface OnContextMenuItemPressEvent {
@@ -311,10 +434,16 @@ export interface Md4cFlagsInternal {
    * @default false
    */
   highlight: boolean;
+  /**
+   * Treat soft breaks (single newlines) as hard breaks (visible line breaks).
+   * @default false
+   */
+  hardSoftBreaks: boolean;
 }
 
 interface StreamingConfigInternal {
   tableMode: string;
+  codeBlockMode: string;
 }
 
 export interface NativeProps extends ViewProps {
@@ -340,11 +469,56 @@ export interface NativeProps extends ViewProps {
    * - Android: Handles long press gestures on links.
    */
   onLinkLongPress?: CodegenTypes.BubblingEventHandler<LinkLongPressEvent>;
+  /**
+   * When true, the view reports the laid-out rects of every link through
+   * `onLinkLayout` (after each render and whenever its size changes).
+   * Set by the JS wrapper only when `renderLinkDecoration` is provided.
+   * @default false
+   */
+  emitLinkLayout?: CodegenTypes.WithDefault<boolean, false>;
+  /**
+   * Fired with the rects of every link fragment while `emitLinkLayout` is on.
+   * Deduplicated: not re-fired when the payload is unchanged.
+   */
+  onLinkLayout?: CodegenTypes.DirectEventHandler<LinkLayoutEvent>;
+  /**
+   * When true, the view reports selection changes (and, with
+   * `contextMenuHidden`, block long-presses) through `onSelectionChange`.
+   * Set by the JS wrapper only when `onSelectionChange` is provided.
+   * @default false
+   */
+  emitSelectionChange?: CodegenTypes.WithDefault<boolean, false>;
+  /**
+   * Fired while `emitSelectionChange` is on: coalesced to one event per frame,
+   * deduplicated, and `active: false` once the selection is gone.
+   */
+  onSelectionChange?: CodegenTypes.DirectEventHandler<SelectionChangeEvent>;
   /**
    * Callback fired when a task list checkbox is tapped.
    * Receives the 0-based task index, current checked state, and the item's plain text.
    */
   onTaskListItemPress?: CodegenTypes.BubblingEventHandler<TaskListItemPressEvent>;
+  /**
+   * Controls whether tapping a task list checkbox toggles its checked state.
+   *
+   * When `false`, the tap is fully inert: no visual toggle and no
+   * `onTaskListItemPress` emission. Text selection and links are unaffected.
+   *
+   * @default true
+   */
+  enableTaskListItemToggle?: CodegenTypes.WithDefault<boolean, true>;
+  /**
+   * Callback fired when code is copied from a fenced code block's header copy
+   * button, its long-press context-menu "Copy" action, or the VoiceOver copy
+   * action. Receives the copied code and its language.
+   */
+  onCopyPress?: CodegenTypes.BubblingEventHandler<CopyPressEvent>;
+  /**
+   * Fired instead of writing the clipboard when the Copy item of the text
+   * selection menu or a table / math / code block menu is pressed while
+   * `selectionMenuConfig.interceptCopy` is set.
+   */
+  onCopyRequest?: CodegenTypes.BubblingEventHandler<CopyRequestEvent>;
   /**
    * Controls whether the system link preview is shown on long press (iOS only).
    *
@@ -358,6 +532,16 @@ export interface NativeProps extends ViewProps {
    * @default true
    */
   enableLinkPreview?: CodegenTypes.WithDefault<boolean, true>;
+  /**
+   * When `true`, long-pressing a link selects its label and shows the
+   * selection edit menu instead of the system link preview (iOS only).
+   * Takes precedence over `enableLinkPreview` and `onLinkLongPress`.
+   *
+   * Android: No-op.
+   *
+   * @default false
+   */
+  linkLongPressSelects?: CodegenTypes.WithDefault<boolean, false>;
   /**
    * - iOS: Controls text selection and link previews on long press.
    * - Android: Controls text selection.
@@ -424,10 +608,18 @@ export interface NativeProps extends ViewProps {
    * @default 'particles'
    */
   spoilerOverlay?: CodegenTypes.WithDefault<string, 'particles'>;
+  /**
+   * Hides the text selection context menu while keeping text selectable.
+   */
+  contextMenuHidden?: CodegenTypes.WithDefault<boolean, false>;
   /**
    * Custom items to show in the text selection context menu.
    */
   contextMenuItems?: ReadonlyArray<Readonly<ContextMenuItemConfig>>;
+  /**
+   * HTTP headers attached to remote image requests, as name/value pairs.
+   */
+  imageRequestHeaders?: ReadonlyArray<Readonly<ImageRequestHeaderInternal>>;
   /**
    * Built-in items to show in the text selection context menu.
    */
@@ -463,6 +655,17 @@ export interface NativeProps extends ViewProps {
   writingDirection?: CodegenTypes.WithDefault<string, 'first-strong'>;
 }
 
+type ComponentType = HostComponent<NativeProps>;
+
+interface NativeCommands {
+  /** Clears the text selection (and any active block) and fires `onSelectionChange` with `active: false`. */
+  clearSelection: (viewRef: React.ElementRef<ComponentType>) => void;
+}
+
+export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: ['clearSelection'],
+});
+
 export default codegenNativeComponent<NativeProps>('EnrichedMarkdownText', {
   interfaceOnly: true,
-});
+}) as HostComponent<NativeProps>;

package/src/headingDefaults.ts

@@ -0,0 +1,21 @@
+// Single source of truth for default heading appearance, shared by the
+// read-only renderer and the editable input so headings match across views.
+
+export type HeadingLevelKey = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+export interface HeadingDefault {
+  fontSize: number;
+  color: string;
+}
+
+/** Default font weight applied to every heading level. */
+export const DEFAULT_HEADING_FONT_WEIGHT = 'bold';
+
+export const HEADING_DEFAULTS: Record<HeadingLevelKey, HeadingDefault> = {
+  h1: { fontSize: 30, color: '#111827' },
+  h2: { fontSize: 24, color: '#111827' },
+  h3: { fontSize: 20, color: '#111827' },
+  h4: { fontSize: 18, color: '#111827' },
+  h5: { fontSize: 16, color: '#374151' },
+  h6: { fontSize: 14, color: '#4B5563' },
+};

package/src/index.tsx

@@ -1,17 +1,25 @@
 export { default as EnrichedMarkdownText } from './native/EnrichedMarkdownText';
 export type {
   EnrichedMarkdownTextProps,
+  EnrichedMarkdownTextInstance,
   StreamingConfig,
   MarkdownStyle,
   Md4cFlags,
   ContextMenuItem as TextContextMenuItem,
   SelectionMenuConfig as TextSelectionMenuConfig,
   SelectionMenuPluralLabels as TextSelectionMenuPluralLabels,
+  LinkDecorationInfo,
+  LinkRect,
 } from './native/EnrichedMarkdownText';
 export type {
   LinkPressEvent,
   LinkLongPressEvent,
   TaskListItemPressEvent,
+  CopyPressEvent,
+  CopyEvent,
+  OnPasteEvent,
+  SelectionChangeEvent,
+  SelectionRect,
 } from './types/events';
 export type {
   AccessibilityLabels,
@@ -31,9 +39,16 @@ export type {
   ContextMenuItem,
   InputSelectionMenuConfig,
   FormatMenuConfig,
+  OnKeyPressEvent,
   OnLinkDetected,
   OnStartMentionEvent,
   OnChangeMentionEvent,
   OnEndMentionEvent,
   CaretRect,
+  HeadingLevel,
+  HeadingStyle,
+  InputInlineMathStyle,
+  InputMathStyle,
+  OnMathPressEvent,
+  InsertMathOptions,
 } from './EnrichedMarkdownTextInput';

package/src/index.web.tsx

@@ -1,8 +1,13 @@
 export { EnrichedMarkdownText, default } from './web/EnrichedMarkdownText';
-export type { EnrichedMarkdownTextProps } from './types/MarkdownTextProps.web';
+export type {
+  EnrichedMarkdownTextProps,
+  LinkDecorationInfo,
+  LinkRect,
+} from './types/MarkdownTextProps.web';
 export type { MarkdownStyle, Md4cFlags } from './types/MarkdownStyle';
 export type {
   LinkPressEvent,
   LinkLongPressEvent,
   TaskListItemPressEvent,
+  CopyPressEvent,
 } from './types/events';

package/src/jest/index.tsx

@@ -0,0 +1,236 @@
+/**
+ * Jest mock for `react-native-enriched-markdown-scaffold`, wired up via
+ * `jest.mock('react-native-enriched-markdown-scaffold', () => require('react-native-enriched-markdown-scaffold/jest'))`.
+ * See docs/TESTING.md for setup and the behavior it mirrors.
+ *
+ * The two components are Fabric/codegen native views: under Jest there is no
+ * native view manager, so rendering them or calling any imperative ref method
+ * (each dispatches a native command) throws. These replacements render plain RN
+ * primitives and expose every imperative method as a spy.
+ *
+ * Behavior mirrored from the native component: typing fires `onChangeText` and,
+ * when set, `onChangeMarkdown` (the raw text stands in for parsed markdown);
+ * `setValue()` updates the rendered text but emits no change events, matching
+ * the native suppression of emits for programmatic updates.
+ *
+ * The mock is typed against the real public types, so `yarn typecheck` fails if
+ * the API gains a prop or ref method the mock does not cover -- it cannot
+ * silently drift from the real component.
+ */
+import { useImperativeHandle, useRef, useState } from 'react';
+import type { ComponentRef } from 'react';
+import { Text, TextInput } from 'react-native';
+import type {
+  CaretRect,
+  EnrichedMarkdownTextInputInstance,
+  EnrichedMarkdownTextInputProps,
+  InsertMathOptions,
+} from '../EnrichedMarkdownTextInput';
+import type {
+  EnrichedMarkdownTextInstance,
+  EnrichedMarkdownTextProps,
+} from '../native/EnrichedMarkdownText';
+
+export {
+  DEFAULT_ACCESSIBILITY_LABELS,
+  resolveAccessibilityLabels,
+} from '../accessibilityLabelDefaults';
+
+type AnyFn = (...args: any[]) => any;
+declare const jest: { fn: <T extends AnyFn>(impl?: T) => T };
+
+const spy = <T extends AnyFn>(impl?: T): T => jest.fn(impl);
+
+const EMPTY_CARET_RECT: CaretRect = { x: 0, y: 0, width: 0, height: 0 };
+
+export const EnrichedMarkdownTextInput = ({
+  ref,
+  defaultValue,
+  onChangeText,
+  onChangeMarkdown,
+  onFocus,
+  onBlur,
+  editable = true,
+  placeholder,
+  placeholderTextColor,
+  autoFocus = false,
+  multiline = true,
+  scrollEnabled = true,
+  style,
+  testID,
+  accessible,
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityRole,
+  accessibilityState,
+  nativeID,
+  markdownStyle: _markdownStyle,
+  cursorColor: _cursorColor,
+  selectionColor: _selectionColor,
+  autoCapitalize: _autoCapitalize,
+  onChangeSelection: _onChangeSelection,
+  onChangeState: _onChangeState,
+  onKeyPress: _onKeyPress,
+  onCaretRectChange: _onCaretRectChange,
+  onLinkDetected: _onLinkDetected,
+  mentionIndicators: _mentionIndicators,
+  onStartMention: _onStartMention,
+  onChangeMention: _onChangeMention,
+  onEndMention: _onEndMention,
+  contextMenuItems: _contextMenuItems,
+  selectionMenuConfig: _selectionMenuConfig,
+  formatMenuConfig: _formatMenuConfig,
+  linkRegex: _linkRegex,
+  writingDirection: _writingDirection,
+}: EnrichedMarkdownTextInputProps) => {
+  const [text, setText] = useState(defaultValue ?? '');
+  const textRef = useRef(text);
+  const inputRef = useRef<ComponentRef<typeof TextInput> | null>(null);
+
+  const applyText = (next: string) => {
+    textRef.current = next;
+    setText(next);
+  };
+
+  const handleChangeText = (next: string) => {
+    applyText(next);
+    onChangeText?.(next);
+    onChangeMarkdown?.(next);
+  };
+
+  const instanceRef = useRef<EnrichedMarkdownTextInputInstance | null>(null);
+  if (instanceRef.current === null) {
+    instanceRef.current = {
+      focus: spy(() => inputRef.current?.focus()),
+      blur: spy(() => inputRef.current?.blur()),
+      measure: spy((callback) => callback(0, 0, 0, 0, 0, 0)),
+      measureInWindow: spy((callback) => callback(0, 0, 0, 0)),
+      measureLayout: spy((_relativeToNativeNode, onSuccess) =>
+        onSuccess(0, 0, 0, 0)
+      ),
+      setValue: spy((markdown: string) => applyText(markdown)),
+      setSelection: spy((_start: number, _end: number) => {}),
+      toggleBold: spy(() => {}),
+      toggleItalic: spy(() => {}),
+      toggleUnderline: spy(() => {}),
+      toggleStrikethrough: spy(() => {}),
+      toggleSpoiler: spy(() => {}),
+      toggleHeading: spy((_level) => {}),
+      toggleUnorderedList: spy(() => {}),
+      toggleOrderedList: spy(() => {}),
+      indentList: spy(() => {}),
+      outdentList: spy(() => {}),
+      setLink: spy((_url: string) => {}),
+      insertLink: spy((_text: string, _url: string) => {}),
+      insertText: spy((_text: string) => {}),
+      insertMention: spy((_displayText: string, _url: string) => {}),
+      startMention: spy((_indicator: string) => {}),
+      removeLink: spy(() => {}),
+      copyToClipboard: spy(() => {}),
+      resolvePaste: spy((_text: string, _markdown?: string) => {}),
+      // Math chip commands are native-only; the mock records the call so tests can
+      // assert the API surface without a native chip implementation.
+      insertMath: spy((_latex: string, _options?: InsertMathOptions) => {}),
+      updateMath: spy(
+        (_start: number, _latex: string, _options?: InsertMathOptions) => {}
+      ),
+      removeMath: spy((_start: number) => {}),
+      getMarkdown: spy(() => Promise.resolve(textRef.current)),
+      getCaretRect: spy(() => Promise.resolve(EMPTY_CARET_RECT)),
+    };
+  }
+
+  useImperativeHandle(ref, () => instanceRef.current!);
+
+  return (
+    <TextInput
+      ref={inputRef}
+      value={text}
+      onChangeText={handleChangeText}
+      onFocus={() => onFocus?.()}
+      onBlur={() => onBlur?.()}
+      editable={editable}
+      placeholder={placeholder}
+      placeholderTextColor={placeholderTextColor}
+      autoFocus={autoFocus}
+      multiline={multiline}
+      scrollEnabled={scrollEnabled}
+      style={style}
+      testID={testID}
+      accessible={accessible}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      accessibilityRole={accessibilityRole}
+      accessibilityState={accessibilityState}
+      nativeID={nativeID}
+    />
+  );
+};
+
+export const EnrichedMarkdownText = ({
+  ref,
+  markdown,
+  containerStyle,
+  testID,
+  accessible,
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityRole,
+  accessibilityState,
+  nativeID,
+  markdownStyle: _markdownStyle,
+  onLinkPress: _onLinkPress,
+  onLinkLongPress: _onLinkLongPress,
+  onTaskListItemPress: _onTaskListItemPress,
+  onSelectionChange: _onSelectionChange,
+  enableLinkPreview: _enableLinkPreview,
+  linkLongPressSelects: _linkLongPressSelects,
+  selectable: _selectable,
+  md4cFlags: _md4cFlags,
+  allowFontScaling: _allowFontScaling,
+  maxFontSizeMultiplier: _maxFontSizeMultiplier,
+  allowTrailingMargin: _allowTrailingMargin,
+  flavor: _flavor,
+  streamingAnimation: _streamingAnimation,
+  streamingConfig: _streamingConfig,
+  spoilerOverlay: _spoilerOverlay,
+  contextMenuItems: _contextMenuItems,
+  imageRequestHeaders: _imageRequestHeaders,
+  selectionMenuConfig: _selectionMenuConfig,
+  accessibilityLabels: _accessibilityLabels,
+  selectionColor: _selectionColor,
+  selectionHandleColor: _selectionHandleColor,
+  textBreakStrategy: _textBreakStrategy,
+  lineBreakStrategyIOS: _lineBreakStrategyIOS,
+  writingDirection: _writingDirection,
+}: EnrichedMarkdownTextProps) => {
+  const instanceRef = useRef<EnrichedMarkdownTextInstance | null>(null);
+  if (instanceRef.current === null) {
+    instanceRef.current = {
+      // No native selection under Jest; the mock records the call.
+      clearSelection: spy(() => {}),
+      measure: spy((callback) => callback(0, 0, 0, 0, 0, 0)),
+      measureInWindow: spy((callback) => callback(0, 0, 0, 0)),
+      measureLayout: spy((_relativeToNativeNode, onSuccess) =>
+        onSuccess(0, 0, 0, 0)
+      ),
+    };
+  }
+
+  useImperativeHandle(ref, () => instanceRef.current!);
+
+  return (
+    <Text
+      style={containerStyle}
+      testID={testID}
+      accessible={accessible}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      accessibilityRole={accessibilityRole}
+      accessibilityState={accessibilityState}
+      nativeID={nativeID}
+    >
+      {markdown}
+    </Text>
+  );
+};