@expensify/react-native-live-markdown 0.1.299 → 0.1.301

package/src/web/utils/blockUtils.ts

@@ -1,5 +1,6 @@
-import type {MarkdownTextInputElement} from '../../MarkdownTextInput.web';
 import type {InlineImagesInputProps, MarkdownRange} from '../../commonTypes';
+import type {MarkdownTextInputElement} from '../../MarkdownTextInput.web';
+import {parseStringWithUnitToNumber} from '../../styleUtils';
 import type {PartialMarkdownStyle} from '../../styleUtils';
 import {addInlineImagePreview} from '../inputElements/inlineImage';
 import type {NodeType, TreeNode} from './treeUtils';
@@ -51,12 +52,9 @@ function addStyleToBlock(targetElement: HTMLElement, type: NodeType, markdownSty
       });
       break;
     case 'code':
-      Object.assign(node.style, markdownStyle.code);
-      break;
     case 'pre':
-      Object.assign(node.style, markdownStyle.pre);
+      addCodeBlockStyles(targetElement, type, markdownStyle, isMultiline);
       break;
-
     case 'blockquote':
       Object.assign(node.style, {
         ...markdownStyle.blockquote,
@@ -94,9 +92,49 @@ function addStyleToBlock(targetElement: HTMLElement, type: NodeType, markdownSty
   }
 }
 
+function addCodeBlockStyles(targetElement: HTMLElement, type: NodeType, markdownStyle: PartialMarkdownStyle, isMultiline = true) {
+  const node = targetElement;
+
+  const defaultPrePadding = markdownStyle.pre?.padding ?? 2;
+  const preHorizontalPadding = parseStringWithUnitToNumber(markdownStyle.pre?.paddingHorizontal ?? defaultPrePadding).toString();
+  const preVerticalPadding = parseStringWithUnitToNumber(markdownStyle.pre?.paddingVertical ?? defaultPrePadding).toString();
+
+  const defaultCodePadding = markdownStyle.code?.padding ?? 0;
+  const codeHorizontalPadding = parseStringWithUnitToNumber(markdownStyle.code?.paddingHorizontal ?? defaultCodePadding).toString();
+  const codeVerticalPadding = parseStringWithUnitToNumber(markdownStyle.code?.paddingVertical ?? defaultCodePadding).toString();
+
+  switch (type) {
+    case 'code':
+      Object.assign(node.style, {
+        ...markdownStyle.code,
+        fontSize: markdownStyle.code?.h1NestedFontSize && isChildOfMarkdownElement(node, 'h1') ? markdownStyle.code.h1NestedFontSize : markdownStyle.code?.fontSize,
+        padding: `${codeVerticalPadding}px ${codeHorizontalPadding}px`,
+        lineHeight: 1.5,
+      });
+      break;
+    case 'pre':
+      // In multiline style the pre block using pseudoelements, otherwise default to inline
+      if (isMultiline) {
+        Object.assign(node.style, {
+          ...markdownStyle.pre,
+          padding: `${preVerticalPadding}px ${preHorizontalPadding}px`,
+        });
+      } else {
+        Object.assign(node.style, {
+          ...markdownStyle.code,
+          padding: `${codeVerticalPadding}px ${codeHorizontalPadding}px`,
+          lineHeight: 1.5,
+        });
+      }
+      break;
+    default:
+      break;
+  }
+}
+
 const BLOCK_MARKDOWN_TYPES = ['inline-image'];
 const FULL_LINE_MARKDOWN_TYPES = ['blockquote'];
-const MULTILINE_MARKDOWN_TYPES = ['pre'];
+const MULTILINE_MARKDOWN_TYPES = ['codeblock'];
 
 function isBlockMarkdownType(type: NodeType) {
   return BLOCK_MARKDOWN_TYPES.includes(type);
@@ -108,7 +146,7 @@ function isMultilineMarkdownType(type: NodeType) {
 
 function getFirstBlockMarkdownRange(ranges: MarkdownRange[]) {
   const blockMarkdownRange = ranges.find((r) => isBlockMarkdownType(r.type) || FULL_LINE_MARKDOWN_TYPES.includes(r.type));
-  return FULL_LINE_MARKDOWN_TYPES.includes(blockMarkdownRange?.type || '') ? undefined : blockMarkdownRange;
+  return blockMarkdownRange && FULL_LINE_MARKDOWN_TYPES.includes(blockMarkdownRange.type) ? undefined : blockMarkdownRange;
 }
 
 function extendBlockStructure(
@@ -130,4 +168,32 @@ function extendBlockStructure(
   return targetNode;
 }
 
-export {addStyleToBlock, extendBlockStructure, isBlockMarkdownType, isMultilineMarkdownType, getFirstBlockMarkdownRange};
+function isDescendantOfMarkdownElement(node: HTMLElement, predicate: (type: string | null) => boolean): boolean {
+  let currentNode = node.parentNode;
+  while (currentNode && (currentNode as HTMLElement)?.contentEditable !== 'true') {
+    const elementType = (currentNode as HTMLElement).getAttribute?.('data-type');
+    if (predicate(elementType)) {
+      return true;
+    }
+    currentNode = currentNode.parentNode;
+  }
+  return false;
+}
+
+function isChildOfMarkdownElement(node: HTMLElement, elementType: NodeType): boolean {
+  return isDescendantOfMarkdownElement(node, (type) => type === elementType);
+}
+function isChildOfMultilineMarkdownElement(node: HTMLElement): boolean {
+  return isDescendantOfMarkdownElement(node, (type) => MULTILINE_MARKDOWN_TYPES.includes(type as NodeType));
+}
+
+export {
+  addStyleToBlock,
+  extendBlockStructure,
+  isBlockMarkdownType,
+  isMultilineMarkdownType,
+  getFirstBlockMarkdownRange,
+  isChildOfMarkdownElement,
+  isChildOfMultilineMarkdownElement,
+  MULTILINE_MARKDOWN_TYPES,
+};

package/src/web/utils/cursorUtils.ts

@@ -1,4 +1,5 @@
 import type {MarkdownTextInputElement} from '../../MarkdownTextInput.web';
+import {isChildOfMultilineMarkdownElement} from './blockUtils';
 import {findHTMLElementInTree, getTreeNodeByIndex} from './treeUtils';
 import type {TreeNode} from './treeUtils';
 
@@ -53,10 +54,35 @@ function setCursorPosition(target: MarkdownTextInputElement, startIndex: number,
 }
 
 function scrollIntoView(target: MarkdownTextInputElement, node: TreeNode) {
+  let scrollTargetElement = node.element;
   const targetElement = target;
-  const orderIndex = Number(node.orderIndex.split(',')[0]);
-  const currentLine = target.tree.childNodes[orderIndex]?.element;
-  const scrollTargetElement = currentLine || node.element;
+
+  if (!isChildOfMultilineMarkdownElement(node.element)) {
+    const orderIndex = Number(node.orderIndex.split(',')[0]);
+    const currentLine = target.tree.childNodes[orderIndex]?.element;
+    if (currentLine) {
+      scrollTargetElement = currentLine;
+    }
+  } else if (node.element.nodeName === 'BR') {
+    // Force scrolling BR into view
+    const selection = window.getSelection();
+    if (selection) {
+      const range = document.createRange();
+
+      range.setStartBefore(node.element);
+      range.collapse(true);
+
+      selection.addRange(range);
+
+      // Scroll to caret
+      const span = document.createElement('span');
+      span.textContent = '\u200B'; // zero-width space
+      range.insertNode(span);
+      span.scrollIntoView({block: 'center'});
+      span.remove(); // cleanup
+      return;
+    }
+  }
 
   const caretRect = scrollTargetElement.getBoundingClientRect();
   const targetRect = target.getBoundingClientRect();

package/src/web/utils/inputUtils.ts

@@ -1,5 +1,7 @@
 import type {CSSProperties} from 'react';
 import type {MarkdownNativeEvent, MarkdownTextInputElement} from '../../MarkdownTextInput.web';
+import {isChildOfMarkdownElement, isChildOfMultilineMarkdownElement} from './blockUtils';
+import BrowserUtils from './browserUtils';
 
 const ZERO_WIDTH_SPACE = '\u200B';
 
@@ -36,17 +38,33 @@ 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, cursorPosition: number, inputType?: string, isMultiline = true): 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;
+/**
+ * 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;
+}
+
+/**
+ * On Firefox, when breaking one codeblock, its syntax and the <br> after it can be merged into the closing syntax of the previous codeblock.
+ */
+function didTwoCodeblocksMerge(node: ChildNode | null) {
+  if (!node || !BrowserUtils.isFirefox) {
+    return;
   }
+  // To identify that two codeblock has merged, we check if current line ends with <br> tag, that previously was second codeblock's opening syntax line break
+  const hasPartOfBrokenCodeblock = node.lastChild?.lastChild?.lastChild?.lastChild?.nodeName === 'BR';
+  return BrowserUtils.isFirefox && (node.lastChild as HTMLElement)?.getAttribute('data-type') === 'codeblock' && hasPartOfBrokenCodeblock;
+}
 
+/**
+ * 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, cursorPosition: number, inputType?: string, isMultiline = true): string {
   const stack: ChildNode[] = [target];
   let text = '';
   let shouldAddNewline = false;
@@ -57,7 +75,7 @@ function parseInnerHTMLToText(target: MarkdownTextInputElement, cursorPosition:
   }
 
   while (stack.length > 0) {
-    const node = stack.pop();
+    const node = stack.pop() as HTMLElement;
     if (!node) {
       break;
     }
@@ -72,7 +90,7 @@ function parseInnerHTMLToText(target: MarkdownTextInputElement, cursorPosition:
       } else {
         const firstChild = node.firstChild as HTMLElement;
         const containsEmptyBlockElement = firstChild?.getAttribute?.('data-type') === 'block' && firstChild.textContent === '';
-        if (shouldAddNewline && !containsEmptyBlockElement) {
+        if (firstChild && shouldAddNewline && !containsEmptyBlockElement && !didTwoCodeblocksMerge(node.previousSibling)) {
           text += '\n';
           shouldAddNewline = false;
         }
@@ -81,11 +99,42 @@ function parseInnerHTMLToText(target: MarkdownTextInputElement, cursorPosition:
     }
 
     if (node.nodeType === Node.TEXT_NODE) {
+      let hasAddedNewline = false;
+      // Fix for codeblocks: Removing last codeblock newline, moves codeblock syntax too far into the codeblock content
+      // skipping one <br> after the codeblock syntax. We need to force parsing it before the text node is added.
+      if (node.parentElement && !node.parentElement.getAttribute?.('data-type') && isChildOfMarkdownElement(node, 'pre')) {
+        text += '\n';
+        const nextBR = node.parentElement?.nextElementSibling?.firstElementChild ?? node.parentElement?.nextElementSibling;
+        if (nextBR && nextBR.tagName === 'BR') {
+          nextBR.remove();
+        }
+        hasAddedNewline = true;
+      }
+
       // Parse text nodes into text
       text += node.textContent;
+
+      // Fix for codeblocks: If we are adding text at the end of a multiline markdown type element, we need to add a newline
+      // because the new text can replace the last <br> element and it will not be added to the text.
+      if (
+        node.parentElement &&
+        node.parentNode?.parentElement?.nextSibling &&
+        !node.parentNode?.nextSibling &&
+        isChildOfMultilineMarkdownElement(node) &&
+        ((!hasAddedNewline && isChildOfMarkdownElement(node, 'br')) || (!node.parentElement.getAttribute?.('data-type') && isChildOfMarkdownElement(node, 'syntax')))
+      ) {
+        text += '\n';
+      }
     } else if (node.nodeName === 'BR') {
       const parentNode = getTopParentNode(node);
-      if (isMultiline && parentNode && parentNode.parentElement?.contentEditable !== 'true' && !!(node as HTMLElement).getAttribute('data-id')) {
+
+      if (
+        (isMultiline &&
+          parentNode &&
+          parentNode.parentElement?.contentEditable !== 'true' &&
+          !!((node as HTMLElement).getAttribute('data-id') || (node.parentElement as HTMLElement).getAttribute('data-type') === 'br')) ||
+        (node.parentElement?.getAttribute('data-type') === 'text' && isChildOfMultilineMarkdownElement(node))
+      ) {
         // 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 - and now only for multiline inputs
         text += '\n';