Implement the view source feature for the Inline editor

[jswiderski]

📝 Provide a description of the new feature

Related - #9647, #9703.

This feature request is about introducing a feature for the Inline editor that will allow switching to the source editing mode.

---

If you'd like to see this feature implemented, add a 👍 reaction to this post.

[oleq]

My thoughts on this feature:

1. First things first, we need to refactor the integration between focus tracking and source editing because it’s seriously broken on master but we didn’t notice this because we’re only using it with ClassicEditor. It will not work in the InlineEditor so addressing this is mandatory (related comment https://github.com/cksource/ckeditor5-internal/issues/1493#issuecomment-1047627619). I guess this could add some MDs to the project.
2. (Didn’t research, but pretty sure) There are other bits of UI that may need to integrate with source editing that were absent when only ClassicEditor was considered. For instance, a block toolbar (BalloonBlockEditor) or the inline toolbar (InlineEditor). We may need to disable those components for the duration of the source editing. In the latter case, this may result in the underlaying logic being totally rewritten because the toolbar will either no longer be displayed (implementation using a dialog) or attach to a different DOM target (implementation using in-line replacement of editing root<->textarea). Either way, this is more MDs to the project.
3. This will certainly get weird in multi-root implementations. But I guess we can skip this thing.
4. In InlineEditor we can keep the toolbar visible (and the source editing button) so, once entered the source editing, the user can use the same button to get back to the normal editing (provided we fix 1. and 2.). In BalloonEditor things get tricky. The balloon toolbar only shows when a non-collapsed selection is displayed. While in source editing we don’t have a place to create a selection (editing root was replaced by <textarea>). This results in no easy way to exit the source editing.
   1. Also, entering source editing in BalloonEditor gets weird because you need a non-collapsed selection to display the toolbar and click the button. When the editor content is empty, there’s no way to do that 😛
5. Some of above may suggest an implementation using a dialog is the best UX-wise. Developing a dialog system is lots of MDs on top of this project, though.
   1. Or an “inline” source editing but with its own button that allows exiting this mode. UX research needed.
6. Are there any risks involving collaboration features?

[cmak9149]

Need that to work with custom build "multi-root" editor as well.

[neongreen]

Does source editing work with BalloonBlockEditor at all at the moment? I have an app that uses a BalloonBlockEditor and I wonder how much effort will be required to enable source editing for our users.

[rklf]

Any news on it?

[Radon8472]

Any news on it?

Same question...
I would like to know if there are any time plans when (or if) this plugin could be useable in BalloonEditor.

[cmak9149]

I do a trick for our project: I put in a custom plugin that has the same icon as Source Editing. When it is clicked, the plugin call back a function in a js code to do the following:

1. Read the data of existing content
2. Destroy the inline editor
3. Create a classic editor
4. Put back the data in the classic editor
5. Turn the source mode on.
   After all these, user perceive that inline editor supports source mode. Our product has two versions one use inline editor and one use multi-root. So both implement the above trick and it works quite well. Run into a little problem in v39.0.1 where destroy editor 2 failed.