@ckeditor/ckeditor5-find-and-replace 29.2.0 → 32.0.0

package/lang/translations/zh.po

@@ -0,0 +1,69 @@
+# Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+#
+#                                     !!! IMPORTANT !!!
+#
+#         Before you edit this file, please keep in mind that contributing to the project
+#                translations is possible ONLY via the Transifex online service.
+#
+#         To submit your translations, visit https://www.transifex.com/ckeditor/ckeditor5.
+#
+#                   To learn more, check out the official contributor's guide:
+#     https://ckeditor.com/docs/ckeditor5/latest/framework/guides/contributing/contributing.html
+#
+msgid ""
+msgstr ""
+"Language-Team: Chinese (Taiwan) (https://www.transifex.com/ckeditor/teams/11143/zh_TW/)\n"
+"Language: zh_TW\n"
+"Plural-Forms: nplurals=1; plural=0;\n"
+
+msgctxt "The tooltip of a find and replace button in the toolbar. Also, the title of the find and replace form."
+msgid "Find and replace"
+msgstr "尋找和取代"
+
+msgctxt "The label for the searched text in the find and replace dropdown."
+msgid "Find in text…"
+msgstr "在文本中尋找"
+
+msgctxt "The label for the find action button in the find and replace dropdown."
+msgid "Find"
+msgstr "尋找"
+
+msgctxt "The label for the previous result button in the find and replace dropdown."
+msgid "Previous result"
+msgstr "前一個結果"
+
+msgctxt "The label for the previous result button in the find and replace dropdown."
+msgid "Next result"
+msgstr "後一個結果"
+
+msgctxt "The label for the (single) replace action button in the find and replace dropdown."
+msgid "Replace"
+msgstr "取代"
+
+msgctxt "The label for the replace all action button in the find and replace dropdown."
+msgid "Replace all"
+msgstr "全部取代"
+
+msgctxt "The label for the match case checkbox in the find and replace dropdown."
+msgid "Match case"
+msgstr "大小寫需相符"
+
+msgctxt "The label for the whole words only checkbox in the find and replace dropdown."
+msgid "Whole words only"
+msgstr ""
+
+msgctxt "The label for the text replacement in the find and replace dropdown."
+msgid "Replace with…"
+msgstr "以…替代"
+
+msgctxt "An error text displayed when user attempted to find an empty text."
+msgid "Text to find must not be empty."
+msgstr "不能查找空字串"
+
+msgctxt "A message displayed next to the replace field when disabled but user tries to use it."
+msgid "Tip: Find some text first in order to replace it."
+msgstr "提示：先查找字串再取代"
+
+msgctxt "The label and a tooltip of the options dropdown button in the find and replace form."
+msgid "Show options"
+msgstr "顯示設定"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-find-and-replace",
-  "version": "29.2.0",
+  "version": "32.0.0",
   "description": "Find and replace feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -12,32 +12,33 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-ui": "^29.2.0",
-    "@ckeditor/ckeditor5-utils": "^29.2.0",
-    "ckeditor5": "^29.2.0",
+    "@ckeditor/ckeditor5-ui": "^32.0.0",
+    "@ckeditor/ckeditor5-utils": "^32.0.0",
+    "ckeditor5": "^32.0.0",
     "lodash-es": "^4.17.15"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-dev-utils": "^25.4.0",
