@expensify/react-native-live-markdown 0.1.116 → 0.1.117

package/src/web/utils/cursorUtils.ts

@@ -0,0 +1,116 @@
+import type {MarkdownTextInputElement} from '../../MarkdownTextInput.web';
+import {findHTMLElementInTree, getTreeNodeByIndex} from './treeUtils';
+import type {TreeNode} from './treeUtils';
+
+function setCursorPosition(target: MarkdownTextInputElement, startIndex: number, endIndex: number | null = null) {
+  // 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 {
+    range.setStart(startTreeNode.element.childNodes[0] as ChildNode, start - startTreeNode.start);
+  }
+
+  if (endTreeNode.type === 'br') {
+    range.setEndBefore(endTreeNode.element);
+  } else {
+    range.setEnd(endTreeNode.element.childNodes[0] as ChildNode, (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);
+  }
+
+  scrollIntoView(startTreeNode);
+}
+
+function scrollIntoView(node: TreeNode) {
+  if (node.type === 'br' && node.parentNode?.parentNode?.type === 'line') {
+    // If the node is a line break, scroll to the parent paragraph, because Safari doesn't support scrollIntoView on br elements
+    node.parentNode.parentNode.element.scrollIntoView({
+      block: 'nearest',
+    });
+  } else {
+    node.element.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,106 @@
+import type {CSSProperties} from 'react';
+import type {MarkdownTextInputElement} from '../../MarkdownTextInput.web';
+
+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) {
+  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');
+}
+
+// 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): string {
+  // 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;
+  }
+
+  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();
+    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) {
+      // Replaced text is beeing added as text node, so we need to not add the newline before and after it
+      if (node.nodeType === Node.TEXT_NODE) {
+        shouldAddNewline = false;
+      } else {
+        if (shouldAddNewline) {
+          text += '\n';
+          shouldAddNewline = false;
+        }
+        shouldAddNewline = true;
+      }
+    }
+
+    if (node.nodeType === Node.TEXT_NODE) {
+      // Parse text nodes into text
+      text += node.textContent;
+    } else if (node.nodeName === 'BR') {
+      const parentNode = getTopParentNode(node);
+      if (parentNode && parentNode.parentElement?.contentEditable !== 'true') {
+        // 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
+        text += '\n';
+      }
+    } else {
+      let i = node.childNodes.length - 1;
+      while (i > -1) {
+        const child = node.childNodes[i];
+        if (!child) {
+          break;
+        }
+        stack.push(child);
+        i--;
+      }
+    }
+  }
+
+  return text.replaceAll('\r\n', '\n');
+}
+
+export {isEventComposing, getPlaceholderValue, getElementHeight, parseInnerHTMLToText, normalizeValue};

package/src/web/utils/parserUtils.ts

