WebComponent for CKEditor 5 #1483

Reinmar · 2019-01-24T14:01:31Z

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 (Rethink and cleanup body collection #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 ❤️ .

The text was updated successfully, but these errors were encountered:

Reinmar · 2019-01-24T14:24:57Z

Comandeer · 2019-01-24T14:45:14Z

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 · 2019-01-24T16:20:35Z

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 · 2019-01-28T09:52:54Z

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 · 2019-11-14T19:04:03Z

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 · 2019-11-15T09:37:45Z

@danielamorse, I created a separate ticket for editing web components inside the editor: #5740.

yuriui · 2020-02-12T02:04:39Z

@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 · 2020-02-12T11:22:29Z

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 · 2020-03-02T15:16:51Z

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 · 2020-07-14T21:47:10Z

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 · 2020-12-09T13:40:58Z

@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

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 · 2022-02-11T11:23:34Z

We're not alone in this selection + components issue slab/quill#1805 (comment) More in w3ctag/design-reviews#694.

CKEditorBot · 2023-10-04T05:20:10Z

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 · 2023-11-22T12:09:11Z

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 · 2023-11-27T10:19:07Z

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 · 2024-03-01T18:51:23Z

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 · 2024-03-19T05:53:29Z

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

Reinmar transferred this issue from ckeditor/ckeditor5-engine Jan 24, 2019

Reinmar added type:feature This issue reports a feature request (an idea for a new functionality or a missing option). status:confirmed labels Jan 24, 2019

Reinmar added this to the next milestone Jan 24, 2019

ma2ciek mentioned this issue Mar 4, 2019

Using Classic Build, it doesn't apply styles in toolbar ckeditor/ckeditor5-angular#77

Closed

Mgsy mentioned this issue Sep 20, 2019

CKEditor5 breaks in web component #2064

Closed

Mgsy mentioned this issue Nov 12, 2019

Cursor disappears after deleting text inside web component #5724

Closed

Reinmar mentioned this issue Nov 15, 2019

Support editing web components (+shadow DOM) in CKEditor 5 #5740

Open

1 task

mlewand removed the status:confirmed label Mar 18, 2020

ywsang mentioned this issue Jul 29, 2020

Detect target inside a shadow root for clickOutsideHandler #7743

Closed

This was referenced Aug 14, 2020

Support text selection when editor is in a shadow root #7846

Closed

Add CSS styles to classic editor when in a Web Component #7847

Closed

ma2ciek mentioned this issue Sep 1, 2020

How to add two different CKEditor 5 builds to the project? ckeditor/ckeditor5-angular#163

Closed

pomek removed this from the nice-to-have milestone Feb 21, 2022

Reinmar added the squad:core Issue to be handled by the Core team. label Feb 22, 2022

CKEditorBot added the status:stale label Oct 4, 2023

Reinmar removed the status:stale label Oct 13, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WebComponent for CKEditor 5 #1483

WebComponent for CKEditor 5 #1483

Reinmar commented Jan 24, 2019 •

edited

Loading

Reinmar commented Jan 24, 2019

Comandeer commented Jan 24, 2019

pjasiun commented Jan 24, 2019 •

edited

Loading

Reinmar commented Jan 28, 2019

danielamorse commented Nov 14, 2019

Reinmar commented Nov 15, 2019

yuriui commented Feb 12, 2020

Reinmar commented Feb 12, 2020

ernsheong commented Mar 2, 2020 •

edited

Loading

ywsang commented Jul 14, 2020

SahilArdeshna commented Dec 9, 2020 •

edited

Loading

oleq commented Feb 11, 2022

CKEditorBot commented Oct 4, 2023

2dareis2do commented Nov 22, 2023

Witoso commented Nov 27, 2023

jogibear9988 commented Mar 1, 2024

jogibear9988 commented Mar 19, 2024

WebComponent for CKEditor 5 #1483

WebComponent for CKEditor 5 #1483

Comments

Reinmar commented Jan 24, 2019 • edited Loading

Reinmar commented Jan 24, 2019

Comandeer commented Jan 24, 2019

pjasiun commented Jan 24, 2019 • edited Loading

Reinmar commented Jan 28, 2019

danielamorse commented Nov 14, 2019

Reinmar commented Nov 15, 2019

yuriui commented Feb 12, 2020

Reinmar commented Feb 12, 2020

ernsheong commented Mar 2, 2020 • edited Loading

ywsang commented Jul 14, 2020

SahilArdeshna commented Dec 9, 2020 • edited Loading

oleq commented Feb 11, 2022

CKEditorBot commented Oct 4, 2023

2dareis2do commented Nov 22, 2023

Witoso commented Nov 27, 2023

jogibear9988 commented Mar 1, 2024

jogibear9988 commented Mar 19, 2024

Reinmar commented Jan 24, 2019 •

edited

Loading

pjasiun commented Jan 24, 2019 •

edited

Loading

ernsheong commented Mar 2, 2020 •

edited

Loading

SahilArdeshna commented Dec 9, 2020 •

edited

Loading