@expensify/react-native-live-markdown 0.1.3 → 0.1.4

package/src/web/InputHistory.ts

@@ -0,0 +1,114 @@
+type HistoryItem = {
+  text: string;
+  cursorPosition: number | null;
+};
+
+export default class InputHistory {
+  depth: number;
+
+  history: HistoryItem[];
+
+  historyIndex: number;
+
+  currentText: string | null = null;
+
+  timeout: NodeJS.Timeout | null = null;
+
+  debounceTime: number;
+
+  constructor(depth: number, debounceTime = 200) {
+    this.depth = depth;
+    this.history = [];
+    this.historyIndex = 0;
+    this.debounceTime = debounceTime;
+  }
+
+  getCurrentItem(): HistoryItem | null {
+    return this.history[this.historyIndex] || null;
+  }
+
+  setHistory(newHistory: HistoryItem[]): void {
+    this.history = newHistory.slice(newHistory.length - this.depth);
+    this.historyIndex = newHistory.length - 1;
+  }
+
+  setHistoryIndex(index: number): void {
+    this.historyIndex = index;
+  }
+
+  clear(): void {
+    this.history = [];
+    this.historyIndex = 0;
+  }
+
+  debouncedAdd(text: string, cursorPosition: number): void {
+    this.currentText = text;
+
+    if (this.timeout) {
+      clearTimeout(this.timeout);
+    }
+
+    this.timeout = setTimeout(() => {
+      if (this.currentText == null) {
+        return;
+      }
+      this.add(this.currentText, cursorPosition);
+      this.currentText = null;
+    }, this.debounceTime);
+  }
+
+  add(text: string, cursorPosition: number): void {
+    if (this.history.length > 0) {
+      const lastItem = this.history[this.history.length - 1];
+      if (lastItem && text === lastItem.text) {
+        return;
+      }
+    }
+
+    if (this.historyIndex < this.history.length - 1) {
+      this.history.splice(this.historyIndex + 1);
+    }
+
+    this.history.push({text, cursorPosition});
+    if (this.history.length > this.depth) {
+      this.history.shift();
+    }
+
+    this.historyIndex = this.history.length - 1;
+  }
+
+  undo(): HistoryItem | null {
+    if (this.currentText !== null && this.timeout) {
+      clearTimeout(this.timeout);
+      return this.history[this.history.length - 1] || null;
+    }
+
+    if (this.history.length === 0 || this.historyIndex - 1 < 0) {
+      return null;
+    }
+
+    if (this.historyIndex > 0) {
+      this.historyIndex -= 1;
+    }
+    return this.history[this.historyIndex] || null;
+  }
+
+  redo(): HistoryItem | null {
+    if (this.currentText !== null && this.timeout) {
+      clearTimeout(this.timeout);
+      return this.history[this.history.length - 1] || null;
+    }
+
+    if (this.history.length === 0 || this.historyIndex + 1 > this.history.length) {
+      return null;
+    }
+
+    if (this.historyIndex < this.history.length - 1) {
+      this.historyIndex += 1;
+    } else {
+      return null;
+    }
+
+    return this.history[this.historyIndex] || null;
+  }
+}

package/src/web/MarkdownTextInput.css

@@ -0,0 +1,24 @@
+.react-native-live-markdown-input-singleline {
+  white-space: nowrap;
+  overflow: auto;
+}
+
+.react-native-live-markdown-input-singleline::-webkit-scrollbar {
+  display: none;
+}
+
+.react-native-live-markdown-input-singleline br {
+  display: none;
+}
+
+.react-native-live-markdown-input-singleline * {
+  display: inline;
+  white-space: nowrap;
+}
+
+.react-native-live-markdown-input-singleline:empty::before,
+.react-native-live-markdown-input-multiline:empty::before {
+  pointer-events: none;
+  display: block; /* For Firefox */
+  content: attr(placeholder);
+}

package/src/web/cursorUtils.ts