@@ -0,0 +1,302 @@
+import type {HTMLMarkdownElement, MarkdownTextInputElement} from '../../MarkdownTextInput.web';
+import {addNodeToTree} from './treeUtils';
+import type {NodeType, TreeNode} from './treeUtils';
+import type {PartialMarkdownStyle} from '../../styleUtils';
+import {getCurrentCursorPosition, moveCursorToEnd, setCursorPosition} from './cursorUtils';
+import {addStyleToBlock} from './blockUtils';
+
+type MarkdownType = 'bold' | 'italic' | 'strikethrough' | 'emoji' | 'link' | 'code' | 'pre' | 'blockquote' | 'h1' | 'syntax' | 'mention-here' | 'mention-user' | 'mention-report';
+
+type MarkdownRange = {
+  type: MarkdownType;
+  start: number;
+  length: number;
+  depth?: number;
+};
+
+type Paragraph = {
+  text: string;
+  start: number;
+  length: number;
+  markdownRanges: MarkdownRange[];
+};
+
+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;
+}
+
+function splitTextIntoLines(text: string): Paragraph[] {
+  let lineStartIndex = 0;
+  const lines: Paragraph[] = text.split('\n').map((line) => {
+    const lineObject: Paragraph = {
+      text: line,
+      start: lineStartIndex,
+      length: line.length,
+      markdownRanges: [],
+    };
+    lineStartIndex += line.length + 1; // Adding 1 for the newline character
+    return lineObject;
+  });
+
+  return lines;
+}
+
+/** Merges lines that contain multiline markdown tags into one line */
+function mergeLinesWithMultilineTags(lines: Paragraph[], ranges: MarkdownRange[]) {
+  let mergedLines = [...lines];
+  const lineIndexes = mergedLines.map((_line, index) => index);
+
+  ranges.forEach((range) => {
+    const beginLineIndex = mergedLines.findLastIndex((line) => line.start <= range.start);
+    const endLineIndex = mergedLines.findIndex((line) => line.start + line.length >= range.start + range.length);
+    const correspondingLineIndexes = lineIndexes.slice(beginLineIndex, endLineIndex + 1);
+
+    if (correspondingLineIndexes.length > 0) {
+      const mainLineIndex = correspondingLineIndexes[0] as number;
+      const mainLine = mergedLines[mainLineIndex] as Paragraph;
+
+      mainLine.markdownRanges.push(range);
+
+      const otherLineIndexes = correspondingLineIndexes.slice(1);
+      otherLineIndexes.forEach((lineIndex) => {
+        const otherLine = mergedLines[lineIndex] as Paragraph;
+
+        mainLine.text += `\n${otherLine.text}`;
+        mainLine.length += otherLine.length + 1;
+        mainLine.markdownRanges.push(...otherLine.markdownRanges);
+      });
+      if (otherLineIndexes.length > 0) {
+        mergedLines = mergedLines.filter((_line, index) => !otherLineIndexes.includes(index));
+      }
+    }
+  });
+
+  return mergedLines;
+}
+
+/** Adds a value prop to the element and appends the value to the parent node element */
+function appendValueToElement(element: HTMLMarkdownElement, parentTreeNode: TreeNode, value: string) {
+  const targetElement = element;
+  const parentNode = parentTreeNode;
+  targetElement.value = value;
+  parentNode.element.value = (parentNode.element.value || '') + value;
+}
+
+function appendNode(element: HTMLMarkdownElement, parentTreeNode: TreeNode, type: NodeType, length: number) {
+  const node = addNodeToTree(element, parentTreeNode, type, length);
+  parentTreeNode.element.appendChild(element);
+  return node;
+}
+
+function addBrElement(node: TreeNode) {
+  const span = document.createElement('span') as HTMLMarkdownElement;
+  span.setAttribute('data-type', 'br');
+  appendValueToElement(span, node, '\n');
+  const spanNode = appendNode(span, node, 'br', 1);
+  appendNode(document.createElement('br') as unknown as HTMLMarkdownElement, spanNode, 'br', 1);
+  return spanNode;
+}
+
+function addTextToElement(node: TreeNode, text: string) {
+  const lines = text.split('\n');
+  lines.forEach((line, index) => {
+    if (line !== '') {
+      const span = document.createElement('span') as HTMLMarkdownElement;
+      appendValueToElement(span, node, line);
+      span.setAttribute('data-type', 'text');
+      span.appendChild(document.createTextNode(line));
+      appendNode(span, node, 'text', line.length);
+    }
+
+    if (index < lines.length - 1 || (index === 0 && line === '')) {
+      addBrElement(node);
+    }
+  });
+}
+
+function addParagraph(node: TreeNode, text: string | null = null, length: number, disableInlineStyles = false) {
+  const p = document.createElement('p');
+  p.setAttribute('data-type', 'line');
+  if (!disableInlineStyles) {
+    addStyleToBlock(p, 'line', {});
+  }
+
+  const pNode = appendNode(p as unknown as HTMLMarkdownElement, node, 'line', length);
+
+  if (text === '') {
+    // If the line is empty, we still need to add a br element to keep the line height
+    addBrElement(pNode);
+  } else if (text) {
+    addTextToElement(pNode, text);
+  }
+
+  return pNode;
+}
+
+/** Builds HTML DOM structure based on passed text and markdown ranges */
+function parseRangesToHTMLNodes(text: string, ranges: MarkdownRange[], markdownStyle: PartialMarkdownStyle = {}, disableInlineStyles = false) {
+  const rootElement: HTMLMarkdownElement = document.createElement('span') as HTMLMarkdownElement;
+  const textLength = text.replace(/\n/g, '\\n').length;
+  const rootNode: TreeNode = {
+    element: rootElement,
+    start: 0,
+    length: textLength,
+    parentNode: null,
+    childNodes: [],
+    type: 'root',
+    orderIndex: '',
+    isGeneratingNewline: false,
+  };
+  let currentParentNode: TreeNode = rootNode;
+  let lines = splitTextIntoLines(text);
+
+  if (ranges.length === 0) {
+    lines.forEach((line) => {
+      addParagraph(rootNode, line.text, line.length, disableInlineStyles);
+    });
+    return {dom: rootElement, tree: rootNode};
+  }
+
+  const markdownRanges = ungroupRanges(ranges);
+  lines = mergeLinesWithMultilineTags(lines, markdownRanges);
+
+  let lastRangeEndIndex = 0;
+  while (lines.length > 0) {
+    const line = lines.shift();
+    if (!line) {
+      break;
+    }
+
+    // preparing line paragraph element for markdown text
+    currentParentNode = addParagraph(rootNode, null, line.length, disableInlineStyles);
+    rootElement.value = (rootElement.value || '') + line.text;
+    if (lines.length > 0) {
+      rootElement.value = `${rootElement.value || ''}\n`;
+    }
+
+    if (line.markdownRanges.length === 0) {
+      addTextToElement(currentParentNode, line.text);
+    }
+
+    lastRangeEndIndex = line.start;
+    const lineMarkdownRanges = line.markdownRanges;
+    // go through all markdown ranges in the line
+    while (lineMarkdownRanges.length > 0) {
+      const range = lineMarkdownRanges.shift();
+      if (!range) {
+        break;
+      }
+
+      const endOfCurrentRange = range.start + range.length;
+      const nextRangeStartIndex = lineMarkdownRanges.length > 0 && !!lineMarkdownRanges[0] ? lineMarkdownRanges[0].start || 0 : textLength;
+
+      // add text before the markdown range
+      const textBeforeRange = line.text.substring(lastRangeEndIndex - line.start, range.start - line.start);
+      if (textBeforeRange) {
+        addTextToElement(currentParentNode, textBeforeRange);
+      }
+
+      // create markdown span element
+      const span = document.createElement('span') as HTMLMarkdownElement;
+      span.setAttribute('data-type', range.type);
+      if (!disableInlineStyles) {
+        addStyleToBlock(span, range.type, markdownStyle);
+      }
+
+      const spanNode = appendNode(span, currentParentNode, range.type, range.length);
+
+      if (lineMarkdownRanges.length > 0 && nextRangeStartIndex < endOfCurrentRange && range.type !== 'syntax') {
+        // tag nesting
+        currentParentNode = spanNode;
+        lastRangeEndIndex = range.start;
+      } else {
+        // adding markdown tag
+        addTextToElement(spanNode, text.substring(range.start, endOfCurrentRange));
+        currentParentNode.element.value = (currentParentNode.element.value || '') + (spanNode.element.value || '');
+        lastRangeEndIndex = endOfCurrentRange;
+        // tag unnesting and adding text after the tag
+        while (currentParentNode.parentNode !== null && nextRangeStartIndex >= currentParentNode.start + currentParentNode.length) {
+          const textAfterRange = line.text.substring(lastRangeEndIndex - line.start, currentParentNode.start - line.start + currentParentNode.length);
+          if (textAfterRange) {
+            addTextToElement(currentParentNode, textAfterRange);
+          }
+          lastRangeEndIndex = currentParentNode.start + currentParentNode.length;
+          if (currentParentNode.parentNode.type !== 'root') {
+            currentParentNode.parentNode.element.value = currentParentNode.element.value || '';
+          }
+          currentParentNode = currentParentNode.parentNode || rootNode;
+        }
+      }
+    }
+  }
+
+  return {dom: rootElement, tree: rootNode};
+}
+
+function moveCursor(isFocused: boolean, alwaysMoveCursorToTheEnd: boolean, cursorPosition: number | null, target: MarkdownTextInputElement) {
+  if (!isFocused) {
+    return;
+  }
+
+  if (alwaysMoveCursorToTheEnd || cursorPosition === null) {
+    moveCursorToEnd(target);
+  } else if (cursorPosition !== null) {
+    setCursorPosition(target, cursorPosition);
+  }
+}
+function updateInputStructure(
+  target: MarkdownTextInputElement,
+  text: string,
+  cursorPositionIndex: number | null,
+  markdownStyle: PartialMarkdownStyle = {},
+  alwaysMoveCursorToTheEnd = false,
+  shouldForceDOMUpdate = false,
+) {
+  const targetElement = target;
+
+  // in case the cursorPositionIndex is larger than text length, cursorPosition will be null, i.e: move the caret to the end
+  let cursorPosition: number | null = cursorPositionIndex !== null && cursorPositionIndex <= text.length ? cursorPositionIndex : null;
+  const isFocused = document.activeElement === target;
+  if (isFocused && cursorPositionIndex === null) {
+    const selection = getCurrentCursorPosition(target);
+    cursorPosition = selection ? selection.start : null;
+  }
+  const ranges = global.parseExpensiMarkToRanges(text);
+  const markdownRanges: MarkdownRange[] = ranges as MarkdownRange[];
+  if (!text || targetElement.innerHTML === '<br>' || (targetElement && targetElement.innerHTML === '\n')) {
+    targetElement.innerHTML = '';
+    targetElement.innerText = '';
+  }
+
+  // We don't want to parse text with single '\n', because contentEditable represents it as invisible <br />
+  if (text) {
+    const {dom, tree} = parseRangesToHTMLNodes(text, markdownRanges, markdownStyle);
+
+    if (shouldForceDOMUpdate || targetElement.innerHTML !== dom.innerHTML) {
+      targetElement.innerHTML = '';
+      targetElement.innerText = '';
+      Array.from(dom.children).forEach((child) => {
+        targetElement.appendChild(child);
+      });
+    }
+
+    targetElement.tree = tree;
+    moveCursor(isFocused, alwaysMoveCursorToTheEnd, cursorPosition, targetElement);
+  }
+
+  return {text, cursorPosition: cursorPosition || 0};
+}
+
+export {updateInputStructure, parseRangesToHTMLNodes};
+
+export type {MarkdownRange, MarkdownType};

