Fix cursor position problems on mWeb (#700)

Author: Skalakid

src/__tests__/normalizeLines.test.tsx

@@ -0,0 +1,165 @@
+import type {MarkdownRange} from '../commonTypes';
+import {normalizeLines} from '../web/utils/parserUtils';
+import type {Paragraph} from '../web/utils/parserUtils';
+
+describe('normalizeLines', () => {
+  it('should handle single line markdown with no multi-line ranges', () => {
+    const lines: Paragraph[] = [
+      {
+        text: '*Hello, world!*',
+        start: 0,
+        length: 13,
+        markdownRanges: [],
+      },
+    ];
+
+    const ranges: MarkdownRange[] = [
+      {
+        type: 'syntax',
+        start: 0,
+        length: 1,
+      },
+      {
+        type: 'bold',
+        start: 1,
+        length: 11,
+      },
+      {
+        type: 'syntax',
+        start: 12,
+        length: 1,
+      },
+    ];
+
+    const result = normalizeLines(lines, ranges);
+    const paragraph = result[0] as Paragraph;
+    expect(paragraph.markdownRanges).toEqual([
+      {length: 1, start: 0, type: 'syntax'},
+      {length: 11, start: 1, type: 'bold'},
+      {length: 1, start: 12, type: 'syntax'},
+    ]);
+    expect(paragraph.text).toEqual('*Hello, world!*');
+  });
+
+  it('should handle multiline line markdown with no multi-line ranges', () => {
+    const lines: Paragraph[] = [
+      {
+        text: '*Hello',
+        start: 0,
+        length: 6,
+        markdownRanges: [],
+      },
+      {
+        text: 'world!*',
+        start: 7,
+        length: 7,
+        markdownRanges: [],
+      },
+    ];
+
+    const ranges: MarkdownRange[] = [
+      {
+        type: 'syntax',
+        start: 0,
+        length: 1,
+      },
+      {
+        type: 'bold',
+        start: 0,
+        length: 13,
+      },
+      {
+        type: 'syntax',
+        start: 13,
+        length: 1,
+      },
+    ];
+
+    const result = normalizeLines(lines, ranges);
+    expect(result.length).toBe(2);
+    const firstParagraph = result[0] as Paragraph;
+    const secondParagraph = result[1] as Paragraph;
+    expect(firstParagraph.text).toEqual('*Hello');
+    expect(secondParagraph.text).toEqual('world!*');
+    expect(firstParagraph.markdownRanges).toContainEqual({type: 'bold', start: 0, length: 6});
+    expect(secondParagraph.markdownRanges).toContainEqual({type: 'bold', start: 7, length: 6});
+  });
+
+  it('should merge lines when handling multi-line markdown ranges', () => {
+    const lines: Paragraph[] = [
+      {
+        text: 'Here is some code:',
+        start: 0,
+        length: 18,
+        markdownRanges: [],
+      },
+      {
+        text: '```',
+        start: 19,
+        length: 3,
+        markdownRanges: [],
+      },
+      {
+        text: "const text = 'Hello, World!';",
+        start: 23,
+        length: 29,
+        markdownRanges: [],
+      },
+      {
+        text: 'console.log(text);',
+        start: 53,
+        length: 18,
+        markdownRanges: [],
+      },
+      {
+        text: '```',
+        start: 72,
+        length: 3,
+        markdownRanges: [],
+      },
+    ];
+
+    const ranges: MarkdownRange[] = [
+      {
+        type: 'syntax',
+        start: 19,
+        length: 3,
+      },
+      {
+        type: 'pre',
+        start: 22,
+        length: 50, // This range spans across multiple lines
+      },
+      {
+        type: 'syntax',
+        start: 72,
+        length: 3,
+      },
+    ];
+
+    const result = normalizeLines(lines, ranges);
+
+    expect(result.length).toBe(2);
+    const paragraph = result[1] as Paragraph;
+    expect(paragraph.text).toEqual("```\nconst text = 'Hello, World!';\nconsole.log(text);\n```");
+    expect(paragraph.markdownRanges.length).toEqual(3);
+    expect((paragraph.markdownRanges[1] as MarkdownRange).type).toEqual('pre');
+  });
+
+  it('should correctly handle multiple adjacent ranges', () => {
+    const lines: Paragraph[] = [
+      {
+        text: 'Link: www.example.com',
+        start: 0,
+        length: 21,
+        markdownRanges: [],
+      },
+    ];
+
+    const ranges: MarkdownRange[] = [{type: 'link', start: 6, length: 15}];
+
+    const result = normalizeLines(lines, ranges);
+    const paragraph = result[0] as Paragraph;
+    expect(paragraph.markdownRanges).toContainEqual({type: 'link', start: 6, length: 15});
+  });
+});

src/web/utils/blockUtils.ts

@@ -96,11 +96,16 @@ function addStyleToBlock(targetElement: HTMLElement, type: NodeType, markdownSty
 
 const BLOCK_MARKDOWN_TYPES = ['inline-image'];
 const FULL_LINE_MARKDOWN_TYPES = ['blockquote'];
+const MULTILINE_MARKDOWN_TYPES = ['pre'];
 
 function isBlockMarkdownType(type: NodeType) {
   return BLOCK_MARKDOWN_TYPES.includes(type);
 }
 
+function isMultilineMarkdownType(type: NodeType) {
+  return MULTILINE_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;
@@ -125,4 +130,4 @@ function extendBlockStructure(
   return targetNode;
 }
 
-export {addStyleToBlock, extendBlockStructure, isBlockMarkdownType, getFirstBlockMarkdownRange};
+export {addStyleToBlock, extendBlockStructure, isBlockMarkdownType, isMultilineMarkdownType, getFirstBlockMarkdownRange};

src/web/utils/parserUtils.ts

@@ -3,7 +3,7 @@ import {addNodeToTree, createRootTreeNode, updateTreeElementRefs} from './treeUt
 import type {NodeType, TreeNode} from './treeUtils';
 import type {PartialMarkdownStyle} from '../../styleUtils';
 import {getCurrentCursorPosition, moveCursorToEnd, setCursorPosition} from './cursorUtils';
-import {addStyleToBlock, extendBlockStructure, getFirstBlockMarkdownRange, isBlockMarkdownType} from './blockUtils';
+import {addStyleToBlock, extendBlockStructure, getFirstBlockMarkdownRange, isBlockMarkdownType, isMultilineMarkdownType} from './blockUtils';
 import type {InlineImagesInputProps, MarkdownRange} from '../../commonTypes';
 import {getAnimationCurrentTimes, updateAnimationsTime} from './animationUtils';
 import {sortRanges, ungroupRanges} from '../../rangeUtils';
@@ -31,9 +31,62 @@ function splitTextIntoLines(text: string): Paragraph[] {
   return lines;
 }
 
-/** Merges lines that contain multiline markdown tags into one line */
-function mergeLinesWithMultilineTags(lines: Paragraph[], ranges: MarkdownRange[]) {
-  let mergedLines = [...lines];
+/**
+ * Merges lines with multiline markdown tags (like `pre`) into a single line.
+ * The main line will contain the text and all markdown ranges from the other lines.
+ */
+function mergeLinesWithMultilineTags(lines: Paragraph[], currentLine: Paragraph, range: MarkdownRange, correspondingLineIndexes: number[]) {
+  const mainLine = currentLine;
+  currentLine.markdownRanges.push(range);
+
+  correspondingLineIndexes.forEach((lineIndex) => {
+    const otherLine = lines[lineIndex] as Paragraph;
+    mainLine.text += `\n${otherLine.text}`;
+    mainLine.length += otherLine.length + 1;
+    mainLine.markdownRanges.push(...otherLine.markdownRanges);
+  });
+
+  if (correspondingLineIndexes.length > 0 && correspondingLineIndexes[0] !== undefined) {
+    lines.splice(correspondingLineIndexes[0], correspondingLineIndexes.length);
+  }
+}
+
+/**
+ * Splits a markdown range that spans multiple lines into separate lines.
+ */
+function splitRangeIntoSeparateLines(lines: Paragraph[], currentLine: Paragraph, range: MarkdownRange, correspondingLineIndexes: number[]) {
+  const mainLineRangeLength = currentLine.start + currentLine.length - range.start;
+  currentLine.markdownRanges.push({
+    ...range,
+    length: mainLineRangeLength,
+  });
+
+  let rangeLength = range.length - mainLineRangeLength;
+  correspondingLineIndexes.forEach((lineIndex) => {
+    const otherLine = lines[lineIndex] as Paragraph;
+    let currentLength = otherLine.length;
+    if (rangeLength <= currentLength) {
+      currentLength = rangeLength - 1;
+    }
+
+    if (currentLength > 0) {
+      lines[lineIndex]?.markdownRanges.push({
+        ...range,
+        start: otherLine.start,
+        length: currentLength,
+      });
+    }
+
+    rangeLength -= currentLength;
+  });
+}
+
+/**
+ * For singleline markdown types, the function splits markdown ranges that spread beyond the line length into separate lines.
+ * For multiline markdown types (like `pre`), it merges them and corresponding text into one line.
+ */
+function normalizeLines(lines: Paragraph[], ranges: MarkdownRange[]) {
+  const mergedLines = [...lines];
   const lineIndexes = mergedLines.map((_line, index) => index);
 
   ranges.forEach((range) => {
@@ -44,19 +97,14 @@ function mergeLinesWithMultilineTags(lines: Paragraph[], ranges: MarkdownRange[]
     if (correspondingLineIndexes.length > 0) {
       const mainLineIndex = correspondingLineIndexes[0] as number;
       const mainLine = mergedLines[mainLineIndex] as Paragraph;
-
-      mainLine.markdownRanges.push(range);
-
       const otherLineIndexes = correspondingLineIndexes.slice(1);
-      otherLineIndexes.forEach((lineIndex) => {
-        const otherLine = mergedLines[lineIndex] as Paragraph;
 
-        mainLine.text += `\n${otherLine.text}`;
-        mainLine.length += otherLine.length + 1;
-        mainLine.markdownRanges.push(...otherLine.markdownRanges);
-      });
-      if (otherLineIndexes.length > 0) {
-        mergedLines = mergedLines.filter((_line, index) => !otherLineIndexes.includes(index));
+      if (isMultilineMarkdownType(range.type)) {
+        mergeLinesWithMultilineTags(mergedLines, mainLine, range, otherLineIndexes);
+      } else if (otherLineIndexes.length > 0) {
+        splitRangeIntoSeparateLines(mergedLines, mainLine, range, otherLineIndexes);
+      } else {
+        mainLine.markdownRanges.push(range);
       }
     }
   });
@@ -163,7 +211,7 @@ function parseRangesToHTMLNodes(
   // Sort all ranges by start position, length, and by tag hierarchy so the styles and text are applied in correct order
   const sortedRanges = sortRanges(ranges);
   const markdownRanges = ungroupRanges(sortedRanges);
-  lines = mergeLinesWithMultilineTags(lines, markdownRanges);
+  lines = normalizeLines(lines, markdownRanges);
 
   let lastRangeEndIndex = 0;
   while (lines.length > 0) {
@@ -316,4 +364,5 @@ function updateInputStructure(
   return {text, cursorPosition: cursorPosition || 0};
 }
 
-export {updateInputStructure, parseRangesToHTMLNodes};
+export {updateInputStructure, parseRangesToHTMLNodes, normalizeLines};
+export type {Paragraph};