Extension talk:CodeEditor

Jump to navigation Jump to search

About this board

How to set the content of the textbox?

He7d3r (talkcontribs)

If I go to https://en.wikipedia.org/wiki/Special:MyPage/common.js?action=edit and type $('#wpTextbox1').val('NEWCODE') in the console:

  • The code is replaced by "NEWCODE" if CodeEditor is disabled
  • Nothing happens if CodeEditor is enabled

What should be used to set the content of the textbox if CodeEditor is enabled? I know from en:Special:Diff/617061684 that we can get the contents by using

  • $( '#wpTextbox1' ).data( 'wikiEditor-context' ).$textarea.textSelection( 'getContents' ) or
  • $( '#wpTextbox1' ).textSelection( 'getContents' )

But I have no idea what to use to set the content...

Mxn (talkcontribs)
var editor = $(".ace_editor");
editor[0].env.document.setValue("// This is awesome!");
TheDJ (talkcontribs)

This would allow you to use the Surface of the ace editor directly yes. It is the interface that our textSelection plugin ought to be talking to really....

He7d3r (talkcontribs)
TheDJ (talkcontribs)

Yeah, the textSelection plugin basically abstracts away browser differences when it comes to dealing with text areas. The CodeEditor plugin uses a totally different text surface. You should see #wpTextbox1 here more as the form value, then a input field in the case of CodeEditor. It has a basic implementation of textSelection API, which allows it to 'communicate' it's value trough the text area object, but it uses a totally different text surface to draw the value.

The textSelection plugin is not fully implemented however (neither for textareas nor for CodeEditor). Notably the 'setContents' method is missing, which would be used for what you describe. But ou can select and then insert characters in the selection (encapsulateSelection allows this).

Some links: https://git.wikimedia.org/blob/mediawiki%2Fcore.git/HEAD/resources%2Fsrc%2Fjquery%2Fjquery.textSelection.js#L58 https://git.wikimedia.org/blob/mediawiki%2Fextensions%2FCodeEditor.git/c9499815539390beff23527dc968465c30d4ec92/modules%2Fjquery.codeEditor.js#L522

We ought to improve this at some point. The textSelection plugin is a remnant of the iframe wikicode highlighting experiment of the 2010 WikiEditor that got cancelled, so it hasn't seen too much action since then. It's currently only used for special character insertion.

He7d3r (talkcontribs)

For future reference: the setContents function was implemented in gerrit:149529.

However I didn't figure out how to use it as a solution for the initial problem. None of these work if CodeEditor is enabled:

  • $( '#wpTextbox1' ).textSelection( 'setContents', 'TESTING' )
  • $( '#wpTextbox1' ).data( 'wikiEditor-context' ).$textarea.textSelection( 'setContents', 'TESTING' )
Reply to "How to set the content of the textbox?"

CodeEditor on lua subpages

נועם ימיני (talkcontribs)

CodeEditor supports lua on pages in the "Module" namespace.

however, many times you'd like to test your module on a subpage of your user page before publishing it, like you often do with templates and articles. The Extension TemplateSandbox already support testing modules with names from the form "User:myusername/Module:modulename", but when you try to edit a page in that name, you have to do it with the regular wiki editor.

That problem does not exist with js and css pages because they are being identified by their extension, not their namespace.

I think that code editor should be available in modules that are subpages of a user page.

I have also opened a ticket in https://phabricator.wikimedia.org/T217508


נועם ימיני (talkcontribs)

I have suggested a code change in scribunto extension in the foregoing phabricator ticket.

It worked to me, I believe it should enter to the extension code.

Reply to "CodeEditor on lua subpages"

JS errors in browser console (Chrome)

Kellewic (talkcontribs)

I have Syntax Highlighting working and Scribunto working, but this extension throws the following errors in the browser console (not sure why). Using MediaWiki 1.30.0. If I comment CodeEditor from LocalSettings.php the errors go away:

VM116:125 This page is using the deprecated ResourceLoader module "jquery.ui.widget".
VM116:165 This page is using the deprecated ResourceLoader module "jquery.ui.position".
This page is using the deprecated ResourceLoader module "jquery.ui.core".
Please use "mediawiki.ui.button" or "oojs-ui" instead.

jQuery.Deferred exception: $button.data(...) is not a function TypeError: $button.data(...) is not a function
    at Object.updateButtonIcon (<anonymous>:506:280)
    at Object.updateCodeEditorToolbarButton (<anonymous>:506:345)
    at Object.setupCodeEditorToolbar (<anonymous>:505:837)
    at Object.$.wikiEditor.extensions.codeEditor (<anonymous>:516:172)
    at jQuery.fn.init.$.fn.wikiEditor (<anonymous>:36:196)
    at HTMLDocument.<anonymous> (<anonymous>:516:2260)
    at mightThrow (URL/load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=vector&version=0ocu5xa:49:598)
    at process (URL/load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=vector&version=0ocu5xa:50:269) undefined

Do I need to update some JS somewhere? Thanks.

TheDJ (talkcontribs)

What releases of the extensions WikiEditor and CodeEditor are you using ? It might be that they are not the same, and honestly we are bad at keeping compatibility of extensions between the various releases.

Kellewic (talkcontribs)

WikiEditor - 0.5.1

CodeEditor - (229be94)13:40, May 9, 2018

2605:A601:C65:AF00:DBDE:7B53:66F:54FA (talkcontribs)

