Skip to content

Commit 4d720f4

Browse files
niegowskiniegowski
authored
Merge pull request #18797 from ckeditor/ck/18790
Internal (list): Added a workaround for Safari glitch with list marker styling. Closes #18790.
2 parents b14060a + 5e4b8a0 commit 4d720f4

File tree

7 files changed

+118
-5
lines changed

7 files changed

+118
-5
lines changed

‎packages/ckeditor5-list/src/list/converters.ts‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -349,6 +349,11 @@ export function listItemDowncastConverter(
349349
return;
350350
}
351351

352+
const options = {
353+
...conversionApi.options,
354+
dataPipeline
355+
};
356+
352357
// Use positions mapping instead of mapper.toViewElement( listItem ) to find outermost view element.
353358
// This is for cases when mapping is using inner view element like in the code blocks (pre > code).
354359
const viewElement = findMappedViewElement( listItem, mapper, model )!;
@@ -360,10 +365,10 @@ export function listItemDowncastConverter(
360365
unwrapListItemBlock( viewElement, writer );
361366

362367
// Insert custom item marker.
363-
const viewRange = insertCustomMarkerElements( listItem, viewElement, strategies, writer, { dataPipeline } );
368+
const viewRange = insertCustomMarkerElements( listItem, viewElement, strategies, writer, options );
364369

365370
// Then wrap them with the new list wrappers (UL, OL, LI).
366-
wrapListItemBlock( listItem, viewRange, strategies, writer, conversionApi.options );
371+
wrapListItemBlock( listItem, viewRange, strategies, writer, options );
367372
};
368373
}
369374

‎packages/ckeditor5-list/src/listformatting/listitemboldintegration.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
*/
99

1010
import { Plugin } from 'ckeditor5/src/core.js';
11+
import { env } from 'ckeditor5/src/utils.js';
1112

1213
import { ListEditing } from '../list/listediting.js';
1314
import type { ListFormatting } from '../listformatting.js';
@@ -58,9 +59,14 @@ export class ListItemBoldIntegration extends Plugin {
5859
scope: 'item',
5960
attributeName: 'listItemBold',
6061

61-
setAttributeOnDowncast( writer, value, viewElement ) {
62+
setAttributeOnDowncast( writer, value, viewElement, options ) {
6263
if ( value ) {
6364
writer.addClass( 'ck-list-marker-bold', viewElement );
65+
66+
// See: https://github.com/ckeditor/ckeditor5/issues/18790.
67+
if ( env.isSafari && !( options && options.dataPipeline ) ) {
68+
writer.setStyle( '--ck-content-list-marker-dummy-bold', '0', viewElement );
69+
}
6470
}
6571
}
6672
} );

‎packages/ckeditor5-list/src/listformatting/listitemfontsizeintegration.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99

1010
import { Plugin } from 'ckeditor5/src/core.js';
1111
import type { ViewElement } from 'ckeditor5/src/engine.js';
12+
import { env } from 'ckeditor5/src/utils.js';
1213
import { _normalizeFontSizeOptions } from '@ckeditor/ckeditor5-font';
1314