@@ -0,0 +1,87 @@
+function createRange(node: HTMLElement, targetPosition: number, ignoreNewLines = false) {
+  const range = document.createRange();
+  range.selectNode(node);
+
+  let pos = 0;
+  const stack: Node[] = [node];
+  while (stack.length > 0) {
+    const current = stack.pop();
+    if (!current) {
+      break;
+    }
+    if (current.nodeType === Node.TEXT_NODE || current.nodeName === 'BR') {
+      const textContentLength = current.textContent ? current.textContent.length : 0;
+      const len = current.nodeName === 'BR' ? 1 : textContentLength;
+      if (pos + len >= targetPosition) {
+        if (current.nodeName === 'BR') {
+          range.setStartAfter(current);
+          (current as HTMLElement).scrollIntoView();
+        } else {
+          range.setStart(current, targetPosition - pos);
+        }
+        return range;
+      }
+      pos += len;
+    } else if (current.childNodes && current.childNodes.length > 0) {
+      for (let i = current.childNodes.length - 1; i >= 0; i--) {
+        const currentNode = current.childNodes[i];
+        if (currentNode && (!ignoreNewLines || (ignoreNewLines && currentNode.nodeName !== 'BR'))) {
+          stack.push(currentNode);
+        }
+      }
+    }
+  }
+
+  range.setStart(node, node.childNodes.length);
+  return range;
+}
+
+function setCursorPosition(target: HTMLElement, targetPosition: number, ignoreNewLines = false) {
+  const range = createRange(target, targetPosition, ignoreNewLines);
+  const selection = window.getSelection();
+  if (selection) {
+    range.collapse(true);
+    selection.removeAllRanges();
+    selection.addRange(range);
+  }
+}
+
+function moveCursorToEnd(target: HTMLElement) {
+  const range = document.createRange();
+  const selection = window.getSelection();
+  if (selection) {
+    range.setStart(target, target.childNodes.length);
+    range.collapse(true);
+    selection.removeAllRanges();
+    selection.addRange(range);
+  }
+}
+
+function getIndexedPosition(target: HTMLElement, range: Range, isStart: boolean) {
+  const marker = document.createTextNode('\0');
+  const rangeClone = range.cloneRange();
+
+  rangeClone.collapse(isStart);
+
+  rangeClone.insertNode(marker);
+  const position = target.innerText.indexOf('\0');
+  if (marker.parentNode) {
+    marker.parentNode.removeChild(marker);
+  }
+
+  return position;
+}
+
+function getCurrentCursorPosition(target: HTMLElement) {
+  const selection = document.getSelection();
+  if (!selection || selection.rangeCount === 0) {
+    return {start: target.innerText.length, end: target.innerText.length};
+  }
+
+  const range = selection.getRangeAt(0);
+  const start = getIndexedPosition(target, range, true);
+  const end = getIndexedPosition(target, range, false);
+  return {start, end};
+}
+
+export {getCurrentCursorPosition, moveCursorToEnd, setCursorPosition};

package/src/web/parserUtils.ts

