@ckeditor/ckeditor5-find-and-replace 30.0.0

package/src/findandreplaceediting.js

@@ -0,0 +1,254 @@
+/**
+ * @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/findandreplaceediting
+ */
+
+import { Plugin } from 'ckeditor5/src/core';
+import { updateFindResultFromRange } from './utils';
+import FindCommand from './findcommand';
+import ReplaceCommand from './replacecommand';
+import ReplaceAllCommand from './replaceallcommand';
+import FindNextCommand from './findnextcommand';
+import FindPreviousCommand from './findpreviouscommand';
+import FindAndReplaceState from './findandreplacestate';
+
+// eslint-disable-next-line ckeditor5-rules/ckeditor-imports
+import { scrollViewportToShowTarget } from '@ckeditor/ckeditor5-utils/src/dom/scroll';
+
+import { debounce } from 'lodash-es';
+
+import '../theme/findandreplace.css';
+
+const HIGHLIGHT_CLASS = 'ck-find-result_selected';
+
+// Reacts to document changes in order to update search list.
+function onDocumentChange( results, model, searchCallback ) {
+	const changedNodes = new Set();
+	const removedMarkers = new Set();
+
+	const changes = model.document.differ.getChanges();
+
+	// Get nodes in which changes happened to re-run a search callback on them.
+	changes.forEach( change => {
+		if ( change.name === '$text' || model.schema.isInline( change.position.nodeAfter ) ) {
+			changedNodes.add( change.position.parent );
+
+			[ ...model.markers.getMarkersAtPosition( change.position ) ].forEach( markerAtChange => {
+				removedMarkers.add( markerAtChange.name );
+			} );
+		} else if ( change.type === 'insert' ) {
+			changedNodes.add( change.position.nodeAfter );
+		}
+	} );
+
+	// Get markers from removed nodes also.
+	model.document.differ.getChangedMarkers().forEach( ( { name, data: { newRange } } ) => {
+		if ( newRange && newRange.start.root.rootName === '$graveyard' ) {
+			removedMarkers.add( name );
+		}
+	} );
+
+	// Get markers from the updated nodes and remove all (search will be re-run on these nodes).
+	changedNodes.forEach( node => {
+		const markersInNode = [ ...model.markers.getMarkersIntersectingRange( model.createRangeIn( node ) ) ];
+
+		markersInNode.forEach( marker => removedMarkers.add( marker.name ) );
+	} );
+
+	// Remove results & markers from the changed part of content.
+	model.change( writer => {
+		removedMarkers.forEach( markerName => {
+			// Remove the result first - in order to prevent rendering a removed marker.
+			if ( results.has( markerName ) ) {
+				results.remove( markerName );
+			}
+
+			writer.removeMarker( markerName );
+		} );
+	} );
+
+	// Run search callback again on updated nodes.
+	changedNodes.forEach( nodeToCheck => {
+		updateFindResultFromRange( model.createRangeOn( nodeToCheck ), model, searchCallback, results );
+	} );
+}
+
+/**
+ * Implements the editing part for find and replace plugin. For example conversion, commands etc.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class FindAndReplaceEditing extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'FindAndReplaceEditing';
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		/**
+		 * The collection of currently highlighted search results.
+		 *
+		 * @private
+		 * @member {module:utils/collection~Collection} #_activeResults
+		 */
+		this._activeResults = null;
+
+		/**
+		 * An object storing the find and replace state within a given editor instance.
+		 *
+		 * @member {module:find-and-replace/findandreplacestate~FindAndReplaceState} #state
+		 */
+		this.state = new FindAndReplaceState( this.editor.model );
+
+		this._defineConverters();
+		this._defineCommands();
+
+		this.listenTo( this.state, 'change:highlightedResult', ( eventInfo, name, newValue, oldValue ) => {
+			const { model } = this.editor;
+
+			model.change( writer => {
+				if ( oldValue ) {
+					const oldMatchId = oldValue.marker.name.split( ':' )[ 1 ];
+					const oldMarker = model.markers.get( `findResultHighlighted:${ oldMatchId }` );
+
+					if ( oldMarker ) {
+						writer.removeMarker( oldMarker );
+					}
+				}
+
+				if ( newValue ) {
+					const newMatchId = newValue.marker.name.split( ':' )[ 1 ];
+					writer.addMarker( `findResultHighlighted:${ newMatchId }`, {
+						usingOperation: false,
+						affectsData: false,
+						range: newValue.marker.getRange()
+					} );
+				}
+			} );
+		} );
+
+		const debouncedScrollListener = debounce( scrollToHighlightedResult.bind( this ), 32 );
+		// Debounce scroll as highlight might be changed very frequently, e.g. when there's a replace all command.
+		this.listenTo( this.state, 'change:highlightedResult', debouncedScrollListener, { priority: 'low' } );
+
+		// It's possible that the editor will get destroyed before debounced call kicks in.
+		// This would result with accessing a view three that is no longer in DOM.
+		this.listenTo( this.editor, 'destroy', debouncedScrollListener.cancel );
+
+		/* istanbul ignore next */
+		function scrollToHighlightedResult( eventInfo, name, newValue ) {
+			if ( newValue ) {
+				const domConverter = this.editor.editing.view.domConverter;
+				const viewRange = this.editor.editing.mapper.toViewRange( newValue.marker.getRange() );
+
+				scrollViewportToShowTarget( {
+					target: domConverter.viewRangeToDom( viewRange ),
+					viewportOffset: 40
+				} );
+			}
+		}
+	}
+
+	/**
+	 * Initiate a search.
+	 *
+	 * @param {Function|String} callbackOrText
+	 * @returns {module:utils/collection~Collection}
+	 */
+	find( callbackOrText ) {
+		const { editor } = this;
+		const { model } = editor;
+
+		const { findCallback, results } = editor.execute( 'find', callbackOrText );
+
+		this._activeResults = results;
+
+		// @todo: handle this listener, another copy is in findcommand.js file.
+		this.listenTo( model.document, 'change:data', () => onDocumentChange( this._activeResults, model, findCallback ) );
+
+		return this._activeResults;
+	}
+
+	/**
+	 * Stops active results from updating, and clears out the results.
+	 */
+	stop() {
+		if ( !this._activeResults ) {
+			return;
+		}
+
+		this.stopListening( this.editor.model.document );
+
+		this.state.clear( this.editor.model );
+
+		this._activeResults = null;
+	}
+
+	/**
+	 * Sets up the commands.
+	 *
+	 * @private
+	 */
+	_defineCommands() {
+		this.editor.commands.add( 'find', new FindCommand( this.editor, this.state ) );
+		this.editor.commands.add( 'findNext', new FindNextCommand( this.editor, this.state ) );
+		this.editor.commands.add( 'findPrevious', new FindPreviousCommand( this.editor, this.state ) );
+		this.editor.commands.add( 'replace', new ReplaceCommand( this.editor, this.state ) );
+		this.editor.commands.add( 'replaceAll', new ReplaceAllCommand( this.editor, this.state ) );
+	}
+
+	/**
+	 * Sets up the marker downcast converters for search results highlighting.
+	 *
+	 * @private
+	 */
+	_defineConverters() {
+		const { editor } = this;
+
+		// Setup the marker highlighting conversion.
+		editor.conversion.for( 'editingDowncast' ).markerToHighlight( {
+			model: 'findResult',
+			view: ( { markerName } ) => {
+				const [ , id ] = markerName.split( ':' );
+
+				// Marker removal from the view has a bug: https://github.com/ckeditor/ckeditor5/issues/7499
+				// A minimal option is to return a new object for each converted marker...
+				return {
+					name: 'span',
+					classes: [ 'ck-find-result' ],
+					attributes: {
+						// ...however, adding a unique attribute should be future-proof..
+						'data-find-result': id
+					}
+				};
+			}
+		} );
+
+		editor.conversion.for( 'editingDowncast' ).markerToHighlight( {
+			model: 'findResultHighlighted',
+			view: ( { markerName } ) => {
+				const [ , id ] = markerName.split( ':' );
+
+				// Marker removal from the view has a bug: https://github.com/ckeditor/ckeditor5/issues/7499
+				// A minimal option is to return a new object for each converted marker...
+				return {
+					name: 'span',
+					classes: [ HIGHLIGHT_CLASS ],
+					attributes: {
+						// ...however, adding a unique attribute should be future-proof..
+						'data-find-result': id
+					}
+				};
+			}
+		} );
+	}
+}

