/angular-code-editor

[WIP] Fully online code editor à la VSCode.

Primary LanguageTypeScript

Try me

https://shogek.github.io/angular-code-editor/


Deploy me

ng deploy --base-href=/angular-code-editor/


Develop me

☑️ [Editor] Show file contents as editable
☑️ [Editor] Added option to load dummy files, upload own files and upload own folder
☑️ [Editor] Added tabs for easier navigation between files
☑️ [File tabs] Added icons for some file types
☑️ [File tabs] Added context menu support (right click on a tab)
[File tabs] Scroll container to reveal opened tab if it's not fully visible
☑️ [Editor] Added a status bar (the long line at the bottom of the screen)
☑️ [Status bar] Shows current column when file clicked with mouse (show also active line? Nah, I'm good, thanks)
☑️ [Status bar] Added a theme chooser (click on the "Theme: ..." button in the status bar at the bottom)
☑️ [Editor] Added file explorer to see all of the loaded files (accessible via activity bar of the right)
☑️ [File explorer] Collapse and expand folders, open files
[File explorer] Fix padding and overall design
☑️ [Editor] Added the activity bar to house the file explorer (vertical menu on the right)
☑️ [Activity bar] Collapsible and horizontally resizeable
[Activity bar] Show messages and buttons if no files loaded
[Editor] Add 'console.log' terminal
[Editor] Automatically deploy to gh-pages on push to master


CodeEditor

This project was generated with Angular CLI version 11.2.4.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.