@ckeditor/ckeditor5-heading 39.0.2 → 40.0.0

package/src/headingbuttonsui.js

@@ -1,89 +1,89 @@
-/**
- * @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/headingbuttonsui
- */
-import { Plugin } from 'ckeditor5/src/core';
-import { ButtonView } from 'ckeditor5/src/ui';
-import { getLocalizedOptions } from './utils';
-import iconHeading1 from '../theme/icons/heading1.svg';
-import iconHeading2 from '../theme/icons/heading2.svg';
-import iconHeading3 from '../theme/icons/heading3.svg';
-import iconHeading4 from '../theme/icons/heading4.svg';
-import iconHeading5 from '../theme/icons/heading5.svg';
-import iconHeading6 from '../theme/icons/heading6.svg';
-const defaultIcons = {
-    heading1: iconHeading1,
-    heading2: iconHeading2,
-    heading3: iconHeading3,
-    heading4: iconHeading4,
-    heading5: iconHeading5,
-    heading6: iconHeading6
-};
-/**
- * The `HeadingButtonsUI` plugin defines a set of UI buttons that can be used instead of the
- * standard drop down component.
- *
- * This feature is not enabled by default by the {@link module:heading/heading~Heading} plugin and needs to be
- * installed manually to the editor configuration.
- *
- * Plugin introduces button UI elements, which names are same as `model` property from {@link module:heading/headingconfig~HeadingOption}.
- *
- * ```ts
- * ClassicEditor
- *   .create( {
- *     plugins: [ ..., Heading, Paragraph, HeadingButtonsUI, ParagraphButtonUI ]
- *     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' }
- *       ]
- *      },
- *      toolbar: [ 'paragraph', 'heading1', 'heading2', 'heading3' ]
- *   } )
- *   .then( ... )
- *   .catch( ... );
- * ```
- *
- * NOTE: The `'paragraph'` button is defined in by the {@link module:paragraph/paragraphbuttonui~ParagraphButtonUI} plugin
- * which needs to be loaded manually as well.
- *
- * It is possible to use custom icons by providing `icon` config option in {@link module:heading/headingconfig~HeadingOption}.
- * For the default configuration standard icons are used.
- */
-export default class HeadingButtonsUI extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    init() {
-        const options = getLocalizedOptions(this.editor);
-        options
-            .filter(item => item.model !== 'paragraph')
-            .map(item => this._createButton(item));
-    }
-    /**
-     * Creates single button view from provided configuration option.
-     */
-    _createButton(option) {
-        const editor = this.editor;
-        editor.ui.componentFactory.add(option.model, locale => {
-            const view = new ButtonView(locale);
-            const command = editor.commands.get('heading');
-            view.label = option.title;
-            view.icon = option.icon || defaultIcons[option.model];
-            view.tooltip = true;
-            view.isToggleable = true;
-            view.bind('isEnabled').to(command);
-            view.bind('isOn').to(command, 'value', value => value == option.model);
-            view.on('execute', () => {
-                editor.execute('heading', { value: option.model });
-                editor.editing.view.focus();
-            });
-            return view;
-        });
-    }
-}
+/**
+ * @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/headingbuttonsui
+ */
+import { Plugin } from 'ckeditor5/src/core';
+import { ButtonView } from 'ckeditor5/src/ui';
+import { getLocalizedOptions } from './utils';
+import iconHeading1 from '../theme/icons/heading1.svg';
+import iconHeading2 from '../theme/icons/heading2.svg';
+import iconHeading3 from '../theme/icons/heading3.svg';
+import iconHeading4 from '../theme/icons/heading4.svg';
+import iconHeading5 from '../theme/icons/heading5.svg';
+import iconHeading6 from '../theme/icons/heading6.svg';
+const defaultIcons = {
+    heading1: iconHeading1,
+    heading2: iconHeading2,
+    heading3: iconHeading3,
+    heading4: iconHeading4,
+    heading5: iconHeading5,
+    heading6: iconHeading6
+};
+/**
+ * The `HeadingButtonsUI` plugin defines a set of UI buttons that can be used instead of the
+ * standard drop down component.
+ *
+ * This feature is not enabled by default by the {@link module:heading/heading~Heading} plugin and needs to be
+ * installed manually to the editor configuration.
+ *
+ * Plugin introduces button UI elements, which names are same as `model` property from {@link module:heading/headingconfig~HeadingOption}.
+ *
+ * ```ts
+ * ClassicEditor
+ *   .create( {
+ *     plugins: [ ..., Heading, Paragraph, HeadingButtonsUI, ParagraphButtonUI ]
+ *     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' }
+ *       ]
+ *      },
+ *      toolbar: [ 'paragraph', 'heading1', 'heading2', 'heading3' ]
+ *   } )
+ *   .then( ... )
+ *   .catch( ... );
+ * ```
+ *
+ * NOTE: The `'paragraph'` button is defined in by the {@link module:paragraph/paragraphbuttonui~ParagraphButtonUI} plugin
+ * which needs to be loaded manually as well.
+ *
+ * It is possible to use custom icons by providing `icon` config option in {@link module:heading/headingconfig~HeadingOption}.
+ * For the default configuration standard icons are used.
+ */
+export default class HeadingButtonsUI extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    init() {
+        const options = getLocalizedOptions(this.editor);
+        options
+            .filter(item => item.model !== 'paragraph')
+            .map(item => this._createButton(item));
+    }
+    /**
+     * Creates single button view from provided configuration option.
+     */
+    _createButton(option) {
+        const editor = this.editor;
+        editor.ui.componentFactory.add(option.model, locale => {
+            const view = new ButtonView(locale);
+            const command = editor.commands.get('heading');
+            view.label = option.title;
+            view.icon = option.icon || defaultIcons[option.model];
+            view.tooltip = true;
+            view.isToggleable = true;
+            view.bind('isEnabled').to(command);
+            view.bind('isOn').to(command, 'value', value => value == option.model);
+            view.on('execute', () => {
+                editor.execute('heading', { value: option.model });
+                editor.editing.view.focus();
+            });
+            return view;
+        });
+    }
+}