package/src/findandreplacestate.js

@@ -0,0 +1,131 @@
+/**
+ * @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/findandreplacestate
+ */
+
+import { ObservableMixin, mix, Collection } from 'ckeditor5/src/utils';
+
+/**
+ * The object storing find and replace plugin state for a given editor instance.
+ *
+ * @mixes module:utils/observablemixin~ObservableMixin
+ */
+export default class FindAndReplaceState {
+	/**
+	 * Creates an instance of the state.
+	 *
+	 * @param {module:engine/model/model~Model} model
+	 */
+	constructor( model ) {
+		/**
+		 * A collection of find matches.
+		 *
+		 * @protected
+		 * @observable
+		 * @member {module:utils/collection~Collection} #results
+		 */
+		this.set( 'results', new Collection() );
+
+		/**
+		 * Currently highlighted search result in {@link #results matched results}.
+		 *
+		 * @readonly
+		 * @observable
+		 * @member {Object|null} #highlightedResult
+		 */
+		this.set( 'highlightedResult', null );
+
+		/**
+		 * Searched text value.
+		 *
+		 * @readonly
+		 * @observable
+		 * @member {String} #searchText
+		 */
+		this.set( 'searchText', '' );
+
+		/**
+		 * Replace text value.
+		 *
+		 * @readonly
+		 * @observable
+		 * @member {String} #replaceText
+		 */
+		this.set( 'replaceText', '' );
+
+		/**
+		 * Indicates whether the matchCase checkbox has been checked.
+		 *
+		 * @readonly
+		 * @observable
+		 * @member {Boolean} #matchCase
+		 */
+		this.set( 'matchCase', false );
+
+		/**
+		 * Indicates whether the matchWholeWords checkbox has been checked.
+		 *
+		 * @readonly
+		 * @observable
+		 * @member {Boolean} #matchWholeWords
+		 */
+		this.set( 'matchWholeWords', false );
+
+		this.results.on( 'change', ( eventInfo, { removed, index } ) => {
+			removed = Array.from( removed );
+
+			if ( removed.length ) {
+				let highlightedResultRemoved = false;
+
+				model.change( writer => {
+					for ( const removedResult of removed ) {
+						if ( this.highlightedResult === removedResult ) {
+							highlightedResultRemoved = true;
+						}
+
+						if ( model.markers.has( removedResult.marker.name ) ) {
+							writer.removeMarker( removedResult.marker );
+						}
+					}
+				} );
+
+				if ( highlightedResultRemoved ) {
+					const nextHighlightedIndex = index >= this.results.length ? 0 : index;
+					this.highlightedResult = this.results.get( nextHighlightedIndex );
+				}
+			}
+		} );
+	}
+
+	/**
+	 * Cleans the state up and removes markers from the model.
+	 *
+	 * @param {module:engine/model/model~Model} model
+	 */
+	clear( model ) {
+		this.searchText = '';
+
+		model.change( writer => {
+			if ( this.highlightedResult ) {
+				const oldMatchId = this.highlightedResult.marker.name.split( ':' )[ 1 ];
+				const oldMarker = model.markers.get( `findResultHighlighted:${ oldMatchId }` );
+
+				if ( oldMarker ) {
+					writer.removeMarker( oldMarker );
+				}
+			}
+
+			[ ...this.results ].forEach( ( { marker } ) => {
+				writer.removeMarker( marker );
+			} );
+		} );
+
+		this.results.clear();
+	}
+}
+
+mix( FindAndReplaceState, ObservableMixin );

