Merge pull request #26 from plone/issue-25-old-tinymce-support

Fix #25 by handling TinyMCE styling for strong and emphasis
plone · Mar 16, 2023 · eeecc63 · eeecc63
2 parents c085ebd + 33a29e9
commit eeecc63
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 4 deletions.
diff --git a/src/converters/slate.js b/src/converters/slate.js
@@ -60,7 +60,7 @@ const bTagDeserializer = (el) => {
 };
 
 const spanTagDeserializer = (el) => {
-  const style = el.getAttribute('style') || '';
+  const style = (el.getAttribute('style') || '').replace(/\s/g, '');
   let children = el.childNodes;
   if (children.length === 1) {
     const child = children[0];
@@ -73,15 +73,22 @@ const spanTagDeserializer = (el) => {
     } else if (elementsWithConverters.hasOwnProperty(child.tagName)) {
       // If we have a child element that has its own converter, use it
       return elementsWithConverters[child.tagName](child);
+    } else if (style.indexOf('font-weight:bold') > -1) {
+      // Handle TinyMCE' bold formatting
+      return jsx('element', { type: 'strong' }, child.textContent);
+    } else if (style.indexOf('font-style:italic') > -1) {
+      // Handle TinyMCE' italic formatting
+      return jsx('element', { type: 'em' }, child.textContent);
     }
   }
 
   children = deserializeChildren(el);
   if (children.length > 0) {
-    // Handle Google Docs' <sub> formatting
-    if (style.replace(/\s/g, '').indexOf('vertical-align:sub') > -1) {
+    if (style.indexOf('vertical-align:sub') > -1) {
+      // Handle Google Docs' <sub> formatting
       children = jsx('element', { type: 'sub' }, children);
-    } else if (style.replace(/\s/g, '').indexOf('vertical-align:sup') > -1) {
+    } else if (style.indexOf('vertical-align:sup') > -1) {
+      // Handle Google Docs' <sup> formatting
       children = jsx('element', { type: 'sup' }, children);
     }
     return jsx('element', { type: 'span' }, children);

diff --git a/src/converters/slate.test.js b/src/converters/slate.test.js
@@ -128,6 +128,46 @@ describe('slateTextBlock processing a paragraph', () => {
       ]);
     });
   });
+
+  describe('with old TinyMCE settings for bold', () => {
+    const elem = elementFromString(
+      '<p>Normal Text <span style="font-weight: bold;">Bold Text</span> more normal text</p>',
+    );
+
+    test('will return one slate block with simple text', () => {
+      const result = slateTextBlock(elem);
+      expect(result.value).toEqual([
+        {
+          type: 'p',
+          children: [
+            { text: 'Normal Text ' },
+            { children: [{ text: 'Bold Text' }], type: 'strong' },
+            { text: ' more normal text' },
+          ],
+        },
+      ]);
+    });
+  });
+
+  describe('with old TinyMCE settings for italic', () => {
+    const elem = elementFromString(
+      '<p>Normal Text <span style="font-style: italic;">Italic Text</span> more normal text</p>',
+    );
+
+    test('will return one slate block with simple text', () => {
+      const result = slateTextBlock(elem);
+      expect(result.value).toEqual([
+        {
+          type: 'p',
+          children: [
+            { text: 'Normal Text ' },
+            { children: [{ text: 'Italic Text' }], type: 'em' },
+            { text: ' more normal text' },
+          ],
+        },
+      ]);
+    });
+  });
 });
 
 describe('slateTextBlock processing a simple pre block', () => {