|
|
@@ -329,6 +329,7 @@ describe( 'downcast converters', () => {
|
|
|
|
|
|
defaultSchema( model.schema );
|
|
|
defaultConversion( editor.conversion, true );
|
|
|
+ markerConversion( editor.conversion );
|
|
|
} );
|
|
|
} );
|
|
|
|
|
|
@@ -350,6 +351,55 @@ describe( 'downcast converters', () => {
|
|
|
'</figure>'
|
|
|
);
|
|
|
} );
|
|
|
+
|
|
|
+ it( 'should apply marker class on tableCell', () => {
|
|
|
+ setModelData( model, modelTable( [ [ '00' ] ] ) );
|
|
|
+
|
|
|
+ model.change( writer => {
|
|
|
+ const cell = root.getNodeByPath( [ 0, 0, 0 ] );
|
|
|
+
|
|
|
+ writer.addMarker( 'marker:yellow', {
|
|
|
+ range: writer.createRangeOn( cell ),
|
|
|
+ usingOperation: false
|
|
|
+ } );
|
|
|
+
|
|
|
+ checkCustomPropertyForHighlight( editor.editing.mapper.toViewElement( cell ) );
|
|
|
+ } );
|
|
|
+
|
|
|
+ assertEqualMarkup( getViewData( 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 highlight-yellow" contenteditable="true">' +
|
|
|
+ '<span style="display:inline-block">00</span>' +
|
|
|
+ '</td>' +
|
|
|
+ '</tr>' +
|
|
|
+ '</tbody>' +
|
|
|
+ '</table>' +
|
|
|
+ '</figure>'
|
|
|
+ );
|
|
|
+
|
|
|
+ model.change( writer => {
|
|
|
+ writer.removeMarker( 'marker:yellow' );
|
|
|
+ } );
|
|
|
+
|
|
|
+ assertEqualMarkup( getViewData( 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 style="display:inline-block">00</span>' +
|
|
|
+ '</td>' +
|
|
|
+ '</tr>' +
|
|
|
+ '</tbody>' +
|
|
|
+ '</table>' +
|
|
|
+ '</figure>'
|
|
|
+ );
|
|
|
+ } );
|
|
|
} );
|
|
|
} );
|
|
|
|
|
|
@@ -569,6 +619,7 @@ describe( 'downcast converters', () => {
|
|
|
|
|
|
defaultSchema( model.schema );
|
|
|
defaultConversion( editor.conversion, true );
|
|
|
+ markerConversion( editor.conversion );
|
|
|
} );
|
|
|
} );
|
|
|
|
|
|
@@ -602,6 +653,69 @@ describe( 'downcast converters', () => {
|
|
|
'</figure>'
|
|
|
);
|
|
|
} );
|
|
|
+
|
|
|
+ it( 'should apply marker class on tableCell', () => {
|
|
|
+ setModelData( model, modelTable( [ [ '00' ] ] ) );
|
|
|
+
|
|
|
+ const table = root.getChild( 0 );
|
|
|
+
|
|
|
+ model.change( writer => {
|
|
|
+ const firstRow = writer.createElement( 'tableRow' );
|
|
|
+ const cell = writer.createElement( 'tableCell' );
|
|
|
+
|
|
|
+ writer.insert( firstRow, table, 1 );
|
|
|
+ writer.insert( cell, firstRow, 'end' );
|
|
|
+
|
|
|
+ writer.addMarker( 'marker:yellow', {
|
|
|
+ range: writer.createRangeOn( cell ),
|
|
|
+ usingOperation: false
|
|
|
+ } );
|
|
|
+ } );
|
|
|
+
|
|
|
+ const cell = root.getNodeByPath( [ 0, 1, 0 ] );
|
|
|
+ checkCustomPropertyForHighlight( editor.editing.mapper.toViewElement( cell ) );
|
|
|
+
|
|
|
+ assertEqualMarkup( getViewData( 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 style="display:inline-block">00</span>' +
|
|
|
+ '</td>' +
|
|
|
+ '</tr>' +
|
|
|
+ '<tr>' +
|
|
|
+ '<td class="ck-editor__editable ck-editor__nested-editable highlight-yellow" ' +
|
|
|
+ 'contenteditable="true"></td>' +
|
|
|
+ '</tr>' +
|
|
|
+ '</tbody>' +
|
|
|
+ '</table>' +
|
|
|
+ '</figure>'
|
|
|
+ );
|
|
|
+
|
|
|
+ model.change( writer => {
|
|
|
+ writer.removeMarker( 'marker:yellow' );
|
|
|
+ } );
|
|
|
+
|
|
|
+ assertEqualMarkup( getViewData( 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 style="display:inline-block">00</span>' +
|
|
|
+ '</td>' +
|
|
|
+ '</tr>' +
|
|
|
+ '<tr>' +
|
|
|
+ '<td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"></td>' +
|
|
|
+ '</tr>' +
|
|
|
+ '</tbody>' +
|
|
|
+ '</table>' +
|
|
|
+ '</figure>'
|
|
|
+ );
|
|
|
+ } );
|
|
|
} );
|
|
|
} );
|
|
|
|
|
|
@@ -731,6 +845,7 @@ describe( 'downcast converters', () => {
|
|
|
|
|
|
defaultSchema( model.schema );
|
|
|
defaultConversion( editor.conversion, true );
|
|
|
+ markerConversion( editor.conversion );
|
|
|
} );
|
|
|
} );
|
|
|
|
|
|
@@ -747,7 +862,64 @@ describe( 'downcast converters', () => {
|
|
|
|
|
|
assertEqualMarkup( getViewData( view, { withoutSelection: true } ),
|
|
|
'<figure class="ck-widget ck-widget_with-selection-handle table" contenteditable="false">' +
|
|
|
- '<div class="ck ck-widget__selection-handle"></div>' +
|
|
|
+ '<div class="ck ck-widget__selection-handle"></div>' +
|
|
|
+ '<table>' +
|
|
|
+ '<tbody>' +
|
|
|
+ '<tr>' +
|
|
|
+ '<td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true">' +
|
|
|
+ '<span style="display:inline-block">00</span>' +
|
|
|
+ '</td>' +
|
|
|
+ '<td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"></td>' +
|
|
|
+ '</tr>' +
|
|
|
+ '</tbody>' +
|
|
|
+ '</table>' +
|
|
|
+ '</figure>'
|
|
|
+ );
|
|
|
+ } );
|
|
|
+
|
|
|
+ it( 'should apply marker class on tableCell', () => {
|
|
|
+ setModelData( model, modelTable( [ [ '00' ] ] ) );
|
|
|
+
|
|
|
+ const table = root.getChild( 0 );
|
|
|
+
|
|
|
+ model.change( writer => {
|
|
|
+ const row = table.getChild( 0 );
|
|
|
+ const cell = writer.createElement( 'tableCell' );
|
|
|
+
|
|
|
+ writer.insert( cell, row, 'end' );
|
|
|
+ writer.addMarker( 'marker:yellow', {
|
|
|
+ range: writer.createRangeOn( cell ),
|
|
|
+ usingOperation: false
|
|
|
+ } );
|
|
|
+ } );
|
|
|
+
|
|
|
+ const cell = root.getNodeByPath( [ 0, 0, 1 ] );
|
|
|
+ checkCustomPropertyForHighlight( editor.editing.mapper.toViewElement( cell ) );
|
|
|
+
|
|
|
+ assertEqualMarkup( getViewData( 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 style="display:inline-block">00</span>' +
|
|
|
+ '</td>' +
|
|
|
+ '<td class="ck-editor__editable ck-editor__nested-editable highlight-yellow" ' +
|
|
|
+ 'contenteditable="true"></td>' +
|
|
|
+ '</tr>' +
|
|
|
+ '</tbody>' +
|
|
|
+ '</table>' +
|
|
|
+ '</figure>'
|
|
|
+ );
|
|
|
+
|
|
|
+ model.change( writer => {
|
|
|
+ writer.removeMarker( 'marker:yellow' );
|
|
|
+ } );
|
|
|
+
|
|
|
+ assertEqualMarkup( getViewData( 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>' +
|
|
|
@@ -925,6 +1097,7 @@ describe( 'downcast converters', () => {
|
|
|
|
|
|
defaultSchema( model.schema );
|
|
|
defaultConversion( editor.conversion, true );
|
|
|
+ markerConversion( editor.conversion );
|
|
|
} );
|
|
|
} );
|
|
|
|
|
|
@@ -952,6 +1125,40 @@ describe( 'downcast converters', () => {
|
|
|
'</figure>'
|
|
|
);
|
|
|
} );
|
|
|
+
|
|
|
+ it( 'should preserve marker class on tableCell', () => {
|
|
|
+ setModelData( model, modelTable( [
|
|
|
+ [ '00', '01', '02', '03' ],
|
|
|
+ [ '10', '11', '12', '13' ]
|
|
|
+ ], { headingColumns: 1 } ) );
|
|
|
+
|
|
|
+ const table = root.getChild( 0 );
|
|
|
+
|
|
|
+ model.change( writer => {
|
|
|
+ const cell = root.getNodeByPath( [ 0, 0, 1 ] );
|
|
|
+
|
|
|
+ writer.addMarker( 'marker:yellow', {
|
|
|
+ range: writer.createRangeOn( cell ),
|
|
|
+ usingOperation: false
|
|
|
+ } );
|
|
|
+ } );
|
|
|
+
|
|
|
+ model.change( writer => {
|
|
|
+ writer.setAttribute( 'headingColumns', 3, table );
|
|
|
+ } );
|
|
|
+
|
|
|
+ const cell = root.getNodeByPath( [ 0, 0, 1 ] );
|
|
|
+ const viewElement = editor.editing.mapper.toViewElement( cell );
|
|
|
+
|
|
|
+ checkCustomPropertyForHighlight( viewElement );
|
|
|
+ expect( viewElement.hasClass( 'highlight-yellow' ) ).to.be.true;
|
|
|
+
|
|
|
+ model.change( writer => {
|
|
|
+ writer.removeMarker( 'marker:yellow' );
|
|
|
+ } );
|
|
|
+
|
|
|
+ expect( viewElement.hasClass( 'highlight-yellow' ) ).to.be.false;
|
|
|
+ } );
|
|
|
} );
|
|
|
} );
|
|
|
|
|
|
@@ -965,6 +1172,8 @@ describe( 'downcast converters', () => {
|
|
|
doc = model.document;
|
|
|
root = doc.getRoot( 'main' );
|
|
|
view = editor.editing.view;
|
|
|
+
|
|
|
+ markerConversion( editor.conversion, 'marker' );
|
|
|
} );
|
|
|
} );
|
|
|
|
|
|
@@ -1174,6 +1383,41 @@ describe( 'downcast converters', () => {
|
|
|
'</figure>'
|
|
|
);
|
|
|
} );
|
|
|
+
|
|
|
+ it( 'should preserve marker class on tableCell', () => {
|
|
|
+ setModelData( model, modelTable( [
|
|
|
+ [ '00', '01' ],
|
|
|
+ [ '10', '11' ],
|
|
|
+ [ '20', '21' ]
|
|
|
+ ], { headingRows: 1 } ) );
|
|
|
+
|
|
|
+ const table = root.getChild( 0 );
|
|
|
+
|
|
|
+ model.change( writer => {
|
|
|
+ const cell = root.getNodeByPath( [ 0, 1, 0 ] );
|
|
|
+
|
|
|
+ writer.addMarker( 'marker:yellow', {
|
|
|
+ range: writer.createRangeOn( cell ),
|
|
|
+ usingOperation: false
|
|
|
+ } );
|
|
|
+ } );
|
|
|
+
|
|
|
+ model.change( writer => {
|
|
|
+ writer.setAttribute( 'headingRows', 2, table );
|
|
|
+ } );
|
|
|
+
|
|
|
+ const cell = root.getNodeByPath( [ 0, 1, 0 ] );
|
|
|
+ const viewElement = editor.editing.mapper.toViewElement( cell );
|
|
|
+
|
|
|
+ checkCustomPropertyForHighlight( viewElement );
|
|
|
+ expect( viewElement.hasClass( 'highlight-yellow' ) ).to.be.true;
|
|
|
+
|
|
|
+ model.change( writer => {
|
|
|
+ writer.removeMarker( 'marker:yellow' );
|
|
|
+ } );
|
|
|
+
|
|
|
+ expect( viewElement.hasClass( 'highlight-yellow' ) ).to.be.false;
|
|
|
+ } );
|
|
|
} );
|
|
|
} );
|
|
|
|
|
|
@@ -1485,4 +1729,25 @@ describe( 'downcast converters', () => {
|
|
|
], { asWidget: true } ) );
|
|
|
} );
|
|
|
} );
|
|
|
+
|
|
|
+ function markerConversion( conversion, extraClasses = null ) {
|
|
|
+ conversion.for( 'editingDowncast' ).markerToHighlight( {
|
|
|
+ model: 'marker',
|
|
|
+ view: data => {
|
|
|
+ const className = 'highlight-' + data.markerName.split( ':' )[ 1 ];
|
|
|
+
|
|
|
+ return {
|
|
|
+ classes: extraClasses ? [ ...extraClasses, className ] : className
|
|
|
+ };
|
|
|
+ }
|
|
|
+ } );
|
|
|
+ }
|
|
|
+
|
|
|
+ function checkCustomPropertyForHighlight( viewElement ) {
|
|
|
+ const set = viewElement.getCustomProperty( 'addHighlight' );
|
|
|
+ const remove = viewElement.getCustomProperty( 'removeHighlight' );
|
|
|
+
|
|
|
+ expect( typeof set ).to.equal( 'function' );
|
|
|
+ expect( typeof remove ).to.equal( 'function' );
|
|
|
+ }
|
|
|
} );
|