Skip to content
This repository has been archived by the owner on Jun 26, 2020. It is now read-only.

Commit

Permalink
Merge pull request #6 from ckeditor/i/5899
Browse files Browse the repository at this point in the history 
Other: Align CSS class names to the changes in the restricted editing feature. See ckeditor/ckeditor5#5899.
  • Loading branch information
@jodator
jodator authored Dec 9, 2019
2 parents 03f1d67 + c4e22b2 commit 3ba00b0
Show file tree
Hide file tree
Showing 7 changed files with 46 additions and 46 deletions.
8 changes: 4 additions & 4 deletions docs/_snippets/features/restricted-editing.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@
</p>

<div id="restricted-editing-editor">
<p>Dear&nbsp;<span class="ck-restricted-editing-exception">Customer Name</span>,</p>
<p>Dear&nbsp;<span class="restricted-editing-exception">Customer Name</span>,</p>

<p>thank you for contacting us.&nbsp;Your case was logged as&nbsp;<span class="ck-restricted-editing-exception">Case ID</span>&nbsp;and is assigned to&nbsp;<span class="ck-restricted-editing-exception">Technician Name</span>. We will attempt to resolve your issue within the next&nbsp;<span class="ck-restricted-editing-exception">Time</span>&nbsp;hours.</p>
<p>thank you for contacting us.&nbsp;Your case was logged as&nbsp;<span class="restricted-editing-exception">Case ID</span>&nbsp;and is assigned to&nbsp;<span class="restricted-editing-exception">Technician Name</span>. We will attempt to resolve your issue within the next&nbsp;<span class="restricted-editing-exception">Time</span>&nbsp;hours.</p>

<p>Should you need any further assistance, do not hesitate to contact our Customer Support Hotline at <span class="ck-restricted-editing-exception">Hotline Number</span>.</p>
<p>Should you need any further assistance, do not hesitate to contact our Customer Support Hotline at <span class="restricted-editing-exception">Hotline Number</span>.</p>

<p>Yours sincerely,<br />
<span class="ck-restricted-editing-exception">Name</span><br />
<span class="restricted-editing-exception">Name</span><br />
Customer Support Team</p>
</div>
4 changes: 2 additions & 2 deletions src/restrictededitingmode/converters.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,12 @@
import Matcher from '@ckeditor/ckeditor5-engine/src/view/matcher';
import { getMarkerAtPosition } from './utils';

const HIGHLIGHT_CLASS = 'ck-restricted-editing-exception_selected';
const HIGHLIGHT_CLASS = 'restricted-editing-exception_selected';

