feat(utils): add text email generation utility methods (#65)

* feat(utils): add generateTextEmailFromHTML

Add generateTextEmailFromHTML utility function to convert HTML to plaintext

Resolves #60

Signed-off-by: Niloy Sikdar <niloysikdar30@gmail.com>

* feat(utils): add generateTextEmail

Add generateTextEmail utility function to convert JSX Layout to plaintext

Resolves #60

Signed-off-by: Niloy Sikdar <niloysikdar30@gmail.com>

* test(utils): add tests for generateTextEmail

Add some more missing tests for all of the components for generateTextEmail method

Resolves #60

Signed-off-by: Niloy Sikdar <niloysikdar30@gmail.com>

package.json

@@ -43,6 +43,9 @@
       "yarn lint"
     ]
   },
+  "dependencies": {
+    "textversionjs": "^1.1.3"
+  },
   "peerDependencies": {
     "react": ">=16.8",
     "react-dom": ">=16.8"
@@ -69,6 +72,7 @@
     "@types/node": "^18.0.0",
     "@types/react": "^18.0.14",
     "@types/react-dom": "^18.0.5",
+    "@types/textversionjs": "^1.1.1",
     "@typescript-eslint/eslint-plugin": "^5.28.0",
     "@typescript-eslint/parser": "^5.28.0",
     "babel-jest": "^28.1.1",

src/utils/generateTextEmail/generateTextEmail.test.tsx

@@ -0,0 +1,53 @@
+import { generateTextEmail } from './generateTextEmail';
+import { Email, Section, Column, Typography, Button, Image } from '../../components';
+
+describe('generateTextEmail', () => {
+  test('should return expected text from the JSX Layout', () => {
+    const text = generateTextEmail(
+      <Email>
+        <Section>
+          <Column>
+            <Typography variant="h1">Hello World</Typography>
+          </Column>
+        </Section>
+      </Email>,
+    );
+
+    expect(text.trim()).toBe('# Hello World');
+  });
+
+  test('should return expected text from the Button component', () => {
+    const text = generateTextEmail(
+      <Email>
+        <Section>
+          <Column>
+            <Button href="https://github.com/leopardslab/react-email">Click Here</Button>
+          </Column>
+        </Section>
+      </Email>,
+    );
+
+    expect(text.trim()).toBe('[Click Here] (https://github.com/leopardslab/react-email)');
+  });
+
+  test('should return expected text from the Image component', () => {
+    const text = generateTextEmail(
+      <Email>
+        <Section>
+          <Column>
+            <Image
+              src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a"
+              alt="Alt text"
+              width="500px"
+              caption="This is a caption"
+            />
+          </Column>
+        </Section>
+      </Email>,
+    );
+
+    const expectedText = `![Alt text] (https://images.unsplash.com/photo-1453728013993-6d66e9c9123a)\nThis is a caption`;
+
+    expect(text.trim()).toBe(expectedText);
+  });
+});

src/utils/generateTextEmail/generateTextEmail.ts

@@ -0,0 +1,8 @@
+import { generateEmail } from '../generateEmail';
+import { generateTextEmailFromHTML } from '../generateTextEmailFromHTML';
+
+export const generateTextEmail = (jsxElement: JSX.Element): string => {
+  const HTML = generateEmail(jsxElement);
+  const plainText = generateTextEmailFromHTML(HTML);
+  return plainText;
+};

src/utils/generateTextEmail/index.ts

@@ -0,0 +1 @@
+export { generateTextEmail } from './generateTextEmail';

src/utils/generateTextEmailFromHTML/generateTextEmailFromHTML.test.ts

@@ -0,0 +1,11 @@
+import { generateTextEmailFromHTML } from './generateTextEmailFromHTML';
+
+const testHTML = `<p>To know more, <a href="https://github.com/leopardslab/react-email">Click Here</a>`;
+const expectedText = `To know more, [Click Here] (https://github.com/leopardslab/react-email)`;
+
+describe('generateTextEmailFromHTML', () => {
+  test('should return expectedText if we pass testHTML', () => {
+    const text = generateTextEmailFromHTML(testHTML);
+    expect(text.trim()).toEqual(expectedText.trim());
+  });
+});

src/utils/generateTextEmailFromHTML/generateTextEmailFromHTML.ts

@@ -0,0 +1,6 @@
+import htmlToPlainText from 'textversionjs';
+
+export const generateTextEmailFromHTML = (html: string): string => {
+  const plainText = htmlToPlainText(html, { headingStyle: 'hashify' });
+  return plainText;
+};

src/utils/generateTextEmailFromHTML/index.ts

@@ -0,0 +1 @@
+export { generateTextEmailFromHTML } from './generateTextEmailFromHTML';

src/utils/index.ts

@@ -1,3 +1,5 @@
 export { sx } from './sx';
 export { makeStyles } from './makeStyles';
 export { generateEmail } from './generateEmail';
+export { generateTextEmailFromHTML } from './generateTextEmailFromHTML';
+export { generateTextEmail } from './generateTextEmail';

yarn.lock

@@ -4131,6 +4131,11 @@
   resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.8.tgz#b94a4391c85666c7b73299fd3ad79d4faa435310"
   integrity sha512-ipixuVrh2OdNmauvtT51o3d8z12p6LtFW9in7U79der/kwejjdNchQC5UMn5u/KxNoM7VHHOs/l8KS8uHxhODQ==
 
+"@types/textversionjs@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@types/textversionjs/-/textversionjs-1.1.1.tgz#f31d5283d527f8cef9f6a4ee62cadf85e95f56b0"
+  integrity sha512-xXa08oZ76+J2rS36guKd6zJFAbkRtUnuDb0R6OFtY93VTuXdi94k0ycsIBrsq/Av8DmiQVfTYE3k7KCEUVYsag==
+
 "@types/uglify-js@*":
   version "3.16.0"
   resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.16.0.tgz#2cf74a0e6ebb6cd54c0d48e509d5bd91160a9602"
@@ -13889,6 +13894,11 @@ text-table@^0.2.0, text-table@~0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
 
+textversionjs@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/textversionjs/-/textversionjs-1.1.3.tgz#1b700aef780467786882e28ab126f77ca326a1e8"
+  integrity sha512-yZbBK7+1KRkgTJFOeIkCbQSZ+jR9ojDO/KrUKN3xEA6hA/DCMJ+aMWqjZ0rpxBJDjesbP795P5NEw+j3NnWJtA==
+
 throat@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/throat/-/throat-6.0.1.tgz#d514fedad95740c12c2d7fc70ea863eb51ade375"