fix: preserve graphassets images during HTML import (#136)

* fix: preserve graphassets images during HTML import

* Fix HTML import to preserve graphassets images

This change ensures that graphassets images are preserved when importing HTML.

Author: borivojevic

.changeset/light-chicken-shake.md

@@ -0,0 +1,5 @@
+---
+"@graphcms/html-to-slate-ast": patch
+---
+
+fix: preserve graphassets images during HTML import

packages/html-to-slate-ast/src/index.ts

@@ -54,11 +54,39 @@ const ELEMENT_TAGS: Record<
       ? el.getAttribute('title')
       : '(Image)';
     if (href === null) return {};
+
+    // Fix text node when pasting images; sanitize URLs;
+    // if the image is not hosted on graphassets.com, we convert it to a link
+    if (href.includes('graphassets.com') === false) {
+      return {
+        type: 'link',
+        href: sanitizeUrl(href),
+        title,
+        openInNewTab: true,
+      };
+    }
+
+    // if href includes graphassets.com, we convert it to a image
+    // handle is always the last part of the href
+    const handle = href.split('/').pop();
+
     return {
-      type: 'link',
-      href: sanitizeUrl(href),
-      title,
-      openInNewTab: true,
+      type: 'image',
+      src: href,
+      ...(el.hasAttribute('title') && { title: el.getAttribute('title') }),
+      ...(el.hasAttribute('width') && {
+        width: Number(el.getAttribute('width')),
+      }),
+      ...(el.hasAttribute('height') && {
+        height: Number(el.getAttribute('height')),
+      }),
+      ...(el.hasAttribute('class') && {
+        className: el.getAttribute('class'),
+      }),
+      ...(el.hasAttribute('style') && {
+        style: el.getAttribute('style'),
+      }),
+      ...(handle && { handle }),
     };
   },
   PRE: () => ({ type: 'code-block' }),

packages/html-to-slate-ast/test/index.test.ts

@@ -1189,6 +1189,29 @@ test('Converts an image pasted from Google Docs into a link node', () => {
   );
 });
 
+test('Keeps image if it is hosted on hygraph', () => {
+  return htmlToSlateAST(
+    `<img
+        title="this is this image&#39;s title"
+        src="https://media.graphassets.com/output=format:webp/resize=,width:667,height:1000/8xrjYm4CR721mAZ1YAoy"
+        width="600" height="1000" style="margin-left:0px;margin-top:0px;" />`
+  ).then(ast => {
+    expect(ast).toStrictEqual([
+      {
+        type: 'image',
+        src:
+          'https://media.graphassets.com/output=format:webp/resize=,width:667,height:1000/8xrjYm4CR721mAZ1YAoy',
+        width: 600,
+        height: 1000,
+        title: "this is this image's title",
+        style: 'margin-left:0px;margin-top:0px;',
+        handle: '8xrjYm4CR721mAZ1YAoy',
+        children: [],
+      },
+    ]);
+  });
+});
+
 test('Reshape an incorrectly structured table', () => {
   return htmlToSlateAST(
     '<table><colgroup><col /><col /></colgroup><thead><tr><th></th></tr></thead><tbody><tr><td></td></tr><tr></tr></tbody></table>'