Table properties crashes in some pasting scenarios

[mlewand]

📝 Provide detailed reproduction steps (if any)

1. Open table properties manual test.
2. Open a CKEditor Wikipedia page in another tab.
3. Select the entire article (can be full page select, or just the inner part of article, doesn't matter).
4. Copy it.
5. Paste it into the editor.

✔️ Expected result

Content is pasted.

❌ Actual result

Exception is being thrown (Chrome):

tableproperties.js:63 Uncaught TypeError: Cannot read property 'getItems' of null
    at UpcastDispatcher.<anonymous> (tableproperties.js:63)
    at UpcastDispatcher.fire (emittermixin.js:209)
    at UpcastDispatcher._convertItem (upcastdispatcher.js:239)
    at UpcastDispatcher._convertChildren (upcastdispatcher.js:270)
    at UpcastDispatcher.<anonymous> (upcasthelpers.js:590)
    at UpcastDispatcher.fire (emittermixin.js:209)
    at UpcastDispatcher._convertItem (upcastdispatcher.js:239)
    at UpcastDispatcher._convertChildren (upcastdispatcher.js:270)
    at UpcastDispatcher.<anonymous> (upcasttable.js:117)
    at UpcastDispatcher.fire (emittermixin.js:209)

Exception for Firefox:

TypeError: data.modelRange is null

📃 Other details

It works fine with the table plugin alone, when no table properties are enabled.

• Browser: Any
• OS: Windows 10 (probably any?)
• CKEditor version: Latest master

---

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

[Mgsy]

I can reproduce it.

[Reinmar]

Is it a regression? Is it reproducible on a normal table demo (without table styles)?

[mlewand]

@Reinmar it's not reproducible when table properties plugin is not enabled.

It works fine with the table plugin alone, when no table properties are enabled.

[oleq]

The problem comes down to nested tables. The minimal HTML to paste is:

<table style="border: 3px solid green;">
	<tbody>
		<tr>
			<td>parent:00</td>
			<td>
				<table style="border: 3px solid red;">
					<tbody>
						<tr>
							<td>child:00</td>
						</tr>
					</tbody>
				</table>
			</td>
		</tr>
	</tbody>
</table>

The converter for table border style fails because when data.viewItem is the child table, data.modelRange is null.

I see 2 solutions since we don't support nested tables:

1. Return immediately if !data.modelRange.
2. Copy-paste from upcasthelpers.js

diff --git a/src/converters/tableproperties.js b/src/converters/tableproperties.js
index 34a9719..ab2b6c3 100644
--- a/src/converters/tableproperties.js
+++ b/src/converters/tableproperties.js
@@ -60,6 +60,10 @@ export function upcastBorderStyles( conversion, viewElementName ) {
                            return;
                   }

+                  if ( !data.modelRange ) {
+                           data = Object.assign( data, conversionApi.convertChildren( data.viewItem, data.modelCursor ) );
+                  }
+
                   const modelElement = [ ...data.modelRange.getItems( { shallow: true } ) ].pop();

                   conversionApi.consumable.consume( data.viewItem, matcherPattern );

I'd rather go with the later. Do you have any idea what's the right solution, @Reinmar?

[Reinmar]

I'd rather go with the later. Do you have any idea what's the right solution, @Reinmar?

I can never remember why modelRange can be null. It's not the first time we have this issue and not the first time we have to copy that fragment of code. But it seems to work in other cases so if it solves this one, then let's do this.

As for whether we support nested tables – not officially :D But we know that it worked so far if someone was enabling nested tables in the schema.

[oleq]

I created a PR. Let's find out how it performs.