@ckeditor/ckeditor5-heading 41.3.0 → 41.4.0-alpha.0

package/dist/types/headingconfig.d.ts

@@ -0,0 +1,149 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @license Copyright (c) 2003-2024, 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 { ArrayOrItem } from 'ckeditor5/src/utils.js';
+import type { MatcherPattern, ViewElementDefinition } from 'ckeditor5/src/engine.js';
+/**
+ * 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 | HeadingCustomElementOption;
+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;
+    /**
+     * An array with all matched elements that the view-to-model conversion should also accept.
+     */
+    upcastAlso?: ArrayOrItem<ViewElementDefinition | MatcherPattern>;
+}
+export interface HeadingCustomElementOption {
+    /**
+     * Name of the model element to convert.
+     */
+    model: `heading${string}`;
+    /**
+     * 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;
+    /**
+     * An array with all matched elements that the view-to-model conversion should also accept.
+     */
+    upcastAlso?: ArrayOrItem<ViewElementDefinition | MatcherPattern>;
+}
+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;
+    /**
+     * An array with all matched elements that the view-to-model conversion should also accept.
+     */
+    upcastAlso?: ArrayOrItem<ViewElementDefinition | MatcherPattern>;
+}

package/dist/types/headingediting.d.ts

@@ -0,0 +1,46 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @license Copyright (c) 2003-2024, 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, type Editor } from 'ckeditor5/src/core.js';
+import { Paragraph } from 'ckeditor5/src/paragraph.js';
+/**
+ * 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.
+ */
+export default class HeadingEditing extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "HeadingEditing";
+    /**
+     * @inheritDoc
+     */
+    constructor(editor: Editor);
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof Paragraph];
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+    /**
+     * @inheritDoc
+     */
+    afterInit(): void;
+    /**
+     * Adds default conversion for `h1` -> `heading1` with a low priority.
+     *
+     * @param editor Editor instance on which to add the `h1` conversion.
+     */
+    private _addDefaultH1Conversion;
+}

package/dist/types/headingui.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @license Copyright (c) 2003-2024, 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.js';
+import '../theme/heading.css';
+/**
+ * The headings UI feature. It introduces the `headings` dropdown.
+ */
+export default class HeadingUI extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "HeadingUI";
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+}

package/dist/types/index.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @license Copyright (c) 2003-2024, 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.js';
+export type { HeadingOption, HeadingElementOption } from './headingconfig.js';
+export { default as HeadingEditing } from './headingediting.js';
+export { default as HeadingUI } from './headingui.js';
+export { default as HeadingButtonsUI } from './headingbuttonsui.js';
+export { default as Title, type TitleConfig } from './title.js';
+export type { HeadingConfig } from './headingconfig.js';
+export type { default as HeadingCommand } from './headingcommand.js';
+import './augmentation.js';

package/dist/types/title.d.ts

@@ -0,0 +1,119 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module heading/title
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+/**
+ * The Title plugin.
+ *
+ * It splits the document into `Title` and `Body` sections.
+ */
+export default class Title extends Plugin {
+    /**
+     * A reference to an empty paragraph in the body
+     * created when there is no element in the body for the placeholder purposes.
+     */
+    private _bodyPlaceholder;
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "Title";
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly ["Paragraph"];
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+    /**
+     * Returns the title of the document. Note that because this plugin does not allow any formatting inside
+     * the title element, the output of this method will be a plain text, with no HTML tags.
+     *
+     * It is not recommended to use this method together with features that insert markers to the
+     * data output, like comments or track changes features. If such markers start in the title and end in the
+     * body, the result of this method might be incorrect.
+     *
+     * @param options Additional configuration passed to the conversion process.
+     * See {@link module:engine/controller/datacontroller~DataController#get `DataController#get`}.
+     * @returns The title of the document.
+     */
+    getTitle(options?: Record<string, unknown>): string;
+    /**
+     * Returns the body of the document.
+     *
+     * Note that it is not recommended to use this method together with features that insert markers to the
+     * data output, like comments or track changes features. If such markers start in the title and end in the
+     * body, the result of this method might be incorrect.
+     *
+     * @param options Additional configuration passed to the conversion process.
+     * See {@link module:engine/controller/datacontroller~DataController#get `DataController#get`}.
+     * @returns The body of the document.
+     */
+    getBody(options?: Record<string, unknown>): string;
+    /**
+     * Returns the `title` element when it is in the document. Returns `undefined` otherwise.
+     */
+    private _getTitleElement;
+    /**
+     * Model post-fixer callback that ensures that `title` has only one `title-content` child.
+     * All additional children should be moved after the `title` element and renamed to a paragraph.
+     */
+    private _fixTitleContent;
+    /**
+     * Model post-fixer callback that creates a title element when it is missing,
+     * takes care of the correct position of it and removes additional title elements.
+     */
+    private _fixTitleElement;
+    /**
+     * Model post-fixer callback that adds an empty paragraph at the end of the document
+     * when it is needed for the placeholder purposes.
+     */
+    private _fixBodyElement;
+    /**
+     * Model post-fixer callback that removes a paragraph from the end of the document
+     * if it was created for the placeholder purposes and is not needed anymore.
+     */
+    private _fixExtraParagraph;
+    /**
+     * Attaches the `Title` and `Body` placeholders to the title and/or content.
+     */
+    private _attachPlaceholders;
+    /**
+     * Creates navigation between the title and body sections using <kbd>Tab</kbd> and <kbd>Shift</kbd>+<kbd>Tab</kbd> keys.
+     */
+    private _attachTabPressHandling;
+}
+/**
+ * The configuration of the {@link module:heading/title~Title title feature}.
+ *
+ * ```ts
+ * ClassicEditor
+ *   .create( document.querySelector( '#editor' ), {
+ *     plugins: [ Title, ... ],
+ *     title: {
+ *       placeholder: 'My custom placeholder for the title'
+ *     },
+ *     placeholder: 'My custom placeholder for the body'
+ *   } )
+ *   .then( ... )
+ *   .catch( ... );
+ * ```
+ *
+ * See {@link module:core/editor/editorconfig~EditorConfig all editor configuration options}.
+ */
+export interface TitleConfig {
+    /**
+     * Defines a custom value of the placeholder for the title field.
+     *
+     * Read more in {@link module:heading/title~TitleConfig}.
+     */
+    placeholder?: string;
+}

package/dist/types/utils.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module heading/utils
+ */
+import type { Editor } from 'ckeditor5/src/core.js';
+import type { HeadingOption } from './headingconfig.js';
+/**
+ * Returns heading options as defined in `config.heading.options` but processed to consider
+ * the editor localization, i.e. to display {@link module:heading/headingconfig~HeadingOption}
+ * in the correct language.
+ *
+ * Note: The reason behind this method is that there is no way to use {@link module:utils/locale~Locale#t}
+ * when the user configuration is defined because the editor does not exist yet.
+ */
+export declare function getLocalizedOptions(editor: Editor): Array<HeadingOption>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-heading",
-  "version": "41.3.0",
+  "version": "41.4.0-alpha.0",
   "description": "Headings feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -13,7 +13,7 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "ckeditor5": "41.3.0"
+    "ckeditor5": "41.4.0-alpha.0"
   },
   "author": "CKSource (http://cksource.com/)",
   "license": "GPL-2.0-or-later",
@@ -25,6 +25,7 @@
     "directory": "packages/ckeditor5-heading"
   },
   "files": [
+    "dist",
     "lang",
     "src/**/*.js",
     "src/**/*.d.ts",