adding handler for text-shadow property (#18)

TurboDocx · May 11, 2024 · 08be315 · 08be315
1 parent 9302e3e
commit 08be315
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 1 deletion.
diff --git a/example/example-node.js b/example/example-node.js
@@ -1437,6 +1437,13 @@ const htmlString = `<!DOCTYPE html>
             </p>
         </div>
 
+        <div>
+            <span style="text-shadow: 1px 1px 2px grey;">Add new domain</span> to Google Workspace
+            <p style="text-shadow: 1px 1px 2px grey;">This text has shadow.<strong> And this has shadow with strong tag.</strong> </p>
+            <p style="text-shadow:">This text has empty shadow property.</p>
+            <p style="text-shadow: none">This text has none shadow property.</p>
+        </div>
+
         <p>Some tr styles cases</p>
         <p>Color property only passed to tr</p>
         <div align="left">

diff --git a/example/example.js b/example/example.js
@@ -1437,6 +1437,13 @@ const htmlString = `<!DOCTYPE html>
             </p>
         </div>
 
+        <div>
+            <span style="text-shadow: 1px 1px 2px grey;">Add new domain</span> to Google Workspace
+            <p style="text-shadow: 1px 1px 2px grey;">This text has shadow.<strong> And this has shadow with strong tag.</strong> </p>
+            <p style="text-shadow:">This text has empty shadow property.</p>
+            <p style="text-shadow: none">This text has none shadow property.</p>
+        </div>
+
         <p>Some tr styles cases</p>
         <p>Color property only passed to tr</p>
         <div align="left">

diff --git a/example/react-example/src/App.js b/example/react-example/src/App.js
@@ -1434,6 +1434,13 @@ const htmlString = `<!DOCTYPE html>
             </p>
         </div>
 
+        <div>
+            <span style="text-shadow: 1px 1px 2px grey;">Add new domain</span> to Google Workspace
+            <p style="text-shadow: 1px 1px 2px grey;">This text has shadow.<strong> And this has shadow with strong tag.</strong> </p>
+            <p style="text-shadow:">This text has empty shadow property.</p>
+            <p style="text-shadow: none">This text has none shadow property.</p>
+        </div>
+
         <p>Some tr styles cases</p>
         <p>Color property only passed to tr</p>
         <div align="left">

diff --git a/src/helpers/xml-builder.js b/src/helpers/xml-builder.js
@@ -322,6 +322,11 @@ const fixupTextDecorationLine = (line) => {
   }
   return line;
 };
+const buildTextShadow = () =>
+  fragment({ namespaceAlias: { w: namespaces.w } })
+    .ele('@w', 'shadow')
+    .att('@w', 'val', true)
+    .up();
 
 // eslint-disable-next-line consistent-return
 const fixupLineHeight = (lineHeight, fontSize) => {
@@ -667,7 +672,9 @@ const modifiedStyleAttributesBuilder = (docxDocumentInstance, vNode, attributes,
           line: 'underline',
         };
       } else if (vNodeStyleKey === 'text-shadow') {
-        modifiedAttributes.textShadow = vNodeStyleValue;
+        if (vNodeStyleValue.trim() !== '' && vNodeStyleValue !== 'none') {
+          modifiedAttributes.textShadow = vNodeStyleValue;
+        }
       }
     }
   }
@@ -729,6 +736,8 @@ const buildFormatting = (htmlTag, options) => {
       return buildRunStyleFragment('Hyperlink');
     case 'textDecoration':
       return buildTextDecoration(options && options.textDecoration ? options.textDecoration : {});
+    case 'textShadow':
+      return buildTextShadow();
   }
 
   return null;
@@ -750,6 +759,10 @@ const buildRunProperties = (attributes) => {
       if (key === 'textDecoration') {
         options.textDecoration = attributes[key];
       }
+
+      if (key === 'textShadow') {
+        options.textShadow = attributes[key];
+      }
 
       const formattingFragment = buildFormatting(key, options);
       if (formattingFragment) {