WebComponent for CKEditor 5

Reinmar commented 5 years ago

Let's ship every build as a web component 💛

[ ] Shadow DOM support

Ability to close the editor in a shadow DOM would greatly improve its integrity by scoping its styles. However, this requires some changes:
- In the engine: https://github.com/ckeditor/ckeditor5-engine/issues/692
- In all other places where we create element/nodes?
[ ] The body UI collection (https://github.com/ckeditor/ckeditor5/issues/1478)

The so-called "body collection" is where we keep floating panels (so they are not trimmed by overflowed parents and are easier to position). It's automatically created in the <body> element. If we'd enclose CKEditor in a <ck-editor>, we should not leak from this element, hence we need to give the developer some control over where this collection is rendered.
[ ] Naming (<ck-editor> or <ckeditor-classic> or ?)

The name must contain the - character 😿 Also, there may be multiple editor types on one page, so <ckeditor-*> seems natural. Or not?
[ ] Should every editor build expose a web component by default?

For once, it would be cool that you can use ClassicEditor.create() or <ckeditor-classic> after importing @ckeditor/ckeditor5-build-classic into your page.

However, I'm not sure how much additional code will the componentization of CKEditor require. I hope it won't increase the final size that much because we'd have to consider having two files in each build (ckeditor.js and e.g. ckeditor.webcomponent.js).
[ ] How to componentize specific types of editors. It's fairly easy with the classic editor, but gets more tricky with the inline/balloon editors and super tricky with the decoupled editor. Most likely, we should keep it as consistent with the React/Angular/Vue components as possible.
[ ] How to make the editor configurable (pass the config object).
[ ] How to build CSS for web components. This may be a blocker for having one build for normal and component use.

If you'd like to see the support for web components, please react with ❤️ .

Reinmar commented 5 years ago

cc @Comandeer @oleq @pjasiun

Comandeer commented 5 years ago

There is something called The Gold Standard, containing many of the best practices around creating maintainable Web Components. It can help in choosing the right way.

Shadow DOM support

I'm wondering if it wouldn't be better to have multiple, nested Shadow DOMs. Something like that:

ckeditor-classic
|
| -- #shadow-root
     |
     | -- UI component
     |    |
     |    | -- #shadow-root
     |
     | -- editable
          |
          | -- #shadow-root

This way we have encapsulation on every possible level.

How to make the editor configurable (pass the config object)

WCs should be generally configurable via attributes (just like React components and native DOM elements). IMO it would be nice to break config object into many observed attributes, but at the same time – add config property to the component (just like native DOM elements: attributes vs properties, e.g. [class] attribute vs classList property).

pjasiun commented 5 years ago

Should every editor build expose a web component by default?

I think yes. Each editor may have different properties/attributes as you mentioned already. On the other hand, I agree it would be nice to make it similar to the react integration.

Reinmar commented 5 years ago

I added one point to the list:

How to build CSS for web components. This may be a blocker for having one build for normal and component use.

danielamorse commented 4 years ago

Would this feature include support for Web Components in the editor, too?

I'm trying to edit a WC in the editor and finding an issue with the cursor disappearing. It's a basic WC with slotted text. It works perfectly in the editor until I attach the Shadow DOM. Then, I find that the cursor disappears once I delete the text inside the WC, and I can no longer edit the document.

I've set up a demo and described the bug in #5724.

Is this something that should work in the the current version (v15.0.0)? If not, +1 for future support 😄

Reinmar commented 4 years ago

@danielamorse, I created a separate ticket for editing web components inside the editor: https://github.com/ckeditor/ckeditor5/issues/5740.

yuriui commented 4 years ago

@Reinmar IS ckeditor5 compatible with lit-element? I have faced the issue that the style of ckeditor toolbar is not applied when I call ClassicEditor.create() to create a rich editor.

Reinmar commented 4 years ago

We never tested it with lit-element. I guess as long as there's no support for webcomponents in general, lit-element will not be supported as well.

ernsheong commented 4 years ago

Ah sad, was about to integrate with a web component (LitElement). Any workarounds to make this work?

I guess one way is to make CKEditor render in Light DOM and slot all the way into Shadow DOM.

ywsang commented 3 years ago

Hi there! What's the latest thinking on this issue?

I’ve been working on a project to wrap open-source UI widgets into web components, and I’m interested in potentially creating a CKEditor web component, or at least try to help move the process along.

It seems like getting the theme from the .css file to work with shadow DOM is going to be one of the more challenging tasks, since the styles inserted by the webpack style loader won’t get applied to any shadow DOM elements. I’m not very familiar with CKEditor’s build system or webpack in general, but perhaps there could be a loader that creates multiple entrypoints -- one that loads styles into the main document (as the loader does now) and one that doesn’t, which would be used for styling shadow DOM.

Would anyone here be able to provide more insight on this issue?

SahilArdeshna commented 3 years ago

@ywsang i'm working on chrome extension project and i used CKEditor 5-react for text editor. Now i'm using shadow dom to avoid website and extension css conflict. At injecting styles into ckeditor's element or parent element is bit more difficult(not going to use impossible word) using webpack. So to solve this problem i'm injecting style tag into shadow dom. It is look like this

Screenshot from 2020-12-09 19-01-34

I achieved this by creating style element in shadow root of selected element and appending style tag to that shadow root, some thing like this

let extensionRoot = document.getElementById('extension-div');
if (extensionRoot) {
    // Create the shadow root
    const shadowRoot = extensionRoot.shadowRoot;

    if (shadowRoot) {
        app = shadowRoot.getElementById('my-extension-root-flip');
        if (!app) {
            // Create a div element
            app = document.createElement('div');
            app.setAttribute('id', 'my-extension-root-flip');

            const ckStyle1 = document.createElement('style');
            ckStyle1.textContent = ckEditor1;

                        // Append div to shadow DOM
                        shadowRoot.appendChild(app);
            extensionRoot.shadowRoot.appendChild(style1);
        }
    }
}

I think this might will work.

Thanks

oleq commented 2 years ago

We're not alone in this selection + components issue https://github.com/quilljs/quill/pull/1805#issuecomment-965901490. More in w3ctag/design-reviews#694.

CKEditorBot commented 9 months ago

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

2dareis2do commented 7 months ago

As a Drupal user, (which uses ckeditor 5 without an iframe) I would be very interested to have ability to close ckeditor in a shadow dom and encapsulate it from loading the styles from the admin theme while loading the styles from front end theme. Certainly this appears possible in Tiny MCE https://www.tiny.cloud/docs/integrations/webcomponent/

Witoso commented 7 months ago

As mentioned in some other issue (#3891), Tiny uses iframe which allows them to dodge the issues related to the selection handling. A workaround would be to create a web component without the shadow DOM, but it wouldn't make much sense, as the component's HTML and CSS would still be part of the global document then.

jogibear9988 commented 4 months ago

As it looks with the new API from Safari, ShadowDom could now be supported. At least for me it works in my Webcomponent Designer Application with this Code: https://github.com/node-projects/web-component-designer/blob/master/packages/web-component-designer/src/elements/helper/SelectionHelper.ts

jogibear9988 commented 3 months ago

see: https://groups.google.com/a/mozilla.org/g/dev-platform/c/zF7soLapT-Y/m/zkc3y_MJAAAJ?pli=1

ckeditor / ckeditor5

WebComponent for CKEditor 5 #1483