fix: add relationship and rId

Author: artem-harbour

packages/super-editor/src/core/super-converter/docx-helpers/document-rels.js

@@ -138,6 +138,10 @@ export const insertNewRelationship = (target, type, editor) => {
     },
   };
 
+  if (type === 'hyperlink') {
+    newRel.attributes.TargetMode = 'External';
+  }
+
   // Insert the new relationship
   relationshipsTag.elements.push(newRel);
 

packages/super-editor/src/core/super-converter/docx-helpers/document-rels.test.js

@@ -308,6 +308,7 @@ describe('insertNewRelationship', () => {
         Id: 'rId43',
         Type: RELATIONSHIP_TYPES.hyperlink,
         Target: 'bar',
+        TargetMode: 'External',
       },
     });
   });

packages/super-editor/src/extensions/image/imageHelpers/startImageUpload.js

@@ -1,15 +1,15 @@
 import { ImagePlaceholderPluginKey, findPlaceholder } from './imagePlaceholderPlugin.js';
 import { handleImageUpload as handleImageUploadDefault } from './handleImageUpload.js';
 import { processUploadedImage } from './processUploadedImage.js';
+import { insertNewRelationship } from '@core/super-converter/docx-helpers/document-rels.js';
 
 export const startImageUpload = async ({ editor, view, file }) => {
-  // Handler from config or default
-  let imageUploadHandler =
+  const imageUploadHandler =
     typeof editor.options.handleImageUpload === 'function'
       ? editor.options.handleImageUpload
       : handleImageUploadDefault;
 
-  let fileSizeMb = (file.size / (1024 * 1024)).toFixed(4);
+  let fileSizeMb = Number((file.size / (1024 * 1024)).toFixed(4));
 
   if (fileSizeMb > 5) {
     window.alert('Image size must be less than 5MB');
@@ -29,6 +29,16 @@ export const startImageUpload = async ({ editor, view, file }) => {
     return;
   }
 
+  await uploadImage({
+    editor,
+    view,
+    file,
+    size: { width, height },
+    uploadHandler: imageUploadHandler,
+  });
+};
+
+export async function uploadImage({ editor, view, file, size, uploadHandler }) {
   // A fresh object to act as the ID for this upload
   let id = {};
 
@@ -52,7 +62,7 @@ export const startImageUpload = async ({ editor, view, file }) => {
   tr.setMeta(ImagePlaceholderPluginKey, imageMeta);
   view.dispatch(tr);
 
-  imageUploadHandler(file).then(
+  await uploadHandler(file).then(
     (url) => {
       let fileName = file.name.replace(' ', '_');
       let placeholderPos = findPlaceholder(view.state, id);
@@ -68,9 +78,18 @@ export const startImageUpload = async ({ editor, view, file }) => {
       let removeMeta = { type: 'remove', id };
 
       let mediaPath = `word/media/${fileName}`;
+
+      let rId = null;
+      if (editor.options.mode === 'docx') {
+        const [, path] = mediaPath.split('word/'); // Path without 'word/' part.
+        const id = addImageRelationship({ editor, path });
+        if (id) rId = id;
+      }
+
       let imageNode = schema.nodes.image.create({
         src: mediaPath,
-        size: { width, height },
+        size,
+        rId,
       });
 
       editor.storage.image.media = Object.assign(editor.storage.image.media, { [mediaPath]: url });
@@ -93,4 +112,15 @@ export const startImageUpload = async ({ editor, view, file }) => {
       view.dispatch(tr.setMeta(ImagePlaceholderPluginKey, removeMeta));
     },
   );
-};
+}
+
+function addImageRelationship({ editor, path }) {
+  const target = path;
+  const type = 'image';
+  try {
+    const id = insertNewRelationship(target, type, editor);
+    return id;
+  } catch (err) {
+    return null;
+  }
+}

packages/super-editor/src/extensions/link/link.js

@@ -1,5 +1,6 @@
 import { Mark, Attribute } from '@core/index.js';
 import { getMarkRange } from '@/core/helpers/getMarkRange.js';
+import { insertNewRelationship } from '@core/super-converter/docx-helpers/document-rels.js';
 
 /**
  * Move `from` forward and `to` backward until the first / last
@@ -146,7 +147,15 @@ export const Link = Mark.create({
           if (underlineMarkType) tr = tr.removeMark(from, to, underlineMarkType);
 
           if (underlineMarkType) tr = tr.addMark(from, to, underlineMarkType.create());
-          tr = tr.addMark(from, to, linkMarkType.create({ href, text: finalText }));
+
+          let rId = null;
+          if (editor.options.mode === 'docx') {
+            const id = addLinkRelationship({ editor, href });
+            if (id) rId = id;
+          }
+
+          const newLinkMarkType = linkMarkType.create({ href, text: finalText, rId });
+          tr = tr.addMark(from, to, newLinkMarkType);
 
           dispatch(tr.scrollIntoView());
           return true;
@@ -191,3 +200,14 @@ function isAllowedUri(uri, protocols) {
       .match(new RegExp(`^(?:(?:${allowedProtocols.join('|')}):|[^a-z]|[a-z+.-]+(?:[^a-z+.-:]|$))`, 'i'))
   );
 }
+
+function addLinkRelationship({ editor, href }) {
+  const target = href;
+  const type = 'hyperlink';
+  try {
+    const id = insertNewRelationship(target, type, editor);
+    return id;
+  } catch (err) {
+    return null;
+  }
+}

packages/super-editor/src/tests/editor/data/imageBase64.js

@@ -0,0 +1,61 @@
+import { loadTestDataForEditorTests, initTestEditor } from '@tests/helpers/helpers.js';
+import { TextSelection } from 'prosemirror-state';
+import { expect } from 'vitest';
+import { getDocumentRelationshipElements } from '@core/super-converter/docx-helpers/document-rels.js';
+import { uploadImage } from '@extensions/image/imageHelpers/startImageUpload.js';
+import { handleImageUpload as handleImageUploadDefault } from '@extensions/image/imageHelpers/handleImageUpload.js';
+import { imageBase64 } from './data/imageBase64.js';
+
+describe('Relationships tests', () => {
+  window.URL.createObjectURL = vi.fn().mockImplementation((file) => {
+    return file.name;
+  });
+
+  const filename = 'blank-doc.docx';
+  let docx, media, mediaFiles, fonts, editor;
+
+  beforeAll(async () => ({ docx, media, mediaFiles, fonts } = await loadTestDataForEditorTests(filename)));
+  beforeEach(() => ({ editor } = initTestEditor({ content: docx, media, mediaFiles, fonts })));
+
+  it('tests that the inserted link has a rId and a relationship', () => {
+    editor.commands.insertContentAt(0, 'link');
+
+    editor.view.dispatch(editor.state.tr.setSelection(TextSelection.create(editor.state.doc, 0, 5)));
+    editor.commands.setLink({ href: 'https://www.superdoc.dev' });
+
+    const linkMark = editor.state.doc.firstChild.firstChild.marks[0];
+
+    expect(linkMark.type.name).toBe('link');
+    expect(linkMark.attrs.rId).toBeTruthy();
+
+    const relationships = getDocumentRelationshipElements(editor);
+    const found = relationships.find((i) => i.attributes.Id === linkMark.attrs.rId);
+
+    expect(found).toBeTruthy();
+    expect(found.attributes.Target).toBe('https://www.superdoc.dev');
+  });
+
+  it('tests that the uploaded image has a rId and a relationship', async () => {
+    const blob = await fetch(imageBase64).then((res) => res.blob());
+    const file = new File([blob], 'image.png', { type: 'image/png' });
+
+    await uploadImage({
+      editor,
+      view: editor.view,
+      file,
+      size: { width: 100, height: 100 },
+      uploadHandler: handleImageUploadDefault,
+    });
+
+    const imageNode = editor.state.doc.firstChild.firstChild;
+
+    expect(imageNode.type.name).toBe('image');
+    expect(imageNode.attrs.rId).toBeTruthy();
+
+    const relationships = getDocumentRelationshipElements(editor);
+    const found = relationships.find((i) => i.attributes.Id === imageNode.attrs.rId);
+
+    expect(found).toBeTruthy();
+    expect(found.attributes.Target).toBe('media/image.png');
+  });
+});