@expensify/react-native-live-markdown 0.1.298 → 0.1.300

package/lib/typescript/src/web/utils/inputUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inputUtils.d.ts","sourceRoot":"","sources":["../../../../../src/web/utils/inputUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC;AACzC,OAAO,KAAK,EAAC,mBAAmB,EAAE,wBAAwB,EAAC,MAAM,6BAA6B,CAAC;AAM/F,iBAAS,gBAAgB,CAAC,WAAW,EAAE,UAAU,CAAC,aAAa,GAAG,mBAAmB,WAEpF;AAED,iBAAS,mBAAmB,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS,UAK3D;AAED,iBAAS,gBAAgB,CAAC,IAAI,EAAE,cAAc,EAAE,MAAM,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,GAAG,SAAS,UAcvG;AAED,iBAAS,cAAc,CAAC,KAAK,EAAE,MAAM,UAEpC;AAGD,iBAAS,oBAAoB,CAAC,MAAM,EAAE,wBAAwB,EAAE,cAAc,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAwElH;AAED,OAAO,EAAC,gBAAgB,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,cAAc,EAAC,CAAC"}
+{"version":3,"file":"inputUtils.d.ts","sourceRoot":"","sources":["../../../../../src/web/utils/inputUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC;AACzC,OAAO,KAAK,EAAC,mBAAmB,EAAE,wBAAwB,EAAC,MAAM,6BAA6B,CAAC;AAQ/F,iBAAS,gBAAgB,CAAC,WAAW,EAAE,UAAU,CAAC,aAAa,GAAG,mBAAmB,WAEpF;AAED,iBAAS,mBAAmB,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS,UAK3D;AAED,iBAAS,gBAAgB,CAAC,IAAI,EAAE,cAAc,EAAE,MAAM,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,GAAG,SAAS,UAcvG;AAED,iBAAS,cAAc,CAAC,KAAK,EAAE,MAAM,UAEpC;AAyBD;;GAEG;AACH,iBAAS,oBAAoB,CAAC,MAAM,EAAE,wBAAwB,EAAE,cAAc,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,EAAE,WAAW,UAAO,GAAG,MAAM,CA8FtI;AAED,OAAO,EAAC,gBAAgB,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,cAAc,EAAC,CAAC"}

package/lib/typescript/src/web/utils/parserUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"parserUtils.d.ts","sourceRoot":"","sources":["../../../../../src/web/utils/parserUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,mBAAmB,EAAE,wBAAwB,EAAC,MAAM,6BAA6B,CAAC;AAE/F,OAAO,KAAK,EAAW,QAAQ,EAAC,MAAM,aAAa,CAAC;AACpD,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,kBAAkB,CAAC;AAG3D,OAAO,KAAK,EAAC,sBAAsB,EAAE,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAI7E,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,aAAa,EAAE,CAAC;CACjC,CAAC;AAoEF;;;GAGG;AACH,iBAAS,cAAc,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,eAyBlE;AA0ED,yEAAyE;AACzE,iBAAS,sBAAsB,CAC7B,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,aAAa,EAAE,EACvB,WAAW,UAAO,EAClB,aAAa,GAAE,oBAAyB,EACxC,mBAAmB,UAAQ,EAC3B,YAAY,GAAE,wBAAwB,GAAG,IAAW,EACpD,iBAAiB,GAAE,sBAA2B;;;EA4G/C;AAcD,iBAAS,oBAAoB,CAC3B,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,aAAa,EAAE,EAClD,MAAM,EAAE,wBAAwB,EAChC,IAAI,EAAE,MAAM,EACZ,mBAAmB,EAAE,MAAM,GAAG,IAAI,EAClC,WAAW,UAAO,EAClB,aAAa,GAAE,oBAAyB,EACxC,wBAAwB,UAAQ,EAChC,oBAAoB,UAAQ,EAC5B,oBAAoB,UAAQ,EAC5B,iBAAiB,GAAE,sBAA2B;;;EAsC/C;AAED,OAAO,EAAC,oBAAoB,EAAE,sBAAsB,EAAE,cAAc,EAAC,CAAC;AACtE,YAAY,EAAC,SAAS,EAAC,CAAC"}
+{"version":3,"file":"parserUtils.d.ts","sourceRoot":"","sources":["../../../../../src/web/utils/parserUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,mBAAmB,EAAE,wBAAwB,EAAC,MAAM,6BAA6B,CAAC;AAE/F,OAAO,KAAK,EAAW,QAAQ,EAAC,MAAM,aAAa,CAAC;AACpD,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,kBAAkB,CAAC;AAG3D,OAAO,KAAK,EAAC,sBAAsB,EAAE,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAI7E,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,aAAa,EAAE,CAAC;CACjC,CAAC;AAoEF;;;GAGG;AACH,iBAAS,cAAc,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,eAyBlE;AA2ED,yEAAyE;AACzE,iBAAS,sBAAsB,CAC7B,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,aAAa,EAAE,EACvB,WAAW,UAAO,EAClB,aAAa,GAAE,oBAAyB,EACxC,mBAAmB,UAAQ,EAC3B,YAAY,GAAE,wBAAwB,GAAG,IAAW,EACpD,iBAAiB,GAAE,sBAA2B;;;EA4G/C;AAcD,iBAAS,oBAAoB,CAC3B,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,aAAa,EAAE,EAClD,MAAM,EAAE,wBAAwB,EAChC,IAAI,EAAE,MAAM,EACZ,mBAAmB,EAAE,MAAM,GAAG,IAAI,EAClC,WAAW,UAAO,EAClB,aAAa,GAAE,oBAAyB,EACxC,wBAAwB,UAAQ,EAChC,oBAAoB,UAAQ,EAC5B,oBAAoB,UAAQ,EAC5B,iBAAiB,GAAE,sBAA2B;;;EAsC/C;AAED,OAAO,EAAC,oBAAoB,EAAE,sBAAsB,EAAE,cAAc,EAAC,CAAC;AACtE,YAAY,EAAC,SAAS,EAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expensify/react-native-live-markdown",
-  "version": "0.1.298",
+  "version": "0.1.300",
   "description": "Drop-in replacement for React Native's TextInput component with Markdown formatting.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -87,7 +87,7 @@
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-tsdoc": "^0.2.17",
-    "expensify-common": "2.0.134",
+    "expensify-common": "2.0.148",
     "jest": "^29.6.3",
     "jest-environment-jsdom": "^29.7.0",
     "nodemon": "^3.1.3",
@@ -104,7 +104,7 @@
     "typescript": "~5.3.3"
   },
   "peerDependencies": {
-    "expensify-common": ">=2.0.115",
+    "expensify-common": ">=2.0.148",
     "react": "*",
     "react-native": "*",
     "react-native-reanimated": ">=3.17.0"

package/src/MarkdownTextInput.web.tsx

@@ -355,7 +355,7 @@ const MarkdownTextInput = React.forwardRef<MarkdownTextInput, MarkdownTextInputP
         updateTextColor(divRef.current, e.target.textContent ?? '');
         const previousText = divRef.current.value;
         let parsedText = normalizeValue(
-          inputType === 'pasteText' ? pasteContent.current || '' : parseInnerHTMLToText(e.target as MarkdownTextInputElement, contentSelection.current.start, inputType),
+          inputType === 'pasteText' ? pasteContent.current || '' : parseInnerHTMLToText(e.target as MarkdownTextInputElement, contentSelection.current.start, inputType, multiline),
         );
 
         if (pasteContent.current) {
@@ -451,8 +451,9 @@ const MarkdownTextInput = React.forwardRef<MarkdownTextInput, MarkdownTextInputP
         handleContentSizeChange();
       },
       [
-        parser,
         updateTextColor,
+        multiline,
+        maxLength,
         updateSelection,
         onChange,
         onChangeText,
@@ -461,9 +462,9 @@ const MarkdownTextInput = React.forwardRef<MarkdownTextInput, MarkdownTextInputP
         redo,
         handleFormatSelection,
         parseText,
+        parser,
         processedMarkdownStyle,
         setEventProps,
-        maxLength,
       ],
     );
 

package/src/MarkdownTextInputDecoratorViewNativeComponent.ts

@@ -3,6 +3,20 @@ import type {ColorValue, ViewProps} from 'react-native';
 import type {Float, Int32} from 'react-native/Libraries/Types/CodegenTypes';
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 
+interface CodeBlockStyle {
+  fontFamily: string;
+  fontSize: Float;
+  color: ColorValue;
+  backgroundColor: ColorValue;
+  borderColor?: ColorValue;
+  borderWidth?: Float;
+  borderRadius?: Float;
+  borderStyle?: string;
+  padding?: Float;
+  paddingVertical?: Float;
+  paddingHorizontal?: Float;
+}
+
 interface MarkdownStyle {
   syntax: {
     color: ColorValue;
@@ -23,18 +37,10 @@ interface MarkdownStyle {
     marginLeft: Float;
     paddingLeft: Float;
   };
-  code: {
-    fontFamily: string;
-    fontSize: Float;
-    color: ColorValue;
-    backgroundColor: ColorValue;
-  };
-  pre: {
-    fontFamily: string;
-    fontSize: Float;
-    color: ColorValue;
-    backgroundColor: ColorValue;
+  code: CodeBlockStyle & {
+    h1NestedFontSize?: Float;
   };
+  pre: CodeBlockStyle;
   mentionHere: {
     color: ColorValue;
     backgroundColor: ColorValue;

package/src/commonTypes.ts

@@ -13,7 +13,8 @@ type MarkdownType =
   | 'blockquote'
   | 'h1'
   | 'syntax'
-  | 'inline-image';
+  | 'inline-image'
+  | 'codeblock';
 
 interface MarkdownRange {
   type: MarkdownType;

package/src/parseExpensiMark.ts

@@ -174,9 +174,11 @@ function parseTreeToTextAndRanges(tree: StackItem): [string, MarkdownRange[]] {
       } else if (node.tag === '<br />') {
         text += '\n';
       } else if (node.tag.startsWith('<pre')) {
-        appendSyntax('```');
-        const content = node.children.join('');
-        addChildrenWithStyle(content, 'pre');
+        const [_, lb, content] = node.children.join('').match(/^(\r?\n)([\s\S]*)$/) ?? [];
+        // Adding opening ("```${lb}") and closing ("```") codeblock syntax length, equal to 7, to the content length
+        ranges.push({type: 'codeblock', start: text.length, length: (content?.length ?? 0) + 7});
+        appendSyntax(`\`\`\`${lb}`);
+        addChildrenWithStyle(`${content}`, 'pre');
         appendSyntax('```');
       } else if (node.tag.startsWith('<a href="')) {
         const rawHref = node.tag.match(/href="([^"]*)"/)![1]!; // always present

package/src/styleUtils.ts

@@ -42,12 +42,22 @@ function makeDefaultMarkdownStyle(): MarkdownStyle {
       fontSize: 20,
       color: 'black',
       backgroundColor: 'lightgray',
+      borderColor: 'gray',
+      borderWidth: 1,
+      borderRadius: 4,
+      borderStyle: 'solid',
+      padding: 0,
     },
     pre: {
       fontFamily: FONT_FAMILY_MONOSPACE,
       fontSize: 20,
       color: 'black',
       backgroundColor: 'lightgray',
+      borderColor: 'gray',
+      borderWidth: 1,
+      borderRadius: 4,
+      borderStyle: 'solid',
+      padding: 2,
     },
     mentionHere: {
       color: 'green',
@@ -96,7 +106,10 @@ function mergeMarkdownStyleWithDefault(input: PartialMarkdownStyle | undefined):
   return output;
 }
 
-function parseStringWithUnitToNumber(value: string | null): number {
+function parseStringWithUnitToNumber(value: string | number | null): number {
+  if (typeof value === 'number') {
+    return value;
+  }
   return value ? parseInt(value.replace('px', ''), 10) : 0;
 }
 

package/src/web/MarkdownTextInput.css

@@ -30,11 +30,34 @@
   padding-right: 1px !important;
 }
 
-.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);
+.react-native-live-markdown-input-multiline *[data-type='pre'] {
+  line-height: 1.3;
+  display: block;
+  width: fit-content;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.react-native-live-markdown-input-multiline *[data-type='codeblock'] {
+  position: relative;
+  width: fit-content;
+  max-width: 100%;
+  box-sizing: border-box;
+  z-index: 2;
+  display: block;
+}
+
+.react-native-live-markdown-input-singleline *[data-type='code'] > *[data-type='emoji'],
+.react-native-live-markdown-input-multiline *[data-type='code'] > *[data-type='emoji'] {
+  font-size: inherit !important;
+  line-height: inherit !important;
+  vertical-align: unset !important;
+}
+
+.react-native-live-markdown-input-multiline *[data-type='line'] *[data-type='syntax']:has(+ *[data-type='pre']),
+.react-native-live-markdown-input-multiline *[data-type='line'] *[data-type='pre'] + *[data-type='syntax'] {
+  display: block;
+  line-height: 1.3;
 }
 
 @keyframes react-native-live-markdown-spin {

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): 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;
     }
@@ -67,12 +85,12 @@ function parseInnerHTMLToText(target: MarkdownTextInputElement, cursorPosition:
     if (isTopComponent) {
       // When inputType is undefined, the first part of the replaced text is added as a text node.
       // Because of it, we need to prevent adding new lines in this case
-      if (!inputType && node.nodeType === Node.TEXT_NODE) {
+      if (!isMultiline || (!inputType && node.nodeType === Node.TEXT_NODE)) {
         shouldAddNewline = false;
       } 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,13 +99,44 @@ 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 (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
+        // It prevents adding extra newlines when entering text - and now only for multiline inputs
         text += '\n';
       }
     } else {

package/src/web/utils/parserUtils.ts

@@ -152,7 +152,8 @@ function addTextToElement(node: TreeNode, text: string, isMultiline = true) {
       }
     }
 
-    if (index < lines.length - 1 || (index === 0 && line === '')) {
+    // Only add BR elements for multiline inputs or when there are actual line breaks
+    if (isMultiline && (index < lines.length - 1 || (index === 0 && line === ''))) {
       addBrElement(node);
     }
   });
@@ -228,7 +229,7 @@ function parseRangesToHTMLNodes(
     }
 
     if (line.markdownRanges.length === 0) {
-      addTextToElement(currentParentNode, line.text);
+      addTextToElement(currentParentNode, line.text, isMultiline);
     }
 
     let wasBlockGenerated = false;
@@ -254,7 +255,7 @@ function parseRangesToHTMLNodes(
       // add text before the markdown range
       const textBeforeRange = line.text.substring(lastRangeEndIndex - line.start, range.start - line.start);
       if (textBeforeRange) {
-        addTextToElement(currentParentNode, textBeforeRange);
+        addTextToElement(currentParentNode, textBeforeRange, isMultiline);
       }
 
       // create markdown span element
@@ -284,7 +285,7 @@ function parseRangesToHTMLNodes(
         while (currentParentNode.parentNode !== null && nextRangeStartIndex >= currentParentNode.start + currentParentNode.length) {
           const textAfterRange = line.text.substring(lastRangeEndIndex - line.start, currentParentNode.start - line.start + currentParentNode.length);
           if (textAfterRange) {
-            addTextToElement(currentParentNode, textAfterRange);
+            addTextToElement(currentParentNode, textAfterRange, isMultiline);
           }
           lastRangeEndIndex = currentParentNode.start + currentParentNode.length;
           if (currentParentNode.parentNode.type !== 'root') {