User:Max34/VDCEditor: Difference between revisions

From Valve Developer Community
Jump to navigation Jump to search
m (Forgot to remove “upcoming”)
 
(17 intermediate revisions by 3 users not shown)
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.
[[File:Icon-VDCEditor.png|link=|17px]] '''VDCEditor''' is a browser extension that transforms the standard edit field in MediaWiki-based projects into a feature-rich code editor, complete with syntax highlighting, line numbering, and additional enhancements.


{{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.}}
Originally developed for the Valve Developer Community, it can be used across any MediaWiki-based platform.
__NOTOC__
== Usage ==
Navigate to any editable page.


== Download v1.0 ==
Click the Edit tab to launch the enhanced editor.
{{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)}}
{{Note|Since my skills in writing extensions are not very great, editing may lag if there is a lot of code.}}
Download link (Google Drive): https://drive.google.com/drive/folders/1k8eEAEJzIgFn_8YCrnh-1SZcVaklMU8v?usp=sharing


== How to use the extension ==
== Installation Instructions ==
=== Installing ===
<div style="display:flex; gap: 10px;">
# Follow the link to install the folder with the extension
{| align="center" style="background:#323232; border:2px solid #4f4f4f; border-radius: 6px; padding: 15px 10px;"
# After installation, you should have the following structure: the “VDCEditor v1.0” folder and inside it all the extension files
! style="font-size:1.6em; color:white; padding-bottom:5px; solid #4f4f4f;"| Chromium-Based Browsers
# 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)
| style="padding-top: 10px;"|
# You will have to find the "Developer Mode" switch and activate it
# Download the .zip archive from the link below.
# After this, you should see a button “load unpacked extension”
# Extract the archive. You should have a VDCEditor folder containing all extension files.
# Click on this button and select the folder of this extension
# Place the folder anywhere on your computer.
When you are done, the VDCEditor extension marked as “unpacked extension” should appear in the list of extensions.
# Open your browser and navigate to {{Code|chrome://extensions/}}.
# Enable Developer Mode.
# Click Load unpacked extension and select the VDCEditor folder.
# The extension should now appear as an unpacked extension in your browser.
|}


