refactor: replace utif2 with image-js/tiff and deduplicate DocxZipper constants

Replace unmaintained utif2 with actively maintained image-js/tiff for
TIFF decoding. Extract duplicated IMAGE_EXTS and MIME_TYPE_FOR_EXT
mappings in DocxZipper.js to module-level constants.

Author: gpardhivvarma

packages/super-editor/package.json

@@ -101,7 +101,7 @@
     "remark-parse": "catalog:",
     "remark-stringify": "catalog:",
     "unified": "catalog:",
-    "utif2": "catalog:",
+    "tiff": "catalog:",
     "uuid": "catalog:",
     "vue": "catalog:",
     "xml-js": "catalog:"

packages/super-editor/src/core/DocxZipper.js

@@ -5,6 +5,12 @@ import { ensureXmlString, isXmlLike } from './encoding-helpers.js';
 import { DOCX } from '@superdoc/common';
 import { COMMENT_FILE_BASENAMES } from './super-converter/constants.js';
 
+/** Image file extensions recognized during import and export. */
+const IMAGE_EXTS = new Set(['png', 'jpg', 'jpeg', 'gif', 'bmp', 'tiff', 'tif', 'emf', 'wmf', 'svg', 'webp']);
+
+/** Map file extensions to correct MIME sub-types where they differ. */
+const MIME_TYPE_FOR_EXT = { tif: 'tiff' };
+
 /**
  * Class to handle unzipping and zipping of docx files
  */
