@expensify/react-native-live-markdown 0.1.70 → 0.1.72

package/src/MarkdownTextInput.web.tsx

@@ -80,6 +80,10 @@ let focusTimeout: NodeJS.Timeout | null = null;
 function normalizeValue(value: string) {
   return value.replace(/\n$/, '');
 }
+// Adds one '\n' at the end of the string if it's missing
+function denormalizeValue(value: string) {
+  return value.endsWith('\n') ? `${value}\n` : value;
+}
 
 // If an Input Method Editor is processing key input, the 'keyCode' is 229.
 // https://www.w3.org/TR/uievents/#determine-keydown-keyup-keyCode
@@ -174,7 +178,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
     const dimensions = React.useRef<Dimensions | null>(null);
 
     if (!history.current) {
-      history.current = new InputHistory(100);
+      history.current = new InputHistory(100, 150, value || '');
     }
 
     const flattenedStyle = useMemo(() => StyleSheet.flatten(style), [style]);
@@ -203,7 +207,8 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
         }
         const parsedText = ParseUtils.parseText(target, text, cursorPosition, customMarkdownStyles, !multiline);
         if (history.current && shouldAddToHistory) {
-          history.current.debouncedAdd(parsedText.text, parsedText.cursorPosition);
+          // We need to normalize the value before saving it to the history to prevent situations when additional new lines break the cursor position calculation logic
+          history.current.throttledAdd(normalizeValue(parsedText.text), parsedText.cursorPosition);
         }
 
         return parsedText;
@@ -236,7 +241,8 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
       (target: HTMLDivElement) => {
         if (!history.current) return '';
         const item = history.current.undo();
-        return parseText(target, item ? item.text : null, processedMarkdownStyle, item ? item.cursorPosition : null, false).text;
+        const undoValue = item ? denormalizeValue(item.text) : null;
+        return parseText(target, undoValue, processedMarkdownStyle, item ? item.cursorPosition : null, false).text;
       },
       [parseText, processedMarkdownStyle],
     );
@@ -245,7 +251,8 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
       (target: HTMLDivElement) => {
         if (!history.current) return '';
         const item = history.current.redo();
-        return parseText(target, item ? item.text : null, processedMarkdownStyle, item ? item.cursorPosition : null, false).text;
+        const redoValue = item ? denormalizeValue(item.text) : null;
+        return parseText(target, redoValue, processedMarkdownStyle, item ? item.cursorPosition : null, false).text;
       },
       [parseText, processedMarkdownStyle],
     );
@@ -328,9 +335,10 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
         if (!divRef.current || !(e.target instanceof HTMLElement)) {
           return;
         }
+        const changedText = e.target.innerText;
 
         if (compositionRef.current) {
-          updateTextColor(divRef.current, e.target.innerText);
+          updateTextColor(divRef.current, changedText);
           compositionRef.current = false;
           return;
         }
@@ -344,14 +352,22 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
           case 'historyRedo':
             text = redo(divRef.current);
             break;
+          case 'insertFromPaste':
+            // if there is no newline at the end of the copied text, contentEditable adds invisible <br> tag at the end of the text, so we need to normalize it
+            if (changedText.length > 2 && changedText[changedText.length - 2] !== '\n' && changedText[changedText.length - 1] === '\n') {
+              text = parseText(divRef.current, normalizeValue(changedText), processedMarkdownStyle).text;
+              break;
+            }
+            text = parseText(divRef.current, changedText, processedMarkdownStyle).text;
+            break;
           default:
-            text = parseText(divRef.current, e.target.innerText, processedMarkdownStyle).text;
+            text = parseText(divRef.current, changedText, processedMarkdownStyle).text;
         }
         if (pasteRef?.current) {
           pasteRef.current = false;
           updateSelection(e);
         }
-        updateTextColor(divRef.current, e.target.innerText);
+        updateTextColor(divRef.current, text);
 
         if (onChange) {
           const event = e as unknown as NativeSyntheticEvent<any>;
@@ -587,17 +603,6 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
       CursorUtils.setCursorPosition(divRef.current, newSelection.start, newSelection.end);
     }, [selection, updateRefSelectionVariables]);
 
