diff --git a/src/helpers/xml-builder.js b/src/helpers/xml-builder.js index f83b26de..a8605f5c 100644 --- a/src/helpers/xml-builder.js +++ b/src/helpers/xml-builder.js @@ -6,7 +6,7 @@ import { fragment } from 'xmlbuilder2'; // eslint-disable-next-line import/no-named-default import { default as namespaces } from './namespaces'; -import { rgbToHex, hslToHex, hslRegex, rgbRegex } from '../utils/color-conversion'; +import { rgbToHex, hslToHex, hslRegex, rgbRegex, hexRegex } from '../utils/color-conversion'; const isVNode = require('virtual-dom/vnode/is-vnode'); const isVText = require('virtual-dom/vnode/is-vtext'); @@ -270,8 +270,10 @@ const fixupColorCode = (colorCodeString) => { const luminosity = matchedParts[3]; return hslToHex(hue, saturation, luminosity); - } else if (/^#[0-9A-F]{6}$/i.test(colorCodeString)) { - return colorCodeString.replace('#', ''); + } else if (hexRegex.test(colorCodeString)) { + const matchedParts = colorCodeString.match(hexRegex); + + return matchedParts[1]; } }; @@ -463,11 +465,23 @@ const buildParagraph = (vNode, attributes, docxDocumentInstance) => { return paragraphFragment; }; -const buildTableCellProperties = (styles) => { +const buildTableCellProperties = (attributes) => { const tableCellPropertiesFragment = fragment({ namespaceAlias: { w: namespaces.w }, }).ele('@w', 'tcPr'); - // TODO: Add styles within it + if (attributes && attributes.constructor === Object) { + Object.keys(attributes).forEach((key) => { + // eslint-disable-next-line default-case + switch (key) { + case 'backgroundColor': + const shadingFragment = buildShading(attributes[key]); + tableCellPropertiesFragment.import(shadingFragment); + // Delete used property + // eslint-disable-next-line no-param-reassign + delete attributes.backgroundColor; + } + }); + } tableCellPropertiesFragment.up(); return tableCellPropertiesFragment; @@ -477,12 +491,27 @@ const buildTableCell = (vNode) => { const tableCellFragment = fragment({ namespaceAlias: { w: namespaces.w }, }).ele('@w', 'tc'); - const tableCellPropertiesFragment = buildTableCellProperties(); + const attributes = {}; + if (isVNode(vNode) && vNode.properties && vNode.properties.style) { + if ( + vNode.properties.style.color && + !['transparent', 'auto'].includes(vNode.properties.style.color) + ) { + attributes.color = fixupColorCode(vNode.properties.style.color); + } + if ( + vNode.properties.style['background-color'] && + !['transparent', 'auto'].includes(vNode.properties.style['background-color']) + ) { + attributes.backgroundColor = fixupColorCode(vNode.properties.style['background-color']); + } + } + const tableCellPropertiesFragment = buildTableCellProperties(attributes); tableCellFragment.import(tableCellPropertiesFragment); if (vNode.children && Array.isArray(vNode.children) && vNode.children.length) { for (let index = 0; index < vNode.children.length; index++) { const childVNode = vNode.children[index]; - const paragraphFragment = buildParagraph(childVNode); + const paragraphFragment = buildParagraph(childVNode, attributes); tableCellFragment.import(paragraphFragment); } } else { diff --git a/src/utils/color-conversion.js b/src/utils/color-conversion.js index f40f91bc..e09912c8 100644 --- a/src/utils/color-conversion.js +++ b/src/utils/color-conversion.js @@ -2,6 +2,7 @@ export const rgbRegex = /rgb\((\d+),\s*([\d.]+),\s*([\d.]+)\)/i; export const hslRegex = /hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/i; +export const hexRegex = /#([0-9A-F]{6})/i; // eslint-disable-next-line import/prefer-default-export export const rgbToHex = () => {