package/src/headingcommand.d.ts

@@ -1,48 +1,48 @@
-/**
- * @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/headingcommand
- */
-import { Command, type Editor } from 'ckeditor5/src/core';
-/**
- * The heading command. It is used by the {@link module:heading/heading~Heading heading feature} to apply headings.
- */
-export default class HeadingCommand extends Command {
-    /**
-     * If the selection starts in a heading (which {@link #modelElements is supported by this command})
-     * the value is set to the name of that heading model element.
-     * It is  set to `false` otherwise.
-     *
-     * @observable
-     * @readonly
-     */
-    value: false | string;
-    /**
-     * Set of defined model's elements names that this command support.
-     * See {@link module:heading/headingconfig~HeadingOption}.
-     */
-    readonly modelElements: Array<string>;
-    /**
-     * Creates an instance of the command.
-     *
-     * @param editor Editor instance.
-     * @param modelElements Names of the element which this command can apply in the model.
-     */
-    constructor(editor: Editor, modelElements: Array<string>);
-    /**
-     * @inheritDoc
-     */
-    refresh(): void;
-    /**
-     * Executes the command. Applies the heading to the selected blocks or, if the first selected
-     * block is a heading already, turns selected headings (of this level only) to paragraphs.
-     *
-     * @param options.value Name of the element which this command will apply in the model.
-     * @fires execute
-     */
-    execute(options: {
-        value: string;
-    }): void;
-}
+/**
+ * @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/headingcommand
+ */
+import { Command, type Editor } from 'ckeditor5/src/core';
+/**
+ * The heading command. It is used by the {@link module:heading/heading~Heading heading feature} to apply headings.
+ */
+export default class HeadingCommand extends Command {
+    /**
+     * If the selection starts in a heading (which {@link #modelElements is supported by this command})
+     * the value is set to the name of that heading model element.
+     * It is  set to `false` otherwise.
+     *
+     * @observable
+     * @readonly
+     */
+    value: false | string;
+    /**
+     * Set of defined model's elements names that this command support.
+     * See {@link module:heading/headingconfig~HeadingOption}.
+     */
+    readonly modelElements: Array<string>;
+    /**
+     * Creates an instance of the command.
+     *
+     * @param editor Editor instance.
+     * @param modelElements Names of the element which this command can apply in the model.
+     */
+    constructor(editor: Editor, modelElements: Array<string>);
+    /**
+     * @inheritDoc
+     */
+    refresh(): void;
+    /**
+     * Executes the command. Applies the heading to the selected blocks or, if the first selected
+     * block is a heading already, turns selected headings (of this level only) to paragraphs.
+     *
+     * @param options.value Name of the element which this command will apply in the model.
+     * @fires execute
+     */
+    execute(options: {
+        value: string;
+    }): void;
+}

