User:Max34/VDCEditor: Difference between revisions

From Valve Developer Community
Jump to navigation Jump to search
m (Important note)
(I realized that the extension is too unstable and undeveloped to be released, so the installation link has been temporarily removed. Please, if you have already installed this extension, delete it.)
Line 1: Line 1:
VDCEditor is a chrome extension that will change the edit field from a regular flat textarea into a full-fledged code editor with syntax highlighting, line numbering and much more.
VDCEditor is an extension that will change the edit field from a regular flat textarea into a full-fledged code editor with syntax highlighting, line numbering and much more.


{{Note|Despite the fact that this extension is made for the Valve Developer Community, it (albeit with various errors) can probably work on any other wikis running on the MediaWiki engine.}}
{{Note|Despite the fact that this extension is made for the Valve Developer Community, it can probably work on any other wikis running on the MediaWiki engine.}}


== Download v1.0 ==
== Download ==
{{Warning|This extension may be unstable. By installing it, you agree that I (as the creator of this extension) am not responsible for any shortcomings. You also agree that you will install the unpacked extension yourself (this is necessary due to the fact that browsers can block packaged extensions installed not from their store). I wanted to upload this extension to the google online store, but I need to make a monetary contribution to create an account, which I can’t do (not because I don’t have money, but because I don’t have ways to pay, at least now)}}
{{Warning|This extension may be unstable because it’s still under development. By installing it, you agree that I (as the creator of this extension) am not responsible for any shortcomings. You also agree that you will install the unpacked extension yourself. This is necessary due to the fact that browsers can block packaged extensions installed not from their store.}}
{{Note|Since my skills in writing extensions are not very great, editing may lag if there is a lot of code.}}
{{Note|Since my skills in writing extensions are not very great, editing may lag if there is a lot of code.}}
{{Note|This extension was originally made for chromium-based browsers. Firefox support coming soon.}}
Download link (Google Drive): ''Link temporarily removed''
Download link (Google Drive): https://drive.google.com/drive/folders/1k8eEAEJzIgFn_8YCrnh-1SZcVaklMU8v?usp=sharing


== How to use the extension ==
== How to use the extension ==
=== Installing ===
=== Installing (chromium based browsers) ===
# Follow the link to install the folder with the extension
# Follow the link to install the folder with the extension
# After installation, you should have the following structure: the “VDCEditor v1.0” folder and inside it all the extension files
# After installation, you should have the following structure: the “VDCEditor v1.0” folder and inside it all the extension files
# Place the extension folder in any location you need on your computer
# Place the extension folder in any location you need on your computer
# Open your browser and open the tab with your extensions (in Google Chrome this is the chrome://extensions/ tab)
# Open your browser and open the {{Code|chrome://extensions/}}
# You will have to find the "Developer Mode" switch and activate it
# You will have to find the "Developer Mode" switch and activate it
# After this, you should see a button “load unpacked extension”
# After this, you should see a button “load unpacked extension”
# Click on this button and select the folder of this extension
# Click on this button and select the folder of this extension
When you are done, the VDCEditor extension marked as “unpacked extension” should appear in the list of extensions.
When you are done, the VDCEditor extension marked as “unpacked extension” should appear in the list of extensions.
=== Installing (Firefox) ===
{{Todo}}


=== Using the extension ===
=== Using the extension ===
Line 24: Line 26:
# Go to any page that you can edit
# Go to any page that you can edit
# Start editing this page
# Start editing this page
# Click on the extension icon
After clicking the preview button or the show changes button, repeat step 4.
== VDCEditor screenshot (outdated) ==
https://drive.google.com/file/d/1Jn8MFwXyiCW2ypwB1IaP0P1VHSPH2HFl/view


== Development progress ==
== Development progress ==
Line 35: Line 32:
<span style=color:green>☑</span> Change the style of the entire editor to the dark version
<span style=color:green>☑</span> Change the style of the entire editor to the dark version


☐ Figure out how to implement the correct automatic loading of the script. Right now you have to click on a button to run the script, because loading it automatically will cause it to load before the page is fully loaded, which cuts off access to a lot of things that need to be changed
<span style=color:green>☑</span> Implement the correct automatic loading of the script


<span style=color:green>☑</span> Add line numbering
<span style=color:green>☑</span> Add line numbering

Revision as of 11:51, 7 June 2024

VDCEditor is an extension that will change the edit field from a regular flat textarea into a full-fledged code editor with syntax highlighting, line numbering and much more.

Note.pngNote:Despite the fact that this extension is made for the Valve Developer Community, it can probably work on any other wikis running on the MediaWiki engine.

Download

Warning.pngWarning:This extension may be unstable because it’s still under development. By installing it, you agree that I (as the creator of this extension) am not responsible for any shortcomings. You also agree that you will install the unpacked extension yourself. This is necessary due to the fact that browsers can block packaged extensions installed not from their store.
Note.pngNote:Since my skills in writing extensions are not very great, editing may lag if there is a lot of code.

Download link (Google Drive): Link temporarily removed

How to use the extension

Installing (chromium based browsers)

  1. Follow the link to install the folder with the extension
  2. After installation, you should have the following structure: the “VDCEditor v1.0” folder and inside it all the extension files
  3. Place the extension folder in any location you need on your computer
  4. Open your browser and open the chrome://extensions/
  5. You will have to find the "Developer Mode" switch and activate it
  6. After this, you should see a button “load unpacked extension”
  7. Click on this button and select the folder of this extension

When you are done, the VDCEditor extension marked as “unpacked extension” should appear in the list of extensions.

Installing (Firefox)

[Todo]

Using the extension

  1. You must be logged in to this site
  2. Go to any page that you can edit
  3. Start editing this page

Development progress

Make the first edit using the new editor

Change the style of the entire editor to the dark version

Implement the correct automatic loading of the script

Add line numbering

Add Word Wrap setting

☐ Add code font size setting

Make editor height saveable

Make a status bar

Add an indicator of the number of characters in the code

Add a carriage location indicator

Add highlighting of MediaWiki magic words

☐ Add highlighting to &#999; elements

Add highlighting for mnemonics (not all mnemonics have been added. Need a complete list of mnemonics working on this site)

Add highlighting to HTML elements

Add highlighting to MediaWiki elements (hardest one)

☐ Implement the loading of translations directly from the VDC so that users can translate the extension directly from the site

☐ Implement the loading of brief documentation of templates when hovering over them with the mouse with Ctrl pressed

☐ Implement a color square next to each color (as in F12)

Add attributes to disable unwanted actions with the editor (translate="no", spellcheck="false", autocorrect="off", autocapitalize="off")

Add scrolling below content until only the last line is shown

Add highlighting to parts of code similar to the part that was selected

Add setting to disable highlighting of similar text as selected text

☐ Add a setting to display control characters

Add an icon and extension name to the top left corner of the editor to make it look like a separate application

☐ Adapt the editor to display correctly in right-to-left mode

Add preserving indentation (tabs and spaces) at the beginning of a line when creating a new line

Add a setting to disable scrolling below the last line

Add a setting to disable template styling. This styling is still quite unstable

☐ Add auto-completion of templates and their shortcuts.

Add the ability to duplicate selected text (or a line if nothing is selected) when pressing Ctrl + D

Reduce the “editpage-copywarn” font a little (maybe it’s worth coming up with another way to reduce the space this text takes up)


(For copying: ☐ )