package/src/web/utils/treeUtils.ts

@@ -0,0 +1,103 @@
+import type {HTMLMarkdownElement} from '../../MarkdownTextInput.web';
+import type {MarkdownRange, MarkdownType} from './parserUtils';
+
+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;
+};
+
+function addNodeToTree(element: HTMLMarkdownElement, parentTreeNode: TreeNode, type: NodeType, length: number | null = null) {
+  const contentLength = length || (element.nodeName === 'BR' || type === 'br' ? 1 : element.value?.length) || 0;
+  const isGeneratingNewline = type === 'line' && !(element.childNodes.length === 1 && (element.childNodes[0] as HTMLElement)?.getAttribute?.('data-type') === 'br');
+  const parentChildrenCount = parentTreeNode?.childNodes.length || 0;
+  let startIndex = parentTreeNode.start;
+  if (parentChildrenCount > 0) {
+    const lastParentChild = parentTreeNode.childNodes[parentChildrenCount - 1];
+    if (lastParentChild) {
+      startIndex = lastParentChild.start + lastParentChild.length;
+      startIndex += lastParentChild.isGeneratingNewline || element.style.display === 'block' ? 1 : 0;
+    }
+  }
+
+  const item: TreeNode = {
+    element,
+    parentNode: parentTreeNode,
+    childNodes: [],
+    start: startIndex,
+    length: contentLength,
+    type,
+    orderIndex: parentTreeNode.parentNode === null ? `${parentChildrenCount}` : `${parentTreeNode.orderIndex},${parentChildrenCount}`,
+    isGeneratingNewline,
+  };
+
+  element.setAttribute('data-id', item.orderIndex);
+  parentTreeNode.childNodes.push(item);
+  return item;
+}
+
+function findHTMLElementInTree(treeRoot: TreeNode, element: HTMLElement): TreeNode | null {
+  if (element.hasAttribute?.('contenteditable')) {
+    return treeRoot;
+  }
+
+  if (!element || !element.hasAttribute?.('data-id')) {
+    return null;
+  }
+  const indexes = element.getAttribute('data-id')?.split(',');
+  let el: TreeNode | null = treeRoot;
+
+  while (el && indexes && indexes.length > 0) {
+    const index = Number(indexes.shift() || -1);
+    if (index < 0) {
+      break;
+    }
+
+    if (el) {
+      el = el.childNodes[index] || null;
+    }
+  }
+
+  return el;
+}
+
+function getTreeNodeByIndex(treeRoot: TreeNode, index: number): TreeNode | null {
+  let el: TreeNode | null = treeRoot;
+
+  let i = 0;
+  let newLineGenerated = false;
+  while (el && el.childNodes.length > 0 && i < el.childNodes.length) {
+    const child = el.childNodes[i] as TreeNode;
+
+    if (!child) {
+      break;
+    }
+
+    if (index >= child.start && index < child.start + child.length) {
+      if (child.childNodes.length === 0) {
+        return child;
+      }
+      el = child;
+      i = 0;
+    } else if ((child.isGeneratingNewline || newLineGenerated || i === el.childNodes.length - 1) && index === child.start + child.length) {
+      newLineGenerated = true;
+      if (child.childNodes.length === 0) {
+        return child;
+      }
+      el = child;
+      i = 0;
+    } else {
+      i++;
+    }
+  }
+  return null;
+}
+
+export {addNodeToTree, findHTMLElementInTree, getTreeNodeByIndex};
+
+export type {TreeNode, NodeType};