1415
import { ListEditing } from '../list/listediting.js';
@@ -62,7 +63,7 @@ export class ListItemFontSizeIntegration extends Plugin {
6263
scope: 'item',
6364
attributeName: 'listItemFontSize',
6465

65-
setAttributeOnDowncast( writer, value: string, viewElement ) {
66+
setAttributeOnDowncast( writer, value: string, viewElement, options ) {
6667
if ( value ) {
6768
const fontSizeOption = normalizedFontSizeOptions.find( option => option.model == value );
6869

@@ -73,6 +74,11 @@ export class ListItemFontSizeIntegration extends Plugin {
7374
}
7475
else if ( fontSizeOption.view.classes ) {
7576
writer.addClass( `ck-list-marker-font-size-${ value }`, viewElement );
77+
78+
// See: https://github.com/ckeditor/ckeditor5/issues/18790.
79+
if ( env.isSafari && !( options && options.dataPipeline ) ) {
80+
writer.setStyle( '--ck-content-list-marker-dummy-font-size', '0', viewElement );
81+
}
7682
}
7783
} else {
7884
writer.addClass( 'ck-list-marker-font-size', viewElement );

‎packages/ckeditor5-list/src/listformatting/listitemitalicintegration.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
*/
99

1010
import { Plugin } from 'ckeditor5/src/core.js';
11+
import { env } from 'ckeditor5/src/utils.js';
1112

1213
import { ListEditing } from '../list/listediting.js';
1314
import type { ListFormatting } from '../listformatting.js';
@@ -58,9 +59,14 @@ export class ListItemItalicIntegration extends Plugin {
5859
scope: 'item',
5960
attributeName: 'listItemItalic',
6061

61-
setAttributeOnDowncast( writer, value, viewElement ) {
62+
setAttributeOnDowncast( writer, value, viewElement, options ) {
6263
if ( value ) {
6364
writer.addClass( 'ck-list-marker-italic', viewElement );
65+
66+
// See: https://github.com/ckeditor/ckeditor5/issues/18790.
67+
if ( env.isSafari && !( options && options.dataPipeline ) ) {
68+
writer.setStyle( '--ck-content-list-marker-dummy-italic', '0', viewElement );
69+
}
6470
}
6571
}
6672
} );

‎packages/ckeditor5-list/tests/listformatting/listitemboldintegration.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { ClipboardPipeline } from '@ckeditor/ckeditor5-clipboard/src/clipboardpi
1515
import { testUtils } from '@ckeditor/ckeditor5-core/tests/_utils/utils.js';
1616
import { _setModelData, _getModelData, _stringifyModel } from '@ckeditor/ckeditor5-engine/src/dev-utils/model.js';
1717
import { _getViewData } from '@ckeditor/ckeditor5-engine/src/dev-utils/view.js';
18+
import { env } from 'ckeditor5/src/utils.js';
1819

1920
import { stubUid } from '../list/_utils/uid.js';
2021
import { ListEditing } from '../../src/list/listediting.js';
@@ -336,6 +337,35 @@ describe( 'ListItemBoldIntegration', () => {
336337
'</ul>'
337338
);
338339
} );
340+
341+
// See: https://github.com/ckeditor/ckeditor5/issues/18790.
342+
it( 'should add dummy style for a Safari glitch (in editing pipeline only)', () => {
343+
sinon.stub( env, 'isSafari' ).value( true );
344+
345+
_setModelData( model,
346+
'<paragraph listIndent="0" listItemId="a" listItemBold="true" listType="bulleted">' +
347+
'<$text bold="true">foo</$text>' +
348+
'</paragraph>'
349+
);
350+
351+
expect( _getViewData( view, { withoutSelection: true } ) ).to.equal(
352+
'<ul>' +
353+
'<li class="ck-list-marker-bold" style="--ck-content-list-marker-dummy-bold:0">' +
354+
'<span class="ck-list-bogus-paragraph">' +
355+
'<strong>foo</strong>' +
356+
'</span>' +
357+
'</li>' +
358+
'</ul>'
359+
);
360+
361+
expect( editor.getData( { skipListItemIds: true } ) ).to.equalMarkup(
362+
'<ul>' +
363+
'<li class="ck-list-marker-bold">' +
364+
'<strong>foo</strong>' +
365+
'</li>' +
366+
'</ul>'
367+
);
368+
} );
339369
} );
340370

341371
describe( 'upcast', () => {

‎packages/ckeditor5-list/tests/listformatting/listitemfontsizeintegration.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { ClipboardPipeline } from '@ckeditor/ckeditor5-clipboard';
1515
import { testUtils } from '@ckeditor/ckeditor5-core/tests/_utils/utils.js';
1616
import { _setModelData, _getModelData, _stringifyModel } from '@ckeditor/ckeditor5-engine/src/dev-utils/model.js';
1717
import { _getViewData } from '@ckeditor/ckeditor5-engine/src/dev-utils/view.js';
18+
import { env } from 'ckeditor5/src/utils.js';
1819

1920
import { stubUid } from '../list/_utils/uid.js';
2021
import { ListEditing } from '../../src/list/listediting.js';
@@ -372,6 +373,35 @@ describe( 'ListItemFontSizeIntegration', () => {
372373
'</ul>'
373374
);
374375
} );
376+
377+
// See: https://github.com/ckeditor/ckeditor5/issues/18790.
378+
it( 'should add dummy style for a Safari glitch (in editing pipeline only)', () => {
379+
sinon.stub( env, 'isSafari' ).value( true );
380+
381+
_setModelData( model,
382+
'<paragraph listIndent="0" listItemId="a" listItemFontSize="tiny" listType="bulleted">' +
383+
'<$text fontSize="tiny">foo</$text>' +
384+
'</paragraph>'
385+
);
386+
387+
expect( _getViewData( view, { withoutSelection: true } ) ).to.equal(
388+
'<ul>' +
389+
'<li class="ck-list-marker-font-size-tiny" style="--ck-content-list-marker-dummy-font-size:0">' +
390+
'<span class="ck-list-bogus-paragraph">' +
391+
'<span class="text-tiny">foo</span>' +
392+
'</span>' +
393+
'</li>' +
394+
'</ul>'
395+
);
396+
397+
expect( editor.getData( { skipListItemIds: true } ) ).to.equalMarkup(
398+
'<ul>' +
399+
'<li class="ck-list-marker-font-size-tiny">' +
400+
'<span class="text-tiny">foo</span>' +
401+
'</li>' +
402+
'</ul>'
403+
);
404+
} );
375405
} );
376406

