@globalpayments/vega 2.98.0 → 2.99.0

package/dist/collection/components/vega-rich-text-editor/extensions/paste/word-paste-transformers/word-structure-image-transformer.js

@@ -0,0 +1,198 @@
+/**
+ * Normalizes Word image markup into plain <img> tags, drops list-marker images,
+ * and optionally remaps image source paths.
+ */
+export class WordImageTransformer {
+  /** @inheritDoc */
+  getAllowedTags() {
+    return ['IMG'];
+  }
+  /** @inheritDoc */
+  getAllowedAttributes() {
+    return new Map([['IMG', ['src', 'alt', 'title', 'width', 'height']]]);
+  }
+  /** @inheritDoc */
+  getAllowedStyles() {
+    return [];
+  }
+  /** @inheritDoc */
+  apply(root) {
+    this.normalizeWordImageDataElements(root);
+    this.normalizeStandardImages(root);
+    this.liftImagesOutOfTextStyleBlocks(root);
+    this.insertSpanBetweenAdjacentImages(root);
+  }
+  /**
+   * Lifts images out of text-style blocks (`h1`-`h6`, Word title / subtitle
+   * paragraphs) so they become standalone top-level images.
+   *
+   * The RTE data model represents these blocks as text blocks whose children
+   * are text nodes only, so an `<img>` nested inside one has no text-node
+   * representation and would be silently dropped during DTO conversion. Moving
+   * each image to a sibling position right after its block lets the downstream
+   * image-block strategies pick it up. Images are re-inserted in document order
+   * so they stay aligned with the RTF files paired later.
+   *
+   * Word title / subtitle paragraphs still carry their raw `MsoTitle` /
+   * `MsoSubtitle` class here because {@link WordParagraphRoleTransformer} runs
+   * after this transformer.
+   *
+   * @param {HTMLElement} root Parsed Word fragment root.
+   */
+  liftImagesOutOfTextStyleBlocks(root) {
+    const blockElements = Array.from(root.querySelectorAll('h1, h2, h3, h4, h5, h6, p')).filter((element) => this.isImageLiftTargetBlock(element));
+    blockElements.forEach((blockElement) => {
+      if (!blockElement.parentNode) {
+        return;
+      }
+      const imageElements = Array.from(blockElement.querySelectorAll('img'));
+      let referenceNode = blockElement;
+      imageElements.forEach((imageElement) => {
+        blockElement.parentNode.insertBefore(imageElement, referenceNode.nextSibling);
+        referenceNode = imageElement;
+      });
+    });
+  }
+  /**
+   * Reports whether a block hosts its images as text-only children, requiring
+   * nested images to be lifted out: any heading (`h1`-`h6`) or a Word title /
+   * subtitle paragraph.
+   *
+   * @param {HTMLElement} element Candidate block element.
+   * @returns {boolean} `true` when nested images must be lifted out of the block.
+   */
+  isImageLiftTargetBlock(element) {
+    const tagName = element.tagName.toLowerCase();
+    if (/^h[1-6]$/.test(tagName)) {
+      return true;
+    }
+    if (tagName === 'p') {
+      const className = (element.getAttribute('class') || '').toLowerCase();
+      return /msotitle/.test(className) || /msosubtitle/.test(className);
+    }
+    return false;
+  }
+  /**
+   * Converts Word VML `v:imagedata` elements to plain `<img>` elements.
+   *
+   * @param {HTMLElement} root Parsed Word fragment root.
+   */
+  normalizeWordImageDataElements(root) {
+    const imageDataElements = Array.from(root.querySelectorAll('v\\:imagedata, imagedata'));
+    imageDataElements.forEach((imageDataElement) => {
+      const src = imageDataElement.getAttribute('src') ||
+        imageDataElement.getAttribute('o:href') ||
+        imageDataElement.getAttribute('href') ||
+        '';
+      const alt = imageDataElement.getAttribute('alt') ||
+        imageDataElement.getAttribute('o:title') ||
+        imageDataElement.getAttribute('title') ||
+        '';
+      const wrapperElement = imageDataElement.closest('v\\:shape, shape') || imageDataElement;
+      if (!src) {
+        wrapperElement.remove();
+        return;
+      }
+      // Non-local list images have no RTF counterpart, so drop them now. Local
+      // (file://) list images are kept as placeholders and removed later during
+      // preview pairing so the image order stays aligned with the RTF files.
+      if (this.isListImage(wrapperElement) && !src.startsWith('file://')) {
+        wrapperElement.remove();
+        return;
+      }
+      const imageElement = root.ownerDocument.createElement('img');
+      imageElement.setAttribute('src', src);
+      if (alt) {
+        imageElement.setAttribute('alt', alt);
+      }
+      if (wrapperElement.parentNode) {
+        const shapeId = wrapperElement.getAttribute('id') || '';
+        if (shapeId) {
+          this.removeFallbackImagesForShapeId(root, shapeId);
+        }
+        wrapperElement.parentNode.insertBefore(imageElement, wrapperElement);
+        wrapperElement.parentNode.removeChild(wrapperElement);
+      }
+    });
+  }
+  /**
+   * Removes non-VML fallback images that reference a specific Word VML shape id.
+   *
+   * Word clipboard HTML often includes both `v:imagedata` and an `<img v:shapes="...">`
+   * fallback for the same visual image. Once VML is normalized, the fallback must
+   * be removed to avoid duplicated image handling.
+   *
+   * @param {HTMLElement} root Parsed Word fragment root.
+   * @param {string} shapeId VML shape id referenced by fallback images.
+   */
+  removeFallbackImagesForShapeId(root, shapeId) {
+    const imageElements = Array.from(root.querySelectorAll('img'));
+    imageElements.forEach((imageElement) => {
+      const referencedShapeId = imageElement.getAttribute('v:shapes') || imageElement.getAttribute('shapes') || '';
+      if (referencedShapeId === shapeId) {
+        imageElement.remove();
+      }
+    });
+  }
+  /**
+   * Removes list-marker images and sourceless `<img>` elements.
+   *
+   * @param {HTMLElement} root Parsed Word fragment root.
+   */
+  normalizeStandardImages(root) {
+    const imageElements = Array.from(root.querySelectorAll('img'));
+    imageElements.forEach((imageElement) => {
+      const src = imageElement.getAttribute('src') || '';
+      if (this.isListImage(imageElement)) {
+        // Non-local list images have no RTF counterpart, so drop them now. Local
+        // (file://) list images are kept as placeholders and removed later during
+        // preview pairing so the image order stays aligned with the RTF files.
+        if (!src.startsWith('file://')) {
+          imageElement.remove();
+        }
+        return;
+      }
+      if (!src) {
+        imageElement.remove();
+      }
+    });
+  }
+  /**
+   * Inserts an empty `<span> </span>` between adjacent images to avoid
+   * downstream image-block parsing treating a compact image run as a single image.
+   *
+   * @param {HTMLElement} root Parsed Word fragment root.
+   */
+  insertSpanBetweenAdjacentImages(root) {
+    const imageElements = Array.from(root.querySelectorAll('img'));
+    imageElements.forEach((imageElement) => {
+      if (!imageElement.parentNode) {
+        return;
+      }
+      const nextSibling = imageElement.nextSibling;
+      if (nextSibling &&
+        nextSibling.nodeType === Node.ELEMENT_NODE &&
+        nextSibling.tagName.toLowerCase() === 'img') {
+        const spacerElement = root.ownerDocument.createElement('span');
+        spacerElement.innerHTML = ' ';
+        imageElement.parentNode.insertBefore(spacerElement, nextSibling);
+      }
+    });
+  }
+  /**
+   * Currently the RTE does not support list images, so they must be removed from the paste content.
+   * Local (file://) list images are kept as placeholders here and removed later during preview pairing
+   * so the local images stay aligned with the RTF images; non-local list images are removed immediately.
+   * Returns true when the image is part of list content and should be ignored.
+   *
+   * Word list markup (`MsoListParagraph` / `mso-list`) is already normalized into
+   * real `li/ul/ol` by {@link WordListRoleTransformer}, which runs before this
+   * transformer, so a plain list-ancestor check is sufficient here.
+   *
+   * @param {Element} element Image element (or its wrapper).
+   * @returns {boolean} Whether this image belongs to list content.
+   */
+  isListImage(element) {
+    return Boolean(element.closest('li,ul,ol'));
+  }
+}