Page MenuHomeMusing Studio

WYSIWYG Editor
Closed, ResolvedPublic

Description

Overview

Add a more accessible editor that makes formatting easy for everyday users.

Background

Especially for Teams, we can't expect users to know or even want to learn Markdown. We should give instance admins the option to offer their users an editor that's easy-to-use, even if it comes at the expense of visual simplicity.

Implementation

ProseMirror seems perfectly suited for this, presenting a WYSIWYG interface and creating Markdown behind the scenes.

  • Create a new template (e.g. templates/wysiwyg.tmpl) based on templates/pad.tmpl
  • Set editor = wysiwyg in config.ini (if named this way)
  • In templates/wysiwyg.tmpl, use ProseMirror instead of the <textarea> for the writing interface.
  • When publishing, pass along the title, plus the Markdown body
  • When editing a post, pass in the title and Markdown body into the ProseMirror editor for rendering

Revisions and Commits

rWF WriteFreely

Event Timeline

matt triaged this task as Medium-High priority.Feb 25 2020, 1:06 PM
matt created this task.
matt added a project: Restricted Project.Aug 4 2020, 2:08 PM
matt added a project: Roadmap.

I'm going to try to wrap this up.

matt added a project: Restricted Project.Sep 25 2020, 5:21 PM
matt moved this task from Restricted Project Column to Restricted Project Column on the Restricted Project board.Sep 25 2020, 5:30 PM
matt added a project: Restricted Project.Sep 29 2020, 6:53 PM

Found a resource for adding the CMD + K binding for adding links: https://discuss.prosemirror.net/t/binding-command-k-to-open-insert-link-prompt/1354

Looks like it's something you can add as a custom plugin.

I could also see this being used for the CMD + P binding for publishing.

matt removed a project: Restricted Project.Dec 3 2020, 3:32 PM

Will this make it possible to upload and caption photos from the same place as posts are written?

@heyakyra In the short term, unfortunately uploads still happen in a separate place (Snap.as). But we'll work toward adding uploads into this editor!

No problem, we can teach editors to adapt in the meantime! Combined with T520, will there at least be a way to copy image embeds from Snap.as into the WYSIWYG editor without having to copy markdown and switch to markdown mode (assuming that will still be an option)?

There will be a toolbar button in the WYSIWYG editor to add an image, which will let editors paste in the Snap.as image URL. We may need to make this easier, like by just showing the image URL in Snap.as instead of the full Markdown. Will investigate that.

Awesome, that sounds easy enough then. Thank you!

matt closed this task as Resolved by committing Restricted Diffusion Commit.Mar 18 2021, 9:55 PM
matt added a commit: Restricted Diffusion Commit.
matt added a commit: Restricted Diffusion Commit.Mar 19 2021, 7:46 PM
matt added a commit: Restricted Diffusion Commit.Mar 22 2021, 4:44 PM
matt added a commit: Restricted Diffusion Commit.