@ckeditor/ckeditor5-paste-from-office 45.0.0 → 45.1.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-paste-from-office",
-  "version": "45.0.0",
+  "version": "45.1.0-alpha.0",
   "description": "Paste from Office feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -13,10 +13,10 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-clipboard": "45.0.0",
-    "@ckeditor/ckeditor5-core": "45.0.0",
-    "@ckeditor/ckeditor5-engine": "45.0.0",
-    "ckeditor5": "45.0.0"
+    "@ckeditor/ckeditor5-clipboard": "45.1.0-alpha.0",
+    "@ckeditor/ckeditor5-core": "45.1.0-alpha.0",
+    "@ckeditor/ckeditor5-engine": "45.1.0-alpha.0",
+    "ckeditor5": "45.1.0-alpha.0"
   },
   "author": "CKSource (http://cksource.com/)",
   "license": "SEE LICENSE IN LICENSE.md",

package/src/filters/image.js

@@ -180,9 +180,11 @@ function insertMissingImgs(shapeIds, documentFragment, writer) {
 }
 /**
  * Finds all `<img>` elements in a given document fragment which have source pointing to local `file://` resource.
+ * This function also tracks the index position of each image in the document, which is essential for
+ * precise matching with hexadecimal representations in RTF data.
  *
  * @param documentFragment Document fragment in which to look for `<img>` elements.
- * @returns result All found images grouped by source type.
+ * @returns Array of found images along with their position index in the document.
  */
 function findAllImageElementsWithLocalSource(documentFragment, writer) {
     const range = writer.createRangeIn(documentFragment);
@@ -190,11 +192,16 @@ function findAllImageElementsWithLocalSource(documentFragment, writer) {
         name: 'img'
     });
     const imgs = [];
+    let currentImageIndex = 0;
     for (const value of range) {
         if (value.item.is('element') && imageElementsMatcher.match(value.item)) {
             if (value.item.getAttribute('src').startsWith('file://')) {
-                imgs.push(value.item);
+                imgs.push({
+                    element: value.item,
+                    imageIndex: currentImageIndex
+                });
             }
+            currentImageIndex++;
         }
     }
     return imgs;
@@ -237,17 +244,20 @@ function extractImageDataFromRtf(rtfData) {
 }
 /**
  * Replaces `src` attribute value of all given images with the corresponding base64 image representation.
+ * Uses the image index to precisely match with the correct hexadecimal representation from RTF data.
  *
- * @param imageElements Array of image elements which will have its source replaced.
+ * @param imageElements Array of image elements along with their indices which will have their sources replaced.
  * @param imagesHexSources Array of images hex sources (usually the result of `extractImageDataFromRtf()` function).
- * The array should be the same length as `imageElements` parameter.
+ * Contains hexadecimal representations of ALL images in the document, not just those with `file://` URLs.
+ * In XML documents, the same image might be defined both as base64 in HTML and as hexadecimal in RTF data.
  */
 function replaceImagesFileSourceWithInlineRepresentation(imageElements, imagesHexSources, writer) {
-    // Assume there is an equal amount of image elements and images HEX sources so they can be matched accordingly based on existing order.
-    if (imageElements.length === imagesHexSources.length) {
-        for (let i = 0; i < imageElements.length; i++) {
-            const newSrc = `data:${imagesHexSources[i].type};base64,${_convertHexToBase64(imagesHexSources[i].hex)}`;
-            writer.setAttribute('src', newSrc, imageElements[i]);
+    for (let i = 0; i < imageElements.length; i++) {
+        const { element, imageIndex } = imageElements[i];
+        const rtfHexSource = imagesHexSources[imageIndex];
+        if (rtfHexSource) {
+            const newSrc = `data:${rtfHexSource.type};base64,${_convertHexToBase64(rtfHexSource.hex)}`;
+            writer.setAttribute('src', newSrc, element);
         }
     }
 }