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

#7360: Downcast conversion for markers over table cells #7391

Merged
merged 5 commits into from
Jun 9, 2020
Merged

#7360: Downcast conversion for markers over table cells #7391

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e052923
[WIP] Marker conversion for table cells.
scofalik Jun 2, 2020
21d51f8
Added tests for conversion of markers on table cells.
niegowski Jun 5, 2020
8e4c919
Merge branch 'master' into i/7360
niegowski Jun 5, 2020
c232d59
Merge branch 'master' into i/7360
oleq Jun 9, 2020
5977951
Tests: Added a Table feature to the Highlight manual test.
oleq Jun 9, 2020
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
56 changes: 45 additions & 11 deletions packages/ckeditor5-engine/tests/manual/highlight.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,61 @@
<style>
:root {
--ck-manual-test-highlight-yellow: hsla(60, 100%, 50%, 0.5);
--ck-manual-test-highlight-red: hsla(0, 100%, 50%, 0.5);
--ck-manual-test-highlight-blue: hsla(240, 100%, 50%, 0.5);
}

span.highlight-yellow {
background-color: rgba( 255, 255, 0, 0.5 );
background-color: var(--ck-manual-test-highlight-yellow);
}

span.highlight-blue {
background-color: rgba( 0, 0, 255, 0.5 );
background-color: var(--ck-manual-test-highlight-blue);
}

span.highlight-red {
background-color: rgba( 255, 0, 0, 0.5 );
background-color: var(--ck-manual-test-highlight-red);
}

.ck-widget.fancy-widget {
background-color: black;
color: white;
background-color: hsl(0, 0%, 0%);
color: hsl(0, 0%, 100%);
text-align: center;
height: 40px;
line-height: 40px;
}

.ck-widget.fancy-widget.highlight-yellow {
background-color: yellow;
color: black;
background-color: var(--ck-manual-test-highlight-yellow);
color: hsl(0, 0%, 0%);
}

.ck-widget.fancy-widget.highlight-blue {
background-color: blue;
color: black;
background-color: var(--ck-manual-test-highlight-blue);
color: hsl(0, 0%, 0%);
}

.ck-widget.fancy-widget.highlight-red {
background-color: red;
color: black;
background-color: var(--ck-manual-test-highlight-red);
color: hsl(0, 0%, 0%);
}

.table td.highlight-yellow,
.table th.highlight-yellow {
/* !important to override selected editable styles. */
background-color: var(--ck-manual-test-highlight-yellow) !important;
}

.table td.highlight-blue,
.table th.highlight-blue {
/* !important to override selected editable styles. */
background-color: var(--ck-manual-test-highlight-blue) !important;
}

.table td.highlight-red,
.table th.highlight-red {
/* !important to override selected editable styles. */
background-color: var(--ck-manual-test-highlight-red) !important;
}

