Added style properties of hr rule

Vishalk91-4 · Vishalk91-4 · commit 874210f7e864 · 2024-10-07T15:35:28.000+05:30
Signed-off-by: Vishal &lt;korada.vishal.phe22@itbhu.ac.in&gt;
diff --git a/example/example-node.js b/example/example-node.js
@@ -16,7 +16,7 @@ const htmlString = `<!DOCTYPE html>
         <div>
             <p>Taken from wikipedia</p>
             <p>Taken from wikipedia</p>
-            <hr>
+            <hr style="border: 10px dotted red;" />
             <p>This is a test for hr tag</p>
             <hr>
             <img
diff --git a/index.js b/index.js
@@ -4,6 +4,7 @@ import { minify } from 'html-minifier-terser';
 
 import createDocumentOptionsAndMergeWithDefaults from './src/utils/options-utils';
 import addFilesToContainer from './src/html-to-docx';
+import { defaultHorizontalRuleOptions } from './src/constants';
 
 const minifyHTMLString = async (htmlString) => {
   try {
@@ -25,10 +26,15 @@ async function generateContainer(
   htmlString,
   headerHTMLString,
   documentOptions = {},
-  footerHTMLString
+  footerHTMLString,
+  customDefaults = {}
 ) {
   const zip = new JSZip();
 
+  if (customDefaults.hrStyles) {
+    Object.assign(defaultHorizontalRuleOptions, customDefaults.hrStyles);
+  }
+
   const normalizedDocumentOptions = createDocumentOptionsAndMergeWithDefaults(documentOptions);
 
   let contentHTML = htmlString;
diff --git a/src/constants.js b/src/constants.js
@@ -38,7 +38,7 @@ const defaultHorizontalRuleOptions = {
   val: 'single',
   sz: '24',
   space: '1',
-  color: '000000',
+  color: 'FF0000',
 };
 const defaultDocumentOptions = {
   orientation: defaultOrientation,
diff --git a/src/helpers/render-document-file.js b/src/helpers/render-document-file.js
@@ -1,3 +1,4 @@
+// render-document-file.js
 /* eslint-disable no-await-in-loop */
 /* eslint-disable no-case-declarations */
 import { fragment } from 'xmlbuilder2';
@@ -311,7 +312,7 @@ async function findXMLEquivalent(docxDocumentInstance, vNode, xmlFragment) {
       xmlFragment.import(linebreakFragment);
       return;
     case 'hr':
-      const hrFragment = buildHorizontalRule();
+      const hrFragment = buildHorizontalRule(vNode, vNode.properties.style);
       xmlFragment.import(hrFragment);
       return;
     case 'head':
@@ -358,4 +359,4 @@ async function renderDocumentFile(docxDocumentInstance) {
   return populatedXmlFragment;
 }
 
-export default renderDocumentFile;
+export default renderDocumentFile;
diff --git a/src/helpers/xml-builder.js b/src/helpers/xml-builder.js
@@ -12,7 +12,6 @@ import { cloneDeep } from 'lodash';
 import imageToBase64 from 'image-to-base64';
 import sizeOf from 'image-size';
 import { getMimeType } from '../utils/image'
-
 import namespaces from '../namespaces';
 import {
   rgbToHex,
@@ -55,7 +54,8 @@ import {
   imageType,
   internalRelationship,
   defaultTableBorderOptions,
-  defaultTableBorderAttributeOptions
+  defaultTableBorderAttributeOptions,
+  defaultHorizontalRuleOptions,
 } from '../constants';
 import { vNodeHasChildren } from '../utils/vnode';
 import { isValidUrl } from '../utils/url';
@@ -179,22 +179,44 @@ const buildTableRowHeight = (tableRowHeight) =>
     .att('@w', 'hRule', 'atLeast')
     .up();
 
-const buildHorizontalRule = () => {
-  const hrFragment = fragment({ namespaceAlias: { w: namespaces.w } }).ele('@w', 'p');
-  const pPr = hrFragment.ele('@w', 'pPr');
-  const pBdr = pPr.ele('@w', 'pBdr');
-  pBdr.ele('@w', 'bottom', {
-    'w:val': 'single',
-    'w:sz': '24',
-    'w:space': '1',
-    'w:color': '000000'
+const buildHorizontalRule = (element, styles = {}) => {
+  // Parse inline styles from the element
+  const inlineStyles = (styleString => {
+    const styles = {};
+    if (styleString) {
+      styleString.split(";").forEach(style => {
+        const [key, value] = style.split(":").map(s => s.trim());
+        if (key && value) {
+          styles[key] = value;
+        }
+      });
+    }
+    return styles;
+  })(element && typeof element.getAttribute === 'function' ? element.getAttribute("style") : "");
+
+  // Merge inline styles with default styles and additional styles
+  const mergedStyles = { ...defaultHorizontalRuleOptions, ...styles, ...inlineStyles };
+
+  // Use the imported fragment directly
+  const hrFragment = fragment({ namespaceAlias: { w: namespaces.w } }).ele("@w", "p");
+  const pPr = hrFragment.ele("@w", "pPr");
+  const pBdr = pPr.ele("@w", "pBdr");
+
+  // Define the bottom border properties
+  pBdr.ele("@w", "bottom", {
+    "w:val": mergedStyles.val || 'single',
+    "w:sz": mergedStyles.sz || '4',
+    "w:space": mergedStyles.space || '1',
+    "w:color": mergedStyles.color || 'auto'
   });
+
   pBdr.up();
   pPr.up();
   hrFragment.up();
-  return hrFragment;
-};
 
+  return hrFragment;
+}; 
+    
 const buildVerticalAlignment = (verticalAlignment) => {
   if (verticalAlignment.toLowerCase() === 'middle') {
     verticalAlignment = 'center';
diff --git a/src/html-to-docx.js b/src/html-to-docx.js
@@ -1,3 +1,4 @@
+// html-to-docx.js
 import { create } from 'xmlbuilder2';
 import VNode from 'virtual-dom/vnode/vnode';
 import VText from 'virtual-dom/vnode/vtext';
@@ -22,6 +23,7 @@ import {
   themeFolder,
   themeType,
 } from './constants';
+import { buildHorizontalRule } from './helpers/xml-builder';
 
 const convertHTML = HTMLToVDOM({
   VNode,
@@ -146,4 +148,4 @@ async function addFilesToContainer(
   return zip;
 }
 
-export default addFilesToContainer;
+export default addFilesToContainer;
