@ckeditor/ckeditor5-find-and-replace 29.1.0 → 31.1.0

package/src/utils.js

@@ -4,7 +4,7 @@
  */
 
 /**
- * @module find-and-replace
+ * @module find-and-replace/utils
  */
 
 import { uid, Collection } from 'ckeditor5/src/utils';
@@ -13,11 +13,11 @@ import { escapeRegExp } from 'lodash-es';
 /**
  * Executes findCallback and updates search results list.
  *
- * @param {module:engine/model/range~Range} range
- * @param {module:engine/model/model~Model} model
- * @param {Function} findCallback
+ * @param {module:engine/model/range~Range} range The model range to scan for matches.
+ * @param {module:engine/model/model~Model} model The model.
+ * @param {Function} findCallback The callback that should return `true` if provided text matches the search term.
  * @param {module:utils/collection~Collection} [startResults] An optional collection of find matches that the function should
- * starts with. This would be a collection returned by a previous `updateFindResultFromRange()` call.
+ * start with. This would be a collection returned by a previous `updateFindResultFromRange()` call.
  * @returns {module:utils/collection~Collection} A collection of objects describing find match.
  *
  * An example structure:
@@ -33,20 +33,20 @@ import { escapeRegExp } from 'lodash-es';
 export function updateFindResultFromRange( range, model, findCallback, startResults ) {
 	const results = startResults || new Collection();
 
-	[ ...range ].forEach( ( { type, item } ) => {
-		if ( type === 'elementStart' ) {
-			if ( model.schema.checkChild( item, '$text' ) ) {
-				const foundItems = findCallback( {
-					item,
-					text: rangeToText( model.createRangeIn( item ) )
-				} );
+	model.change( writer => {
+		[ ...range ].forEach( ( { type, item } ) => {
+			if ( type === 'elementStart' ) {
+				if ( model.schema.checkChild( item, '$text' ) ) {
+					const foundItems = findCallback( {
+						item,
+						text: rangeToText( model.createRangeIn( item ) )
+					} );
 
-				if ( !foundItems ) {
-					return;
-				}
+					if ( !foundItems ) {
+						return;
+					}
 
-				foundItems.forEach( foundItem => {
-					model.change( writer => {
+					foundItems.forEach( foundItem => {
 						const resultId = `findResult:${ uid() }`;
 						const marker = writer.addMarker( resultId, {
 							usingOperation: false,
@@ -68,9 +68,9 @@ export function updateFindResultFromRange( range, model, findCallback, startResu
 							index
 						);
 					} );
-				} );
+				}
 			}
-		}
+		} );
 	} );
 
 	return results;
@@ -79,6 +79,9 @@ export function updateFindResultFromRange( range, model, findCallback, startResu
 /**
  * Returns text representation of a range. The returned text length should be the same as range length.
  * In order to achieve this this function will replace inline elements (text-line) as new line character ("\n").
+ *
+ * @param {module:engine/model/range~Range} range The model range.
+ * @returns {String} The text content of the provided range.
  */
 export function rangeToText( range ) {
 	return Array.from( range.getItems() ).reduce( ( rangeText, node ) => {
@@ -93,6 +96,7 @@ export function rangeToText( range ) {
 	}, '' );
 }
 
+// Finds the appropriate index in the resultsList Collection.
 function findInsertIndex( resultsList, markerToInsert ) {
 	const result = resultsList.find( ( { marker } ) => {
 		return markerToInsert.getStart().isBefore( marker.getStart() );
@@ -101,12 +105,14 @@ function findInsertIndex( resultsList, markerToInsert ) {
 	return result ? resultsList.getIndex( result ) : resultsList.length;
 }
 
+// Maps RegExp match result to find result.
 function regexpMatchToFindResult( matchResult ) {
 	const lastGroupIndex = matchResult.length - 1;
 
 	let startOffset = matchResult.index;
 
 	// Searches with match all flag have an extra matching group with empty string or white space matched before the word.
+	// If the search term starts with the space already, there is no extra group even with match all flag on.
 	if ( matchResult.length === 3 ) {
 		startOffset += matchResult[ 1 ].length;
 	}
@@ -119,9 +125,10 @@ function regexpMatchToFindResult( matchResult ) {
 }
 
 /**
+ * Creates a text matching callback for a specified search term and matching options.
  *
- * @param {String} searchTerm
- * @param {Object} [options]
+ * @param {String} searchTerm The search term.
+ * @param {Object} [options] Matching options.
  * @param {Boolean} [options.matchCase=false] If set to `true` letter casing will be ignored.
  * @param {Boolean} [options.wholeWords=false] If set to `true` only whole words that match `callbackOrText` will be matched.
  * @returns {Function}
@@ -138,7 +145,13 @@ export function findByTextCallback( searchTerm, options ) {
 	if ( options.wholeWords ) {
 		const nonLetterGroup = '[^a-zA-Z\u00C0-\u024F\u1E00-\u1EFF]';
 
-		regExpQuery = `(^|${ nonLetterGroup }|_)` + regExpQuery + `(?:_|${ nonLetterGroup }|$)`;
+		if ( !new RegExp( '^' + nonLetterGroup ).test( searchTerm ) ) {
+			regExpQuery = `(^|${ nonLetterGroup }|_)${ regExpQuery }`;
+		}
+
+		if ( !new RegExp( nonLetterGroup + '$' ).test( searchTerm ) ) {
+			regExpQuery = `${ regExpQuery }(?=_|${ nonLetterGroup }|$)`;
+		}
 	}
 
 	const regExp = new RegExp( regExpQuery, flags );

package/theme/findandreplace.css

@@ -4,10 +4,10 @@
  */
 
 .ck-find-result {
-	background: hsl(58, 100%, 50%);
+	background: hsl(60, 100%, 50%);
 	color: var(--ck-color-text);
 }
 
 .ck-find-result_selected {
-	background: hsl(52, 100%, 50%);
+	background: hsl(29, 100%, 60%);
 }

package/theme/findandreplaceform.css

@@ -3,224 +3,15 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-/* stylelint-disable no-descending-specificity */
+.ck.ck-find-and-replace-form {
+	max-width: 100%;
 
-/* disabled buttons bg color: #C3C3C3 */
-/* button color #4E8AE4 */
-
-@import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
-
-.ck .ck-find-and-replace-form .ck-find-form__wrapper,
-.ck .ck-find-and-replace-form .ck-replace-form__wrapper {
-	display: flex;
-	align-items: flex-start;
-	flex-direction: row;
-	flex-wrap: wrap;
-
-	& .ck-button {
-		margin-top: var(--ck-spacing-standard);
-		background-color: var(--ck-color-base-active);
-		padding: 5px 10px;
-		text-transform: uppercase;
-
-		&.ck-disabled {
-			background-color: var(--ck-color-switch-button-off-background);
-		}
-
-		&:not(.ck-disabled) {
-			color: var(--ck-color-base-background);
-
-			&:hover {
-				background-color: var(--ck-color-base-focus);
-				cursor: pointer;
-			}
-		}
-	}
-
-	& .ck-labeled-field-view__input-wrapper .ck.ck-input-text{
-		padding: var(--ck-spacing-extra-tiny) calc(var(--ck-spacing-medium) * 8) var(--ck-spacing-extra-tiny) var(--ck-spacing-medium);
-	}
-
-	@mixin ck-media-phone {
-		flex-wrap: wrap;
-
-		& .ck-labeled-field-view {
-			flex-basis: 100%;
-		}
-
-		& .ck-button {
-			flex-basis: 50%;
-		}
-	}
-}
-
-.ck .ck-find-and-replace-form  .ck-replace-form__wrapper {
-	justify-content: flex-end;
-	border-top: 1px solid var(--ck-color-base-border);
-
-	& .ck-labeled-field-view__input-wrapper .ck.ck-input-text{
-		padding: var(--ck-spacing-extra-tiny) var(--ck-spacing-medium) var(--ck-spacing-extra-tiny) var(--ck-spacing-medium);
-	}
-
-	& .ck-button {
-		border-radius: 5px;
-		font-size: calc(var(--ck-font-size-normal) * 0.9);
-
-		&:last-child {
-			margin-left: var(--ck-spacing-standard)
-		}
-
-		& .ck.ck-button__label {
-			line-height: 20px;
-		}
-	}
-}
-
-.ck .ck-find-and-replace-form .ck-find-form__wrapper {
-	justify-content: space-between;
-
-	& .ck-button.ck-button-prev,
-	& .ck-button.ck-button-next {
-		margin-left: 1px;
-	}
-
-	& span.ck-results-counter {
-		position: absolute;
-		top: calc(var(--ck-spacing-standard) * 2);
-		right: calc(var(--ck-spacing-standard) * 3);
-		color: var(--ck-color-base-border)
-	}
-
-	& .ck-find-buttons {
+	& fieldset {
 		display: flex;
-		align-items: center;
-
-		& .ck-button {
-			border-radius: 5px;
-			padding: 5px;
-
-			& svg.ck-button__icon {
-				margin: 0;
-			}
-
-			&.ck-button-find {
-				padding: 4px 16px;
-			}
-
-			&.ck-button-prev {
-				border-radius: 5px 0 0 5px;
-
-				& svg {
-					transform: rotate(180deg) translateY(-2px);
-				}
-			}
 
-			&.ck-button-next {
-				border-radius: 0 5px 5px 0;
-
-				& svg {
-					transform: translateY(-1px);
-				}
-			}
-		}
-	}
-
-	&.ck-is-searching {
-		& .ck-button.ck-button-find {
-			display: none;
-		}
-	}
-
-	&:not(.ck-is-searching) {
-		& .ck-button.ck-button-prev,
-		& .ck-button.ck-button-next {
-			display: none;
-		}
-
-		& .ck-button.ck-button-find {
-			display: flex;
-		}
-	}
-
-	&.ck-responsive-form .ck-find-checkboxes {
-		margin: 0;
-
-		& .ck-find-checkboxes__box {
-			display: flex;
-			align-items: center;
-			max-width: 150px;
-			overflow: hidden;
-
-			& label {
-				margin-left: 5px;
-				line-height: calc(var(--ck-spacing-standard) * 2.2);
-				overflow: hidden;
-				text-overflow: ellipsis;
-			}
-
-			& label:hover,
-			& input[type=checkbox]:hover
-			 {
-				cursor: pointer;
-			}
-
-			&:first-child {
-				margin-top: var(--ck-spacing-medium);
-			}
-
-			& input[type=checkbox]:disabled+label {
-				color: var(--ck-color-switch-button-off-background);
-			}
-		}
-	}
-}
-
-.ck[dir='rtl'] {
-	& .ck .ck-find-and-replace-form .ck-find-form__wrapper .ck-labeled-field-view__input-wrapper .ck.ck-input-text {
-		padding: var(--ck-spacing-extra-tiny) var(--ck-spacing-medium) var(--ck-spacing-extra-tiny) calc(var(--ck-spacing-medium) * 8);
-	}
-
-	& .ck .ck-find-and-replace-form .ck-replace-form__wrapper {
-		& .ck-replace-buttons {
-			display: flex;
-			flex-flow: row-reverse;
-
-			& .ck-button:last-child {
-				margin-left: var(--ck-spacing-standard);
-			}
-		}
-		& .ck-labeled-field-view__input-wrapper .ck.ck-input-text{
-			padding: var(--ck-spacing-extra-tiny) var(--ck-spacing-medium);
-		}
-	}
-
-	& .ck.ck-responsive-form > :not(:last-child) {
-		margin-left: 0;
-	}
-
-	& .ck .ck-find-and-replace-form .ck-find-form__wrapper {
-		& .ck-button.ck-button-prev,
-		& .ck-button.ck-button-next {
-			margin-right: 1px;
-			margin-left: 0;
-		}
-
-		& span.ck-results-counter {
-			left: calc(var(--ck-spacing-standard) * 3);
-		}
-
-		& .ck-find-buttons {
-			flex-flow: row-reverse;
-		}
-
-		&.ck-responsive-form .ck-find-checkboxes {
-			margin: 0;
-
-			& .ck-find-checkboxes__box label {
-				margin-right: 5px;
-			}
+		/* The find fieldset */
+		&.ck-find-and-replace-form__find .ck-results-counter {
+			position: absolute;
 		}
 	}
 }
-
-/* stylelint-enable no-descending-specificity */

package/CHANGELOG.md

@@ -1,4 +0,0 @@
-Changelog
-=========
-
-All changes in the package are documented in the main repository. See: https://github.com/ckeditor/ckeditor5/blob/master/CHANGELOG.md.

package/src/ui/checkboxview.js

@@ -1,212 +0,0 @@
-/**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-
-/**
- * @module find-and-replace/ui/checkboxview
- */
-
-import { View } from 'ckeditor5/src/ui';
-import { getCode } from 'ckeditor5/src/utils';
-
-/**
- * The checkbox view class.
- *
- * @extends module:ui/view~View
- */
-export default class CheckboxView extends View {
-	/**
-	 * @inheritDoc
-	 */
-	constructor( locale ) {
-		super( locale );
-
-		const bind = this.bindTemplate;
-
-		/**
-		 * (Optional) The additional CSS class set on the button.
-		 *
-		 * @observable
-		 * @member {String} #class
-		 */
-		this.set( 'class' );
-
-		/**
-		 * Controls whether the checkbox view is enabled, i.e. it can be clicked and can execute an action.
-		 *
-		 * @observable
-		 * @default true
-		 * @member {Boolean} #isEnabled
-		 */
-		this.set( 'isEnabled', true );
-
-		/**
-		 * Controls whether the checkbox view is visible. Visible by default, the checkboxes are hidden
-		 * using a CSS class.
-		 *
-		 * @observable
-		 * @default true
-		 * @member {Boolean} #isVisible
-		 */
-		this.set( 'isVisible', true );
-
-		/**
-		 * Indicates whether a related checkbox is checked.
-		 *
-		 * @observable
-		 * @default false
-		 * @member {Boolean} #isChecked
-		 */
-		this.set( 'isChecked', false );
-
-		/**
-		 * The text of the label associated with the checkbox view.
-		 *
-		 * @observable
-		 * @member {String} #label
-		 */
-		this.set( 'label' );
-
-		/**
-		 * The HTML `id` attribute to be assigned to the checkbox.
-		 *
-		 * @observable
-		 * @default null
-		 * @member {String|null} #id
-		 */
-		this.set( 'id', null );
-
-		/**
-		 * (Optional) Controls the `tabindex` HTML attribute of the checkbox. By default, the checkbox is focusable
-		 * but is not included in the <kbd>Tab</kbd> order.
-		 *
-		 * @observable
-		 * @default -1
-		 * @member {String} #tabindex
-		 */
-		this.set( 'tabindex', -1 );
-
-		/**
-		 * The collection of the child views inside of the checkbox {@link #element}.
-		 *
-		 * @readonly
-		 * @member {module:ui/viewcollection~ViewCollection}
-		 */
-		this.children = this.createCollection();
-
-		/**
-		 * The label of the checkbox view. It is configurable using the {@link #label label attribute}.
-		 *
-		 * @readonly
-		 * @member {module:ui/view~View} #labelView
-		 */
-		this.labelView = this._createLabelView( );
-
-		/**
-		 * The input of the checkbox view.
-		 *
-		 * @readonly
-		 * @member {module:ui/view~View} #checkboxInputView
-		 */
-		this.checkboxInputView = this._createCheckboxInputView();
-
-		this.setTemplate( {
-			tag: 'div',
-
-			attributes: {
-				class: [
-					bind.to( 'class' ),
-					bind.if( 'isEnabled', 'ck-disabled', value => !value ),
-					bind.if( 'isVisible', 'ck-hidden', value => !value )
-				],
-				tabindex: bind.to( 'tabindex' )
-			},
-
-			on: {
-				keydown: bind.to( evt => {
-					// Need to check target. Otherwise we would handle space press on input[type=text] and it would change
-					// checked property twice due to default browser handling kicking in too.
-					if ( evt.target === this.element && evt.keyCode == getCode( 'space' ) ) {
-						this.isChecked = !this.isChecked;
-					}
-				} )
-			},
-
-			children: this.children
-		} );
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	render() {
-		super.render();
-
-		this.children.add( this.checkboxInputView );
-		this.children.add( this.labelView );
-	}
-
-	/**
-	 * Focuses the {@link #element} of the checkbox.
-	 */
-	focus() {
-		this.element.focus();
-	}
-
-	/**
-	 * Creates a checkbox input view instance and binds it with checkbox attributes.
-	 *
-	 * @private
-	 * @returns {module:ui/view~View}
-	 */
-	_createCheckboxInputView() {
-		const checkboxInputView = new View();
-		const bind = this.bindTemplate;
-
-		checkboxInputView.setTemplate( {
-			tag: 'input',
-			attributes: {
-				type: 'checkbox',
-				id: bind.to( 'id' ),
-				'checked': bind.if( 'isChecked' ),
-				'disabled': bind.if( 'isEnabled', true, value => !value ),
-				'aria-disabled': bind.if( 'isEnabled', true, value => !value )
-			},
-
-			on: {
-				change: bind.to( evt => {
-					this.isChecked = evt.target.checked;
-				} )
-			}
-		} );
-
-		return checkboxInputView;
-	}
-
-	/**
-	 * Creates a label view instance and binds it with checkbox attributes.
-	 *
-	 * @private
-	 * @returns {module:ui/view~View}
-	 */
-	_createLabelView() {
-		const labelView = new View();
-
-		labelView.setTemplate( {
-			tag: 'label',
-
-			attributes: {
-				for: this.bindTemplate.to( 'id' )
-			},
-
-			children: [
-				{
-					text: this.bindTemplate.to( 'label' )
-				}
-			]
-		} );
-
-		return labelView;
-	}
-}