@expensify/react-native-live-markdown 0.1.143 → 0.1.145

package/src/MarkdownTextInput.web.tsx

@@ -149,7 +149,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
         if (text === null) {
           return {text: divRef.current.value, cursorPosition: null};
         }
-        const parsedText = updateInputStructure(target, text, cursorPosition, customMarkdownStyles, false, shouldForceDOMUpdate);
+        const parsedText = updateInputStructure(target, text, cursorPosition, multiline, customMarkdownStyles, false, shouldForceDOMUpdate);
         divRef.current.value = parsedText.text;
 
         if (history.current && shouldAddToHistory) {
@@ -158,7 +158,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
 
         return parsedText;
       },
-      [],
+      [multiline],
     );
 
     const processedMarkdownStyle = useMemo(() => {
@@ -287,7 +287,9 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
 
         updateTextColor(divRef.current, e.target.textContent ?? '');
         const previousText = divRef.current.value;
-        const parsedText = normalizeValue(inputType === 'pasteText' ? pasteContent.current || '' : parseInnerHTMLToText(e.target as MarkdownTextInputElement));
+        const parsedText = normalizeValue(
+          inputType === 'pasteText' ? pasteContent.current || '' : parseInnerHTMLToText(e.target as MarkdownTextInputElement, inputType, contentSelection.current.start),
+        );
 
         if (pasteContent.current) {
           pasteContent.current = null;

package/src/MarkdownTextInputDecoratorViewNativeComponent.ts

@@ -46,6 +46,27 @@ interface MarkdownStyle {
     color: ColorValue;
     backgroundColor: ColorValue;
   };
+  inlineImage: {
+    maxWidth: Float;
+    maxHeight: Float;
+    marginTop: Float;
+    marginBottom: Float;
+  };
+  loadingIndicatorContainer?: {
+    backgroundColor?: ColorValue;
+    borderWidth?: Float;
+    borderColor?: ColorValue;
+    borderRadius?: Float;
+    width?: Float;
+    height?: Float;
+  };
+  loadingIndicator?: {
+    primaryColor?: ColorValue;
+    secondaryColor?: ColorValue;
+    width?: Float;
+    height?: Float;
+    borderWidth?: Float;
+  };
 }
 
 interface NativeProps extends ViewProps {

package/src/commonTypes.ts

@@ -1,4 +1,18 @@
-type MarkdownType = 'bold' | 'italic' | 'strikethrough' | 'emoji' | 'mention-here' | 'mention-user' | 'mention-report' | 'link' | 'code' | 'pre' | 'blockquote' | 'h1' | 'syntax';
+type MarkdownType =
+  | 'bold'
+  | 'italic'
+  | 'strikethrough'
+  | 'emoji'
+  | 'mention-here'
+  | 'mention-user'
+  | 'mention-report'
+  | 'link'
+  | 'code'
+  | 'pre'
+  | 'blockquote'
+  | 'h1'
+  | 'syntax'
+  | 'inline-image';
 
 interface MarkdownRange {
   type: MarkdownType;

package/src/styleUtils.ts

@@ -54,6 +54,16 @@ function makeDefaultMarkdownStyle(): MarkdownStyle {
       color: 'red',
       backgroundColor: 'pink',
     },
+    inlineImage: {
+      maxWidth: 150,
+      maxHeight: 150,
+      marginTop: 5,
+      marginBottom: 0,
+    },
+    loadingIndicator: {
+      primaryColor: 'gray',
+      secondaryColor: 'lightgray',
+    },
   };
 }
 
@@ -65,13 +75,21 @@ function mergeMarkdownStyleWithDefault(input: PartialMarkdownStyle | undefined):
       if (!(key in output)) {
         return;
       }
-      Object.assign(output[key as keyof MarkdownStyle], input[key as keyof MarkdownStyle]);
+
+      const outputValue = output[key as keyof MarkdownStyle];
+      if (outputValue) {
+        Object.assign(outputValue, input[key as keyof MarkdownStyle]);
+      }
     });
   }
 
   return output;
 }
 
