[Docs] Sample with full features set

[dkonopka]

📝 Provide a description of requested docs changes

Currently, with introduced Responsive toolbar it's worth to consider a "full feature" sample.

At this moment discoverability of editor features is really poor. We don't' have any demo/page with listed features of CKEditor 5, even on our website. The new user is only able to scroll the Features menu on documentation page or check Features section in our README.

It would be much easier to include every single feature in one demo and give users a possibility to "play" with them instead of checking a single dedicated sample/page.

Note: It might be a blocker: #5586.

cc @Reinmar @mlewand @oleq @AnnaTomanek

[dkonopka]

Placement

• Features documentation index page
• Dedicated page inside Features (but still, it will be hard for the user to find it inside the left navigation)
• Examples documentation page - inside Builds named as Full features build with provided source code?

Content

It would be nice to present a demo with a lot of features. We will need help from the marketing team for sure. cc @PiotrMaciej

Toolbar items

What is more important to show at first? Table or font color? Undo/redo or MediaEmbed? It's a question to you guys, do you have any ideas about improving the order of toolbar items?

[Reinmar]

I'm having second doubts here. We've been here in the past – with editors that support everything. It kinda works because it seems that the editor can do everything. But somehow, with time, starting from CKEditor 4.0, we moved in the other direction.

Why?

• There's no single editor with all features. Some will be always missed. Either due to conflicts between implementations, due to various ways they can be configured, due to multiple editor types (which are also seen as "features"), etc. At some point, we may have so many features that people may actually have problems finding them in that demo.
• We have dozens of pages in our docs. Just one demo of full-featured editor will not be easy to find.
• Such an editor should not be used in practice. If we'll have it in the docs we should be explaining that "no, no, we can do that, but you shouldn't".
• But despite that, such an editor will become a "go to" place for many people. It becomes linked, shown, screenshoted, etc. Suddenly, when you google CKEditor you will see mostly this bloated editor. That's how it looked in the past. It took us many years to replace the "full" preset with the "std" preset in peoples' minds and in Google.

But, at the same time, I completely agree that we have discoverability issues. I'd look for alternative options:

• Having a well-formatted list of all features in https://ckeditor.com/docs/ckeditor5/latest/features/index.html (Create a list of all end-user features #5702).
• Making it clear in all examples, that the showcased editor doesn't contain all features (Make it clear that editor samples in the docs are demos #1188). We can link to that list from here.
• And perhaps more.

WDYT?

[godai78]

We could have a mega-build with all the most common/usable features. Not necessarily on features' landing page, but referenced there - should do. As this is virtually impossible to put all the features in it, we could try coming up with more than one - like cooperation oriented (comments and track changes), simplicity oriented (autoformatting etc.).

Also: doesn't onlinehtmleditor kinda serve this very purpose? It should be updated with the newest features, sure, but this is a good start.

I'm not sure about

Making it clear in all examples, that the showcased editor doesn't contain all features

Putting a piece of information in each guide about it? The very idea is cool, but I can't really picture the execution. We could easily put it on the main features page once this gets a makeover, but people often bypass it, coming for specific features.

Also: do we have an in-editor help button? Or context help?

[godai78]

There's this, the first serious step toward all-feature demo.

https://github.com/cksource/ckeditor5-internal/compare/ck/5588

[AnnaTomanek]

So I gave it another go and after a few rounds of feedback gathering and improvements, here are the two PRs that introduce a full-featured sample:

• Full-featured editor example #10989 (just adding the new example to the TOC and removing the old "custom build" example).
• cksource/ckeditor5-internal#1242 (the new example itself)

Still, some TODOs left:

1. @godai78 Make the list inside the demo a nested one. 
2. @oleq Fix the styling of the word count section so that it looked more like a part of the editor (maybe like in https://ckeditor.com/ckeditor-5/demo/#classic?) than a detached part that gets visually mixed up with the page text.
3. @Mgsy @FilipTokarski Review the setup and config, check its correctness, check the exports etc.

Also all, feel free to propose any improvements that you feel could work.

What we can still consider:

1. Making the editor wider using CSS so that the toolbar fits in 2 lines. I have some doubts here as on smaller screens, it will start wrapping anyway so what's the reasonable width that we can aim at? As a side note, the document editor example is wider than this one: https://ckeditor.com/docs/ckeditor5/latest/examples/builds/document-editor.html - but it does not contain a multiline toolbar.
2. Adding some inline images that would really be visually inline (like our map markers in the Image guide).
3. Adding some emoji just to show that CKE5 actually supports emoji when used in the content as Unicode characters.

[godai78]

Pimped the list to be both un/ordered with nested items.

[godai78]

Also added two really, really inline images in the form of Mario from Super Mario Bros and Link from the Legend of Zelda: Link's Awakening videogame classics.

[Mgsy]

I've adjusted the Export to Word and Export to PDF configuration, so the content in the exported documents looks better now. Unfortunately, it would be difficult to keep 1:1, because the editor on the page has a non-standard size and our exports support only predefined sizes (A4, B4 etc.), but I think there's not much we can do about it if we want to keep the editor size.

@godai78, I also removed the table caption from the content. It turned out it breaks the docx conversion - cksource/openxml-converter#382.

Apart from that, our docx converter doesn't handle aligned images, so the exported content looks different:

We need to decide whether we can accept it or change the content.

[godai78]

How about the inline icons? Are they fine?

[Mgsy]

How about the inline icons? Are they fine?

Yep, only aligned images don't display properly.

[godai78]

We can easily decide to drop them, I'm not gonna fight over these.

[godai78]

We're going to mention the full-featured editor in today's release blog post, but it means we need to merge it first. Does anyone have any further comments?

[oleq]

• @oleq Fix the styling of the word count section so that it looked more like a part of the editor (maybe like in https://ckeditor.com/ckeditor-5/demo/#classic?) than a detached part that gets visually mixed up with the page text.

Done in cksource/ckeditor5-internal@04b063d.

[godai78]

Merged in #10989 and cksource/ckeditor5-internal#1242