{"id":27938424,"url":"https://github.com/nishanthcs/revitalace-js","last_synced_at":"2025-06-30T21:31:18.927Z","repository":{"id":39639773,"uuid":"325446187","full_name":"nishanthcs/revitalace-js","owner":"nishanthcs","description":"Active JavaScript code completion and interactive, programmable menu bar for Ace Editor.","archived":false,"fork":false,"pushed_at":"2023-02-13T06:25:21.000Z","size":1127,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2023-03-08T20:01:09.996Z","etag":null,"topics":["ace-editor","codeeditor","javascript","tern"],"latest_commit_sha":null,"homepage":"https://nishanthcs.github.io/revitalace-js/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nishanthcs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-12-30T03:35:34.000Z","updated_at":"2023-02-13T06:56:25.000Z","dependencies_parsed_at":"2022-08-28T10:03:28.447Z","dependency_job_id":null,"html_url":"https://github.com/nishanthcs/revitalace-js","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nishanthcs%2Frevitalace-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nishanthcs%2Frevitalace-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nishanthcs%2Frevitalace-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nishanthcs%2Frevitalace-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nishanthcs","download_url":"https://codeload.github.com/nishanthcs/revitalace-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252846842,"owners_count":21813434,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ace-editor","codeeditor","javascript","tern"],"created_at":"2025-05-07T08:48:02.320Z","updated_at":"2025-05-07T08:48:03.058Z","avatar_url":"https://github.com/nishanthcs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# revitalace-js\nActive JavaScript code completion and interactive, programmable menu bar for the Ace Editor using the power of Tern library.\n\n## \u003ca href=\"https://nishanthcs.github.io/revitalace-js/\" target=\"_blank\"\u003eDemo\u003c/a\u003e\n\n## Why?\nAce editor is an online code editor library that is widely used by the industry majors ( AWS, Wikipedia, Google and more) to surface code editing capability in their pages. Though great, the code editing experience is not as user friendly as WebStorm or VSCode. Using revitalace-JS, JS coding experience in Ace can be improved with active code completion and interactive tool tips. Hoping to add more.\n\nIdeas, fixes and contributions welcome!. Need testers too.\n\n## What?\nA pluggable module for Ace editor that modifies it to include\n\n1. Active code completion. Start typing to get suggestions on JS variables, functions, objects and more. Or Just use __Ctrl/Cmd - Space__\n2. Hover over variables, functions and objects to get help through a tooltip that displays JSDoc, references and definitions.\n3. Dynamic JSDoc parsing\n4. Fully programmable and interactive menu bar. Use __editor__ context to add new functionality.\n\n## How?\n\n### Installation\n\n1. Clone the repository\n\n    `git clone git@github.com:nishanthcs/revitalace-js.git `\n\n2.  Build the repository ( use yarn or npm)\n\n    ~~~~\n    cd revitalace-js\n    yarn install\n    yarn build\n    ~~~~\n\nThis step would create the distribution under `dist/` folder. Open `dist/index.html`\nto view the demo page.\n\n3. Run the demo (OPTIONAL)\n\n   `yarn start`\n\n4. Copy or Import `dist/revitalace.min.js` to your project\n\n### Usage\n\n* Add `revitalAceJS` option to Ace editor initialization.\n    * Quick enabling\n        ```js\n        editor.setOptions({\n            revitalAceJS: true\n        });\n        ```\n    * Boostrap live completion with dependent code\n        ```js\n        editor.setOptions({\n            revitalAceJS: {\n                dependentCode : \"/**\\n\" +\n                \" * This object is part of the dependent code added via 'defs'\\n\" +\n                \" */\\n\" +\n                \"var dependentObject = {\\n\" +\n                \"m : 'JS has -infinity and infinity'\\n\" +\n                \"}\" \n            }\n        });\n        ```\n    * Boostrap live completion with [tern definitions](https://ternjs.net/doc/manual.html#typedef) . This would allow static code completion.\n        ```js\n        let ternDef = {\n              \"!name\" : \"MyDefinition\",\n              \"MyObject\" : {\n                  \"greet\" : {\n                      \"!type\" : \"fn(arg:string)-\u003estring\",\n                      \"!url\": \"https://foobar.foo/greet\",\n                      \"!doc\": \"Returns a greeting in English for the passed First Name.\"\n                      }\n                  }\n          };\n        \n        let defObject = {\n            defJSON : ternDef,\n            atFront : true\n        };\n        editor.setOptions({\n            revitalAceJS: {\n                defs : defObject\n            }\n        });\n        ```\n    * Override completions using the completion callback option `completionsCallback`\n        ```js\n        editor.setOptions({\n            revitalAceJS: {\n                /**\n                 * This is a function will be called for every completion. Add or remove \n                 * tern completions in this callback and return. \n                 * \n                 * The below params are injected by revitalace.\n                 * @param editorSession - Ace edit session object\n                 * @param currentLine - Current line where the completion is triggered\n                 * @param completions - Array of completions resolved by tern\n                 * @return completions - Array of completions updated in this callback\n                 */\n                completionsCallback: (editorSession, currentLine, completions) =\u003e {\n                    console.log('Completion Line' + currentLine);\n                    console.log(JSON.stringify(completions));\n                    // Here we add a new entry to every completion list. \n                    completions.push(\n                        {    \"name\":\"completionsCallback\",\n                            \"value\":\"completionsCallback\",\n                            \"meta\":\"completionsCallback\",\n                            \"score\":1,\n                            \"doc\":\"This custom completion was injected dynamically using the completionsCallback\",\n                            \"type\":\"function\",\n                            \"url\":\"https://developer.mozilla.org/en/docs/\"\n                        });\n        \n                    return completions;\n                }\n            }\n        });\n        ```\n  * Customize tooltip content dynamically by using the tooltip callback option `tooltipCallBack`\n      ```js\n      editor.setOptions({\n          revitalAceJS: {\n            /**\n             * This is a function will be called for every tool tip render. modify result and return.\n             *\n             * In this example, every doc element will be replaced with text 'Where is Waldo' :o)\n             *\n             * The below params are injected by revitalace.\n             * @param editorSession - Ace edit session object\n             * @param currentToken - Current token ace object where the completion is triggered\n             * @param toolTipInfo - Result object compiled by revitalace\n             * @return toolTipInfo - Final result that would be used to render the tooltip\n             */\n            tooltipCallBack: (editorSession, currentToken, toolTipInfo) =\u003e {\n                console.log('Tooltip Token' + currentToken.value);\n                console.log(JSON.stringify(toolTipInfo));\n                // Update the doc here.\n                const customizedToolTipInfo = {\n                    type: \"fn(input: ?)\",\n                    name: \"getTooltipInfo\",\n                    doc: \"Where is Waldo?\",\n                    def: toolTipInfo.def,\n                    refs: toolTipInfo.refs\n                }\n                return customizedToolTipInfo;\n            }\n          }\n      });\n      ```\n  * Switch off ECMA and BROWSER suggestions while completing using `options`\n       ```js\n       editor.setOptions({\n           revitalAceJS: {\n               options: {\n                   // ECMA based suggestions can be switched off from suggestions by  flipping this flag\n                   useEcmaDefs: true, //default true\n                   // BROWSER based suggestions can be switched off from suggestions by  flipping this flag\n                   useBrowserDefs: true // default true\n               }\n           }\n       });\n       ```\n  * Add interactive menu bar and menu items with actions\n    ```js\n        editor.setOptions({\n            revitalAceJS: {\n                menu : [\n                    {\n                        label : \"File\",\n                        subMenu : [{label: \"Find\", shortCut: {mac : 'Cmd-f', win: 'Ctrl-f'}, trigger: function(editor){\n                                    alert(\"Find clicked in editor with id \"+editor.id);\n                                }},\n                            {label: \"Completion\", shortCut: {mac : 'Ctrl-Space', win: 'Ctrl-Space'}, trigger: function(editor){alert(\"Completion clicked\")}}]\n                    },\n                    {\n                        label : \"Edit\",\n                        subMenu : [{label: \"Copy\", shortCut: {mac : 'Cmd-f', win: 'Ctrl-f'}, trigger: function(editor){alert(\"Copy Clicked\")}},\n\t\t\t\t\t                            {label: \"Paste\", shortCut: {mac : 'Ctrl-Space', win: 'Ctrl-Space'}, trigger: function(editor){alert(\"Paste clicked\")}}]\n                    }\n                ]\n             }\n        });\n        ```\n\n\n### Styles\nRefer to sample stylesheet under `src/style/tooltip.css`. Override default styles by adding classes with the same name.\n\n### Whats next?\nThere is lot to do including code quality improvements so any help is welcome. \n* Caching completion results\n* Turning features on/off via options\n* Testing and bug fixes\n\nFeel free to create issues here if found any. \n\n## References\n\n__[Ace](https://ace.c9.io/)__ - Official Website\n\n__[Tern](https://ternjs.net/doc/manual.html)__ - Official Website\n\n## Thanks\n\n[__![JetBrains](src/images/jetbrains-variant-4.svg)__](https://www.jetbrains.com/)\n\n[JetBrains Open Source](https://www.jetbrains.com/opensource/)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnishanthcs%2Frevitalace-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnishanthcs%2Frevitalace-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnishanthcs%2Frevitalace-js/lists"}