+function parseStringWithUnitToNumber(value: string | null): number {
+  return value ? parseInt(value.replace('px', ''), 10) : 0;
+}
+
 export type {PartialMarkdownStyle};
 
-export {mergeMarkdownStyleWithDefault};
+export {mergeMarkdownStyleWithDefault, parseStringWithUnitToNumber};

package/src/web/MarkdownTextInput.css

@@ -24,3 +24,20 @@
   display: block; /* For Firefox */
   content: attr(placeholder);
 }
+
+@keyframes react-native-live-markdown-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.react-native-live-markdown-input-multiline [contenteditable='false'] {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}

package/src/web/inputElements/inlineImage.ts

@@ -0,0 +1,114 @@
+import type {HTMLMarkdownElement, MarkdownTextInputElement} from '../../MarkdownTextInput.web';
+import type {MarkdownRange} from '../../commonTypes';
+import {parseStringWithUnitToNumber} from '../../styleUtils';
+import type {PartialMarkdownStyle} from '../../styleUtils';
+import type {TreeNode} from '../utils/treeUtils';
+import {createLoadingIndicator} from './loadingIndicator';
+
+const inlineImageDefaultStyles = {
+  position: 'absolute',
+  bottom: 0,
+  left: 0,
+};
+
+function createImageElement(url: string, callback: (img: HTMLElement) => void) {
+  const imageContainer = document.createElement('span');
+  imageContainer.contentEditable = 'false';
+  imageContainer.setAttribute('data-type', 'inline-container');
+
+  const img = new Image();
+  imageContainer.appendChild(img);
+
+  img.contentEditable = 'false';
+  img.onload = () => callback(imageContainer);
+  img.onerror = () => callback(imageContainer);
+  img.src = url;
+}
+
+/** Adds already loaded image element from current input content to the tree node */
+function updateImageTreeNode(targetNode: TreeNode, newElement: HTMLMarkdownElement) {
+  const paddingBottom = `${newElement.style.height}`;
+  targetNode.element.appendChild(newElement);
+
+  let currentParent = targetNode.element;
+  while (currentParent.parentElement && !['line', 'block'].includes(currentParent.getAttribute('data-type') || '')) {
+    currentParent = currentParent.parentElement as HTMLMarkdownElement;
+  }
+  Object.assign(currentParent.style, {
+    paddingBottom,
+  });
+
+  return targetNode;
+}
+
+/** The main function that adds inline image preview to the node */
+function addInlineImagePreview(currentInput: MarkdownTextInputElement, targetNode: TreeNode, text: string, ranges: MarkdownRange[], markdownStyle: PartialMarkdownStyle) {
+  const linkRange = ranges.find((r) => r.type === 'link');
+  let imageHref = '';
+  if (linkRange) {
+    imageHref = text.substring(linkRange.start, linkRange.start + linkRange.length);
+  }
+
+  // If the inline image markdown with the same href exists in the current input, use it instead of creating new one.
+  // Prevents from image flickering and layout jumps
+  const alreadyLoadedPreview = currentInput.querySelector(`img[src="${imageHref}"]`);
+  const loadedImageContainer = alreadyLoadedPreview?.parentElement;
+  if (loadedImageContainer && loadedImageContainer.getAttribute('data-type') === 'inline-container') {
+    return updateImageTreeNode(targetNode, loadedImageContainer as HTMLMarkdownElement);
+  }
+
+  // Add a loading spinner
+  const spinner = createLoadingIndicator(imageHref, markdownStyle);
+  if (spinner) {
+    targetNode.element.appendChild(spinner);
+  }
+
+  const maxWidth = markdownStyle.inlineImage?.maxWidth;
+  const maxHeight = markdownStyle.inlineImage?.maxHeight;
+  const imageMarginTop = parseStringWithUnitToNumber(`${markdownStyle.inlineImage?.marginTop}`);
+  const imageMarginBottom = parseStringWithUnitToNumber(`${markdownStyle.inlineImage?.marginBottom}`);
+
+  Object.assign(targetNode.element.style, {
+    display: 'block',
+    marginBottom: `${imageMarginBottom}px`,
+    paddingBottom: markdownStyle.loadingIndicatorContainer?.height || markdownStyle.loadingIndicator?.height || (!!markdownStyle.loadingIndicator && '30px') || undefined,
+  });
+
+  createImageElement(imageHref, (imageContainer) => {
+    // Verify if the current spinner is for the loaded image. If not, it means that the response came after the user changed the image url
+    const currentSpinner = currentInput.querySelector('[data-type="spinner"]');
+    // Remove the spinner
+    if (currentSpinner) {
+      currentSpinner.remove();
+    }
+
+    // Set the image styles
+    Object.assign(imageContainer.style, {
+      ...inlineImageDefaultStyles,
+      maxHeight,
+      maxWidth,
+    });
+
+    const img = imageContainer.firstChild as HTMLImageElement;
+    Object.assign(img.style, {
+      maxHeight,
+      maxWidth,
+    });
+
+    targetNode.element.appendChild(imageContainer);
+
+    const imageHeight = `${imageContainer.clientHeight + imageMarginTop}px`;
+    Object.assign(imageContainer.style, {
+      height: imageHeight,
+    });
+    // Set paddingBottom to the height of the image so it's displayed under the block
+    Object.assign(targetNode.element.style, {
+      paddingBottom: imageHeight,
+    });
+  });
+
+  return targetNode;
+}
+
+// eslint-disable-next-line import/prefer-default-export
+export {addInlineImagePreview};

