From 2f2b3db115eb9be7f5eb8f0b3d259d31bf3e3ad2 Mon Sep 17 00:00:00 2001
From: sharevb <sharevb@gmail.com>
Date: Wed, 11 Sep 2024 23:10:28 +0200
Subject: [PATCH 1/6] feat(new tool): Smart Text Replacer and LineBreaks
 manager

Smart Replacer functionality taken as base from #976 by @utf26
Fixed linebreaking display in Smart Replacer
Add linebreaking options

Fix #1279 #1194 #616
---
 src/tools/index.ts                            |  11 +-
 src/tools/smart-text-replacer/index.ts        |  13 ++
 .../smart-text-replacer.vue                   | 204 ++++++++++++++++++
 3 files changed, 227 insertions(+), 1 deletion(-)
 create mode 100644 src/tools/smart-text-replacer/index.ts
 create mode 100644 src/tools/smart-text-replacer/smart-text-replacer.vue

diff --git a/src/tools/index.ts b/src/tools/index.ts
index 52bdf8e3..47a0395b 100644
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@@ -1,6 +1,7 @@
 import { tool as base64FileConverter } from './base64-file-converter';
 import { tool as base64StringConverter } from './base64-string-converter';
 import { tool as basicAuthGenerator } from './basic-auth-generator';
+import { tool as smartTextReplacer } from './smart-text-replacer';
 import { tool as pdfSignatureChecker } from './pdf-signature-checker';
 import { tool as numeronymGenerator } from './numeronym-generator';
 import { tool as macAddressGenerator } from './mac-address-generator';
