From c7cebded638180795262b5a2864d6dcf48fe206e Mon Sep 17 00:00:00 2001 From: Dominic Cleal Date: Tue, 17 Dec 2024 15:53:33 +0000 Subject: [PATCH] fix(markdown): convert inline CSS from Google Docs to Markdown 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. --- .../MarkdownControl/plugins/html/withHtml.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/packages/decap-cms-widget-markdown/src/MarkdownControl/plugins/html/withHtml.js b/packages/decap-cms-widget-markdown/src/MarkdownControl/plugins/html/withHtml.js index a7f96cbec3e6..9dc9a5d73af7 100644 --- a/packages/decap-cms-widget-markdown/src/MarkdownControl/plugins/html/withHtml.js +++ b/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; }