Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add table caption toolbar button #9263

Merged
merged 18 commits into from
Apr 22, 2021
Merged

Add table caption toolbar button #9263

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
0541ef5
Add table caption UI.
maxbarnas Mar 17, 2021
2303a3c
Update placement of the toolbar.
maxbarnas Mar 19, 2021
d0a868a
Allow toggling the caption from both the table and content toolbar.
maxbarnas Mar 22, 2021
cd4e637
Clean up the code. Add tests.
maxbarnas Mar 23, 2021
4924bdf
Add styles.
maxbarnas Mar 24, 2021
aa5aee1
Fix QA review issue: table cell buttons enabled when in caption.
maxbarnas Mar 26, 2021
98d7aa3
Fix QA issues: default focus on caption hiding, placeholder styling.
maxbarnas Mar 26, 2021
9cb8fd0
Update tests.
maxbarnas Mar 29, 2021
032d356
Review fixes.
maxbarnas Apr 14, 2021
2d7fe6d
Merge branch 'i/9105-table-algorithms' into i/9104-caption-toolbar
maxbarnas Apr 16, 2021
1e24af8
Add tests.
maxbarnas Apr 19, 2021
2598cfd
Docs and CSS.
maxbarnas Apr 19, 2021
aa8d950
Proper imports in tests. Moved the doc section up.
maxbarnas Apr 20, 2021
5a972db
Rename `getClosestParentTable` to `getSelectionAffectedTable`.
maxbarnas Apr 22, 2021
26ae590
Remove `tableToolbar` config from manual tests.
maxbarnas Apr 22, 2021
c97ceac
Misc review fixes.
maxbarnas Apr 22, 2021
e1be5bf
Cleanup.
maxbarnas Apr 22, 2021
89f7743
New section in docs for installation of the table caption plugin.
maxbarnas Apr 22, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion packages/ckeditor5-table/src/tablecaption/tablecaptionediting.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,8 @@ export default class TableCaptionEditing extends Plugin {
enablePlaceholder( {
view,
element: figcaptionElement,
text: t( 'Enter table caption' )
text: t( 'Enter table caption' ),
keepOnFocus: true
} );

return toWidgetEditable( figcaptionElement, writer );
Expand Down
8 changes: 4 additions & 4 deletions packages/ckeditor5-table/src/tablecaption/toggletablecaptioncommand.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
import { Command } from 'ckeditor5/src/core';
import { Element } from 'ckeditor5/src/engine';

import { getCaptionFromTableModelElement, findClosestParentTable } from './utils';
import { getCaptionFromTableModelElement, getSelectionAffectedTable } from './utils';

/**
* The toggle table caption command.
Expand Down Expand Up @@ -39,7 +39,7 @@ export default class ToggleTableCaptionCommand extends Command {
*/
refresh() {
const editor = this.editor;
const tableElement = findClosestParentTable( editor.model.document.selection );
const tableElement = getSelectionAffectedTable( editor.model.document.selection );

this.isEnabled = !!tableElement;

Expand Down Expand Up @@ -83,7 +83,7 @@ export default class ToggleTableCaptionCommand extends Command {
*/
_showTableCaption( writer, focusCaptionOnShow ) {
const model = this.editor.model;
const tableElement = findClosestParentTable( model.document.selection );
const tableElement = getSelectionAffectedTable( model.document.selection );

let newCaptionElement;

Expand Down Expand Up @@ -115,7 +115,7 @@ export default class ToggleTableCaptionCommand extends Command {
*/
_hideTableCaption( writer ) {
const model = this.editor.model;
const tableElement = findClosestParentTable( model.document.selection );
const tableElement = getSelectionAffectedTable( model.document.selection );
const captionElement = getCaptionFromTableModelElement( tableElement );

// Store the caption content so it can be restored quickly if the user changes their mind.
Expand Down
4 changes: 2 additions & 2 deletions packages/ckeditor5-table/src/tablecaption/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export function getCaptionFromTableModelElement( tableModelElement ) {
* @returns {module:engine/model/element~Element|null}
*/
export function getCaptionFromModelSelection( selection ) {
const tableElement = findClosestParentTable( selection );
const tableElement = getSelectionAffectedTable( selection );

if ( !tableElement ) {
return null;
Expand Down Expand Up @@ -81,7 +81,7 @@ export function matchTableCaptionViewElement( element ) {
* @param {module:engine/model/position~Position} position
* @returns {module:engine/model/element~Element}
*/
export function findClosestParentTable( selection ) {
export function getSelectionAffectedTable( selection ) {
const selectedElement = selection.getSelectedElement();

// Is the command triggered from the `tableToolbar`?
Expand Down
65 changes: 44 additions & 21 deletions packages/ckeditor5-table/tests/commands/insertcolumncommand.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,6 +214,29 @@ describe( 'InsertColumnCommand', () => {
] ) );
} );
} );

it( 'should be false when non-cell elements are in the selection', () => {
model.schema.register( 'foo', {
allowIn: 'table',
allowContentOf: '$block'
} );
editor.conversion.elementToElement( {
model: 'foo',
view: 'foo'
} );

command = new InsertColumnCommand( editor );
niegowski marked this conversation as resolved.
Show resolved Hide resolved

setData( model,
'<table>' +
'<tableRow>' +
'<tableCell></tableCell>' +
'</tableRow>' +
'<foo>bar[]</foo>' +
'</table>'
);
expect( command.isEnabled ).to.be.false;
} );
} );

describe( 'order=left', () => {
Expand Down Expand Up @@ -381,28 +404,28 @@ describe( 'InsertColumnCommand', () => {
], { headingColumns: 5 } ) );
} );
} );
} );

