Extension:CodeEditor: Difference between revisions

From mediawiki.org
Content deleted Content added
m fix used hooks
→‎Issues: gadget should now work over https; base script has been updated & toolserver.org seems ok on https now
Line 84: Line 84:
* JavaScript syntax check only works on local domain and in debug mode (web workers issue)
* JavaScript syntax check only works on local domain and in debug mode (web workers issue)
* copy/paste not available from context menu (Firefox, Chrome on Linux -- kbd & main menu commands ok)
* copy/paste not available from context menu (Firefox, Chrome on Linux -- kbd & main menu commands ok)
* (as Gadget) libs are loaded from toolserver over HTTP; should at least check for HTTPS (toolserver.org's cert is for *.toolserver.org, so fails on https://toolserver.org)
* accessibility: tab/shift-tab are overridden. is there a consistent alternative for keyboard-reliant users?
* accessibility: tab/shift-tab are overridden. is there a consistent alternative for keyboard-reliant users?
* accessibility: accesskey on the original textarea needs to be moved over or otherwise handled
* accessibility: accesskey on the original textarea needs to be moved over or otherwise handled

Revision as of 00:05, 5 October 2011

MediaWiki extensions manual
CodeEditor
Release status: beta
Description Provides a syntax-highlighting code editor for site & user JS and CSS pages, integrating with advanced edit toolbar
Author(s) brion
MediaWiki 1.17+
License GPL v2 (main), MPL/LGPL/GPL (Ace editor)
Download
Quarterly downloads 162 (Ranked 41st)
Public wikis using 8,385 (Ranked 17th)
Translate the CodeEditor extension if it is available at translatewiki.net
Issues Open tasks · Report a bug

CodeEditor extends the WikiEditor advanced editing toolbar with an embedded Ace editor widget, providing some handy features for user/site JS and CSS pages:

  • syntax highlighting for JavaScript and CSS
  • auto-indent
  • tab key produces nice soft indents
  • indent/unindent selection with tab/shift-tab
  • syntax validity check for JavaScript (available upstream, but currently works only in debug mode with local extension assets)

Currently the extension is under development, and details of activation and functionality are subject to change.

Installation

Extension

  1. Install Extension:WikiEditor if not already present.
  2. Get the extension with distributor or svn and drop it into MediaWiki directory /extensions
  3. Setup your LocalSettings.php and add:
    require "$IP/extensions/CodeEditor/CodeEditor.php";

Gadget

Wikis running MediaWiki 1.17 or higher and the WikiEditor and Gadgets extensions can load the JavaScript components from a gadget without directly installing the extension.

See: Special:Gadgets/export/CodeEditor to export the gadget entry to your wiki, or MediaWiki:Gadget-CodeEditor.js for the actual JS code.

The gadget needs a source to actually fetch the files from; the copy here loads them from a SVN checkout on toolserver.org. You may wish to use a local copy.

Configuration

Currently there are no configuration options.

The extension will probably trigger for people for whom it might not work at the moment. That's ok! It's beta. ;)

WikiEditor integration

I've been integrating CodeEditor into the pluggable portions of Extension:WikiEditor as prep for Future editor work, since we'll want to be able to extend it to edit things that aren't plain wikitext, which'll need some changes to the toolbar setup and whatnot. JS/CSS here still return plain text in the end, making it an easier intermediate project. --brion 00:26, 14 June 2011 (UTC)

Good:

  • special char insertions work, including quote pairs to surround text
  • basic formatting insertions work, including link dialogs
  • search/replace dialog works
    • ace's built-in search/replace UI also triggers from keyboard commands, still need to disable them!

Bad:

  • multi-line formatting doesn't apply correctly (but really should that apply here? :)

Todo:

  • remove toolbar buttons that don't apply (formatting, syntax help?)
  • add toolbar buttons that are more directly useful
    • indent/outdent
    • insertion helpers for common keywords or code bits
    • help reference to MW JS API reference, JS & CSS specs/documentation


Compatibility

Browsers tested:

  • Firefox 4.0 / Linux
  • Chrome 10.0.648.204 / Linux

Browsers tested with issues:

  • Opera 11.10 / Linux: copy fails, paste sometimes crashes
  • IE 8.0.6001.18702 / Win XP: some newlines mysteriously removed, corrupting data; insertion point keeps resetting back to the top of the page after a click (arrow keys ok)
  • Safari / iPad 4.3 (8F190): renders ok, but can't set focus or scroll vertically. No focus means no typing. :(

Issues

Known issues:

  • probably explodes with classic toolbar now
  • JavaScript syntax check only works on local domain and in debug mode (web workers issue)
  • copy/paste not available from context menu (Firefox, Chrome on Linux -- kbd & main menu commands ok)
  • accessibility: tab/shift-tab are overridden. is there a consistent alternative for keyboard-reliant users?
  • accessibility: accesskey on the original textarea needs to be moved over or otherwise handled
  • 'discard your changes?' check on tab close doesn't trigger
    • WikiEditor iframe mode has a hack for this; should probably factor it out as common code
  • scrollbar initializes too wide; need to trigger resize check after that's filled (maybe fixed?)
  • cursor/scroll position not maintained over previews/show changes
  • upstream ctrl+R, ctrl+L, ctrl+T are taken over by the editor, which is SUPER annoying