Skip to content

Commit

Permalink
Merge pull request #13949 from ckeditor/ck/11580-removeformat-should-…
Browse files Browse the repository at this point in the history
…remove-inline-styles

Fix (style): Remove Format feature should also remove styles. Closes #11580.
  • Loading branch information
arkflpc authored Apr 25, 2023
2 parents 4fd91e5 + 4ef3641 commit ca52253
Show file tree
Hide file tree
Showing 3 changed files with 147 additions and 23 deletions.
63 changes: 42 additions & 21 deletions packages/ckeditor5-html-support/src/schemadefinitions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -519,98 +519,112 @@ export default {
model: 'htmlAcronym',
view: 'acronym',
attributeProperties: {
copyOnEnter: true
copyOnEnter: true,
isFormatting: true
}
},
{
model: 'htmlTt',
view: 'tt',
attributeProperties: {
copyOnEnter: true
copyOnEnter: true,
isFormatting: true
}
},
{
model: 'htmlFont',
view: 'font',
attributeProperties: {
copyOnEnter: true
copyOnEnter: true,
isFormatting: true
}
},
{
model: 'htmlTime',
view: 'time',
attributeProperties: {
copyOnEnter: true
copyOnEnter: true,
isFormatting: true
}
},
{
model: 'htmlVar',
view: 'var',
attributeProperties: {
copyOnEnter: true
copyOnEnter: true,
isFormatting: true
}
},
{
model: 'htmlBig',
view: 'big',
attributeProperties: {
copyOnEnter: true
copyOnEnter: true,
isFormatting: true
}
},
{
model: 'htmlSmall',
view: 'small',
attributeProperties: {
copyOnEnter: true
copyOnEnter: true,
isFormatting: true
}
},
{
model: 'htmlSamp',
view: 'samp',
attributeProperties: {
copyOnEnter: true
copyOnEnter: true,
isFormatting: true
}
},
{
model: 'htmlQ',
view: 'q',
attributeProperties: {
copyOnEnter: true
copyOnEnter: true,
isFormatting: true
}
},
{
model: 'htmlOutput',
view: 'output',
attributeProperties: {
copyOnEnter: true
copyOnEnter: true,
isFormatting: true
}
},
{
model: 'htmlKbd',
view: 'kbd',
attributeProperties: {
copyOnEnter: true
copyOnEnter: true,
isFormatting: true
}
},
{
model: 'htmlBdi',
view: 'bdi',
attributeProperties: {
copyOnEnter: true
copyOnEnter: true,
isFormatting: true
}
},
{
model: 'htmlBdo',
view: 'bdo',
attributeProperties: {
copyOnEnter: true
copyOnEnter: true,
isFormatting: true
}
},
{
model: 'htmlAbbr',
view: 'abbr',
attributeProperties: {
copyOnEnter: true
copyOnEnter: true,
isFormatting: true
}
},
{
Expand Down Expand Up @@ -673,15 +687,17 @@ export default {
view: 'del',
coupledAttribute: 'strikethrough',
attributeProperties: {
copyOnEnter: true
copyOnEnter: true,
isFormatting: true
}
},
// TODO According to HTML-spec can behave as div-like element, although CKE4 only handles it as an inline element.
{
model: 'htmlIns',
view: 'ins',
attributeProperties: {
copyOnEnter: true
copyOnEnter: true,
isFormatting: true
}
},
{
Expand Down Expand Up @@ -724,35 +740,40 @@ export default {
model: 'htmlMark',
view: 'mark',
attributeProperties: {
copyOnEnter: true
copyOnEnter: true,
isFormatting: true
}
},
{
model: 'htmlSpan',
view: 'span',
attributeProperties: {
copyOnEnter: true
copyOnEnter: true,
isFormatting: true
}
},
{
model: 'htmlCite',
view: 'cite',
attributeProperties: {
copyOnEnter: true
copyOnEnter: true,
isFormatting: true
}
},
{
model: 'htmlLabel',
view: 'label',
attributeProperties: {
copyOnEnter: true
copyOnEnter: true,
isFormatting: true
}
},
{
model: 'htmlDfn',
view: 'dfn',
attributeProperties: {
copyOnEnter: true
copyOnEnter: true,
isFormatting: true
}
},

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,11 @@ Doing that will spare the users the pain of manually removing formatting every t

## Integrating with editor features

To make it possible for the remove formatting feature to work with your custom content, you must first mark it in the {@link framework/architecture/editing-engine#schema schema}. All you need to do is set the `isFormatting` property on your custom {@link framework/architecture/editing-engine#text-attributes text attribute}.
In order for the remove formatting feature to work with custom content, you need to update the {@link framework/architecture/editing-engine#schema schema} by setting the `isFormatting` property on the custom {@link framework/architecture/editing-engine#text-attributes text attribute}.

For instance, if you want the feature to remove {@link features/link links} as well (not supported by default), you need to create a {@link installation/getting-started/configuration#adding-simple-standalone-features simple plugin} that will extend the schema and tell the editor that the `linkHref` text attribute produced by the link feature is a formatting attribute:
This is already done for most inline elements supported by the {@link features/general-html-support General HTML Support} plugin and its derivatives such as the {@link features/style Style} plugin.

By default, formatting is not removed from the {@link features/link link} elements. To remove formatting from them as well, you need to create a {@link installation/getting-started/configuration#adding-simple-standalone-features plugin} that extends the schema and tells the editor that the `linkHref` text attribute produced by the link feature is a formatting attribute:

```js
// A simple plugin that extends the remove format feature to consider links.
Expand Down
101 changes: 101 additions & 0 deletions packages/ckeditor5-style/tests/tickets/11580.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
/**
* @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/

/* global document */

import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Heading from '@ckeditor/ckeditor5-heading/src/heading';
import GeneralHtmlSupport from '@ckeditor/ckeditor5-html-support/src/generalhtmlsupport';
import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock';
import RemoveFormat from '@ckeditor/ckeditor5-remove-format/src/removeformat';
import { setData, getData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';

import Style from '../../src/style';

describe( 'Integration with RemoveFormat', () => {
let editor, editorElement, model;

beforeEach( async () => {
editorElement = document.createElement( 'div' );
document.body.appendChild( editorElement );

editor = await ClassicTestEditor.create( editorElement, {
plugins: [
Paragraph,
Heading,
CodeBlock,
BlockQuote,
GeneralHtmlSupport,
Style,
RemoveFormat
],
style: {
definitions: [
{
name: 'Marker',
element: 'span',
classes: [ 'marker' ]
},
{
name: 'Typewriter',
element: 'span',
classes: [ 'typewriter' ]
},
{
name: 'Deleted text',
element: 'span',
classes: [ 'deleted' ]
},
{
name: 'Multiple classes',
element: 'span',
classes: [ 'class-one', 'class-two' ]
},
{
name: 'Vibrant code',
element: 'code',
classes: [ 'vibrant-code' ]
}
]
},
htmlSupport: {
allow: [
{
name: /^.*$/,
styles: true,
attributes: true,
classes: true
}
]
}
} );

model = editor.model;
} );

afterEach( async () => {
editorElement.remove();
await editor.destroy();
} );

it( 'can remove inline styles', () => {
setData(
model,
'<paragraph>[' +
'<$text htmlSpan=\'{"classes":["marker"]}\'>aaa</$text>' +
'<$text htmlSpan=\'{"classes":["deleted"]}\'>bbb</$text>' +
'<$text htmlSpan=\'{"classes":["typewriter"]}\'>ccc</$text>' +
']</paragraph>'
);

editor.execute( 'removeFormat' );

expect( getData( model, { withoutSelection: true } ) ).to.equal(
'<paragraph>aaabbbccc</paragraph>'
);
} );
} );

0 comments on commit ca52253

Please sign in to comment.