Extension talk:CodeEditor

Jump to: navigation, search

About this board

JS errors in browser console (Chrome)

3
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

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.

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)

Hi,

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?

10
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.

Consider:

  • [[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:

https://www.mediawiki.org/w/api.php?action=query&meta=siteinfo&siprop=namespaces%7Cgeneral%7Cinterwikimap%7Cextensiontags%7Cfunctionhooks%7Cvariables%7Cfileextensions%7Cmagicwords%7Cspecialpagealiases

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?"
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??"

How to set the content of the textbox?

10
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!");
editor[0].env.editor.selectAll();
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' )
Sadashiva5510 (talkcontribs)

my test 1

Reply to "How to set the content of the textbox?"
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"
Jack who built the house (talkcontribs)

Are there plans to update Ace from its author? Several important changes were made. Of particular importance to me are—removal of the concept of "Too many errors" from JSHint with the buggy implementation in Ace where this warning sometimes shows up even if no errors at all are present in your code above the line with warning, which makes it impossible to see the real errors after the line (the removal was done back in 2011); giving an opportunity to customize worker options and adjust which warnings & info you want to see in the gutter line.

Jack who built the house (talkcontribs)

In the meantime I have found that there is an opportunity to customize worker via calling editorSession.$worker.call('setOptions', [{ options }]); (editorSession is obtained by

mw.hook('codeEditor.configure').add(function (editorSession) {
    ...
});

). The list of the options is available here. You can set maxerr to a higher value if you experience the same issue as I do. The fact that, by default, the editor shows "Too many errors" warning at 210–220 line in two distinct scripts of mine with no other errors at all strikes me nevertheless.

This post was hidden by Jack who built the house (history)
Reply to "Update Ace?"