package/src/headingcommand.js

@@ -1,65 +1,65 @@
-/**
- * @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/headingcommand
- */
-import { Command } from 'ckeditor5/src/core';
-import { first } from 'ckeditor5/src/utils';
-/**
- * The heading command. It is used by the {@link module:heading/heading~Heading heading feature} to apply headings.
- */
-export default class HeadingCommand extends Command {
-    /**
-     * Creates an instance of the command.
-     *
-     * @param editor Editor instance.
-     * @param modelElements Names of the element which this command can apply in the model.
-     */
-    constructor(editor, modelElements) {
-        super(editor);
-        this.modelElements = modelElements;
-    }
-    /**
-     * @inheritDoc
-     */
-    refresh() {
-        const block = first(this.editor.model.document.selection.getSelectedBlocks());
-        this.value = !!block && this.modelElements.includes(block.name) && block.name;
-        this.isEnabled = !!block && this.modelElements.some(heading => checkCanBecomeHeading(block, heading, this.editor.model.schema));
-    }
-    /**
-     * Executes the command. Applies the heading to the selected blocks or, if the first selected
-     * block is a heading already, turns selected headings (of this level only) to paragraphs.
-     *
-     * @param options.value Name of the element which this command will apply in the model.
-     * @fires execute
-     */
-    execute(options) {
-        const model = this.editor.model;
-        const document = model.document;
-        const modelElement = options.value;
-        model.change(writer => {
-            const blocks = Array.from(document.selection.getSelectedBlocks())
-                .filter(block => {
-                return checkCanBecomeHeading(block, modelElement, model.schema);
-            });
-            for (const block of blocks) {
-                if (!block.is('element', modelElement)) {
-                    writer.rename(block, modelElement);
-                }
-            }
-        });
-    }
-}
-/**
- * Checks whether the given block can be replaced by a specific heading.
- *
- * @param block A block to be tested.
- * @param heading Command element name in the model.
- * @param schema The schema of the document.
- */
-function checkCanBecomeHeading(block, heading, schema) {
-    return schema.checkChild(block.parent, heading) && !schema.isObject(block);
-}
+/**
+ * @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/headingcommand
+ */
+import { Command } from 'ckeditor5/src/core';
+import { first } from 'ckeditor5/src/utils';
+/**
+ * The heading command. It is used by the {@link module:heading/heading~Heading heading feature} to apply headings.
+ */
+export default class HeadingCommand extends Command {
+    /**
+     * Creates an instance of the command.
+     *
+     * @param editor Editor instance.
+     * @param modelElements Names of the element which this command can apply in the model.
+     */
+    constructor(editor, modelElements) {
+        super(editor);
+        this.modelElements = modelElements;
+    }
+    /**
+     * @inheritDoc
+     */
+    refresh() {
+        const block = first(this.editor.model.document.selection.getSelectedBlocks());
+        this.value = !!block && this.modelElements.includes(block.name) && block.name;
+        this.isEnabled = !!block && this.modelElements.some(heading => checkCanBecomeHeading(block, heading, this.editor.model.schema));
+    }
+    /**
+     * Executes the command. Applies the heading to the selected blocks or, if the first selected
+     * block is a heading already, turns selected headings (of this level only) to paragraphs.
+     *
+     * @param options.value Name of the element which this command will apply in the model.
+     * @fires execute
+     */
+    execute(options) {
+        const model = this.editor.model;
+        const document = model.document;
+        const modelElement = options.value;
+        model.change(writer => {
+            const blocks = Array.from(document.selection.getSelectedBlocks())
+                .filter(block => {
+                return checkCanBecomeHeading(block, modelElement, model.schema);
+            });
+            for (const block of blocks) {
+                if (!block.is('element', modelElement)) {
+                    writer.rename(block, modelElement);
+                }
+            }
+        });
+    }
+}
+/**
+ * Checks whether the given block can be replaced by a specific heading.
+ *
+ * @param block A block to be tested.
+ * @param heading Command element name in the model.
+ * @param schema The schema of the document.
+ */
+function checkCanBecomeHeading(block, heading, schema) {
+    return schema.checkChild(block.parent, heading) && !schema.isObject(block);
+}

