@flowuent-org/diagramming-core 1.2.0 → 1.2.2

package/packages/diagrams/src/lib/utils/highlightText.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+
+/**
+ * Utility function to highlight search terms in text
+ * @param text - The text to highlight
+ * @param searchQuery - The search query to highlight
+ * @returns React node with highlighted text
+ */
+export const highlightText = (text: string, searchQuery: string): React.ReactNode => {
+  if (!searchQuery.trim() || !text) {
+    return text;
+  }
+
+  const searchLower = searchQuery.toLowerCase();
+  const textLower = text.toLowerCase();
+  const index = textLower.indexOf(searchLower);
+
+  if (index === -1) {
+    return text;
+  }
+
+  const beforeMatch = text.substring(0, index);
+  const match = text.substring(index, index + searchQuery.length);
+  const afterMatch = text.substring(index + searchQuery.length);
+
+  return (
+    <>
+      {beforeMatch}
+      <mark
+        style={{
+          backgroundColor: '#FFD700',
+          color: '#000',
+          padding: '2px 4px',
+          borderRadius: '3px',
+          fontWeight: 'bold',
+        }}
+      >
+        {match}
+      </mark>
+      {afterMatch}
+    </>
+  );
+};
+
+/**
+ * Highlight all occurrences of search query in text
+ */
+export const highlightAllOccurrences = (text: string, searchQuery: string): React.ReactNode => {
+  if (!searchQuery.trim() || !text) {
+    return text;
+  }
+
+  const searchLower = searchQuery.toLowerCase();
+  const textLower = text.toLowerCase();
+  const parts: React.ReactNode[] = [];
+  let lastIndex = 0;
+  let index = textLower.indexOf(searchLower, lastIndex);
+
+  while (index !== -1) {
+    // Add text before match
+    if (index > lastIndex) {
+      parts.push(text.substring(lastIndex, index));
+    }
+
+    // Add highlighted match
+    parts.push(
+      <mark
+        key={index}
+        style={{
+          backgroundColor: '#FFD700',
+          color: '#000',
+          padding: '2px 4px',
+          borderRadius: '3px',
+          fontWeight: 'bold',
+        }}
+      >
+        {text.substring(index, index + searchQuery.length)}
+      </mark>
+    );
+
+    lastIndex = index + searchQuery.length;
+    index = textLower.indexOf(searchLower, lastIndex);
+  }
+
+  // Add remaining text
+  if (lastIndex < text.length) {
+    parts.push(text.substring(lastIndex));
+  }
+
+  return <>{parts}</>;
+};
+
+