@ckeditor/ckeditor5-find-and-replace 41.4.2 → 42.0.0-alpha.1

package/dist/index.js

@@ -3,14 +3,156 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 import { icons, Plugin, Command } from '@ckeditor/ckeditor5-core/dist/index.js';
-import { View, submitHandler, CollapsibleView, SwitchButtonView, ButtonView, LabeledFieldView, createLabeledInputText, ViewCollection, FocusCycler, Dialog, DropdownView, createDropdown, FormHeaderView, MenuBarMenuListItemButtonView, DialogViewPosition, CssTransitionDisablerMixin } from '@ckeditor/ckeditor5-ui/dist/index.js';
+import { View, ViewCollection, FocusCycler, submitHandler, CollapsibleView, SwitchButtonView, ButtonView, LabeledFieldView, createLabeledInputText, Dialog, DropdownView, createDropdown, FormHeaderView, MenuBarMenuListItemButtonView, DialogViewPosition, CssTransitionDisablerMixin } from '@ckeditor/ckeditor5-ui/dist/index.js';
 import { FocusTracker, KeystrokeHandler, isVisible, Rect, Collection, ObservableMixin, uid, scrollViewportToShowTarget } from '@ckeditor/ckeditor5-utils/dist/index.js';
 import { escapeRegExp, debounce } from 'lodash-es';
 