-    useEffect(() => {
-      if (history.current?.history.length !== 0) {
-        return;
-      }
-      const currentValue = value ?? '';
-      history.current.add(currentValue, currentValue.length);
-
-      handleContentSizeChange();
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
     return (
       // eslint-disable-next-line jsx-a11y/no-static-element-interactions
       <div

package/src/web/InputHistory.ts

@@ -6,7 +6,7 @@ type HistoryItem = {
 export default class InputHistory {
   depth: number;
 
-  history: HistoryItem[];
+  items: HistoryItem[];
 
   historyIndex: number;
 
@@ -16,19 +16,19 @@ export default class InputHistory {
 
   debounceTime: number;
 
-  constructor(depth: number, debounceTime = 150) {
+  constructor(depth: number, debounceTime = 150, startingText = '') {
     this.depth = depth;
-    this.history = [];
+    this.items = [{text: startingText, cursorPosition: startingText.length}];
     this.historyIndex = 0;
     this.debounceTime = debounceTime;
   }
 
   getCurrentItem(): HistoryItem | null {
-    return this.history[this.historyIndex] || null;
+    return this.items[this.historyIndex] || null;
   }
 
   setHistory(newHistory: HistoryItem[]): void {
-    this.history = newHistory.slice(newHistory.length - this.depth);
+    this.items = newHistory.slice(newHistory.length - this.depth);
     this.historyIndex = newHistory.length - 1;
   }
 
@@ -37,80 +37,99 @@ export default class InputHistory {
   }
 
   clear(): void {
-    this.history = [];
+    this.items = [];
     this.historyIndex = 0;
   }
 
-  debouncedAdd(text: string, cursorPosition: number): void {
-    this.currentText = text;
-
+  throttledAdd(text: string, cursorPosition: number): void {
     if (this.timeout) {
       clearTimeout(this.timeout);
     }
 
+    if (this.currentText === null) {
+      this.timeout = null;
+      this.add(text, cursorPosition);
+    } else {
+      this.items[this.historyIndex] = {text, cursorPosition};
+    }
+    this.currentText = text;
+
     this.timeout = setTimeout(() => {
-      if (this.currentText == null) {
-        return;
-      }
-      this.add(this.currentText, cursorPosition);
       this.currentText = null;
     }, this.debounceTime);
   }
 
+  stopTimeout(): void {
+    if (this.timeout) {
+      clearTimeout(this.timeout);
+      this.timeout = null;
+    }
+    this.currentText = null;
+  }
+
   add(text: string, cursorPosition: number): void {
-    if (this.history.length > 0) {
-      const lastItem = this.history[this.history.length - 1];
-      if (lastItem && text === lastItem.text) {
-        this.historyIndex = this.history.length - 1;
+    if (this.items.length > 0) {
+      const currentItem = this.items[this.historyIndex];
+      if (currentItem && text === currentItem.text) {
         return;
       }
     }
 
-    if (this.historyIndex < this.history.length - 1) {
-      this.history.splice(this.historyIndex + 1);
+    if (this.historyIndex < this.items.length - 1) {
+      this.items.splice(this.historyIndex + 1);
+      this.historyIndex = this.items.length - 1;
     }
 
-    this.history.push({text, cursorPosition});
-    if (this.history.length > this.depth) {
-      this.history.shift();
+    this.items.push({text, cursorPosition});
+    if (this.items.length > this.depth) {
+      this.items.shift();
+    } else {
+      this.historyIndex += 1;
     }
-
-    this.historyIndex = this.history.length - 1;
   }
 
   undo(): HistoryItem | null {
-    if (this.currentText !== null && this.timeout) {
-      clearTimeout(this.timeout);
-      this.timeout = null;
-      return this.history[this.historyIndex] || null;
-    }
+    this.stopTimeout();
 
-    if (this.history.length === 0 || this.historyIndex - 1 < 0) {
+    if (this.items.length === 0 || this.historyIndex - 1 < 0) {
       return null;
     }
 
+    const currentHistoryItem = this.items[this.historyIndex];
+    const previousHistoryItem = this.items[this.historyIndex - 1];
+
+    const undoItem = previousHistoryItem
+      ? {
+          text: previousHistoryItem.text,
+          cursorPosition: Math.min(
+            (currentHistoryItem?.cursorPosition ?? 0) - ((currentHistoryItem?.text ?? '').length - (previousHistoryItem?.text ?? '').length),
+            (previousHistoryItem?.text ?? '').length,
+          ),
+        }
+      : null;
+
     if (this.historyIndex > 0) {
       this.historyIndex -= 1;
     }
-    return this.history[this.historyIndex] || null;
+
+    return undoItem;
   }
 
   redo(): HistoryItem | null {
     if (this.currentText !== null && this.timeout) {
-      clearTimeout(this.timeout);
-      return this.history[this.history.length - 1] || null;
+      this.stopTimeout();
     }
 
-    if (this.history.length === 0 || this.historyIndex + 1 > this.history.length) {
+    if (this.items.length === 0 || this.historyIndex + 1 > this.items.length) {
       return null;
     }
 
-    if (this.historyIndex < this.history.length - 1) {
+    if (this.historyIndex < this.items.length - 1) {
       this.historyIndex += 1;
     } else {
       return null;
     }
 
-    return this.history[this.historyIndex] || null;
+    return this.items[this.historyIndex] || null;
   }
 }