fmsouza / wcode Goto Github PK

Monaco-based code editor which runs inside a browser.

License: MIT License

HTML 0.55% CSS 10.16% JavaScript 89.29%

wcode's Introduction

Wcode

UNMAINTAINED (alternatively, try code-server)

Wcode is a rich code editor which runs inside a browser. It's totally inspired on Visual Studio Code, and also uses Monaco-editor as it's core engine for providing a rich experience. It is being developed with Node.js + Express + React.

It was born on a particular necessity of using such software on any kind of platforms, which is not the case of VSCode (only runs in x64 Desktop OSes), by taking inspiration on this article to produce some alternative kind of software to run in platforms like ChromeOS, Android, Raspberry PI, etc.

1. Installation

$ npm install -g wcode

2. Usage

$ wcode [options] [<directory>=.]

Options:
-h, --help          Show help
-a, --addr          Set the editor listening address [default: 127.0.0.1]
-p, --port          Set the editor listening port number [default: 9876]
--headless          Prevent local browser from open
--ssl <keys-path>   Configures SSL encrpytion
-v, --version       Show current version

Examples:
wcode                                       Open the project in the editor on current working directory
wcode /path/to/project                      Open the project in the editor on default port
wcode -p 8080 /path/to/project              Open the project in the editor on port 8080
wcode --ssl path/to/keys /path/to/project   Open the project with SSL in the editor on default port

3. Keyboard shortcuts

Combination	Action
[ctrl + s] or [command + s]	Save file
[ctrl + w]	Close file
[alt + right]	View the next file
[alt + left]	View the previous file

4. Development

$ git clone https://github.com/fmsouza/wcode.git
$ cd wcode && npm install

5. Running

`npm start`

Runs the application in the address http://localhost:9876. Wait a few seconds and the web application will be built and ready for using in the browser.

`npm run build`

Produce the production build.

`npm test`

Run the tests.

6. Contributing

PR's and issue reports are welcome. For further details, please read the terms at CONTRIBUTING.

wcode's People

Contributors

Stargazers

Watchers

Forkers

iced-tea t-koshi cutecare andychu525 vkefallinos balderfer losingrose w3dot0 cie emperorsreeni

wcode's Issues

Create a new menu option in the 'File' menu to change the current project

The user should be able to change the current open project through the UI by clicking on an 'Open project' option in the 'File' menu in the top bar, so he could open another project without having to close the window and open again.

Make the hotkeys configurable

Split the hotkeys setup to a separated file and make it editable through the UI, so the user can setup his own hotkeys configuration.

Question - Project Vision / Roadmap

Hello,

Do you have concrete plans for future development of the project? May be a roadmap or so.
It would be great having some additional features such as "Problems View", "Command Pallet", Plugins, LSP integration for other languages and other features.

Thanks.

Add column/row editor position tracker in the statusbar

Add the current cursor position in the status bar in the right side of the bottom bar, like the image attached.

Change auto-stop behavior

Currently the backend application stops when the view is closed, but it does not work on Android environment. This behavior should be changed to only destroy the application when a button in the topbar is clicked to stop the instance from working.

Wrap into PWA

A suggestion to wrap this solution into a progressive web app. If that's possible

Add Google Analytics for tracking usage

It will be good not only to know how many users are using it, but also to know how they are using to use this information to improve the tool.

The editor is not resized when the screen is

If I make the viewport smaller, and the text editor is open, it will still have the same size. Same problem when I make the viewport larger.

Need a flag to avoid opening the browser

Everytime the application starts, the browser is opened pointing the the address of the application. However, the application may be run on remote servers where there are no browsers installed.

There should be a cli flag to open the application without triggering the browser, like --headless.

Font not being properly loaded on Android devices

When running on Android devices the editor font is different from the presented on desktops and notebooks.

When the tab title is too large, the 'close' button becomes smaller

If the file name is large enough to fill the whole tab width, the 'close' button will present itself with a smaller width in order to make sure everything will fit the space.

HTTPS

I guess I can't use HTTPS? The frontend gives me several errors when I try to load wcode via https. It would be nice to be able to code remotly on my server like I do with codiad.

There are no errors on my server (besides xdg open cant find any browser), but there are some errors that appears in the js console on chrome:

index.js:6 Mixed Content: The page at 'https://dev.foo.moe/' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://dev.foo.moe/'. This request has been blocked; this endpoint must be available over WSS.
(anonymous) @ index.js:6
(anonymous) @ setup.js:11
(anonymous) @ index.js:14

index.js:6 Uncaught DOMException: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.
at https://dev.foo.moe/app/bundle.js:1:270724
at https://dev.foo.moe/app/bundle.js:1:270861
at https://dev.foo.moe/app/bundle.js:1:270999
(anonymous) @ index.js:6
(anonymous) @ setup.js:11
(anonymous) @ index.js:14

registerServiceWorker.js:71 Error during service worker registration: TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.

Maybe try to add a boolean for https? idk ._. Sorry

Open command not working from Android's Termux

When running the command on Termux, an unhandled exception is raised:

UnhandledPromiseRejectionWarning: Unhandled promise rejection(rejection id: 1): Error: spawn /data/data/com.termux/files/usr/lib/node_modules/wcode/node_modules/opn/xdg-open ENOENT

The correct way to open the server URL in Termux is by the command termux-open-url, as mentioned in termux/termux-api#1 (comment).

Split the Full view logic from the server

Currently the GUI is very coupled to the backend API because the components respond to the communication to the backend.

The proposal here is to make the view layer totally decoupled from the backend, in a way the view can be turned into a separated project and independent from the backend, making it possible to generalize the user interactions in a way it could be implemented in every place and the developer could write how it should respond to each kind of user action within the system (CRUD file, primarily).

When toggling the project visibility (collapsing filetree) the title height changes

When clicking in the File tree title node (where is the current project name) it changes the file tree state to toggle between showing and hiding the elements tree. However, the node height is greater when the project is collapsed when it's expanded. It shouldn't change in this interaction.

rename file / folder support

Please add support for rename on editor right click menu.

Authentication & built-in terminal

Hi!
Great project it is exactly what i am looking for, an alternative for cloud9 or codeanywhere
the editor works great and i would like to offer these features

authentication, can be regular web auth (simple with express and can be done with a config file to be static for now) or user base system (more complex)
SSH plugin, to run scripts "npm run start" etc - https://github.com/billchurch/WebSSH2

Thanks!