Browse Source

Force Chrome/Safari to limit text mutations to the span wrapper.

Piotrek Koszuliński 5 years ago
parent
commit
6dcb5b8c62

+ 3 - 1
packages/ckeditor5-table/src/converters/downcast.js

@@ -397,7 +397,9 @@ function createViewTableCellElement( tableWalkerValue, tableAttributes, insertPo
 		conversionApi.consumable.consume( innerParagraph, 'insert' );
 
 		if ( options.asWidget ) {
-			const fakeParagraph = conversionApi.writer.createContainerElement( 'span' );
+			// Use display:inline-block to force Chrome/Safari to limit text mutations to this element.
+			// See #6062.
+			const fakeParagraph = conversionApi.writer.createContainerElement( 'span', { style: 'display:inline-block' } );
 
 			conversionApi.mapper.bindElements( innerParagraph, fakeParagraph );
 			conversionApi.writer.insert( paragraphInsertPosition, fakeParagraph );

+ 20 - 0
packages/ckeditor5-table/tests/manual/tickets/6062.html

@@ -0,0 +1,20 @@
+<div id="editor">
+	<figure class="table">
+		<table>
+			<thead>
+				<tr>
+					<th>at the end:</th>
+					<th>at the beginning:</th>
+					<th>entire cell:</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td>Hello, commter</td>
+					<td>Commter, hello!</td>
+					<td>Commter</td>
+				</tr>
+			</tbody>
+		</table>
+	</figure>
+</div>

+ 27 - 0
packages/ckeditor5-table/tests/manual/tickets/6062.js

@@ -0,0 +1,27 @@
+/**
+ * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals console, window, document */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ ArticlePluginSet ],
+		toolbar: [
+			'heading', '|', 'insertTable', '|', 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'
+		],
+		table: {
+			contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ],
+			tableToolbar: [ 'bold', 'italic' ]
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 9 - 0
packages/ckeditor5-table/tests/manual/tickets/6062.md

@@ -0,0 +1,9 @@
+# Ticket test: [#6062](https://github.com/ckeditor/ckeditor5/issues/6062)
+
+1. Right-click the misspelled word.
+2. Choose one of the corrections.
+
+Expected:
+
+* No errors.
+* The misspelled word should be correctly replaced. E.g., you shouldn't see a new paragraph being created.