fix: Fix #21 by unwrapping images inside span

src/converters/blocks.js

@@ -83,4 +83,16 @@ const videoBlock = (elem) => {
   return block;
 };
 
-export { iframeBlock, imageBlock, videoBlock, getYTVideoId };
+const elementsWithConverters = {
+  IMG: imageBlock,
+  VIDEO: videoBlock,
+  IFRAME: iframeBlock,
+};
+
+export {
+  iframeBlock,
+  imageBlock,
+  videoBlock,
+  getYTVideoId,
+  elementsWithConverters,
+};

src/converters/fromHtml.js

@@ -87,13 +87,21 @@ const convertFromHTML = (input, defaultTextBlock) => {
   // convert to blocks
   for (const el of elements) {
     const children = el.childNodes;
+    let keepWrapper = el.textContent ? true : false;
     for (const child of children) {
+      // With children nodes, we keep the wrapper only
+      // if at least one child is not  in elementsWithConverters
+      keepWrapper = keepWrapper || false;
       if (elementsWithConverters.includes(child.tagName)) {
         el.removeChild(child);
         result.push(blockFromElement(child, defaultTextBlock));
+      } else {
+        keepWrapper = true;
       }
     }
-    result.push(blockFromElement(el, defaultTextBlock));
+    if (keepWrapper) {
+      result.push(blockFromElement(el, defaultTextBlock));
+    }
   }
   return result;
 };

src/converters/fromHtml.test.js

@@ -82,7 +82,7 @@ describe('convertFromHTML parsing html with images nested in h2', () => {
     const result = convertFromHTML(html, 'draftjs');
 
     test('will return an array of blocks', () => {
-      expect(result).toHaveLength(10);
+      expect(result).toHaveLength(8);
     });
 
     test('will have a first block with an image', () => {
@@ -113,7 +113,7 @@ describe('convertFromHTML parsing html with images nested in h2', () => {
     const result = convertFromHTML(html, 'slate');
 
     test('will return an array of blocks', () => {
-      expect(result).toHaveLength(10);
+      expect(result).toHaveLength(8);
     });
 
     test('will have a first block with an image', () => {
@@ -329,3 +329,41 @@ describe('convertFromHTML parsing whitespace inside unknown tags', () => {
     ]);
   });
 });
+
+describe('convertFromHTML parsing image inside a p element', () => {
+  const html = '<p><img src="image.jpeg"></p>';
+
+  describe('returns a block with an image', () => {
+    const result = convertFromHTML(html, 'slate');
+    expect(result).toHaveLength(1);
+    expect(result).toEqual([
+      {
+        '@type': 'image',
+        align: 'center',
+        alt: '',
+        size: 'l',
+        title: '',
+        url: 'image.jpeg',
+      },
+    ]);
+  });
+});
+
+describe('convertFromHTML parsing image inside a span element', () => {
+  const html = '<p><span><img src="image.jpeg"></span></p>';
+
+  describe('returns valid result preserving the whitespace', () => {
+    const result = convertFromHTML(html, 'slate');
+    expect(result).toHaveLength(1);
+    expect(result).toEqual([
+      {
+        '@type': 'image',
+        align: 'center',
+        alt: '',
+        size: 'l',
+        title: '',
+        url: 'image.jpeg',
+      },
+    ]);
+  });
+});

src/converters/slate.js

@@ -1,5 +1,6 @@
 import { jsx } from 'slate-hyperscript';
 import { Text } from 'slate';
+import { elementsWithConverters } from './blocks';
 import {
   groupInlineNodes,
   isWhitespace,
@@ -61,14 +62,20 @@ const bTagDeserializer = (el) => {
 const spanTagDeserializer = (el) => {
   const style = el.getAttribute('style') || '';
   let children = el.childNodes;
-  if (
-    // handle formatting from OpenOffice
-    children.length === 1 &&
-    children[0].nodeType === TEXT_NODE &&
-    children[0].textContent === '\n'
-  ) {
-    return jsx('text', {}, ' ');
+  if (children.length === 1) {
+    const child = children[0];
+    if (
+      // handle formatting from OpenOffice
+      child.nodeType === TEXT_NODE &&
+      child.textContent === '\n'
+    ) {
+      return jsx('text', {}, ' ');
+    } else if (elementsWithConverters.hasOwnProperty(child.tagName)) {
+      // If we have a child element that has its own converter, use it
+      return elementsWithConverters[child.tagName](child);
+    }
   }
+
   children = deserializeChildren(el);
   if (children.length > 0) {
     // Handle Google Docs' <sub> formatting
@@ -82,7 +89,12 @@ const spanTagDeserializer = (el) => {
 };
 
 const blockTagDeserializer = (tagname) => (el) => {
-  let children = jsx('fragment', {}, deserializeChildren(el));
+  let children = deserializeChildren(el);
+  // Check if we already have a block information
+  if (children.length == 1 && children[0].hasOwnProperty('@type')) {
+    return children[0];
+  }
+  children = jsx('fragment', {}, children);
 
   if (
     ['td', 'th'].includes(tagname) &&
@@ -265,7 +277,13 @@ const slateTableBlock = (elem) => {
 const slateTextBlock = (elem) => {
   const block = {};
   let value = deserialize(elem);
-  if (!Array.isArray(value)) {
+  if (typeof value === 'object' && value.hasOwnProperty('@type')) {
+    // Return block information if it was processed somewhere else
+    // in the codebase
+    if (['image', 'html', 'video'].includes(value['@type'])) {
+      return value;
+    }
+  } else if (!Array.isArray(value)) {
     value = [value];
   }
   value = jsx('fragment', {}, value);