@podlite/editor-react 0.0.9 → 0.0.13

package/lib/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../node_modules/react-is/cjs/react-is.production.min.js", "../../../node_modules/react-is/index.js", "../src/index.tsx", "../src/dict.ts"],
+  "sourcesContent": ["/** @license React v17.0.2\n * react-is.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n'use strict';var b=60103,c=60106,d=60107,e=60108,f=60114,g=60109,h=60110,k=60112,l=60113,m=60120,n=60115,p=60116,q=60121,r=60122,u=60117,v=60129,w=60131;\nif(\"function\"===typeof Symbol&&Symbol.for){var x=Symbol.for;b=x(\"react.element\");c=x(\"react.portal\");d=x(\"react.fragment\");e=x(\"react.strict_mode\");f=x(\"react.profiler\");g=x(\"react.provider\");h=x(\"react.context\");k=x(\"react.forward_ref\");l=x(\"react.suspense\");m=x(\"react.suspense_list\");n=x(\"react.memo\");p=x(\"react.lazy\");q=x(\"react.block\");r=x(\"react.server.block\");u=x(\"react.fundamental\");v=x(\"react.debug_trace_mode\");w=x(\"react.legacy_hidden\")}\nfunction y(a){if(\"object\"===typeof a&&null!==a){var t=a.$$typeof;switch(t){case b:switch(a=a.type,a){case d:case f:case e:case l:case m:return a;default:switch(a=a&&a.$$typeof,a){case h:case k:case p:case n:case g:return a;default:return t}}case c:return t}}}var z=g,A=b,B=k,C=d,D=p,E=n,F=c,G=f,H=e,I=l;exports.ContextConsumer=h;exports.ContextProvider=z;exports.Element=A;exports.ForwardRef=B;exports.Fragment=C;exports.Lazy=D;exports.Memo=E;exports.Portal=F;exports.Profiler=G;exports.StrictMode=H;\nexports.Suspense=I;exports.isAsyncMode=function(){return!1};exports.isConcurrentMode=function(){return!1};exports.isContextConsumer=function(a){return y(a)===h};exports.isContextProvider=function(a){return y(a)===g};exports.isElement=function(a){return\"object\"===typeof a&&null!==a&&a.$$typeof===b};exports.isForwardRef=function(a){return y(a)===k};exports.isFragment=function(a){return y(a)===d};exports.isLazy=function(a){return y(a)===p};exports.isMemo=function(a){return y(a)===n};\nexports.isPortal=function(a){return y(a)===c};exports.isProfiler=function(a){return y(a)===f};exports.isStrictMode=function(a){return y(a)===e};exports.isSuspense=function(a){return y(a)===l};exports.isValidElementType=function(a){return\"string\"===typeof a||\"function\"===typeof a||a===d||a===f||a===v||a===e||a===l||a===m||a===w||\"object\"===typeof a&&null!==a&&(a.$$typeof===p||a.$$typeof===n||a.$$typeof===g||a.$$typeof===h||a.$$typeof===k||a.$$typeof===u||a.$$typeof===q||a[0]===r)?!0:!1};\nexports.typeOf=y;\n", "'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n  module.exports = require('./cjs/react-is.production.min.js');\n} else {\n  module.exports = require('./cjs/react-is.development.js');\n}\n", "import * as React from 'react'\nimport { Controlled as CodeMirrorControlled, UnControlled as CodeMirror} from 'react-codemirror2'\nimport CMirror from 'codemirror'\nimport dictionary from './dict'\nimport { useState, useEffect, useRef, useMemo } from 'react'\nimport {isValidElementType, isElement} from  'react-is'\n\n// TODO: use bundler to add into package\n// import '../../../node_modules/codemirror/lib/codemirror.css';\nimport 'codemirror/mode/gfm/gfm';\nimport \"codemirror/addon/hint/show-hint\";\nimport 'codemirror/addon/hint/show-hint.css';\nimport './Editor.css';\n\n\n//@ts-ignore\nfunction useDebouncedEffect(fn, deps, time) {\n  const dependencies = [...deps, time] \n  useEffect(() => {\n    const timeout = setTimeout(fn, time);\n    return () => {\n      clearTimeout(timeout);\n    }\n  }, dependencies);\n}\n\n/* set window title */ \n// @ts-ignore\n// const setWindowTitle = (title: string) => { vmd.setWindowTitle(title) }\nexport interface ConverterResult  {\n     errors?:any,\n     result:any\n}\n\nlet instanceCM = null\ntype Props={\n    content: string,\n    onChangeSource:Function,\n    sourceType?: 'pod6' | 'md',\n    onConvertSource: (source:string)=>ConverterResult,\n    onSavePressed?: Function,\n    isDarkTheme? : boolean,\n    isLineNumbers?: boolean,\n    isAutoComplete?: boolean,\n    isPreviewModeEnabled? :boolean\n    isControlled?:boolean\n}\n\nexport default ({ \n        onChangeSource = ()=>{}, \n        content, \n        isDarkTheme = false, \n        isLineNumbers = false, \n        isPreviewModeEnabled = false, \n        onConvertSource, \n        onSavePressed = () => { },\n        sourceType = 'pod6',\n        isControlled=false,\n        isAutoComplete = true,\n    }: Props) => {\n  const [text, updateText] = useState(content)\n\n  const [marks, updateMarks] = useState([])\n  const [, updateScrollMap] = useState([])\n  \n  const [isPreviewMode, setPreviewMode] = useState(isPreviewModeEnabled)\n\n  const [isPreviewScroll, setPreviewScrolling] = useState(false);\n  const refValue = useRef(isPreviewScroll);\n  const [showTree, setShowTree] = useState(false)\n\n  const [filePath, setFilePath] = useState('')\n  const [fileName, setFileName] = useState('')\n  const [fileExt, setFileExt] = useState('')\n  const [isChanged, setChanged] = useState(false)\n\n  const [fileLoading, setFileLoading] = useState(true)\n\nuseEffect(()=>{\nupdateText(content)\n},[content])\n\n const [result, updateResult] = useState<ConverterResult>() \n  useDebouncedEffect(() => {\n    updateResult(onConvertSource(text))\n  }, [text], 50)\n \n  const inputEl = useRef(null)\n\n// hot keys\n  useEffect( () => {\n  const saveFileAction  =  () => {\n    if (isChanged)  {\n        console.warn(\"Save File\")\n        onSavePressed(text)\n\n    }\n  }\n})\n\n\nuseEffect(() => {\n    refValue.current = isPreviewScroll;\n});\nvar options: CMirror.EditorConfiguration = {\n  lineNumbers: isLineNumbers,\n  inputStyle: \"contenteditable\",\n  //@ts-ignore\n  spellcheck: true,\n  autofocus:true,\n  lineWrapping:true,\n  viewportMargin:Infinity,\n  mode: sourceType !== 'md' ? null : \n                            {\n                                name: \"gfm\",\n                                tokenTypeOverrides: {\n                                emoji: \"emoji\"\n                                }\n                            },\n theme: isDarkTheme ? \"duotone-dark\" : \"default\"\n};\n\n\nconst previewEl = useRef(null)\n\nuseEffect(() => {\n //@ts-ignore\n  const newScrollMap = [...document.querySelectorAll('.line-src')]\n                  .map(n => {\n                              const line = parseInt(n.getAttribute('data-line'),10 )\n                              //@ts-ignore\n                              const offsetTop = n.offsetTop\n                              return { line, offsetTop}\n                  })\n  //@ts-ignore                      \n  updateScrollMap(newScrollMap)\n  //@ts-ignore\n  const listener = (e) => { \n    if (!isPreviewScroll ) {return}\n    let element = e.target\n    //@ts-ignore\n    const getLine = (offset) => {\n      const c = newScrollMap.filter( i => i.offsetTop > offset )\n      const lineElement = c.shift() || newScrollMap[ newScrollMap.length - 1 ]\n      if (!lineElement)  {\n          console.warn(`[podlite-editor] can't get line for offset. Forget add .line-src ?`)\n      }\n      return lineElement.line\n      }\n    const line  =  getLine(element.scrollTop)\n    if (instanceCM) {\n      const t = element.scrollTop === 0 ? 0 : instanceCM.charCoords({line: line, ch: 0}, \"local\").top;\n      instanceCM.scrollTo(null, t);\n    }\n    return true\n  }\n  if (previewEl && previewEl.current) {\n      //@ts-ignore\n       previewEl.current.addEventListener(\"scroll\", listener);\n  }\n  return () => {\n    // @ts-ignore\n    previewEl && previewEl.current && previewEl && previewEl.current.removeEventListener(\"scroll\", listener);\n  };\n},[text,isPreviewScroll])\n\nuseEffect(() => {\n    //@ts-ignore\n    let cm = instanceCM\n    if (!cm) {return}\n    //@ts-ignore\n    marks.forEach(marker => marker.clear())\n    //@ts-ignore\n    let cmMrks:Array<never> = []\n    //@ts-ignore\n    if (result && result.errors ) {\n\n        //@ts-ignore\n        result.errors.map((loc:any)=>{\n            // @ts-ignore\n            let from = {line: loc.start.line-1, ch: loc.start.column-1 - (loc.start.offset === loc.end.offset)};\n            let to = {line: loc.end.line-1, ch: loc.end.column-1};\n\n            cmMrks.push(\n                        //@ts-ignore\n                        cm.markText(\n                            from,\n                            to, \n                            {\n                                className: 'syntax-error',\n                                title: ';data.error.message',\n                                css: \"color : red\"\n                            }\n                        )\n                            \n            )\n        })\n    }\n    updateMarks(cmMrks)\n\n},[text,result])\n\nconst previewHtml = <div className={ \"Editorright \" + (isDarkTheme ? 'dark' : '' )}\n                        onMouseEnter={()=>setPreviewScrolling(true)} \n                        onMouseMove={()=>setPreviewScrolling(true)} \n                        ref={previewEl} \n                        >\n                     {\n                     result ? \n                     isElement(result.result) ? <div className=\"content\">{result.result}</div> : <div \n                     dangerouslySetInnerHTML={{__html: result.result}} \n                     className=\"content\" \n                     ></div>\n                     : ''\n                        \n                        }\n                     </div>\n//@ts-ignore\nconst scrollEditorHandler = (editor) => {\n    if (refValue.current) { return }\n    let scrollInfo = editor.getScrollInfo();\n    // get line number of the top line in the page\n    let lineNumber = editor.lineAtHeight(scrollInfo.top, 'local') + 1;\n    if (previewEl) {\n        const el = previewEl.current\n        const elementId = `#line-${lineNumber}`\n        const scrollToElement = document.querySelector(elementId)\n        if (scrollToElement) {\n            //@ts-ignore\n            const scrollTo = scrollToElement.offsetTop\n            //@ts-ignore\n            el.scrollTo({\n            top: scrollTo,\n            left: 0,\n            behavior: 'smooth'\n            })\n        }\n    }\n}\nconst [instanceCMLocal, updateInstanceCM] = useState<any>()\n\nuseEffect(()=>{\n    if (!instanceCMLocal) return\n    if (!isAutoComplete) return\n    var onChange = function(instance, object)\n        {\n            // Check if the last inserted character is `=`.\n            if (object.text[0] === '=' &&\n                // start directive\n                instance.getRange({ch:0,line: object.to.line}, object.to).match(/^\\s*$/))\n            {\n                CMirror.showHint(instanceCMLocal, CMirror.hint.dictionaryHint);\n            }\n        }\n    instanceCMLocal.on('change', onChange);\n\n    CMirror.registerHelper('hint', 'dictionaryHint', function(editor) {\n        var cur = editor.getCursor();\n        var curLine = editor.getLine(cur.line);\n        var start = cur.ch;\n        var end = start;\n        while (end < curLine.length && /[\\w$]/.test(curLine.charAt(end))) ++end;\n        while (start && /[^=]/.test(curLine.charAt(start - 1))) --start;\n        var curWord = start !== end && curLine.slice(start, end);\n        var regex = new RegExp('' + curWord, 'i');\n        // filter dict by regex and sort by mostly nearness\n        const filterDictByRegex = (arr, regex)=>{\n            const dict = arr.reduce((acc, item)=>{\n                if (item === null) { return acc; }\n                const result = (typeof item === 'object' && !Array.isArray(item)) ?  item.displayText.match(regex): item.match(regex);\n                if ( result ) {\n                    acc.push({item, index:result.index})\n                }\n                return acc;\n            }, []);\n            return dict.sort((a, b) => a.index - b.index).map(i=>i.item)\n        }\n        return {\n            list: (!curWord ? dictionary : filterDictByRegex(dictionary,regex )),\n            from: CMirror.Pos(cur.line, start-1),\n            to: CMirror.Pos(cur.line, end)\n        }\n    });\n    instanceCMLocal.refresh()\n    return () => {\n        //@ts-ignore\n        instanceCMLocal.off('change', onChange)\n    }\n},[instanceCMLocal, isAutoComplete])\n\nreturn (\n  <div className=\"EditorApp\">\n    <div className={ isPreviewModeEnabled ? \"layoutPreview\": \"layout\"}>\n        <div className=\"Editorleft\" onMouseEnter={()=>setPreviewScrolling(false)}\n                               onMouseMove={()=>setPreviewScrolling(false)}\n        >\n        {isControlled ? \n            <CodeMirrorControlled\n            value={content}\n            editorDidMount={ editor => { instanceCM = editor; updateInstanceCM(editor) } }\n            onBeforeChange={(editor, data, value) => {\n                setChanged(true); \n                // updateText(value);\n                onChangeSource(value)\n            }}\n            onScroll={scrollEditorHandler}\n            options={options} \n            className=\"editorApp\"\n            />\n        :\n            <CodeMirror \n                value={content}\n                editorDidMount={ editor => { instanceCM = editor;  updateInstanceCM(editor) } }\n                onChange = { (editor, data, value) => { \n                    setChanged(true); \n                    updateText(value);\n                    onChangeSource(value)\n                } }\n                onScroll={scrollEditorHandler}\n                options={options} \n                className=\"editorApp\"\n            />\n         }\n         </div>\n         {previewHtml}\n    </div>\n  </div>\n);\n}\n", "// this file contains the dictionary ot the messages used in the podlite editor\n\nconst dict = [\n    {\n        \"displayText\": \"head1\",\n        \"text\": `=head1 `\n    },\n    {\n        \"displayText\": \"head2\",\n        \"text\": `=head2 `\n    },\n    \n    {\n        \"displayText\": \"head3\",\n        \"text\": `=head3 `\n    },\n    {\n        \"displayText\": \"item1 *\",\n        \"text\": `=item1 `\n    }, \n    {\n    \"displayText\": \"item1 1.)\",\n    \"text\": `=item1 # `\n},\n{\n    \"displayText\": \"item (1., 2.) \uD83C\uDFF7\",\n    \"text\": `=item1 # item \n    =item2 # item level 2\n    =item2 # item level 2\n=item1 # item\n    =item2 # item\n    =item2 # item level 2\n`},\n{\n    \"displayText\": \"item (*, *) \uD83C\uDFF7\",\n    \"text\": `=item1  item \n    =item2 item level 2\n    =item2 item level 2\n=item1  item\n    =item2 item\n    =item3  item level 2\n`},\n{\n    \"displayText\": \"Image \uD83C\uDFF7\",\n    \"text\": `=Image https://github.com/zag/podlite-desktop/blob/master/dist-assets/linux-icon/256x256.png?raw=true\n`,\n},\n{\n    \"displayText\": \"table simple \uD83C\uDFF7\",\n    \"text\":`=for table\n    mouse    | mice\n    horse    | horses\n    elephant | elephants\n`\n},\n{\n    \"displayText\": \"table 2x \uD83C\uDFF7\",\n    \"text\": `=begin table :caption('Caption of table')\nConstants           1\nVariables           10\nSubroutines         33\nEverything else     57\n=end table\n`},\n{\n    \"displayText\": \"table 3x \uD83C\uDFF7\",\n    \"text\": `=for table :caption('Caption of table')\n    Animal | Legs |    Eats\n    =======================\n    Zebra  +   4  + Cookies\n    Human  +   2  +   Pizza\n    Shark  +   0  +    Fish\n`\n},\n{\n    \"displayText\": \"Diagram simple \uD83C\uDFF7\",\n    \"text\": `=begin Diagram  :caption('Caption of diagram')\n    graph LR\n            A-->B\n            B-->C\n            C-->A\n            D-->C\n=end Diagram\n`\n},\n{\n    \"displayText\": \"Diagram Sequence \uD83C\uDFF7\",\n    \"text\": `=for Diagram :caption('Caption of diagram')\n    sequenceDiagram\n        autonumber\n        Student->>Admin: Can I enrol this semester?\n        loop enrolmentCheck\n            Admin->>Admin: Check previous results\n        end\n        Note right of Admin: Exam results may <br> be delayed\n        Admin-->>Student: Enrolment success\n        Admin->>Professor: Assign student to tutor\n        Professor-->>Admin: Student is assigned\n\n`\n},\n{\n    \"displayText\": \"Diagram flowchart \uD83C\uDFF7\",\n    \"text\": `=for Diagram :caption('Caption of diagram')\n    graph LR\n        A[Square Rect] -- Link text --> B((Circle))\n        A --> C(Round Rect)\n        B --> D{Rhombus}\n        C --> D\n\n`\n},\n{\n    \"displayText\": \"Diagram class \uD83C\uDFF7\",\n    \"text\": `=for Diagram :caption('Caption of diagram')\n    classDiagram\n       Person <|-- Student\n       Person <|-- Professor\n       Person : +String name\n       Person : +String phoneNumber\n       Person : +String emailAddress\n       Person: +purchaseParkingPass()\n       Address \"1\" <-- \"0..1\" Person:lives at\n       class Student{\n          +int studentNumber\n          +int averageMark\n          +isEligibleToEnrol()\n          +getSeminarsTaken()\n        }\n        class Professor{\n          +int salary\n        }\n        class Address{\n          +String street\n          +String city\n          +String state\n          +int postalCode\n          +String country\n          -validate()\n          +outputAsLabel()  \n    }\n\n`\n},\n{\n    \"displayText\": \"code block with formatting \uD83C\uDFF7\",\n    \"text\": `=begin code :allow<I B Z> \n\n=end code\n`\n},\n{\n    \"displayText\": \"Toc head1, head2, head3\",\n    \"text\": `=Toc head1, head2, head3\n`},\n{\n    \"displayText\": \"Toc (with :title) \uD83C\uDFF7\",\n    \"text\": `=for Toc :title('Table of content')\nhead1, head2, head3 \n\n`\n},\n{\n    \"displayText\": \"Toc ( Images, Diagrams )  + tables \uD83C\uDFF7\",\n    \"text\": `=for Toc :title('List of media')\nImage, Diagram\n=for Toc :title('List of tables')\ntable\n\n`\n},\n\n]\nexport default dict;\n"],
+  "mappings": "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",
+  "names": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@podlite/editor-react",
-  "version": "0.0.9",
+  "version": "0.0.13",
   "description": "Podlite React component",
   "main": "index.js",
   "types": "lib/index.d.ts",