package/src/web/inputElements/loadingIndicator.ts

@@ -0,0 +1,52 @@
+import type {PartialMarkdownStyle} from '../../styleUtils';
+
+const spinnerDefaultStyles = {
+  borderRadius: '50%',
+  display: 'block',
+  animationPlayState: 'paused',
+};
+const spinnerContainerDefaultStyles = {
+  position: 'absolute',
+  bottom: '0',
+  left: '0',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+};
+
+/** Creates animated loading spinner */
+function createLoadingIndicator(url: string, markdownStyle: PartialMarkdownStyle) {
+  const container = document.createElement('span');
+  container.contentEditable = 'false';
+
+  const spinner = document.createElement('span');
+  const spinnerStyles = markdownStyle.loadingIndicator;
+  if (spinnerStyles) {
+    const spinnerBorderWidth = spinnerStyles.borderWidth || 3;
+    Object.assign(spinner.style, {
+      ...spinnerDefaultStyles,
+      border: `${spinnerBorderWidth}px solid ${String(spinnerStyles.secondaryColor)}`,
+      borderTop: `${spinnerBorderWidth}px solid ${String(spinnerStyles.primaryColor)}`,
+      width: spinnerStyles.width || '20px',
+      height: spinnerStyles.height || '20px',
+    });
+  }
+
+  const containerStyles = markdownStyle.loadingIndicatorContainer;
+  Object.assign(container.style, {
+    ...markdownStyle.loadingIndicatorContainer,
+    ...spinnerContainerDefaultStyles,
+    width: containerStyles?.width || 'auto',
+    height: containerStyles?.height || 'auto',
+  });
+
+  container.setAttribute('data-type', 'spinner');
+  container.setAttribute('data-url', url);
+  container.contentEditable = 'false';
+  container.appendChild(spinner);
+
+  return container;
+}
+
+// eslint-disable-next-line import/prefer-default-export
+export {createLoadingIndicator};

package/src/web/utils/animationUtils.ts

