Merge pull request #13 from crisanlucid/feature/add-unicode-ability

Feature/add unicode ability
crisanlucid · Jun 25, 2023 · b27dd27 · b27dd27
2 parents 7925085 + 70327ea
commit b27dd27
Show file tree

Hide file tree

Showing 10 changed files with 271 additions and 96 deletions.
diff --git a/dist/assets/favicon.63a26457.svg b/dist/assets/favicon.63a26457.svg
diff --git a/dist/index.html b/dist/index.html
@@ -2,11 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite-react-tailwind-bionic-reading/assets/favicon.63a26457.svg" />
+    <link rel="icon" type="image/svg+xml" href="/vite-react-tailwind-bionic-reading/assets/favicon.17e50649.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite App</title>
-    <script type="module" crossorigin src="/vite-react-tailwind-bionic-reading/assets/index.2061402f.js"></script>
-    <link rel="stylesheet" href="/vite-react-tailwind-bionic-reading/assets/index.4a521155.css">
+    <script type="module" crossorigin src="/vite-react-tailwind-bionic-reading/assets/index.f2c75c24.js"></script>
+    <link rel="stylesheet" href="/vite-react-tailwind-bionic-reading/assets/index.a4099584.css">
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "stylelint": "npx stylelint \"./**/*.{css}\" --config \"./stylelint.config.js\"",
+    "stylelint": "npx stylelint \"./**/*.{css,ts,tsx}\" --config \"./stylelint.config.js\"",
     "stylelint:fix": "npm run stylelint -- --fix",
     "prettier:fix": "prettier --config ./prettier.config.js --write ./src/**/*.{css,ts,tsx} ",
     "prettier:check": "prettier --config ./prettier.config.js --check ./src/**/*.{css,ts,tsx}",

diff --git a/src/hooks/useTextProcessing.tsx b/src/hooks/useTextProcessing.tsx
@@ -1,22 +1,22 @@
-import { FC, useState } from "react";
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import React, { useState } from 'react';
+import { timeout, toUnicodeVariant } from '../util';
 
