fix: insufficient line-height in large code blocks

src/MarkdownTextInput.web.tsx

@@ -345,6 +345,14 @@ const MarkdownTextInput = React.forwardRef<MarkdownTextInput, MarkdownTextInputP
           if (onChangeText) {
             onChangeText(parsedText);
           }
+          if (processedMarkdownStyle) {
+            const preBlocks = [...divRef.current.querySelectorAll('*[data-type="pre"]')];
+            while (preBlocks.length > 0) {
+              const preBlock = preBlocks.pop() as HTMLElement;
+              preBlock.setAttribute('data-content', parseInnerHTMLToText(preBlock, 0));
+            }
+            handleCustomStyles(divRef.current, processedMarkdownStyle);
+          }
           return;
         }
         let newInputUpdate: ParseTextResult;

src/web/MarkdownTextInput.css

@@ -41,8 +41,13 @@
   box-sizing: border-box;
 }
 
+*[data-type='pre'] {
+  line-height: 1.3;
+}
+
 *[data-type='line'] *[data-type='syntax']:has(+ *[data-type='pre']) {
   display: grid;
+  line-height: 1.3;
 }
 
 *[data-type='line'] *[data-type='syntax']:has(+ *[data-type='pre']) > *:last-child {
@@ -51,6 +56,7 @@
 
 *[data-type='line'] *[data-type='pre'] + *[data-type='syntax'] {
   display: grid;
+  line-height: 1.3;
 }
 
 @keyframes react-native-live-markdown-spin {

src/web/utils/blockUtils.ts

@@ -3,6 +3,7 @@ import type {MarkdownTextInputElement} from '../../MarkdownTextInput.web';
 import {parseStringWithUnitToNumber} from '../../styleUtils';
 import type {PartialMarkdownStyle} from '../../styleUtils';
 import {addInlineImagePreview} from '../inputElements/inlineImage';
+import BrowserUtils from './browserUtils';
 import type {MarkdownRange} from './parserUtils';
 import type {NodeType, TreeNode} from './treeUtils';
 
@@ -61,6 +62,7 @@ function addStyleToBlock(targetElement: HTMLElement, type: NodeType, markdownSty
       });
       Object.assign((node.parentNode as HTMLElement).style, {
         padding: `${preVerticalPadding}px ${preHorizontalPadding}px`,
+        'line-height': BrowserUtils.isMobile ? 1.3 : 'inherit',
         position: 'relative',
         width: 'fit-content',
         maxWidth: '100%',

src/web/utils/inputUtils.ts

@@ -1,5 +1,5 @@
-import type { CSSProperties } from 'react';
-import type { HTMLMarkdownElement, MarkdownTextInputElement } from '../../MarkdownTextInput.web';
+import type {CSSProperties} from 'react';
+import type {MarkdownTextInputElement} from '../../MarkdownTextInput.web';
 
 const ZERO_WIDTH_SPACE = '\u200B';
 
@@ -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, cursorPosition: number, inputType?: string): string {
+function parseInnerHTMLToText(target: MarkdownTextInputElement | HTMLElement, cursorPosition: number, inputType?: string): 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;
@@ -104,10 +104,10 @@ function parseInnerHTMLToText(target: MarkdownTextInputElement, cursorPosition:
   text = 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')) {
+  if ('value' in target && text === target?.value && inputType?.includes('delete')) {
     text = text.slice(0, cursorPosition - 1) + text.slice(cursorPosition);
   }
   return text;
 }
 
-export { isEventComposing, getPlaceholderValue, getElementHeight, parseInnerHTMLToText, normalizeValue };
+export {isEventComposing, getPlaceholderValue, getElementHeight, parseInnerHTMLToText, normalizeValue};

src/web/utils/treeUtils.ts

@@ -77,7 +77,7 @@ function updateTreeElementRefs(treeRoot: TreeNode, element: HTMLMarkdownElement)
     }
 
     if (currentElement?.dataset.type === 'pre') {
-      currentElement.setAttribute('data-content', parseInnerHTMLToText(currentElement, '', 0));
+      currentElement.setAttribute('data-content', parseInnerHTMLToText(currentElement as HTMLElement, 0));
     }
   }
 

src/web/utils/webStyleUtils.ts

@@ -164,7 +164,7 @@ function generateCodeBlocksRules(target: MarkdownTextInputElement, styleTag: HTM
     rules.push({
       selector: `.${target.uniqueId} *:nth-child(${i + 1} of [data-type='line']:has(> *[data-type='pre'])) > *[data-type='pre']::before`,
       properties: {
-        'min-width': `min(calc(100% + 1.5px), ${preBlockWidth + horizontalPadding * 2 + 2}px)`,
+        'min-width': `min(calc(100% + 2.5px), ${preBlockWidth + horizontalPadding * 2 + 2}px)`,
         'max-width': `min(${preBlockWidth + horizontalPadding * 2 + 2}px, ${contentWidth}px)`,
       },
     });