@ckeditor/ckeditor5-find-and-replace 41.1.0 → 41.3.0-alpha.0

package/lang/translations/pt.po

@@ -35,7 +35,7 @@ msgstr "Resultado anterior"
 
 msgctxt "The label for the previous result button in the find and replace dropdown."
 msgid "Next result"
-msgstr "Próximo resultado"
+msgstr "Resultado seguinte"
 
 msgctxt "The label for the (single) replace action button in the find and replace dropdown."
 msgid "Replace"
@@ -55,7 +55,7 @@ msgstr "Apenas palavras inteiras"
 
 msgctxt "The label for the text replacement in the find and replace dropdown."
 msgid "Replace with…"
-msgstr "Substituir com..."
+msgstr "Substituir por..."
 
 msgctxt "An error text displayed when user attempted to find an empty text."
 msgid "Text to find must not be empty."
@@ -68,3 +68,7 @@ msgstr "Dica: Encontre algum texto primeiro para poder substituí-lo."
 msgctxt "The label and the tooltip of the options dropdown button in the find and replace form."
 msgid "Advanced options"
 msgstr "Opções avançadas"
+
+msgctxt "Keystroke description for assistive technologies: keystroke for opening the find and replace UI."
+msgid "Find in the document"
+msgstr "Localizar no documento"

package/lang/translations/ro.po

@@ -68,3 +68,7 @@ msgstr "Sfat: Mai întâi găsiți textul pentru a-l înlocui."
 msgctxt "The label and the tooltip of the options dropdown button in the find and replace form."
 msgid "Advanced options"
 msgstr "Opțiuni avansate"
+
+msgctxt "Keystroke description for assistive technologies: keystroke for opening the find and replace UI."
+msgid "Find in the document"
+msgstr "Căutare în document"

package/lang/translations/ru.po

@@ -68,3 +68,7 @@ msgstr "Совет: сначала найдите текст, чтобы зам
 msgctxt "The label and the tooltip of the options dropdown button in the find and replace form."
 msgid "Advanced options"
 msgstr "Дополнительные параметры"
+
+msgctxt "Keystroke description for assistive technologies: keystroke for opening the find and replace UI."
+msgid "Find in the document"
+msgstr "Найти в документе"

package/lang/translations/sk.po

@@ -68,3 +68,7 @@ msgstr "Tip: Najskôr vyhľadajte text, ktorý následne môžete nahradiť."
 msgctxt "The label and the tooltip of the options dropdown button in the find and replace form."
 msgid "Advanced options"
 msgstr "Pokročilé nastavenia"
+
+msgctxt "Keystroke description for assistive technologies: keystroke for opening the find and replace UI."
+msgid "Find in the document"
+msgstr "Nájsť v dokumente"

package/lang/translations/sr-latn.po

@@ -68,3 +68,7 @@ msgstr "Savet: Prvo pronađjite neki tekst da biste ga zamenili."
 msgctxt "The label and the tooltip of the options dropdown button in the find and replace form."
 msgid "Advanced options"
 msgstr ""
+
+msgctxt "Keystroke description for assistive technologies: keystroke for opening the find and replace UI."
+msgid "Find in the document"
+msgstr ""

package/lang/translations/sr.po

@@ -68,3 +68,7 @@ msgstr "Савет: Прво пронађите неки текст да бис
 msgctxt "The label and the tooltip of the options dropdown button in the find and replace form."
 msgid "Advanced options"
 msgstr "Napredne opcije"
+
+msgctxt "Keystroke description for assistive technologies: keystroke for opening the find and replace UI."
+msgid "Find in the document"
+msgstr "Nađi u dokumentu"

package/lang/translations/sv.po

@@ -68,3 +68,7 @@ msgstr "Tips: Hitta någon text först för att ersätta den."
 msgctxt "The label and the tooltip of the options dropdown button in the find and replace form."
 msgid "Advanced options"
 msgstr "Avancerade alternativ"
+
+msgctxt "Keystroke description for assistive technologies: keystroke for opening the find and replace UI."
+msgid "Find in the document"
+msgstr "Hitta i dokumentet"

package/lang/translations/th.po

