fix(markdown): convert inline CSS from Google Docs to Markdown (#7351)

Extends the HTML to Markdown conversion to better support bold and
italic formatting from Google Docs, which generates inline styles on a
`span` element instead of strong/b/em/i type elements.

Co-authored-by: Anze Demsar <anze.demsar@p-m.si>

Author: domcleal

packages/decap-cms-widget-markdown/src/MarkdownControl/plugins/html/withHtml.js

@@ -30,6 +30,11 @@ const TEXT_TAGS = {
   U: () => ({ underline: true }),
 };
 
+const INLINE_STYLES = {
+  'font-style': value => (value === 'italic' ? { italic: true } : {}),
+  'font-weight': value => (value === 'bold' || parseInt(value, 10) >= 600 ? { bold: true } : {}),
+};
+
 function deserialize(el) {
   if (el.nodeType === 3) {
     return el.textContent;
@@ -65,6 +70,20 @@ function deserialize(el) {
     return children.map(child => jsx('text', attrs, child));
   }
 
+  // Convert inline CSS on span elements generated by Google Docs
+  if (nodeName === 'SPAN') {
+    const attrs = {};
+    for (let i = 0; i < el.style.length; i++) {
+      const propertyName = el.style[i];
+      if (INLINE_STYLES[propertyName]) {
+        const propertyValue = el.style.getPropertyValue(propertyName);
+        const propertyStyle = INLINE_STYLES[propertyName](propertyValue);
+        Object.assign(attrs, propertyStyle);
+      }
+    }
+    return children.map(child => jsx('text', attrs, child));
+  }
+
   return children;
 }