Ckeditor concept

[vladikoff]

Ref #338

[cedricium]

One main issue I'm having is getting the height of the editor to be the full height of the sidebar minus the height of the footer. It looked like we used flex with the Quill editor which I'm not too familiar with, but from what I tried the height wasn't filling up the sidebar.

So currently, if the sidebar is narrow the footer will disappear 😛

[vladikoff]

@cedricium re flex I think you find the right container to flex then it should work, if it is causing too much trouble don't worry.

Some things to investigate:

• I see the text size just has Paragraph can you enable Headings?
• Can we replace icons?
• Can we move notes from quill to ckeditor (export -> import), can be just text contents
• Do we have control over the URL editor, can we make it fit the sidebar?
• Try dragging images into the notes, can we disable like we did for quill?

[vladikoff]

Preview:

[cedricium]

@vladikoff some of that I know should definitely be doable from what I read when going through the ckeditor docs. As for the rest, I'll go ahead and look into it and see what I can do. 👍

[vladikoff]

@cedricium ah also we were looking at Markdown features.

I think doing **bold** made text bold, but ~~strike~~ and ``` code ``` didn't work, I wonder if there is support for that?

[vladikoff]

I think doing bold made text bold

This was in one of CKEditor demos.

[cedricium]

@vladikoff from what I could find, ckeditor5 does not support strike. And a quick search looks like code is not implemented yet either but is on the roadmap (refs: ckeditor/ckeditor5#436).

[vladikoff]

@cedricium We are looking to "maximize" Markdown support, a lot of users ask for it. Could you
please enable all markdown feature that ckeditor 5 supports so we can test them out

[cedricium]

@vladikoff will do.

[vladikoff]

@cedricium I think so far we are leaning towards switching to this editor from Quill. @ryanfeeley mentioned that this might have used more CPU but not confirmed. If you can think of any issues / concerns that we might have with this editor please let us know!

[cedricium]

@vladikoff Just based off looking through the ckeditor docs, I think making this switch would be doable and I don't see any immediate issues.

I also happened to find a GitHub-Flavored Markdown plugin (https://docs.ckeditor.com/ckeditor5/latest/api/markdown-gfm.html). What's nice too is that it looks like using markdown-gfm allows for additional formats to be used/rendered not enabled by default by ckeditor (such as code and strikethrough - refs ckeditor/ckeditor5-mardown-gfm).

One issue I'm having with using it however is if I try to import it inside panel.js, I get the error 'import' may only appear at the top level - is there a way to import from non-top-level files?

[vladikoff]

One issue I'm having with using it however is if I try to import it inside panel.js, I get the error 'import' may only appear at the top level - is there a way to import from non-top-level files?

I think the problem is that the gfm plugin is not 'built'.

See dir structure:

Is there a way to create a 'build' of ckeditor5-build-classic + gfm? So it is all in one file?

[vladikoff]

To better explain the issue: we currently copy single files into the vendor directory, but the gfm module is structured to import from node_modules. We cannot do that in the end because we do not ship the node_modules directory in a packed extension.

[vladikoff]

@cedricium this should help with the GFM build : https://github.com/ckeditor/ckeditor5-markdown-gfm/issues/15

[cedricium]

Oh awesome, will try my hand with that solution! 👐

[szymonkups]

Hello,
We have some temporary problems with webpack source maps so the build might not work out-of-the-box. I've created an example build with temporarily fixed version of webpack and markdown enabled: https://github.com/szymonkups/ckeditor5-build-classic/tree/markdown_support. Hope this helps with your research.

[Reinmar]

Hopefully, I'll be able to help you a bit :)

I see the text size just has Paragraph can you enable Headings?

Docs for configuring available headings: https://docs.ckeditor.com/ckeditor5/latest/features/headings.html#Heading-levels

Can we replace icons?

We're using https://webpack.js.org/plugins/normal-module-replacement-plugin/ for that. Basically, the SVG icons are imported into JS using webpack's raw-loader and you can configure webpack to use different files instead of the default modules.

Do we have control over the URL editor, can we make it fit the sidebar?

Did you mean CKEditor's "edit link" balloon? Or FF's URL bar?

Try dragging images into the notes, can we disable like we did for quill?

Do you want to completely filter out images from the content of the editor? Like – prohibit their insertion in any way? Or only reject images which were pasted or dropped (e.g. from the local file system)?

The former can be done by removing all image plugins from the build. The latter is actually the default behaviour if you don't have file upload configured.

[vladikoff]

@cedricium I think we have the go ahead to switch to this editor, let me know how much time you have this week for this. @Natim and I can help and finalize this PR after Wednesday.

[cedricium]

@vladikoff sounds good! I'll definitely need some help with this. Building the editor from source has been throwing me for a loop and most of my attempts have failed miserably :( There's just a lot I don't know so I'd rather see how to do it correctly and learn that way rather than mess everything up.

[vladikoff]

Continued in #394