|
|
@@ -26,28 +26,12 @@ export default class HeadingEngine extends Plugin {
|
|
|
constructor( editor ) {
|
|
|
super( editor );
|
|
|
|
|
|
- const t = editor.t;
|
|
|
-
|
|
|
- /**
|
|
|
- * A set of default localized labels for `config.heading.options`.
|
|
|
- *
|
|
|
- * @readonly
|
|
|
- * @protected
|
|
|
- * @member {Object} #_localizedFormatLabels
|
|
|
- */
|
|
|
- const labels = this._localizedFormatLabels = {
|
|
|
- Paragraph: t( 'Paragraph' ),
|
|
|
- 'Heading 1': t( 'Heading 1' ),
|
|
|
- 'Heading 2': t( 'Heading 2' ),
|
|
|
- 'Heading 3': t( 'Heading 3' )
|
|
|
- };
|
|
|
-
|
|
|
editor.config.define( 'heading', {
|
|
|
options: [
|
|
|
- { id: 'paragraph', element: 'p', label: labels.Paragraph },
|
|
|
- { id: 'heading1', element: 'h2', label: labels[ 'Heading 1' ] },
|
|
|
- { id: 'heading2', element: 'h3', label: labels[ 'Heading 2' ] },
|
|
|
- { id: 'heading3', element: 'h4', label: labels[ 'Heading 3' ] }
|
|
|
+ { id: 'paragraph', element: 'p', label: 'Paragraph' },
|
|
|
+ { id: 'heading1', element: 'h2', label: 'Heading 1' },
|
|
|
+ { id: 'heading2', element: 'h3', label: 'Heading 2' },
|
|
|
+ { id: 'heading3', element: 'h4', label: 'Heading 3' }
|
|
|
],
|
|
|
defaultOptionId: 'paragraph'
|
|
|
} );
|
|
|
@@ -67,7 +51,7 @@ export default class HeadingEngine extends Plugin {
|
|
|
const editor = this.editor;
|
|
|
const data = editor.data;
|
|
|
const editing = editor.editing;
|
|
|
- const options = this._options;
|
|
|
+ const options = this._getLocalizedOptions();
|
|
|
const defaultOptionId = editor.config.get( 'heading.defaultOptionId' );
|
|
|
|
|
|
for ( let option of options ) {
|
|
|
@@ -99,11 +83,10 @@ export default class HeadingEngine extends Plugin {
|
|
|
afterInit() {
|
|
|
// If the enter command is added to the editor, alter its behavior.
|
|
|
// Enter at the end of a heading element should create a paragraph.
|
|
|
-
|
|
|
const editor = this.editor;
|
|
|
const command = editor.commands.get( 'heading' );
|
|
|
const enterCommand = editor.commands.get( 'enter' );
|
|
|
- const options = this._options;
|
|
|
+ const options = this._getLocalizedOptions();
|
|
|
|
|
|
if ( enterCommand ) {
|
|
|
this.listenTo( enterCommand, 'afterExecute', ( evt, data ) => {
|
|
|
@@ -119,29 +102,48 @@ export default class HeadingEngine extends Plugin {
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
- * A set of options as defined in `config.heading.options`, considering
|
|
|
- * editor localization.
|
|
|
+ * Returns heading options as defined in `config.heading.options` but processed to consider
|
|
|
+ * editor localization, i.e. to display {@link module:heading/headingcommand~HeadingOption#label}
|
|
|
+ * in the correct language.
|
|
|
+ *
|
|
|
+ * Note: The reason behind this method is that there's no way to use {@link utils/locale~Locale#t}
|
|
|
+ * when the user config is defined because the editor does not exist yet.
|
|
|
*
|
|
|
- * @readonly
|
|
|
- * @protected
|
|
|
- * @type {Array.<module:heading/headingcommand~HeadingOption>}
|
|
|
+ * @private
|
|
|
+ * @returns {Array.<module:heading/headingcommand~HeadingOption>}.
|
|
|
*/
|
|
|
- get _options() {
|
|
|
+ _getLocalizedOptions() {
|
|
|
+ if ( this._cachedLocalizedOptions ) {
|
|
|
+ return this._cachedLocalizedOptions;
|
|
|
+ }
|
|
|
+
|
|
|
const editor = this.editor;
|
|
|
+ const t = editor.t;
|
|
|
+ const localizedLabels = {
|
|
|
+ Paragraph: t( 'Paragraph' ),
|
|
|
+ 'Heading 1': t( 'Heading 1' ),
|
|
|
+ 'Heading 2': t( 'Heading 2' ),
|
|
|
+ 'Heading 3': t( 'Heading 3' )
|
|
|
+ };
|
|
|
|
|
|
- return editor.config.get( 'heading.options' )
|
|
|
+ /**
|
|
|
+ * Cached localized version of `config.heading.options` generated by
|
|
|
+ * {@link module:heading/headingengine~HeadingEngine#_localizedOptions}.
|
|
|
+ *
|
|
|
+ * @private
|
|
|
+ * @readonly
|
|
|
+ * @member {Array.<module:heading/headingcommand~HeadingOption>} #_cachedLocalizedOptions
|
|
|
+ */
|
|
|
+ return ( this._cachedLocalizedOptions = editor.config.get( 'heading.options' )
|
|
|
.map( option => {
|
|
|
- // Translate `label`s in the config to with current locale using `#_localizedFormatLabels` because
|
|
|
- // there's no way to use t() when the config is defined i.e. when the editor does not
|
|
|
- // exist yet.
|
|
|
- if ( this._localizedFormatLabels[ option.label ] ) {
|
|
|
+ if ( localizedLabels[ option.label ] ) {
|
|
|
// Clone the option to avoid altering the original `config.heading.options`.
|
|
|
option = Object.assign( {}, option, {
|
|
|
- label: this._localizedFormatLabels[ option.label ]
|
|
|
+ label: localizedLabels[ option.label ]
|
|
|
} );
|
|
|
}
|
|
|
|
|
|
return option;
|
|
|
- } );
|
|
|
+ } ) );
|
|
|
}
|
|
|
}
|