User:Max34/VDCEditor: Difference between revisions

From Valve Developer Community
Jump to navigation Jump to search
(A new era of VDC page editor!)
 
m (→‎Download: How did this happen)
 
(35 intermediate revisions by 4 users not shown)
Line 1: Line 1:
VDCEditor is an upcoming chromium 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.
<span style="position:relative; top:-2px">[[File:Icon-VDCEditor.png|link=|17px]]</span> '''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|You can suggest your ideas for expansion on the talk page.}}
Originally developed for the Valve Developer Community, it can be used across any MediaWiki-based platform.
__NOTOC__
== Usage ==
Navigate to any editable page.


== Development progress ==
Click the Edit tab to launch the enhanced editor.
<span style=color:green>☑</span> Figure out how to work with js


☐ 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
== Installation Instructions ==
<div style="display:flex; gap: 10px;">
{| align="center" style="background:#323232; border:2px solid #4f4f4f; border-radius: 6px; padding: 15px 10px;"
! style="font-size:1.6em; color:white; padding-bottom:5px; solid #4f4f4f;"| Chromium-Based Browsers
|-
| style="padding-top: 10px;"|
# Download the .zip archive from the link below.
# Extract the archive. You should have a VDCEditor folder containing all extension files.
# Place the folder anywhere on your computer.
# 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.
|}


☐ Change the style of the code block to a dark version


☐ Change the style of the rest of the editor elements (buttons, a field with a description of the changes) to dark mode
{| align="center" style="background:#323232; border:2px solid #4f4f4f; border-radius: 6px; padding: 15px 10px;"
! 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.}}


☐ Add line numbering
== Download ==
{| 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> Make editor settings persist


<span style=color:green>☑</span> Add code font size setting
{| 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 Word Wrap checkbox setting


☐ Make a status bar
{| 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.3 <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;" | Pushing an early and a bit more polished editor, more features will be coming in the future.
* Added an error window, this is an important change, since any break in the editor may not save any changes
* Added search mode
* Added experimental features; Such as:
** Live summary preview
** Wiki table styling
** string counter (only on /strings pages)
** Open a new tab with template name (e.g clicking the "Bug"; <nowiki>{{Bug|...}}</nowiki>)
** Show invalid HTML tags (Check for any unclosed html tags)
* Added a Show Hidden Characters button
* Added "markup" style (stylizes {{Code|<nowiki>#</nowiki>}}, {{Code|<nowiki>;</nowiki>}}, {{Code|<nowiki>:</nowiki>}}, {{Code|<nowiki>*</nowiki>}} on the start of the line)
* Added a UI to add UDT (User Defined Templates)
** Renamed templates.js to templates_json.js to only have built-in magic words
* Removed Right to Left mode
** Buggy, breaks some features, and events don't get the mode
* Fixed HTML tags styling
* Fully supported template nesting and param nesting
* Seperated translations to their repsective json files, see {{GitHub|N0ine/VDCEditorEx/blob/v0.1.3/VDCEditorEx-v0.1.3/src/locales/locales.json|src/locales/locales.json}} on how to add a language.
|-
| style="padding-top: 10px;"|<span style="font-size:132%; color:white;">Download:</span>
* {{GitHub|N0ine/VDCEditorEx/releases/tag/0.1.3|GitHub}}
|}


<span style=color:green>☑</span> Add an indicator of the number of characters in the code


☐ Add a carriage location indicator
{| 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
|-
| 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}}
|}


☐ Make custom tooltips like in Visual Studio (functionality). It will be displayed when Ctrl is pressed


☐ Add highlighting of magic words, as well as a special warning highlighting if a magic word that implies use once has been used more than once in the code
{| 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
☐ Add highlighting to {{Code|&amp;#AAA;}} elements
|-
 
| style="padding-top:5px; border-bottom:1px solid #4f4f4f;" |
☐ Add highlighting to HTML elements
* Initial test release.
 
|-
☐ Add highlighting to CSS elements
| 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]
☐ Add highlighting to MediaWiki elements (hardest one)
|}
 
☐ Somehow 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 palette next to each color (as in F12)
 
 
(For copying: ☐ <span style=color:green>☑</span> <span style=color:red>☒</span>)

Latest revision as of 10:07, 19 September 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.3 Latest
Pushing an early and a bit more polished editor, more features will be coming in the future.
  • Added an error window, this is an important change, since any break in the editor may not save any changes
  • Added search mode
  • Added experimental features; Such as:
    • Live summary preview
    • Wiki table styling
    • string counter (only on /strings pages)
    • Open a new tab with template name (e.g clicking the "Bug"; {{Bug|...}})
    • Show invalid HTML tags (Check for any unclosed html tags)
  • Added a Show Hidden Characters button
  • Added "markup" style (stylizes #, ;, :, * on the start of the line)
  • Added a UI to add UDT (User Defined Templates)
    • Renamed templates.js to templates_json.js to only have built-in magic words
  • Removed Right to Left mode
    • Buggy, breaks some features, and events don't get the mode
  • Fixed HTML tags styling
  • Fully supported template nesting and param nesting
  • Seperated translations to their repsective json files, see src/locales/locales.json src/locales/locales.json on how to add a language.
Download:


v0.1.2
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=488926"