@lvce-editor/editor-worker 19.72.5 → 19.72.7

package/dist/editorWorkerMain.js

@@ -2370,45 +2370,43 @@ const getHorizontalScrollDimensions = ({
 
 const defaultThreshold = 500;
 const getSegments = line => {
-  if ('Segmenter' in Intl) {
+  if (typeof Intl.Segmenter === 'function') {
     // @ts-ignore
-    return [...new Intl.Segmenter(undefined, {
+    return [...Array.from(new Intl.Segmenter(undefined, {
       granularity: 'grapheme'
-    }).segment(line)];
+    }).segment(line), ({
+      index
+    }) => index), line.length];
   }
-  const segments = [];
+  const segments = [0];
   let index = 0;
   for (const segment of line) {
-    segments.push({
-      index,
-      segment
-    });
     index += segment.length;
+    segments.push(index);
   }
   return segments;
 };
-const getCharacterWidth = (character, tabSize) => {
-  if (character === '\t') {
+const getCharacterWidth = (line, start, end, tabSize) => {
+  if (end - start === 1 && line.codePointAt(start) === 9) {
     return tabSize;
   }
   // Grapheme clusters such as combining characters and ZWJ emoji are indivisible.
   // Treat each cluster as one display column; the extra cluster below is a safe overscan.
   return 1;
 };
-const getHorizontalDisplayColumn = (line, sourceColumn, tabSize) => {
+const getHorizontalDisplayColumn = (line, sourceColumn, tabSize, segments = getSegments(line)) => {
   let displayColumn = 0;
-  for (const {
-    index,
-    segment
-  } of getSegments(line)) {
-    if (index + segment.length > sourceColumn) {
+  for (let i = 0; i < segments.length - 1; i++) {
+    const start = segments[i];
+    const end = segments[i + 1];
+    if (end > sourceColumn) {
       break;
     }
-    displayColumn += segment === '\t' ? tabSize : segment.length;
+    displayColumn += end - start === 1 && line.codePointAt(start) === 9 ? tabSize : end - start;
   }
   return displayColumn;
 };
-const getHorizontalVisibleRange = (line, deltaX, width, averageCharWidth, tabSize, threshold = defaultThreshold) => {
+const getHorizontalVisibleRange = (line, deltaX, width, averageCharWidth, tabSize, threshold = defaultThreshold, segments = getSegments(line)) => {
   if (line.length <= threshold) {
     return {
       end: line.length,
@@ -2424,15 +2422,13 @@ const getHorizontalVisibleRange = (line, deltaX, width, averageCharWidth, tabSiz
   let index = 0;
   let start = 0;
   let started = false;
-  const segments = getSegments(line);
-  for (const {
-    index: segmentIndex,
-    segment
-  } of segments) {
-    const nextColumn = column + getCharacterWidth(segment, tabSize);
+  for (let i = 0; i < segments.length - 1; i++) {
+    const segmentIndex = segments[i];
+    const segmentEnd = segments[i + 1];
+    const nextColumn = column + getCharacterWidth(line, segmentIndex, segmentEnd, tabSize);
     if (!started && nextColumn <= targetStart) {
       column = nextColumn;
-      index = segmentIndex + segment.length;
+      index = segmentEnd;
       start = index;
       continue;
     }
@@ -2440,7 +2436,7 @@ const getHorizontalVisibleRange = (line, deltaX, width, averageCharWidth, tabSiz
       start = segmentIndex;
       started = true;
     }
-    index = segmentIndex + segment.length;
+    index = segmentEnd;
     column = nextColumn;
     if (column >= targetEnd) {
       break;
@@ -2451,11 +2447,9 @@ const getHorizontalVisibleRange = (line, deltaX, width, averageCharWidth, tabSiz
   }
   // Keep one extra complete grapheme to cover fractional offsets and avoid a blank edge.
   if (index < line.length) {
-    const nextSegment = segments.find(({
-      index: segmentIndex
-    }) => segmentIndex >= index);
-    if (nextSegment) {
-      index = nextSegment.index + nextSegment.segment.length;
+    const nextSegmentIndex = segments.findIndex(segmentIndex => segmentIndex >= index);
+    if (nextSegmentIndex !== -1 && nextSegmentIndex < segments.length - 1) {
+      index = segments[nextSegmentIndex + 1];
     }
   }
   return {
@@ -2463,82 +2457,134 @@ const getHorizontalVisibleRange = (line, deltaX, width, averageCharWidth, tabSiz
     start
   };
 };
-const getHorizontalVisibleRangeMeasured = async (line, deltaX, width, averageCharWidth, tabSize, threshold, measureWidth) => {
-  const fallback = () => {
-    const range = getHorizontalVisibleRange(line, deltaX, width, averageCharWidth, tabSize, threshold);
+const getHorizontalVisibleRangesMeasured = async (requests, measureWidths) => {
+  const fallback = request => {
+    const segments = request.segments || getSegments(request.line);
+    const range = getHorizontalVisibleRange(request.line, request.deltaX, request.width, request.averageCharWidth, request.tabSize, request.threshold, segments);
     return {
       ...range,
-      difference: getHorizontalVisibleDifference(line, range.start, deltaX, averageCharWidth, tabSize)
+      difference: getHorizontalVisibleDifference(request.line, range.start, request.deltaX, request.averageCharWidth, request.tabSize, segments)
     };
   };
-  if (line.length <= threshold) {
-    return fallback();
+  const results = requests.map(request => fallback(request));
+  const boundariesByLine = [];
+  const measurementsByLine = [];
+  const cursors = [];
+  for (let lineIndex = 0; lineIndex < requests.length; lineIndex++) {
+    const request = requests[lineIndex];
+    if (request.line.length <= request.threshold) {
+      continue;
+    }
+    const boundaries = request.segments || getSegments(request.line);
+    boundariesByLine[lineIndex] = boundaries;
+    measurementsByLine[lineIndex] = new Map([[0, 0]]);
+    const scrollOffset = Math.max(0, Number.isFinite(request.deltaX) ? request.deltaX : 0);
+    const viewportWidth = Number.isFinite(request.width) ? Math.max(0, request.width) : Infinity;
+    cursors.push({
+      high: boundaries.length,
+      isStart: true,
+      lineIndex,
+      low: 0,
+      target: scrollOffset
+    });
+    cursors.push({
+      high: boundaries.length,
+      isStart: false,
+      lineIndex,
+      low: 0,
+      target: scrollOffset + viewportWidth
+    });
   }
-  const scrollOffset = Math.max(0, Number.isFinite(deltaX) ? deltaX : 0);
-  const viewportWidth = Number.isFinite(width) ? Math.max(0, width) : Infinity;
-  const segments = getSegments(line);
-  const boundaries = [0, ...segments.map(({
-    index,
-    segment
-  }) => index + segment.length)];
-  const measurements = new Map([[0, 0]]);
-  const measureBoundary = async boundaryIndex => {
-    const cached = measurements.get(boundaryIndex);
-    if (cached !== undefined) {
-      return cached;
-    }
-    const prefix = line.slice(0, boundaries[boundaryIndex]).replaceAll('\t', () => ' '.repeat(tabSize));
-    const measured = await measureWidth(prefix);
-    measurements.set(boundaryIndex, measured);
-    return measured;
-  };
-  const findGreatestBoundaryAtMost = async target => {
-    let low = 0;
-    let high = boundaries.length;
-    while (low < high) {
-      const middle = Math.floor((low + high) / 2);
-      if ((await measureBoundary(middle)) <= target) {
-        low = middle + 1;
-      } else {
-        high = middle;
+  try {
+    const addPendingMeasurement = (cursor, pending) => {
+      if (cursor.low >= cursor.high) {
+        return;
       }
-    }
-    return Math.max(0, low - 1);
-  };
-  const findFirstBoundaryAtLeast = async target => {
-    let low = 0;
-    let high = boundaries.length;
-    while (low < high) {
-      const middle = Math.floor((low + high) / 2);
-      if ((await measureBoundary(middle)) < target) {
-        low = middle + 1;
+      const boundaryIndex = Math.floor((cursor.low + cursor.high) / 2);
+      if (measurementsByLine[cursor.lineIndex].has(boundaryIndex)) {
+        return;
+      }
+      const request = requests[cursor.lineIndex];
+      const prefix = request.line.slice(0, boundariesByLine[cursor.lineIndex][boundaryIndex]).replaceAll('\t', () => ' '.repeat(request.tabSize));
+      pending.set(`${cursor.lineIndex}:${boundaryIndex}`, {
+        boundaryIndex,
+        lineIndex: cursor.lineIndex,
+        text: prefix
+      });
+    };
+    const updateCursor = cursor => {
+      if (cursor.low >= cursor.high) {
+        return;
+      }
+      const middle = Math.floor((cursor.low + cursor.high) / 2);
+      const measured = measurementsByLine[cursor.lineIndex].get(middle);
+      if (measured === undefined) {
+        return;
+      }
+      if (cursor.isStart ? measured <= cursor.target : measured < cursor.target) {
+        cursor.low = middle + 1;
       } else {
-        high = middle;
+        cursor.high = middle;
+      }
+    };
+    while (cursors.some(({
+      high,
+      low
+    }) => low < high)) {
+      const pending = new Map();
+      for (const cursor of cursors) {
+        addPendingMeasurement(cursor, pending);
+      }
+      if (pending.size > 0) {
+        const entries = pending.values().toArray();
+        const measuredWidths = await measureWidths(entries.map(({
+          text
+        }) => text));
+        if (measuredWidths.length !== entries.length) {
+          throw new Error('Text measurement returned an unexpected number of widths');
+        }
+        for (let i = 0; i < entries.length; i++) {
+          const {
+            boundaryIndex,
+            lineIndex
+          } = entries[i];
+          measurementsByLine[lineIndex].set(boundaryIndex, measuredWidths[i]);
+        }
+      }
+      for (const cursor of cursors) {
+        updateCursor(cursor);
       }
     }
-    return Math.min(boundaries.length - 1, low);
-  };
-  try {
-    const startBoundary = await findGreatestBoundaryAtMost(scrollOffset);
-    const endBoundary = await findFirstBoundaryAtLeast(scrollOffset + viewportWidth);
-    const start = boundaries[startBoundary];
-    let end = boundaries[endBoundary];
-    if (end < line.length) {
-      end = boundaries[Math.min(boundaries.length - 1, endBoundary + 1)];
+    for (let lineIndex = 0; lineIndex < boundariesByLine.length; lineIndex++) {
+      const boundaries = boundariesByLine[lineIndex];
+      if (!boundaries) {
+        continue;
+      }
+      const request = requests[lineIndex];
+      const lineCursors = cursors.filter(cursor => cursor.lineIndex === lineIndex);
+      const startBoundary = Math.max(0, lineCursors[0].low - 1);
+      const endBoundary = Math.min(boundaries.length - 1, lineCursors[1].low);
+      const start = boundaries[startBoundary];
+      let end = boundaries[endBoundary];
+      if (end < request.line.length) {
+        end = boundaries[Math.min(boundaries.length - 1, endBoundary + 1)];
+      }
+      const scrollOffset = Math.max(0, Number.isFinite(request.deltaX) ? request.deltaX : 0);
+      results[lineIndex] = {
+        difference: (measurementsByLine[lineIndex].get(startBoundary) ?? 0) - scrollOffset,
+        end,
+        start
+      };
     }
-    return {
-      difference: (await measureBoundary(startBoundary)) - scrollOffset,
-      end,
-      start
-    };
   } catch {
-    return fallback();
+    // Keep the existing approximate range fallback when worker measurement fails.
   }
+  return results;
 };
-const getHorizontalVisibleDifference = (line, start, deltaX, averageCharWidth, tabSize) => {
+const getHorizontalVisibleDifference = (line, start, deltaX, averageCharWidth, tabSize, segments) => {
   const charWidth = averageCharWidth > 0 ? averageCharWidth : 1;
   const scrollOffset = Number.isFinite(deltaX) ? deltaX : 0;
-  return getHorizontalDisplayColumn(line, start, tabSize) * charWidth - scrollOffset;
+  return getHorizontalDisplayColumn(line, start, tabSize, segments) * charWidth - scrollOffset;
 };
 
 // Large files have no token cache. Only materialize the text inside the horizontal viewport.
@@ -2953,6 +2999,10 @@ const measureTextWidthSlow = async (text, fontWeight, fontSize, fontFamily, lett
   return width;
 };
 
+const measureTextWidthsSlow = async (texts, fontWeight, fontSize, fontFamily, letterSpacing, isMonoSpaceFont, charWidth) => {
+  return await invoke$e('TextMeasurement.measureTextWidths', texts, fontWeight, fontSize, fontFamily, letterSpacing, isMonoSpaceFont, charWidth);
+};
+
 const measureTextWidth = async (text, fontWeight, fontSize, fontFamily, letterSpacing, isMonoSpaceFont, charWidth) => {
   // TODO maybe have a property for the whole text document
   // whether the document is ASCII or not
@@ -2963,6 +3013,29 @@ const measureTextWidth = async (text, fontWeight, fontSize, fontFamily, letterSp
   }
   return await measureTextWidthSlow(text, fontWeight, fontSize, fontFamily, letterSpacing, isMonoSpaceFont, charWidth);
 };
+const measureTextWidths = async (texts, fontWeight, fontSize, fontFamily, letterSpacing, isMonoSpaceFont, charWidth) => {
+  const widths = Array.from({
+    length: texts.length
+  }, (_, index) => index);
+  const slowTexts = [];
+  const slowIndexes = [];
+  for (let i = 0; i < texts.length; i++) {
+    const text = texts[i];
+    if (isMonoSpaceFont && isAscii(text)) {
+      widths[i] = await measureTextWidthFast(text, charWidth);
+    } else {
+      slowTexts.push(text);
+      slowIndexes.push(i);
+    }
+  }
+  if (slowTexts.length > 0) {
+    const slowWidths = await measureTextWidthsSlow(slowTexts, fontWeight, fontSize, fontFamily, letterSpacing, isMonoSpaceFont, charWidth);
+    for (let i = 0; i < slowWidths.length; i++) {
+      widths[slowIndexes[i]] = slowWidths[i];
+    }
+  }
+  return widths;
+};
 
 const Dot = '.';
 const DoubleQuote$1 = '"';
@@ -3162,6 +3235,13 @@ const positionAt = (textDocument, offset) => {
 };
 
 const maxTokenizerLoadPasses$1 = 10;
+const getGraphemeSegments = async lines => {
+  try {
+    return await invoke$e('TextMeasurement.getGraphemeSegments', lines);
+  } catch {
+    return undefined;
+  }
+};
 
 // const getTokensIncremental = (editor, min, max) => {
 //   const currentLength = editor.lineStateCache.length
@@ -3487,10 +3567,21 @@ const getLineInfosViewport = async (editor, tokens, embeddedResults, minLineY, m
   const tokenMap = get$5(languageId);
   let offset = minLineOffset;
   const tabSize = editor.tabSize ?? 2;
+  const visibleLines = lines.slice(minLineY, maxLineY);
+  const graphemeSegments = await getGraphemeSegments(visibleLines);
+  const measuredRanges = await getHorizontalVisibleRangesMeasured(visibleLines.map((line, index) => ({
+    averageCharWidth,
+    deltaX,
+    line,
+    segments: graphemeSegments?.[index],
+    tabSize,
+    threshold: horizontalVirtualizationThreshold,
+    width
+  })), texts => measureTextWidths(texts, editor.fontWeight, editor.fontSize, editor.fontFamily, editor.letterSpacing, editor.isMonospaceFont, editor.charWidth));
   for (let i = minLineY; i < maxLineY; i++) {
     const line = lines[i];
     const normalize = shouldNormalizeText(line);
-    const measuredRange = await getHorizontalVisibleRangeMeasured(line, deltaX, width, averageCharWidth, tabSize, horizontalVirtualizationThreshold, text => measureTextWidth(text, editor.fontWeight, editor.fontSize, editor.fontFamily, editor.letterSpacing, editor.isMonospaceFont, editor.charWidth));
+    const measuredRange = measuredRanges[i - minLineY];
 
     // Use decorations that were pre-computed (includes links and diagnostics)
     // Filter decorations to only include those for this line
@@ -3514,6 +3605,7 @@ const getLineInfosViewport = async (editor, tokens, embeddedResults, minLineY, m
     horizontalVisibleRanges.push({
       end: measuredRange.end,
       rowIndex: i,
+      segments: graphemeSegments?.[i - minLineY],
       start: measuredRange.start
     });
     offset += line.length + 1;
@@ -17616,16 +17708,16 @@ const mergeConflictActions = [{
   action: 'both',
   label: 'Accept Both Changes'
 }];
-const getUnnecessaryRanges = (diagnostics, rowIndex, textLength, visibleStartColumn, line, hasLine, tabSize) => {
-  const visibleStart = hasLine ? getHorizontalDisplayColumn(line, visibleStartColumn, tabSize) : visibleStartColumn;
+const getUnnecessaryRanges = (diagnostics, rowIndex, textLength, visibleStartColumn, line, hasLine, tabSize, segments) => {
+  const visibleStart = hasLine ? getHorizontalDisplayColumn(line, visibleStartColumn, tabSize, segments) : visibleStartColumn;
   return diagnostics.filter(diagnostic => diagnostic.tags?.includes(DiagnosticTag.Unnecessary)).flatMap(diagnostic => {
     if (rowIndex < diagnostic.rowIndex || rowIndex > diagnostic.endRowIndex) {
       return [];
     }
     const diagnosticStart = rowIndex === diagnostic.rowIndex ? diagnostic.columnIndex : 0;
     const diagnosticEnd = rowIndex === diagnostic.endRowIndex ? diagnostic.endColumnIndex : line.length;
-    const startColumn = hasLine ? getHorizontalDisplayColumn(line, diagnosticStart, tabSize) : diagnosticStart;
-    const endColumn = hasLine ? getHorizontalDisplayColumn(line, diagnosticEnd, tabSize) : diagnosticEnd;
+    const startColumn = hasLine ? getHorizontalDisplayColumn(line, diagnosticStart, tabSize, segments) : diagnosticStart;
+    const endColumn = hasLine ? getHorizontalDisplayColumn(line, diagnosticEnd, tabSize, segments) : diagnosticEnd;
     const start = Math.max(0, startColumn - visibleStart);
     const end = Math.min(textLength, endColumn - visibleStart);
     return start < end ? [{
@@ -17709,7 +17801,7 @@ const getEditorRowsVirtualDom$1 = (textInfos, differences, lineNumbers = true, h
     for (let index = 0; index < textInfo.length; index += 2) {
       rowTextLength += textInfo[index].length;
     }
-    const tokenParts = getTokenParts(textInfo, getUnnecessaryRanges(diagnostics, rowIndex, rowTextLength, visibleRange.start, line, lines[rowIndex] !== undefined, tabSize));
+    const tokenParts = getTokenParts(textInfo, getUnnecessaryRanges(diagnostics, rowIndex, rowTextLength, visibleRange.start, line, lines[rowIndex] !== undefined, tabSize, visibleRange.segments));
     let className = EditorRow;
     if (rowIndex === highlightedLine) {
       className = mergeClassNames(className, EditorRowHighlighted);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/editor-worker",
-  "version": "19.72.5",
+  "version": "19.72.7",
   "repository": {
     "type": "git",
     "url": "git@github.com:lvce-editor/editor-worker.git"