@ckeditor/ckeditor5-highlight 40.0.0 → 40.1.0

package/src/highlightconfig.d.ts

@@ -1,171 +1,171 @@
-/**
- * @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 highlight/highlightconfig
- */
-/**
- * The highlight option descriptor. See {@link module:highlight/highlightconfig~HighlightConfig} to learn more.
- *
- * ```ts
- * {
- * 	model: 'pinkMarker',
- * 	class: 'marker-pink',
- * 	title: 'Pink Marker',
- * 	color: 'var(--ck-highlight-marker-pink)',
- * 	type: 'marker'
- * }
- * ```
- */
-export interface HighlightOption {
-    /**
-     * The user-readable title of the option.
-     */
-    title: string;
-    /**
-     * The unique attribute value in the model.
-     */
-    model: string;
-    /**
-     * The CSS `var()` used for the highlighter. The color is used in the user interface to represent the highlighter.
-     * There is a possibility to use the default color format like rgb, hex or hsl, but you need to care about the color of `<mark>`
-     * by adding CSS classes definition.
-     */
-    color: string;
-    /**
-     * The CSS class used on the `<mark>` element in the view. It should match the `color` setting.
-     */
-    class: string;
-    /**
-     * The type of highlighter:
-     *
-     * * `'marker'` &ndash; Uses the `color` as the `background-color` style,
-     * * `'pen'` &ndash; Uses the `color` as the font `color` style.
-     */
-    type: 'marker' | 'pen';
-}
-/**
- * The configuration of the {@link module:highlight/highlight~Highlight highlight feature}.
- * ```ts
- * ClassicEditor
- * 	.create( editorElement, {
- * 		highlight:  ... // Highlight feature configuration.
- * 	} )
- * 	.then( ... )
- * 	.catch( ... );
- * ```
- * See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
- */
-export interface HighlightConfig {
-    /**
-     * The available highlight options. The default value is:
-     * ```ts
-     * options: [
-     * 	{
-     * 		model: 'yellowMarker',
-     * 		class: 'marker-yellow',
-     * 		title: 'Yellow marker',
-     * 		color: 'var(--ck-highlight-marker-yellow)',
-     * 		type: 'marker'
-     * 	},
-     * 	{
-     * 		model: 'greenMarker',
-     * 		class: 'marker-green',
-     * 		title: 'Green marker',
-     * 		color: 'var(--ck-highlight-marker-green)',
-     * 		type: 'marker'
-     * 	},
-     * 	{
-     * 		model: 'pinkMarker',
-     * 		class: 'marker-pink',
-     * 		title: 'Pink marker',
-     * 		color: 'var(--ck-highlight-marker-pink)',
-     * 		type: 'marker'
-     * 	},
-     * 	{
-     * 		model: 'blueMarker',
-     * 		class: 'marker-blue',
-     * 		title: 'Blue marker',
-     * 		color: 'var(--ck-highlight-marker-blue)',
-     * 		type: 'marker'
-     * 	},
-     * 	{
-     * 		model: 'redPen',
-     * 		class: 'pen-red',
-     * 		title: 'Red pen',
-     * 		color: 'var(--ck-highlight-pen-red)',
-     * 		type: 'pen'
-     * 	},
-     * 	{
-     * 		model: 'greenPen',
-     * 		class: 'pen-green',
-     * 		title: 'Green pen',
-     * 		color: 'var(--ck-highlight-pen-green)',
-     * 		type: 'pen'
-     * 	}
-     * ]
-     * ```
-     *
-     * There are two types of highlighters available:
-     *
-     * * `'marker'` &ndash; Rendered as a `<mark>` element, styled with the `background-color`.
-     * * `'pen'` &ndash; Rendered as a `<mark>` element, styled with the font `color`.
-     *
-     * **Note**: The highlight feature provides a stylesheet with the CSS classes and corresponding colors defined
-     * as CSS variables.
-     *
-     * ```css
-     * :root {
-     * 	--ck-highlight-marker-yellow: #fdfd77;
-     * 	--ck-highlight-marker-green: #63f963;
-     * 	--ck-highlight-marker-pink: #fc7999;
-     * 	--ck-highlight-marker-blue: #72cdfd;
-     * 	--ck-highlight-pen-red: #e91313;
-     * 	--ck-highlight-pen-green: #118800;
-     * }
-     *
-     * .marker-yellow { ... }
-     * .marker-green { ... }
-     * .marker-pink { ... }
-     * .marker-blue { ... }
-     * .pen-red { ... }
-     * .pen-green { ... }
-     * ```
-     *
-     * It is possible to define the `color` property directly as `rgba(R, G, B, A)`,
-     * `#RRGGBB[AA]` or `hsla(H, S, L, A)`. In such situation, the color will **only** apply to the UI of
-     * the editor and the `<mark>` elements in the content must be styled by custom classes provided by
-     * a dedicated stylesheet.
-     *
-     * **Note**: It is recommended for the `color` property to correspond to the class in the content
-     * stylesheet because it represents the highlighter in the user interface of the editor.
-     *
-     * ```ts
-     * ClassicEditor
-     * 	.create( editorElement, {
-     * 		highlight: {
-     * 			options: [
-     * 				{
-     * 					model: 'pinkMarker',
-     * 					class: 'marker-pink',
-     * 					title: 'Pink Marker',
-     * 					color: 'var(--ck-highlight-marker-pink)',
-     * 					type: 'marker'
-     * 				},
-     * 				{
-     * 					model: 'redPen',
-     * 					class: 'pen-red',
-     * 					title: 'Red Pen',
-     * 					color: 'var(--ck-highlight-pen-red)',
-     * 					type: 'pen'
-     * 				},
-     * 			]
-     * 		}
-     * } )
-     * .then( ... )
-     * .catch( ... );
-     * ```
-     */
-    options: Array<HighlightOption>;
-}
+/**
+ * @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 highlight/highlightconfig
+ */
+/**
+ * The highlight option descriptor. See {@link module:highlight/highlightconfig~HighlightConfig} to learn more.
+ *
+ * ```ts
+ * {
+ * 	model: 'pinkMarker',
+ * 	class: 'marker-pink',
+ * 	title: 'Pink Marker',
+ * 	color: 'var(--ck-highlight-marker-pink)',
+ * 	type: 'marker'
+ * }
+ * ```
+ */
+export interface HighlightOption {
+    /**
+     * The user-readable title of the option.
+     */
+    title: string;
+    /**
+     * The unique attribute value in the model.
+     */
+    model: string;
+    /**
+     * The CSS `var()` used for the highlighter. The color is used in the user interface to represent the highlighter.
+     * There is a possibility to use the default color format like rgb, hex or hsl, but you need to care about the color of `<mark>`
+     * by adding CSS classes definition.
+     */
+    color: string;
+    /**
+     * The CSS class used on the `<mark>` element in the view. It should match the `color` setting.
+     */
+    class: string;
+    /**
+     * The type of highlighter:
+     *
+     * * `'marker'` &ndash; Uses the `color` as the `background-color` style,
+     * * `'pen'` &ndash; Uses the `color` as the font `color` style.
+     */
+    type: 'marker' | 'pen';
+}
+/**
+ * The configuration of the {@link module:highlight/highlight~Highlight highlight feature}.
+ * ```ts
+ * ClassicEditor
+ * 	.create( editorElement, {
+ * 		highlight:  ... // Highlight feature configuration.
+ * 	} )
+ * 	.then( ... )
+ * 	.catch( ... );
+ * ```
+ * See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
+ */
+export interface HighlightConfig {
+    /**
+     * The available highlight options. The default value is:
+     * ```ts
+     * options: [
+     * 	{
+     * 		model: 'yellowMarker',
+     * 		class: 'marker-yellow',
+     * 		title: 'Yellow marker',
+     * 		color: 'var(--ck-highlight-marker-yellow)',
+     * 		type: 'marker'
+     * 	},
+     * 	{
+     * 		model: 'greenMarker',
+     * 		class: 'marker-green',
+     * 		title: 'Green marker',
+     * 		color: 'var(--ck-highlight-marker-green)',
+     * 		type: 'marker'
+     * 	},
+     * 	{
+     * 		model: 'pinkMarker',
+     * 		class: 'marker-pink',
+     * 		title: 'Pink marker',
+     * 		color: 'var(--ck-highlight-marker-pink)',
+     * 		type: 'marker'
+     * 	},
+     * 	{
+     * 		model: 'blueMarker',
+     * 		class: 'marker-blue',
+     * 		title: 'Blue marker',
+     * 		color: 'var(--ck-highlight-marker-blue)',
+     * 		type: 'marker'
+     * 	},
+     * 	{
+     * 		model: 'redPen',
+     * 		class: 'pen-red',
+     * 		title: 'Red pen',
+     * 		color: 'var(--ck-highlight-pen-red)',
+     * 		type: 'pen'
+     * 	},
+     * 	{
+     * 		model: 'greenPen',
+     * 		class: 'pen-green',
+     * 		title: 'Green pen',
+     * 		color: 'var(--ck-highlight-pen-green)',
+     * 		type: 'pen'
+     * 	}
+     * ]
+     * ```
+     *
+     * There are two types of highlighters available:
+     *
+     * * `'marker'` &ndash; Rendered as a `<mark>` element, styled with the `background-color`.
+     * * `'pen'` &ndash; Rendered as a `<mark>` element, styled with the font `color`.
+     *
+     * **Note**: The highlight feature provides a stylesheet with the CSS classes and corresponding colors defined
+     * as CSS variables.
+     *
+     * ```css
+     * :root {
+     * 	--ck-highlight-marker-yellow: #fdfd77;
+     * 	--ck-highlight-marker-green: #63f963;
+     * 	--ck-highlight-marker-pink: #fc7999;
+     * 	--ck-highlight-marker-blue: #72cdfd;
+     * 	--ck-highlight-pen-red: #e91313;
+     * 	--ck-highlight-pen-green: #118800;
+     * }
+     *
+     * .marker-yellow { ... }
+     * .marker-green { ... }
+     * .marker-pink { ... }
+     * .marker-blue { ... }
+     * .pen-red { ... }
+     * .pen-green { ... }
+     * ```
+     *
+     * It is possible to define the `color` property directly as `rgba(R, G, B, A)`,
+     * `#RRGGBB[AA]` or `hsla(H, S, L, A)`. In such situation, the color will **only** apply to the UI of
+     * the editor and the `<mark>` elements in the content must be styled by custom classes provided by
+     * a dedicated stylesheet.
+     *
+     * **Note**: It is recommended for the `color` property to correspond to the class in the content
+     * stylesheet because it represents the highlighter in the user interface of the editor.
+     *
+     * ```ts
+     * ClassicEditor
+     * 	.create( editorElement, {
+     * 		highlight: {
+     * 			options: [
+     * 				{
+     * 					model: 'pinkMarker',
+     * 					class: 'marker-pink',
+     * 					title: 'Pink Marker',
+     * 					color: 'var(--ck-highlight-marker-pink)',
+     * 					type: 'marker'
+     * 				},
+     * 				{
+     * 					model: 'redPen',
+     * 					class: 'pen-red',
+     * 					title: 'Red Pen',
+     * 					color: 'var(--ck-highlight-pen-red)',
+     * 					type: 'pen'
+     * 				},
+     * 			]
+     * 		}
+     * } )
+     * .then( ... )
+     * .catch( ... );
+     * ```
+     */
+    options: Array<HighlightOption>;
+}