-class FindAndReplaceFormView extends View {
+/**
+ * The find and replace form view class.
+ *
+ * See {@link module:find-and-replace/ui/findandreplaceformview~FindAndReplaceFormView}.
+ */ class FindAndReplaceFormView extends View {
+    /**
+	 * A collection of child views.
+	 */ children;
+    /**
+	 * The find in text input view that stores the searched string.
+	 *
+	 * @internal
+	 */ _findInputView;
+    /**
+	 * The replace input view.
+	 */ _replaceInputView;
+    /**
+	 * The find button view that initializes the search process.
+	 */ _findButtonView;
+    /**
+	 * The find previous button view.
+	 */ _findPrevButtonView;
+    /**
+	 * The find next button view.
+	 */ _findNextButtonView;
+    /**
+	 * A collapsible view aggregating the advanced search options.
+	 */ _advancedOptionsCollapsibleView;
+    /**
+	 * A switch button view controlling the "Match case" option.
+	 */ _matchCaseSwitchView;
+    /**
+	 * A switch button view controlling the "Whole words only" option.
+	 */ _wholeWordsOnlySwitchView;
+    /**
+	 * The replace button view.
+	 */ _replaceButtonView;
+    /**
+	 * The replace all button view.
+	 */ _replaceAllButtonView;
+    /**
+	 * The `div` aggregating the inputs.
+	 */ _inputsDivView;
+    /**
+	 * The `div` aggregating the action buttons.
+	 */ _actionButtonsDivView;
+    /**
+	 * Tracks information about the DOM focus in the form.
+	 */ _focusTracker;
+    /**
+	 * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+	 */ _keystrokes;
+    /**
+	 * A collection of views that can be focused in the form.
+	 */ _focusables;
+    /**
+	 * Helps cycling over {@link #_focusables} in the form.
+	 */ focusCycler;
+    /**
+	 * Creates a view of find and replace form.
+	 *
+	 * @param locale The localization services instance.
+	 */ constructor(locale){
+        super(locale);
+        const t = locale.t;
+        this.children = this.createCollection();
+        this.set('matchCount', 0);
+        this.set('highlightOffset', 0);
+        this.set('isDirty', false);
+        this.set('_areCommandsEnabled', {});
+        this.set('_resultsCounterText', '');
+        this.set('_matchCase', false);
+        this.set('_wholeWordsOnly', false);
+        this.bind('_searchResultsFound').to(this, 'matchCount', this, 'isDirty', (matchCount, isDirty)=>{
+            return matchCount > 0 && !isDirty;
+        });
+        this._findInputView = this._createInputField(t('Find in text…'));
+        this._findPrevButtonView = this._createButton({
+            label: t('Previous result'),
+            class: 'ck-button-prev',
+            icon: icons.previousArrow,
+            keystroke: 'Shift+F3',
+            tooltip: true
+        });
+        this._findNextButtonView = this._createButton({
+            label: t('Next result'),
+            class: 'ck-button-next',
+            icon: icons.previousArrow,
+            keystroke: 'F3',
+            tooltip: true
+        });
+        this._replaceInputView = this._createInputField(t('Replace with…'), 'ck-labeled-field-replace');
+        this._inputsDivView = this._createInputsDiv();
+        this._matchCaseSwitchView = this._createMatchCaseSwitch();
+        this._wholeWordsOnlySwitchView = this._createWholeWordsOnlySwitch();
+        this._advancedOptionsCollapsibleView = this._createAdvancedOptionsCollapsible();
+        this._replaceAllButtonView = this._createButton({
+            label: t('Replace all'),
+            class: 'ck-button-replaceall',
+            withText: true
+        });
+        this._replaceButtonView = this._createButton({
+            label: t('Replace'),
+            class: 'ck-button-replace',
+            withText: true
+        });
+        this._findButtonView = this._createButton({
+            label: t('Find'),
+            class: 'ck-button-find ck-button-action',
+            withText: true
+        });
+        this._actionButtonsDivView = this._createActionButtonsDiv();
+        this._focusTracker = new FocusTracker();
+        this._keystrokes = new KeystrokeHandler();
+        this._focusables = new ViewCollection();
+        this.focusCycler = new FocusCycler({
+            focusables: this._focusables,
+            focusTracker: this._focusTracker,
+            keystrokeHandler: this._keystrokes,
+            actions: {
+                // Navigate form fields backwards using the <kbd>Shift</kbd> + <kbd>Tab</kbd> keystroke.
+                focusPrevious: 'shift + tab',
+                // Navigate form fields forwards using the <kbd>Tab</kbd> key.
+                focusNext: 'tab'
+            }
+        });
+        this.children.addMany([
+            this._inputsDivView,
+            this._advancedOptionsCollapsibleView,
+            this._actionButtonsDivView
+        ]);
+        this.setTemplate({
+            tag: 'form',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-find-and-replace-form'
+                ],
+                tabindex: '-1'
+            },
+            children: this.children
+        });
+    }
     /**
-     * @inheritDoc
-     */ render() {
+	 * @inheritDoc
+	 */ render() {
         super.render();
         submitHandler({
             view: this
@@ -19,15 +161,15 @@ class FindAndReplaceFormView extends View {
         this._initKeystrokeHandling();
     }
     /**
-     * @inheritDoc
-     */ destroy() {
+	 * @inheritDoc
+	 */ destroy() {
         super.destroy();
         this._focusTracker.destroy();
         this._keystrokes.destroy();
     }
     /**
-     * @inheritDoc
-     */ focus(direction) {
+	 * @inheritDoc
+	 */ focus(direction) {
         if (direction === -1) {
             this.focusCycler.focusLast();
         } else {
@@ -35,31 +177,31 @@ class FindAndReplaceFormView extends View {
         }
     }
     /**
-     * Resets the form before re-appearing.
-     *
-     * It clears error messages, hides the match counter and disables the replace feature
-     * until the next hit of the "Find" button.
-     *
-     * **Note**: It does not reset inputs and options, though. This way the form works better in editors with
-     * disappearing toolbar (e.g. BalloonEditor): hiding the toolbar by accident (together with the find and replace UI)
-     * does not require filling the entire form again.
-     */ reset() {
+	 * Resets the form before re-appearing.
+	 *
+	 * It clears error messages, hides the match counter and disables the replace feature
+	 * until the next hit of the "Find" button.
+	 *
+	 * **Note**: It does not reset inputs and options, though. This way the form works better in editors with
+	 * disappearing toolbar (e.g. BalloonEditor): hiding the toolbar by accident (together with the find and replace UI)
+	 * does not require filling the entire form again.
+	 */ reset() {
         this._findInputView.errorText = null;
         this.isDirty = true;
     }
     /**
-     * Returns the value of the find input.
-     */ get _textToFind() {
+	 * Returns the value of the find input.
+	 */ get _textToFind() {
         return this._findInputView.fieldView.element.value;
     }
     /**
-     * Returns the value of the replace input.
-     */ get _textToReplace() {
+	 * Returns the value of the replace input.
+	 */ get _textToReplace() {
         return this._replaceInputView.fieldView.element.value;
     }
     /**
-     * Configures and returns the `<div>` aggregating all form inputs.
-     */ _createInputsDiv() {
+	 * Configures and returns the `<div>` aggregating all form inputs.
+	 */ _createInputsDiv() {
         const locale = this.locale;
         const t = locale.t;
         const inputsDivView = new View(locale);
@@ -99,8 +241,8 @@ class FindAndReplaceFormView extends View {
         return inputsDivView;
     }
     /**
-     * The action performed when the {@link #_findButtonView} is pressed.
-     */ _onFindButtonExecute() {
+	 * The action performed when the {@link #_findButtonView} is pressed.
+	 */ _onFindButtonExecute() {
         // When hitting "Find" in an empty input, an error should be displayed.
         // Also, if the form was "dirty", it should remain so.
         if (!this._textToFind) {
@@ -117,8 +259,8 @@ class FindAndReplaceFormView extends View {
         });
     }
     /**
-     * Configures an injects the find results counter displaying a "N of M" label of the {@link #_findInputView}.
-     */ _injectFindResultsCounter() {
+	 * Configures an injects the find results counter displaying a "N of M" label of the {@link #_findInputView}.
+	 */ _injectFindResultsCounter() {
         const locale = this.locale;
         const t = locale.t;
         const bind = this.bindTemplate;
@@ -175,8 +317,8 @@ class FindAndReplaceFormView extends View {
         this._findInputView.template.children[0].children.push(resultsCounterView);
     }
     /**
-     * Creates the collapsible view aggregating the advanced search options.
-     */ _createAdvancedOptionsCollapsible() {
+	 * Creates the collapsible view aggregating the advanced search options.
+	 */ _createAdvancedOptionsCollapsible() {
         const t = this.locale.t;
         const collapsible = new CollapsibleView(this.locale, [
             this._matchCaseSwitchView,
@@ -189,8 +331,8 @@ class FindAndReplaceFormView extends View {
         return collapsible;
     }
     /**
-     * Configures and returns the `<div>` element aggregating all form action buttons.
-     */ _createActionButtonsDiv() {
+	 * Configures and returns the `<div>` element aggregating all form action buttons.
+	 */ _createActionButtonsDiv() {
         const actionsDivView = new View(this.locale);
         this._replaceButtonView.bind('isEnabled').to(this, '_areCommandsEnabled', this, '_searchResultsFound', ({ replace }, resultsFound)=>replace && resultsFound);
         this._replaceAllButtonView.bind('isEnabled').to(this, '_areCommandsEnabled', this, '_searchResultsFound', ({ replaceAll }, resultsFound)=>replaceAll && resultsFound);
@@ -225,9 +367,9 @@ class FindAndReplaceFormView extends View {
         return actionsDivView;
     }
     /**
-     * Creates, configures and returns and instance of a dropdown allowing users to narrow
-     * the search criteria down. The dropdown has a list with switch buttons for each option.
-     */ _createMatchCaseSwitch() {
+	 * Creates, configures and returns and instance of a dropdown allowing users to narrow
+	 * the search criteria down. The dropdown has a list with switch buttons for each option.
+	 */ _createMatchCaseSwitch() {
         const t = this.locale.t;
         const matchCaseSwitchButton = new SwitchButtonView(this.locale);
         matchCaseSwitchButton.set({
@@ -246,9 +388,9 @@ class FindAndReplaceFormView extends View {
         return matchCaseSwitchButton;
     }
     /**
-     * Creates, configures and returns and instance of a dropdown allowing users to narrow
-     * the search criteria down. The dropdown has a list with switch buttons for each option.
-     */ _createWholeWordsOnlySwitch() {
+	 * Creates, configures and returns and instance of a dropdown allowing users to narrow
+	 * the search criteria down. The dropdown has a list with switch buttons for each option.
+	 */ _createWholeWordsOnlySwitch() {
         const t = this.locale.t;
         const wholeWordsOnlySwitchButton = new SwitchButtonView(this.locale);
         wholeWordsOnlySwitchButton.set({
@@ -267,9 +409,9 @@ class FindAndReplaceFormView extends View {
         return wholeWordsOnlySwitchButton;
     }
     /**
-     * Initializes the {@link #_focusables} and {@link #_focusTracker} to allow navigation
-     * using <kbd>Tab</kbd> and <kbd>Shift</kbd>+<kbd>Tab</kbd> keystrokes in the right order.
-     */ _initFocusCycling() {
+	 * Initializes the {@link #_focusables} and {@link #_focusTracker} to allow navigation
+	 * using <kbd>Tab</kbd> and <kbd>Shift</kbd>+<kbd>Tab</kbd> keystrokes in the right order.
+	 */ _initFocusCycling() {
         const childViews = [
             this._findInputView,
             this._findPrevButtonView,
@@ -290,8 +432,8 @@ class FindAndReplaceFormView extends View {
         });
     }
     /**
-     * Initializes the keystroke handling in the form.
-     */ _initKeystrokeHandling() {
+	 * Initializes the keystroke handling in the form.
+	 */ _initKeystrokeHandling() {
         const stopPropagation = (data)=>data.stopPropagation();
         const stopPropagationAndPreventDefault = (data)=>{
             data.stopPropagation();
@@ -346,131 +488,61 @@ class FindAndReplaceFormView extends View {
         this._keystrokes.set('arrowdown', stopPropagation);
     }
     /**
-     * Creates a button view.
-     *
-     * @param options The properties of the `ButtonView`.
-     * @returns The button view instance.
-     */ _createButton(options) {
+	 * Creates a button view.
+	 *
+	 * @param options The properties of the `ButtonView`.
+	 * @returns The button view instance.
+	 */ _createButton(options) {
         const button = new ButtonView(this.locale);
         button.set(options);
         return button;
     }
     /**
-     * Creates a labeled input view.
-     *
-     * @param label The input label.
-     * @returns The labeled input view instance.
-     */ _createInputField(label, className) {
+	 * Creates a labeled input view.
+	 *
+	 * @param label The input label.
+	 * @returns The labeled input view instance.
+	 */ _createInputField(label, className) {
         const labeledInput = new LabeledFieldView(this.locale, createLabeledInputText);
         labeledInput.label = label;
         labeledInput.class = className;
         return labeledInput;
     }
-    /**
-     * Creates a view of find and replace form.
-     *
-     * @param locale The localization services instance.
-     */ constructor(locale){
-        super(locale);
-        const t = locale.t;
-        this.children = this.createCollection();
-        this.set('matchCount', 0);
-        this.set('highlightOffset', 0);
-        this.set('isDirty', false);
-        this.set('_areCommandsEnabled', {});
-        this.set('_resultsCounterText', '');
-        this.set('_matchCase', false);
-        this.set('_wholeWordsOnly', false);
-        this.bind('_searchResultsFound').to(this, 'matchCount', this, 'isDirty', (matchCount, isDirty)=>{
-            return matchCount > 0 && !isDirty;
-        });
-        this._findInputView = this._createInputField(t('Find in text…'));
-        this._findPrevButtonView = this._createButton({
-            label: t('Previous result'),
-            class: 'ck-button-prev',
-            icon: icons.previousArrow,
-            keystroke: 'Shift+F3',
-            tooltip: true
-        });
-        this._findNextButtonView = this._createButton({
-            label: t('Next result'),
-            class: 'ck-button-next',
-            icon: icons.previousArrow,
-            keystroke: 'F3',
-            tooltip: true
-        });
-        this._replaceInputView = this._createInputField(t('Replace with…'), 'ck-labeled-field-replace');
-        this._inputsDivView = this._createInputsDiv();
-        this._matchCaseSwitchView = this._createMatchCaseSwitch();
-        this._wholeWordsOnlySwitchView = this._createWholeWordsOnlySwitch();
-        this._advancedOptionsCollapsibleView = this._createAdvancedOptionsCollapsible();
-        this._replaceAllButtonView = this._createButton({
-            label: t('Replace all'),
-            class: 'ck-button-replaceall',
-            withText: true
-        });
-        this._replaceButtonView = this._createButton({
-            label: t('Replace'),
-            class: 'ck-button-replace',
-            withText: true
-        });
-        this._findButtonView = this._createButton({
-            label: t('Find'),
-            class: 'ck-button-find ck-button-action',
-            withText: true
-        });
-        this._actionButtonsDivView = this._createActionButtonsDiv();
-        this._focusTracker = new FocusTracker();
-        this._keystrokes = new KeystrokeHandler();
-        this._focusables = new ViewCollection();
-        this.focusCycler = new FocusCycler({
-            focusables: this._focusables,
-            focusTracker: this._focusTracker,
-            keystrokeHandler: this._keystrokes,
-            actions: {
-                // Navigate form fields backwards using the <kbd>Shift</kbd> + <kbd>Tab</kbd> keystroke.
-                focusPrevious: 'shift + tab',
-                // Navigate form fields forwards using the <kbd>Tab</kbd> key.
-                focusNext: 'tab'
-            }
-        });
-        this.children.addMany([
-            this._inputsDivView,
-            this._advancedOptionsCollapsibleView,
-            this._actionButtonsDivView
-        ]);
-        this.setTemplate({
-            tag: 'form',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-find-and-replace-form'
-                ],
-                tabindex: '-1'
-            },
-            children: this.children
-        });
-    }
 }
 
 var loupeIcon = "<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>";
 
-class FindAndReplaceUI extends Plugin {
+/**
+ * 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.
+ */ class FindAndReplaceUI extends Plugin {
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             Dialog
         ];
     }
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'FindAndReplaceUI';
     }
     /**
-     * @inheritDoc
-     */ init() {
+	 * A reference to the find and replace form view.
+	 */ formView;
+    /**
+	 * @inheritDoc
+	 */ constructor(editor){
+        super(editor);
+        editor.config.define('findAndReplace.uiType', 'dialog');
+        this.formView = null;
+    }
+    /**
+	 * @inheritDoc
+	 */ init() {
         const editor = this.editor;
         const isUiUsingDropdown = editor.config.get('findAndReplace.uiType') === 'dropdown';
         const findCommand = editor.commands.get('find');
@@ -525,8 +597,8 @@ class FindAndReplaceUI extends Plugin {
         });
     }
     /**
-     * Creates a dropdown containing the find and replace form.
-     */ _createDropdown() {
+	 * Creates a dropdown containing the find and replace form.
+	 */ _createDropdown() {
         const editor = this.editor;
         const t = editor.locale.t;
         const dropdownView = createDropdown(editor.locale);
@@ -563,8 +635,8 @@ class FindAndReplaceUI extends Plugin {
         return dropdownView;
     }
     /**
-     * Creates a button that opens a dialog with the find and replace form.
-     */ _createDialogButtonForToolbar() {
+	 * Creates a button that opens a dialog with the find and replace form.
+	 */ _createDialogButtonForToolbar() {
         const editor = this.editor;
         const buttonView = this._createButton(ButtonView);
         const dialog = editor.plugins.get('Dialog');
@@ -587,8 +659,8 @@ class FindAndReplaceUI extends Plugin {
         return buttonView;
     }
     /**
-     * Creates a button for for menu bar that will show find and replace dialog.
-     */ _createDialogButtonForMenuBar() {
+	 * Creates a button for for menu bar that will show find and replace dialog.
+	 */ _createDialogButtonForMenuBar() {
         const buttonView = this._createButton(MenuBarMenuListItemButtonView);
         const dialogPlugin = this.editor.plugins.get('Dialog');
         buttonView.on('execute', ()=>{
@@ -601,8 +673,8 @@ class FindAndReplaceUI extends Plugin {
         return buttonView;
     }
     /**
-     * Creates a button for find and replace command to use either in toolbar or in menu bar.
-     */ _createButton(ButtonClass) {
+	 * Creates a button for find and replace command to use either in toolbar or in menu bar.
+	 */ _createButton(ButtonClass) {
         const editor = this.editor;
         const findCommand = editor.commands.get('find');
         const buttonView = new ButtonClass(editor.locale);
@@ -617,8 +689,8 @@ class FindAndReplaceUI extends Plugin {
         return buttonView;
     }
     /**
-     * Shows the find and replace dialog.
-     */ _showDialog() {
+	 * Shows the find and replace dialog.
+	 */ _showDialog() {
         const editor = this.editor;
         const dialog = editor.plugins.get('Dialog');
         const t = editor.locale.t;
@@ -639,10 +711,10 @@ class FindAndReplaceUI extends Plugin {
         });
     }
     /**
-     * Sets up the form view for the find and replace.
-     *
-     * @param formView A related form view.
-     */ _createFormView() {
+	 * Sets up the form view for the find and replace.
+	 *
+	 * @param formView A related form view.
+	 */ _createFormView() {
         const editor = this.editor;
         const formView = new (CssTransitionDisablerMixin(FindAndReplaceFormView))(editor.locale);
         const commands = editor.commands;
@@ -678,33 +750,44 @@ class FindAndReplaceUI extends Plugin {
         return formView;
     }
     /**
-     * Clears the find and replace form and focuses the search text field.
-     */ _setupFormView() {
+	 * Clears the find and replace form and focuses the search text field.
+	 */ _setupFormView() {
         this.formView.disableCssTransitions();
         this.formView.reset();
         this.formView._findInputView.fieldView.select();
         this.formView.enableCssTransitions();
     }
+}
+
+/**
+ * The find command. It is used by the {@link module:find-and-replace/findandreplace~FindAndReplace find and replace feature}.
+ */ class FindCommand extends Command {
     /**
-     * @inheritDoc
-     */ constructor(editor){
+	 * The find and replace state object used for command operations.
+	 */ _state;
+    /**
+	 * Creates a new `FindCommand` instance.
+	 *
+	 * @param editor The editor on which this command will be used.
+	 * @param state An object to hold plugin state.
+	 */ constructor(editor, state){
         super(editor);
-        editor.config.define('findAndReplace.uiType', 'dialog');
-        this.formView = null;
+        // The find command is always enabled.
+        this.isEnabled = true;
+        // It does not affect data so should be enabled in read-only mode.
+        this.affectsData = false;
+        this._state = state;
     }
-}
-
-class FindCommand extends Command {
-    /**
-     * Executes the command.
-     *
-     * @param callbackOrText
-     * @param options Options object.
-     * @param options.matchCase If set to `true`, the letter case will be matched.
-     * @param options.wholeWords If set to `true`, only whole words that match `callbackOrText` will be matched.
-     *
-     * @fires execute
-     */ execute(callbackOrText, { matchCase, wholeWords } = {}) {
+    /**
+	 * Executes the command.
+	 *
+	 * @param callbackOrText
+	 * @param options Options object.
+	 * @param options.matchCase If set to `true`, the letter case will be matched.
+	 * @param options.wholeWords 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;
         const findAndReplaceUtils = editor.plugins.get('FindAndReplaceUtils');
@@ -737,28 +820,31 @@ class FindCommand extends Command {
             findCallback
         };
     }
+}
+
+class ReplaceCommandBase extends Command {
     /**
-     * Creates a new `FindCommand` instance.
-     *
-     * @param editor The editor on which this command will be used.
-     * @param state An object to hold plugin state.
-     */ constructor(editor, state){
+	 * The find and replace state object used for command operations.
+	 */ _state;
+    /**
+	 * Creates a new `ReplaceCommand` instance.
+	 *
+	 * @param editor Editor on which this command will be used.
+	 * @param state An object to hold plugin state.
+	 */ constructor(editor, state){
         super(editor);
-        // The find command is always enabled.
+        // The replace command is always enabled.
         this.isEnabled = true;
-        // It does not affect data so should be enabled in read-only mode.
-        this.affectsData = false;
         this._state = state;
+        // Since this command executes on particular result independent of selection, it should be checked directly in execute block.
+        this._isEnabledBasedOnSelection = false;
     }
-}
-
-class ReplaceCommandBase extends Command {
     /**
-     * Common logic for both `replace` commands.
-     * Replace a given find result by a string or a callback.
-     *
-     * @param result A single result from the find command.
-     */ _replace(replacementText, result) {
+	 * Common logic for both `replace` commands.
+	 * Replace a given find result by a string or a callback.
+	 *
+	 * @param result A single result from the find command.
+	 */ _replace(replacementText, result) {
         const { model } = this.editor;
         const range = result.marker.getRange();
         // Don't replace a result that is in non-editable place.
@@ -784,53 +870,44 @@ class ReplaceCommandBase extends Command {
             }
         });
     }
-    /**
-     * Creates a new `ReplaceCommand` instance.
-     *
-     * @param editor Editor on which this command will be used.
-     * @param state An object to hold plugin state.
-     */ constructor(editor, state){
-        super(editor);
-        // The replace command is always enabled.
-        this.isEnabled = true;
-        this._state = state;
-        // Since this command executes on particular result independent of selection, it should be checked directly in execute block.
-        this._isEnabledBasedOnSelection = false;
-    }
 }
 
-class ReplaceCommand extends ReplaceCommandBase {
-    /**
-     * Replace a given find result by a string or a callback.
-     *
-     * @param result A single result from the find command.
-     *
-     * @fires execute
-     */ execute(replacementText, result) {
+/**
+ * The replace command. It is used by the {@link module:find-and-replace/findandreplace~FindAndReplace find and replace feature}.
+ */ class ReplaceCommand extends ReplaceCommandBase {
+    /**
+	 * Replace a given find result by a string or a callback.
+	 *
+	 * @param result A single result from the find command.
+	 *
+	 * @fires execute
+	 */ execute(replacementText, result) {
         this._replace(replacementText, result);
     }
 }
 
-class ReplaceAllCommand extends ReplaceCommandBase {
-    /**
-     * Replaces all the occurrences of `textToReplace` with a given `newText` string.
-     *
-     * ```ts
-     *	replaceAllCommand.execute( 'replaceAll', 'new text replacement', 'text to replace' );
-     * ```
-     *
-     * Alternatively you can call it from editor instance:
-     *
-     * ```ts
-     *	editor.execute( 'replaceAll', 'new text', 'old text' );
-     * ```
-     *
-     * @param newText Text that will be inserted to the editor for each match.
-     * @param 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) {
+/**
+ * The replace all command. It is used by the {@link module:find-and-replace/findandreplace~FindAndReplace find and replace feature}.
+ */ class ReplaceAllCommand extends ReplaceCommandBase {
+    /**
+	 * Replaces all the occurrences of `textToReplace` with a given `newText` string.
+	 *
+	 * ```ts
+	 *	replaceAllCommand.execute( 'replaceAll', 'new text replacement', 'text to replace' );
+	 * ```
+	 *
+	 * Alternatively you can call it from editor instance:
+	 *
+	 * ```ts
+	 *	editor.execute( 'replaceAll', 'new text', 'old text' );
+	 * ```
+	 *
+	 * @param newText Text that will be inserted to the editor for each match.
+	 * @param 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;
         const { model } = editor;
         const findAndReplaceUtils = editor.plugins.get('FindAndReplaceUtils');
@@ -849,26 +926,20 @@ class ReplaceAllCommand extends ReplaceCommandBase {
     }
 }
 
-class FindNextCommand extends Command {
-    /**
-     * @inheritDoc
-     */ refresh() {
-        this.isEnabled = this._state.results.length > 1;
-    }
+/**
+ * The find next command. Moves the highlight to the next search result.
+ *
+ * It is used by the {@link module:find-and-replace/findandreplace~FindAndReplace find and replace feature}.
+ */ class FindNextCommand extends Command {
     /**
-     * @inheritDoc
-     */ execute() {
-        const results = this._state.results;
-        const currentIndex = results.getIndex(this._state.highlightedResult);
-        const nextIndex = currentIndex + 1 >= results.length ? 0 : currentIndex + 1;
-        this._state.highlightedResult = this._state.results.get(nextIndex);
-    }
+	 * The find and replace state object used for command operations.
+	 */ _state;
     /**
-     * Creates a new `FindNextCommand` instance.
-     *
-     * @param editor The editor on which this command will be used.
-     * @param state An object to hold plugin state.
-     */ constructor(editor, state){
+	 * Creates a new `FindNextCommand` instance.
+	 *
+	 * @param editor The editor on which this command will be used.
+	 * @param 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;
@@ -878,12 +949,29 @@ class FindNextCommand extends Command {
             this.isEnabled = this._state.results.length > 1;
         });
     }
+    /**
+	 * @inheritDoc
+	 */ refresh() {
+        this.isEnabled = this._state.results.length > 1;
+    }
+    /**
+	 * @inheritDoc
+	 */ execute() {
+        const results = this._state.results;
+        const currentIndex = results.getIndex(this._state.highlightedResult);
+        const nextIndex = currentIndex + 1 >= results.length ? 0 : currentIndex + 1;
+        this._state.highlightedResult = this._state.results.get(nextIndex);
+    }
 }
 
-class FindPreviousCommand extends FindNextCommand {
+/**
+ * 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}.
+ */ class FindPreviousCommand extends FindNextCommand {
     /**
-     * @inheritDoc
-     */ execute() {
+	 * @inheritDoc
+	 */ execute() {
         const results = this._state.results;
         const currentIndex = results.getIndex(this._state.highlightedResult);
         const previousIndex = currentIndex - 1 < 0 ? this._state.results.length - 1 : currentIndex - 1;
@@ -891,46 +979,12 @@ class FindPreviousCommand extends FindNextCommand {
     }
 }
 
-class FindAndReplaceState extends ObservableMixin() {
-    /**
-     * Cleans the state up and removes markers from the 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();
-    }
-    /**
-     * Refreshes the highlight result offset based on it's index within the result list.
-     */ refreshHighlightOffset() {
-        const { highlightedResult, results } = this;
-        const sortMapping = {
-            before: -1,
-            same: 0,
-            after: 1,
-            different: 1
-        };
-        if (highlightedResult) {
-            this.highlightedOffset = Array.from(results).sort((a, b)=>sortMapping[a.marker.getStart().compareWith(b.marker.getStart())]).indexOf(highlightedResult) + 1;
-        } else {
-            this.highlightedOffset = 0;
-        }
-    }
+/**
+ * The object storing find and replace plugin state for a given editor instance.
+ */ class FindAndReplaceState extends /* #__PURE__ */ ObservableMixin() {
     /**
-     * Creates an instance of the state.
-     */ constructor(model){
+	 * Creates an instance of the state.
+	 */ constructor(model){
         super();
         this.set('results', new Collection());
         this.set('highlightedResult', null);
@@ -963,34 +1017,72 @@ class FindAndReplaceState extends ObservableMixin() {
             this.refreshHighlightOffset();
         });
     }
+    /**
+	 * Cleans the state up and removes markers from the 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();
+    }
+    /**
+	 * Refreshes the highlight result offset based on it's index within the result list.
+	 */ refreshHighlightOffset() {
+        const { highlightedResult, results } = this;
+        const sortMapping = {
+            before: -1,
+            same: 0,
+            after: 1,
+            different: 1
+        };
+        if (highlightedResult) {
+            this.highlightedOffset = Array.from(results).sort((a, b)=>sortMapping[a.marker.getStart().compareWith(b.marker.getStart())]).indexOf(highlightedResult) + 1;
+        } else {
+            this.highlightedOffset = 0;
+        }
+    }
 }
 
-class FindAndReplaceUtils extends Plugin {
+/**
+ * A set of helpers related to find and replace.
+ */ class FindAndReplaceUtils extends Plugin {
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'FindAndReplaceUtils';
     }
     /**
-     * Executes findCallback and updates search results list.
-     *
-     * @param range The model range to scan for matches.
-     * @param model The model.
-     * @param findCallback The callback that should return `true` if provided text matches the search term.
-     * @param 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 A collection of objects describing find match.
-     *
-     * An example structure:
-     *
-     * ```js
-     * {
-     *	id: resultId,
-     *	label: foundItem.label,
-     *	marker
-     *	}
-     * ```
-     */ updateFindResultFromRange(range, model, findCallback, startResults) {
+	 * Executes findCallback and updates search results list.
+	 *
+	 * @param range The model range to scan for matches.
+	 * @param model The model.
+	 * @param findCallback The callback that should return `true` if provided text matches the search term.
+	 * @param 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 A collection of objects describing find match.
+	 *
+	 * An example structure:
+	 *
+	 * ```js
+	 * {
+	 *	id: resultId,
+	 *	label: foundItem.label,
+	 *	marker
+	 *	}
+	 * ```
+	 */ updateFindResultFromRange(range, model, findCallback, startResults) {
         const results = startResults || new Collection();
         const checkIfResultAlreadyOnList = (marker)=>results.find((markerItem)=>{
                 const { marker: resultsMarker } = markerItem;
@@ -1034,12 +1126,12 @@ class FindAndReplaceUtils extends Plugin {
         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 range The model range.
-     * @returns The text content of the provided range.
-     */ rangeToText(range) {
+	 * 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 range The model range.
+	 * @returns The text content of the provided range.
+	 */ 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'))) {
@@ -1051,13 +1143,13 @@ class FindAndReplaceUtils extends Plugin {
         }, '');
     }
     /**
-     * Creates a text matching callback for a specified search term and matching options.
-     *
-     * @param searchTerm The search term.
-     * @param options Matching options.
-     * 	- options.matchCase=false If set to `true` letter casing will be ignored.
-     * 	- options.wholeWords=false If set to `true` only whole words that match `callbackOrText` will be matched.
-     */ findByTextCallback(searchTerm, options) {
+	 * Creates a text matching callback for a specified search term and matching options.
+	 *
+	 * @param searchTerm The search term.
+	 * @param options Matching options.
+	 * 	- options.matchCase=false If set to `true` letter casing will be ignored.
+	 * 	- options.wholeWords=false If set to `true` only whole words that match `callbackOrText` will be matched.
+	 */ findByTextCallback(searchTerm, options) {
         let flags = 'gu';
         if (!options.matchCase) {
             flags += 'i';
@@ -1107,22 +1199,27 @@ function findInsertIndex(resultsList, markerToInsert) {
 }
 
 const HIGHLIGHT_CLASS = 'ck-find-result_selected';
-class FindAndReplaceEditing extends Plugin {
+/**
+ * Implements the editing part for find and replace plugin. For example conversion, commands etc.
+ */ class FindAndReplaceEditing extends Plugin {
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             FindAndReplaceUtils
         ];
     }
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'FindAndReplaceEditing';
     }
     /**
-     * @inheritDoc
-     */ init() {
+	 * An object storing the find and replace state within a given editor instance.
+	 */ state;
+    /**
+	 * @inheritDoc
+	 */ init() {
         this.state = new FindAndReplaceState(this.editor.model);
         this.set('_isSearchActive', false);
         this._defineConverters();
@@ -1174,21 +1271,21 @@ class FindAndReplaceEditing extends Plugin {
         });
     }
     /**
-     * Initiate a search.
-     */ find(callbackOrText, findAttributes) {
+	 * Initiate a search.
+	 */ find(callbackOrText, findAttributes) {
         this._isSearchActive = true;
         this.editor.execute('find', callbackOrText, findAttributes);
         return this.state.results;
     }
     /**
-     * Stops active results from updating, and clears out the results.
-     */ stop() {
+	 * Stops active results from updating, and clears out the results.
+	 */ stop() {
         this.state.clear(this.editor.model);
         this._isSearchActive = false;
     }
     /**
-     * Sets up the commands.
-     */ _defineCommands() {
+	 * Sets up the commands.
+	 */ _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));
@@ -1196,8 +1293,8 @@ class FindAndReplaceEditing extends Plugin {
         this.editor.commands.add('replaceAll', new ReplaceAllCommand(this.editor, this.state));
     }
     /**
-     * Sets up the marker downcast converters for search results highlighting.
-     */ _defineConverters() {
+	 * Sets up the marker downcast converters for search results highlighting.
+	 */ _defineConverters() {
         const { editor } = this;
         // Setup the marker highlighting conversion.
         editor.conversion.for('editingDowncast').markerToHighlight({
@@ -1237,99 +1334,105 @@ class FindAndReplaceEditing extends Plugin {
             }
         });
     }
-    constructor(){
-        super(...arguments);
-        /**
-         * Reacts to document changes in order to update search list.
-         */ this._onDocumentChange = ()=>{
-            const changedNodes = new Set();
-            const removedMarkers = new Set();
-            const model = this.editor.model;
-            const { results } = this.state;
-            const changes = model.document.differ.getChanges();
-            const changedMarkers = model.document.differ.getChangedMarkers();
-            // Get nodes in which changes happened to re-run a search callback on them.
-            changes.forEach((change)=>{
-                if (!change.position) {
-                    return;
-                }
-                if (change.name === '$text' || change.position.nodeAfter && 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' && change.position.nodeAfter) {
-                    changedNodes.add(change.position.nodeAfter);
-                }
-            });
-            // Get markers from removed nodes also.
-            changedMarkers.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 from the changed part of content.
-            removedMarkers.forEach((markerName)=>{
-                if (!results.has(markerName)) {
-                    return;
-                }
-                if (results.get(markerName) === this.state.highlightedResult) {
-                    this.state.highlightedResult = null;
-                }
-                results.remove(markerName);
-            });
-            // Run search callback again on updated nodes.
-            const changedSearchResults = [];
-            const findAndReplaceUtils = this.editor.plugins.get('FindAndReplaceUtils');
-            changedNodes.forEach((nodeToCheck)=>{
-                const changedNodeSearchResults = findAndReplaceUtils.updateFindResultFromRange(model.createRangeOn(nodeToCheck), model, this.state.lastSearchCallback, results);
+    /**
+	 * Reacts to document changes in order to update search list.
+	 */ _onDocumentChange = ()=>{
+        const changedNodes = new Set();
+        const removedMarkers = new Set();
+        const model = this.editor.model;
+        const { results } = this.state;
+        const changes = model.document.differ.getChanges();
+        const changedMarkers = model.document.differ.getChangedMarkers();
+        // Get nodes in which changes happened to re-run a search callback on them.
+        changes.forEach((change)=>{
+            if (!change.position) {
+                return;
+            }
+            if (change.name === '$text' || change.position.nodeAfter && 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' && change.position.nodeAfter) {
+                changedNodes.add(change.position.nodeAfter);
+            }
+        });
+        // Get markers from removed nodes also.
+        changedMarkers.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 from the changed part of content.
+        removedMarkers.forEach((markerName)=>{
+            if (!results.has(markerName)) {
+                return;
+            }
+            if (results.get(markerName) === this.state.highlightedResult) {
+                this.state.highlightedResult = null;
+            }
+            results.remove(markerName);
+        });
+        // Run search callback again on updated nodes.
+        const changedSearchResults = [];
+        const findAndReplaceUtils = this.editor.plugins.get('FindAndReplaceUtils');
+        changedNodes.forEach((nodeToCheck)=>{
+            const changedNodeSearchResults = findAndReplaceUtils.updateFindResultFromRange(model.createRangeOn(nodeToCheck), model, this.state.lastSearchCallback, results);
+            changedSearchResults.push(...changedNodeSearchResults);
+        });
+        changedMarkers.forEach((markerToCheck)=>{
+            // Handle search result highlight update when T&C plugin is active.
+            // Lookup is performed only on newly inserted markers.
+            if (markerToCheck.data.newRange) {
+                const changedNodeSearchResults = findAndReplaceUtils.updateFindResultFromRange(markerToCheck.data.newRange, model, this.state.lastSearchCallback, results);
                 changedSearchResults.push(...changedNodeSearchResults);
-            });
-            changedMarkers.forEach((markerToCheck)=>{
-                // Handle search result highlight update when T&C plugin is active.
-                // Lookup is performed only on newly inserted markers.
-                if (markerToCheck.data.newRange) {
-                    const changedNodeSearchResults = findAndReplaceUtils.updateFindResultFromRange(markerToCheck.data.newRange, model, this.state.lastSearchCallback, results);
-                    changedSearchResults.push(...changedNodeSearchResults);
-                }
-            });
-            if (!this.state.highlightedResult && changedSearchResults.length) {
-                // If there are found phrases but none is selected, select the first one.
-                this.state.highlightedResult = changedSearchResults[0];
-            } else {
-                // If there is already highlight item then refresh highlight offset after appending new items.
-                this.state.refreshHighlightOffset();
             }
-        };
-    }
+        });
+        if (!this.state.highlightedResult && changedSearchResults.length) {
+            // If there are found phrases but none is selected, select the first one.
+            this.state.highlightedResult = changedSearchResults[0];
+        } else {
+            // If there is already highlight item then refresh highlight offset after appending new items.
+            this.state.refreshHighlightOffset();
+        }
+    };
 }
 
-class FindAndReplace extends Plugin {
+/**
+ * The find and replace plugin.
+ *
+ * For a detailed overview, check the {@glink features/find-and-replace Find and replace feature documentation}.
+ *
+ * This is a "glue" plugin which loads the following plugins:
+ *
+ * * The {@link module:find-and-replace/findandreplaceediting~FindAndReplaceEditing find and replace editing feature},
+ * * The {@link module:find-and-replace/findandreplaceui~FindAndReplaceUI find and replace UI feature}
+ */ class FindAndReplace extends Plugin {
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             FindAndReplaceEditing,
             FindAndReplaceUI
         ];
     }
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'FindAndReplace';
     }
     /**
-     * @inheritDoc
-     */ init() {
+	 * @inheritDoc
+	 */ init() {
         const ui = this.editor.plugins.get('FindAndReplaceUI');
         const findAndReplaceEditing = this.editor.plugins.get('FindAndReplaceEditing');
         const state = findAndReplaceEditing.state;