Skip to content
This repository was archived by the owner on Jun 26, 2020. It is now read-only.

Commit 39c09e6

Browse files
scofalikscofalik
authored
Merge pull request #155 from ckeditor/t/99
Feature: Introduce images in tables. Closes #99.
2 parents 3ac19ea + 57e9554 commit 39c09e6

File tree

10 files changed

+113
-22
lines changed

10 files changed

+113
-22
lines changed

‎src/tableediting.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -81,13 +81,13 @@ export default class TableEditing extends Plugin {
8181
}
8282
} );
8383

84-
// Disallow image and media in table cell.
84+
// Disallow media in table cell.
8585
schema.addChildCheck( ( context, childDefinition ) => {
8686
if ( !Array.from( context.getNames() ).includes( 'table' ) ) {
8787
return;
8888
}
8989

90-
if ( childDefinition.name == 'image' || childDefinition.name == 'media' ) {
90+
if ( childDefinition.name == 'media' ) {
9191
return false;
9292
}
9393
} );

‎src/utils.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,10 @@ export function isTableWidgetSelected( selection ) {
5757
* @returns {Boolean}
5858
*/
5959
export function isTableContentSelected( selection ) {
60+
const selectedElement = selection.getSelectedElement();
61+
const isInnerWidgetSelected = selectedElement && isWidget( selectedElement );
62+
6063
const parentTable = findAncestor( 'table', selection.getFirstPosition() );
6164

62-
return !!( parentTable && isTableWidget( parentTable.parent ) );
65+
return !isInnerWidgetSelected && !!( parentTable && isTableWidget( parentTable.parent ) );
6366
}

‎tests/_utils/utils.js‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -187,13 +187,6 @@ export function defaultSchema( schema, registerParagraph = true ) {
187187
}
188188
} );
189189

190-
// Disallow image in table.
191-
schema.addChildCheck( ( context, childDefinition ) => {
192-
if ( childDefinition.name == 'image' && Array.from( context.getNames() ).includes( 'table' ) ) {
193-
return false;
194-
}
195-
} );
196-
197190
if ( registerParagraph ) {
198191
schema.register( 'paragraph', { inheritAllFrom: '$block' } );
199192
}

‎tests/converters/upcasttable.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -457,7 +457,7 @@ describe( 'upcastTable()', () => {
457457
] ) );
458458
} );
459459

