{"id":15693850,"url":"https://github.com/finger563/webgme-codeeditor","last_synced_at":"2025-05-08T05:55:58.520Z","repository":{"id":9116111,"uuid":"59717975","full_name":"finger563/webgme-codeeditor","owner":"finger563","description":"Collaborative code editor visualizer for WebGME","archived":false,"fork":false,"pushed_at":"2025-02-19T15:40:57.000Z","size":3907,"stargazers_count":5,"open_issues_count":6,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-23T11:40:30.098Z","etag":null,"topics":["code","editor","webgme","webgme-codeeditor","webgme-component"],"latest_commit_sha":null,"homepage":"http://code-editor.collaborative-design.org","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/finger563.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["finger563"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"custom":null}},"created_at":"2016-05-26T03:49:29.000Z","updated_at":"2025-02-19T15:41:03.000Z","dependencies_parsed_at":"2025-04-23T11:43:54.376Z","dependency_job_id":null,"html_url":"https://github.com/finger563/webgme-codeeditor","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/finger563%2Fwebgme-codeeditor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/finger563%2Fwebgme-codeeditor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/finger563%2Fwebgme-codeeditor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/finger563%2Fwebgme-codeeditor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/finger563","download_url":"https://codeload.github.com/finger563/webgme-codeeditor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252315916,"owners_count":21728450,"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":["code","editor","webgme","webgme-codeeditor","webgme-component"],"created_at":"2024-10-03T18:49:40.412Z","updated_at":"2025-05-08T05:55:58.499Z","avatar_url":"https://github.com/finger563.png","language":"JavaScript","funding_links":["https://github.com/sponsors/finger563","https://paypal.me/finger563"],"categories":[],"sub_categories":[],"readme":"# webgme-codeeditor\n\n[![license](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)](https://opensource.org/licenses/MIT)\n[![Documentation](https://img.shields.io/badge/documentation-wiki-blue.svg?style=flat-square)](https://github.com/finger563/webgme-codeeditor/wiki)\n[![npm](https://img.shields.io/npm/v/webgme-codeeditor.svg)](https://www.npmjs.com/package/webgme-codeeditor)\n[![npm](https://img.shields.io/npm/dm/webgme-codeeditor.svg)](https://www.npmjs.com/package/webgme-codeeditor)\n[![npm](https://img.shields.io/npm/dt/webgme-codeeditor.svg)](https://www.npmjs.com/package/webgme-codeeditor)\n\n[![code-editor.collaborative-design.org](https://img.shields.io/website-up-down-green-red/https/code-editor.collaborative-design.org/profile/login.svg?label=code-editor.collaborative-design.org)](https://code-editor.collaborative-design.org)\n\n[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://paypal.me/finger563)\n\nThe WebGME CodeEditor is a multi-line text editor component for the\nWebGME collaborative web-based modeling environment\n[WebGME](https://webgme.org),\n[WebGME Github](https://github.com/webgme/webgme).\n\nPlease see the [WIKI](https://github.com/finger563/webgme-codeeditor/wiki)\nfor further information, including links to relevant Youtube Videos\nand specific pages about development process and such.\n\nThe CodeEditor is built upon [CodeMirror](http://codemirror.net) and\n[FancyTree](https://github.com/mar10/fancytree). and provides a\nreusable way to define the different multi-line attributes for each of\nthe meta-types in your WebGME domain, as well as what syntax\nhighlighting and other properties those attributes should support,\ne.g. `c++` or `javascript`.\n\nFeatures:\n\n* **Syntax highlighting** for all languages (modes) supported by\n  CodeMirror\n* Some **code completion** options depending on language\n* **Keybinding** support for `vim`, `sublime text`, and `emacs` style\n  keybindings, saved per user + per project\n* **Editor theme-ing**, saved per user + per project\n* **Code Folding** (depending on the text grouping in the mode\n* **A tree browser** for easily navigating between different attributes\n  across different nodes of your WebGME project.\n* A **diff view** showing the changes you've made that are not committed.\n* Collaborative **simultaneous editing** showing where each person is in\n  the attribute, what they've highlighted, etc.\n* Total **revert capability** or reverting of individual line changes\n* User configuration of **line-wrapping**\n* Full-screen **distraction free editing** mode (press `F11` when the text\n  editor has focus)\n* Full interoperability with WebGME's split-panel view.\n\nNote: for `mode` documentation, see\n[CodeMirror Modes](http://codemirror.net/mode/index.html).\n\n## Adding the CodeEditor as a WebGME Component to your Project\n\nInstall instructions are below, after which you simply have to enable \nthe `CodeEditor Visualizer` as a valid visualizer in the META of the nodes \nyou wish it to be active on.\n\n### Installing With WebGME-CLI\n\nTo add the CodeEditor to your WebGME deployment, simply use the `webgme-cli` to install it:\n\n``` bash\nwebgme import viz CodeEditor webgme-codeeditor\n```\n\nWhich will install the CodeEditor and then use `bower` to install the\nCodeMirror and other dependencies.\n\n### Installing With NPM\n\nYou can also use npm to install it by running:\n\n```bash\nnpm install --save webgme-codeeditor\n```\n\nYou will need to inform webgme where to load the CodeEditor from, by editing\nthe `config/config.webgme.js` to have:\n\n```json\nconfig.requirejsPaths = {\n  \"panels/CodeEditor\": \"./node_modules/webgme-codeeditor/src/visualizers/panels/CodeEditor\",\n  \"widgets/CodeEditor\": \"./node_modules/webgme-codeeditor/src/visualizers/widgets/CodeEditor\"\n};\n```\n\nadded to your `config.requirejsPaths`.\n\nYou will also need to tell WebGME that it is a visualizer, by adding it your 'src/visualizers/Visualizers.json`:\n\n```json\n  {\n    \"id\": \"CodeEditor\",\n    \"title\": \"CodeEditor\",\n    \"panel\": \"panels/CodeEditor/CodeEditorPanel\",\n    \"DEBUG_ONLY\": false\n  }\n```\n\nFinally you will need to add it to your `webgme-setup.json`:\n\n```json\n  \"dependencies\": {\n    \"visualizers\": {\n      \"CodeEditor\": {\n        \"src\": \"panels/CodeEditor/CodeEditorPanel\",\n        \"title\": \"CodeEditor\",\n        \"panel\": \"src/visualizers/panels/CodeEditor\",\n        \"secondary\": false,\n        \"widget\": \"src/visualizers/widgets/CodeEditor\",\n        \"project\": \"webgme-codeeditor\"\n      }\n    },\n```\n\n\n## Configuring the CodeEditor for your Project / Domain\n\nAfter you've added the CodeEditor to your project, you can configure\nit just like any other WebGME component. Some example options are\nprovided below.\n\nWhen the CodeEditor is active on a WebGME node, it loads the node and\nits children, up to a depth of `config.loadDepth`, while\nsimultaneously looking upwards for a root node of meta-type\n`config.RootType`. Any nodes it loads whose type matches any of the\ntypes in `config.excludeTypes` will be discarded, along with their\nchildren. If you configure the `config.loadDepth` to be `-1`, the\nCodeEditor visualizer will load the full subtree.\n\n### Example configuration\n\nThis configuration can be found in\n[components.json](./config/components.json).\n\n``` json\n{\n    \"CodeEditor\": {\n\t    \"theme\": \"default\",\n\t    \"enableThemeSelection\": true,\n\t    \"keyBinding\": \"sublime\",\n\t    \"enableKeybindingSelection\": true,\n\t    \"lineWrapping\": false,\n\t    \"enableLineWrappingToggle\": true,\n        \"autoSaveInterval\": \"2000\",\n\t    \"defaultSyntax\": \"gfm\",\n\t    \"rootTypes\": [\"Project\"],\n\t    \"excludeTypes\": [\"ExcludeType\"],\n\t    \"loadDepth\": 5,\n\t    \"syntaxToModeMap\": {\n\t        \"gfm\": {\"name\":\"gfm\", \"icon\": \"glyphicon glyphicon-file\"},\n\t        \"C++\": {\"name\":\"text/x-c++src\", \"useCPP\": true},\n\t        \"JSON\": {\"name\":\"application/json\"},\n\t        \"Python\": {\"name\":\"text/x-python\"}\n\t    },\n\t    \"attrToSyntaxMap\": {\n\t        \"CodeObject\": {\n\t\t        \"Markdown\": \"gfm\",\n  \t\t        \"C++\": \"C++\",\n\t\t        \"JSON\": \"JSON\",\n\t\t        \"Python\": \"Python\"\n            }\n        },\n\t    \"attrToInfoMap\": {\n\t        \"CodeObject\": {\n                \"docstring\": [\n                    \"## CodeObject Documentation\",\n                    \"this is some documentation for the code object itself.\",\n                    \"\",\n                    \"it will be appended to the documentation for all of CodeObject's attributes.\"\n                ],\n                \"attributes\": {\n\t\t            \"Markdown\": [\n                        \"## Markdown Code Attribute\",\n                        \"This code attribute should be formatted with [Markdown](https://en.wikipedia.org/wiki/Markdown)\"\n                    ],\n                    \"C++\": \"## C++ Code Attrubute\\nThis is c++ code.\\n NOTICE HOW YOU CAN USE EMBEDDED NEWLINES OR ARRAYS\",\n                    \"JSON\": \"Simple doc string here.\",\n                    \"Python\": \"Useless doc string.\"\n                }\n            }\n\t    },\n        \"nameTemplateMap\": {\n            \"CodeObject\": \"CodeObject:{{{name}}}\"\n        }\n    }\n}\n```\n\n## Examples\n\n![Using the CodeEditor](https://raw.githubusercontent.com/wiki/finger563/webgme-codeeditor/images/code-editor-1.gif)\n\n## Running the example in this repository\n\nFirst, install the webgme-codeeditor following:\n- [NodeJS](https://nodejs.org/en/) (LTS recommended)\n- [MongoDB](https://www.mongodb.com/)\n\nSecond, start mongodb locally by running the `mongod` executable in\nyour mongodb installation (you may need to create a `data` directory\nor set `--dbpath`).\n\nThen, run `npm start` from the project root to start . Finally,\nnavigate to `http://localhost:9000` to start using webgme-codeeditor!\n\nThe seed project [test](./src/seeds/test.webgmex) can be used as the\nbase of a project to show how the CodeEditor works.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffinger563%2Fwebgme-codeeditor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffinger563%2Fwebgme-codeeditor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffinger563%2Fwebgme-codeeditor/lists"}