@open-file-viewer/core 0.1.13 → 0.1.14

package/dist/index.js

@@ -7129,6 +7129,7 @@ async function renderSheet(panel, arrayBuffer, extension) {
     return;
   }
   const chartPreviews = await readWorkbookCharts(arrayBuffer).catch(() => []);
+  const workbookImages = await readWorkbookSheetImages(arrayBuffer).catch(() => /* @__PURE__ */ new Map());
   const tabs = document.createElement("div");
   tabs.className = "ofv-tabs";
   tabs.setAttribute("role", "tablist");
@@ -7147,6 +7148,7 @@ async function renderSheet(panel, arrayBuffer, extension) {
     const heading = document.createElement("h3");
     heading.textContent = sheetName;
     const sheet = workbook.Sheets[sheetName];
+    const sheetImages = workbookImages.get(sheetName) || [];
     const range = trimWorkbookSheetRange(sheet, xlsx.utils.decode_range(sheet["!ref"] || "A1:A1"), xlsx.utils.decode_cell);
     const rowCount = range.e.r - range.s.r + 1;
     const columnCount = range.e.c - range.s.c + 1;
@@ -7172,7 +7174,8 @@ async function renderSheet(panel, arrayBuffer, extension) {
           xlsx.utils.encode_cell,
           xlsx.utils.format_cell,
           columnSizing,
-          renderTableWindow
+          renderTableWindow,
+          sheetImages
         )
       );
       windowControls?.update();
@@ -7242,6 +7245,143 @@ function renderSheetFallback(panel, extension, detail) {
   section.append(title, meta, support);
   panel.append(section);
 }
