@ckeditor/ckeditor5-highlight 35.3.2 → 36.0.0

package/src/highlightcommand.js

@@ -1,111 +1,91 @@
 /**
- * @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 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.
  *
- *		editor.execute( 'highlight', { value: 'greenMarker' } );
+ * ```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.
- *
- * @extends module:core/command~Command
  */
 export default class HighlightCommand extends Command {
-	/**
-	 * @inheritDoc
-	 */
-	refresh() {
-		const model = this.editor.model;
-		const doc = model.document;
-
-		/**
-		 * A value indicating whether the command is active. If the selection has some highlight attribute,
-		 * it corresponds to the value of that attribute.
-		 *
-		 * @observable
-		 * @readonly
-		 * @member {undefined|String} module:highlight/highlightcommand~HighlightCommand#value
-		 */
-		this.value = doc.selection.getAttribute( 'highlight' );
-		this.isEnabled = model.schema.checkAttributeInSelection( doc.selection, 'highlight' );
-	}
-
-	/**
-	 * Executes the command.
-	 *
-	 * @param {Object} [options] Options for the executed command.
-	 * @param {String} [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 );
-					}
-				}
-			}
-		} );
-	}
+    /**
+     * @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/highlightcommand.ts

@@ -0,0 +1,113 @@
+/**
+ * @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';
+import type { TreeWalkerValue } from 'ckeditor5/src/engine';
+
+/**
+ * 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 {
+	/**
+	 * A value indicating whether the command is active. If the selection has some highlight attribute,
+	 * it corresponds to the value of that attribute.
+	 *
+	 * @observable
+	 * @readonly
+	 */
+	declare public value: string | undefined;
+
+	/**
+	 * @inheritDoc
+	 */
+	public override refresh(): void {
+		const model = this.editor.model;
+		const doc = model.document;
+
+		this.value = doc.selection.getAttribute( 'highlight' ) as string | undefined;
+		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
+	 */
+	public override execute( options: { value?: string | null } = {} ): void {
+		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: TreeWalkerValue ) => {
+						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/highlightediting.js

@@ -1,124 +1,109 @@
 /**
- * @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 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/highlight~HighlightConfig configuration}.
- *
- * @extends module:core/plugin~Plugin
  */
 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 ) );
-	}
+    /**
+     * @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 {Array.<module:highlight/highlight~HighlightOption>} options An array with configured options.
-// @returns {module:engine/conversion/conversion~ConverterDefinition}
-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;
+/**
+ * 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;
 }

package/src/highlightediting.ts

@@ -0,0 +1,139 @@
+/**
+ * @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';
+
+import HighlightCommand from './highlightcommand';
+import type { HighlightOption } from './highlight';
+
+/**
+ * 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/highlight~HighlightConfig configuration}.
+ */
+export default class HighlightEditing extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	public static get pluginName(): 'HighlightEditing' {
+		return 'HighlightEditing';
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	constructor( editor: 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
+	 */
+	public init(): void {
+		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: Array<HighlightOption> ): HighlightConverterDefinition {
+	const definition: HighlightConverterDefinition = {
+		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;
+}
+
+type HighlightConverterDefinition = {
+	model: { key: string; values: Array<string> };
+	view: Record<string, { name: string; classes: string }>;
+};
+
+declare module '@ckeditor/ckeditor5-core' {
+	interface CommandsMap {
+		highlight: HighlightCommand;
+	}
+
+	interface PluginsMap {
+		[ HighlightEditing.pluginName ]: HighlightEditing;
+	}
+}