"Magic Box" to help moving the caret to hard/impossible to reach spaces

[Frederico Caldeira Knabben]

There is a general problem in the editor, which is related to the impossibility of placing the caret for typing between some block elements (like <table> or <hr>) or at the top of the contents, if the first element is one of these elements.

The proposed solution is showing a "magic box" when the user moves the mouse over the limits of these blocks. I'm attaching a page that illustrates the idea.

We should eventually come with a similar solution for keyboard navigation as well.

[Frederico Caldeira Knabben]

Rough sample illustrating the idea

[Frederico Caldeira Knabben]

Screenshot of the sample page

[Frederico Caldeira Knabben]

I've attached a rough sample to illustrate the idea. An image exemplifying the behavior when moving the mouse in between the tables can be found attached as well.

The sample has in any way the intention to propose a way to implement it. It's just hackery to exemplify the behavior and even for this need it is still far from perfect.

[Frederico Caldeira Knabben]

Another nice benefit of this proposal is that we would be able to remove the current "padding block" feature of the editor, making the code cleaner and less prone to bugs. It would also avoid having unwanted <p> elements laying in the resulting HTML.

[Wiktor Walc]

Sounds like a nice idea.

Since we're collecting ideas right now, another possible use case: editing nested block elements. Right now it's not only hard to exit block elements (#6847), but also to edit them.

The "Magic Box" could be particularly useful with "Show Blocks" enabled. This way editing even something as hard as

<div class="div1">
	<div class="div2">
		<p>
			&nbsp;</p>
	</div>
</div>

(with no styles for div1 and div2 in contents.css) would be doable.

Right now, even if in wysiwyg mode user can recognize visually nested divs, they hardly can be edited:

<div class="div1" style="border:1px solid red;padding:20px !important">
	<div class="div2" style="border:1px solid green;padding:20px !important">
		<p>
			&nbsp;</p>
	</div>
</div>

(try adding content at the top of "div2", inside "div1"). With "Magic Box" it could be easily doable.

[Jakub Ś]

Looks great even in that simple sample file.

[Piotrek Koszuliński]

Fixed in CKEditor 4.0: ​http://ckeditor.com/demo#magic-line