-    "@ckeditor/ckeditor5-basic-styles": "^29.2.0",
-    "@ckeditor/ckeditor5-core": "^29.2.0",
-    "@ckeditor/ckeditor5-editor-classic": "^29.2.0",
-    "@ckeditor/ckeditor5-editor-decoupled": "^29.2.0",
-    "@ckeditor/ckeditor5-engine": "^29.2.0",
-    "@ckeditor/ckeditor5-essentials": "^29.2.0",
-    "@ckeditor/ckeditor5-heading": "^29.2.0",
-    "@ckeditor/ckeditor5-font": "^29.2.0",
-    "@ckeditor/ckeditor5-highlight": "^29.2.0",
-    "@ckeditor/ckeditor5-link": "^29.2.0",
-    "@ckeditor/ckeditor5-list": "^29.2.0",
-    "@ckeditor/ckeditor5-paragraph": "^29.2.0",
-    "@ckeditor/ckeditor5-source-editing": "^29.2.0",
-    "@ckeditor/ckeditor5-theme-lark": "^29.2.0",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11"
+    "@ckeditor/ckeditor5-dev-utils": "^27.1.0",
+    "@ckeditor/ckeditor5-basic-styles": "^32.0.0",
+    "@ckeditor/ckeditor5-core": "^32.0.0",
+    "@ckeditor/ckeditor5-editor-classic": "^32.0.0",
+    "@ckeditor/ckeditor5-editor-decoupled": "^32.0.0",
+    "@ckeditor/ckeditor5-engine": "^32.0.0",
+    "@ckeditor/ckeditor5-essentials": "^32.0.0",
+    "@ckeditor/ckeditor5-heading": "^32.0.0",
+    "@ckeditor/ckeditor5-font": "^32.0.0",
+    "@ckeditor/ckeditor5-highlight": "^32.0.0",
+    "@ckeditor/ckeditor5-link": "^32.0.0",
+    "@ckeditor/ckeditor5-list": "^32.0.0",
+    "@ckeditor/ckeditor5-paragraph": "^32.0.0",
+    "@ckeditor/ckeditor5-source-editing": "^32.0.0",
+    "@ckeditor/ckeditor5-theme-lark": "^32.0.0",
+    "@ckeditor/ckeditor5-undo": "^32.0.0",
+    "webpack": "^5.58.1",
+    "webpack-cli": "^4.9.0"
   },
   "engines": {
-    "node": ">=12.0.0",
+    "node": ">=14.0.0",
     "npm": ">=5.7.1"
   },
   "author": "CKSource (http://cksource.com/)",