button {
Expand All @@ -43,6 +67,16 @@
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at diam quis justo imperdiet posuere non eu tortor. Mauris vel magna eu sem hendrerit varius. Ut imperdiet velit ut ante interdum convallis. Vestibulum vitae lacinia mi. </p>
<figure></figure>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at diam quis justo imperdiet posuere non eu tortor. Mauris vel magna eu sem hendrerit varius. Ut imperdiet velit ut ante interdum convallis. Vestibulum vitae lacinia mi. </p>
<table>
<tr>
<td>foo</td>
<td>bar</td>
</tr>
<tr>
<td>baz</td>
<td>qux</td>
</tr>
</table>
</div>
<h2>Markers</h2>
<button id="add-marker-yellow">Set yellow highlight</button><button id="remove-marker-yellow">Remove yellow highlight</button>
Expand Down
5 changes: 3 additions & 2 deletions packages/ckeditor5-engine/tests/manual/highlight.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import List from '@ckeditor/ckeditor5-list/src/list';
import global from '@ckeditor/ckeditor5-utils/src/dom/global';
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import Table from '@ckeditor/ckeditor5-table/src/table';
import Widget from '@ckeditor/ckeditor5-widget/src/widget';
import { toWidget } from '@ckeditor/ckeditor5-widget/src/utils';

Expand Down Expand Up @@ -53,8 +54,8 @@ class FancyWidget extends Plugin {
}

ClassicEditor.create( global.document.querySelector( '#editor' ), {
plugins: [ Enter, Typing, Paragraph, Undo, Heading, Bold, Italic, List, FancyWidget ],
toolbar: [ 'heading', '|', 'undo', 'redo', 'bold', 'italic', 'numberedList', 'bulletedList' ]
plugins: [ Enter, Typing, Paragraph, Undo, Heading, Bold, Italic, List, Table, FancyWidget ],
toolbar: [ 'heading', '|', 'undo', 'redo', 'bold', 'italic', 'numberedList', 'bulletedList', 'insertTable' ]
} )
.then( editor => {
window.editor = editor;
Expand Down
7 changes: 6 additions & 1 deletion packages/ckeditor5-engine/tests/manual/highlight.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,5 +10,10 @@ applied.
1. Red highlight should be visible on the whole content, including the widget.
1. Play with highlights, add and remove them, check if they are applied correctly.

NOTE: Yellow highlight should be visible over red and blue one. Red highlight should be visible over blue one.
### Highlighting table cells

1. You can select the entire table cell and apply a highlight to it.
1. The highlight should change the background of an **entire cell** (not only its content).

NOTE: Yellow highlight should be visible over red and blue one. Red highlight should be visible over blue one.

22 changes: 21 additions & 1 deletion packages/ckeditor5-table/src/converters/downcast.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
*/

import TableWalker from './../tablewalker';
import { toWidget, toWidgetEditable } from '@ckeditor/ckeditor5-widget/src/utils';
import { toWidget, toWidgetEditable, setHighlightHandling } from '@ckeditor/ckeditor5-widget/src/utils';

/**
* Model table element to view table element conversion helper.
Expand Down Expand Up @@ -343,6 +343,13 @@ function renameViewTableCell( tableCell, desiredCellElementName, conversionApi,
const editable = viewWriter.createEditableElement( desiredCellElementName, viewCell.getAttributes() );
renamedCell = toWidgetEditable( editable, viewWriter );

setHighlightHandling(
renamedCell,
viewWriter,
( element, descriptor, writer ) => writer.addClass( normalizeToArray( descriptor.classes ), element ),
( element, descriptor, writer ) => writer.removeClass( normalizeToArray( descriptor.classes ), element )
);

viewWriter.insert( viewWriter.createPositionAfter( viewCell ), renamedCell );
viewWriter.move( viewWriter.createRangeIn( viewCell ), viewWriter.createPositionAt( renamedCell, 0 ) );
viewWriter.remove( viewWriter.createRangeOn( viewCell ) );
Expand All @@ -354,6 +361,10 @@ function renameViewTableCell( tableCell, desiredCellElementName, conversionApi,
conversionApi.mapper.bindElements( tableCell, renamedCell );
}

function normalizeToArray( classes ) {
return Array.isArray( classes ) ? classes : [ classes ];
}

// Renames a table cell element in the view according to its location in the table.
//
// @param {module:table/tablewalker~TableSlot} tableSlot
Expand Down Expand Up @@ -388,6 +399,15 @@ function createViewTableCellElement( tableSlot, tableAttributes, insertPosition,
toWidgetEditable( conversionApi.writer.createEditableElement( cellElementName ), conversionApi.writer ) :
conversionApi.writer.createContainerElement( cellElementName );

if ( asWidget ) {
setHighlightHandling(
cellElement,
conversionApi.writer,
( element, descriptor, writer ) => writer.addClass( normalizeToArray( descriptor.classes ), element ),
( element, descriptor, writer ) => writer.removeClass( normalizeToArray( descriptor.classes ), element )
);
}

const tableCell = tableSlot.cell;

const firstChild = tableCell.getChild( 0 );
Expand Down
Loading