@@ -68,3 +68,7 @@ msgstr "เคล็ดลับ: ค้นหาข้อความบาง
 msgctxt "The label and the tooltip of the options dropdown button in the find and replace form."
 msgid "Advanced options"
 msgstr "ตัวเลือกขั้นสูง"
+
+msgctxt "Keystroke description for assistive technologies: keystroke for opening the find and replace UI."
+msgid "Find in the document"
+msgstr "ค้นหาในเอกสาร"

package/lang/translations/tr.po

@@ -68,3 +68,7 @@ msgstr "İpucu: Değiştirmek için önce bir metin bul."
 msgctxt "The label and the tooltip of the options dropdown button in the find and replace form."
 msgid "Advanced options"
 msgstr "Gelişmiş seçenekler"
+
+msgctxt "Keystroke description for assistive technologies: keystroke for opening the find and replace UI."
+msgid "Find in the document"
+msgstr "Belgede bul"

package/lang/translations/tt.po

@@ -68,3 +68,7 @@ msgstr ""
 msgctxt "The label and the tooltip of the options dropdown button in the find and replace form."
 msgid "Advanced options"
 msgstr ""
+
+msgctxt "Keystroke description for assistive technologies: keystroke for opening the find and replace UI."
+msgid "Find in the document"
+msgstr ""

package/lang/translations/ug.po

@@ -68,3 +68,7 @@ msgstr "ئەسكەرتىش: ئاۋال ئىزدەپ ئاندىن ئالماشت
 msgctxt "The label and the tooltip of the options dropdown button in the find and replace form."
 msgid "Advanced options"
 msgstr ""
+
+msgctxt "Keystroke description for assistive technologies: keystroke for opening the find and replace UI."
+msgid "Find in the document"
+msgstr ""

package/lang/translations/uk.po

@@ -68,3 +68,7 @@ msgstr "Порада: спочатку знайдіть текст, щоб за
 msgctxt "The label and the tooltip of the options dropdown button in the find and replace form."
 msgid "Advanced options"
 msgstr "Розширені опції"
+
+msgctxt "Keystroke description for assistive technologies: keystroke for opening the find and replace UI."
+msgid "Find in the document"
+msgstr "Пошук в документі"

package/lang/translations/ur.po

@@ -68,3 +68,7 @@ msgstr "نکتہ: تبدیل کرنے کے لیے پہلے متن کو تلاش
 msgctxt "The label and the tooltip of the options dropdown button in the find and replace form."
 msgid "Advanced options"
 msgstr ""
+
+msgctxt "Keystroke description for assistive technologies: keystroke for opening the find and replace UI."
+msgid "Find in the document"
+msgstr ""

package/lang/translations/vi.po

@@ -68,3 +68,7 @@ msgstr "Mẹo: Tìm một đoạn văn bản trước để thay thế."
 msgctxt "The label and the tooltip of the options dropdown button in the find and replace form."
 msgid "Advanced options"
 msgstr "Tùy chọn nâng cao"
+
+msgctxt "Keystroke description for assistive technologies: keystroke for opening the find and replace UI."
+msgid "Find in the document"
+msgstr "Tìm trong tài liệu"

package/lang/translations/zh-cn.po

@@ -68,3 +68,7 @@ msgstr "提示：先查找文本再替换"
 msgctxt "The label and the tooltip of the options dropdown button in the find and replace form."
 msgid "Advanced options"
 msgstr "高级选项"
+
+msgctxt "Keystroke description for assistive technologies: keystroke for opening the find and replace UI."
+msgid "Find in the document"
+msgstr "在文档中查找"

package/lang/translations/zh.po

@@ -68,3 +68,7 @@ msgstr "提示：先查找字串再取代"
 msgctxt "The label and the tooltip of the options dropdown button in the find and replace form."
 msgid "Advanced options"
 msgstr "進階選項"
+
+msgctxt "Keystroke description for assistive technologies: keystroke for opening the find and replace UI."
+msgid "Find in the document"
+msgstr "在文件中尋找"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-find-and-replace",
-  "version": "41.1.0",
+  "version": "41.3.0-alpha.0",
   "description": "Find and replace feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -13,8 +13,8 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-ui": "41.1.0",
