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