Some toolbar items are active when editing html embed

[FilipTokarski]

📝 Provide detailed reproduction steps (if any)

1. Add html embed, click Edit source
2. Add table / add media embed

✔️ Expected result

Table / media embed icons should be deactivated

❌ Actual result

Table / media embed is added after the html embed:

• similar: Adding special character in source mode removes html embed widget #8796

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[oleq]

This could be an issue in the InsertTableCommand.

[oleq]

Looks like the media feature works the same.

[oleq]

It could be we decided to implement it this way because we didn't have the widget type around sub-feature and that was the only way, for instance, to insert content after an image if it was the last child of the editing root.

[magda-chrzescian]

Research

I have done some research regarding inserting things when something is selected and I would distinguish between two cases:

• Inserting when the caret is visible and some content can be edited, but it is not the root of the editor (HTML snippets, captions, maybe also code blocks) - In this case, the user may expect the content to be inserted right where the caret is placed at the particular moment.
• Inserting things when a widget is selected - This one is not the scope of this issue but may be worth considering if inserting other widgets should be allowed in this case.

So, regarding the first case:

Word

Set caret in the text box -> Insert a table -> The table is being inserted inside the text box
Set caret in the text box -> Insert an image -> The image is being inserted inside the text box
When the caret is inside the text box, all of the buttons for inserting things that are not allowed are disabled.

Gogle Docs

There is nothing to test on.

TinyMCE

The code sample can not be edited in the scope of the editor (it is edited in the pop-up).

ProseMirror

The embedded code editor doesn’t allow inserting things. Only the horizontal line is allowed and it lands before the code block, but it feels more like a bug.

---

Conclusion

I think we should just disable the commands for inserting things that are not allowed to be in the HTML snippet.

[magda-chrzescian]

Since the html-embed widget is the rawElement, it can not be determined if the content of the widget is being edited at the given moment. Therefore, the decision about enabling/disabling the commands has to be made based on the currently selected element.

We decided to disable the insertTable command if any object is selected and to disable the instertMediaEmbed command if any object other than media is selected.

[Rae-Lin]

Hello @oleq @magda-chrzescian,
I'm new at this and it's my first time using ckeditor.
I used CKEditor 5 online builder and imported in my angular project.

Would you please tell me step by step what should I do if I also want to disable command in embed html?
Many thanks. <3