package/src/highlightconfig.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 {};

package/src/highlightediting.d.ts

@@ -1,28 +1,28 @@
-/**
- * @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 highlight/highlightediting
- */
-import { Plugin, type Editor } from 'ckeditor5/src/core';
-/**
- * The highlight editing feature. It introduces the {@link module:highlight/highlightcommand~HighlightCommand command} and the `highlight`
- * attribute in the {@link module:engine/model/model~Model model} which renders in the {@link module:engine/view/view view}
- * as a `<mark>` element with a `class` attribute (`<mark class="marker-green">...</mark>`) depending
- * on the {@link module:highlight/highlightconfig~HighlightConfig configuration}.
- */
-export default class HighlightEditing extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get pluginName(): "HighlightEditing";
-    /**
-     * @inheritDoc
-     */
-    constructor(editor: Editor);
-    /**
-     * @inheritDoc
-     */
-    init(): 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 highlight/highlightediting
+ */
+import { Plugin, type Editor } from 'ckeditor5/src/core';
+/**
+ * The highlight editing feature. It introduces the {@link module:highlight/highlightcommand~HighlightCommand command} and the `highlight`
+ * attribute in the {@link module:engine/model/model~Model model} which renders in the {@link module:engine/view/view view}
+ * as a `<mark>` element with a `class` attribute (`<mark class="marker-green">...</mark>`) depending
+ * on the {@link module:highlight/highlightconfig~HighlightConfig configuration}.
+ */
+export default class HighlightEditing extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "HighlightEditing";
+    /**
+     * @inheritDoc
+     */
+    constructor(editor: Editor);
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+}