@@ -155,7 +156,15 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Text',
-    components: [loremIpsumGenerator, textStatistics, emojiPicker, stringObfuscator, textDiff, numeronymGenerator],
+    components: [
+      loremIpsumGenerator,
+      textStatistics,
+      emojiPicker,
+      stringObfuscator,
+      textDiff,
+      numeronymGenerator,
+      smartTextReplacer,
+    ],
   },
   {
     name: 'Data',
diff --git a/src/tools/smart-text-replacer/index.ts b/src/tools/smart-text-replacer/index.ts
new file mode 100644
index 00000000..a0f93fde
--- /dev/null
+++ b/src/tools/smart-text-replacer/index.ts
@@ -0,0 +1,13 @@
+import { Search } from '@vicons/tabler';
+import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';
+
+export const tool = defineTool({
+  name: translate('tools.smart-text-replacer.title'),
+  path: '/smart-text-replacer',
+  description: translate('tools.smart-text-replacer.description'),
+  keywords: ['smart', 'text-replacer', 'linebreak', 'remove', 'add', 'split', 'search', 'replace'],
+  component: () => import('./smart-text-replacer.vue'),
+  icon: Search,
+  createdAt: new Date('2024-04-03'),
+});
diff --git a/src/tools/smart-text-replacer/smart-text-replacer.vue b/src/tools/smart-text-replacer/smart-text-replacer.vue
new file mode 100644
index 00000000..74b7695b
--- /dev/null
+++ b/src/tools/smart-text-replacer/smart-text-replacer.vue
@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import { useCopy } from '@/composable/copy';
+
+const str = ref('Lorem ipsum dolor sit amet DOLOR Lorem ipsum dolor sit amet DOLOR');
+const findWhat = ref('');
+const replaceWith = ref('');
+const matchCase = ref(false);
+const keepLineBreaks = ref(true);
+const addLineBreakPlace = ref('before');
+const addLineBreakRegex = ref('');
+const splitEveryCharacterCounts = ref(0);
+
+// Tracks the index of the currently active highlight.
+const currentActiveIndex = ref(0);
+// Tracks the total number of matches found to cycle through them.
+const totalMatches = ref(0);
+
+const highlightedText = computed(() => {
+  const findWhatValue = findWhat.value.trim();
+  let strValue = str.value;
+
+  if (!strValue) {
+    return strValue;
+  }
+
+  if (!keepLineBreaks.value) {
+    strValue = strValue.replace(/\r?\n/g, '');
+  }
+
+  if (addLineBreakRegex.value) {
+    const addLBRegex = new RegExp(addLineBreakRegex.value, matchCase.value ? 'g' : 'gi');
+    if (addLineBreakPlace.value === 'before') {
+      strValue = strValue.replace(addLBRegex, m => `\n${m}`);
+    }
+    else if (addLineBreakPlace.value === 'after') {
+      strValue = strValue.replace(addLBRegex, m => `${m}\n`);
+    }
+    else if (addLineBreakPlace.value === 'place') {
+      strValue = strValue.replace(addLBRegex, '\n');
+    }
+  }
+  if (splitEveryCharacterCounts.value) {
+    strValue = strValue.replace(new RegExp(`[^\n]{${splitEveryCharacterCounts.value}}`, 'g'), m => `${m}\n`);
+  }
+
+  if (!findWhatValue) {
+    return strValue;
+  }
+
+  const regex = new RegExp(findWhatValue, matchCase.value ? 'g' : 'gi');
+  let index = 0;
+  const newStr = strValue.replace(regex, (match) => {
+    index++;
+    return `<span class="${match === findWhatValue ? 'highlight' : 'outline'}">${match}</span>`;
+  });
+
+  totalMatches.value = index;
+  // Reset to -1 to ensure the first match is highlighted upon next search
+  currentActiveIndex.value = -1;
+  return newStr;
+});
+
+// Automatically highlight the first occurrence after any change
+watchEffect(async () => {
+  if (highlightedText.value) {
+    await nextTick();
+    updateHighlighting();
+  }
+});
+
+watch(matchCase, () => {
+  // Use nextTick to wait for the DOM to update after highlightedText re-reaction
+  nextTick().then(() => {
+    const matches = document.querySelectorAll('.outline, .highlight');
+    if (matches.length === 0) {
+      // No matches after change, reset
+      currentActiveIndex.value = -1;
+      totalMatches.value = 0;
+    }
+    else if (matches.length <= currentActiveIndex.value || currentActiveIndex.value === -1) {
+      // Current selection is out of range or reset, select the first match
+      currentActiveIndex.value = 0;
+      updateHighlighting(); // Ensure correct highlighting
+    }
+    else {
+      // The current selection is still valid, ensure it's highlighted correctly
+      updateHighlighting(); // This might need adjustment to not advance the index
+    }
+  });
+});
+
+// Function to add active highlighting
+function updateHighlighting() {
+  currentActiveIndex.value = (currentActiveIndex.value + 1) % totalMatches.value;
+  const matches = document.querySelectorAll('.outline, .highlight');
+  matches.forEach((match, index) => {
+    match.className = index === currentActiveIndex.value ? 'highlight' : 'outline';
+  });
+}
+
+function replaceSelected() {
+  const matches = document.querySelectorAll('.outline, .highlight');
+  if (matches.length > currentActiveIndex.value) {
+    const selectedMatch = matches[currentActiveIndex.value];
+    if (selectedMatch) {
+      const newText = replaceWith.value;
+      selectedMatch.textContent = newText;
+      selectedMatch.classList.remove('highlight');
+      currentActiveIndex.value--;
+      totalMatches.value--;
+    }
+  }
+  updateHighlighting();
+}
+
+function replaceAll() {
+  const matches = document.querySelectorAll('.outline, .highlight');
+  matches.forEach((match) => {
+    match.textContent = replaceWith.value;
+    match.classList.remove('highlight');
+    match.classList.remove('outline');
+  });
+  currentActiveIndex.value = -1;
+  totalMatches.value = matches.length;
+}
+
+function findNext() {
+  updateHighlighting();
+}
+
+const { copy } = useCopy({ source: highlightedText });
+</script>
+
+<template>
+  <div>
+    <c-input-text v-model:value="str" raw-text placeholder="Enter text here..." label="Text to search and replace:" clearable multiline rows="10" />
+
+    <div mt-4 w-full flex gap-10px>
+      <div flex-1>
+        <div>Find what:</div>
+        <c-input-text v-model:value="findWhat" placeholder="Search regex" @keyup.enter="findNext()" />
+      </div>
+      <div flex-1>
+        <div>Replace with:</div>
+        <c-input-text v-model:value="replaceWith" placeholder="(can include $1 or $<groupName>)" @keyup.enter="replaceSelected()" />
+      </div>
+    </div>
+
+    <div mt-4 w-full flex gap-10px>
+      <div flex-2 flex items-baseline gap-10px>
+        <c-button @click="findNext()">
+          <label>Find Next</label>
+        </c-button>
+        <n-checkbox v-model:checked="matchCase">
+          <label>Match case</label>
+        </n-checkbox>
+        <n-checkbox v-model:checked="keepLineBreaks">
+          <label>Keep linebreaks</label>
+        </n-checkbox>
+      </div>
+      <div flex flex-1 justify-end gap-10px>
+        <c-button @click="replaceSelected()">
+          <label>Replace</label>
+        </c-button>
+        <c-button @click="replaceAll()">
+          <label>Replace All</label>
+        </c-button>
+      </div>
+    </div>
+
+    <n-divider />
+
+    <div mt-4 w-full flex items-baseline gap-10px>
+      <c-select
+        v-model:value="addLineBreakPlace"
+        :options="[{ value: 'before', label: 'Add linebreak before' }, { value: 'after', label: 'Add linebreak after' }, { value: 'place', label: 'Add linebreak in place of' }]"
+      />
+
+      <c-input-text
+        v-model:value="addLineBreakRegex"
+        placeholder="Split text regex"
+      />
+    </div>
+    <div mt-4 w-full flex items-baseline gap-10px>
+      <n-form-item label="Split every characters:" label-placement="left">
+        <n-input-number v-model:value="splitEveryCharacterCounts" :min="0" />
+      </n-form-item>
+    </div>
+    <c-card v-if="highlightedText" mt-60px max-w-600px flex items-center gap-5px font-mono>
+      <div flex-1 break-anywhere text-wrap style="white-space: pre" v-html="highlightedText" />
+
+      <c-button @click="copy()">
+        <icon-mdi:content-copy />
+      </c-button>
+    </c-card>
+  </div>
+</template>
+
+<style lang="less">
+.highlight {
+  background-color: #ff0;
+  color: black;
+}
+</style>

From 186a006b3ac7139837ea1fae91e7c30c7220a97f Mon Sep 17 00:00:00 2001
From: ShareVB <sharevb@gmail.com>
Date: Wed, 11 Sep 2024 23:28:07 +0200
Subject: [PATCH 2/6] fix: no sonar for v-html

---
 src/tools/smart-text-replacer/smart-text-replacer.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/tools/smart-text-replacer/smart-text-replacer.vue b/src/tools/smart-text-replacer/smart-text-replacer.vue
index 74b7695b..654d4431 100644
--- a/src/tools/smart-text-replacer/smart-text-replacer.vue
+++ b/src/tools/smart-text-replacer/smart-text-replacer.vue
@@ -187,7 +187,7 @@ const { copy } = useCopy({ source: highlightedText });
       </n-form-item>
     </div>
     <c-card v-if="highlightedText" mt-60px max-w-600px flex items-center gap-5px font-mono>
-      <div flex-1 break-anywhere text-wrap style="white-space: pre" v-html="highlightedText" />
+      <div flex-1 break-anywhere text-wrap style="white-space: pre" v-html="highlightedText" /><!-- NO SONAR -->
 
       <c-button @click="copy()">
         <icon-mdi:content-copy />

From f0af67ef03323391837dc6fa9c2daf903606aeb5 Mon Sep 17 00:00:00 2001
From: ShareVB <sharevb@gmail.com>
Date: Wed, 11 Sep 2024 23:42:08 +0200
Subject: [PATCH 3/6] fix: v-html no sonar

---
 src/tools/smart-text-replacer/smart-text-replacer.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/tools/smart-text-replacer/smart-text-replacer.vue b/src/tools/smart-text-replacer/smart-text-replacer.vue
index 654d4431..2fe82179 100644
--- a/src/tools/smart-text-replacer/smart-text-replacer.vue
+++ b/src/tools/smart-text-replacer/smart-text-replacer.vue
@@ -187,7 +187,7 @@ const { copy } = useCopy({ source: highlightedText });
       </n-form-item>
     </div>
     <c-card v-if="highlightedText" mt-60px max-w-600px flex items-center gap-5px font-mono>
-      <div flex-1 break-anywhere text-wrap style="white-space: pre" v-html="highlightedText" /><!-- NO SONAR -->
+      <!-- //NOSONAR --><div flex-1 break-anywhere text-wrap style="white-space: pre" v-html="highlightedText" />
 
       <c-button @click="copy()">
         <icon-mdi:content-copy />

From a50bfd51300facab9d8a98904a7c410f445e212d Mon Sep 17 00:00:00 2001
From: ShareVB <sharevb@gmail.com>
Date: Fri, 13 Sep 2024 09:28:31 +0200
Subject: [PATCH 4/6] fix: title, desc, spaces and placeholders

---
 components.d.ts                                       | 10 ++++------
 src/tools/smart-text-replacer/index.ts                |  5 ++---
 src/tools/smart-text-replacer/smart-text-replacer.vue |  4 ++--
 3 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index 8e59366a..1d7b5e18 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -90,6 +90,7 @@ declare module '@vue/runtime-core' {
     HttpStatusCodes: typeof import('./src/tools/http-status-codes/http-status-codes.vue')['default']
     IbanValidatorAndParser: typeof import('./src/tools/iban-validator-and-parser/iban-validator-and-parser.vue')['default']
     'IconMdi:brushVariant': typeof import('~icons/mdi/brush-variant')['default']
+    'IconMdi:contentCopy': typeof import('~icons/mdi/content-copy')['default']
     'IconMdi:kettleSteamOutline': typeof import('~icons/mdi/kettle-steam-outline')['default']
     IconMdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
     IconMdiChevronRight: typeof import('~icons/mdi/chevron-right')['default']
@@ -130,12 +131,11 @@ declare module '@vue/runtime-core' {
     MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
     MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
     NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
-    NButton: typeof import('naive-ui')['NButton']
-    NCode: typeof import('naive-ui')['NCode']
+    NCheckbox: typeof import('naive-ui')['NCheckbox']
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
+    NDivider: typeof import('naive-ui')['NDivider']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
-    NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
     NH1: typeof import('naive-ui')['NH1']
     NH3: typeof import('naive-ui')['NH3']
@@ -144,9 +144,6 @@ declare module '@vue/runtime-core' {
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
-    NScrollbar: typeof import('naive-ui')['NScrollbar']
-    NSlider: typeof import('naive-ui')['NSlider']
-    NSwitch: typeof import('naive-ui')['NSwitch']
     NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
     OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
     PasswordStrengthAnalyser: typeof import('./src/tools/password-strength-analyser/password-strength-analyser.vue')['default']
@@ -163,6 +160,7 @@ declare module '@vue/runtime-core' {
     RsaKeyPairGenerator: typeof import('./src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue')['default']
     SafelinkDecoder: typeof import('./src/tools/safelink-decoder/safelink-decoder.vue')['default']
     SlugifyString: typeof import('./src/tools/slugify-string/slugify-string.vue')['default']
+    SmartTextReplacer: typeof import('./src/tools/smart-text-replacer/smart-text-replacer.vue')['default']
     SpanCopyable: typeof import('./src/components/SpanCopyable.vue')['default']
     SqlPrettify: typeof import('./src/tools/sql-prettify/sql-prettify.vue')['default']
     StringObfuscator: typeof import('./src/tools/string-obfuscator/string-obfuscator.vue')['default']
diff --git a/src/tools/smart-text-replacer/index.ts b/src/tools/smart-text-replacer/index.ts
index a0f93fde..7a2ddd22 100644
--- a/src/tools/smart-text-replacer/index.ts
+++ b/src/tools/smart-text-replacer/index.ts
@@ -1,11 +1,10 @@
 import { Search } from '@vicons/tabler';
 import { defineTool } from '../tool';
-import { translate } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: translate('tools.smart-text-replacer.title'),
+  name: 'Smart Text Replacer and Linebreaker',
   path: '/smart-text-replacer',
-  description: translate('tools.smart-text-replacer.description'),
+  description: 'Search and replace a word on single or multiple occurrences just like windows notepad search and replace. Also allows to manage linebreaking and text splitting',
   keywords: ['smart', 'text-replacer', 'linebreak', 'remove', 'add', 'split', 'search', 'replace'],
   component: () => import('./smart-text-replacer.vue'),
   icon: Search,
diff --git a/src/tools/smart-text-replacer/smart-text-replacer.vue b/src/tools/smart-text-replacer/smart-text-replacer.vue
index 2fe82179..44803506 100644
--- a/src/tools/smart-text-replacer/smart-text-replacer.vue
+++ b/src/tools/smart-text-replacer/smart-text-replacer.vue
@@ -16,7 +16,7 @@ const currentActiveIndex = ref(0);
 const totalMatches = ref(0);
 
 const highlightedText = computed(() => {
-  const findWhatValue = findWhat.value.trim();
+  const findWhatValue = findWhat.value;
   let strValue = str.value;
 
   if (!strValue) {
@@ -142,7 +142,7 @@ const { copy } = useCopy({ source: highlightedText });
       </div>
       <div flex-1>
         <div>Replace with:</div>
-        <c-input-text v-model:value="replaceWith" placeholder="(can include $1 or $<groupName>)" @keyup.enter="replaceSelected()" />
+        <c-input-text v-model:value="replaceWith" placeholder="Replacement expression" @keyup.enter="replaceSelected()" />
       </div>
     </div>
 

From f0ef42aadebff010d1dea4769c9deaf33fbcb0c9 Mon Sep 17 00:00:00 2001
From: ShareVB <sharevb@gmail.com>
Date: Sat, 21 Sep 2024 10:22:09 +0200
Subject: [PATCH 5/6] fix: pre-wrap result to proper display

---
 src/tools/smart-text-replacer/smart-text-replacer.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/tools/smart-text-replacer/smart-text-replacer.vue b/src/tools/smart-text-replacer/smart-text-replacer.vue
index 44803506..7ae677c7 100644
--- a/src/tools/smart-text-replacer/smart-text-replacer.vue
+++ b/src/tools/smart-text-replacer/smart-text-replacer.vue
@@ -187,7 +187,7 @@ const { copy } = useCopy({ source: highlightedText });
       </n-form-item>
     </div>
     <c-card v-if="highlightedText" mt-60px max-w-600px flex items-center gap-5px font-mono>
-      <!-- //NOSONAR --><div flex-1 break-anywhere text-wrap style="white-space: pre" v-html="highlightedText" />
+      <!-- //NOSONAR --><div flex-1 break-anywhere text-wrap style="white-space: pre-wrap" v-html="highlightedText" />
 
       <c-button @click="copy()">
         <icon-mdi:content-copy />

From 2f8fad5c0a1ff9a7e0979361a7e311b64ff84180 Mon Sep 17 00:00:00 2001
From: ShareVB <sharevb@gmail.com>
Date: Sat, 21 Sep 2024 14:05:52 +0200
Subject: [PATCH 6/6] fix: better ui on small phone screens

---
 components.d.ts                               |  2 +
 .../smart-text-replacer.vue                   | 38 +++++++++----------
 2 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index 1d7b5e18..e8f8a6ba 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -136,6 +136,7 @@ declare module '@vue/runtime-core' {
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NDivider: typeof import('naive-ui')['NDivider']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
+    NFlex: typeof import('naive-ui')['NFlex']
     NFormItem: typeof import('naive-ui')['NFormItem']
     NH1: typeof import('naive-ui')['NH1']
     NH3: typeof import('naive-ui')['NH3']
@@ -144,6 +145,7 @@ declare module '@vue/runtime-core' {
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
+    NSpace: typeof import('naive-ui')['NSpace']
     NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
     OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
     PasswordStrengthAnalyser: typeof import('./src/tools/password-strength-analyser/password-strength-analyser.vue')['default']
diff --git a/src/tools/smart-text-replacer/smart-text-replacer.vue b/src/tools/smart-text-replacer/smart-text-replacer.vue
index 7ae677c7..658db36d 100644
--- a/src/tools/smart-text-replacer/smart-text-replacer.vue
+++ b/src/tools/smart-text-replacer/smart-text-replacer.vue
@@ -146,27 +146,23 @@ const { copy } = useCopy({ source: highlightedText });
       </div>
     </div>
 
-    <div mt-4 w-full flex gap-10px>
-      <div flex-2 flex items-baseline gap-10px>
-        <c-button @click="findNext()">
-          <label>Find Next</label>
-        </c-button>
-        <n-checkbox v-model:checked="matchCase">
-          <label>Match case</label>
-        </n-checkbox>
-        <n-checkbox v-model:checked="keepLineBreaks">
-          <label>Keep linebreaks</label>
-        </n-checkbox>
-      </div>
-      <div flex flex-1 justify-end gap-10px>
-        <c-button @click="replaceSelected()">
-          <label>Replace</label>
-        </c-button>
-        <c-button @click="replaceAll()">
-          <label>Replace All</label>
-        </c-button>
-      </div>
-    </div>
+    <n-space mt-4 gap-1 align="baseline" justify="space-between">
+      <c-button @click="findNext()">
+        <label>Find Next</label>
+      </c-button>
+      <c-button @click="replaceSelected()">
+        <label>Replace</label>
+      </c-button>
+      <c-button @click="replaceAll()">
+        <label>Replace All</label>
+      </c-button>
+      <n-checkbox v-model:checked="matchCase">
+        <label>Match case</label>
+      </n-checkbox>
+      <n-checkbox v-model:checked="keepLineBreaks">
+        <label>Keep linebreaks</label>
+      </n-checkbox>
+    </n-space>
 
     <n-divider />