460-
it( 'should upcast table with <img> in table cell to empty table cell', () => {
460+
it( 'should upcast table with <img> in table cell', () => {
461461
editor.setData(
462462
'<table>' +
463463
'<tbody>' +
@@ -469,7 +469,7 @@ describe( 'upcastTable()', () => {
469469
);
470470

471471
expectModel( modelTable( [
472-
[ '' ]
472+
[ '<image src="sample.png"></image>' ]
473473
] ) );
474474
} );
475475
} );

‎tests/manual/table.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,10 @@
77

88
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
99
import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
10-
import Table from '../../src/table';
11-
import TableToolbar from '../../src/tabletoolbar';
12-
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
1310

1411
ClassicEditor
1512
.create( document.querySelector( '#editor' ), {
16-
plugins: [ ArticlePluginSet, Table, TableToolbar, BlockQuote ],
13+
plugins: [ ArticlePluginSet ],
1714
toolbar: [
1815
'heading', '|', 'insertTable', '|', 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'
1916
],

‎tests/manual/tableblockcontent.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,18 @@ <h2 style="text-align: justify">An h2 with justify alignment.</h2>
6464
</td>
6565
<td><blockquote><p style="text-align: right">A quote with paragraph with right alignment</p></blockquote></td>
6666
</tr>
67+
<tr>
68+
<td>image</td>
69+
<td>
70+
<img alt="sample image" src="sample.jpg">
71+
</td>
72+
<td>
73+
<p>An image aligned to right:</p>
74+
<figure class="image image-style-side" contenteditable="false">
75+
<img src="sample.jpg" alt="sample image">
76+
</figure>
77+
</td>
78+
</tr>
6779
</tbody>
6880
</table>
6981
</div>

‎tests/manual/tableblockcontent.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,18 @@
77

88
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
99
import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
10-
import Table from '../../src/table';
11-
import TableToolbar from '../../src/tabletoolbar';
1210
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
1311

1412
ClassicEditor
1513
.create( document.querySelector( '#editor' ), {
16-
plugins: [ ArticlePluginSet, Table, TableToolbar, Alignment ],
14+
plugins: [ ArticlePluginSet, Alignment ],
1715
toolbar: [
1816
'heading', '|', 'insertTable', '|', 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote',
1917
'alignment', '|', 'undo', 'redo'
2018
],
19+
image: {
20+
toolbar: [ 'imageStyle:full', 'imageStyle:side' ]
21+
},
2122
table: {
2223
contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
2324
}

‎tests/manual/tableblockcontent.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
* List
77
* Heading
88
* Block Quote (with inner paragraph)
9+
* Image
910

1011
2. The third column consist blocks with text alignment.
1112
* Paragraph - should be rendered was `<p>` when alignment is set (apart from default) for single paragraph.

‎tests/tableediting.js‎

Lines changed: 50 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ describe( 'TableEditing', () => {
7474
expect( model.schema.checkChild( [ '$root', 'table', 'tableRow', 'tableCell' ], '$text' ) ).to.be.false;
7575
expect( model.schema.checkChild( [ '$root', 'table', 'tableRow', 'tableCell' ], '$block' ) ).to.be.true;
7676
expect( model.schema.checkChild( [ '$root', 'table', 'tableRow', 'tableCell' ], 'table' ) ).to.be.false;
77-
expect( model.schema.checkChild( [ '$root', 'table', 'tableRow', 'tableCell' ], 'image' ) ).to.be.false;
77+
expect( model.schema.checkChild( [ '$root', 'table', 'tableRow', 'tableCell' ], 'image' ) ).to.be.true;
7878
} );
7979

8080
it( 'adds insertTable command', () => {
@@ -183,7 +183,7 @@ describe( 'TableEditing', () => {
183183
editor.setData( '<table><tbody><tr><td><img src="sample.png"></td></tr></tbody></table>' );
184184

185185
expect( getModelData( model, { withoutSelection: true } ) )
186-
.to.equal( '<table><tableRow><tableCell><paragraph></paragraph></tableCell></tableRow></table>' );
186+
.to.equal( '<table><tableRow><tableCell><image src="sample.png"></image></tableCell></tableRow></table>' );
187187
} );
188188

189189
it( 'should convert table with media', () => {
@@ -312,6 +312,40 @@ describe( 'TableEditing', () => {
312312
] ) );
313313
} );
314314

315+
it( 'should move to next cell with an image', () => {
316+
setModelData( model, modelTable( [
317+
[ '11[]', '<paragraph>foo</paragraph><image></image>' ]
318+
] ) );
319+
320+
editor.editing.view.document.fire( 'keydown', domEvtDataStub );
321+
322+
sinon.assert.calledOnce( domEvtDataStub.preventDefault );
323+
sinon.assert.calledOnce( domEvtDataStub.stopPropagation );
324+
expect( formatTable( getModelData( model ) ) ).to.equal( formattedModelTable( [
325+
[ '11', '<paragraph>[foo</paragraph><image></image>]' ]
326+
] ) );
327+
} );
328+
329+
it( 'should move to next cell with an blockQuote', () => {
330+
model.schema.register( 'blockQuote', {
331+
allowWhere: '$block',
332+
allowContentOf: '$root'
333+
} );
334+
editor.conversion.elementToElement( { model: 'blockQuote', view: 'blockquote' } );
335+
336+
setModelData( model, modelTable( [
337+
[ '11[]', '<blockQuote><paragraph>foo</paragraph></blockQuote>' ]
338+
] ) );
339+
340+
editor.editing.view.document.fire( 'keydown', domEvtDataStub );
341+
342+
sinon.assert.calledOnce( domEvtDataStub.preventDefault );
343+
sinon.assert.calledOnce( domEvtDataStub.stopPropagation );
344+
expect( formatTable( getModelData( model ) ) ).to.equal( formattedModelTable( [
345+
[ '11', '<blockQuote><paragraph>[foo]</paragraph></blockQuote>' ]
346+
] ) );
347+
} );
348+
315349
it( 'should listen with lower priority then its children', () => {
316350
// Cancel TAB event.
317351
editor.keystrokes.set( 'Tab', ( data, cancel ) => cancel() );
@@ -461,6 +495,20 @@ describe( 'TableEditing', () => {
461495
],
462496
] ) );
463497
} );
498+
499+
it( 'should move to previous cell with an image', () => {
500+
setModelData( model, modelTable( [
501+
[ '<paragraph>foo</paragraph><image></image>', 'bar[]' ]
502+
] ) );
503+
504+
editor.editing.view.document.fire( 'keydown', domEvtDataStub );
505+
506+
sinon.assert.calledOnce( domEvtDataStub.preventDefault );
507+
sinon.assert.calledOnce( domEvtDataStub.stopPropagation );
508+
expect( formatTable( getModelData( model ) ) ).to.equal( formattedModelTable( [
509+
[ '<paragraph>[foo</paragraph><image></image>]', 'bar' ]
510+
] ) );
511+
} );
464512
} );
465513
} );
466514

‎tests/tabletoolbar.js‎

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@ import View from '@ckeditor/ckeditor5-ui/src/view';
1616
import { setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
1717
import WidgetToolbarRepository from '@ckeditor/ckeditor5-widget/src/widgettoolbarrepository';
1818
import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
19+
import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';
20+
import Image from '@ckeditor/ckeditor5-image/src/image';
21+
import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
1922

2023
describe( 'TableToolbar', () => {
2124
testUtils.createSinonSandbox();
@@ -29,7 +32,10 @@ describe( 'TableToolbar', () => {
2932

3033
return ClassicTestEditor
3134
.create( editorElement, {
32-
plugins: [ Paragraph, Table, TableToolbar, FakeButton ],
35+
plugins: [ Paragraph, Image, ImageStyle, ImageToolbar, Table, TableToolbar, FakeButton ],
36+
image: {
37+
toolbar: [ 'imageStyle:full', 'imageStyle:side' ]
38+
},
3339
table: {
3440
contentToolbar: [ 'fake_button' ]
3541
}
@@ -154,6 +160,36 @@ describe( 'TableToolbar', () => {
154160
expect( balloon.visibleView ).to.equal( toolbar );
155161
} );
156162

163+
it( 'should not show the toolbar on ui#update when the image inside table is selected', () => {
164+
setData(
165+
model,
166+
'<paragraph>[foo]</paragraph>' +
167+
'<table><tableRow><tableCell><paragraph>foo</paragraph><image src=""></image></tableCell></tableRow></table>'
168+
);
169+
170+
expect( balloon.visibleView ).to.be.null;
171+
172+
const imageToolbar = widgetToolbarRepository._toolbars.get( 'image' ).view;
173+
174+
model.change( writer => {
175+
// Select the <tableCell><paragraph></paragraph>[<image></image>]</tableCell>
176+
const nodeByPath = doc.getRoot().getNodeByPath( [ 1, 0, 0, 1 ] );
177+
178+
writer.setSelection( nodeByPath, 'on' );
179+
} );
180+
181+
expect( balloon.visibleView ).to.equal( imageToolbar );
182+
183+
model.change( writer => {
184+
// Select the <tableCell><paragraph>[]</paragraph><image></image></tableCell>
185+
writer.setSelection(
186+
writer.createPositionAt( doc.getRoot().getNodeByPath( [ 1, 0, 0, 0 ] ), 0 )
187+
);
188+
} );
189+
190+
expect( balloon.visibleView ).to.equal( toolbar );
191+
} );
192+
157193
it( 'should not engage when the toolbar is in the balloon yet invisible', () => {
158194
setData( model, '<table><tableRow><tableCell><paragraph>x[y]z</paragraph></tableCell></tableRow></table>' );
159195

0 commit comments

Comments
 (0)