@@ -17,29 +17,29 @@
   },
   "scripts": {
     "clean": "rm -rf dist lib tsconfig.tsbuildinfo",
-    "build": "yarn build:cjs && yarn build:esm",
-    "build:cjs": "esbuild --bundle src/index.tsx   --outfile=lib/index.js --external:'react*' --format=cjs &&  tsc  --declaration --emitDeclarationOnly",
-    "build:esm": "esbuild --bundle src/index.tsx   --outfile=esm/index.js --external:'react*' --format=esm &&  tsc  --declaration --emitDeclarationOnly --outDir esm",
-    "test": "jest  --verbose --passWithNoTests"
+    "build": "run-p build:cjs  build:esm",
+    "build:cjs": "ts-node ./scripts/build.ts && tsc  --declaration --emitDeclarationOnly",
+    "build:esm": "ts-node ./scripts/build_esm.ts &&  tsc  --declaration --emitDeclarationOnly --outDir esm",
+    "test": "yarn g:jest  --passWithNoTests"
   },
   "dependencies": {
-    "codemirror": "^5.60.0",
-    "mousetrap": "^1.6.5",
-    "mousetrap-global-bind": "^1.1.0",
-    "react-codemirror2": "^7.2.1"
+    "codemirror": "5.x",
+    "react-codemirror2": "^7.2.1",
+    "react-is": "^17.0.2"
   },
   "devDependencies": {
-    "@types/react": "^17.0.3",
+    "@types/node": "^17.0.7",
+    "@types/react": "^16.x",
+    "@yarnpkg/esbuild-plugin-pnp": "^2.0.0",
     "esbuild": "^0.11.12",
-    "jest-serializer-html": "^7.0.0",
     "prettier": "^2.2.1",
     "react": "^16.12.0",
-    "react-dom": "^17.0.2",
-    "ts-jest": "^26.5.4",
-    "typescript": "4.2.3"
+    "react-dom": "^16.12.0",
+    "ts-node": "^9.1.1",
+    "typescript": "4.5.4"
   },
   "peerDependencies": {
-    "react": "^16.12.0"
-  },
-  "gitHead": "a4a607de65e342ea89d674628d2b450fa6b53de8"
-}
+    "react": "*",
+    "react-dom": "*"
+  }
+}

