Monaco is the core editor of Visual Studio Code developed by Microsoft. This (MwMonaco Editor) project verifies a possible application approach on MediaWiki platform. Please note that this is an experimental project, everything is subject to change without implicit or explicit notification.
For some MediaWiki implementations, it is impossible to introduce VisualEditor due to numberous reasons, such as insufficient hardware resources and pool HTML-based template preview quality. MwMonaco attempts to introduce modern software development experience in authoring Wiki articles.
As part of the core features of modern Integrated Development Environment, MwMonaco will provide in-editor diff(with three-way merge when edit conflicts), autocompletion(IntelliSense) and language services(e.g. Lint) to reduce the study cost for MediaWiki beginners. Experienced editors can benefit from features like advanced template autocompletion and parameter hinting, CodeLens-like template preview, etc.
Please note that this project is in active development, hence not all features mentioned below will be available at this moment.
Source code is available at here. Microsoft .NET Core SDK and Node.js is required to build this project.
To use Monaco Editor, please add following JavaScript snippet to your user JavaScript page (aka. common.js):
$.getScript("/User:Imbushuo/MonacoEditor/MediaWikiTokenizer.js?action=raw&ctype=text/javascript", function (data, textStatus, jqxhr) { $.getScript("/User:imbushuo/MediaWikiLint.js?action=raw&ctype=text/javascript", function (data, textStatus, jqxhr) { // Loader for Monaco editor mw.loader.load('https://zh.moegirl.org/User:Imbushuo/MonacoEditor.js?action=raw&ctype=text/javascript'); }); });
Warning: Disabling additional highlighting and editor tools is recommended.
Control/Command
+ Shift
+ D
: Triggers in-editor diff with original documentControl/Command
+ F7
: Triggers document check-in (submission).These actions are also available in context menu. To trigger context menu, use context menu key on keyboard or right-click on the editor.
You can personalize editor by adding additional settings section to your user JavaScript page. A full user settings TypeScript definition is available below:
/** * UserConfiguration.d.ts: User configuration definition */ declare module MwMonaco { export interface IMonacoUserConfiguration { fontFamily?: string; theme?: string; } }
fontFamily
: Set editor's font collection. The default value is "Iosevka, Consolas, Monaco, 'Source Han Sans SC', 'Source Han Sans', 'Microsoft YaHei', monospace"
theme
: Set editor's theme. Available themes are vs
, vs-dark
and hc-black
, as described in Monaco documentation here.Monaco editor can check MediaWiki syntax errors. Please note that this feature is under development and may contain errors. For example, an unmatched bracket pair generates a warning (with green wavyline). Highlighting for wiki text is under development. You will see something (e.g. template and parser function editor references, link references) got highlighted, but something else is not.
For JavaScript and TypeScript files, full language services including autocompletion and syntax analysis is completed. Core libraries like browser environment, jQuery and a subset of MediaWiki client JavaScript library have their TypeScript definition pre-imported. So you can enjoy advanced language services out-of-box.
Adding custom TypeScript library definition is supported. Details will be available at a later time.