package/src/web/utils/webStyleUtils.ts

@@ -0,0 +1,54 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type {TextStyle} from 'react-native';
+import type {MarkdownStyle} from '../../MarkdownTextInputDecoratorViewNativeComponent';
+import {mergeMarkdownStyleWithDefault} from '../../styleUtils';
+
+let createReactDOMStyle: (style: any) => any;
+try {
+  createReactDOMStyle =
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    require('react-native-web/dist/exports/StyleSheet/compiler/createReactDOMStyle').default;
+} catch (e) {
+  throw new Error('[react-native-live-markdown] Function `createReactDOMStyle` from react-native-web not found. Please make sure that you are using React Native Web 0.18 or newer.');
+}
+
+let preprocessStyle: (style: any) => any;
+try {
+  preprocessStyle =
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    require('react-native-web/dist/exports/StyleSheet/preprocess').default;
+} catch (e) {
+  throw new Error('[react-native-live-markdown] Function `preprocessStyle` from react-native-web not found.');
+}
+
+let dangerousStyleValue: (name: string, value: any, isCustomProperty: boolean) => any;
+try {
+  dangerousStyleValue =
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    require('react-native-web/dist/modules/setValueForStyles/dangerousStyleValue').default;
+} catch (e) {
+  throw new Error('[react-native-live-markdown] Function `dangerousStyleValue` from react-native-web not found.');
+}
+
+function processUnitsInMarkdownStyle(input: MarkdownStyle): MarkdownStyle {
+  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);
+    });
+  });
+
+  return output as MarkdownStyle;
+}
+
+function processMarkdownStyle(input: MarkdownStyle | undefined): MarkdownStyle {
+  return processUnitsInMarkdownStyle(mergeMarkdownStyleWithDefault(input));
+}
+
+function parseToReactDOMStyle(style: TextStyle): any {
+  return createReactDOMStyle(preprocessStyle(style));
+}
+
+export {parseToReactDOMStyle, processMarkdownStyle};