Gitlab Web IDE

Enter Web IDE from Gitlab

From the following URL https://git.tsp.dev/tsp/wiki/-/tree/main, click on button ‘Edit’ and select option ‘Web IDE’

This should open a new tab with the Web IDE ready for editing.

On the left, you can see following icon buttons, from top to bottom:

  • Menu button: with all actions available to select.
  • Explorer button: show directory of the wiki
  • Search button: allow to search and replace across the whole wiki
  • Source control button: allow to submit changes for review
  • 2 buttons, Run/Debug and Extensions are not required to use.

Following are basic usages

You can use the left menu to navigate around. Click on a folder to collapse/expand it, or click on a file name to open the file for edit.

Save file content

Save file content should be automatic. You don’t need to click on anything. However, if you close the tab before submitting for review, all modified content would be lost.

Search by file name

You can search a file by its name by using shortcut Ctrl + P or right-click on the top corner and select ‘Open File’

This should show a dropdown to search by file name. Click on the file name here to open it.

Search by file content

You can search by file content by select Search button in the left menu (3rd one from the top) or use shortcut Ctrl + Shift + F. A search menu in the left should be displayed to interact with.

Create a new folder

On the left menu, click on Explorer button (2nd from the top) to show the whole directory.

Right click on a folder and select option “New Folder”

Name the new folder and press “Enter”. Or press Esc to undo folder creation.

Create a new file

On the left menu, click on Explorer button (2nd from the top) to show the whole directory.

Right click on a folder and select option “New File”

Name the new file and press “Enter”. Or press Esc to undo file creation.

Rename a folder/file

Right click on the folder/file to rename and select option Rename. Press “Enter” to complete or press Esc to undo renaming.

Delete a folder/file

Right click on the folder/file to delete and select option Delete Permanently. Click “Delete” to complete or click Cancel to cancel.

Copy a folder/file

Right click on the folder/file to copy and select option Copy.

Under the new folder location, right click on the folder and select option Paste.

Upload file

Right click on the folder to upload file to and select option Upload

Select the file to upload and confirm.

Edit Markdown file - Enable Preview Mode

Tips: click on menu button on the left menu to close the menu before editing for more screen area

Click on the 3rd button at the top-right corner to trigger preview mode

It should show the preview mode on the right panel. The preview content is automatically updated with any changes in the editor.

Next steps

References