@@ -0,0 +1,59 @@
+import type {HTMLMarkdownElement, MarkdownTextInputElement} from '../../MarkdownTextInput.web';
+
+const ANIMATED_ELEMENT_TYPES = ['spinner'] as const;
+
+type AnimatedElementType = (typeof ANIMATED_ELEMENT_TYPES)[number];
+
+type AnimationTimes = {
+  [key in AnimatedElementType]?: CSSNumberish[];
+};
+
+const KEYFRAMES: {
+  [key in AnimatedElementType]?: Keyframe[];
+} = {
+  spinner: [{transform: 'rotate(0deg)'}, {transform: 'rotate(360deg)'}],
+};
+
+const OPTIONS: {[key in AnimatedElementType]?: KeyframeAnimationOptions} = {
+  spinner: {
+    duration: 1000,
+    iterations: Infinity,
+  },
+};
+
+/** Gets the current times of all animated elements inside the input */
+function getAnimationCurrentTimes(currentInput: MarkdownTextInputElement): AnimationTimes {
+  const animationTimes: AnimationTimes = {};
+
+  ANIMATED_ELEMENT_TYPES.forEach((type) => {
+    const elements = currentInput.querySelectorAll(`[data-type="${type}"]`);
+    animationTimes[type] = Array.from(elements).map((element) => {
+      const animation = (element.firstChild as HTMLMarkdownElement).getAnimations()[0];
+      if (animation) {
+        return animation.currentTime || 0;
+      }
+      return 0;
+    });
+  });
+
+  return animationTimes;
+}
+
+/** Updates the current times of all animated elements inside the input, to preserve their state between input rerenders */
+function updateAnimationsTime(currentInput: MarkdownTextInputElement, animationTimes: AnimationTimes) {
+  ANIMATED_ELEMENT_TYPES.forEach((type) => {
+    const elements = currentInput.querySelectorAll(`[data-type="${type}"]`);
+    if (!KEYFRAMES[type]) {
+      return;
+    }
+
+    elements.forEach((element, index) => {
+      const animation = (element.firstChild as HTMLMarkdownElement).animate(KEYFRAMES[type] as Keyframe[], OPTIONS[type]);
+      if (animationTimes?.[type] && animation) {
+        animation.currentTime = animationTimes[type]?.[index] || 0;
+      }
+    });
+  });
+}
+
+export {getAnimationCurrentTimes, updateAnimationsTime};

package/src/web/utils/blockUtils.ts

@@ -1,5 +1,8 @@
+import type {MarkdownTextInputElement} from '../../MarkdownTextInput.web';
+import type {MarkdownRange} from '../../commonTypes';
 import type {PartialMarkdownStyle} from '../../styleUtils';
-import type {NodeType} from './treeUtils';
+import {addInlineImagePreview} from '../inputElements/inlineImage';
+import type {NodeType, TreeNode} from './treeUtils';
 
 function addStyleToBlock(targetElement: HTMLElement, type: NodeType, markdownStyle: PartialMarkdownStyle) {
   const node = targetElement;
@@ -54,6 +57,7 @@ function addStyleToBlock(targetElement: HTMLElement, type: NodeType, markdownSty
         display: 'inline-block',
         maxWidth: '100%',
         boxSizing: 'border-box',
+        overflowWrap: 'anywhere',
       });
       break;
     case 'h1':
@@ -62,10 +66,47 @@ function addStyleToBlock(targetElement: HTMLElement, type: NodeType, markdownSty
         fontWeight: 'bold',
       });
       break;
+    case 'block':
+      Object.assign(node.style, {
+        display: 'block',
+        margin: '0',
+        padding: '0',
+        position: 'relative',
+      });
+      break;
+    default:
+      break;
+  }
+}
+
+const BLOCK_MARKDOWN_TYPES = ['inline-image'];
+const FULL_LINE_MARKDOWN_TYPES = ['blockquote', 'h1'];
+
+function isBlockMarkdownType(type: NodeType) {
+  return BLOCK_MARKDOWN_TYPES.includes(type);
+}
+
+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;
+}
+
+function extendBlockStructure(
+  currentInput: MarkdownTextInputElement,
+  targetNode: TreeNode,
+  currentRange: MarkdownRange,
+  ranges: MarkdownRange[],
+  text: string,
+  markdownStyle: PartialMarkdownStyle,
+) {
+  switch (currentRange.type) {
+    case 'inline-image':
+      return addInlineImagePreview(currentInput, targetNode, text, ranges, markdownStyle);
     default:
       break;
   }
+
+  return targetNode;
 }
 
