Allow enabling all types of editors on paragraph-like root

[Reinmar]

Developers should be able to initialize the editor on a paragraph-like roots. For example, someone may want to make content of just an <h1> element editable:

<h1 id=editor>Title...</h1>
<script>
    InlineEditor.create( document.getElementById( 'editor' ) )
        .then( ... )
        .catch( ... );
</script>

The inline type of editors are most often to be used in such a cases and there's even a ticket for InlineEditor already (https://github.com/ckeditor/ckeditor5-editor-inline/issues/3 and https://github.com/ckeditor/ckeditor5-editor-inline/issues/5). But this requirement applies also to BalloonEditor and I may imagine that someone might want to enable ClassicEditor in such a mode. So, since most of the work is needed in the common part of the code base (core, engine), I'd say that the solution could be generic to all kinds of editors from day one.

In case of editors which upcast existing DOM elements (like inline and balloon editors), the information about the type of element (whether it's div-like or paragraph-like) can be taken from that element itself. But in case of the classic editor it will need to be specified in the config. The config option could work for all editors, overriding the upcasted element.

What's kinda tricky here is mapping DOM element name to schema item name so we can create a model root with the right name. However, I think that this should be enough, taken that the automatic behaviour will be overridable by configuration anyway:

const paragraphLikeElements = [ 'p', 'h1', ... ];

getRootName( domElementName ) {
    if ( paragraphLikeElements.includes( domElementName ) { 
        return '$block';
    } else {
        return '$root';
    }
}

Defaulting to the generic $block item for all p/h1/etc elements should be enough.

---

Add 👍 to this post if you'd like this feature to be implemented.

[Reinmar]

I wrote a few words about how this can be achieved with minimal changes to existing editor creators: https://stackoverflow.com/questions/48896019/ckeditor5-inline-build-puts-a-p-tag-inside-of-an-h1-tag-how-do-i-disable-this/49130552#49130552

I'm curious if it'd work.

[claviska]

Here's a fiddle based on that suggestion. It does prevent new paragraphs from being created, but without the appropriate root there's still a child paragraph in the content.

https://jsfiddle.net/v81yndc7/2/

This is a hugely important feature for any app doing serious inline editing. It's not uncommon for headings, paragraphs, and even spans to be made editable.

[Reinmar]

We'll need to update https://github.com/ckeditor/ckeditor5/pull/1494/files#r255422201 after p-level editors are a thing.

[Reinmar]

The state of things

There's been some work in this area and it looks really promising.

Discussions:

• https://github.com/ckeditor/ckeditor5-editor-inline/issues/5#issuecomment-495128530
• Add manual test for inline editor created over non-standard elements ckeditor5-editor-inline#54

Branches:

• https://github.com/ckeditor/ckeditor5-editor-inline/compare/t/5
• https://github.com/ckeditor/ckeditor5-engine/compare/t/ckeditor5-editor-inline/5

Results:

Related tickets:

• https://github.com/ckeditor/ckeditor5-editor-inline/issues/3
• https://github.com/ckeditor/ckeditor5-editor-inline/issues/5

Plans

Those tests make us believe that there's not that much to do to enable such type of editors. I'm moving this up the waiting list.

The todo list:

• Final decision regarding whether $inlineRoot is the right direction.
• Minimal tests in every feature for their integration with $inlineRoot.
• Updating the inline, balloon and decoupled editors with the element name check. Tests.
• Documentation.