-    "ckeditor5": "41.1.0",
+    "@ckeditor/ckeditor5-ui": "41.3.0-alpha.0",
+    "ckeditor5": "41.3.0-alpha.0",
     "lodash-es": "4.17.21"
   },
   "author": "CKSource (http://cksource.com/)",
@@ -27,6 +27,7 @@
     "directory": "packages/ckeditor5-find-and-replace"
   },
   "files": [
+    "dist",
     "lang",
     "src/**/*.js",
     "src/**/*.d.ts",

package/src/findandreplace.js

@@ -42,7 +42,7 @@ export default class FindAndReplace extends Plugin {
             // Data is contained only for the "find" button.
             if (data) {
                 state.searchText = data.searchText;
-                this.editor.execute('find', data.searchText, data);
+                findAndReplaceEditing.find(data.searchText, data);
             }
             else {
                 // Find next arrow button press.
@@ -51,7 +51,7 @@ export default class FindAndReplace extends Plugin {
         });
         ui.on('findPrevious', (event, data) => {
             if (data && state.searchText !== data.searchText) {
-                this.editor.execute('find', data.searchText);
+                findAndReplaceEditing.find(data.searchText);
             }
             else {
                 // Subsequent calls.
@@ -60,7 +60,7 @@ export default class FindAndReplace extends Plugin {
         });
         ui.on('replace', (event, data) => {
             if (state.searchText !== data.searchText) {
-                this.editor.execute('find', data.searchText);
+                findAndReplaceEditing.find(data.searchText);
             }
             const highlightedResult = state.highlightedResult;
             if (highlightedResult) {
@@ -70,7 +70,7 @@ export default class FindAndReplace extends Plugin {
         ui.on('replaceAll', (event, data) => {
             // The state hadn't been yet built for this search text.
             if (state.searchText !== data.searchText) {
-                this.editor.execute('find', data.searchText);
+                findAndReplaceEditing.find(data.searchText);
             }
             this.editor.execute('replaceAll', data.replaceText, state.results);
         });

package/src/findandreplaceediting.d.ts

@@ -6,9 +6,9 @@
  * @module find-and-replace/findandreplaceediting
  */
 import { Plugin } from 'ckeditor5/src/core.js';
-import type { Item } from 'ckeditor5/src/engine.js';
 import { type Collection } from 'ckeditor5/src/utils.js';
-import FindAndReplaceState from './findandreplacestate.js';
+import { type FindAttributes } from './findcommand.js';
+import FindAndReplaceState, { type FindCallback } from './findandreplacestate.js';
 import FindAndReplaceUtils from './findandreplaceutils.js';
 import type { ResultType } from './findandreplace.js';
 import '../theme/findandreplace.css';
@@ -25,18 +25,17 @@ export default class FindAndReplaceEditing extends Plugin {
      */
     static get pluginName(): "FindAndReplaceEditing";
     /**
-     * The collection of currently highlighted search results.
-     *
-     * @private
-     * @member {module:utils/collection~Collection} #_activeResults
+     * An object storing the find and replace state within a given editor instance.
      */
-    private _activeResults?;
+    state?: FindAndReplaceState;
     /**
-     * An object storing the find and replace state within a given editor instance.
+     * A flag that indicates that the user has started a search and the editor is listening for changes
+     * to the text on which it will perform an automatic search. Among other things, the mode is activated
+     * when the user first clicks 'Find' button and then later deactivated when the modal or search dropdown is closed.
      *
-     * @member {module:find-and-replace/findandreplacestate~FindAndReplaceState} #state
+     * @internal
      */
-    state?: FindAndReplaceState;
+    _isSearchActive: boolean;
     /**
      * @inheritDoc
      */
@@ -44,10 +43,7 @@ export default class FindAndReplaceEditing extends Plugin {
     /**
      * Initiate a search.
      */
-    find(callbackOrText: string | (({ item, text }: {
-        item: Item;
-        text: string;
-    }) => Array<ResultType>)): Collection<ResultType>;
+    find(callbackOrText: string | FindCallback, findAttributes?: FindAttributes): Collection<ResultType>;
     /**
      * Stops active results from updating, and clears out the results.
      */
@@ -60,4 +56,8 @@ export default class FindAndReplaceEditing extends Plugin {
      * Sets up the marker downcast converters for search results highlighting.
      */
     private _defineConverters;
+    /**
+     * Reacts to document changes in order to update search list.
+     */
+    private _onDocumentChange;
 }

package/src/findandreplaceediting.js

@@ -18,56 +18,82 @@ 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.
+ * Implements the editing part for find and replace plugin. For example conversion, commands etc.
  */
-function onDocumentChange(results, editor, searchCallback) {
-    const changedNodes = new Set();
-    const removedMarkers = new Set();
-    const model = editor.model;
-    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);
+export default 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));
             });
-        }
-        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)) {
+            // 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);
+                }
+            });
+            if (!this.state.highlightedResult && changedSearchResults.length) {
+                // If there are found phrases but none is selected, select the first one.
+                this.state.highlightedResult = changedSearchResults[0];
             }
-            writer.removeMarker(markerName);
-        });
-    });
-    // Run search callback again on updated nodes.
-    changedNodes.forEach(nodeToCheck => {
-        const findAndReplaceUtils = editor.plugins.get('FindAndReplaceUtils');
-        findAndReplaceUtils.updateFindResultFromRange(model.createRangeOn(nodeToCheck), model, searchCallback, results);
-    });
-}
-/**
- * Implements the editing part for find and replace plugin. For example conversion, commands etc.
- */
-export default class FindAndReplaceEditing extends Plugin {
+            else {
+                // If there is already highlight item then refresh highlight offset after appending new items.
+                this.state.refreshHighlightOffset();
+            }
+        };
+    }
     /**
      * @inheritDoc
      */
