Page MenuHomePhabricator

Draggable resize preview and editor container
Closed, ResolvedPublic3 Estimated Story PointsFeature

Description

Feature requested:

When I edit my syntax and content side by side, I want to have the option to resize the output, so I focus on the wikitext by sliding the middle divider sideways.

Functionality/software changes

  • functionality goes into Wikieditor extension of 2010 text editor
  • make the division between editor and preview draggable
  • add intuitive UI that shows things can be dragged here

User interface changes

Screenshots/mockups:

Screenshot 2021-10-15 at 12.29.18.png (1Γ—1 px, 870 KB)

Figma Board

Does this need QA?

Sure

Event Timeline

The handlebar/draggable slider for split-panes is similar to the one used here: https://vuejsexamples.com/a-vue-js-simple-and-touch-ready-panes-splitter-resizer/
Ideally, both panes should have minimum heights and width (depending on vertical or horizontal stacking – T293337) but also on resizing (which is already the case for the editing pane on Wikitext Editor).

Open question (which is maybe for a future iteration): Should it "remember" the division point?

ldelench_wmf set the point value for this task to 3.Nov 24 2021, 12:49 PM
ldelench_wmf moved this task from To Be Estimated/Discussed to Estimated on the Community-Tech board.

Change 739770 had a related patch set uploaded (by Samwilson; author: Samwilson):

[mediawiki/extensions/WikiEditor@master] Add two-pane layout for realtime preview

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

We still need to confirm the behaviour of the multiple different vertical resizing systems: at the moment, the core text area has one (via CSS resize), MediaWiki-extensions-CodeMirror has one (via jQuery UI resizable), and we're introducing a third. Do we want to have a vertical-resize bar always present, even before realtime preview is open? This would make it simpler and reduce the number of different UI elements, and (my favourite reason) it means we can get rid of one more small bit of jQuery UI (from CodeMirror).

The different modes can be seen in this patchdemo: https://patchdemo.wmflabs.org/wikis/4823a5ec09/w/index.php?title=Main_Page&action=edit

Change 763176 had a related patch set uploaded (by Samwilson; author: Samwilson):

[mediawiki/extensions/CodeMirror@master] Support WikiEditor's realtime-preview feature

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

In the design meeting a few hours ago we decided that the bottom up-down resize bar should always be visible, even when the preview pane isn't open. It should also be a "one sided" bar, with the drag affordance floating over the grey of the form background. There are some issues with this with some gadgets that add white elements there, but we'll deal with them as needed.

This means that we can get rid of the corner resize triangles (both for CodeMirror and native textarea). It would be possible to do this separately to the preview work, but we'll keep it all bundled to make it easier to roll out and test.

The drag handles should be lighter in colour, and get darker on hover (when the cursor changes too). Details of this and other colour/size matters will be sorted out later (but won't be large changes in behaviour).

Details of the width-limiting for the preview pan (e.g. for Vector22 which has a max width) will be figured out later.

I think I've forgotten a couple of things… @nayoub you've probably got more to add. But I think as far as the bulk of this ticket goes, I've got enough to be going on with. :-)

Change 739770 merged by jenkins-bot:

[mediawiki/extensions/WikiEditor@master] Add toggle button and two-pane layout for realtime preview

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

Test wiki created on Patch demo by MusikAnimal using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/b7048675d3/w/

Test wiki on Patch demo by MusikAnimal using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/b7048675d3/w/

Test wiki created on Patch demo by DMaza (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/c9159bac23/w/

Test wiki created on Patch demo by DMaza (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/d7c687e377/w/

Done and merged. There might be some follow-ups with regard to min/max sizes of the panes, but pretty much it's all ready for QA. It's not yet on Beta Cluster, but will be soon; for now, test on Patchdemo.

Change 763176 merged by jenkins-bot:

[mediawiki/extensions/CodeMirror@master] Support WikiEditor's realtime-preview feature

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