package/scripts/build.ts

@@ -0,0 +1,17 @@
+import { build } from 'esbuild';
+import { pnpPlugin } from '@yarnpkg/esbuild-plugin-pnp';
+
+build({
+  plugins: [pnpPlugin()],
+  bundle: true,
+  entryPoints: ['src/index.tsx'],
+  external: ['react', 'react-dom', 'codemirror', 'react-codemirror2'],
+  minify: true,
+  format: 'cjs',
+  target: 'node12.0',
+  sourcemap: true,
+  outfile: 'lib/index.js',
+}).catch((e) => {
+  console.log('Build not successful', e.message);
+  process.exit(1);
+});

package/scripts/build_esm.ts

@@ -0,0 +1,17 @@
+import { build } from 'esbuild';
+import { pnpPlugin } from '@yarnpkg/esbuild-plugin-pnp';
+
+build({
+  plugins: [pnpPlugin()],
+  bundle: true,
+  entryPoints: ['src/index.tsx'],
+  external: ['react', 'react-dom', 'codemirror', 'react-codemirror2'],
+  minify: true,
+  format: 'esm',
+  target: 'node12.0',
+  sourcemap: true,
+  outfile: 'esm/index.js',
+}).catch((e) => {
+  console.log('Build not successful', e.message);
+  process.exit(1);
+});

