Skip to content

Meta issue : Editor #1022

@John-Paul-Larkin

Description

@John-Paul-Larkin

Context

Codu currently uses a Markdown editor for creating posts. Current editor
What is markdown?

A new editor, currently a work in progress, is available in the alpha section of the site. This is not accessible in production, but you can use it in development by navigating to:
http://localhost:3000/alpha/new

It implements the TipTap headless editor, which is a rich text editor that's customisable and extendable through extensions. Its headless nature means it comes without a set user interface, so we can include and customise the features as we see fit.

What changes would we like to implement?

We would like to switch to a WYSIWYG rich text editor with a simpler interface and feature set.
What is WYSIWYG?
We are taking inspiration from editors implemented in medium/notion. Check those out for the kind of feel we are hoping to achieve.

The user should be able to make edits, with changes instantly reflected in the document as it would appear in its final state.

We will still include some basic markdown features, however most will be removed.
Expected markdown features (If practicable )
H2 ##
H3 ###
Bullet points *
Codeblocks ```
inline code. `
Note: Added if practicable because we will need to investigate how we can implement this through TipTap.

Rich text with certain actions available through a / slash menu or tooltip on hightlighting specific text. This already exists, however we would like to edit it to specific features.

Connected issues

Remove toolbar from the alpha editor #1028
Editor Title is too verbose #1038
Auto-apply markdown features: Enable WYSIWYG #1039
Remove the preview button to make editor WYSIWYG #1024

...more Incoming

Screenshots

Alpha editor in its current form.

New editor in alpha section

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions