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

Commit 511a9d8

Browse files
scofalikscofalik
authored
Merge pull request #96 from ckeditor/t/ckeditor5/488
Other: Align feature class naming to a new scheme.
2 parents 263707b + 2843d17 commit 511a9d8

File tree

7 files changed

+424
-391
lines changed

7 files changed

+424
-391
lines changed

‎src/heading.js

Lines changed: 10 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,17 @@
77
* @module heading/heading
88
*/
99

10-
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
11-
import HeadingEngine from './headingengine';
10+
import HeadingEditing from './headingediting';
11+
import HeadingUI from './headingui';
1212
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
13-
import Model from '@ckeditor/ckeditor5-ui/src/model';
14-
15-
import { createDropdown, addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
16-
17-
import Collection from '@ckeditor/ckeditor5-utils/src/collection';
1813

1914
import '../theme/heading.css';
2015

2116
/**
22-
* The headings feature. It introduces the `headings` drop-down and the `heading1`-`headingN` commands which allow
23-
* to convert paragraphs into headings.
17+
* The headings feature.
18+
*
19+
* It loads the {@link module:heading/headingediting~HeadingEditing heading editing feature}
20+
* and {@link module:heading/headingui~HeadingUI heading UI feature}.
2421
*
2522
* For a detailed overview, check the {@glink features/headings Headings feature documentation}.
2623
*
@@ -31,7 +28,7 @@ export default class Heading extends Plugin {
3128
* @inheritDoc
3229
*/
3330
static get requires() {
34-
return [ Paragraph, HeadingEngine ];
31+
return [ HeadingEditing, HeadingUI ];
3532
}
3633

3734
/**
@@ -40,112 +37,10 @@ export default class Heading extends Plugin {
4037
static get pluginName() {
4138
return 'Heading';
4239
}
43-
44-
/**
45-
* @inheritDoc
46-
*/
47-
init() {
48-
const editor = this.editor;
49-
const t = editor.t;
50-
const options = this._getLocalizedOptions();
51-
const defaultTitle = t( 'Choose heading' );
52-
const dropdownTooltip = t( 'Heading' );
53-
54-
// Register UI component.
55-
editor.ui.componentFactory.add( 'headings', locale => {
56-
const commands = [];
57-
const dropdownItems = new Collection();
58-
59-
for ( const option of options ) {
60-
const command = editor.commands.get( option.model );
61-
const itemModel = new Model( {
62-
commandName: option.model,
63-
label: option.title,
64-
class: option.class
65-
} );
66-
67-
itemModel.bind( 'isActive' ).to( command, 'value' );
68-
69-
// Add the option to the collection.
70-
dropdownItems.add( itemModel );
71-
72-
commands.push( command );
73-
}
74-
75-
const dropdownView = createDropdown( locale );
76-
addListToDropdown( dropdownView, dropdownItems );
77-
78-
dropdownView.buttonView.set( {
79-
isOn: false,
80-
withText: true,
81-
tooltip: dropdownTooltip
82-
} );
83-
84-
dropdownView.extendTemplate( {
85-
attributes: {
86-
class: [
87-
'ck-heading-dropdown'
88-
]
89-
}
90-
} );
91-
92-
dropdownView.bind( 'isEnabled' ).toMany( commands, 'isEnabled', ( ...areEnabled ) => {
93-
return areEnabled.some( isEnabled => isEnabled );
94-
} );
95-
96-
dropdownView.buttonView.bind( 'label' ).toMany( commands, 'value', ( ...areActive ) => {
97-
const index = areActive.findIndex( value => value );
98-
99-
// If none of the commands is active, display default title.
100-
return options[ index ] ? options[ index ].title : defaultTitle;
101-
} );
102-
103-
// Execute command when an item from the dropdown is selected.
104-
this.listenTo( dropdownView, 'execute', evt => {
105-
editor.execute( evt.source.commandName );
106-
editor.editing.view.focus();
107-
} );
108-
109-
return dropdownView;
110-
} );
111-
}
112-
113-
/**
114-
* Returns heading options as defined in `config.heading.options` but processed to consider
115-
* editor localization, i.e. to display {@link module:heading/heading~HeadingOption}
116-
* in the correct language.
117-
*
118-
* Note: The reason behind this method is that there's no way to use {@link module:utils/locale~Locale#t}
119-
* when the user config is defined because the editor does not exist yet.
120-
*
121-
* @private
122-
* @returns {Array.<module:heading/heading~HeadingOption>}.
123-
*/
124-
_getLocalizedOptions() {
125-
const editor = this.editor;
126-
const t = editor.t;
127-
const localizedTitles = {
128-
Paragraph: t( 'Paragraph' ),
129-
'Heading 1': t( 'Heading 1' ),
130-
'Heading 2': t( 'Heading 2' ),
131-
'Heading 3': t( 'Heading 3' )
132-
};
133-
134-
return editor.config.get( 'heading.options' ).map( option => {
135-
const title = localizedTitles[ option.title ];
136-
137-
if ( title && title != option.title ) {
138-
// Clone the option to avoid altering the original `config.heading.options`.
139-
option = Object.assign( {}, option, { title } );
140-
}
141-
142-
return option;
143-
} );
144-
}
14540
}
14641

14742
/**
148-
* The configuration of the heading feature. Introduced by the {@link module:heading/headingengine~HeadingEngine} feature.
43+
* The configuration of the heading feature. Introduced by the {@link module:heading/headingediting~HeadingEditing} feature.
14944
*
15045
* Read more in {@link module:heading/heading~HeadingConfig}.
15146
*
@@ -154,7 +49,7 @@ export default class Heading extends Plugin {
15449

15550
/**
15651
* The configuration of the heading feature.
157-
* The option is used by the {@link module:heading/headingengine~HeadingEngine} feature.
52+
* The option is used by the {@link module:heading/headingediting~HeadingEditing} feature.
15853
*
15954
* ClassicEditor
16055
* .create( {
@@ -191,7 +86,7 @@ export default class Heading extends Plugin {
19186
* Usually, the first option in the headings dropdown is the "Paragraph" option, hence it's also defined on the list.
19287
* However, you don't need to define its view representation because it's handled by
19388
* the {@link module:paragraph/paragraph~Paragraph} feature (which is required by
194-
* the {@link module:heading/headingengine~HeadingEngine} feature).
89+
* the {@link module:heading/headingediting~HeadingEditing} feature).
19590
*
19691
* You can **read more** about configuring heading levels and **see more examples** in
19792
* the {@glink features/headings Headings} guide.

‎src/headingengine.js renamed to ‎src/headingediting.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
*/
55

66
/**
7-
* @module heading/headingengine
7+
* @module heading/headingediting
88
*/
99

1010
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
@@ -16,10 +16,11 @@ const defaultModelElement = 'paragraph';
1616
/**
1717
* The headings engine feature. It handles switching between block formats &ndash; headings and paragraph.
1818
* This class represents the engine part of the heading feature. See also {@link module:heading/heading~Heading}.
19+
* It introduces `heading1`-`headingN` commands which allow to convert paragraphs into headings.
1920
*
2021
* @extends module:core/plugin~Plugin
2122
*/
22-
export default class HeadingEngine extends Plugin {
23+
export default class HeadingEditing extends Plugin {
2324
/**
2425
* @inheritDoc
2526
*/

‎src/headingui.js

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
/**
2+
* @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
3+
* For licensing, see LICENSE.md.
4+
*/
5+
6+
/**
7+
* @module heading/headingui
8+
*/
9+
10+
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
11+
import Model from '@ckeditor/ckeditor5-ui/src/model';
12+
13+
import { createDropdown, addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
14+
15+
import Collection from '@ckeditor/ckeditor5-utils/src/collection';
16+
17+
import '../theme/heading.css';
18+
19+
/**
20+
* The headings UI feature. It introduces the `headings` drop-down.
21+
*
22+
* @extends module:core/plugin~Plugin
23+
*/
24+
export default class HeadingUI extends Plugin {
25+
/**
26+
* @inheritDoc
27+
*/
28+
init() {
29+
const editor = this.editor;
30+
const t = editor.t;
31+
const options = this._getLocalizedOptions();
32+
const defaultTitle = t( 'Choose heading' );
33+
const dropdownTooltip = t( 'Heading' );
34+
35+
// Register UI component.
36+
editor.ui.componentFactory.add( 'headings', locale => {
37+
const commands = [];
38+
const dropdownItems = new Collection();
39+
40+
for ( const option of options ) {
41+
const command = editor.commands.get( option.model );
42+
const itemModel = new Model( {
43+
commandName: option.model,
44+
label: option.title,
45+
class: option.class
46+
} );
47+
48+
itemModel.bind( 'isActive' ).to( command, 'value' );
49+
50+
// Add the option to the collection.
51+
dropdownItems.add( itemModel );
52+
53+
commands.push( command );
54+
}
55+
56+
const dropdownView = createDropdown( locale );
57+
addListToDropdown( dropdownView, dropdownItems );
58+
59+
dropdownView.buttonView.set( {
60+
isOn: false,
61+
withText: true,
62+
tooltip: dropdownTooltip
63+
} );
64+
65+
dropdownView.extendTemplate( {
66+
attributes: {
67+
class: [
68+
'ck-heading-dropdown'
69+
]
70+
}
71+
} );
72+
73+
dropdownView.bind( 'isEnabled' ).toMany( commands, 'isEnabled', ( ...areEnabled ) => {
74+
return areEnabled.some( isEnabled => isEnabled );
75+
} );
76+
77+
dropdownView.buttonView.bind( 'label' ).toMany( commands, 'value', ( ...areActive ) => {
78+
const index = areActive.findIndex( value => value );
79+
80+
// If none of the commands is active, display default title.
81+
return options[ index ] ? options[ index ].title : defaultTitle;
82+
} );
83+
84+
// Execute command when an item from the dropdown is selected.
85+
this.listenTo( dropdownView, 'execute', evt => {
86+
editor.execute( evt.source.commandName );
87+
editor.editing.view.focus();
88+
} );
89+
90+
return dropdownView;
91+
} );
92+
}
93+
94+
/**
95+
* Returns heading options as defined in `config.heading.options` but processed to consider
96+
* editor localization, i.e. to display {@link module:heading/heading~HeadingOption}
97+
* in the correct language.
98+
*
99+
* Note: The reason behind this method is that there's no way to use {@link module:utils/locale~Locale#t}
100+
* when the user config is defined because the editor does not exist yet.
101+
*
102+
* @private
103+
* @returns {Array.<module:heading/heading~HeadingOption>}.
104+
*/
105+
_getLocalizedOptions() {
106+
const editor = this.editor;
107+
const t = editor.t;
108+
const localizedTitles = {
109+
Paragraph: t( 'Paragraph' ),
110+
'Heading 1': t( 'Heading 1' ),
111+
'Heading 2': t( 'Heading 2' ),
112+
'Heading 3': t( 'Heading 3' )
113+
};
114+
115+
return editor.config.get( 'heading.options' ).map( option => {
116+
const title = localizedTitles[ option.title ];
117+
118+
if ( title && title != option.title ) {
119+
// Clone the option to avoid altering the original `config.heading.options`.
120+
option = Object.assign( {}, option, { title } );
121+
}
122+
123+
return option;
124+
} );
125+
}
126+
}

0 commit comments

Comments
 (0)