package/src/findandreplaceui.js

@@ -0,0 +1,202 @@
+/**
+ * @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/findandreplaceui
+ */
+
+import { Plugin } from 'ckeditor5/src/core';
+import { createDropdown } from 'ckeditor5/src/ui';
+import FindAndReplaceFormView from './ui/findandreplaceformview';
+
+import loupeIcon from '../theme/icons/find-replace.svg';
+
+/**
+ * The default find and replace UI.
+ *
+ * It registers the `'findAndReplace'` UI button in the editor's {@link module:ui/componentfactory~ComponentFactory component factory}.
+ * that uses the {@link module:find-and-replace/findandreplace~FindAndReplace FindAndReplace} plugin API.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class FindAndReplaceUI extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'FindAndReplaceUI';
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	constructor( editor ) {
+		super( editor );
+
+		/**
+		 * A reference to the find and replace form view.
+		 *
+		 * @member {module:find-and-replace/ui/findandreplaceformview~FindAndReplaceFormView} #formView
+		 */
+		this.formView = null;
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+
+		// Register the toolbar dropdown component.
+		editor.ui.componentFactory.add( 'findAndReplace', locale => {
+			const dropdown = createDropdown( locale );
+			const formView = this.formView = new FindAndReplaceFormView( editor.locale );
+
+			// Dropdown should be disabled when in source editing mode. See #10001.
+			dropdown.bind( 'isEnabled' ).to( editor.commands.get( 'find' ) );
+			dropdown.panelView.children.add( formView );
+
+			// Every time a dropdown is opened, the search text field should get focused and selected for better UX.
+			// Note: Using the low priority here to make sure the following listener starts working after
+			// the default action of the drop-down is executed (i.e. the panel showed up). Otherwise,
+			// the invisible form/input cannot be focused/selected.
+			//
+			// Each time a dropdown is closed, move the focus back to the find and replace toolbar button
+			// and let the find and replace editing feature know that all search results can be invalidated
+			// and no longer should be marked in the content.
+			dropdown.on( 'change:isOpen', ( event, name, isOpen ) => {
+				if ( isOpen ) {
+					formView.disableCssTransitions();
+
+					formView.reset();
+					formView._findInputView.fieldView.select();
+					formView.focus();
+
+					formView.enableCssTransitions();
+				} else {
+					formView.focus();
+
+					this.fire( 'searchReseted' );
+				}
+			}, { priority: 'low' } );
+
+			this._setupDropdownButton( dropdown );
+			this._setupFormView( formView );
+
+			return dropdown;
+		} );
+	}
+
+	/**
+	 * Sets up the find and replace button.
+	 *
+	 * @private
+	 * @param {module:ui/dropdown/dropdownview~DropdownView} dropdown
+	 */
+	_setupDropdownButton( dropdown ) {
+		const editor = this.editor;
+		const t = editor.locale.t;
+
+		dropdown.buttonView.set( {
+			icon: loupeIcon,
+			label: t( 'Find and replace' ),
+			keystroke: 'CTRL+F',
+			tooltip: true
+		} );
+
+		editor.keystrokes.set( 'Ctrl+F', ( data, cancelEvent ) => {
+			dropdown.isOpen = true;
+			cancelEvent();
+		} );
+	}
+
+	/**
+	 * Sets up the form view for the find and replace.
+	 *
+	 * @private
+	 * @param {module:find-and-replace/ui/findandreplaceformview~FindAndReplaceFormView} formView A related form view.
+	 */
+	_setupFormView( formView ) {
+		const editor = this.editor;
+		const commands = editor.commands;
+		const findAndReplaceEditing = this.editor.plugins.get( 'FindAndReplaceEditing' );
+		const editingState = findAndReplaceEditing.state;
+		const sortMapping = { before: -1, same: 0, after: 1 };
+
+		// Let the form know which result is being highlighted.
+		formView.bind( 'highlightOffset' ).to( editingState, 'highlightedResult', highlightedResult => {
+			if ( !highlightedResult ) {
+				return 0;
+			}
+
+			return Array.from( editingState.results )
+				.sort( ( a, b ) => sortMapping[ a.marker.getStart().compareWith( b.marker.getStart() ) ] )
+				.indexOf( highlightedResult ) + 1;
+		} );
+
+		// Let the form know how many results were found in total.
+		formView.listenTo( editingState.results, 'change', () => {
+			formView.matchCount = editingState.results.length;
+		} );
+
+		// Command states are used to enable/disable individual form controls.
+		// To keep things simple, instead of binding 4 individual observables, there's only one that combines every
+		// commands' isEnabled state. Yes, it will change more often but this simplifies the structure of the form.
+		formView.bind( '_areCommandsEnabled' ).to(
+			commands.get( 'findNext' ), 'isEnabled',
+			commands.get( 'findPrevious' ), 'isEnabled',
+			commands.get( 'replace' ), 'isEnabled',
+			commands.get( 'replaceAll' ), 'isEnabled',
+			( findNext, findPrevious, replace, replaceAll ) => ( { findNext, findPrevious, replace, replaceAll } )
+		);
+
+		// The UI plugin works as an interface between the form and the editing part of the feature.
+		formView.delegate( 'findNext', 'findPrevious', 'replace', 'replaceAll' ).to( this );
+
+		// Let the feature know that search results are no longer relevant because the user changed the searched phrase
+		// (or options) but didn't hit the "Find" button yet (e.g. still typing).
+		formView.on( 'change:isDirty', ( evt, data, isDirty ) => {
+			if ( isDirty ) {
+				this.fire( 'searchReseted' );
+			}
+		} );
+	}
+}
+
+/**
+ * Fired when the find next button is triggered.
+ *
+ * @event findNext
+ * @param {String} searchText Search text.
+ */
+
+/**
+ * Fired when the find previous button is triggered.
+ *
+ * @event findPrevious
+ * @param {String} searchText Search text.
+ */
+
+/**
+ * Fired when the replace button is triggered.
+ *
+ * @event replace
+ * @param {String} replaceText Replacement text.
+ */
+
+/**
+ * Fired when the replaceAll button is triggered.
+ *
+ * @event replaceAll
+ * @param {String} replaceText Replacement text.
+ */
+
+/**
+ * Fired when the UI was reset and the search results marked in the editing root should be invalidated,
+ * for instance, because the user changed the searched phrase (or options) but didn't hit
+ * the "Find" button yet.
+ *
+ * @event searchReseted
+ */

