@ckeditor/ckeditor5-heading 35.4.0 → 36.0.0

package/src/headingediting.js

@@ -1,122 +1,101 @@
 /**
- * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * @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
  */
-
 /**
  * @module heading/headingediting
  */
-
 import { Plugin } from 'ckeditor5/src/core';
 import { Paragraph } from 'ckeditor5/src/paragraph';
 import { priorities } from 'ckeditor5/src/utils';
-
 import HeadingCommand from './headingcommand';
-
 const defaultModelElement = 'paragraph';
-
 /**
  * The headings engine feature. It handles switching between block formats – headings and paragraph.
  * This class represents the engine part of the heading feature. See also {@link module:heading/heading~Heading}.
  * It introduces `heading1`-`headingN` commands which allow to convert paragraphs into headings.
- *
- * @extends module:core/plugin~Plugin
  */
 export default class HeadingEditing extends Plugin {
-	/**
-	 * @inheritDoc
-	 */
-	static get pluginName() {
-		return 'HeadingEditing';
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	constructor( editor ) {
-		super( editor );
-
-		editor.config.define( 'heading', {
-			options: [
-				{ model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
-				{ model: 'heading1', view: 'h2', title: 'Heading 1', class: 'ck-heading_heading1' },
-				{ model: 'heading2', view: 'h3', title: 'Heading 2', class: 'ck-heading_heading2' },
-				{ model: 'heading3', view: 'h4', title: 'Heading 3', class: 'ck-heading_heading3' }
-			]
-		} );
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	static get requires() {
-		return [ Paragraph ];
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	init() {
-		const editor = this.editor;
-		const options = editor.config.get( 'heading.options' );
-
-		const modelElements = [];
-
-		for ( const option of options ) {
-			// Skip paragraph - it is defined in required Paragraph feature.
-			if ( option.model !== defaultModelElement ) {
-				// Schema.
-				editor.model.schema.register( option.model, {
-					inheritAllFrom: '$block'
-				} );
-
-				editor.conversion.elementToElement( option );
-
-				modelElements.push( option.model );
-			}
-		}
-
-		this._addDefaultH1Conversion( editor );
-
-		// Register the heading command for this option.
-		editor.commands.add( 'heading', new HeadingCommand( editor, modelElements ) );
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	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 enterCommand = editor.commands.get( 'enter' );
-		const options = editor.config.get( 'heading.options' );
-
-		if ( enterCommand ) {
-			this.listenTo( enterCommand, 'afterExecute', ( evt, data ) => {
-				const positionParent = editor.model.document.selection.getFirstPosition().parent;
-				const isHeading = options.some( option => positionParent.is( 'element', option.model ) );
-
-				if ( isHeading && !positionParent.is( 'element', defaultModelElement ) && positionParent.childCount === 0 ) {
-					data.writer.rename( positionParent, defaultModelElement );
-				}
-			} );
-		}
-	}
-
-	/**
-	 * Adds default conversion for `h1` -> `heading1` with a low priority.
-	 *
-	 * @private
-	 * @param {module:core/editor/editor~Editor} editor Editor instance on which to add the `h1` conversion.
-	 */
-	_addDefaultH1Conversion( editor ) {
-		editor.conversion.for( 'upcast' ).elementToElement( {
-			model: 'heading1',
-			view: 'h1',
-			// With a `low` priority, `paragraph` plugin autoparagraphing mechanism is executed. Make sure
-			// this listener is called before it. If not, `h1` will be transformed into a paragraph.
-			converterPriority: priorities.get( 'low' ) + 1
-		} );
-	}
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'HeadingEditing';
+    }
+    /**
+     * @inheritDoc
+     */
+    constructor(editor) {
+        super(editor);
+        editor.config.define('heading', {
+            options: [
+                { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
+                { model: 'heading1', view: 'h2', title: 'Heading 1', class: 'ck-heading_heading1' },
+                { model: 'heading2', view: 'h3', title: 'Heading 2', class: 'ck-heading_heading2' },
+                { model: 'heading3', view: 'h4', title: 'Heading 3', class: 'ck-heading_heading3' }
+            ]
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [Paragraph];
+    }
+    /**
+     * @inheritDoc
+     */
+    init() {
+        const editor = this.editor;
+        const options = editor.config.get('heading.options');
+        const modelElements = [];
+        for (const option of options) {
+            // Skip paragraph - it is defined in required Paragraph feature.
+            if (option.model === 'paragraph') {
+                continue;
+            }
+            // Schema.
+            editor.model.schema.register(option.model, {
+                inheritAllFrom: '$block'
+            });
+            editor.conversion.elementToElement(option);
+            modelElements.push(option.model);
+        }
+        this._addDefaultH1Conversion(editor);
+        // Register the heading command for this option.
+        editor.commands.add('heading', new HeadingCommand(editor, modelElements));
+    }
+    /**
+     * @inheritDoc
+     */
+    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 enterCommand = editor.commands.get('enter');
+        const options = editor.config.get('heading.options');
+        if (enterCommand) {
+            this.listenTo(enterCommand, 'afterExecute', (evt, data) => {
+                const positionParent = editor.model.document.selection.getFirstPosition().parent;
+                const isHeading = options.some(option => positionParent.is('element', option.model));
+                if (isHeading && !positionParent.is('element', defaultModelElement) && positionParent.childCount === 0) {
+                    data.writer.rename(positionParent, defaultModelElement);
+                }
+            });
+        }
+    }
+    /**
+     * Adds default conversion for `h1` -> `heading1` with a low priority.
+     *
+     * @param editor Editor instance on which to add the `h1` conversion.
+     */
+    _addDefaultH1Conversion(editor) {
+        editor.conversion.for('upcast').elementToElement({
+            model: 'heading1',
+            view: 'h1',
+            // With a `low` priority, `paragraph` plugin autoparagraphing mechanism is executed. Make sure
+            // this listener is called before it. If not, `h1` will be transformed into a paragraph.
+            converterPriority: priorities.get('low') + 1
+        });
+    }
 }

package/src/headingui.js

@@ -1,115 +1,101 @@
 /**
- * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * @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
  */
-
 /**
  * @module heading/headingui
  */
-
 import { Plugin } from 'ckeditor5/src/core';
 import { Model, createDropdown, addListToDropdown } from 'ckeditor5/src/ui';
 import { Collection } from 'ckeditor5/src/utils';
-
 import { getLocalizedOptions } from './utils';
-
 import '../theme/heading.css';
-
 /**
  * The headings UI feature. It introduces the `headings` dropdown.
- *
- * @extends module:core/plugin~Plugin
  */
 export default class HeadingUI extends Plugin {
-	/**
-	 * @inheritDoc
-	 */
-	static get pluginName() {
-		return 'HeadingUI';
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	init() {
-		const editor = this.editor;
-		const t = editor.t;
-		const options = getLocalizedOptions( editor );
-		const defaultTitle = t( 'Choose heading' );
-		const dropdownTooltip = t( 'Heading' );
-
-		// Register UI component.
-		editor.ui.componentFactory.add( 'heading', locale => {
-			const titles = {};
-			const itemDefinitions = new Collection();
-
-			const headingCommand = editor.commands.get( 'heading' );
-			const paragraphCommand = editor.commands.get( 'paragraph' );
-
-			const commands = [ headingCommand ];
-
-			for ( const option of options ) {
-				const def = {
-					type: 'button',
-					model: new Model( {
-						label: option.title,
-						class: option.class,
-						withText: true
-					} )
-				};
-
-				if ( option.model === 'paragraph' ) {
-					def.model.bind( 'isOn' ).to( paragraphCommand, 'value' );
-					def.model.set( 'commandName', 'paragraph' );
-					commands.push( paragraphCommand );
-				} else {
-					def.model.bind( 'isOn' ).to( headingCommand, 'value', value => value === option.model );
-					def.model.set( {
-						commandName: 'heading',
-						commandValue: option.model
-					} );
-				}
-
-				// Add the option to the collection.
-				itemDefinitions.add( def );
-
-				titles[ option.model ] = option.title;
-			}
-
-			const dropdownView = createDropdown( locale );
-			addListToDropdown( dropdownView, itemDefinitions );
-
-			dropdownView.buttonView.set( {
-				isOn: false,
-				withText: true,
-				tooltip: dropdownTooltip
-			} );
-
-			dropdownView.extendTemplate( {
-				attributes: {
-					class: [
-						'ck-heading-dropdown'
-					]
-				}
-			} );
-
-			dropdownView.bind( 'isEnabled' ).toMany( commands, 'isEnabled', ( ...areEnabled ) => {
-				return areEnabled.some( isEnabled => isEnabled );
-			} );
-
-			dropdownView.buttonView.bind( 'label' ).to( headingCommand, 'value', paragraphCommand, 'value', ( value, para ) => {
-				const whichModel = value || para && 'paragraph';
-				// If none of the commands is active, display default title.
-				return titles[ whichModel ] ? titles[ whichModel ] : defaultTitle;
-			} );
-
-			// Execute command when an item from the dropdown is selected.
-			this.listenTo( dropdownView, 'execute', evt => {
-				editor.execute( evt.source.commandName, evt.source.commandValue ? { value: evt.source.commandValue } : undefined );
-				editor.editing.view.focus();
-			} );
-
-			return dropdownView;
-		} );
-	}
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'HeadingUI';
+    }
+    /**
+     * @inheritDoc
+     */
+    init() {
+        const editor = this.editor;
+        const t = editor.t;
+        const options = getLocalizedOptions(editor);
+        const defaultTitle = t('Choose heading');
+        const dropdownTooltip = t('Heading');
+        // Register UI component.
+        editor.ui.componentFactory.add('heading', locale => {
+            const titles = {};
+            const itemDefinitions = new Collection();
+            const headingCommand = editor.commands.get('heading');
+            const paragraphCommand = editor.commands.get('paragraph');
+            const commands = [headingCommand];
+            for (const option of options) {
+                const def = {
+                    type: 'button',
+                    model: new Model({
+                        label: option.title,
+                        class: option.class,
+                        withText: true
+                    })
+                };
+                if (option.model === 'paragraph') {
+                    def.model.bind('isOn').to(paragraphCommand, 'value');
+                    def.model.set('commandName', 'paragraph');
+                    commands.push(paragraphCommand);
+                }
+                else {
+                    def.model.bind('isOn').to(headingCommand, 'value', value => value === option.model);
+                    def.model.set({
+                        commandName: 'heading',
+                        commandValue: option.model
+                    });
+                }
+                // Add the option to the collection.
+                itemDefinitions.add(def);
+                titles[option.model] = option.title;
+            }
+            const dropdownView = createDropdown(locale);
+            addListToDropdown(dropdownView, itemDefinitions);
+            dropdownView.buttonView.set({
+                isOn: false,
+                withText: true,
+                tooltip: dropdownTooltip
+            });
+            dropdownView.extendTemplate({
+                attributes: {
+                    class: [
+                        'ck-heading-dropdown'
+                    ]
+                }
+            });
+            dropdownView.bind('isEnabled').toMany(commands, 'isEnabled', (...areEnabled) => {
+                return areEnabled.some(isEnabled => isEnabled);
+            });
+            dropdownView.buttonView.bind('label').to(headingCommand, 'value', paragraphCommand, 'value', (value, para) => {
+                const whichModel = value || para && 'paragraph';
+                if (typeof whichModel === 'boolean') {
+                    return defaultTitle;
+                }
+                // If none of the commands is active, display default title.
+                if (!titles[whichModel]) {
+                    return defaultTitle;
+                }
+                return titles[whichModel];
+            });
+            // Execute command when an item from the dropdown is selected.
+            this.listenTo(dropdownView, 'execute', evt => {
+                const { commandName, commandValue } = evt.source;
+                editor.execute(commandName, commandValue ? { value: commandValue } : undefined);
+                editor.editing.view.focus();
+            });
+            return dropdownView;
+        });
+    }
 }

package/src/index.js

@@ -1,12 +1,10 @@
 /**
- * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * @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
  */
-
 /**
  * @module heading
  */
-
 export { default as Heading } from './heading';
 export { default as HeadingEditing } from './headingediting';
 export { default as HeadingUI } from './headingui';