Page MenuHomePhabricator

Add basic functionality for real-time previews
Open, Needs TriagePublic5 Estimated Story PointsFeature

Description

NOTE: As per the investigation (T284796), we will refer to the new feature as real-time preview since there is an existing feature already called live preview (which we will later rename)

As a user/developer, I want to add the basic code needed to make real time previews work. We'll introduce a feature flag that when enabled will add a "Preview" button to the WikiEditor toolbar. When enabled, make the preview area continually update as the user is typing, We'll utilize the existing preview area where it's located now (#wikiPreview) and update it using the to-be-created JS preview module (T294319).

Acceptance criteria

  • Add a feature flag for real-time previews. In the code and release notes, make sure this flag is noted as experimental and shouldn't be enabled by sysadmins.
  • Add a "Preview" button the toolbar. See F34689790 for a visual reference (only the "Preview" button at the top-right of the toolbar; all other UI components are not part of this task)
  • Monitor keyboard input and continually update the preview area, similar to TheDJ's user script.
  • Use mw.util.debounce() to only update the preview area after the user stops typing.
  • The code should be part of one the existing ext.wikiEditor module in WikiEditor
  • The "real time preview" feature should not show a spinner as the existing live preview feature does (assuming the new JS preview module T294319 show spinners, maybe it should?)
  • The old "Show preview" button at the bottom can stay where it is and function as it does now, for the time being, even though it is redundant for real time previews.
  • This should work with MediaWiki-extensions-CodeMirror enabled (can be a separate ticket if too much work)

QA notes

  • Testing can be done on Patch Demo as it will require the feature flag to be enabled (which we won't enable until we're more feature-complete).

Event Timeline

Aklapper renamed this task from Add basic functioanlity for real-time previews to Add basic functionality for real-time previews.Aug 26 2021, 4:38 PM
ldelench_wmf set the point value for this task to 3.Aug 26 2021, 5:22 PM
ldelench_wmf moved this task from To Be Estimated/Discussed to Estimated on the Community-Tech board.

Relevant notes:

We’re calling it Real-time preview to differentiate from Live Preview (which is not actually “live”...)

  • this is not a user-facing change; is this task an improvement to the existing live preview, or are we adding new code?
  • the latter. It will be behind an experimental feature flag so we can safely test & deploy

Eventually we will also add a check for the new preference (which we haven’t built yet)
We will eventually remove the feature flag & go entirely by the preference
Is this ticket focused on feature flagging, or does it involve the actual change? both!
Any UI changes? Are we adding more functionality?
only UI change (which we don’t necessarily need to do) is to remove the loading indicator/spinner - this would be the only visual change
We would leave the preview button there for now
This is going in Core

Note. One concern that I identified which I didn’t see addressed in the spike, is with side by side and that it just doesnt work on narrow screens. I worked around this in ALP by disabling the functionality below a certain width. But it turns out this sometimes surprises ppl. I have received “complaints” in the past, both because ALP didn’t work (just enabled, but their screen was too small so it seemed the preference didn’t do anything) and “what the hell is this all of a sudden” (user had had the option enabled for ages but all of a sudden started using a bigger screen and the functionality “magically” appeared.)

I think that putting some more thought on this situation from a UX perspective can help.
Also new vector might impact this a bit with its max width limit in the skin.

Note. One concern that I identified which I didn’t see addressed in the spike, is with side by side and that it just doesnt work on narrow screens. I worked around this in ALP by disabling the functionality below a certain width. But it turns out this sometimes surprises ppl. I have received “complaints” in the past, both because ALP didn’t work (just enabled, but their screen was too small so it seemed the preference didn’t do anything) and “what the hell is this all of a sudden” (user had had the option enabled for ages but all of a sudden started using a bigger screen and the functionality “magically” appeared.)

I think that putting some more thought on this situation from a UX perspective can help.
Also new vector might impact this a bit with its max width limit in the skin.

This is great feedback! CCing the designer @nayoub as we will have to think about workarounds for this

MusikAnimal changed the task status from Open to Stalled.Sep 16 2021, 6:54 PM
MusikAnimal removed MusikAnimal as the assignee of this task.

Stalled under we have a better idea of what we're doing.

MusikAnimal changed the task status from Stalled to Open.Oct 27 2021, 5:20 AM

Unstalled, but should probably be re-pointed now that the requirements have changed. Note also the highlighted unknowns in the task description.

Discussed at estimation that there will probably be some followup tasks to figure out:
Resize handles, making it sticky, adding logging instrumentation, outstanding question about loading animation

ldelench_wmf changed the point value for this task from 3 to 5.Oct 27 2021, 12:00 PM
ldelench_wmf moved this task from To Be Estimated/Discussed to Estimated on the Community-Tech board.
This comment was removed by NRodriguez.