package/src/Editor.css

@@ -133,7 +133,7 @@
     word-break: normal;
     min-width: 70%;
     max-width: 100%;
-    margin: 0 auto;
+    margin: 1em auto;
     border-spacing: 0;
     border-collapse: collapse;
     text-align: center;
@@ -210,7 +210,20 @@
     display: block;
     margin: auto;
   }
+
+  .toc {
+    padding: 1rem;
+  }
   
+  .toc-list {
+    list-style: none;
+    font-size: .8rem;
+  }
+
+  .caption {
+    text-align: center;
+    font-size: 0.9rem;
+}
   /* End of pod6 */ 
   
   
@@ -335,4 +348,9 @@
   }
   ::-webkit-scrollbar-corner {
     background: transparent;
+  }
+
+  .CodeMirror-hints {
+    z-index: 1000;
+    border: none;
   }

package/src/dict.ts

@@ -0,0 +1,174 @@
+// this file contains the dictionary ot the messages used in the podlite editor
+
+const dict = [
+    {
+        "displayText": "head1",
+        "text": `=head1 `
+    },
+    {
+        "displayText": "head2",
+        "text": `=head2 `
+    },
+    
+    {
+        "displayText": "head3",
+        "text": `=head3 `
+    },
+    {
+        "displayText": "item1 *",
+        "text": `=item1 `
+    }, 
+    {
+    "displayText": "item1 1.)",
+    "text": `=item1 # `
+},
+{
+    "displayText": "item (1., 2.) 🏷",
+    "text": `=item1 # item 
+    =item2 # item level 2
+    =item2 # item level 2
+=item1 # item
+    =item2 # item
+    =item2 # item level 2
+`},
+{
+    "displayText": "item (*, *) 🏷",
+    "text": `=item1  item 
+    =item2 item level 2
+    =item2 item level 2
+=item1  item
+    =item2 item
+    =item3  item level 2
+`},
+{
+    "displayText": "Image 🏷",
+    "text": `=Image https://github.com/zag/podlite-desktop/blob/master/dist-assets/linux-icon/256x256.png?raw=true
+`,
+},
+{
+    "displayText": "table simple 🏷",
+    "text":`=for table
+    mouse    | mice
+    horse    | horses
+    elephant | elephants
+`
+},
+{
+    "displayText": "table 2x 🏷",
+    "text": `=begin table :caption('Caption of table')
+Constants           1
+Variables           10
+Subroutines         33
+Everything else     57
+=end table
+`},
+{
+    "displayText": "table 3x 🏷",
+    "text": `=for table :caption('Caption of table')
+    Animal | Legs |    Eats
+    =======================
+    Zebra  +   4  + Cookies
+    Human  +   2  +   Pizza
+    Shark  +   0  +    Fish
+`
+},
+{
+    "displayText": "Diagram simple 🏷",
+    "text": `=begin Diagram  :caption('Caption of diagram')
+    graph LR
+            A-->B
+            B-->C
+            C-->A
+            D-->C
+=end Diagram
+`
+},
+{
+    "displayText": "Diagram Sequence 🏷",
+    "text": `=for Diagram :caption('Caption of diagram')
+    sequenceDiagram
+        autonumber
+        Student->>Admin: Can I enrol this semester?
+        loop enrolmentCheck
+            Admin->>Admin: Check previous results
+        end
+        Note right of Admin: Exam results may <br> be delayed
+        Admin-->>Student: Enrolment success
+        Admin->>Professor: Assign student to tutor
+        Professor-->>Admin: Student is assigned
+
+`
+},
+{
+    "displayText": "Diagram flowchart 🏷",
+    "text": `=for Diagram :caption('Caption of diagram')
+    graph LR
+        A[Square Rect] -- Link text --> B((Circle))
+        A --> C(Round Rect)
+        B --> D{Rhombus}
+        C --> D
+
+`
+},
+{
+    "displayText": "Diagram class 🏷",
+    "text": `=for Diagram :caption('Caption of diagram')
+    classDiagram
+       Person <|-- Student
+       Person <|-- Professor
+       Person : +String name
+       Person : +String phoneNumber
+       Person : +String emailAddress
+       Person: +purchaseParkingPass()
+       Address "1" <-- "0..1" Person:lives at
+       class Student{
+          +int studentNumber
+          +int averageMark
+          +isEligibleToEnrol()
+          +getSeminarsTaken()
+        }
+        class Professor{
+          +int salary
+        }
+        class Address{
+          +String street
+          +String city
+          +String state
+          +int postalCode
+          +String country
+          -validate()
+          +outputAsLabel()  
+    }
+
+`
+},
+{
+    "displayText": "code block with formatting 🏷",
+    "text": `=begin code :allow<I B Z> 
+
+=end code
+`
+},
+{
+    "displayText": "Toc head1, head2, head3",
+    "text": `=Toc head1, head2, head3
+`},
+{
+    "displayText": "Toc (with :title) 🏷",
+    "text": `=for Toc :title('Table of content')
+head1, head2, head3 
+
+`
+},
+{
+    "displayText": "Toc ( Images, Diagrams )  + tables 🏷",
+    "text": `=for Toc :title('List of media')
+Image, Diagram
+=for Toc :title('List of tables')
+table
+
+`
+},
+
+]
+export default dict;