package/src/findandreplace.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/src/findandreplaceediting.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
@@ -94,7 +94,13 @@ export default class FindAndReplaceEditing extends Plugin {
 	 * @inheritDoc
 	 */
 	init() {
-		this.activeResults = null;
+		/**
+		 * 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.
@@ -138,6 +144,7 @@ export default class FindAndReplaceEditing extends Plugin {
 		// 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;
@@ -163,19 +170,19 @@ export default class FindAndReplaceEditing extends Plugin {
 
 		const { findCallback, results } = editor.execute( 'find', callbackOrText );
 
-		this.activeResults = results;
+		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 ) );
+		this.listenTo( model.document, 'change:data', () => onDocumentChange( this._activeResults, model, findCallback ) );
 
-		return this.activeResults;
+		return this._activeResults;
 	}
 
 	/**
 	 * Stops active results from updating, and clears out the results.
 	 */
 	stop() {
-		if ( !this.activeResults ) {
+		if ( !this._activeResults ) {
 			return;
 		}
 
@@ -183,10 +190,12 @@ export default class FindAndReplaceEditing extends Plugin {
 
 		this.state.clear( this.editor.model );
 
-		this.activeResults = null;
+		this._activeResults = null;
 	}
 
 	/**
+	 * Sets up the commands.
+	 *
 	 * @private
 	 */
 	_defineCommands() {
@@ -198,6 +207,8 @@ export default class FindAndReplaceEditing extends Plugin {
 	}
 
 	/**
+	 * Sets up the marker downcast converters for search results highlighting.
+	 *
 	 * @private
 	 */
 	_defineConverters() {

package/src/findandreplacestate.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
@@ -12,13 +12,20 @@ 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.
 		 *
-		 * @private
+		 * @protected
+		 * @observable
 		 * @member {module:utils/collection~Collection} #results
 		 */
 		this.set( 'results', new Collection() );
@@ -94,6 +101,11 @@ export default class FindAndReplaceState {
 		} );
 	}
 
+	/**
+	 * Cleans the state up and removes markers from the model.
+	 *
+	 * @param {module:engine/model/model~Model} model
+	 */
 	clear( model ) {
 		this.searchText = '';
 

package/src/findandreplaceui.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
@@ -29,6 +29,9 @@ export default class FindAndReplaceUI extends Plugin {
 		return 'FindAndReplaceUI';
 	}
 
+	/**
+	 * @inheritDoc
+	 */
 	constructor( editor ) {
 		super( editor );
 
@@ -55,12 +58,12 @@ export default class FindAndReplaceUI extends Plugin {
 			dropdown.bind( 'isEnabled' ).to( editor.commands.get( 'find' ) );
 			dropdown.panelView.children.add( formView );
 
-			// Each 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.
+			// 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 editing root (to preserve it)
+			// 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 ) => {
@@ -73,7 +76,7 @@ export default class FindAndReplaceUI extends Plugin {
 
 					formView.enableCssTransitions();
 				} else {
-					editor.editing.view.focus();
+					formView.focus();
 
 					this.fire( 'searchReseted' );
 				}
@@ -87,8 +90,10 @@ export default class FindAndReplaceUI extends Plugin {
 	}
 
 	/**
+	 * Sets up the find and replace button.
+	 *
 	 * @private
-	 * @param {module:ui/dropdown/dropdownview~DropdownView} buttonView
+	 * @param {module:ui/dropdown/dropdownview~DropdownView} dropdown
 	 */
 	_setupDropdownButton( dropdown ) {
 		const editor = this.editor;
@@ -108,6 +113,8 @@ export default class FindAndReplaceUI extends Plugin {
 	}
 
 	/**
+	 * Sets up the form view for the find and replace.
+	 *
 	 * @private
 	 * @param {module:find-and-replace/ui/findandreplaceformview~FindAndReplaceFormView} formView A related form view.
 	 */

package/src/findcommand.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
@@ -20,6 +20,7 @@ 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 );
@@ -27,14 +28,16 @@ export default class FindCommand extends Command {
 		// The find command is always enabled.
 		this.isEnabled = true;
 
-		this.state = state;
+		// It does not affect data so should be enabled in read-only mode.
+		this.affectsData = false;
 
-		// 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', ( evt, name, value ) => {
-			if ( value ) {
-				this.clearForceDisabled( 'readOnlyMode' );
-			}
-		} );
+		/**
+		 * The find and replace state object used for command operations.
+		 *
+		 * @private
+		 * @member {module:find-and-replace/findandreplacestate~FindAndReplaceState} #_state
+		 */
+		this._state = state;
 	}
 
 	/**
@@ -44,6 +47,7 @@ export default class FindCommand extends Command {
 	 * @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 } = {} ) {
@@ -56,7 +60,7 @@ export default class FindCommand extends Command {
 		if ( typeof callbackOrText === 'string' ) {
 			findCallback = findByTextCallback( callbackOrText, { matchCase, wholeWords } );
 
-			this.state.searchText = callbackOrText;
+			this._state.searchText = callbackOrText;
 		} else {
 			findCallback = callbackOrText;
 		}
@@ -70,16 +74,16 @@ export default class FindCommand extends Command {
 				currentResults
 			) ), null );
 
-		this.state.clear( model );
-		this.state.results.addMany( Array.from( results ) );
-		this.state.highlightedResult = results.get( 0 );
+		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.searchText = callbackOrText;
 		}
 
-		this.state.matchCase = !!matchCase;
-		this.state.matchWholeWords = !!wholeWords;
+		this._state.matchCase = !!matchCase;
+		this._state.matchWholeWords = !!wholeWords;
 
 		return {
 			results,

package/src/findnextcommand.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
@@ -21,14 +21,18 @@ export default class FindNextCommand extends Command {
 	 * Creates a new `FindNextCommand` 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 );
 
+		// It does not affect data so should be enabled in read-only mode.
+		this.affectsData = false;
+
 		/**
 		 * The find and replace state object used for command operations.
 		 *
-		 * @private
+		 * @protected
 		 * @member {module:find-and-replace/findandreplacestate~FindAndReplaceState} #_state
 		 */
 		this._state = state;
@@ -38,19 +42,18 @@ export default class FindNextCommand extends Command {
 		this.listenTo( this._state.results, 'change', () => {
 			this.isEnabled = this._state.results.length > 1;
 		} );
-
-		// 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', ( evt, name, value ) => {
-			if ( value ) {
-				this.clearForceDisabled( 'readOnlyMode' );
-			}
-		} );
 	}
 
+	/**
+	 * @inheritDoc
+	 */
 	refresh() {
 		this.isEnabled = this._state.results.length > 1;
 	}
 
+	/**
+	 * @inheritDoc
+	 */
 	execute() {
 		const results = this._state.results;
 		const currentIndex = results.getIndex( this._state.highlightedResult );

package/src/findpreviouscommand.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
@@ -10,13 +10,16 @@
 import FindNextCommand from './findnextcommand';
 
 /**
- * The find next command. Moves the highlight to the next search result.
+ * The find previous command. Moves the highlight to the previous search result.
  *
  * It is used by the {@link module:find-and-replace/findandreplace~FindAndReplace find and replace feature}.
  *
  * @extends module:find-and-replace/findnextcommand~FindNextCommand
  */
 export default class FindPreviousCommand extends FindNextCommand {
+	/**
+	 * @inheritDoc
+	 */
 	execute() {
 		const results = this._state.results;
 		const currentIndex = results.getIndex( this._state.highlightedResult );

package/src/index.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/src/replaceallcommand.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
@@ -14,7 +14,7 @@ import ReplaceCommand from './replacecommand';
 /**
  * The replace all command. It is used by the {@link module:find-and-replace/findandreplace~FindAndReplace find and replace feature}.
  *
- * @extends module:core/command~Command
+ * @extends module:find-and-replace/replacecommand~ReplaceCommand
  */
 export default class ReplaceAllCommand extends ReplaceCommand {
 	/**
@@ -33,6 +33,8 @@ export default class ReplaceAllCommand extends ReplaceCommand {
 	 * @param {String} newText Text that will be inserted to the editor for each match.
 	 * @param {String|module:utils/collection~Collection} textToReplace Text to be replaced or a collection of matches
 	 * as returned by the find command.
+	 *
+	 * @fires module:core/command~Command#event:execute
 	 */
 	execute( newText, textToReplace ) {
 		const { editor } = this;

package/src/replacecommand.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
@@ -19,6 +19,7 @@ export default class ReplaceCommand extends Command {
 	 * Creates a new `ReplaceCommand` instance.
 	 *
 	 * @param {module:core/editor/editor~Editor} editor 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 );
@@ -29,7 +30,7 @@ export default class ReplaceCommand extends Command {
 		/**
 		 * The find and replace state object used for command operations.
 		 *
-		 * @private
+		 * @protected
 		 * @member {module:find-and-replace/findandreplacestate~FindAndReplaceState} #_state
 		 */
 		this._state = state;
@@ -40,6 +41,8 @@ export default class ReplaceCommand extends Command {
 	 *
 	 * @param {String} replacementText
 	 * @param {Object} result A single result from the find command.
+	 *
+	 * @fires module:core/command~Command#event:execute
 	 */
 	execute( replacementText, result ) {
 		const { model } = this.editor;
@@ -47,6 +50,13 @@ export default class ReplaceCommand extends Command {
 		model.change( writer => {
 			const range = result.marker.getRange();
 
+			// Don't replace a result (marker) that found its way into the $graveyard (e.g. removed by collaborators).
+			if ( range.root.rootName === '$graveyard' ) {
+				this._state.results.remove( result );
+
+				return;
+			}
+
 			let textAttributes = {};
 
 			for ( const item of range.getItems() ) {

package/src/ui/findandreplaceformview.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
@@ -28,7 +28,8 @@ import {
 	FocusTracker,
 	KeystrokeHandler,
 	Collection,
-	Rect
+	Rect,
+	isVisible
 } from 'ckeditor5/src/utils';
 
 // See: #8833.
@@ -353,6 +354,16 @@ export default class FindAndReplaceFormView extends View {
 		this._initKeystrokeHandling();
 	}
 
+	/**
+	 * @inheritDoc
+	 */
+	destroy() {
+		super.destroy();
+
+		this._focusTracker.destroy();
+		this._keystrokes.destroy();
+	}
+
 	/**
 	 * Focuses the fist {@link #_focusables} in the form.
 	 */
@@ -503,7 +514,7 @@ export default class FindAndReplaceFormView extends View {
 			const inputElement = this._findInputView.fieldView.element;
 
 			// Don't adjust the padding if the input (also: counter) were not rendered or not inserted into DOM yet.
-			if ( !inputElement || !inputElement.offsetParent ) {
+			if ( !inputElement || !isVisible( inputElement ) ) {
 				return;
 			}
 
@@ -725,7 +736,7 @@ export default class FindAndReplaceFormView extends View {
 					this._findButtonView.fire( 'execute' );
 				}
 				stopPropagationAndPreventDefault( event );
-			} else if ( target === this._replaceInputView.fieldView.element ) {
+			} else if ( target === this._replaceInputView.fieldView.element && !this.isDirty ) {
 				this._replaceButtonView.fire( 'execute' );
 				stopPropagationAndPreventDefault( event );
 			}