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 (2010) 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 (2010)
- 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).