Page MenuHomePhabricator

Deemphasise wikitext markup in mobile wikitext editor
Closed, ResolvedPublic

Description

Proposal:

  • Only supported on browsers with content editable.
  • Currently doesn't update as you type, so only really solves problem of making initial load for newbies less scary.

Links, headings and html comments are highlighting in light grey, all other content is black.
See

device-2014-06-04-085320.png (640×360 px, 50 KB)
for an example of this in app and https://gerrit.wikimedia.org/r/157106 for an early attempt at this in mobile web.

Event Timeline

Jdlrobson raised the priority of this task from to Needs Triage.
Jdlrobson updated the task description. (Show Details)
Jdlrobson added a project: Web-Team-Backlog.
Jdlrobson subscribed.

@Jhernandez, @Jdlrobson and me talked on IRC about it and we think it would be nearly impossible (with our all limited time and resources) to develop an own solution, which would work on _all_ browsers. So we think a library would be the easiest way doing this. We discussed CodeMirror (which has already a mediawiki extension [1]) and i started to implement it to see, if it fits our needs and is implementable in our editor. The result:

test.png (336×1 px, 79 KB)

It would need some tweaks to the setup code, so i think it would be easier to use the extensions code and port it to MobileFrontend, which would require to commit codemirror and the mediawiki mode addon from the extension developer. Otherwise (if we reuse the resourceloader module of this extension) we could require Extension:CodeMirror in order to use codemirror. I'm unsure what would be the best way :(

Hey cool, the developer of CodeMirror seems to be registered here, adding him as a subscriber so he can see, that we're working with his code, maybe he can help us and/or has useful input @Pastakhov.

[1] https://www.mediawiki.org/wiki/Extension:CodeMirror

Thanks you for adding me here.

The CodeMirror library is awesome. Originally I wanted syntax highlighting and auto completion for the PhpTags extension. But I couldn't leave gray wikitext markup although it wasn't trivial task and I made the CodeMirror extension. There are few unfinished tasks, for example [[File: ... ]], prefix[[link]] and auto completion. Also I have not tested it with right-to-left text.

You are welcome if you want to contribute to the CodeMirror extension for resolve your own tasks. I'll help If I can.

Change 195991 had a related patch set uploaded (by Florianschmidtwelzow):
Rework extensions setup

https://gerrit.wikimedia.org/r/195991

Change 195995 had a related patch set uploaded (by Florianschmidtwelzow):
Add CodeMirror for alpha users to better understand wikitext

https://gerrit.wikimedia.org/r/195995

Cool stuff guys!

@Jdlrobson :

  • Would a patch applying this only to alpha be acceptable? We can add bucketing and metrics afterwards if alpha tests look good and @Maryana is interested.
  • How would we go about the dependency on CodeMirror?

I think this would make a good alpha experiment :)

I'm not sure if aggressive A/B testing is necessary for a relatively small change like this, though. We could simply do a few user tests to see if this makes editing more user-friendly.

Change 195991 merged by jenkins-bot:
Rework extensions setup (v 3.1.0)

https://gerrit.wikimedia.org/r/195991

Change 195995 merged by jenkins-bot:
Add CodeMirror for alpha users to better understand wikitext

https://gerrit.wikimedia.org/r/195995

@Florian do we have to get this deployed now? I'm not seeing on beta labs

@Jdlrobson: Without CodeMirror installed, you'll never the the new editor :) I uploaded https://gerrit.wikimedia.org/r/#/c/199941/ to make it able to install CodeMirror just as a provider for the codemirror libraries without doing anything visible. I think it would be easier to deploy the extension with deactivated frontend, just for use in MobileFrontend, what do you mean? I'm still not sure, if this is the right way, it would need a (security-)review of the extension, before we can deploy it, right?

I do not mind to change owner of CodeMirror repository to someone who will review changes on security before merging. If I'm not mistaken this is necessary in order to use it on Wikimedia projects.

Change 202360 had a related patch set uploaded (by Pastakhov):
fix mwextModes property of CodeMirror editor

https://gerrit.wikimedia.org/r/202360

Change 202360 merged by jenkins-bot:
fix mwextModes property of CodeMirror editor

https://gerrit.wikimedia.org/r/202360

Change 202421 had a related patch set uploaded (by Pastakhov):
Lets CodeMirror automatically resize to fit its content

https://gerrit.wikimedia.org/r/202421

Change 202421 merged by jenkins-bot:
Lets CodeMirror automatically resize to fit its content

https://gerrit.wikimedia.org/r/202421

Jdlrobson claimed this task.

Done in alpha with CodeMirror installed. Let's iterate on this.

Reopening since CodeMirror is a no-go (T95041).

@Jdlrobson Is this a duplicate of T101246, or is this supposed to be mobile-specific?

@kaldari it's kind of similar but the opposite intention Experienced editors will want syntax highlighting emphasing wikitext, non-experienced having them gray. :)

T101246 doesn't specify what is emphasized and what isn't, but I think it's mainly intended to address the desktop WikiText editor. This bug seems to be about the mobile editor, but nothing in the title, projects, or description mentions that, so I'm not sure. Is this bug just about the mobile editor?

Feel free to merge then :) Just make sure to clarify in the description we might want to deemphasise the syntax.

@Jdlrobson In case you haven't been following the discussion on those other bugs, the Editing team probably wouldn't be happy with this (although I could be wrong). I still need to clarify the scope of this bug though. Is this bug just about the mobile editor?

Jdlrobson set Security to None.

It's an old one prior reorg. Do with it what you like :)

kaldari renamed this task from Deemphasise wikitext markup in editor to Deemphasise wikitext markup in mobile wikitext editor.Oct 13 2015, 4:09 PM