package/src/index.tsx

@@ -1,21 +1,16 @@
 import * as React from 'react'
-import {UnControlled as CodeMirror} from 'react-codemirror2'
-import {Controlled as CodeMirrorControlled} from 'react-codemirror2'
-import {EditorConfiguration} from 'codemirror'
+import { Controlled as CodeMirrorControlled, UnControlled as CodeMirror} from 'react-codemirror2'
+import CMirror from 'codemirror'
+import dictionary from './dict'
 import { useState, useEffect, useRef, useMemo } from 'react'
-
-//@ts-ignore
 import {isValidElementType, isElement} from  'react-is'
 
-// import Mousetrap from 'mousetrap'
-// ; // global-bind must be import after Mousetrap
-// import 'mousetrap-global-bind';
 // TODO: use bundler to add into package
 // import '../../../node_modules/codemirror/lib/codemirror.css';
-import './Editor.css';
 import 'codemirror/mode/gfm/gfm';
-
-import path from 'path'
+import "codemirror/addon/hint/show-hint";
+import 'codemirror/addon/hint/show-hint.css';
+import './Editor.css';
 
 
 //@ts-ignore
@@ -46,11 +41,23 @@ type Props={
     onSavePressed?: Function,
     isDarkTheme? : boolean,
     isLineNumbers?: boolean,
+    isAutoComplete?: boolean,
     isPreviewModeEnabled? :boolean
     isControlled?:boolean
 }
 