it( 'should be false when non-cell elements are in the selection', () => {
model.schema.register( 'foo', {
allowIn: 'table',
allowContentOf: '$block'
} );
editor.conversion.elementToElement( {
model: 'foo',
view: 'foo'
} );
it( 'should be false when non-cell elements are in the selection', () => {
model.schema.register( 'foo', {
allowIn: 'table',
allowContentOf: '$block'
} );
editor.conversion.elementToElement( {
model: 'foo',
view: 'foo'
} );

command = new InsertColumnCommand( editor );

setData( model,
'<table>' +
'<tableRow>' +
'<tableCell></tableCell>' +
'</tableRow>' +
'<foo>bar[]</foo>' +
'</table>'
);
expect( command.isEnabled ).to.be.false;
command = new InsertColumnCommand( editor, { order: 'left' } );
niegowski marked this conversation as resolved.
Show resolved Hide resolved

setData( model,
'<table>' +
'<tableRow>' +
'<tableCell></tableCell>' +
'</tableRow>' +
'<foo>bar[]</foo>' +
'</table>'
);
expect( command.isEnabled ).to.be.false;
} );
} );
} );
65 changes: 44 additions & 21 deletions packages/ckeditor5-table/tests/commands/insertrowcommand.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -309,6 +309,29 @@ describe( 'InsertRowCommand', () => {
] ) );
} );
} );

it( 'should be false when non-cell elements are in the selection', () => {
model.schema.register( 'foo', {
allowIn: 'table',
allowContentOf: '$block'
} );
editor.conversion.elementToElement( {
model: 'foo',
view: 'foo'
} );

command = new InsertRowCommand( editor );
niegowski marked this conversation as resolved.
Show resolved Hide resolved

setData( model,
'<table>' +
'<tableRow>' +
'<tableCell></tableCell>' +
'</tableRow>' +
'<foo>bar[]</foo>' +
'</table>'
);
expect( command.isEnabled ).to.be.false;
} );
} );

describe( 'order=above', () => {
Expand Down Expand Up @@ -471,28 +494,28 @@ describe( 'InsertRowCommand', () => {
] ) );
} );
} );
} );

