fix: match multiple occurrences

Author: yf-yang

packages/find-replace/src/lib/__tests__/decorateSearchHighlight/search/text.spec.ts

@@ -107,3 +107,91 @@ it('should decorate matching consecutive text nodes', () => {
     },
   ]);
 });
+
+it('should decorate matching multiple occurrences', () => {
+  const editor = createSlateEditor({
+    plugins: [FindReplacePlugin],
+  });
+
+  const plugin = editor.getPlugin(FindReplacePlugin);
+
+  editor.setOption(FindReplacePlugin, 'search', 'test');
+
+  expect(
+    plugin.decorate?.({
+      ...getEditorPlugin(editor, plugin),
+      entry: [
+        {
+          type: 'p',
+          children: [
+            { text: 'tes' },
+            { text: 'ts and tests and t', bold: true },
+            { text: 'ests' },
+          ],
+        },
+        [0],
+      ],
+    })
+  ).toEqual([
+    {
+      [FindReplacePlugin.key]: true,
+      anchor: {
+        offset: 0,
+        path: [0, 0],
+      },
+      focus: {
+        offset: 3,
+        path: [0, 0],
+      },
+      search: 'tes',
+    },
+    {
+      [FindReplacePlugin.key]: true,
+      anchor: {
+        offset: 0,
+        path: [0, 1],
+      },
+      focus: {
+        offset: 1,
+        path: [0, 1],
+      },
+      search: 't',
+    },
+    {
+      [FindReplacePlugin.key]: true,
+      anchor: {
+        offset: 7,
+        path: [0, 1],
+      },
+      focus: {
+        offset: 11,
+        path: [0, 1],
+      },
+      search: 'test',
+    },
+    {
+      [FindReplacePlugin.key]: true,
+      anchor: {
+        offset: 17,
+        path: [0, 1],
+      },
+      focus: {
+        offset: 18,
+        path: [0, 1],
+      },
+      search: 't',
+    },
+    {
+      [FindReplacePlugin.key]: true,
+      anchor: {
+        offset: 0,
+        path: [0, 2],
+      },
+      focus: {
+        offset: 3,
+        path: [0, 2],
+      },
+      search: 'est',
+    },
+  ]);
+});

packages/find-replace/src/lib/decorateFindReplace.ts

@@ -17,51 +17,76 @@ export const decorateFindReplace: Decorate<FindReplaceConfig> = ({
   }
 
   const texts = node.children.map((it) => it.text);
+  const str = texts.join('').toLowerCase();
+  const searchLower = search.toLowerCase();
+
+  let start = 0;
+  const matches: number[] = [];
+  while ((start = str.indexOf(searchLower, start)) !== -1) {
+    matches.push(start);
+    start += searchLower.length;
+  }
 
-  // Try to find a match
-  const matchStart = texts.join('').toLowerCase().indexOf(search.toLowerCase());
-  if (matchStart === -1) {
+  if (!matches.length) {
     return [];
   }
 
-  const matchEnd = matchStart + search.length;
-  let cumulativePosition = 0;
   const ranges: SearchRange[] = [];
+  let cumulativePosition = 0;
+  let matchIndex = 0; // Index in the matches array
 
-  for (const [i, text] of texts.entries()) {
+  for (const [textIndex, text] of texts.entries()) {
     const textStart = cumulativePosition;
-    const textEnd = cumulativePosition + text.length;
-
-    // Corresponding offsets within the text string
-    const overlapStart = Math.max(matchStart, textStart);
-    const overlapEnd = Math.min(matchEnd, textEnd);
-
-    if (overlapStart < overlapEnd) {
-      // Overlapping region exists
-      const anchorOffset = overlapStart - textStart;
-      const focusOffset = overlapEnd - textStart;
-
-      // Corresponding offsets within the search string
-      const searchOverlapStart = overlapStart - matchStart;
-      const searchOverlapEnd = overlapEnd - matchStart;
-
-      const textNodePath = [...path, i];
-
-      ranges.push({
-        anchor: {
-          path: textNodePath,
-          offset: anchorOffset,
-        },
-        focus: {
-          path: textNodePath,
-          offset: focusOffset,
-        },
-        search: search.substring(searchOverlapStart, searchOverlapEnd),
-        [type]: true,
-      });
+    const textEnd = textStart + text.length;
+
+    // Process matches that overlap with the current text node
+    while (matchIndex < matches.length && matches[matchIndex] < textEnd) {
+      const matchStart = matches[matchIndex];
+      const matchEnd = matchStart + search.length;
+
+      // If the match ends before the start of the current text, move to the next match
+      if (matchEnd <= textStart) {
+        matchIndex++;
+        continue;
+      }
+
+      // Calculate overlap between the text and the current match
+      const overlapStart = Math.max(matchStart, textStart);
+      const overlapEnd = Math.min(matchEnd, textEnd);
+
+      if (overlapStart < overlapEnd) {
+        const anchorOffset = overlapStart - textStart;
+        const focusOffset = overlapEnd - textStart;
+
+        // Corresponding offsets within the search string
+        const searchOverlapStart = overlapStart - matchStart;
+        const searchOverlapEnd = overlapEnd - matchStart;
+
+        const textNodePath = [...path, textIndex];
+
+        ranges.push({
+          anchor: {
+            path: textNodePath,
+            offset: anchorOffset,
+          },
+          focus: {
+            path: textNodePath,
+            offset: focusOffset,
+          },
+          search: search.substring(searchOverlapStart, searchOverlapEnd),
+          [type]: true,
+        });
+      }
+
+      // If the match ends within the current text, move to the next match
+      if (matchEnd <= textEnd) {
+        matchIndex++;
+      } else {
+        // The match continues in the next text node
+        break;
+      }
     }
 
-    // Update the cumulative position for the next iteration
     cumulativePosition = textEnd;
   }