@@ -84,8 +110,8 @@ export default class FindAndReplaceEditing extends Plugin {
      * @inheritDoc
      */
     init() {
-        this._activeResults = null;
         this.state = new FindAndReplaceState(this.editor.model);
+        this.set('_isSearchActive', false);
         this._defineConverters();
         this._defineCommands();
         this.listenTo(this.state, 'change:highlightedResult', (eventInfo, name, newValue, oldValue) => {
@@ -125,29 +151,29 @@ export default class FindAndReplaceEditing extends Plugin {
         // 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);
+        this.on('change:_isSearchActive', (evt, name, isSearchActive) => {
+            if (isSearchActive) {
+                this.listenTo(this.editor.model.document, 'change:data', this._onDocumentChange);
+            }
+            else {
+                this.stopListening(this.editor.model.document, 'change:data', this._onDocumentChange);
+            }
+        });
     }
     /**
      * Initiate a search.
      */
-    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, editor, findCallback));
-        return this._activeResults;
+    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() {
-        if (!this._activeResults) {
-            return;
-        }
-        this.stopListening(this.editor.model.document);
         this.state.clear(this.editor.model);
-        this._activeResults = null;
+        this._isSearchActive = false;
     }
     /**
      * Sets up the commands.

package/src/findandreplacestate.d.ts

@@ -5,7 +5,7 @@
 /**
  * @module find-and-replace/findandreplacestate
  */
-import type { Model } from 'ckeditor5/src/engine.js';
+import type { Model, Item } from 'ckeditor5/src/engine.js';
 import { Collection } from 'ckeditor5/src/utils.js';
 import type { ResultType } from './findandreplace.js';
 declare const FindAndReplaceState_base: {
@@ -29,6 +29,13 @@ export default class FindAndReplaceState extends FindAndReplaceState_base {
      * @observable
      */
     highlightedResult: ResultType | null;
+    /**
+     * Currently highlighted search result offset in {@link #results matched results}.
+     *
+     * @readonly
+     * @observable
+     */
+    highlightedOffset: number;
     /**
      * Searched text value.
      *
@@ -36,6 +43,14 @@ export default class FindAndReplaceState extends FindAndReplaceState_base {
      * @observable
      */
     searchText: string;
+    /**
+     *  The most recent search callback used by the feature to find matches.
+     *  It is used to re-run the search when user modifies the editor content.
+     *
+     * @readonly
+     * @observable
+     */
+    lastSearchCallback: FindCallback | null;
     /**
      * Replace text value.
      *
@@ -65,5 +80,16 @@ export default class FindAndReplaceState extends FindAndReplaceState_base {
      * Cleans the state up and removes markers from the model.
      */
     clear(model: Model): void;
+    /**
+     * Refreshes the highlight result offset based on it's index within the result list.
+     */
+    refreshHighlightOffset(): void;
 }
+/**
+ * The callback function used to find matches in the document.
+ */
+export type FindCallback = (({ item, text }: {
+    item: Item;
+    text: string;
+}) => Array<ResultType>);
 export {};

package/src/findandreplacestate.js

@@ -14,8 +14,10 @@ export default class FindAndReplaceState extends ObservableMixin() {
         super();
         this.set('results', new Collection());
         this.set('highlightedResult', null);
+        this.set('highlightedOffset', 0);
         this.set('searchText', '');
         this.set('replaceText', '');
+        this.set('lastSearchCallback', null);
         this.set('matchCase', false);
         this.set('matchWholeWords', false);
         this.results.on('change', (eventInfo, { removed, index }) => {
@@ -37,6 +39,9 @@ export default class FindAndReplaceState extends ObservableMixin() {
                 }
             }
         });
+        this.on('change:highlightedResult', () => {
+            this.refreshHighlightOffset();
+        });
     }
     /**
      * Cleans the state up and removes markers from the model.
@@ -57,4 +62,19 @@ export default class FindAndReplaceState extends ObservableMixin() {
         });
         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;
+        }
+    }
 }

package/src/findandreplaceui.js

@@ -43,6 +43,7 @@ export default class FindAndReplaceUI extends Plugin {
         const editor = this.editor;
         const isUiUsingDropdown = editor.config.get('findAndReplace.uiType') === 'dropdown';
         const findCommand = editor.commands.get('find');
+        const t = this.editor.t;
         // Register the toolbar component: dropdown or button (that opens a dialog).
         editor.ui.componentFactory.add('findAndReplace', () => {
             let view;
@@ -82,6 +83,15 @@ export default class FindAndReplaceUI extends Plugin {
             });
             return view;
         });
+        // Add the information about the keystroke to the accessibility database.
+        editor.accessibility.addKeystrokeInfos({
+            keystrokes: [
+                {
+                    label: t('Find in the document'),
+                    keystroke: 'CTRL+F'
+                }
+            ]
+        });
     }
     /**
      * Creates a dropdown containing the find and replace form.
@@ -176,16 +186,7 @@ export default class FindAndReplaceUI extends Plugin {
         const commands = editor.commands;
         const findAndReplaceEditing = this.editor.plugins.get('FindAndReplaceEditing');
         const editingState = findAndReplaceEditing.state;
-        const sortMapping = { before: -1, same: 0, after: 1, different: 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;
-        });
+        formView.bind('highlightOffset').to(editingState, 'highlightedOffset');
         // Let the form know how many results were found in total.
         formView.listenTo(editingState.results, 'change', () => {
             formView.matchCount = editingState.results.length;

package/src/findandreplaceutils.js

@@ -37,6 +37,12 @@ export default class FindAndReplaceUtils extends Plugin {
      */
     updateFindResultFromRange(range, model, findCallback, startResults) {
         const results = startResults || new Collection();
+        const checkIfResultAlreadyOnList = (marker) => results.find(markerItem => {
+            const { marker: resultsMarker } = markerItem;
+            const resultRange = resultsMarker.getRange();
+            const markerRange = marker.getRange();
+            return resultRange.isEqual(markerRange);
+        });
         model.change(writer => {
             [...range].forEach(({ type, item }) => {
                 if (type === 'elementStart') {
@@ -56,11 +62,13 @@ export default class FindAndReplaceUtils extends Plugin {
                                 range: writer.createRange(writer.createPositionAt(item, foundItem.start), writer.createPositionAt(item, foundItem.end))
                             });
                             const index = findInsertIndex(results, marker);
-                            results.add({
-                                id: resultId,
-                                label: foundItem.label,
-                                marker
-                            }, index);
+                            if (!checkIfResultAlreadyOnList(marker)) {
+                                results.add({
+                                    id: resultId,
+                                    label: foundItem.label,
+                                    marker
+                                }, index);
+                            }
                         });
                     }
                 }