it( 'should be false when non-cell elements are in the selection', () => {
model.schema.register( 'foo', {
allowIn: 'table',
allowContentOf: '$block'
} );
editor.conversion.elementToElement( {
model: 'foo',
view: 'foo'
} );
it( 'should be false when non-cell elements are in the selection', () => {
model.schema.register( 'foo', {
allowIn: 'table',
allowContentOf: '$block'
} );
editor.conversion.elementToElement( {
model: 'foo',
view: 'foo'
} );

command = new InsertRowCommand( editor );

setData( model,
'<table>' +
'<tableRow>' +
'<tableCell></tableCell>' +
'</tableRow>' +
'<foo>bar[]</foo>' +
'</table>'
);
expect( command.isEnabled ).to.be.false;
command = new InsertRowCommand( editor, { order: 'above' } );
niegowski marked this conversation as resolved.
Show resolved Hide resolved

setData( model,
'<table>' +
'<tableRow>' +
'<tableCell></tableCell>' +
'</tableRow>' +
'<foo>bar[]</foo>' +
'</table>'
);
expect( command.isEnabled ).to.be.false;
} );
} );
} );
92 changes: 44 additions & 48 deletions packages/ckeditor5-table/tests/manual/tablecaption.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,49 +1,45 @@
<div>
<div id="editor">
<figure class="table">
<table>
<thead>
<tr>
<th>0</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>b</td>
<td>
c
</td>
<td>d</td>
<td><i><strong>e</strong></i></td>
</tr>
<tr>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td><i><strong>j</strong></i></td>
</tr>
<tr>
<td>k</td>
<td>l</td>
<td>m</td>
<td>n</td>
<td><i><strong>o</strong></i></td>
</tr>
<tr>
<td>p</td>
<td>q</td>
<td>r</td>
<td>s</td>
<td>t</td>
</tr>
</tbody>
</table>
</figure>
</div>
<div id="editor">
<figure class="table">
<table>
<thead>
<tr>
<th>0</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
<tr>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
</tr>
<tr>
<td>k</td>
<td>l</td>
<td>m</td>
<td>n</td>
<td>o</td>
</tr>
<tr>
<td>p</td>
<td>q</td>
<td>r</td>
<td>s</td>
<td>t</td>
</tr>
</tbody>
</table>
</figure>
</div>
57 changes: 25 additions & 32 deletions packages/ckeditor5-table/tests/manual/tablecaption.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/

/* globals console, document, window, CKEditorInspector */
/* globals console, document, window */

import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
Expand All @@ -15,34 +15,27 @@ import TableProperties from '../../src/tableproperties';
import TableCellProperties from '../../src/tablecellproperties';
import TableCaption from '../../src/tablecaption';

window.editors = {};

createEditor( '#editor', 'content' );

function createEditor( target, inspectorName ) {
ClassicEditor
.create( document.querySelector( target ), {
plugins: [
ArticlePluginSet, Table, TableToolbar, TableSelection, TableClipboard, TableProperties, TableCellProperties, TableCaption
],
toolbar: [
'heading', '|',
'insertTable', '|',
'bold', 'italic', 'link', '|',
'bulletedList', 'numberedList', 'blockQuote', '|',
'undo', 'redo'
],
table: {
contentToolbar: [
'tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties', 'toggleTableCaption'
]
}
} )
.then( editor => {
window.editors[ inspectorName ] = editor;
CKEditorInspector.attach( inspectorName, editor );
} )
.catch( err => {
console.error( err.stack );
} );
}
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [
ArticlePluginSet, Table, TableToolbar, TableSelection, TableClipboard, TableProperties, TableCellProperties, TableCaption
],
toolbar: [
'heading', '|',
'insertTable', '|',
'bold', 'italic', 'link', '|',
'bulletedList', 'numberedList', 'blockQuote', '|',
'undo', 'redo'
],
table: {
contentToolbar: [
'tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties', 'toggleTableCaption'
]
}
} )
.then( editor => {
window.editor = editor;
} )
.catch( err => {
console.error( err.stack );
} );
Loading