TurboDocx · Vishalk91-4 · Oct 5, 2024 · Oct 6, 2024 · Oct 7, 2024 · Oct 9, 2024
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -6,7 +6,19 @@
   "plugins": ["prettier"],
   "rules": {
     "prettier/prettier": ["error"],
-    "default-case": "off"
+    "default-case": "off",
+    "import/extensions": ["error", "ignorePackages", {
+      "js": "always",
+      "jsx": "always"
+    }],
+    "import/no-unresolved": "off",
+    "settings": {
+      "import/resolver": {
+        "node": {
+          "extensions": [".js", ".jsx"]
+        }
+      }
+    }
   },
   "ignorePatterns": "dist/**/*.js"
-}
+}
diff --git a/README.md b/README.md
@@ -83,6 +83,19 @@ full fledged examples can be found under `example/`
   - `lang` <?[String]> language localization code for spell checker to work properly. Defaults to `en-US`.
   - `preProcessing` <?[Object]>
     - `skipHTMLMinify` <?[Boolean]> flag to skip minification of HTML. Defaults to `false`.
+  - `hrStyles` <?[Object]>
+    - `height` <Number> The size of the border. Defaults to `24`.
+    - `width` <Number> The space around border. Defaults to `1`.
+    - `backgroundColor` <String> The color of the border. Defaults to `000000`.
+    - `borderOptions` <?[Object]>
+      - `size` <?[Number]> denotes the border size. Defaults to `0`.
+      - `val` <?[String]> denotes the style of the borderStyle. Defaults to `solid`.
+      - `color` <?[String]> determines the border color. Defaults to `000000`.
+    - `margins` <?[Object]>
+      - `top` <[Number]> distance between the top of the text margins for the main document and the top of the page for all pages in this section in [TWIP]. Defaults to 1440. Supports equivalent measurement in [pixel], [cm] or [inch].
+      - `right` <[Number]> distance between the right edge of the page and the right edge of the text extents for this document in [TWIP]. Defaults to 1800. Supports equivalent measurement in [pixel], [cm] or [inch].
+      - `bottom` <[Number]> distance between the bottom of text margins for the document and the bottom of the page in [TWIP]. Defaults to 1440. Supports equivalent measurement in [pixel], [cm] or [inch].
+      - `left` <[Number]> distance between the left edge of the page and the left edge of the text extents for this document in [TWIP]. Defaults to 1800. Supports equivalent measurement in [pixel], [cm] or [inch].
 - `footerHTMLString` <[String]> clean html string equivalent of footer. Defaults to `<p></p>` if footer flag is `true`.
 
 ### Returns

diff --git a/example/example-node.js b/example/example-node.js
@@ -15,6 +15,10 @@ const htmlString = `<!DOCTYPE html>
     <body>
         <div>
             <p>Taken from wikipedia</p>
+            <p>Taken from wikipedia</p>
+            <hr style="height:45px; background-color: blue; color: blue">
+            <p>This is a test for hr tag</p>
+            <hr style="height:2px; background-color: red; border: 5px dashed; color: green">
             <img
                 src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
                 alt="Red dot"

diff --git a/example/example.js b/example/example.js
@@ -15,6 +15,9 @@ const htmlString = `<!DOCTYPE html>
     <body>
         <div>
             <p>Taken from wikipedia</p>
+            <hr style="height:2px;border-width:0;color:gray;background-color:gray">
+            <p>This is a test for hr tag</p>
+            <hr>
             <img
                 src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
                 alt="Red dot"

diff --git a/example/react-example/src/App.js b/example/react-example/src/App.js
@@ -12,6 +12,10 @@ const htmlString = `<!DOCTYPE html>
     <body>
         <div>
             <p>Taken from wikipedia</p>
+            <p>Taken from wikipedia</p>
+            <hr>
+            <p>This is a test for hr tag</p>
+            <hr>
             <img
                 src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
                 alt="Red dot"

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
@@ -34,6 +34,22 @@ const defaultTableBorderAttributeOptions = {
   size: 1,
   stroke: 'single',
 };
+const defaultHorizontalRuleOptions = {
+  height: 10,
+  width: 100,
+  backgroundColor: '000000',
+  borderOptions: {
+    size: 10,
+    val: 'solid',
+    color: '000000',
+  },
+  margins: {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+  },
+};
 const defaultDocumentOptions = {
   orientation: defaultOrientation,
   margins: cloneDeep(portraitMargins),
@@ -59,6 +75,7 @@ const defaultDocumentOptions = {
     },
     borderOptions: defaultTableBorderOptions,
   },
+  hrStyles: defaultHorizontalRuleOptions,
   pageSize: {
     width: landscapeHeight,
     height: landscapeWidth,
@@ -124,6 +141,7 @@ export {
   defaultDocumentOptions,
   defaultTableBorderOptions,
   defaultHTMLString,
+  defaultHorizontalRuleOptions,
   relsFolderName,
   headerFileName,
   footerFileName,

diff --git a/src/docx-document.js b/src/docx-document.js
@@ -160,6 +160,7 @@ class DocxDocument {
     this.tableBorders =
       (properties.table && properties.table.borderOptions) ||
       defaultDocumentOptions.table.borderOptions;
+    this.horizontalRule = properties.horizontalRule || defaultDocumentOptions.hrStyles;
     this.pageNumber = properties.pageNumber || false;
     this.skipFirstHeaderFooter = properties.skipFirstHeaderFooter || false;
     this.lineNumber = properties.lineNumber ? properties.lineNumberOptions : null;

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';
@@ -19,6 +20,7 @@ import { vNodeHasChildren } from '../utils/vnode';
 import { isValidUrl } from '../utils/url';
 import { getMimeType } from '../utils/image';
 import { cloneDeep } from 'lodash';
+import { buildHorizontalRule } from '../helpers/xml-builder';
 
 const convertHTML = HTMLToVDOM({
   VNode,
@@ -309,6 +311,10 @@ async function findXMLEquivalent(docxDocumentInstance, vNode, xmlFragment) {
       const linebreakFragment = await xmlBuilder.buildParagraph(null, {});
       xmlFragment.import(linebreakFragment);
       return;
+    case 'hr':
+      const hrFragment = buildHorizontalRule(vNode, vNode.properties.style);
+      xmlFragment.import(hrFragment);
+      return;
     case 'head':
       return;
   }
@@ -353,4 +359,4 @@ async function renderDocumentFile(docxDocumentInstance) {
   return populatedXmlFragment;
 }
 
-export default renderDocumentFile;
+export default renderDocumentFile;