Add visual editing to the description field
Open, HighPublic
Actions

Assigned To

Authored By

	Samwilson
	Thu, May 16, 2:26 PM

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.

1. 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

	Title	Reference	Author	Source Branch	Dest Branch
	Add VisualEditor to description field	repos/commtech/wishlist-intake!55	musikanimal	visualeditor	main

Customize query in GitLab

Related Objects

Mentioned In: T362276: Implement title and description form fields

Event Timeline

Samwilson created this task.Thu, May 16, 2:26 PM

Restricted Application added a project: Community-Tech. · View Herald TranscriptThu, May 16, 2:26 PM

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Samwilson added a parent task: T362276: Implement title and description form fields.Thu, May 16, 2:29 PM

Samwilson mentioned this in T362276: Implement title and description form fields.Thu, May 16, 2:37 PM

JWheeler-WMF triaged this task as High priority.Fri, May 17, 4:07 PM

JWheeler-WMF updated the task description. (Show Details)

JWheeler-WMF moved this task from New & TBD Tickets to Up Next (June 3-21) on the Community-Tech board.Fri, May 17, 6:43 PM

MusikAnimal claimed this task.Mon, May 20, 9:50 PM

MusikAnimal edited projects, added Community-Tech (CommTech-Kanban); removed Community-Tech.

MusikAnimal moved this task from Ready 🎬 to In Development 💻 on the Community-Tech (CommTech-Kanban) board.

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.

Samwilson removed a parent task: T362276: Implement title and description form fields.Tue, May 21, 10:57 AM

musikanimal opened https://gitlab.wikimedia.org/repos/commtech/wishlist-intake/-/merge_requests/55

Draft: Add VisualEditor to description field

MusikAnimal moved this task from In Development 💻 to Review/Feedback 💬 on the Community-Tech (CommTech-Kanban) board.Fri, May 31, 6:38 PM

!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.

Add visual editing to the description fieldOpen, HighPublicActions