-// eslint-disable-next-line import/prefer-default-export
-export {addStyleToBlock};
+export {addStyleToBlock, extendBlockStructure, isBlockMarkdownType, getFirstBlockMarkdownRange};

package/src/web/utils/inputUtils.ts

@@ -37,7 +37,7 @@ function normalizeValue(value: string) {
 }
 
 // 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 {
+function parseInnerHTMLToText(target: MarkdownTextInputElement, inputType: string, cursorPosition: number): 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;
@@ -69,7 +69,9 @@ function parseInnerHTMLToText(target: MarkdownTextInputElement): string {
       if (node.nodeType === Node.TEXT_NODE) {
         shouldAddNewline = false;
       } else {
-        if (shouldAddNewline) {
+        const firstChild = node.firstChild as HTMLElement;
+        const containsEmptyBlockElement = firstChild?.getAttribute?.('data-type') === 'block' && firstChild.textContent === '';
+        if (shouldAddNewline && !containsEmptyBlockElement) {
           text += '\n';
           shouldAddNewline = false;
         }
@@ -99,8 +101,13 @@ function parseInnerHTMLToText(target: MarkdownTextInputElement): string {
       }
     }
   }
+  text = text.replaceAll('\r\n', '\n');
 
-  return text.replaceAll('\r\n', '\n');
+  // Force letter removal if the input value haven't changed but input type is 'delete'
+  if (text === target.value && inputType.includes('delete')) {
+    text = text.slice(0, cursorPosition - 1) + text.slice(cursorPosition);
+  }
+  return text;
 }
 
 export {isEventComposing, getPlaceholderValue, getElementHeight, parseInnerHTMLToText, normalizeValue};

package/src/web/utils/parserUtils.ts

@@ -3,8 +3,9 @@ import {addNodeToTree, updateTreeElementRefs} from './treeUtils';
 import type {NodeType, TreeNode} from './treeUtils';
 import type {PartialMarkdownStyle} from '../../styleUtils';
 import {getCurrentCursorPosition, moveCursorToEnd, setCursorPosition} from './cursorUtils';
-import {addStyleToBlock} from './blockUtils';
+import {addStyleToBlock, extendBlockStructure, getFirstBlockMarkdownRange, isBlockMarkdownType} from './blockUtils';
 import type {MarkdownRange} from '../../commonTypes';
