Page MenuHomePhabricator

Add visual editing to the description field
Open, HighPublic

Description

Background

The current wishlist requires users to know wikitext in order to submit a wish. We want the new wishlist to be more accessible to users, meaning they shouldn't need to know wikitext to create a wish or add links, etc.

User story

Given that I am writing a wish, when I want to style my text, then I should see a WYSIWYG editor, and be able to create links, upload images, and style text.

Requirements

  • The description field of the intake form should include a WYSIWG editor on par with Discussion Tools. It does not need all the bells and whistles of visual editor.
  • Users should be able to highlight text and add a link or style text
  • Users should also be able to write in wikitext (if they choose)
  • The editor should show a "live preview" of the styling, so they have confidence in the edits they're making.

Details

TitleReferenceAuthorSource BranchDest Branch
DescriptionSection: Add VisualEditor to description fieldrepos/commtech/wishlist-intake!55musikanimalvisualeditormain
Customize query in GitLab

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
JWheeler-WMF updated the task description. (Show Details)

Problems I'm seeing before even writing any code:

  • VisualEditor requires OOUI. I don't think we're meant to mix OOUI and Codex, or at least that's going to be a hefty amount of JS just for one field
  • Codex discourages using the TextArea component for source editing

I will consult the editing team.

After talking with Editing and Design Systems, it sounds like the best approach is to make the Description field entirely OOUI to ease VE integration, but at the same time mimic the appearance of Codex through design tokens. Since the intake form is relatively a low-traffic page, the extra payload of downloading both OOUI and Codex is deemed acceptable.

!55 adds only VisualEditor, with the intent to add wikitext editing in a separate MR. However editing/saving wishes should largely work fine.

We talked about making a new task for the switcher, but I think it's easier to just re-use the same task for now; this shouldn't go to QA until wikitext editing is supported, anyway (otherwise they have to QA twice). So once !55 is merged, we can move this back to development. And yes, I'll reach out to the Editing team as needed.