=== Using the extension ===
# You must be logged in to this site
# Go to any page that you can edit
# 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) ==
{| align="center" style="background:#323232; border:2px solid #4f4f4f; border-radius: 6px; padding: 15px 10px;"
https://drive.google.com/file/d/1Jn8MFwXyiCW2ypwB1IaP0P1VHSPH2HFl/view
! style="font-size:1.6em; color:white; padding-bottom:5px; solid #4f4f4f;"| Firefox
|-
| style="padding-top: 10px;"|
# Download the .zip archive from the link below.
# Save the archive to any location.
# Open Firefox and go to {{Code|about:config}}.
# Accept the warning and search for xpinstall.signatures.required.
# Set this preference to false.
# Open your add-ons manager ({{Code|about:addons}}), click the gear icon, and select Install Add-on from File.
# Choose the previously downloaded archive.
# The extension should now appear, although Firefox will indicate it is unverified.
|}
</div>
{{Note|If the extension doesn't start automatically, click the extensions button in your browser, find VDCEditor, right-click it, and select Always allow on developer.valvesoftware.com.}}


== Development progress ==
== Download ==
<span style=color:green>☑</span> Make the first edit using the new editor
{| align="center" style="background:rgb(255,32,32, .04); border:2px solid rgb(255,32,32); border-radius: 6px; padding: 10px"
| style="color:#d33;"| This extension is still under development and may be unstable. By installing it, you agree that the creator is not responsible for any shortcomings. Installation of the unpacked extension is required because some browsers block extensions not installed from their store.
|-
|}


<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
{| align="center" style="background:#323232; border:2px solid #4f4f4f; border-radius: 6px; width: 1000px; padding: 15px 10px;"
| style="font-size:2em; color:white; padding-bottom:5px; solid #4f4f4f;"| v0.2
|-
| style="padding-top:5px; border-bottom:1px solid #4f4f4f;" | In development.
|-
| style="padding-top: 10px;"|<span style="font-size:132%; color:white;">Download:</span> TBD
|}


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


<span style=color:green>☑</span> Add Word Wrap setting
{| id="Ed-Latest" align="center" style="background:#323232; border:2px solid #4f4f4f; border-radius: 6px; width: 1000px; padding: 15px 10px;"
| style="font-size:2em; color:white; padding-bottom:5px; solid #4f4f4f;"| v0.1.2 <span style="border:1px solid #238636; border-radius:25px; color:#3fb950; font-size:12px; padding:5px; position: relative; top: -5px;">Latest</span>
|-
| style="padding-top:5px; border-bottom:1px solid #4f4f4f;" | A [[User:N0one/VDCEditorEx|temporary editor]] developed by [[User:N0one|N0one]], until v0.2 is released.
* Fixed color of the editor after the site upgrade
* Fixed some UI elements
* Added support for RTL
* Added a button for each type of wiki tag ({{Code|1=<span style="color:#87CEEB"><nowiki>[[Link]]</nowiki></span>}}, {{Code|1=<span style="color:#01B700"><nowiki>{{ACategory}}</nowiki></span>}}, {{Code|1=<span style="color:#369FFF"><nowiki>'''</nowiki></span>Apostrophes<span style="color:#369FFF"><nowiki>'''</nowiki></span>}})
* Added a special button that changes links into their template one, e.g. {{Code|1=<span style="color:#01B700"><nowiki>[[Category:...]]</nowiki></span>}} -> {{Code|1=<span style="color:#01B700"><nowiki>{{ACategory|...}}</nowiki></span>}} (idea from [[Project:Alternative Languages|Alternative Languages]], the regex area)
* Added a custom dropdown area for stylizing each wiki tag color and a reset button to reset every color
* Added a custom dropdown area for stylizing the Editor
* Added highlighting to {{Code|&amp;#999;}} elements
* [[User:N0one/VDCEditorEx/Localization|Added Translations for the VDCEditor]].
* Added an auto scroll on a new line
* Added a button that enables/disables matching brackets for highlighting same as selection
* Added a custom file for users to customize template coloring [https://github.com/N0ine/VDCEditorEx/blob/v0.1.2/VDCEditorEx-v0.1.2/templates.js Usage]
* Fully supported stylized templates (Not fully supported by template pages)
{{Note|It highlights templates, which can be very helpful for spotting unclosed ones, if a template isn't properly closed, nothing after it will be highlighted.}}
* Lots of optimizations
|-
| style="padding-top: 10px;"|<span style="font-size:132%; color:white;">Download:</span>  
* {{GitHub|N0ine/VDCEditorEx/releases/tag/0.1.2|GitHub}}
|}


☐ Add code font size setting


<span style=color:green>☑</span> Make editor height saveable
{| align="center" style="background:#323232; border:2px solid #4f4f4f; border-radius: 6px; width: 1000px; padding: 15px 10px;"
 
| style="font-size:2em; color:white; padding-bottom:5px; solid #4f4f4f;"| v0.1
<span style=color:green>☑</span> Make a status bar
|-
 
| style="padding-top:5px; border-bottom:1px solid #4f4f4f;" |
<span style=color:green>☑</span> Add an indicator of the number of characters in the code
* Initial test release.
 
|-
<span style=color:green>☑</span> Add a carriage location indicator
| style="padding-top: 10px;"|<span style="font-size:132%; color:white;">Download:</span>
 
* [https://drive.google.com/file/d/1nLlIZScqa4tEzEuQ6iepLcbCAM-eBFBs/view?usp=sharing Google Drive]
<span style=color:green>☑</span> Add highlighting of MediaWiki magic words
|}
 
☐ Add highlighting to {{Code|&amp;#999;}} elements
 
<span style=color:orange>☑</span> Add highlighting for mnemonics (not all mnemonics have been added. Need a complete list of mnemonics working on this site)
 
<span style=color:green>☑</span> Add highlighting to HTML elements
 
<span style=color:orange>☑</span> 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)
 
<span style=color:green>☑</span> Add attributes to disable unwanted actions with the editor (translate="no", spellcheck="false", autocorrect="off", autocapitalize="off")
 
<span style=color:green>☑</span> Add scrolling below content until only the last line is shown
 
<span style=color:green>☑</span> Add highlighting to parts of code similar to the part that was selected
 
<span style=color:green>☑</span> Add setting to disable highlighting of similar text as selected text
 
☐ Add a setting to display control characters
 
<span style=color:green>☑</span> 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
 
<span style=color:green>☑</span> Add preserving indentation (tabs and spaces) at the beginning of a line when creating a new line
 
<span style=color:green>☑</span> Add a setting to disable scrolling below the last line
 
<span style=color:green>☑</span> Add a setting to disable template styling. This styling is still quite unstable
 
☐ Add auto-completion of templates and their shortcuts.
 
<span style=color:green>☑</span> Add the ability to duplicate selected text (or a line if nothing is selected) when pressing Ctrl + D
 
<span style=color:orange>☑</span> 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: ☐ <span style=color:orange>☑</span> <span style=color:green>☑</span>)

Latest revision as of 12:59, 25 May 2025

Icon-VDCEditor.png VDCEditor is a browser extension that transforms the standard edit field in MediaWiki-based projects into a feature-rich code editor, complete with syntax highlighting, line numbering, and additional enhancements.

Originally developed for the Valve Developer Community, it can be used across any MediaWiki-based platform.

Usage

Navigate to any editable page.

Click the Edit tab to launch the enhanced editor.

Installation Instructions

Chromium-Based Browsers
  1. Download the .zip archive from the link below.
  2. Extract the archive. You should have a VDCEditor folder containing all extension files.
  3. Place the folder anywhere on your computer.
  4. Open your browser and navigate to chrome://extensions/.
  5. Enable Developer Mode.
  6. Click Load unpacked extension and select the VDCEditor folder.
  7. The extension should now appear as an unpacked extension in your browser.


Firefox
  1. Download the .zip archive from the link below.
  2. Save the archive to any location.
  3. Open Firefox and go to about:config.
  4. Accept the warning and search for xpinstall.signatures.required.
  5. Set this preference to false.
  6. Open your add-ons manager (about:addons), click the gear icon, and select Install Add-on from File.
  7. Choose the previously downloaded archive.
  8. The extension should now appear, although Firefox will indicate it is unverified.
Note.pngNote:If the extension doesn't start automatically, click the extensions button in your browser, find VDCEditor, right-click it, and select Always allow on developer.valvesoftware.com.

Download

This extension is still under development and may be unstable. By installing it, you agree that the creator is not responsible for any shortcomings. Installation of the unpacked extension is required because some browsers block extensions not installed from their store.


v0.2
In development.
Download: TBD


v0.1.2 Latest
A temporary editor developed by N0one, until v0.2 is released.
  • Fixed color of the editor after the site upgrade
  • Fixed some UI elements
  • Added support for RTL
  • Added a button for each type of wiki tag ([[Link]], {{ACategory}}, '''Apostrophes''')
  • Added a special button that changes links into their template one, e.g. [[Category:...]] -> {{ACategory|...}} (idea from Alternative Languages, the regex area)
  • Added a custom dropdown area for stylizing each wiki tag color and a reset button to reset every color
  • Added a custom dropdown area for stylizing the Editor
  • Added highlighting to &#999; elements
  • Added Translations for the VDCEditor.
  • Added an auto scroll on a new line
  • Added a button that enables/disables matching brackets for highlighting same as selection
  • Added a custom file for users to customize template coloring Usage
  • Fully supported stylized templates (Not fully supported by template pages)
Note.pngNote:It highlights templates, which can be very helpful for spotting unclosed ones, if a template isn't properly closed, nothing after it will be highlighted.
  • Lots of optimizations
Download:


v0.1
  • Initial test release.
Download:
Retrieved from "https://developer.valvesoftware.com/w/index.php?title=User:Max34/VDCEditor&oldid=479950"