Browse Source

Add a naive post-fixer for the not-flat marker range problem in table.

Maciej Gołaszewski 6 years ago
parent
commit
aaa015dd13

+ 14 - 0
packages/ckeditor5-restricted-editing/src/restrictededitingmodeediting.js

@@ -163,6 +163,20 @@ export default class RestrictedEditingModeEditing extends Plugin {
 		doc.registerPostFixer( extendMarkerOnTypingPostFixer( editor ) );
 		doc.registerPostFixer( resurrectCollapsedMarkerPostFixer( editor ) );
 
+		// Naive post-fixer.
+		model.markers.on( 'update:restrictedEditingException', ( evt, marker, oldRange, newRange ) => {
+			if ( !newRange.isFlat ) {
+				model.change( writer => {
+					writer.updateMarker( marker, {
+						range: writer.createRange(
+							writer.createPositionAt( newRange.end.parent, 0 ),
+							newRange.end
+						)
+					} );
+				} );
+			}
+		} );
+
 		setupExceptionHighlighting( editor );
 	}
 

+ 8 - 23
packages/ckeditor5-restricted-editing/tests/manual/restrictedediting.html

@@ -5,28 +5,13 @@
 </p>
 
 <div id="editor">
-	<h2>Heading 1</h2>
-	<p>Paragraph <span class="restricted-editing-exception">it is editable</span></p>
-	<p>Exception on part of a word: <a href="ckeditor.com">coompi</a><span class="restricted-editing-exception"><a href="ckeditor.com">ter</a> (fix spelling in Firefox).</span></p>
-	<p><strong>Bold</strong> <i>Italic</i> <a href="foo">Link</a></p>
-	<ul>
-		<li>UL List item 1</li>
-		<li>UL List item 2</li>
-	</ul>
-	<ol>
-		<li><span class="restricted-editing-exception">OL List item 1</span></li>
-		<li>OL List item 2</li>
-	</ol>
-	<figure class="image image-style-side">
-		<img alt="bar" src="sample.jpg">
-		<figcaption>Caption</figcaption>
+	<figure class="table">
+		<table>
+			<tbody>
+				<tr>
+					<td><span class="restricted-editing-exception">foo bar</span></td>
+				</tr>
+			</tbody>
+		</table>
 	</figure>
-	<blockquote>
-		<p>Quote</p>
-		<ul>
-			<li>Quoted UL List item 1</li>
-			<li>Quoted UL List item <span class="restricted-editing-exception">2</span></li>
-		</ul>
-		<p>Quote</p>
-	</blockquote>
 </div>

+ 50 - 1
packages/ckeditor5-restricted-editing/tests/restrictededitingmodeediting.js

@@ -17,6 +17,7 @@ import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard';
 
 import RestrictedEditingModeEditing from './../src/restrictededitingmodeediting';
 import RestrictedEditingModeNavigationCommand from '../src/restrictededitingmodenavigationcommand';
+import TableEditing from '@ckeditor/ckeditor5-table/src/tableediting';
 
 describe( 'RestrictedEditingModeEditing', () => {
 	let editor, model;
@@ -54,7 +55,7 @@ describe( 'RestrictedEditingModeEditing', () => {
 
 	describe( 'conversion', () => {
 		beforeEach( async () => {
-			editor = await VirtualTestEditor.create( { plugins: [ Paragraph, RestrictedEditingModeEditing ] } );
+			editor = await VirtualTestEditor.create( { plugins: [ Paragraph, TableEditing, RestrictedEditingModeEditing ] } );
 			model = editor.model;
 		} );
 
@@ -90,6 +91,21 @@ describe( 'RestrictedEditingModeEditing', () => {
 				expect( secondMarker.getEnd().path ).to.deep.equal( [ 1, 11 ] );
 			} );
 
+			it( 'should convert <span class="restricted-editing-exception"> inside table to marker', () => {
+				editor.setData(
+					'<figure class="table">' +
+						'<table><tbody><tr><td><span class="restricted-editing-exception">bar</span></td></tr></tbody></table>' +
+					'</figure>'
+				);
+
+				expect( model.markers.has( 'restrictedEditingException:1' ) ).to.be.true;
+
+				const marker = model.markers.get( 'restrictedEditingException:1' );
+
+				expect( marker.getStart().path ).to.deep.equal( [ 0, 0, 0, 0, 0 ] );
+				expect( marker.getEnd().path ).to.deep.equal( [ 0, 0, 0, 0, 3 ] );
+			} );
+
 			it( 'should not convert other <span> elements', () => {
 				editor.setData( '<p>foo <span class="foo bar">bar</span> baz</p>' );
 
@@ -158,6 +174,39 @@ describe( 'RestrictedEditingModeEditing', () => {
 					'</p>'
 				);
 			} );
+
+			it( 'converted <span> should be the outermost attribute element', () => {
+				editor.conversion.for( 'downcast' ).attributeToElement( { model: 'bold', view: 'b' } );
+				setModelData( model,
+					'<table><tableRow><tableCell>' +
+					'<paragraph><$text bold="true">foo bar baz</$text></paragraph>' +
+					'</tableCell></tableRow></table>'
+				);
+
+				const paragraph = model.document.getRoot().getChild( 0 ).getChild( 0 ).getChild( 0 ).getChild( 0 );
+
+				model.change( writer => {
+					writer.addMarker( 'restrictedEditingException:1', {
+						range: writer.createRange( writer.createPositionAt( paragraph, 0 ), writer.createPositionAt( paragraph, 'end' ) ),
+						usingOperation: true,
+						affectsData: true
+					} );
+				} );
+
+				assertEqualMarkup( editor.getData(),
+					'<figure class="table"><table><tbody><tr><td>' +
+					'<span class="restricted-editing-exception"><b>foo bar baz</b></span>' +
+					'</td></tr></tbody></table></figure>'
+				);
+				assertEqualMarkup( getViewData( editor.editing.view, { withoutSelection: true } ),
+					'<figure class="ck-widget ck-widget_with-selection-handle table" contenteditable="false">' +
+					'<div class="ck ck-widget__selection-handle"></div>' +
+					'<table><tbody><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true">' +
+					'<span><span class="restricted-editing-exception"><b>foo bar baz</b></span></span>' +
+					'</td></tr></tbody></table>' +
+					'</figure>'
+				);
+			} );
 		} );
 	} );