+async function readWorkbookSheetImages(arrayBuffer) {
+  const zip = await JSZip3.loadAsync(arrayBuffer);
+  const fileNames = Object.keys(zip.files);
+  if (!fileNames.some((name) => /^xl\/drawings\/.+\.xml$/i.test(name)) || !fileNames.some((name) => /^xl\/media\//i.test(name))) {
+    return /* @__PURE__ */ new Map();
+  }
+  const workbookXml = await zip.file("xl/workbook.xml")?.async("text");
+  if (!workbookXml || typeof DOMParser === "undefined") {
+    return /* @__PURE__ */ new Map();
+  }
+  const workbookDoc = parseOfficeXml(workbookXml);
+  if (!workbookDoc) {
+    return /* @__PURE__ */ new Map();
+  }
+  const workbookRels = await readOfficeRelationships(zip, "xl/workbook.xml");
+  const result = /* @__PURE__ */ new Map();
+  const sheetElements = Array.from(workbookDoc.getElementsByTagName("*")).filter((element) => element.localName === "sheet");
+  for (const sheetElement of sheetElements) {
+    const sheetName = sheetElement.getAttribute("name") || "";
+    const relationshipId = getXmlAttribute3(sheetElement, "id");
+    const sheetRel = workbookRels.find((rel) => rel.id === relationshipId && /\/worksheet$/i.test(rel.type));
+    const sheetPath = resolveOfficeRelationshipTarget("xl/workbook.xml", sheetRel?.target);
+    if (!sheetName || !sheetPath) {
+      continue;
+    }
+    const images = await readWorksheetImages(zip, sheetPath);
+    if (images.length > 0) {
+      result.set(sheetName, images);
+    }
+  }
+  return result;
+}
+async function readWorksheetImages(zip, sheetPath) {
+  const sheetXml = await zip.file(sheetPath)?.async("text");
+  const sheetDoc = sheetXml ? parseOfficeXml(sheetXml) : void 0;
+  if (!sheetDoc) {
+    return [];
+  }
+  const sheetRels = await readOfficeRelationships(zip, sheetPath);
+  const drawingIds = Array.from(sheetDoc.getElementsByTagName("*")).filter((element) => element.localName === "drawing").map((element) => getXmlAttribute3(element, "id")).filter((id) => Boolean(id));
+  const images = [];
+  for (const drawingId of drawingIds) {
+    const drawingRel = sheetRels.find((rel) => rel.id === drawingId && /\/drawing$/i.test(rel.type));
+    const drawingPath = resolveOfficeRelationshipTarget(sheetPath, drawingRel?.target);
+    if (drawingPath) {
+      images.push(...await readWorksheetDrawingImages(zip, drawingPath));
+    }
+  }
+  return images;
+}
+async function readWorksheetDrawingImages(zip, drawingPath) {
+  const drawingXml = await zip.file(drawingPath)?.async("text");
+  const drawingDoc = drawingXml ? parseOfficeXml(drawingXml) : void 0;
+  if (!drawingDoc) {
+    return [];
+  }
+  const drawingRels = await readOfficeRelationships(zip, drawingPath);
+  const anchors = Array.from(drawingDoc.getElementsByTagName("*")).filter(
+    (element) => element.localName === "twoCellAnchor" || element.localName === "oneCellAnchor"
+  );
+  const images = [];
+  for (const anchor of anchors) {
+    const from = Array.from(anchor.children).find((element) => element.localName === "from");
+    const embedId = findDrawingImageRelationshipId(anchor);
+    const mediaRel = drawingRels.find((rel) => rel.id === embedId && /\/image$/i.test(rel.type));
+    const mediaPath = resolveOfficeRelationshipTarget(drawingPath, mediaRel?.target);
+    const mediaFile = mediaPath ? zip.file(mediaPath) : void 0;
+    if (!from || !mediaPath || !mediaFile) {
+      continue;
+    }
+    const mimeType = mimeTypeFromImagePath(mediaPath);
+    images.push({
+      row: readDrawingMarkerIndex(from, "row"),
+      column: readDrawingMarkerIndex(from, "col"),
+      fileName: mediaPath.split("/").pop() || "image",
+      mimeType,
+      dataUrl: `data:${mimeType};base64,${await mediaFile.async("base64")}`,
+      title: readDrawingImageTitle(anchor)
+    });
+  }
+  return images;
+}
+function findDrawingImageRelationshipId(anchor) {
+  for (const element of Array.from(anchor.getElementsByTagName("*"))) {
+    if (element.localName === "blip") {
+      return getXmlAttribute3(element, "embed") || getXmlAttribute3(element, "link") || void 0;
+    }
+  }
+  return void 0;
+}
+function readDrawingImageTitle(anchor) {
+  const nonVisualProperties = Array.from(anchor.getElementsByTagName("*")).find((element) => element.localName === "cNvPr");
+  return nonVisualProperties?.getAttribute("descr") || nonVisualProperties?.getAttribute("name") || void 0;
+}
+function readDrawingMarkerIndex(marker, localName) {
+  const element = Array.from(marker.children).find((child) => child.localName === localName);
+  const value = Number.parseInt(element?.textContent || "0", 10);
+  return Number.isFinite(value) && value >= 0 ? value : 0;
+}
+async function readOfficeRelationships(zip, partPath) {
+  const xml = await zip.file(relationshipPathForPart(partPath))?.async("text");
+  const doc = xml ? parseOfficeXml(xml) : void 0;
+  if (!doc) {
+    return [];
+  }
+  return Array.from(doc.getElementsByTagName("*")).filter((element) => element.localName === "Relationship").map((element) => ({
+    id: element.getAttribute("Id") || "",
+    type: element.getAttribute("Type") || "",
+    target: element.getAttribute("Target") || ""
+  }));
+}
+function parseOfficeXml(xml) {
+  const doc = new DOMParser().parseFromString(xml, "application/xml");
+  return doc.querySelector("parsererror") ? void 0 : doc;
+}
+function resolveOfficeRelationshipTarget(sourcePath, target) {
+  return resolvePptxRelationshipTarget(sourcePath, target);
+}
+function mimeTypeFromImagePath(path) {
+  const extension = path.split(".").pop()?.toLowerCase();
+  switch (extension) {
+    case "jpg":
+    case "jpeg":
+      return "image/jpeg";
+    case "gif":
+      return "image/gif";
+    case "webp":
+      return "image/webp";
+    case "bmp":
+      return "image/bmp";
+    case "svg":
+      return "image/svg+xml";
+    case "png":
+    default:
+      return "image/png";
+  }
+}
 function renderEncryptedOfficeByFileInfo(panel, fileLabel, title) {
   const section = createSection(title);
   section.classList.add("ofv-encrypted");
@@ -7619,7 +7759,7 @@ function createWindowButton(label, onClick) {
 function maxStart(total, size) {
   return Math.max(0, total - size);
 }
-function createWorkbookSheetTable(sheet, range, sheetIndex, viewport, encodeCell, formatCell, columnSizing, rerender) {
+function createWorkbookSheetTable(sheet, range, sheetIndex, viewport, encodeCell, formatCell, columnSizing, rerender, images = []) {
   const table = document.createElement("table");
   table.id = `ofv-sheet-${sheetIndex + 1}`;
   table.className = "ofv-workbook-table";
@@ -7628,6 +7768,7 @@ function createWorkbookSheetTable(sheet, range, sheetIndex, viewport, encodeCell
   const columnStart = range.s.c + viewport.columnStart;
   const rowStart = range.s.r + viewport.rowStart;
   const mergePlan = createSheetMergePlan(sheet["!merges"] || [], rowStart, rowEnd, columnStart, columnEnd);
+  const imagesByCell = groupWorkbookImagesByCell(images);
   const colGroup = document.createElement("colgroup");
   let tableWidth = 0;
   for (let columnIndex = columnStart; columnIndex <= columnEnd; columnIndex += 1) {
@@ -7682,6 +7823,7 @@ function createWorkbookSheetTable(sheet, range, sheetIndex, viewport, encodeCell
       if (text.includes("\n")) {
         cell.classList.add("ofv-cell-multiline");
       }
+      appendWorkbookCellImages(cell, imagesByCell.get(`${rowIndex}:${columnIndex}`), text);
       appendColumnResizeHandle(cell, columnIndex, columnSizing);
       row.append(cell);
     }
@@ -7764,6 +7906,39 @@ function createSheetMergePlan(merges, rowStart, rowEnd, columnStart, columnEnd)
   }
   return { anchors, covered };
 }
+function groupWorkbookImagesByCell(images) {
+  const grouped = /* @__PURE__ */ new Map();
+  for (const image of images) {
+    const key = `${image.row}:${image.column}`;
+    const items = grouped.get(key) || [];
+    items.push(image);
+    grouped.set(key, items);
+  }
+  return grouped;
+}
+function appendWorkbookCellImages(cell, images, text) {
+  if (!images?.length) {
+    return;
+  }
+  if (isWorkbookImagePlaceholderValue(text)) {
+    cell.textContent = "";
+    cell.removeAttribute("title");
+  }
+  cell.classList.add("ofv-cell-image");
+  for (const image of images) {
+    const figure = document.createElement("figure");
+    figure.className = "ofv-workbook-image";
+    const element = document.createElement("img");
+    element.src = image.dataUrl;
+    element.alt = image.title || image.fileName || "Excel embedded image";
+    element.loading = "lazy";
+    figure.append(element);
+    cell.append(figure);
+  }
+}
+function isWorkbookImagePlaceholderValue(text) {
+  return /^#(?:VALUE|NAME|REF|N\/A|NULL|NUM|DIV\/0)!?$/i.test(text.trim());
+}
 function getSheetColumnWidth(column) {
   if (column?.hidden) {
     return 0;
@@ -8086,6 +8261,69 @@ function normalizePptxLayout(container) {
   for (const slide of slideCanvases) {
     slide.style.backgroundColor = "#FFFFFF";
   }
+  normalizePptxMirroredText(container);
+}
+function normalizePptxMirroredText(container) {
+  const mirroredContainers = Array.from(container.querySelectorAll("div")).filter((element) => {
+    const text = element.textContent?.trim();
+    if (!text || element.children.length === 0) {
+      return false;
+    }
+    const styleTransform = element.style.transform;
+    return hasPptxMirrorTransform(styleTransform, "x") || hasPptxMirrorTransform(styleTransform, "y");
+  });
+  for (const element of mirroredContainers) {
+    const flipX = hasPptxMirrorTransform(element.style.transform, "x");
+    const flipY = hasPptxMirrorTransform(element.style.transform, "y");
+    const targets = findPptxMirroredTextTargets(element);
+    for (const target of targets) {
+      counterMirrorPptxTextTarget(target, flipX, flipY);
+    }
+  }
+}
+function findPptxMirroredTextTargets(element) {
+  const children = Array.from(element.children).filter((child) => child instanceof HTMLElement);
+  const absoluteTextChildren = children.filter((child) => Boolean(child.textContent?.trim()) && child.style.position === "absolute");
+  if (absoluteTextChildren.length > 0) {
+    return absoluteTextChildren;
+  }
+  return children.filter((child) => Boolean(child.textContent?.trim()));
+}
+function hasPptxMirrorTransform(transform, axis) {
+  if (!transform) {
+    return false;
+  }
+  if (axis === "x" && /scaleX\(\s*-1\s*\)/i.test(transform)) {
+    return true;
+  }
+  if (axis === "y" && /scaleY\(\s*-1\s*\)/i.test(transform)) {
+    return true;
+  }
+  const matrix = transform.match(/matrix\(\s*([^,\s]+)\s*,\s*([^,\s]+)\s*,\s*([^,\s]+)\s*,\s*([^,\s]+)/i);
+  if (!matrix) {
+    return false;
+  }
+  const xScale = Number(matrix[1]);
+  const yScale = Number(matrix[4]);
+  return axis === "x" ? xScale < 0 : yScale < 0;
+}
+function counterMirrorPptxTextTarget(target, flipX, flipY) {
+  const applied = target.dataset.ofvPptxCounterMirror ?? "";
+  const transforms = [];
+  if (flipX && !applied.includes("x")) {
+    transforms.push("scaleX(-1)");
+  }
+  if (flipY && !applied.includes("y")) {
+    transforms.push("scaleY(-1)");
+  }
+  if (transforms.length === 0) {
+    return;
+  }
+  target.style.transform = `${target.style.transform || ""} ${transforms.join(" ")}`.trim();
+  if (!target.style.transformOrigin) {
+    target.style.transformOrigin = "center center";
+  }
+  target.dataset.ofvPptxCounterMirror = `${applied}${flipX ? "x" : ""}${flipY ? "y" : ""}`;
 }
 function findPptxSlideCanvases(container) {
   const slideWrappers = Array.from(container.querySelectorAll("div[data-slide-index]"));