package/src/findcommand.js

@@ -0,0 +1,95 @@
+/**
+ * @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/findcommand
+*/
+
+import { Command } from 'ckeditor5/src/core';
+import { updateFindResultFromRange, findByTextCallback } from './utils';
+
+/**
+ * The find command. It is used by the {@link module:find-and-replace/findandreplace~FindAndReplace find and replace feature}.
+ *
+ * @extends module:core/command~Command
+ */
+export default class FindCommand extends Command {
+	/**
+	 * Creates a new `FindCommand` instance.
+	 *
+	 * @param {module:core/editor/editor~Editor} editor The editor on which this command will be used.
+	 * @param {module:find-and-replace/findandreplacestate~FindAndReplaceState} state An object to hold plugin state.
+	 */
+	constructor( editor, state ) {
+		super( editor );
+
+		// The find command is always enabled.
+		this.isEnabled = true;
+
+		/**
+		 * The find and replace state object used for command operations.
+		 *
+		 * @private
+		 * @member {module:find-and-replace/findandreplacestate~FindAndReplaceState} #_state
+		 */
+		this._state = state;
+
+		// Do not block the command if the editor goes into the read-only mode as it does not impact the data. See #9975.
+		this.listenTo( editor, 'change:isReadOnly', () => {
+			this.clearForceDisabled( 'readOnlyMode' );
+		} );
+	}
+
+	/**
+	 * Executes the command.
+	 *
+	 * @param {Function|String} callbackOrText
+	 * @param {Object} [options]
+	 * @param {Boolean} [options.matchCase=false] If set to `true`, the letter case will be matched.
+	 * @param {Boolean} [options.wholeWords=false] If set to `true`, only whole words that match `callbackOrText` will be matched.
+	 *
+	 * @fires execute
+	 */
+	execute( callbackOrText, { matchCase, wholeWords } = {} ) {
+		const { editor } = this;
+		const { model } = editor;
+
+		let findCallback;
+
+		// Allow to execute `find()` on a plugin with a keyword only.
+		if ( typeof callbackOrText === 'string' ) {
+			findCallback = findByTextCallback( callbackOrText, { matchCase, wholeWords } );
+
+			this._state.searchText = callbackOrText;
+		} else {
+			findCallback = callbackOrText;
+		}
+
+		// Initial search is done on all nodes in all roots inside the content.
+		const results = model.document.getRootNames()
+			.reduce( ( ( currentResults, rootName ) => updateFindResultFromRange(
+				model.createRangeIn( model.document.getRoot( rootName ) ),
+				model,
+				findCallback,
+				currentResults
+			) ), null );
+
+		this._state.clear( model );
+		this._state.results.addMany( Array.from( results ) );
+		this._state.highlightedResult = results.get( 0 );
+
+		if ( typeof callbackOrText === 'string' ) {
+			this._state.searchText = callbackOrText;
+		}
+
+		this._state.matchCase = !!matchCase;
+		this._state.matchWholeWords = !!wholeWords;
+
+		return {
+			results,
+			findCallback
+		};
+	}
+}