@@ -63,20 +69,17 @@ class DocxZipper {
           const fileBase64 = await zipEntry.async('base64');
           let extension = this.getFileExtension(name)?.toLowerCase();
           // Only build data URIs for images; keep raw base64 for other binaries (e.g., xlsx)
-          const imageTypes = new Set(['png', 'jpg', 'jpeg', 'gif', 'bmp', 'tiff', 'tif', 'emf', 'wmf', 'svg', 'webp']);
-          const mimeTypeForExt = { tif: 'tiff' };
-
           // For unknown extensions (like .tmp), try to detect the image type from content
           let detectedType = null;
-          if (!imageTypes.has(extension) || extension === 'tmp') {
+          if (!IMAGE_EXTS.has(extension) || extension === 'tmp') {
             detectedType = detectImageType(fileBase64);
             if (detectedType) {
               extension = detectedType;
             }
           }
 
-          if (imageTypes.has(extension)) {
-            const mimeSubtype = mimeTypeForExt[extension] || extension;
+          if (IMAGE_EXTS.has(extension)) {
+            const mimeSubtype = MIME_TYPE_FOR_EXT[extension] || extension;
             this.mediaFiles[name] = `data:image/${mimeSubtype};base64,${fileBase64}`;
             const blob = await zipEntry.async('blob');
             const fileObj = new File([blob], name, { type: blob.type });
@@ -107,11 +110,9 @@ class DocxZipper {
    */
   async updateContentTypes(docx, media, fromJson, updatedDocs = {}) {
     const additionalPartNames = Object.keys(updatedDocs || {});
-    const imageExts = new Set(['png', 'jpg', 'jpeg', 'gif', 'bmp', 'tiff', 'tif', 'emf', 'wmf', 'svg', 'webp']);
-    const mimeTypeForExt = { tif: 'tiff' };
     const newMediaTypes = Object.keys(media)
       .map((name) => this.getFileExtension(name))
-      .filter((ext) => ext && imageExts.has(ext));
+      .filter((ext) => ext && IMAGE_EXTS.has(ext));
 
     const contentTypesPath = '[Content_Types].xml';
     let contentTypesXml;
@@ -134,7 +135,7 @@ class DocxZipper {
       if (defaultMediaTypes.includes(type)) continue;
       if (seenTypes.has(type)) continue;
 
-      const mime = mimeTypeForExt[type] || type;
+      const mime = MIME_TYPE_FOR_EXT[type] || type;
       const newContentType = `<Default Extension="${type}" ContentType="image/${mime}"/>`;
       typesString += newContentType;
       seenTypes.add(type);

packages/super-editor/src/core/super-converter/v3/handlers/wp/helpers/tiff-converter.js

@@ -1,14 +1,14 @@
 /**
  * TIFF to PNG Converter
  *
- * Converts TIFF images to PNG format using utif2 for decoding and Canvas for
- * encoding. Browsers cannot natively render TIFF images, so this converts them
- * at import time to a browser-friendly format.
+ * Converts TIFF images to PNG format using the `tiff` package (image-js/tiff)
+ * for decoding and Canvas for encoding. Browsers cannot natively render TIFF
+ * images, so this converts them at import time to a browser-friendly format.
  *
  * @module tiff-converter
  */
 
-import * as UTIF from 'utif2';
+import { decode } from 'tiff';
 import { base64ToUint8Array } from '../../../../helpers.js';
 
 // Optional DOM environment provided by callers (e.g., JSDOM in Node)
@@ -58,6 +58,54 @@ function createCanvas() {
   return null;
 }
 
+/**
+ * Convert decoded pixel data to RGBA format.
+ * The `tiff` package returns pixel data whose channel count depends on the
+ * image (greyscale=1, grey+alpha=2, RGB=3, RGBA=4). Canvas requires RGBA.
+ *
+ * @param {Uint8Array} data - Decoded pixel data
+ * @param {number} samplesPerPixel - Number of channels per pixel
+ * @param {boolean} hasAlpha - Whether the image has an alpha channel
+ * @param {number} pixelCount - Total number of pixels (width × height)
+ * @returns {Uint8Array} RGBA pixel data
+ */
+function toRGBA(data, samplesPerPixel, hasAlpha, pixelCount) {
+  if (samplesPerPixel === 4 && hasAlpha) return data;
+
+  const rgba = new Uint8Array(pixelCount * 4);
+
+  if (samplesPerPixel === 3) {
+    // RGB → RGBA
+    for (let i = 0; i < pixelCount; i++) {
+      rgba[i * 4] = data[i * 3];
+      rgba[i * 4 + 1] = data[i * 3 + 1];
+      rgba[i * 4 + 2] = data[i * 3 + 2];
+      rgba[i * 4 + 3] = 255;
+    }
+  } else if (samplesPerPixel === 2 && hasAlpha) {
+    // Grey + Alpha → RGBA
+    for (let i = 0; i < pixelCount; i++) {
+      const g = data[i * 2];
+      rgba[i * 4] = g;
+      rgba[i * 4 + 1] = g;
+      rgba[i * 4 + 2] = g;
+      rgba[i * 4 + 3] = data[i * 2 + 1];
+    }
+  } else if (samplesPerPixel === 1) {
+    // Greyscale → RGBA
+    for (let i = 0; i < pixelCount; i++) {
+      rgba[i * 4] = data[i];
+      rgba[i * 4 + 1] = data[i];
+      rgba[i * 4 + 2] = data[i];
+      rgba[i * 4 + 3] = 255;
+    }
+  } else {
+    return null;
+  }
+
+  return rgba;
+}
+
 /**
  * Converts a TIFF image to a PNG data URI.
  *
@@ -80,22 +128,19 @@ export function convertTiffToPng(data) {
     const buffer = bytes.buffer.slice(bytes.byteOffset, bytes.byteOffset + bytes.byteLength);
 
     // Decode TIFF — get Image File Directories (pages)
-    const ifds = UTIF.decode(buffer);
+    const ifds = decode(buffer);
     if (!ifds || ifds.length === 0) return null;
 
-    // Validate dimensions from raw IFD tags before decoding pixel data.
-    // UTIF.decode populates tag entries (t256=ImageWidth, t257=ImageLength)
-    // but .width/.height are only set after decodeImage.
-    const ifdWidth = ifds[0].t256?.[0];
-    const ifdHeight = ifds[0].t257?.[0];
-    if (!ifdWidth || !ifdHeight || ifdWidth * ifdHeight > MAX_PIXEL_COUNT) return null;
+    const ifd = ifds[0];
+    const { width, height } = ifd;
+    if (!width || !height || width * height > MAX_PIXEL_COUNT) return null;
 
-    // Decode pixel data for the first page
-    UTIF.decodeImage(buffer, ifds[0]);
-    const rgba = UTIF.toRGBA8(ifds[0]);
-    if (!rgba || rgba.length === 0) return null;
+    const pixelData = ifd.data;
+    if (!pixelData || pixelData.length === 0) return null;
 
-    const { width, height } = ifds[0];
+    const samplesPerPixel = ifd.samplesPerPixel ?? (ifd.alpha ? 2 : 1);
+    const rgba = toRGBA(pixelData, samplesPerPixel, ifd.alpha, width * height);
+    if (!rgba) return null;
 
     // Render to canvas and export as PNG
     const canvas = createCanvas();
@@ -111,7 +156,7 @@ export function convertTiffToPng(data) {
     if (!ctx) return null;
 
     const imageData = ctx.createImageData(width, height);
-    imageData.data.set(new Uint8Array(rgba.buffer, rgba.byteOffset, rgba.byteLength));
+    imageData.data.set(rgba);
     ctx.putImageData(imageData, 0, 0);
 
     const dataUri = canvas.toDataURL('image/png');

packages/super-editor/src/core/super-converter/v3/handlers/wp/helpers/tiff-converter.test.js

@@ -61,14 +61,9 @@ describe('tiff-converter', () => {
     });
 
     it('returns a PNG data URI for valid TIFF input', () => {
-      const fakeRgba = new Uint8Array(2 * 2 * 4); // 2x2 image, RGBA
-      vi.doMock('utif2', () => ({
-        decode: () => [{ t256: [2], t257: [2] }],
-        decodeImage: (_buf, ifd) => {
-          ifd.width = 2;
-          ifd.height = 2;
-        },
-        toRGBA8: () => fakeRgba,
+      const fakePixelData = new Uint8Array(2 * 2 * 3); // 2x2 RGB image
+      vi.doMock('tiff', () => ({
+        decode: () => [{ width: 2, height: 2, data: fakePixelData, samplesPerPixel: 3, alpha: false }],
       }));
 
       const mockCanvas = {
@@ -88,24 +83,21 @@ describe('tiff-converter', () => {
         expect(result).toEqual({ dataUri: 'data:image/png;base64,iVBORw0KGgo=', format: 'png' });
 
         spy.mockRestore();
-        vi.doUnmock('utif2');
+        vi.doUnmock('tiff');
       });
     });
 
     it('returns null for TIFF with dimensions exceeding pixel limit', () => {
-      // Mock utif2 to return oversized dimensions via raw IFD tags
-      // (t256=ImageWidth, t257=ImageLength — 100k × 10k = 1 billion pixels)
-      vi.doMock('utif2', () => ({
-        decode: () => [{ t256: [100_000], t257: [10_000] }],
-        decodeImage: () => undefined,
-        toRGBA8: () => new Uint8Array(4),
+      // Mock tiff to return oversized dimensions (100k × 10k = 1 billion pixels)
+      vi.doMock('tiff', () => ({
+        decode: () => [{ width: 100_000, height: 10_000, data: new Uint8Array(4), samplesPerPixel: 1, alpha: false }],
       }));
 
       // Re-import to pick up the mock
       return import('./tiff-converter.js?oversized').then(({ convertTiffToPng: fn }) => {
         const result = fn('SU8qAA==');
         expect(result).toBeNull();
-        vi.doUnmock('utif2');
+        vi.doUnmock('tiff');
       });
     });
   });

pnpm-lock.yaml

@@ -104,7 +104,7 @@ catalog:
   typescript: ^5.9.2
   typescript-eslint: ^8.49.0
   unified: 11.0.5
-  utif2: ^4.1.0
+  tiff: ^6.1.1
   uuid: ^9.0.1
   verdaccio: ^6.1.6
   vite: ^7.2.7