@ckeditor/ckeditor5-find-and-replace 30.0.0

package/src/utils.js

@@ -0,0 +1,166 @@
+/**
+ * @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/utils
+ */
+
+import { uid, Collection } from 'ckeditor5/src/utils';
+import { escapeRegExp } from 'lodash-es';
+
+/**
+ * Executes findCallback and updates search results list.
+ *
+ * @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
+ * 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:
+ *
+ * ```js
+ * {
+ *	id: resultId,
+ *	label: foundItem.label,
+ *	marker
+ *	}
+ * ```
+ */
+export function updateFindResultFromRange( range, model, findCallback, startResults ) {
+	const results = startResults || new Collection();
+
+	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;
+					}
+
+					foundItems.forEach( foundItem => {
+						const resultId = `findResult:${ uid() }`;
+						const marker = writer.addMarker( resultId, {
+							usingOperation: false,
+							affectsData: false,
+							range: writer.createRange(
+								writer.createPositionAt( item, foundItem.start ),
+								writer.createPositionAt( item, foundItem.end )
+							)
+						} );
+
+						const index = findInsertIndex( results, marker );
+
+						results.add(
+							{
+								id: resultId,
+								label: foundItem.label,
+								marker
+							},
+							index
+						);
+					} );
+				}
+			}
+		} );
+	} );
+
+	return results;
+}
+
+/**
+ * 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 ) => {
+		// Trim text to a last occurrence of an inline element and update range start.
+		if ( !( node.is( 'text' ) || node.is( 'textProxy' ) ) ) {
+			// Editor has only one inline element defined in schema: `<softBreak>` which is treated as new line character in blocks.
+			// Special handling might be needed for other inline elements (inline widgets).
+			return `${ rangeText }\n`;
+		}
+
+		return rangeText + node.data;
+	}, '' );
+}
+
+// Finds the appropriate index in the resultsList Collection.
+function findInsertIndex( resultsList, markerToInsert ) {
+	const result = resultsList.find( ( { marker } ) => {
+		return markerToInsert.getStart().isBefore( marker.getStart() );
+	} );
+
+	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;
+	}
+
+	return {
+		label: matchResult[ lastGroupIndex ],
+		start: startOffset,
+		end: startOffset + matchResult[ lastGroupIndex ].length
+	};
+}
+
+/**
+ * Creates a text matching callback for a specified search term and matching 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}
+ */
+export function findByTextCallback( searchTerm, options ) {
+	let flags = 'gu';
+
+	if ( !options.matchCase ) {
+		flags += 'i';
+	}
+
+	let regExpQuery = `(${ escapeRegExp( searchTerm ) })`;
+
+	if ( options.wholeWords ) {
+		const nonLetterGroup = '[^a-zA-Z\u00C0-\u024F\u1E00-\u1EFF]';
+
+		if ( !new RegExp( '^' + nonLetterGroup ).test( searchTerm ) ) {
+			regExpQuery = `(^|${ nonLetterGroup }|_)${ regExpQuery }`;
+		}
+
+		if ( !new RegExp( nonLetterGroup + '$' ).test( searchTerm ) ) {
+			regExpQuery = `${ regExpQuery }(?:_|${ nonLetterGroup }|$)`;
+		}
+	}
+
+	const regExp = new RegExp( regExpQuery, flags );
+
+	function findCallback( { text } ) {
+		const matches = [ ...text.matchAll( regExp ) ];
+
+		return matches.map( regexpMatchToFindResult );
+	}
+
+	return findCallback;
+}

package/theme/findandreplace.css

@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+.ck-find-result {
+	background: hsl(60, 100%, 50%);
+	color: var(--ck-color-text);
+}
+
+.ck-find-result_selected {
+	background: hsl(29, 100%, 60%);
+}

package/theme/findandreplaceform.css

@@ -0,0 +1,17 @@
+/*
+ * Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+.ck.ck-find-and-replace-form {
+	max-width: 100%;
+
+	& fieldset {
+		display: flex;
+
+		/* The find fieldset */
+		&.ck-find-and-replace-form__find .ck-results-counter {
+			position: absolute;
+		}
+	}
+}

package/theme/icons/find-replace.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m12.87 13.786 1.532-1.286 3.857 4.596a1 1 0 1 1-1.532 1.286l-3.857-4.596z"/><path d="M16.004 8.5a6.5 6.5 0 0 1-9.216 5.905c-1.154-.53-.863-1.415-.663-1.615.194-.194.564-.592 1.635-.141a4.5 4.5 0 0 0 5.89-5.904l-.104-.227 1.332-1.331c.045-.046.196-.041.224.007a6.47 6.47 0 0 1 .902 3.306zm-3.4-5.715c.562.305.742 1.106.354 1.494-.388.388-.995.414-1.476.178a4.5 4.5 0 0 0-6.086 5.882l.114.236-1.348 1.349c-.038.037-.17.022-.198-.023a6.5 6.5 0 0 1 5.54-9.9 6.469 6.469 0 0 1 3.1.784z"/><path d="M4.001 11.93.948 8.877a.2.2 0 0 1 .141-.341h6.106a.2.2 0 0 1 .141.341L4.283 11.93a.2.2 0 0 1-.282 0zm11.083-6.789 3.053 3.053a.2.2 0 0 1-.14.342H11.89a.2.2 0 0 1-.14-.342l3.052-3.053a.2.2 0 0 1 .282 0z"/></svg>