377407
describe( 'upcast', () => {

‎packages/ckeditor5-list/tests/listformatting/listitemitalicintegration.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { ClipboardPipeline } from '@ckeditor/ckeditor5-clipboard';
1515
import { testUtils } from '@ckeditor/ckeditor5-core/tests/_utils/utils.js';
1616
import { _setModelData, _getModelData, _stringifyModel } from '@ckeditor/ckeditor5-engine/src/dev-utils/model.js';
1717
import { _getViewData } from '@ckeditor/ckeditor5-engine/src/dev-utils/view.js';
18+
import { env } from 'ckeditor5/src/utils.js';
1819

1920
import { stubUid } from '../list/_utils/uid.js';
2021
import { ListEditing } from '../../src/list/listediting.js';
@@ -336,6 +337,35 @@ describe( 'ListItemItalicIntegration', () => {
336337
'</ul>'
337338
);
338339
} );
340+
341+
// See: https://github.com/ckeditor/ckeditor5/issues/18790.
342+
it( 'should add dummy style for a Safari glitch (in editing pipeline only)', () => {
343+
sinon.stub( env, 'isSafari' ).value( true );
344+
345+
_setModelData( model,
346+
'<paragraph listIndent="0" listItemId="a" listItemItalic="true" listType="bulleted">' +
347+
'<$text italic="true">foo</$text>' +
348+
'</paragraph>'
349+
);
350+
351+
expect( _getViewData( view, { withoutSelection: true } ) ).to.equal(
352+
'<ul>' +
353+
'<li class="ck-list-marker-italic" style="--ck-content-list-marker-dummy-italic:0">' +
354+
'<span class="ck-list-bogus-paragraph">' +
355+
'<i>foo</i>' +
356+
'</span>' +
357+
'</li>' +
358+
'</ul>'
359+
);
360+
361+
expect( editor.getData( { skipListItemIds: true } ) ).to.equalMarkup(
362+
'<ul>' +
363+
'<li class="ck-list-marker-italic">' +
364+
'<i>foo</i>' +
365+
'</li>' +
366+
'</ul>'
367+
);
368+
} );
339369
} );
340370

341371
describe( 'upcast', () => {

0 commit comments

Comments
 (0)