package/src/highlightediting.js

@@ -1,109 +1,109 @@
-/**
- * @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 highlight/highlightediting
- */
-import { Plugin } from 'ckeditor5/src/core';
-import HighlightCommand from './highlightcommand';
-/**
- * The highlight editing feature. It introduces the {@link module:highlight/highlightcommand~HighlightCommand command} and the `highlight`
- * attribute in the {@link module:engine/model/model~Model model} which renders in the {@link module:engine/view/view view}
- * as a `<mark>` element with a `class` attribute (`<mark class="marker-green">...</mark>`) depending
- * on the {@link module:highlight/highlightconfig~HighlightConfig configuration}.
- */
-export default class HighlightEditing extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'HighlightEditing';
-    }
-    /**
-     * @inheritDoc
-     */
-    constructor(editor) {
-        super(editor);
-        editor.config.define('highlight', {
-            options: [
-                {
-                    model: 'yellowMarker',
-                    class: 'marker-yellow',
-                    title: 'Yellow marker',
-                    color: 'var(--ck-highlight-marker-yellow)',
-                    type: 'marker'
-                },
-                {
-                    model: 'greenMarker',
-                    class: 'marker-green',
-                    title: 'Green marker',
-                    color: 'var(--ck-highlight-marker-green)',
-                    type: 'marker'
-                },
-                {
-                    model: 'pinkMarker',
-                    class: 'marker-pink',
-                    title: 'Pink marker',
-                    color: 'var(--ck-highlight-marker-pink)',
-                    type: 'marker'
-                },
-                {
-                    model: 'blueMarker',
-                    class: 'marker-blue',
-                    title: 'Blue marker',
-                    color: 'var(--ck-highlight-marker-blue)',
-                    type: 'marker'
-                },
-                {
-                    model: 'redPen',
-                    class: 'pen-red',
-                    title: 'Red pen',
-                    color: 'var(--ck-highlight-pen-red)',
-                    type: 'pen'
-                },
-                {
-                    model: 'greenPen',
-                    class: 'pen-green',
-                    title: 'Green pen',
-                    color: 'var(--ck-highlight-pen-green)',
-                    type: 'pen'
-                }
-            ]
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    init() {
-        const editor = this.editor;
-        // Allow highlight attribute on text nodes.
-        editor.model.schema.extend('$text', { allowAttributes: 'highlight' });
-        const options = editor.config.get('highlight.options');
-        // Set-up the two-way conversion.
-        editor.conversion.attributeToElement(_buildDefinition(options));
-        editor.commands.add('highlight', new HighlightCommand(editor));
-    }
-}
-/**
- * Converts the options array to a converter definition.
- *
- * @param options An array with configured options.
- */
-function _buildDefinition(options) {
-    const definition = {
-        model: {
-            key: 'highlight',
-            values: []
-        },
-        view: {}
-    };
-    for (const option of options) {
-        definition.model.values.push(option.model);
-        definition.view[option.model] = {
-            name: 'mark',
-            classes: option.class
-        };
-    }
-    return definition;
-}
+/**
+ * @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 highlight/highlightediting
+ */
+import { Plugin } from 'ckeditor5/src/core';
+import HighlightCommand from './highlightcommand';
+/**
+ * The highlight editing feature. It introduces the {@link module:highlight/highlightcommand~HighlightCommand command} and the `highlight`
+ * attribute in the {@link module:engine/model/model~Model model} which renders in the {@link module:engine/view/view view}
+ * as a `<mark>` element with a `class` attribute (`<mark class="marker-green">...</mark>`) depending
+ * on the {@link module:highlight/highlightconfig~HighlightConfig configuration}.
+ */
+export default class HighlightEditing extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'HighlightEditing';
+    }
+    /**
+     * @inheritDoc
+     */
+    constructor(editor) {
+        super(editor);
+        editor.config.define('highlight', {
+            options: [
+                {
+                    model: 'yellowMarker',
+                    class: 'marker-yellow',
+                    title: 'Yellow marker',
+                    color: 'var(--ck-highlight-marker-yellow)',
+                    type: 'marker'
+                },
+                {
+                    model: 'greenMarker',
+                    class: 'marker-green',
+                    title: 'Green marker',
+                    color: 'var(--ck-highlight-marker-green)',
+                    type: 'marker'
+                },
+                {
+                    model: 'pinkMarker',
+                    class: 'marker-pink',
+                    title: 'Pink marker',
+                    color: 'var(--ck-highlight-marker-pink)',
+                    type: 'marker'
+                },
+                {
+                    model: 'blueMarker',
+                    class: 'marker-blue',
+                    title: 'Blue marker',
+                    color: 'var(--ck-highlight-marker-blue)',
+                    type: 'marker'
+                },
+                {
+                    model: 'redPen',
+                    class: 'pen-red',
+                    title: 'Red pen',
+                    color: 'var(--ck-highlight-pen-red)',
+                    type: 'pen'
+                },
+                {
+                    model: 'greenPen',
+                    class: 'pen-green',
+                    title: 'Green pen',
+                    color: 'var(--ck-highlight-pen-green)',
+                    type: 'pen'
+                }
+            ]
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    init() {
+        const editor = this.editor;
+        // Allow highlight attribute on text nodes.
+        editor.model.schema.extend('$text', { allowAttributes: 'highlight' });
+        const options = editor.config.get('highlight.options');
+        // Set-up the two-way conversion.
+        editor.conversion.attributeToElement(_buildDefinition(options));
+        editor.commands.add('highlight', new HighlightCommand(editor));
+    }
+}
+/**
+ * Converts the options array to a converter definition.
+ *
+ * @param options An array with configured options.
+ */
+function _buildDefinition(options) {
+    const definition = {
+        model: {
+            key: 'highlight',
+            values: []
+        },
+        view: {}
+    };
+    for (const option of options) {
+        definition.model.values.push(option.model);
+        definition.view[option.model] = {
+            name: 'mark',
+            classes: option.class
+        };
+    }
+    return definition;
+}