/**
* Adds a visual highlight style to a restricted editing exception the selection is anchored to.
*
* Highlight is turned on by adding the `.ck-restricted-editing-exception_selected` class to the
* Highlight is turned on by adding the `.restricted-editing-exception_selected` class to the
* exception in the view:
*
* * The class is removed before the conversion has started, as callbacks added with the `'highest'` priority
Expand Down
10 changes: 5 additions & 5 deletions src/restrictededitingmodeediting.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import { getMarkerAtPosition, isSelectionInMarker } from './restrictededitingmod
/**
* The Restricted Editing Mode editing feature.
*
* * It introduces the exception marker group that renders to `<spans>` with the `ck-restricted-editing-exception` CSS class.
* * It introduces the exception marker group that renders to `<spans>` with the `restricted-editing-exception` CSS class.
* * It registers the `'goToPreviousRestrictedEditingException'` and `'goToNextRestrictedEditingException'` commands.
* * Also enables highlighting exception markers that are selected.
*
Expand Down Expand Up @@ -115,7 +115,7 @@ export default class RestrictedEditingModeEditing extends Plugin {
editor.conversion.for( 'upcast' ).add( upcastHighlightToMarker( {
view: {
name: 'span',
classes: 'ck-restricted-editing-exception'
classes: 'restricted-editing-exception'
},
model: () => {
markerNumber++; // Starting from restrictedEditingException:1 marker.
Expand All @@ -133,7 +133,7 @@ export default class RestrictedEditingModeEditing extends Plugin {
view: () => {
return {
name: 'span',
classes: 'ck-restricted-editing-exception',
classes: 'restricted-editing-exception',
priority: -10
};
}
Expand All @@ -145,7 +145,7 @@ export default class RestrictedEditingModeEditing extends Plugin {
model: 'restrictedEditingException',
view: ( markerData, viewWriter ) => {
return viewWriter.createUIElement( 'span', {
class: 'ck-restricted-editing-exception ck-restricted-editing-exception_collapsed'
class: 'restricted-editing-exception restricted-editing-exception_collapsed'
} );
}
} );
Expand All @@ -154,7 +154,7 @@ export default class RestrictedEditingModeEditing extends Plugin {
model: 'restrictedEditingException',
view: ( markerData, viewWriter ) => {
return viewWriter.createEmptyElement( 'span', {
class: 'ck-restricted-editing-exception'
class: 'restricted-editing-exception'
} );
}
} );
Expand Down
6 changes: 3 additions & 3 deletions src/standardeditingmodeediting.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import RestrictedEditingExceptionCommand from './restrictededitingexceptioncomma
* The Standard Editing Mode editing feature.
*
* * It introduces the `restrictedEditingException` text attributes that is rendered as
* `<spans>` with the `ck-restricted-editing-exception` CSS class.
* `<spans>` with the `restricted-editing-exception` CSS class.
* * It registers the `'restrictedEditingException'` command.
*
* @extends module:core/plugin~Plugin
Expand All @@ -39,7 +39,7 @@ export default class StandardEditingModeEditing extends Plugin {
model: 'restrictedEditingException',
view: {
name: 'span',
classes: 'ck-restricted-editing-exception'
classes: 'restricted-editing-exception'
}
} );

Expand All @@ -48,7 +48,7 @@ export default class StandardEditingModeEditing extends Plugin {
view: ( modelAttributeValue, viewWriter ) => {
if ( modelAttributeValue ) {
// Make the restricted editing <span> outer-most in the view.
return viewWriter.createAttributeElement( 'span', { class: 'ck-restricted-editing-exception' }, { priority: -10 } );
return viewWriter.createAttributeElement( 'span', { class: 'restricted-editing-exception' }, { priority: -10 } );
}
}
} );
Expand Down
6 changes: 3 additions & 3 deletions tests/manual/restrictedediting.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,14 @@

<div id="editor">
<h2>Heading 1</h2>
<p>Paragraph <span class="ck-restricted-editing-exception">it is editable</span></p>
<p>Paragraph <span class="restricted-editing-exception">it is editable</span></p>
<p><strong>Bold</strong> <i>Italic</i> <a href="foo">Link</a></p>
<ul>
<li>UL List item 1</li>
<li>UL List item 2</li>
</ul>
<ol>
<li><span class="ck-restricted-editing-exception">OL List item 1</span></li>
<li><span class="restricted-editing-exception">OL List item 1</span></li>
<li>OL List item 2</li>
</ol>
<figure class="image image-style-side">
Expand All @@ -24,7 +24,7 @@ <h2>Heading 1</h2>
<p>Quote</p>
<ul>
<li>Quoted UL List item 1</li>
<li>Quoted UL List item <span class="ck-restricted-editing-exception">2</span></li>
<li>Quoted UL List item <span class="restricted-editing-exception">2</span></li>
</ul>
<p>Quote</p>
</blockquote>
Expand Down
50 changes: 25 additions & 25 deletions tests/restrictededitingmodeediting.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,8 +65,8 @@ describe( 'RestrictedEditingModeEditing', () => {
} );

describe( 'upcast', () => {
it( 'should convert <span class="ck-restricted-editing-exception"> to marker', () => {
editor.setData( '<p>foo <span class="ck-restricted-editing-exception">bar</span> baz</p>' );
it( 'should convert <span class="restricted-editing-exception"> to marker', () => {
editor.setData( '<p>foo <span class="restricted-editing-exception">bar</span> baz</p>' );

expect( model.markers.has( 'restrictedEditingException:1' ) ).to.be.true;

Expand All @@ -76,10 +76,10 @@ describe( 'RestrictedEditingModeEditing', () => {
expect( marker.getEnd().path ).to.deep.equal( [ 0, 7 ] );
} );

it( 'should convert multiple <span class="ck-restricted-editing-exception">', () => {
it( 'should convert multiple <span class="restricted-editing-exception">', () => {
editor.setData(
'<p>foo <span class="ck-restricted-editing-exception">bar</span> baz</p>' +
'<p>ABCDEF<span class="ck-restricted-editing-exception">GHIJK</span>LMNOPQRST</p>'
'<p>foo <span class="restricted-editing-exception">bar</span> baz</p>' +
'<p>ABCDEF<span class="restricted-editing-exception">GHIJK</span>LMNOPQRST</p>'
);

expect( model.markers.has( 'restrictedEditingException:1' ) ).to.be.true;
Expand Down Expand Up @@ -113,7 +113,7 @@ describe( 'RestrictedEditingModeEditing', () => {
} );
} );

const expectedView = '<p>foo <span class="ck-restricted-editing-exception">bar</span> baz</p>';
const expectedView = '<p>foo <span class="restricted-editing-exception">bar</span> baz</p>';
expect( editor.getData() ).to.equal( expectedView );
expect( getViewData( editor.editing.view, { withoutSelection: true } ) ).to.equal( expectedView );
} );
Expand All @@ -131,9 +131,9 @@ describe( 'RestrictedEditingModeEditing', () => {
} );
} );

expect( editor.getData() ).to.equal( '<p>foo <span class="ck-restricted-editing-exception"></span>bar baz</p>' );
expect( editor.getData() ).to.equal( '<p>foo <span class="restricted-editing-exception"></span>bar baz</p>' );
expect( getViewData( editor.editing.view, { withoutSelection: true } ) ).to.equal(
'<p>foo <span class="ck-restricted-editing-exception ck-restricted-editing-exception_collapsed"></span>bar baz</p>'
'<p>foo <span class="restricted-editing-exception restricted-editing-exception_collapsed"></span>bar baz</p>'
);
} );

Expand All @@ -152,11 +152,11 @@ describe( 'RestrictedEditingModeEditing', () => {
} );

expect( editor.getData() ).to.equal(
'<p><span class="ck-restricted-editing-exception"><b>foo bar baz</b></span></p>'
'<p><span class="restricted-editing-exception"><b>foo bar baz</b></span></p>'
);
expect( getViewData( editor.editing.view, { withoutSelection: true } ) ).to.equal(
'<p>' +
'<span class="ck-restricted-editing-exception ck-restricted-editing-exception_selected"><b>foo bar baz</b></span>' +
'<span class="restricted-editing-exception restricted-editing-exception_selected"><b>foo bar baz</b></span>' +
'</p>'
);
} );
Expand Down Expand Up @@ -205,12 +205,12 @@ describe( 'RestrictedEditingModeEditing', () => {
} );

expect( editor.getData() ).to.equal(
'<p>foo <span class="ck-restricted-editing-exception">bar</span> baz</p>' +
'<p>xxx <span class="ck-restricted-editing-exception">yRyy</span> zzz</p>' );
'<p>foo <span class="restricted-editing-exception">bar</span> baz</p>' +
'<p>xxx <span class="restricted-editing-exception">yRyy</span> zzz</p>' );

expect( getViewData( editor.editing.view, { withoutSelection: true } ) ).to.equal(
'<p>foo <span class="ck-restricted-editing-exception">bar</span> baz</p>' +
'<p>xxx <span class="ck-restricted-editing-exception ck-restricted-editing-exception_selected">yRyy</span> zzz</p>' );
'<p>foo <span class="restricted-editing-exception">bar</span> baz</p>' +
'<p>xxx <span class="restricted-editing-exception restricted-editing-exception_selected">yRyy</span> zzz</p>' );
} );

it( 'should block user typing outside exception markers', () => {
Expand Down Expand Up @@ -540,7 +540,7 @@ describe( 'RestrictedEditingModeEditing', () => {
} );

expect( getViewData( view ) ).to.equal(
'<p>foo <span class="ck-restricted-editing-exception ck-restricted-editing-exception_selected">b{a}r</span> baz</p>'
'<p>foo <span class="restricted-editing-exception restricted-editing-exception_selected">b{a}r</span> baz</p>'
);
} );

Expand All @@ -559,13 +559,13 @@ describe( 'RestrictedEditingModeEditing', () => {
} );

expect( getViewData( view ) ).to.equal(
'<p>foo <span class="ck-restricted-editing-exception ck-restricted-editing-exception_selected">b{a}r</span> baz</p>'
'<p>foo <span class="restricted-editing-exception restricted-editing-exception_selected">b{a}r</span> baz</p>'
);

model.change( writer => writer.setSelection( model.document.getRoot().getChild( 0 ), 0 ) );

expect( getViewData( view ) ).to.equal(
'<p>{}foo <span class="ck-restricted-editing-exception">bar</span> baz</p>'
'<p>{}foo <span class="restricted-editing-exception">bar</span> baz</p>'
);
} );

Expand All @@ -584,13 +584,13 @@ describe( 'RestrictedEditingModeEditing', () => {
} );

expect( getViewData( view ) ).to.equal(
'<p>{}foo <span class="ck-restricted-editing-exception">bar</span> baz</p>'
'<p>{}foo <span class="restricted-editing-exception">bar</span> baz</p>'
);

model.change( writer => writer.setSelection( model.document.getRoot().getChild( 0 ), 6 ) );

expect( getViewData( view ) ).to.equal(
'<p>foo <span class="ck-restricted-editing-exception ck-restricted-editing-exception_selected">ba{}r</span> baz</p>'
'<p>foo <span class="restricted-editing-exception restricted-editing-exception_selected">ba{}r</span> baz</p>'
);
} );

Expand All @@ -614,7 +614,7 @@ describe( 'RestrictedEditingModeEditing', () => {
} );

expect( getViewData( view ) ).to.equal(
'<p>foo <span class="ck-restricted-editing-exception ck-restricted-editing-exception_selected">bFOO{a}r</span> baz</p>'
'<p>foo <span class="restricted-editing-exception restricted-editing-exception_selected">bFOO{a}r</span> baz</p>'
);
} );

Expand All @@ -640,7 +640,7 @@ describe( 'RestrictedEditingModeEditing', () => {
} );

expect( getViewData( view ) ).to.equal(
'<p>foo <span class="ck-restricted-editing-exception ck-restricted-editing-exception_selected">b{}r</span> baz</p>'
'<p>foo <span class="restricted-editing-exception restricted-editing-exception_selected">b{}r</span> baz</p>'
);
} );

Expand All @@ -667,7 +667,7 @@ describe( 'RestrictedEditingModeEditing', () => {

expect( getViewData( view ) ).to.equal(
'<p>foo ' +
'<span class="ck-restricted-editing-exception ck-restricted-editing-exception_selected">' +
'<span class="restricted-editing-exception restricted-editing-exception_selected">' +
'<strong>b{a</strong>' +
'}r</span>' +
' baz</p>'
Expand Down Expand Up @@ -696,7 +696,7 @@ describe( 'RestrictedEditingModeEditing', () => {
} );

expect( getViewData( view ) ).to.equal(
'<p>foo {<span class="ck-restricted-editing-exception ck-restricted-editing-exception_selected">ba}r</span> baz</p>'
'<p>foo {<span class="restricted-editing-exception restricted-editing-exception_selected">ba}r</span> baz</p>'
);
} );

Expand Down Expand Up @@ -728,7 +728,7 @@ describe( 'RestrictedEditingModeEditing', () => {
expect( getViewData( view ) ).to.equal(
'<p>' +
'<span>foo </span>' +
'<span class="ck-restricted-editing-exception ck-restricted-editing-exception_selected">' +
'<span class="restricted-editing-exception restricted-editing-exception_selected">' +
'<span>b</span>{a}r' +
'</span>' +
' baz</p>'
Expand All @@ -737,7 +737,7 @@ describe( 'RestrictedEditingModeEditing', () => {
model.change( writer => writer.removeMarker( 'fooMarker' ) );

expect( getViewData( view ) ).to.equal(
'<p>foo <span class="ck-restricted-editing-exception ck-restricted-editing-exception_selected">b{a}r</span> baz</p>'
'<p>foo <span class="restricted-editing-exception restricted-editing-exception_selected">b{a}r</span> baz</p>'
);
} );
} );
Expand Down
8 changes: 4 additions & 4 deletions tests/standardeditingmodeediting.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,8 @@ describe( 'StandardEditingModeEditing', () => {

describe( 'conversion', () => {
describe( 'upcast', () => {
it( 'should convert <span class="ck-restricted-editing-exception"> to the model attribute', () => {
editor.setData( '<p>foo <span class="ck-restricted-editing-exception">bar</span> baz</p>' );
it( 'should convert <span class="restricted-editing-exception"> to the model attribute', () => {
editor.setData( '<p>foo <span class="restricted-editing-exception">bar</span> baz</p>' );

expect( getModelData( model, { withoutSelection: true } ) )
.to.equal( '<paragraph>foo <$text restrictedEditingException="true">bar</$text> baz</paragraph>' );
Expand All @@ -62,7 +62,7 @@ describe( 'StandardEditingModeEditing', () => {

describe( 'downcast', () => {
it( 'should convert the model attribute to a <span>', () => {
const expectedView = '<p>foo <span class="ck-restricted-editing-exception">bar</span> baz</p>';
const expectedView = '<p>foo <span class="restricted-editing-exception">bar</span> baz</p>';

setModelData( editor.model,
'<paragraph>foo <$text restrictedEditingException="true">bar</$text> baz</paragraph>'
Expand All @@ -82,7 +82,7 @@ describe( 'StandardEditingModeEditing', () => {
view: 'i'
} );

const expectedView = '<p><span class="ck-restricted-editing-exception"><b>foo</b> <i>bar</i> baz</span></p>';
const expectedView = '<p><span class="restricted-editing-exception"><b>foo</b> <i>bar</i> baz</span></p>';

setModelData( editor.model,
'<paragraph>' +
Expand Down

0 comments on commit 3ba00b0

Please sign in to comment.