@@ -0,0 +1,194 @@
+import * as CursorUtils from './cursorUtils';
+import type * as StyleUtilsTypes from '../styleUtils';
+
+type PartialMarkdownStyle = StyleUtilsTypes.PartialMarkdownStyle;
+
+type MarkdownType = 'bold' | 'italic' | 'strikethrough' | 'link' | 'code' | 'pre' | 'blockquote' | 'h1' | 'syntax' | 'mention-here' | 'mention-user';
+
+type MarkdownRange = {
+  type: MarkdownType;
+  startIndex: number;
+  length: number;
+};
+
+type NestedNode = {
+  node: HTMLElement;
+  endIndex: number;
+};
+
+function addStyling(targetElement: HTMLElement, type: MarkdownType, markdownStyle: PartialMarkdownStyle) {
+  const node = targetElement;
+  switch (type) {
+    case 'syntax':
+      Object.assign(node.style, markdownStyle.syntax);
+      break;
+    case 'bold':
+      node.style.fontWeight = 'bold';
+      break;
+    case 'italic':
+      node.style.fontStyle = 'italic';
+      break;
+    case 'strikethrough':
+      node.style.textDecoration = 'line-through';
+      break;
+    case 'mention-here':
+      Object.assign(node.style, markdownStyle.mentionHere);
+      break;
+    case 'mention-user':
+      Object.assign(node.style, markdownStyle.mentionUser);
+      break;
+    case 'link':
+      Object.assign(node.style, {
+        ...markdownStyle.link,
+        textDecoration: 'underline',
+      });
+      break;
+    case 'code':
+      Object.assign(node.style, markdownStyle.code);
+      break;
+    case 'pre':
+      Object.assign(node.style, markdownStyle.pre);
+      break;
+
+    case 'blockquote':
+      Object.assign(node.style, {
+        ...markdownStyle.blockquote,
+        borderLeftStyle: 'solid',
+        display: 'inline-block',
+        maxWidth: '100%',
+        boxSizing: 'border-box',
+      });
+      break;
+    case 'h1':
+      Object.assign(node.style, {
+        ...markdownStyle.h1,
+        fontWeight: 'bold',
+      });
+      break;
+    default:
+      break;
+  }
+}
+
+function addSubstringAsTextNode(root: HTMLElement, text: string, startIndex: number, endIndex: number) {
+  const substring = text.substring(startIndex, endIndex);
+  if (substring.length > 0) {
+    root.appendChild(document.createTextNode(substring));
+  }
+}
+
+function parseRangesToHTMLNodes(text: string, ranges: MarkdownRange[], markdownStyle: PartialMarkdownStyle = {}, disableInlineStyles = false): HTMLElement {
+  const root: HTMLElement = document.createElement('span');
+  root.className = 'root';
+  const textLength = text.length;
+  if (ranges.length === 0) {
+    addSubstringAsTextNode(root, text, 0, textLength);
+    return root;
+  }
+
+  const stack = [...ranges];
+  const nestedStack: NestedNode[] = [{node: root, endIndex: textLength}];
+  let lastRangeEndIndex = 0;
+  while (stack.length > 0) {
+    const range = stack.shift();
+    if (!range) {
+      break;
+    }
+    let currentRoot = nestedStack[nestedStack.length - 1];
+    if (!currentRoot) {
+      break;
+    }
+
+    const endOfCurrentRange = range.startIndex + range.length;
+    const nextRangeStartIndex = stack.length > 0 && !!stack[0] ? stack[0].startIndex || 0 : textLength;
+
+    addSubstringAsTextNode(currentRoot.node, text, lastRangeEndIndex, range.startIndex); // add text with newlines before current range
+
+    const span = document.createElement('span');
+    if (disableInlineStyles) {
+      span.className = range.type;
+    } else {
+      addStyling(span, range.type, markdownStyle);
+    }
+
+    if (stack.length > 0 && nextRangeStartIndex < endOfCurrentRange && range.type !== 'syntax') {
+      // tag nesting
+      currentRoot.node.appendChild(span);
+      nestedStack.push({node: span, endIndex: endOfCurrentRange});
+      lastRangeEndIndex = range.startIndex;
+    } else {
+      addSubstringAsTextNode(span, text, range.startIndex, endOfCurrentRange);
+      currentRoot.node.appendChild(span);
+      lastRangeEndIndex = endOfCurrentRange;
+
+      // end of tag nesting
+      while (nestedStack.length - 1 > 0 && nextRangeStartIndex >= currentRoot.endIndex) {
+        addSubstringAsTextNode(currentRoot.node, text, lastRangeEndIndex, currentRoot.endIndex);
+        const prevRoot = nestedStack.pop();
+        if (!prevRoot) {
+          break;
+        }
+        lastRangeEndIndex = prevRoot.endIndex;
+        currentRoot = nestedStack[nestedStack.length - 1] || currentRoot;
+      }
+    }
+  }
+
+  if (nestedStack.length > 1) {
+    const lastNestedNode = nestedStack[nestedStack.length - 1];
+    if (lastNestedNode) {
+      root.appendChild(lastNestedNode.node);
+    }
+  }
+
+  addSubstringAsTextNode(root, text, lastRangeEndIndex, textLength);
+  return root;
+}
+
+function parseText(
+  target: HTMLElement,
+  text: string,
+  curosrPositionIndex: number | null,
+  markdownStyle: PartialMarkdownStyle = {},
+  disableNewLinesInCursorPositioning = false,
+  alwaysMoveCursorToTheEnd = false,
+) {
+  const targetElement = target;
+
+  let cursorPosition: number | null = curosrPositionIndex;
+  const isFocused = document.activeElement === target;
+  if (isFocused && curosrPositionIndex === null) {
+    cursorPosition = CursorUtils.getCurrentCursorPosition(target).start;
+  }
+  const ranges = global.parseExpensiMarkToRanges(text);
+
+  const markdownRanges: MarkdownRange[] = ranges.map((range) => {
+    const [type, startIndex, length] = range;
+    return {
+      type: type as MarkdownType,
+      startIndex,
+      length,
+    };
+  });
+
+  targetElement.innerHTML = '';
+  targetElement.innerText = '';
+
+  // We don't want to parse text with single '\n', because contentEditable represents it as invisible <br />
+  if (!!text && text !== '\n') {
+    const dom = parseRangesToHTMLNodes(text, markdownRanges, markdownStyle);
+    target.appendChild(dom);
+  }
+
+  if (alwaysMoveCursorToTheEnd) {
+    CursorUtils.moveCursorToEnd(target);
+  } else if (isFocused && cursorPosition !== null) {
+    CursorUtils.setCursorPosition(target, cursorPosition, disableNewLinesInCursorPositioning);
+  }
+
+  return {text: target.innerText, cursorPosition: cursorPosition || 0};
+}
+
+export {parseText, parseRangesToHTMLNodes};
+
+export type {MarkdownRange, MarkdownType};