Replace WYMeditor and improve the authoring experience

Open
  • Is something wrong?
#520 2 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
15/100
Issue type
Feature
Clarity
Needs clarification
Activity status
Active
Tech stack
javascript
Domain
frontend

Research direction

Start with docs/markdown-editor/prototype.html and inspect the existing WYMeditor integration across page types, including mailing list and comments. The issue leaves the editor and stored content format undecided and raises migration, review, search, and revision requirements. Done means agreeing on those choices and delivering the editor, content migration, editing area, two step article flow, and image alt text requirements.

Written by the indexing model from the issue text.

Description

Component: User interface Component: Wymeditor Impact: High Level: Difficult Pagetype: Peer reviewed article Status: Needs discussion Type: Enhancement Usecase: De Stadsbron Value: Users

Authors at De Stadsbron consider the current editor a show stopper. Writing or pasting a long article takes paragraph-by-paragraph copying, headings must be fixed by hand, and the editing area is a small, bare text field. WYMeditor 1.1.1 was last released in 2015 and depends on outdated libraries (see #437).

Editor

Choose and integrate a maintained editor. Candidates mentioned so far:

  • Milkdown or TOAST UI Editor (Markdown-based, usable from plain JavaScript)
  • CKEditor 5 or TinyMCE (HTML-based)

Requirements:

  • Clean paste from Word, Google Docs and web pages (see #348)
  • A limited set of styles: body text, two heading levels, quote, list, link, image, table (see #69)
  • Tables (see #64), image captions (see #119, #285), external links in a new tab (see #378)
  • No HTML knowledge required from authors
  • Works for all page types that now use WYMeditor, including the mailing list and comments (see #98)
  • A migration path for existing content
Stored content format

The choice of editor depends on how content is stored. Today content is stored as XHTML inside the page XML. Options:

  • Keep XHTML and use an HTML editor
  • Store Markdown (for example CommonMark plus a few extensions for figures and captions) and render it to HTML on output
  • Store both: Markdown as source, cached HTML for display

Points to decide: separation of content and layout, lossless conversion of existing articles, impact on the mailing list, peer reviewed article, festival and search, and support for revisions (see #241) and inline comments or track changes for reviewers (see #136).

A clickable prototype of a Markdown editor is available in docs/markdown-editor/prototype.html.

Editing area
  • Let the editing area grow automatically with its content (or default to a large height), so authors keep an overview of long articles
  • Repeat the Save and Cancel buttons at the bottom of the form
Creating an article in two steps

Creating an article now presents all fields at once, with the excerpt above the article text. Proposal:

  • Step 1: the article (title and text)
  • Step 2: excerpt (rename to "Intro text on the website"), excerpt image, notes ("Bijsluiter"; reconsider this term) and sources
  • A "Next step" button at the top and the bottom of step 1
  • When choosing "New page", preselect "Article with review" as the page type
Alt text for images
  • Add a required "Description (alt text)" field to the image dialog
  • Show a warning in the edit view when an image has no alt text
  • Keep the caption (see #119) separate from the alt text

Related: #437, #69, #348, #64, #70, #90, #98, #119, #136, #138, #204, #230, #241, #285, #309, #378, #379, #403, #28

Origin: meeting on the future of Hypha (De Stadsbron).

Dominant language
JavaScript
Stars
5
Forks
9
Avg merge
18h 49m
Merged PRs (30d)
13

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from PlanBCode/hypha

All issues in PlanBCode/hypha

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.