fix(textkit): preserve empty glyph codepoints

Author: brandon-julio-t

.changeset/sharp-mugs-repair.md

@@ -0,0 +1,5 @@
+---
+'@react-pdf/textkit': patch
+---
+
+fix(textkit): preserve glyph code points when fontkit returns an empty mapping

packages/textkit/src/layout/generateGlyphs.ts

@@ -1,7 +1,116 @@
 import scale from '../run/scale';
 import resolveStringIndices from '../string-indices/resolve';
 import resolveGlyphIndices from '../glyph-indices/resolve';
-import { AttributedString, Position, Run } from '../types';
+import { AttributedString, Glyph, Position, Run } from '../types';
+
+const codePointsFromString = (string: string): number[] => {
+  const result: number[] = [];
+
+  for (const char of string) {
+    const codePoint = char.codePointAt(0);
+
+    if (codePoint !== undefined) result.push(codePoint);
+  }
+
+  return result;
+};
+
+const sequenceStartsAt = (
+  values: number[],
+  sequence: number[],
+  start: number,
+) => sequence.every((value, index) => values[start + index] === value);
+
+const findSequence = (values: number[], sequence: number[], start: number) => {
+  if (sequence.length === 0) return start;
+
+  for (let i = start; i <= values.length - sequence.length; i += 1) {
+    if (sequenceStartsAt(values, sequence, i)) return i;
+  }
+
+  return -1;
+};
+
+const cloneGlyph = (glyph: Glyph, codePoints: number[]): Glyph =>
+  Object.assign(Object.create(Object.getPrototypeOf(glyph)), glyph, {
+    codePoints,
+  });
+
+const assignPendingCodePoints = (
+  glyphs: Glyph[],
+  pendingGlyphs: number[],
+  codePoints: number[],
+) => {
+  if (pendingGlyphs.length === 0 || codePoints.length === 0) return;
+
+  let codePointIndex = 0;
+
+  for (let i = 0; i < pendingGlyphs.length; i += 1) {
+    const remainingGlyphs = pendingGlyphs.length - i;
+    const remainingCodePoints = codePoints.length - codePointIndex;
+    const length = Math.max(1, remainingCodePoints - remainingGlyphs + 1);
+    const glyphIndex = pendingGlyphs[i];
+
+    glyphs[glyphIndex] = cloneGlyph(
+      glyphs[glyphIndex],
+      codePoints.slice(codePointIndex, codePointIndex + length),
+    );
+
+    codePointIndex += length;
+  }
+};
+
+const normalizeGlyphCodePoints = (glyphs: Glyph[], string: string): Glyph[] => {
+  const codePoints = codePointsFromString(string);
+  const result = [...glyphs];
+  const pendingGlyphs: number[] = [];
+  let isAligned = true;
+  let cursor = 0;
+
+  for (let i = 0; i < glyphs.length; i += 1) {
+    const glyph = glyphs[i];
+    const glyphCodePoints = glyph.codePoints || [];
+
+    if (!isAligned) continue;
+
+    if (glyphCodePoints.length === 0) {
+      pendingGlyphs.push(i);
+      continue;
+    }
+
+    if (pendingGlyphs.length > 0) {
+      const foundIndex = findSequence(codePoints, glyphCodePoints, cursor);
+
+      if (foundIndex < cursor) {
+        pendingGlyphs.length = 0;
+        isAligned = false;
+        continue;
+      }
+
+      assignPendingCodePoints(
+        result,
+        pendingGlyphs,
+        codePoints.slice(cursor, foundIndex),
+      );
+
+      pendingGlyphs.length = 0;
+      cursor = foundIndex + glyphCodePoints.length;
+      continue;
+    }
+
+    if (sequenceStartsAt(codePoints, glyphCodePoints, cursor)) {
+      cursor += glyphCodePoints.length;
+    } else {
+      isAligned = false;
+    }
+  }
+
+  if (isAligned) {
+    assignPendingCodePoints(result, pendingGlyphs, codePoints.slice(cursor));
+  }
+
+  return result;
+};
 
 const getCharacterSpacing = (run: Run) => {
   return run.attributes?.characterSpacing || 0;
@@ -67,16 +176,17 @@ const layoutRun = (string: string) => {
       'ltr',
     );
 
+    const glyphs = normalizeGlyphCodePoints(glyphRun.glyphs, runString);
     const positions = scalePositions(run, glyphRun.positions);
-    const stringIndices = resolveStringIndices(glyphRun.glyphs);
-    const glyphIndices = resolveGlyphIndices(glyphRun.glyphs);
+    const stringIndices = resolveStringIndices(glyphs);
+    const glyphIndices = resolveGlyphIndices(glyphs);
 
     const result: Run = {
       ...run,
       positions,
       stringIndices,
       glyphIndices,
-      glyphs: glyphRun.glyphs,
+      glyphs,
     };
 
     return result;

packages/textkit/tests/layout/generateGlyphs.test.ts

@@ -53,6 +53,54 @@ describe('generateGlyphs', () => {
     ]);
   });
 
+  test('should preserve source code points when a glyph has empty code points', () => {
+    const glyphWithoutCodePoints = {
+      id: 27927,
+      codePoints: [],
+      advanceWidth: 8,
+    };
+
+    const fontWithEmptyCodePoints = {
+      ...font,
+      layout: () => {
+        const glyphs = [
+          glyphWithoutCodePoints,
+          { id: 27700, codePoints: [27700], advanceWidth: 8 },
+        ];
+
+        return {
+          glyphs,
+          positions: glyphs.map((glyph) => ({
+            xAdvance: glyph.advanceWidth,
+            yAdvance: 0,
+            xOffset: 0,
+            yOffset: 0,
+          })),
+        };
+      },
+    };
+
+    const result = instance({
+      string: '洗水',
+      runs: [
+        {
+          start: 0,
+          end: 2,
+          attributes: { font: [fontWithEmptyCodePoints], fontSize: 2 },
+        },
+      ],
+    });
+
+    expect(result.runs[0].stringIndices).toEqual([0, 1]);
+    expect(result.runs[0].glyphIndices).toEqual([0, 1]);
+    expect(result.runs[0].glyphs?.map((glyph) => glyph.codePoints)).toEqual([
+      [27927],
+      [27700],
+    ]);
+    expect(result.runs[0].glyphs?.[0]).not.toBe(glyphWithoutCodePoints);
+    expect(glyphWithoutCodePoints.codePoints).toEqual([]);
+  });
+
   test('should return correctly generate multi-run simple string glyphs', () => {
     const result = instance({
       string: 'Lorem',