I ran into this issue too. I had to re-download WikiEditor from the extension page on this site and re-install it. The version that came with my copy of mediawiki claimed to be 0.5.1, but reinstalling the extension still fixed the issue.

Reply to "JS errors in browser console (Chrome)"
Njardarlogar (talkcontribs)

More of an Ace editor question perhaps: how does one reference captured regex groups? \1 does not work.

Mxn (talkcontribs)

Ace is written in JavaScript, so it uses $1 to refer to captured groups. Per this document, $& is also available, as is $$ for a literal dollar sign. It doesn't look like &` and &' are available.

Reply to "Regex group capture"
Nikerabbit (talkcontribs)

The page seems to be missing some steps:

  • WikiEditor is required, but that isn't sufficient
  • One must also set $wgDefaultUserOptions['usebetatoolbar'] = 1;

Hopefully this note saves someone time I spend figuring this out :)

Kghbln (talkcontribs)

Thanks for the note. I have updated the documentation accordingly. Lucky me that I always have WikiEditor installed with this preference so I did not run into this.

Reply to "Installation"
Loman87 (talkcontribs)


I am quite a dummy in programming, so be patient with my question please. How hard would be to rebuild this extension to validate XML too?

Reply to "XML-TEI validation"

Why is there no wikitext syntax highlighting?

Zewas (talkcontribs)

Is there a technical reason or did no one get around to writing one?

TheDJ (talkcontribs)

CodeEditor uses the Ace library and it dors not support wikitext highlighting.

Zewas (talkcontribs)

Yes, I noticed :) But why not? Is there a technical reason why there's no syntax highlighter for wikitext or is the problem simply that nobody has tried to write one yet?

PerfektesChaos (talkcontribs)

The reason is that Wikitext is not really a formal language, but a mess.

For 15 years it has been tried to create a Backus-Naur description, without full success. There is also no syntaxhighlight presentation.

However, you may search for a thing called CodeMirror.

Zewas (talkcontribs)

So you think it's impossible to write a syntax highlighter without a full-fledged parser?

PerfektesChaos (talkcontribs)

“Impossible” is a big word.

Theoretically, yes. Practically, low outcome.

  • You might do some markup for bracket pairs.
  • Interpretation is dependant on localization and state of the farm.
  • Interpretation depends on localization.


  • [[CSI: Miami]]
    • Currently in article space.
    • As soon as csi will be etablished as wiki language, it is an interwiki link.
  • [[Image:map.png|Legend]]
    • Media transclusion, Image: rather than File:
    • Could be localised file namespace name: [[Fichier:map.png|Legend]] is image transclusion in French.
    • If Fichier: is not file namespace name, that is linking to article or other namespace.
  • {{Something}}
    • Could be anything: template transclusion, parser function, localised variable name.
  • so <what> now
    • If what is known HTML or tag extension (may be localised name), this is a tag.
    • Otherwise, it is mathematical: A < B < C
  • A template transclusion may be embedded within syntax and evaluates to some string under certain conditions. No way.

Huge efforts, limited resulta.

  • You need to put constant set of keywords at syntax repository, but interpretation depends on local wiki environment.
Zewas (talkcontribs)

That's all true, yes. A parser would need detailed knowledge about the wiki itself. That knowledge is not supremely hard come by:


but still, that knowledge is required. And the parser would also need a database of extension tags, parser functions, magic words and such. That's where it gets really tedious...

I'm asking all of these questions because I'm determined to write a wikitext parser in JavaScript. Not a complete parser. It won't output HTML or resolve templates, but it will parse everything into an abstract syntax tree. It's ambitious, I know :|

TheDJ (talkcontribs)

You should read the (by now) heavily outdated documentation page Markup_spec.

TheDJ (talkcontribs)

Oh and Parsoid of course is a JS parser for wikitext.

Zewas (talkcontribs)

Thank you!

Reply to "Why is there no wikitext syntax highlighting?"

Shortcut for find-and-replace?

Erutuon (talkcontribs)

Ctrl-F is a shortcut for opening the find box, and it used to be (if I remember correctly) that I could press it a second time to open the replace box. Now I have to press Ctrl-F and click a button. Any way to add that functionality back, or create another shortcut for find-and-replace? (Maybe it could be a per-user option.)

Reply to "Shortcut for find-and-replace?"
Josedanielsteller (talkcontribs)

Made a new wiki [no link because it's hosted on a XAMPP-based server and I don't know how to make the contents of the htdocs folder public] and installed the CodeEditor to make the ombox required for many templates, but the button to enable the editor doesn't show up at all!! What is happening??!! [BTW, to install it I extracted it to the extensions folder and typed "wfLoadExtension( 'CodeEditor' );" in the LocalSettings.php file. Is there a missing step??]

Josedanielsteller (talkcontribs)

Nevermind, I didn't notice I had to install Scribunto too for it to show up when editing module pages.

Reply to "Where the heck is it??"
Cafeinlove (talkcontribs)

Typing Korean characters through IME(bundled in Windows 10) outputs oddly. Please see next:

There is some irregularity in typing in Korean. Basically, Korean characters are composed of Consonant + Vowel + Optional secondary consonant . That combination forms one single character; and the pronunciation varies according to its components — meaning, 1 character equals 1 syllable. In consequence, the typing software generally tries to hold your input until the formation completes and release the formed character into the editor afterwards. (I am not sure if this relates to the issue, just providing some context.)

As of now, I am escaping this by typing just one character at a time then add space + delete the space with backspace: this action sort of resets something and allows me to continue writing another character.

Reply to "Weird output with IME Ko-KR"