-import { timeout } from "../util/helpers";
-
-export const useTextProcessing = () => {
+export const useTextProcessing = (isUnicode: boolean) => {
   const [isDisabled, setIsDisabled] = useState(false);
-  const [text, setText] = useState("");
-  const [pretext, setPretext] = useState("");
+  const [text, setText] = useState('');
+  const [pretext, setPretext] = useState('');
   const [listPrepText, setListPrepText] = useState([] as JSX.Element[]);
 
   const onChangeTextarea = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     setText(e?.target.value);
   };
 
   const processData = () => {
-    const prepText = text.split(" ");
+    const prepText = text.split(' ');
     console.log(prepText);
 
-    const listText = prepText.map((elem) => {
+    const listText = prepText.map((elem, index) => {
       let preElem = elem;
       let showNewLine = false;
       const match = /\r|\n/.exec(elem);
@@ -27,7 +27,6 @@ export const useTextProcessing = () => {
 
       const mid = Math.floor(preElem.length / 2);
 
-      console.log(preElem.slice(mid));
       return (
         <>
           {showNewLine && (
@@ -36,7 +35,13 @@ export const useTextProcessing = () => {
               <br />
             </>
           )}
-          <span className="bio-letter">{preElem.slice(0, mid)}</span>
+          {isUnicode ? (
+            <span key={index}>{toUnicodeVariant(preElem.slice(0, mid), 'bold')}</span>
+          ) : (
+            <span key={index} className='bio-letter'>
+              {preElem.slice(0, mid)}
+            </span>
+          )}
           {preElem.slice(mid)}
         </>
       );
@@ -45,22 +50,22 @@ export const useTextProcessing = () => {
     return listText;
   };
 
-  const onClickButton = async (e: React.MouseEvent<HTMLButtonElement>) => {
-    setPretext("processing...");
+  const onClickButton = async (e: React.MouseEvent<HTMLButtonElement>): Promise<void> => {
+    setPretext('processing...');
     setListPrepText([]);
 
-    console.log("wait...");
+    console.log('wait...', { e });
     setIsDisabled(true);
 
     const listPrepText = processData();
-    setPretext("processing...");
+    setPretext('processing...');
 
     await timeout(2000);
 
     setIsDisabled(false);
     setListPrepText(listPrepText);
-    setPretext("");
-    console.log("done...");
+    setPretext('');
+    console.log('done...');
   };
 
   return {

diff --git a/src/main.tsx b/src/main.tsx
@@ -1,10 +1,10 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import App from "./App";
-import "./index.css";
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+import './index.css';
 
-const container = document.getElementById("root");
-if (!container) throw new Error("no container to render to");
+const container = document.getElementById('root');
+if (!container) throw new Error('no container to render to');
 
 const root = createRoot(container);
 

diff --git a/src/pages/BionicReaderPage.tsx b/src/pages/BionicReaderPage.tsx
@@ -1,36 +1,41 @@
-import { FC, useState, useRef } from "react";
+import React, { FC, useState, useRef } from 'react';
 
-import { useTextProcessing } from "../hooks/useTextProcessing";
+import { useTextProcessing } from '../hooks/useTextProcessing';
 
-import html2canvas from "html2canvas";
-import { jsPDF } from "jspdf";
+import html2canvas from 'html2canvas';
+import { jsPDF } from 'jspdf';
 
-const FILE_PDF_NAME = "download.pdf";
+const FILE_PDF_NAME = 'download.pdf';
 export const BionicReaderPage: FC = () => {
+  const [isUnicode, setIsUnicode] = useState(false);
   const { listPrepText, isDisabled, onClickButton, onChangeTextarea, pretext } =
-    useTextProcessing();
+    useTextProcessing(isUnicode);
   const inputRef = useRef(null);
   const printDocument = () => {
     html2canvas(inputRef.current as unknown as HTMLElement)
       .then((canvas) => {
-        const imgData = canvas.toDataURL("image/png");
+        const imgData = canvas.toDataURL('image/png');
         const pdf = new jsPDF();
         const width = pdf.internal.pageSize.getWidth();
-        pdf.addImage(imgData, "JPEG", 5, 10, width - 10, 0);
+        pdf.addImage(imgData, 'JPEG', 5, 10, width - 10, 0);
         pdf.save(FILE_PDF_NAME);
       })
       .catch((e) => console.error(e));
   };
 
+  const onConvertToUnicodeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setIsUnicode(e.target.checked);
+  };
+
   return (
-    <div className="px-3 py-20 w-screen h-screen bg-gray-500">
-      <div className="mx-auto max-w-xs h-auto min-h-fit sm:max-w-lg md:max-w-4xl rounded-lg shadow bg-white p-4">
-        <h2 className="text-2xl font-bold my-2 text-left">Bionic Reading</h2>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <section className="text-left py-4">
-            <h3 className="text-lg font-bold pb-4">Insert Text:</h3>
+    <div className='px-3 py-20 w-screen h-screen bg-gray-500'>
+      <div className='mx-auto max-w-xs h-auto min-h-fit sm:max-w-lg md:max-w-4xl rounded-lg shadow bg-white p-4'>
+        <h2 className='text-2xl font-bold my-2 text-left'>Bionic Reading</h2>
+        <div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
+          <section className='text-left py-4'>
+            <h3 className='text-lg font-bold pb-4'>Insert Text:</h3>
             <textarea
-              className="form-control
+              className='form-control
               block
               w-full
               px-3
@@ -45,42 +50,46 @@ export const BionicReaderPage: FC = () => {
               ease-in-out
               m-0
               mb-4
-              focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
-              name="text"
-              id="controlTextarea"
+              focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none'
+              name='text'
+              id='controlTextarea'
               cols={30}
               rows={10}
-              aria-label="empty textarea"
-              placeholder="Empty"
+              aria-label='empty textarea'
+              placeholder='Empty'
               onChange={onChangeTextarea}
             ></textarea>
             <button
-              className="hover:bg-blue-700 bg-blue-600 text-gray-100 py-2 px-4 rounded"
+              className='hover:bg-blue-700 bg-blue-600 text-gray-100 py-2 px-4 rounded'
               disabled={isDisabled}
               onClick={onClickButton}
             >
               Convert
             </button>
+            <div className='ml-4 inline-block'>
+              <input type='checkbox' onChange={onConvertToUnicodeChange} />
+              <span className='font-normal'> Convert with Unicode</span>
+            </div>
           </section>
-          <section className="text-left py-4 overflow-hidden flex flex-col">
-            <h3 className="text-lg font-bold pb-4 ">Read Section:</h3>
+          <section className='text-left py-4 overflow-hidden flex flex-col'>
+            <h3 className='text-lg font-bold pb-4 '>Read Section:</h3>
 
             <p
-              className="whitespace-pre-wrap break-all basis-11/12 shadow mb-4 px-3
-              py-1.5"
-              id="divToPrint"
+              className='whitespace-pre-wrap break-all basis-11/12 shadow mb-4 px-3
+              py-1.5'
+              id='divToPrint'
               ref={inputRef}
             >
               {pretext}
-              <span className="t-text">
+              <span className='t-text'>
                 {listPrepText.map((text) => (
                   <>{text} </>
                 ))}
               </span>
             </p>
 
             <button
-              className="hover:bg-green-700 bg-green-600 text-gray-100 py-2 px-4 rounded self-start "
+              className='hover:bg-green-700 bg-green-600 text-gray-100 py-2 px-4 rounded self-start '
               disabled={isDisabled}
               onClick={printDocument}
             >

diff --git a/src/util/helpers.tsx → src/util/helpers.ts b/src/util/helpers.tsx → src/util/helpers.ts
diff --git a/src/util/index.ts b/src/util/index.ts
@@ -0,0 +1,2 @@
+export { timeout } from './helpers';
+export { toUnicodeVariant } from './toUnicodeVariant';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { timeout } from './helpers';
		export { toUnicodeVariant } from './toUnicodeVariant';