@ckeditor/ckeditor5-highlight 38.1.0 → 38.1.1

package/src/highlightcommand.js

@@ -1,91 +1,91 @@
-/**
- * @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/highlightcommand
- */
-import { Command } from 'ckeditor5/src/core';
-/**
- * The highlight command. It is used by the {@link module:highlight/highlightediting~HighlightEditing highlight feature}
- * to apply the text highlighting.
- *
- * ```ts
- * editor.execute( 'highlight', { value: 'greenMarker' } );
- * ```
- *
- * **Note**: Executing the command without a value removes the attribute from the model. If the selection is collapsed
- * inside a text with the highlight attribute, the command will remove the attribute from the entire range
- * of that text.
- */
-export default class HighlightCommand extends Command {
-    /**
-     * @inheritDoc
-     */
-    refresh() {
-        const model = this.editor.model;
-        const doc = model.document;
-        this.value = doc.selection.getAttribute('highlight');
-        this.isEnabled = model.schema.checkAttributeInSelection(doc.selection, 'highlight');
-    }
-    /**
-     * Executes the command.
-     *
-     * @param options Options for the executed command.
-     * @param options.value The value to apply.
-     *
-     * @fires execute
-     */
-    execute(options = {}) {
-        const model = this.editor.model;
-        const document = model.document;
-        const selection = document.selection;
-        const highlighter = options.value;
-        model.change(writer => {
-            if (selection.isCollapsed) {
-                const position = selection.getFirstPosition();
-                // When selection is inside text with `highlight` attribute.
-                if (selection.hasAttribute('highlight')) {
-                    // Find the full highlighted range.
-                    const isSameHighlight = (value) => {
-                        return value.item.hasAttribute('highlight') && value.item.getAttribute('highlight') === this.value;
-                    };
-                    const highlightStart = position.getLastMatchingPosition(isSameHighlight, { direction: 'backward' });
-                    const highlightEnd = position.getLastMatchingPosition(isSameHighlight);
-                    const highlightRange = writer.createRange(highlightStart, highlightEnd);
-                    // Then depending on current value...
-                    if (!highlighter || this.value === highlighter) {
-                        // ...remove attribute when passing highlighter different then current or executing "eraser".
-                        // If we're at the end of the highlighted range, we don't want to remove highlight of the range.
-                        if (!position.isEqual(highlightEnd)) {
-                            writer.removeAttribute('highlight', highlightRange);
-                        }
-                        writer.removeSelectionAttribute('highlight');
-                    }
-                    else {
-                        // ...update `highlight` value.
-                        // If we're at the end of the highlighted range, we don't want to change the highlight of the range.
-                        if (!position.isEqual(highlightEnd)) {
-                            writer.setAttribute('highlight', highlighter, highlightRange);
-                        }
-                        writer.setSelectionAttribute('highlight', highlighter);
-                    }
-                }
-                else if (highlighter) {
-                    writer.setSelectionAttribute('highlight', highlighter);
-                }
-            }
-            else {
-                const ranges = model.schema.getValidRanges(selection.getRanges(), 'highlight');
-                for (const range of ranges) {
-                    if (highlighter) {
-                        writer.setAttribute('highlight', highlighter, range);
-                    }
-                    else {
-                        writer.removeAttribute('highlight', range);
-                    }
-                }
-            }
-        });
-    }
-}
+/**
+ * @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/highlightcommand
+ */
+import { Command } from 'ckeditor5/src/core';
+/**
+ * The highlight command. It is used by the {@link module:highlight/highlightediting~HighlightEditing highlight feature}
+ * to apply the text highlighting.
+ *
+ * ```ts
+ * editor.execute( 'highlight', { value: 'greenMarker' } );
+ * ```
+ *
+ * **Note**: Executing the command without a value removes the attribute from the model. If the selection is collapsed
+ * inside a text with the highlight attribute, the command will remove the attribute from the entire range
+ * of that text.
+ */
+export default class HighlightCommand extends Command {
+    /**
+     * @inheritDoc
+     */
+    refresh() {
+        const model = this.editor.model;
+        const doc = model.document;
+        this.value = doc.selection.getAttribute('highlight');
+        this.isEnabled = model.schema.checkAttributeInSelection(doc.selection, 'highlight');
+    }
+    /**
+     * Executes the command.
+     *
+     * @param options Options for the executed command.
+     * @param options.value The value to apply.
+     *
+     * @fires execute
+     */
+    execute(options = {}) {
+        const model = this.editor.model;
+        const document = model.document;
+        const selection = document.selection;
+        const highlighter = options.value;
+        model.change(writer => {
+            if (selection.isCollapsed) {
+                const position = selection.getFirstPosition();
+                // When selection is inside text with `highlight` attribute.
+                if (selection.hasAttribute('highlight')) {
+                    // Find the full highlighted range.
+                    const isSameHighlight = (value) => {
+                        return value.item.hasAttribute('highlight') && value.item.getAttribute('highlight') === this.value;
+                    };
+                    const highlightStart = position.getLastMatchingPosition(isSameHighlight, { direction: 'backward' });
+                    const highlightEnd = position.getLastMatchingPosition(isSameHighlight);
+                    const highlightRange = writer.createRange(highlightStart, highlightEnd);
+                    // Then depending on current value...
+                    if (!highlighter || this.value === highlighter) {
+                        // ...remove attribute when passing highlighter different then current or executing "eraser".
+                        // If we're at the end of the highlighted range, we don't want to remove highlight of the range.
+                        if (!position.isEqual(highlightEnd)) {
+                            writer.removeAttribute('highlight', highlightRange);
+                        }
+                        writer.removeSelectionAttribute('highlight');
+                    }
+                    else {
+                        // ...update `highlight` value.
+                        // If we're at the end of the highlighted range, we don't want to change the highlight of the range.
+                        if (!position.isEqual(highlightEnd)) {
+                            writer.setAttribute('highlight', highlighter, highlightRange);
+                        }
+                        writer.setSelectionAttribute('highlight', highlighter);
+                    }
+                }
+                else if (highlighter) {
+                    writer.setSelectionAttribute('highlight', highlighter);
+                }
+            }
+            else {
+                const ranges = model.schema.getValidRanges(selection.getRanges(), 'highlight');
+                for (const range of ranges) {
+                    if (highlighter) {
+                        writer.setAttribute('highlight', highlighter, range);
+                    }
+                    else {
+                        writer.removeAttribute('highlight', range);
+                    }
+                }
+            }
+        });
+    }
+}

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;
+}