-export default ({ onChangeSource = ()=>{}, content, isDarkTheme = false, isLineNumbers = false, isPreviewModeEnabled = false, onConvertSource, onSavePressed = () => { }, sourceType = 'pod6', isControlled=false}: Props) => {
+export default ({ 
+        onChangeSource = ()=>{}, 
+        content, 
+        isDarkTheme = false, 
+        isLineNumbers = false, 
+        isPreviewModeEnabled = false, 
+        onConvertSource, 
+        onSavePressed = () => { },
+        sourceType = 'pod6',
+        isControlled=false,
+        isAutoComplete = true,
+    }: Props) => {
   const [text, updateText] = useState(content)
 
   const [marks, updateMarks] = useState([])
@@ -89,19 +96,13 @@ updateText(content)
 
     }
   }
-// TODO: remove save keys binds
-//   Mousetrap.bindGlobal(['ctrl+s', 'command+s'], saveFileAction)
-return () => {
-    // Mousetrap.unbind(['ctrl+s', 'command+s'])
-  }
-
 })
 
 
 useEffect(() => {
     refValue.current = isPreviewScroll;
 });
-var options: EditorConfiguration = {
+var options: CMirror.EditorConfiguration = {
   lineNumbers: isLineNumbers,
   inputStyle: "contenteditable",
   //@ts-ignore
@@ -164,43 +165,41 @@ useEffect(() => {
 },[text,isPreviewScroll])
 
 useEffect(() => {
- //@ts-ignore
- let cm = instanceCM
- if (!cm) {return}
- //@ts-ignore
-marks.forEach(marker => marker.clear())
-//@ts-ignore
-let cmMrks:Array<never> = []
-//@ts-ignore
-if (result && result.errors ) {
+    //@ts-ignore
+    let cm = instanceCM
+    if (!cm) {return}
+    //@ts-ignore
+    marks.forEach(marker => marker.clear())
+    //@ts-ignore
+    let cmMrks:Array<never> = []
+    //@ts-ignore
+    if (result && result.errors ) {
 
-  //@ts-ignore
-result.errors.map((loc:any)=>{
-  // @ts-ignore
-  let from = {line: loc.start.line-1, ch: loc.start.column-1 - (loc.start.offset === loc.end.offset)};
-  let to = {line: loc.end.line-1, ch: loc.end.column-1};
+        //@ts-ignore
+        result.errors.map((loc:any)=>{
+            // @ts-ignore
+            let from = {line: loc.start.line-1, ch: loc.start.column-1 - (loc.start.offset === loc.end.offset)};
+            let to = {line: loc.end.line-1, ch: loc.end.column-1};
 
-  cmMrks.push(
-              //@ts-ignore
-              cm.markText(
-                  from,
-                  to, 
-                  {
-                    className: 'syntax-error',
-                    title: ';data.error.message',
-                    css: "color : red"
-                  }
-              )
-                  
-  )
-})
-}
-updateMarks(cmMrks)
+            cmMrks.push(
+                        //@ts-ignore
+                        cm.markText(
+                            from,
+                            to, 
+                            {
+                                className: 'syntax-error',
+                                title: ';data.error.message',
+                                css: "color : red"
+                            }
+                        )
+                            
+            )
+        })
+    }
+    updateMarks(cmMrks)
 
 },[text,result])
 
-
-
 const previewHtml = <div className={ "Editorright " + (isDarkTheme ? 'dark' : '' )}
                         onMouseEnter={()=>setPreviewScrolling(true)} 
                         onMouseMove={()=>setPreviewScrolling(true)} 
@@ -218,27 +217,77 @@ const previewHtml = <div className={ "Editorright " + (isDarkTheme ? 'dark' : ''
                      </div>
 //@ts-ignore
 const scrollEditorHandler = (editor) => {
-if (refValue.current) { return }
-let scrollInfo = editor.getScrollInfo();
-// get line number of the top line in the page
-let lineNumber = editor.lineAtHeight(scrollInfo.top, 'local') + 1;
-if (previewEl) {
-  const el = previewEl.current
-  const elementId = `#line-${lineNumber}`
-  const scrollToElement = document.querySelector(elementId)
-  if (scrollToElement) {
-    //@ts-ignore
-    const scrollTo = scrollToElement.offsetTop
-    //@ts-ignore
-    el.scrollTo({
-      top: scrollTo,
-      left: 0,
-      behavior: 'smooth'
-    })
- }
-  
-}
+    if (refValue.current) { return }
+    let scrollInfo = editor.getScrollInfo();
+    // get line number of the top line in the page
+    let lineNumber = editor.lineAtHeight(scrollInfo.top, 'local') + 1;
+    if (previewEl) {
+        const el = previewEl.current
+        const elementId = `#line-${lineNumber}`
+        const scrollToElement = document.querySelector(elementId)
+        if (scrollToElement) {
+            //@ts-ignore
+            const scrollTo = scrollToElement.offsetTop
+            //@ts-ignore
+            el.scrollTo({
+            top: scrollTo,
+            left: 0,
+            behavior: 'smooth'
+            })
+        }
+    }
 }
+const [instanceCMLocal, updateInstanceCM] = useState<any>()
+
+useEffect(()=>{
+    if (!instanceCMLocal) return
+    if (!isAutoComplete) return
+    var onChange = function(instance, object)
+        {
+            // Check if the last inserted character is `=`.
+            if (object.text[0] === '=' &&
+                // start directive
+                instance.getRange({ch:0,line: object.to.line}, object.to).match(/^\s*$/))
+            {
+                CMirror.showHint(instanceCMLocal, CMirror.hint.dictionaryHint);
+            }
+        }
+    instanceCMLocal.on('change', onChange);
+
+    CMirror.registerHelper('hint', 'dictionaryHint', function(editor) {
+        var cur = editor.getCursor();
+        var curLine = editor.getLine(cur.line);
+        var start = cur.ch;
+        var end = start;
+        while (end < curLine.length && /[\w$]/.test(curLine.charAt(end))) ++end;
+        while (start && /[^=]/.test(curLine.charAt(start - 1))) --start;
+        var curWord = start !== end && curLine.slice(start, end);
+        var regex = new RegExp('' + curWord, 'i');
+        // filter dict by regex and sort by mostly nearness
+        const filterDictByRegex = (arr, regex)=>{
+            const dict = arr.reduce((acc, item)=>{
+                if (item === null) { return acc; }
+                const result = (typeof item === 'object' && !Array.isArray(item)) ?  item.displayText.match(regex): item.match(regex);
+                if ( result ) {
+                    acc.push({item, index:result.index})
+                }
+                return acc;
+            }, []);
+            return dict.sort((a, b) => a.index - b.index).map(i=>i.item)
+        }
+        return {
+            list: (!curWord ? dictionary : filterDictByRegex(dictionary,regex )),
+            from: CMirror.Pos(cur.line, start-1),
+            to: CMirror.Pos(cur.line, end)
+        }
+    });
+    instanceCMLocal.refresh()
+    return () => {
+        //@ts-ignore
+        instanceCMLocal.off('change', onChange)
+    }
+},[instanceCMLocal, isAutoComplete])
+
 return (
   <div className="EditorApp">
     <div className={ isPreviewModeEnabled ? "layoutPreview": "layout"}>
@@ -246,34 +295,31 @@ return (
                                onMouseMove={()=>setPreviewScrolling(false)}
         >
         {isControlled ? 
-        <CodeMirrorControlled
-        value={content}
-        editorDidMount={ editor => { instanceCM = editor } }
-        onBeforeChange={(editor, data, value) => {
-            setChanged(true); 
-            // updateText(value);
-            onChangeSource(value)
-        }}
-        // onChange={(editor, data, value) => {
-
-        // }}
-        onScroll={scrollEditorHandler}
-        options={options} 
-        className="editorApp"
-        />
-        :
-        <CodeMirror 
+            <CodeMirrorControlled
             value={content}
-            editorDidMount={ editor => { instanceCM = editor } }
-            onChange = { (editor, data, value) => { 
+            editorDidMount={ editor => { instanceCM = editor; updateInstanceCM(editor) } }
+            onBeforeChange={(editor, data, value) => {
                 setChanged(true); 
-                updateText(value);
+                // updateText(value);
                 onChangeSource(value)
-            } }
+            }}
             onScroll={scrollEditorHandler}
             options={options} 
             className="editorApp"
-         />
+            />
+        :
+            <CodeMirror 
+                value={content}
+                editorDidMount={ editor => { instanceCM = editor;  updateInstanceCM(editor) } }
+                onChange = { (editor, data, value) => { 
+                    setChanged(true); 
+                    updateText(value);
+                    onChangeSource(value)
+                } }
+                onScroll={scrollEditorHandler}
+                options={options} 
+                className="editorApp"
+            />
          }
          </div>
          {previewHtml}