+import {getAnimationCurrentTimes, updateAnimationsTime} from './animationUtils';
 
 type Paragraph = {
   text: string;
@@ -135,8 +136,22 @@ function addParagraph(node: TreeNode, text: string | null = null, length: number
   return pNode;
 }
 
+function addBlockWrapper(targetNode: TreeNode, length: number, markdownStyle: PartialMarkdownStyle) {
+  const span = document.createElement('span') as HTMLMarkdownElement;
+  span.setAttribute('data-type', 'block');
+  addStyleToBlock(span, 'block', markdownStyle);
+  return appendNode(span, targetNode, 'block', length);
+}
+
 /** Builds HTML DOM structure based on passed text and markdown ranges */
-function parseRangesToHTMLNodes(text: string, ranges: MarkdownRange[], markdownStyle: PartialMarkdownStyle = {}, disableInlineStyles = false) {
+function parseRangesToHTMLNodes(
+  text: string,
+  ranges: MarkdownRange[],
+  isMultiline = true,
+  markdownStyle: PartialMarkdownStyle = {},
+  disableInlineStyles = false,
+  currentInput: MarkdownTextInputElement | null = null,
+) {
   const rootElement: HTMLMarkdownElement = document.createElement('span') as HTMLMarkdownElement;
   const textLength = text.length;
   const rootNode: TreeNode = {
@@ -180,6 +195,8 @@ function parseRangesToHTMLNodes(text: string, ranges: MarkdownRange[], markdownS
       addTextToElement(currentParentNode, line.text);
     }
 
+    let wasBlockGenerated = false;
+
     lastRangeEndIndex = line.start;
     const lineMarkdownRanges = line.markdownRanges;
     // go through all markdown ranges in the line
@@ -192,6 +209,12 @@ function parseRangesToHTMLNodes(text: string, ranges: MarkdownRange[], markdownS
       const endOfCurrentRange = range.start + range.length;
       const nextRangeStartIndex = lineMarkdownRanges.length > 0 && !!lineMarkdownRanges[0] ? lineMarkdownRanges[0].start || 0 : textLength;
 
+      // wrap all elements before the first block type markdown range with a span element
+      const blockRange = getFirstBlockMarkdownRange([range, ...lineMarkdownRanges]);
+      if (!wasBlockGenerated && blockRange) {
+        currentParentNode = addBlockWrapper(currentParentNode, line.text.substring(lastRangeEndIndex - line.start, blockRange.start + blockRange.length - line.start).length, markdownStyle);
+        wasBlockGenerated = true;
+      }
       // add text before the markdown range
       const textBeforeRange = line.text.substring(lastRangeEndIndex - line.start, range.start - line.start);
       if (textBeforeRange) {
@@ -201,12 +224,17 @@ function parseRangesToHTMLNodes(text: string, ranges: MarkdownRange[], markdownS
       // 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 (isMultiline && !disableInlineStyles && currentInput) {
+        currentParentNode = extendBlockStructure(currentInput, currentParentNode, range, lineMarkdownRanges, text, markdownStyle);
+      }
+
       if (lineMarkdownRanges.length > 0 && nextRangeStartIndex < endOfCurrentRange && range.type !== 'syntax') {
         // tag nesting
         currentParentNode = spanNode;
@@ -226,6 +254,9 @@ function parseRangesToHTMLNodes(text: string, ranges: MarkdownRange[], markdownS
           if (currentParentNode.parentNode.type !== 'root') {
             currentParentNode.parentNode.element.value = currentParentNode.element.value || '';
           }
+          if (isBlockMarkdownType(currentParentNode.type)) {
+            wasBlockGenerated = false;
+          }
           currentParentNode = currentParentNode.parentNode || rootNode;
         }
       }
@@ -251,6 +282,7 @@ function updateInputStructure(
   target: MarkdownTextInputElement,
   text: string,
   cursorPositionIndex: number | null,
+  isMultiline = true,
   markdownStyle: PartialMarkdownStyle = {},
   alwaysMoveCursorToTheEnd = false,
   shouldForceDOMUpdate = false,
@@ -272,12 +304,14 @@ function updateInputStructure(
 
   // 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);
+    const {dom, tree} = parseRangesToHTMLNodes(text, markdownRanges, isMultiline, markdownStyle, false, targetElement);
 
     if (shouldForceDOMUpdate || targetElement.innerHTML !== dom.innerHTML) {
+      const animationTimes = getAnimationCurrentTimes(targetElement);
       targetElement.innerHTML = '';
       targetElement.innerText = '';
       targetElement.innerHTML = dom.innerHTML;
+      updateAnimationsTime(targetElement, animationTimes);
     }
 
     updateTreeElementRefs(tree, targetElement);

package/src/web/utils/treeUtils.ts

@@ -1,7 +1,7 @@
 import type {HTMLMarkdownElement} from '../../MarkdownTextInput.web';
 import type {MarkdownRange, MarkdownType} from '../../commonTypes';
 
-type NodeType = MarkdownType | 'line' | 'text' | 'br' | 'root';
+type NodeType = MarkdownType | 'line' | 'text' | 'br' | 'block' | 'root';
 
 type TreeNode = Omit<MarkdownRange, 'type'> & {
   element: HTMLMarkdownElement;
@@ -21,7 +21,7 @@ function addNodeToTree(element: HTMLMarkdownElement, parentTreeNode: TreeNode, t
     const lastParentChild = parentTreeNode.childNodes[parentChildrenCount - 1];
     if (lastParentChild) {
       startIndex = lastParentChild.start + lastParentChild.length;
-      startIndex += lastParentChild.isGeneratingNewline || element.style.display === 'block' ? 1 : 0;
+      startIndex += lastParentChild.isGeneratingNewline || (type !== 'block' && element.style.display === 'block') ? 1 : 0;
     }
   }