package/src/headingconfig.d.ts

@@ -1,110 +1,110 @@
-/**
- * @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/headingconfig
- */
-import type { ViewElementDefinition } from 'ckeditor5/src/engine';
-/**
- * The configuration of the heading feature.
- * The option is used by the {@link module:heading/headingediting~HeadingEditing} feature.
- *
- * ```ts
- * ClassicEditor
- *   .create( {
- *     heading: ... // Heading feature config.
- *   } )
- *   .then( ... )
- *   .catch( ... );
- * ```
- *
- * See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
- */
-export interface HeadingConfig {
-    /**
-     * The available heading options.
-     *
-     * The default value is:
-     * ```ts
-     * const headingConfig = {
-     *   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' }
-     *   ]
-     * };
-     * ```
-     *
-     * It defines 3 levels of headings. In the editor model they will use `heading1`, `heading2`, and `heading3` elements.
-     * Their respective view elements (so the elements output by the editor) will be: `h2`, `h3`, and `h4`. This means that
-     * if you choose "Heading 1" in the headings dropdown the editor will turn the current block to `<heading1>` in the model
-     * which will result in rendering (and outputting to data) the `<h2>` element.
-     *
-     * The `title` and `class` properties will be used by the `headings` dropdown to render available options.
-     * Usually, the first option in the headings dropdown is the "Paragraph" option, hence it's also defined on the list.
-     * However, you don't need to define its view representation because it's handled by
-     * the {@link module:paragraph/paragraph~Paragraph} feature (which is required by
-     * the {@link module:heading/headingediting~HeadingEditing} feature).
-     *
-     * You can **read more** about configuring heading levels and **see more examples** in
-     * the {@glink features/headings Headings} guide.
-     *
-     * Note: In the model you should always start from `heading1`, regardless of how the headings are represented in the view.
-     * That's assumption is used by features like {@link module:autoformat/autoformat~Autoformat} to know which element
-     * they should use when applying the first level heading.
-     *
-     * The defined headings are also available as values passed to the `'heading'` command under their model names.
-     * For example, the below code will apply `<heading1>` to the current selection:
-     *
-     * ```ts
-     * editor.execute( 'heading', { value: 'heading1' } );
-     * ```
-     */
-    options?: Array<HeadingOption>;
-}
-/**
- * Heading option descriptor.
- */
-export type HeadingOption = HeadingElementOption | HeadingParagraphOption;
-export interface HeadingElementOption {
-    /**
-     * Name of the model element to convert.
-     */
-    model: 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6';
-    /**
-     * Definition of a view element to convert from/to.
-     */
-    view: ViewElementDefinition;
-    /**
-     * The user-readable title of the option.
-     */
-    title: string;
-    /**
-     * The class which will be added to the dropdown item representing this option.
-     */
-    class: string;
-    /**
-     * Icon used by {@link module:heading/headingbuttonsui~HeadingButtonsUI}. It can be omitted when using the default configuration.
-     */
-    icon?: string;
-}
-export interface HeadingParagraphOption {
-    /**
-     * Name of the model element to convert.
-     */
-    model: 'paragraph';
-    /**
-     * The user-readable title of the option.
-     */
-    title: string;
-    /**
-     * The class which will be added to the dropdown item representing this option.
-     * */
-    class: string;
-    /**
-     * Icon used by {@link module:heading/headingbuttonsui~HeadingButtonsUI}. It can be omitted when using the default configuration.
-     */
-    icon?: string;
-}
+/**
+ * @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/headingconfig
+ */
+import type { ViewElementDefinition } from 'ckeditor5/src/engine';
+/**
+ * The configuration of the heading feature.
+ * The option is used by the {@link module:heading/headingediting~HeadingEditing} feature.
+ *
+ * ```ts
+ * ClassicEditor
+ *   .create( {
+ *     heading: ... // Heading feature config.
+ *   } )
+ *   .then( ... )
+ *   .catch( ... );
+ * ```
+ *
+ * See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
+ */
+export interface HeadingConfig {
+    /**
+     * The available heading options.
+     *
+     * The default value is:
+     * ```ts
+     * const headingConfig = {
+     *   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' }
+     *   ]
+     * };
+     * ```
+     *
+     * It defines 3 levels of headings. In the editor model they will use `heading1`, `heading2`, and `heading3` elements.
+     * Their respective view elements (so the elements output by the editor) will be: `h2`, `h3`, and `h4`. This means that
+     * if you choose "Heading 1" in the headings dropdown the editor will turn the current block to `<heading1>` in the model
+     * which will result in rendering (and outputting to data) the `<h2>` element.
+     *
+     * The `title` and `class` properties will be used by the `headings` dropdown to render available options.
+     * Usually, the first option in the headings dropdown is the "Paragraph" option, hence it's also defined on the list.
+     * However, you don't need to define its view representation because it's handled by
+     * the {@link module:paragraph/paragraph~Paragraph} feature (which is required by
+     * the {@link module:heading/headingediting~HeadingEditing} feature).
+     *
+     * You can **read more** about configuring heading levels and **see more examples** in
+     * the {@glink features/headings Headings} guide.
+     *
+     * Note: In the model you should always start from `heading1`, regardless of how the headings are represented in the view.
+     * That's assumption is used by features like {@link module:autoformat/autoformat~Autoformat} to know which element
+     * they should use when applying the first level heading.
+     *
+     * The defined headings are also available as values passed to the `'heading'` command under their model names.
+     * For example, the below code will apply `<heading1>` to the current selection:
+     *
+     * ```ts
+     * editor.execute( 'heading', { value: 'heading1' } );
+     * ```
+     */
+    options?: Array<HeadingOption>;
+}
+/**
+ * Heading option descriptor.
+ */
+export type HeadingOption = HeadingElementOption | HeadingParagraphOption;
+export interface HeadingElementOption {
+    /**
+     * Name of the model element to convert.
+     */
+    model: 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6';
+    /**
+     * Definition of a view element to convert from/to.
+     */
+    view: ViewElementDefinition;
+    /**
+     * The user-readable title of the option.
+     */
+    title: string;
+    /**
+     * The class which will be added to the dropdown item representing this option.
+     */
+    class: string;
+    /**
+     * Icon used by {@link module:heading/headingbuttonsui~HeadingButtonsUI}. It can be omitted when using the default configuration.
+     */
+    icon?: string;
+}
+export interface HeadingParagraphOption {
+    /**
+     * Name of the model element to convert.
+     */
+    model: 'paragraph';
+    /**
+     * The user-readable title of the option.
+     */
+    title: string;
+    /**
+     * The class which will be added to the dropdown item representing this option.
+     * */
+    class: string;
+    /**
+     * Icon used by {@link module:heading/headingbuttonsui~HeadingButtonsUI}. It can be omitted when using the default configuration.
+     */
+    icon?: string;
+}

package/src/headingconfig.js

@@ -1,5 +1,5 @@
-/**
- * @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
- */
-export {};
+/**
+ * @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
+ */
+export {};