Add improvements to app

aslamplr · Mar 6, 2020 · 2215fd4 · 2215fd4
1 parent 22659dc
commit 2215fd4
Show file tree

Hide file tree

Showing 4 changed files with 186 additions and 11 deletions.
diff --git a/www/index.html b/www/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8">
     <title>Unicode to ML-TT Converter</title>
+    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
     <style>
       body {
         margin: 0px;

diff --git a/www/index.js b/www/index.js
@@ -2,8 +2,8 @@ import * as mlttConverter from 'unicode-to-mltt-converter';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
-import { Box, Button, Heading, Grommet, TextArea } from 'grommet';
-import { Notification } from 'grommet-icons';
+import { Box, Button, Heading, Grommet, TextArea, Paragraph } from 'grommet';
+import { Sync, Copy } from 'grommet-icons';
 
 const theme = {
     global: {
@@ -47,16 +47,31 @@ const App = _ => {
     const [charmapValue, setCharMapValue] = React.useState('');
     const [inputValue, setInputValue] = React.useState('');
     const [value, setValue] = React.useState('');
+
+    React.useEffect(() => {
+        fetch("public/karthika.map").then((resp) => resp.text()).then((defaultCharmapVal) => {
+            setCharMapValue(defaultCharmapVal);
+        });
+    }, []);
+
+    const resultTextAreaEl = React.useRef(null);
+
     const convert = () => {
         const text = mlttConverter.convert(inputValue, charmapValue);
         setValue(text);
     }
 
+    const copyToClipboard = (event) => {
+        resultTextAreaEl.current.select();
+        document.execCommand('copy');
+        event.target.focus();
+    }
+
     return (
         <Grommet theme={theme} full>
             <Box fill>
                 <AppBar>
-                    <Heading level='3' margin='none'>Unicode to ML-TT Converter</Heading>
+                    <Heading level='3' margin='none'>Malayalam unicode to ML-TT Converter</Heading>
                 </AppBar>
                 <Box direction='row' flex overflow={{ horizontal: 'hidden' }}>
                     <Box
@@ -66,25 +81,32 @@ const App = _ => {
                         pad={{ left: 'medium', right: 'small', vertical: 'small' }}
                         gap='medium'
                     >
+                        <Paragraph fill>
+                        Malayalam Unicode to ML-TT Converter is an utility for converting Malayalam Unicode characters to 
+                        corresponding ML-TT encoding. It uses default Karthika font character mapping. 
+                        </Paragraph>
                         <TextArea
-                            size='xlarge'
-                            placeholder='place char map content here'
+                            rows="10"
+                            size='xsmall'
+                            placeholder='loading default char map...'
                             value={charmapValue}
                             onChange={event => setCharMapValue(event.target.value)}
                         />
                         <TextArea
-                            size='xlarge'
-                            placeholder='type here'
+                            rows="10"
+                            placeholder='type/paste unicode input here!'
                             value={inputValue}
                             onChange={event => setInputValue(event.target.value)}
                         />
                         <TextArea
-                            size='xlarge'
-                            placeholder='result goes here'
+                            rows="10"
+                            ref={resultTextAreaEl}
+                            placeholder='click Convert to see the results here!'
                             value={value}
                             onChange={event => setValue(event.target.value)}
                         />
-                        <Button primary label='convert' icon={<Notification />} onClick={convert} />
+                        <Button primary label='Convert' icon={<Sync />} onClick={convert} />
+                        <Button label='Copy' icon={<Copy />} onClick={copyToClipboard} />
                     </Box>
                 </Box>
             </Box>

diff --git a/www/public/karthika.map b/www/public/karthika.map
@@ -0,0 +1,149 @@
+# This is default charmap based on ML-TT Karthika font
+# Edit the following mapping to make changes.
+# Source: https://github.com/asdofindia/unicode-conversion-maps/blob/master/karthika.map
+w=ം
+x=ഃ
+A=അ
+B=ആ
+C=ഇ
+Cu=ഈ
+D=ഉ
+Du=ഊ
+E=ഋ
+\p=ഌ
+F=എ
+G=ഏ
+sF=ഐ
+H=ഒ
+Hm=ഓ
+Hu=ഔ
+I=ക
+J=ഖ
+K=ഗ
+L=ഘ
+M=ങ
+N=ച
+O=ഛ
+P=ജ
+Q=ഝ
+R=ഞ
+S=ട
+T=ഠ
+U=ഡ
+V=ഢ
+W=ണ
+X=ത
+Y=ഥ
+Z=ദ
+[=ധ
+\=ന
+]=പ
+^=ഫ
+_=ബ
+`=ഭ
+a=മ
+b=യ
+c=ര
+d=റ
+e=ല
+f=ള
+g=ഴ
+h=വ
+i=ശ
+j=ഷ
+k=സ
+l=ഹ
+m=ാ
+n=ി
+o=ീ
+p=ു
+q=ൂ
+r=ൃ
+s=െ
+t=േ
+ss=ൈ
+sm=ൊ
+tm=ോ
+su=ൌ
+v=്‌
+u=ൗ
+¡=ക്ക
+¡=ക്ക
+¢=ക്ല
+£=ക്ഷ
+€=ഗ്ഗ
+¥=ഗ്ല
+Š=ങ്ക
+§=ങ്ങ
+š=ച്ച
+©=ഞ്ച
+ª=ഞ്ഞ
+«=ട്ട
+¬=ണ്‍
+=ണ്ട
+®=ണ്ണ
+¯=ത്ത
+°=ത്ഥ
+±=ദ്ദ
+²=ദ്ധ
+³=ന്‍
+µ=ന്ദ
+¶=ന്ന
+·=ന്മ
+¹=പ്ല
+º=ബ്ബ
+»=ബ്ല
+Œ=മ്പ
+œ=മ്മ
+Ÿ=മ്ല
+¿=യ്യ
+À=ര്‍
+Á=റ്റ
+Â=ല്‍
+Ã=ല്ല
+Ä=ള്‍
+Å=ള്ള
+Æ=വ്വ
+Ç=ശ്ല
+È=ശ്ശ
+É=സ്ല
+Ê=സ്സ
+Ë=ഹ്ല
+Ì=സ്റ്റ
+Í=ഡ്ഡ
+Î=ക്ട
+Ï=ബ്ധ
+Ð=ബ്ദ
+Ñ=ച്ഛ
+Ò=ഹ്മ
+Ó=ഹ്ന
+Ô=ന്ധ
+Õ=ത്സ
+Ö=ജ്ജ
+×=ണ്മ
+Ø=സ്ഥ
+Ù=ന്ഥ
+Ú=ജ്ഞ
+Û=ത്ഭ
+Ü=ഗ്മ
+Ý=ശ്ച
+Þ=ണ്ഡ
+ß=ത്മ
+à=ക്ത
+á=ഗ്ന
+â=ന്റ
+ã=ഷ്ട
+ä=റ്റ
+å=ന്
+y=്യ
+z=്വ
+{=്ര
+´=ന്ത
+¸=പ്പ
+¨=ച്ച
+¦=ങ്ക
+¼=മ്പ
+½=മ്മ
+¤=ഗ്ഗ
+þ=-
+∂=ന്ന
diff --git a/www/webpack.config.js b/www/webpack.config.js
@@ -25,7 +25,10 @@ module.exports = {
   },
   resolve: { extensions: ["*", ".js", ".jsx"] },
   plugins: [
-    new CopyWebpackPlugin(['index.html']),
+    new CopyWebpackPlugin([
+      'index.html', 
+      {from: "public/", to: "public/", toType: "dir"}
+    ]),
     new webpack.HotModuleReplacementPlugin()
   ],
 };