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.

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

Table caption feature #9242

Merged
merged 76 commits into from
May 7, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
76 commits
Select commit Hold shift + click to select a range
1666340
Add downcast.
maxbarnas Feb 23, 2021
05801af
Simplified conversion.
maxbarnas Mar 3, 2021
10666d2
Data and editing downcasting of table captions.
maxbarnas Mar 8, 2021
eabc2f7
Update postfixers. Clean up a bit.
maxbarnas Mar 8, 2021
034f257
Upcast fixes.
maxbarnas Mar 9, 2021
8785049
Typo.
maxbarnas Mar 9, 2021
81f7437
Docs improvements.
maxbarnas Mar 9, 2021
7b09f1c
Add test.
maxbarnas Mar 9, 2021
24d5fa5
Remove export.
maxbarnas Mar 10, 2021
3d7af2a
Review fixes.
niegowski Mar 10, 2021
12bd828
Update tests.
maxbarnas Mar 10, 2021
4a23f33
Clean up tests.
maxbarnas Mar 11, 2021
b3c1c3a
Editing view test.
maxbarnas Mar 11, 2021
7719969
Merge pull request #9187 from ckeditor/i/9084
niegowski Mar 15, 2021
2814a79
Merge remote-tracking branch 'origin/master' into i/3204-table-caption
maxbarnas Mar 17, 2021
24dd854
Add postfixer.
maxbarnas Mar 10, 2021
6f719fe
Add postfixer for repeated captions.
maxbarnas Mar 10, 2021
4a2d6d2
Update postfixer. Merge multiple captions into one and move it to the…
maxbarnas Mar 11, 2021
f10e232
Update TableUtils.
maxbarnas Mar 11, 2021
4f17391
More incorrect row counting fixed.
maxbarnas Mar 12, 2021
1a50e8f
Merge scattered captions into one. Update tests. Keep postfixer in se…
maxbarnas Mar 15, 2021
922408d
Update tests.
maxbarnas Mar 15, 2021
7596af2
Review fixes.
maxbarnas Mar 16, 2021
f81e2e4
Merge remote-tracking branch 'origin/master' into i/3204-table-caption
maxbarnas Mar 23, 2021
cf25917
Merge branch 'i/3204-table-caption' into i/9105-table-algorithms
maxbarnas Mar 23, 2021
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
c782eec
Initial docs update.
maxbarnas Mar 30, 2021
f690859
Merge branch 'master' into i/3204-table-caption
niegowski Mar 30, 2021
88bb8db
Merge branch 'i/3204-table-caption' into i/9105-table-algorithms
niegowski Mar 30, 2021
fe67c4b
Fixed TableWalker ignoring non tableRow elements.
niegowski Mar 30, 2021
79bcea1
Apply suggestions from code review
maxbarnas Mar 30, 2021
f629562
Doc update.
maxbarnas Mar 30, 2021
681e790
Import entire TableCaption plugin.
maxbarnas Mar 30, 2021
f11d849
Review fixes.
maxbarnas Mar 31, 2021
552fa33
WIP: tableutils.
maxbarnas Apr 8, 2021
ca5b0e9
Review fixes for tableutils.
maxbarnas Apr 12, 2021
2ad76b9
Update comment.
maxbarnas Apr 13, 2021
032d356
Review fixes.
maxbarnas Apr 14, 2021
4fd63b7
Merge remote-tracking branch 'origin/master' into i/3204-table-caption
maxbarnas Apr 16, 2021
7be53fd
Merge branch 'i/3204-table-caption' into i/9105-table-algorithms
maxbarnas Apr 16, 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
7cbf15d
Update packages/ckeditor5-table/tests/tableutils.js
maxbarnas Apr 22, 2021
7fc744d
Removed unnecessary checks in split*Cell methods, updated tests.
maxbarnas Apr 22, 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
ef70403
Wrong test desc fixed.
maxbarnas Apr 22, 2021
1846a39
Merge pull request #9209 from ckeditor/i/9105-table-algorithms
niegowski 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
2d8fa7f
Merge pull request #9263 from ckeditor/i/9104-caption-toolbar
niegowski Apr 22, 2021
75d586c
Merge remote-tracking branch 'origin/i/3204-table-caption' into i/908…
maxbarnas Apr 22, 2021
0756be7
Docs for table caption got a demo snippet.
maxbarnas Apr 22, 2021
eb6b39c
Revert table tour ballong removal.
maxbarnas Apr 26, 2021
fb58c54
Change the demo of table caption feature.
maxbarnas Apr 26, 2021
3bf7aa7
Merge remote-tracking branch 'origin/master' into i/3204-table-caption
maxbarnas Apr 26, 2021
9387759
Merge branch 'i/3204-table-caption' into i/9085-table-caption-docs
maxbarnas Apr 26, 2021
522c293
Update demo of table caption.
maxbarnas Apr 26, 2021
fb8c775
Merge pull request #9384 from ckeditor/i/9085-table-caption-docs
niegowski Apr 26, 2021
6c797b9
Store a caption in TableCaptionEditing caption registry.
maxbarnas Apr 29, 2021
5b5ec29
Merge remote-tracking branch 'origin/master' into i/3204-table-caption
maxbarnas Apr 29, 2021
d01f4ad
Merge branch 'i/3204-table-caption' into i/9543-table-caption-storage
maxbarnas Apr 29, 2021
32f157f
Fixed the test.
niegowski May 5, 2021
424190d
Apply suggestions from code review
niegowski May 5, 2021
8424e05
Merge pull request #9590 from ckeditor/i/9543-table-caption-storage
niegowski May 5, 2021
43f07af
Merge branch 'master' into i/3204-table-caption
niegowski May 7, 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
16 changes: 11 additions & 5 deletions packages/ckeditor5-image/src/imagecaption/imagecaptionediting.js
Original file line number Diff line number Diff line change
Expand Up @@ -47,11 +47,17 @@ export default class ImageCaptionEditing extends Plugin {
*/

// Schema configuration.
schema.register( 'caption', {
allowIn: 'image',
allowContentOf: '$block',
isLimit: true
} );
if ( !schema.isRegistered( 'caption' ) ) {
schema.register( 'caption', {
allowIn: 'image',
allowContentOf: '$block',
isLimit: true
} );
} else {
schema.extend( 'caption', {
allowIn: 'image'
} );
}

// Add caption element to each image inserted without it.
editor.model.document.registerPostFixer( writer => this._insertMissingModelCaptionElement( writer ) );
Expand Down
40 changes: 40 additions & 0 deletions packages/ckeditor5-image/tests/imagecaption/imagecaptionediting.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import ImageCaptionEditing from '../../src/imagecaption/imagecaptionediting';
import ImageEditing from '../../src/image/imageediting';
import UndoEditing from '@ckeditor/ckeditor5-undo/src/undoediting';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';

import { getData as getModelData, setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
import { getData as getViewData } from '@ckeditor/ckeditor5-engine/src/dev-utils/view';
Expand All @@ -18,6 +19,34 @@ import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
describe( 'ImageCaptionEditing', () => {
let editor, model, doc, view;

// FakePlugin helps check if the plugin under test extends existing schema correctly.
class FakePlugin extends Plugin {
init() {
const schema = this.editor.model.schema;
const conversion = this.editor.conversion;

schema.register( 'foo', {
isObject: true,
isBlock: true,
allowWhere: '$block'
} );
schema.register( 'caption', {
allowIn: 'foo',
allowContentOf: '$block',
isLimit: true
} );

conversion.elementToElement( {
view: 'foo',
model: 'foo'
} );
conversion.elementToElement( {
view: 'caption',
model: 'caption'
} );
}
}

testUtils.createSinonSandbox();

beforeEach( () => {
Expand Down Expand Up @@ -61,6 +90,17 @@ describe( 'ImageCaptionEditing', () => {
expect( model.schema.checkAttribute( [ '$root', 'image', 'caption' ], 'alignment' ) ).to.be.false;
} );

it( 'should extend caption if schema for it is already registered', async () => {
const { model } = await VirtualTestEditor
.create( {
plugins: [ FakePlugin, ImageCaptionEditing, ImageEditing, UndoEditing, Paragraph ]
} );

expect( model.schema.isRegistered( 'caption' ) ).to.be.true;
expect( model.schema.isLimit( 'caption' ) ).to.be.true;
expect( model.schema.checkChild( [ 'image' ], 'caption' ) ).to.be.true;
} );

describe( 'data pipeline', () => {
describe( 'view to model', () => {
it( 'should convert figcaption inside image figure', () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock';
import TableProperties from '@ckeditor/ckeditor5-table/src/tableproperties';
import TableCellProperties from '@ckeditor/ckeditor5-table/src/tablecellproperties';
import TableCaption from '@ckeditor/ckeditor5-table/src/tablecaption';
import Superscript from '@ckeditor/ckeditor5-basic-styles/src/superscript';

import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';

Expand Down Expand Up @@ -45,5 +47,7 @@ ClassicEditor.defaultConfig = {
window.ClassicEditor = ClassicEditor;
window.CKEditorPlugins = {
TableProperties,
TableCellProperties
TableCellProperties,
TableCaption,
Superscript
};
104 changes: 104 additions & 0 deletions packages/ckeditor5-table/docs/_snippets/features/table-caption.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
<div id="snippet-table-caption">
<figure class="table">
<table>
<thead>
<tr>
<th>Name</th>
<th>Mass (10<sup>24</sup>kg)</th>
<th>Diameter (km)</th>
<th>Gravity (m/s<sup>2</sup>)</th>
<th>Length of day (hours)</th>
<th>Distance from Sun (10<sup>6</sup>km)</th>
<th>Mean temperature (°C)</th>
</tr>
</thead>
<tbody>
<tr>
<th>Mercury</th>
<td>0.330</td>
<td>4,879</td>
<td>3.7</td>
<td>4222.6</td>
<td>57.9</td>
<td>167</td>
</tr>
<tr>
<th>Venus</th>
<td>4.87</td>
<td>12,104</td>
<td>8.9</td>
<td>2802.0</td>
<td>108.2</td>
<td>464</td>
</tr>
<tr>
<th>Earth</th>
<td>5.97</td>
<td>12,756</td>
<td>9.8</td>
<td>24.0</td>
<td>149.6</td>
<td>15</td>
</tr>
<tr>
<th>Mars</th>
<td>0.642</td>
<td>6,792</td>
<td>3.7</td>
<td>24.7</td>
<td>227.9</td>
<td>-65</td>
</tr>
<tr>
<th>Jupiter</th>
<td>1898</td>
<td>142,984</td>
<td>23.1</td>
<td>9.9</td>
<td>778.6</td>
<td>-110</td>
</tr>
<tr>
<th>Saturn</th>
<td>568</td>
<td>120,536</td>
<td>9.0</td>
<td>10.7</td>
<td>1433.5</td>
<td>-140</td>
</tr>
<tr>
<th>Uranus</th>
<td>86.8</td>
<td>51,118</td>
<td>8.7</td>
<td>17.2</td>
<td>2872.5</td>
<td>-195</td>
</tr>
<tr>
<th>Neptune</th>
<td>102</td>
<td>49,528</td>
<td>11.0</td>
<td>16.1</td>
<td>4495.1</td>
<td>-200</td>
</tr>
<tr>
<th>Pluto</th>
<td>0.0146</td>
<td>2,370</td>
<td>0.7</td>
<td>153.3</td>
<td>5906.4</td>
<td>-225</td>
</tr>
</tbody>
</table>
<figcaption>
Data about the planets of our solar system (Planetary facts taken from
<a href="http://nssdc.gsfc.nasa.gov/planetary/factsheet/">Nasa's Planetary Fact Sheet - Metric</a>).
</figcaption>
</figure>
</div>
30 changes: 30 additions & 0 deletions packages/ckeditor5-table/docs/_snippets/features/table-caption.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
/**
* @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/

/* globals ClassicEditor, CKEditorPlugins, console, window, document */

ClassicEditor
.create( document.querySelector( '#snippet-table-caption' ), {
extraPlugins: [
CKEditorPlugins.TableCaption, CKEditorPlugins.Superscript
],
table: {
contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells', 'toggleTableCaption' ]
},
image: {
toolbar: [
'imageStyle:full',
'imageStyle:side',
'|',
'imageTextAlternative'
]
}
} )
.then( editor => {
window.editorCaption = editor;
} )
.catch( err => {
console.error( err.stack );
} );
1 change: 1 addition & 0 deletions packages/ckeditor5-table/docs/api/table.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ See the {@link features/table Table feature} guide and the documentation for the
* {@link module:table/table~Table}
* {@link module:table/tabletoolbar~TableToolbar}
* {@link module:table/tableproperties~TableProperties}
* {@link module:table/tablecaption~TableCaption}
* {@link module:table/tablecellproperties~TableCellProperties}
* {@link module:table/tableselection~TableSelection}
* {@link module:table/tableclipboard~TableClipboard}
Expand Down
60 changes: 58 additions & 2 deletions packages/ckeditor5-table/docs/features/table.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ CKEditor 5 offers all necessary functionality to produce advanced, visually appe

### Basic table features

The editor bellow shows the basic set of table features focusing on the **structure and semantics**. These features allow users to insert new tables into the content, add or remove columns and rows, define headers, and merge multiple cells. It is also worth noting that you will find them out–of–the–box in all {@link builds/guides/overview ready–to–use editor builds}.
The editor bellow shows the basic set of table features focusing on the **structure and semantics**. These features allow users to insert new tables into the content, add or remove columns and rows, define headers, add caption, and merge multiple cells. It is also worth noting that you will find them out–of–the–box in all {@link builds/guides/overview ready–to–use editor builds}.

{@snippet features/table}

Expand All @@ -35,6 +35,20 @@ Put the caret anywhere inside the table and click the **"Table properties"** but
By default, table styling tools are not included in the {@link builds/guides/overview ready–to–use editor builds} and must be installed separately. See the [installation](#table-and-cell-styling-tools-2) section to learn how to enable them in your editor.
</info-box>

### Table caption

The {@link module:table/tablecaption~TableCaption} plugin adds support for table captions.

{@snippet features/table-caption}

<info-box>
By default, table caption feature is not included in the {@link builds/guides/overview ready–to–use editor builds} and must be installed separately. See the [installation](#table-caption-2) section to learn how to enable it in your editor.
</info-box>

<info-box hint>
By default, the table caption is placed above the table. You can change the placement by setting [`caption-side`](https://developer.mozilla.org/en-US/docs/Web/CSS/caption-side) in your {@link builds/guides/integration/content-styles content styles} for the `.ck-content .table > figcaption` style. Changing it to `caption-side: bottom` will display the caption below the table.
</info-box>

### Nesting tables

Starting from version 27.1.0 CKEditor 5 allows nesting tables inside other table's cells. This may be used for creating advanced charts or layouts based on tables. The nested table can be formatted just like a regular one.
Expand Down Expand Up @@ -137,6 +151,39 @@ ClassicEditor
Read more about {@link builds/guides/integration/installing-plugins installing plugins}.
</info-box>

### Table caption

To enable table caption feature in your editor, install the [`@ckeditor/ckeditor5-table`](https://www.npmjs.com/package/@ckeditor/ckeditor5-table) package:

```
npm install --save @ckeditor/ckeditor5-table
```

Then add the `Table`, `TableToolbar`, and **`TableCaption`** plugins to your plugin list and configure the table toolbar:

```js
import Table from '@ckeditor/ckeditor5-table/src/table';
import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
import TableCaption from '@ckeditor/ckeditor5-table/src/tablecaption';

ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ Table, TableToolbar, TableCaption, Bold, ... ],
toolbar: [ 'insertTable', ... ],
table: {
contentToolbar: [
'toggleTableCaption'
]
}
} )
.then( ... )
.catch( ... );
```

<info-box info>
Read more about {@link builds/guides/integration/installing-plugins installing plugins}.
</info-box>

## Configuring styling tools

<info-box>
Expand Down Expand Up @@ -460,6 +507,10 @@ The table plugins register the following UI components:
<td>The <code>'tableProperties'</code> button</td>
<td>{@link module:table/tableproperties~TableProperties}</td>
</tr>
<tr>
<td>The <code>'toggleTableCaption'</code> button</td>
<td>{@link module:table/tablecaption~TableCaption}</td>
</tr>
<tr>
<td>The <code>'tableCellProperties'</code> button</td>
<td>{@link module:table/tablecellproperties~TableCellProperties}</td>
Expand Down Expand Up @@ -487,7 +538,7 @@ The {@link module:table/tabletoolbar~TableToolbar} plugin introduces two balloon
<tr>
<td><code>'insertTable'</code></td>
<td>{@link module:table/commands/inserttablecommand~InsertTableCommand}</td>
<td rowspan="15">{@link module:table/table~Table}</td>
<td rowspan="17">{@link module:table/table~Table}</td>
</tr>
<tr>
<td><code>'insertTableColumnLeft'</code></td>
Expand Down Expand Up @@ -553,6 +604,11 @@ The {@link module:table/tabletoolbar~TableToolbar} plugin introduces two balloon
<td><code>'splitTableCellHorizontally'</code></td>
<td>{@link module:table/commands/splitcellcommand~SplitCellCommand}</td>
</tr>
<tr>
<td><code>'toggleTableCaption'</code></td>
<td>{@link module:table/tablecaption/toggletablecaptioncommand~ToggleTableCaptionCommand}</td>
<td>{@link module:table/tablecaption~TableCaption}</td>
</tr>
<tr>
<td><code>'tableBorderColor'</code></td>
<td>{@link module:table/tableproperties/commands/tablebordercolorcommand~TableBorderColorCommand}</td>
Expand Down
4 changes: 3 additions & 1 deletion packages/ckeditor5-table/lang/contexts.json
Original file line number Diff line number Diff line change
Expand Up @@ -56,5 +56,7 @@
"Align table to the right": "The label used by assistive technologies describing a button that aligns the table to the right.",
"The color is invalid. Try \"#FF0000\" or \"rgb(255,0,0)\" or \"red\".": "The localized error string that can be displayed next to color (background, border) fields that have an invalid value",
"The value is invalid. Try \"10px\" or \"2em\" or simply \"2\".": "The localized error string that can be displayed next to length (padding, border width) fields that have an invalid value.",
"Color picker": "The label used by assistive technologies describing a button that opens a color picker, where user can choose a configured color for a certain properties (eg.: background color, color, border-color etc.)."
"Color picker": "The label used by assistive technologies describing a button that opens a color picker, where user can choose a configured color for a certain properties (eg.: background color, color, border-color etc.).",
"Toggle caption off": "The button label for the table toolbar hiding caption attached to the table.",
"Toggle caption on": "The button label for the table toolbar showing caption attached to the table."
}
5 changes: 2 additions & 3 deletions packages/ckeditor5-table/src/commands/insertcolumncommand.js
Original file line number Diff line number Diff line change
Expand Up @@ -52,10 +52,9 @@ export default class InsertColumnCommand extends Command {
*/
refresh() {
const selection = this.editor.model.document.selection;
const isAnyCellSelected = !!getSelectionAffectedTableCells( selection ).length;

const tableParent = selection.getFirstPosition().findAncestor( 'table' );

this.isEnabled = !!tableParent;
this.isEnabled = isAnyCellSelected;
}

/**
Expand Down
5 changes: 2 additions & 3 deletions packages/ckeditor5-table/src/commands/insertrowcommand.js
Original file line number Diff line number Diff line change
Expand Up @@ -52,10 +52,9 @@ export default class InsertRowCommand extends Command {
*/
refresh() {
const selection = this.editor.model.document.selection;
const isAnyCellSelected = !!getSelectionAffectedTableCells( selection ).length;

const tableParent = selection.getFirstPosition().findAncestor( 'table' );

this.isEnabled = !!tableParent;
this.isEnabled = isAnyCellSelected;
}

/**
Expand Down
Loading