(cache)CKEditor 5 PoC (#2333) · Issues · Minds / Minds Frontend

changed due date to December 20, 2019

added 1 deleted label

added scoped labels

changed weight to 24

marked this issue as related to #1967

changed the description

changed due date to January 14, 2020

removed 1 deleted label

added scoped label

assigned to @benhayward.ben

unassigned @eiennohi

changed milestone to %Sprint::01/01 - Xerothermic Xenartha

changed milestone to %Sprint::01/15 - Youthful Yabby

added scoped label and automatically removed label

added to epic &34

added scoped label and automatically removed label

marked the task Make sure we can save on the backend as completed

marked the task Make sure we can save on the backend as incomplete

Saving!

added 7h of time spent at 2020-01-17

removed label

added scoped label

added scoped label and automatically removed label

marked the task Make sure we can save on the backend as completed

marked the task Old blogs should load in the old editor as completed

marked the task New blogs should load in the new editor as completed

New blogs should load in the new editor
Old blogs should load in the old editor

They are in separate modules with separate routes to access. Does this check the above boxes or are we wanting to re-arrange the layout a little?

marked the task Make sure we can easily copy text from wordpress sites and other rich copy sources as completed

Copying basic text functionality from WordPress

Medium, basic text functionality working well

Google docs, same (though there are a lot of tools here i suspect would not carry over)

Our old blogs are not copy-pastable without re-styling and adding in images

marked the task Make sure we provide the ability to quickly create bulleted lists and numeric lists as completed

marked the task Install CKEditor 5 and use the inline mode to make it resemble our existing medium-editor as much as possible as completed

marked the task Allow loading of old blogs using the old components as completed

For sanitization first, a blog containing approx 3,333.4 lines of XSS attacks (24435 words - hard to seperate when its all tags though). As /yoursite.com triggers our spam filter I omitted examples containing that

https://github.com/payloadbox/xss-payload-list

Testing no custom HTML is allowed I copied the content of this site into a blog, all tags look to be escaped.

Style tags (H1 at the bottom is markdown to test the CSS and SHOULD be a H1)

marked the task Users should only be to chose from predetermined styles. as completed

marked the task Install the CKeditor 5 plugins that allows conversion of markdown into our medium html as completed

Limit the styles and functionality as much as possible. We want to create a bloat-free experience with minimum toolbars and chrome that fits into the overall site.

A great resource to generate the toolbar section of the editor config:

https://ckeditor.com/latest/samples/toolbarconfigurator/index.html#basic

todo other than the above:

Connect up media uploader
Get align / indentation working
See if we can auto-save copy-paste history - since its built into the toolbar maybe this is easy to do.

Brian Hatchet: @ben is reporting that the POC is going very well and fits out requirements well. There is only the issue of plugins. https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html

Brian Hatchet: Plugins are a bit of a stretch. It looks like we're going to have to do custom builds if we want to mix and match. If you try to import prebuilt modules (like plugins), they start throwing cross dependency errors.

Brian Hatchet: Easy enough to do a custom build with everything we'll need, but we will be adding a step to the build process

Brian Hatchet: Or ... creating a fork

Ben: Yup, it is going smoothly so far, except for the hurdle of needing to load a plugin to enable alignment. I used the balloon editor https://ckeditor.com/docs/ckeditor5/latest/examples/builds/balloon-editor.html to make it, but unfortunately it seems to be missing alignment options.

Ben: Adding it as a plugin I believe will encompass either, making our own build, or forking the BalloonBuild as a submodule and adding a few lines to enable an extra plugin.

Wrong Ben

added scoped label and automatically removed label

Sorry about that @ben!

added 4h of time spent at 2020-01-23

added scoped label and automatically removed label

changed the description

added scoped label and automatically removed label

added 30m of time spent at 2020-01-24

added scoped label and automatically removed label

mentioned in commit engine@81eb2fbd

mentioned in merge request engine!448

mentioned in merge request !733

marked the task Setup a "new-blog-editor" feature flag as completed

marked the task Limit the styles and functionality as much as possible. We want to create a bloat-free experience with minimum toolbars and chrome that fits into the overall site. as completed

marked the task New blogs should be tagged with an attribute that marks them as "version2" as completed

Some issues apparent when trying to edit an old blog in the new editor:

Alignment (we need to look at making a custom build for this)
We need to implement the upload adapter to manage image uploads - left out as because we are going the custom build route, the adapter will be different.
Rich-embed doesn't appear in the editor but remains there when opening a v1 blog in v2. Other tested styling remains (other than alignment)

added 2h 30m of time spent at 2020-01-27

added scoped label and automatically removed label

Spent around 5 hours last night and 2 today.

added 7h of time spent at 2020-01-28

Should be ready to go but the sandbox is acting like the feature flag isn't set. You can still see the blogs if you go to the v2 url, but editing a v2 blog does not link to the v2 editor, because of the lack of feature flag. Awaiting Emi's docs on this.