Not possible to outdent content in a div containing a table

[Teresa Monahan]

To Reproduce:

• Specify Div enterMode for any CKEditor sample and open in a browser.
• Click the indent icon a few times and insert a table.
• Now try to outdent the table.

Problem: The table cannot be outdented.

If you insert some text and then the table (without pressing enter), it is not possible to outdent the text either, even if the table is deleted.

Similarly if you enter some text below the table, this text cannot be outdented even after the table has been deleted.

This issue is also reproducible in P enterMode using the Normal (DIV) paragraph formatting option.

[Jakub Ś]

Reproducible from CKEditor 3.0 in all browsers. It seems that it is not possible to move cursor before table.

<div style="margin-left: 120px;">
	<table border="1" cellpadding="1" cellspacing="1" style="width: 500px;">
		<tbody>
			<tr>
				<td>
					<div>
						x</div>
				</td>
				<td>
					x</td>
			</tr>
			<tr>
				<td>
					x</td>
				<td>
					x</td>
			</tr>
			<tr>
				<td>
					x</td>
				<td>
					x</td>
			</tr>
		</tbody>
	</table>
	<div>
		xxxx</div>
</div>
<div>
	xxx</div>

[Piotrek Koszuliński]

The most important observation here is that using enterMode=DIV or the "Normal (Div)" format will lead to problems like this one. This happens due to the dual nature of divs in the editor, because a div doesn't have a block content inside, then in behaves like a paragraph. But if a block content (e.g. a table) is inserted into it, it starts to behave as the "div container" (which you can insert/edit using the div plugin).

For this reason using enterMode=DIV is not recommended and there should be no div format so we should consider removing it from the default config.format_tags value.

Besides that, we believe that this issue is fixed. There were two problems:

1. User wasn't able to remove indentation of the inserted table.

The solution to that is using the context menu and removing the div. As I mentioned, after inserting the table the div changes its nature to "container" and since then can be edited using the div plugin features. User can also edit the margin using the div dialog (with adv tab).

2. User wasn't able to remove indentation of the text after the table.

The solution for this particular problem came with CKEditor 4.0 and this is the magicline. Using it user can leave the div container and depending on enter mode a new paragraph or div will be inserted. The new block doesn't contain any block content, so if that was a div (in enterMode=DIV), then it behaves as a paragraph, so the outdent button is again usable.

Thus, I'm closing this ticket as fixed. Of course we understand the inconvenience for the users, but the reason is, as I mentioned, abusing divs.