No table align when pasted from Word

[Marek Lewandowski]

Steps to reproduce

1. Open attached Table_alignment.docx document in Word.
2. Copy it's content.
3. Paste into a full featured editor.

Expected result

Tables are aligned as in the docx document.

Actual result

Alignments are stripped.

More details

It looks in Word pretty much like this:

The problem is that Word generates following markup:

<div align=right>

<table class=MsoTableGrid border=1 cellspacing=0 cellpadding=0 style='(...)'>
 <tr style='(...)'>
 	(...)
 </tr>
</table>

</div>

Which displays it correctly, but uses deprecated align attribute.

We have a ​style transformation in core which transforms any align into float CSS prop, which is fine for elements like table, img, iframe, but it's wrong for div and p. Becasue for div and p it defines the alignment of content elements within this element.

It's also worth to remember that align is a little more aggresive than text-align CSS prop, as it affects anything, whereas for text-align you need to apply margin: x auto for block-alike elements, otherwise they won't be aligned.

[Marek Lewandowski]

We can't convert it to float alone as it would allow for wrapping text around the table.

My through here is to go with simplest possible option, so let for div[align] where that's necessary.

[Olek Nowodziński]

TBH, I'd go with the simplest solution which is possible to implement.

1. Is it possible to just wrap a table into <div overflow:hidden> and <table float:right>? When the user changes alignment to left, or anything else, the algorithm would discover that <div> (one child (table) && one attribute (style) && one value (ov:hidden)) and remove it or take care of it so the new structure reflects the needs of the alignment?

2. Is <table float: right; clear: both;> an option? Would it work?

3. It sounds like a use nice case for widgets: magical alignment old align in the V(editing)-layer and floats/wrappers in the editor output (model)–layer. WDYT?

[Marek Lewandowski]

Thanks for the thoughts @a.nowodzinski.

Out of curiosity checked approach 2. and without overflow:hidden it doesn't consume vertical space: ​http://codepen.io/mlewand/pen/OWgJbp

We've had a lot of discussion on this, and we came to conclusion that in fact we can't create a markup that we don't support in editor. Look at div[align] if we implement it, the end user has now way to control it's alignment. That doesn't make sense. Instead we'll provide a handling that is as close to expected as it could be, which means to align the table itself to a given position, so that it can be changed using tabletools dialog.

[Marek Lewandowski]

Pushed to ​branch:t/16811.

[Tade0]

Overall the fix looks good to me, especially that the alternative method - using replaceWithChildren - is notorious for not cooperating with the filter.

Fixed with ​git:eec0816d9fa4de4fde716a288c99394893064194