fix: images are missing for the document in edit mode

Author: VladaHarbour

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

@@ -48,7 +48,10 @@ class DocxZipper {
           name: zipEntry.name,
           content,
         });
-      } else if (zipEntry.name.startsWith('word/media') && zipEntry.name !== 'word/media/') {
+      } else if (
+        (zipEntry.name.startsWith('word/media') && zipEntry.name !== 'word/media/') ||
+        (zipEntry.name.startsWith('media') && zipEntry.name !== 'media/')
+      ) {
         // If we are in node, we need to convert the buffer to base64
         if (isNode) {
           const buffer = await zipEntry.async('nodebuffer');

packages/super-editor/src/core/super-converter/v2/importer/imageImporter.js

@@ -116,8 +116,12 @@ export function handleImageImport(node, currentFileName, params) {
   if (!rel) return null;
 
   const { attributes: relAttributes } = rel;
+  const targetPath = relAttributes['Target'].startsWith('/')
+    ? relAttributes['Target'].slice(1)
+    : relAttributes['target'];
 
-  const path = `word/${relAttributes['Target']}`;
+  // Some images may appear out of the word folder
+  const path = targetPath.startsWith('word') || params.converter.media[targetPath] ? targetPath : `word/${targetPath}`;
 
   return {
     type: 'image',

packages/super-editor/src/dev/components/DeveloperPlayground.vue

@@ -3,6 +3,7 @@ import '@/style.css';
 import '@harbour-enterprises/common/styles/common-styles.css';
 
 import { ref, shallowRef, computed, onMounted } from 'vue';
+import { NMessageProvider } from 'naive-ui';
 import { SuperEditor } from '@/index.js';
 import { getFileObject } from '@harbour-enterprises/common/helpers/get-file-object';
 import { DOCX } from '@harbour-enterprises/common';
@@ -158,7 +159,9 @@ onMounted(async () => {
           </div>
 
           <div class="dev-app__content" v-if="currentFile">
-            <SuperEditor :file-source="currentFile" :options="editorOptions" />
+            <n-message-provider>
+              <SuperEditor :file-source="currentFile" :options="editorOptions" />
+            </n-message-provider>
           </div>
         </div>
       </div>