feat: add button to remove only special characters

src/locales/en/translation.json

@@ -56,5 +56,7 @@
     "Existing stopwords cannot be restored.": "Existing stopwords cannot be restored.",
     "Exclude the first line": "Exclude the first line",
     "There is {{length}} blank line.": "There is {{length}} blank line.",
-    "Blank line counting is done before characters are added.": "Blank line counting is done before characters are added."
+    "Blank line counting is done before characters are added.": "Blank line counting is done before characters are added.",
+    "Remove special character": "Remove special character",
+    "Special characters have been removed!": "Special characters removed!"
 }

src/locales/ko/translation.json

@@ -56,5 +56,7 @@
     "Existing stopwords cannot be restored.": "기존 금칙어는 복원할 수 없습니다.",
     "Exclude the first line": "첫 번째 줄을 제외합니다",
     "There is {{length}} blank line.": "빈 줄이 {{length}}개 있습니다.",
-    "Blank line counting is done before characters are added.": "빈 줄 카운팅은 문자가 추가되기 전에 수행됩니다."
+    "Blank line counting is done before characters are added.": "빈 줄 카운팅은 문자가 추가되기 전에 수행됩니다.",
+    "Remove special character": "특수문자 제거",
+    "Special characters have been removed!": "특수문자가 제거 되었습니다!"
 }

src/pages/Home/components/ActionSection/RemoveSpecialCharacterAction.jsx

@@ -0,0 +1,70 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSetRecoilState, useRecoilValue } from 'recoil';
+import { styled } from '@mui/system';
+import MuiButton from '@mui/material/Button';
+import Snackbar from '@mui/material/Snackbar';
+import Alert from '@mui/material/Alert';
+import { debounce as _debounce } from 'lodash';
+import * as mainState from '~/store/atoms/main';
+
+const Button = styled(MuiButton)(({ theme }) => ({
+  marginRight: theme.spacing(1),
+  marginBottom: theme.spacing(1),
+}));
+
+export default function UniqueStopwordsAction() {
+  const { t } = useTranslation();
+  const [snackbarOpen, setSnackbarOpen] = useState(false);
+  const setPreviewText = useSetRecoilState(mainState['previewTextState']);
+  const states = {
+    shuffleText: useRecoilValue(mainState['shuffleTextState']),
+    specialCharacters: useRecoilValue(mainState['specialCharactersState']),
+    specialCharactersEnabled: useRecoilValue(mainState['specialCharactersEnabledState']),
+  };
+
+  const handleClick = _debounce(() => {
+    let oldLines = states.shuffleText.replace(/\s+$/, '').replace(/\r\n/g, '\n');
+    let newLines = oldLines.split('\n');
+
+    // console.log("특수 문자를 제거하는 중 입니다...");
+    newLines = removeSpecialCharacters(newLines, states);
+
+    // console.log("작업이 완료 되었습니다.");
+    setPreviewText(newLines.join('\n'));
+    setSnackbarOpen(true);
+  }, 100);
+
+  return (
+    <>
+      <Button variant="outlined" size="large" onClick={handleClick}>
+        {t('Remove special character')}
+      </Button>
+      <Snackbar
+        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+        open={snackbarOpen}
+        autoHideDuration={1000}
+        onClose={() => setSnackbarOpen(false)}
+      >
+        <Alert severity="success">{t('Special characters have been removed!')}</Alert>
+      </Snackbar>
+    </>
+  );
+}
+
+function removeSpecialCharacters(lines, states) {
+  const { specialCharacters, specialCharactersEnabled } = states;
+
+  if (!specialCharactersEnabled) {
+    return lines;
+  }
+
+  const escapeSpecialCharacters = specialCharacters.replace(/./g, '\\$&');
+  const re = new RegExp(`[${escapeSpecialCharacters}]`, 'g');
+
+  for (let i = 0, l = lines.length; i < l; i++) {
+    lines[i] = lines[i].replace(re, ' ').replace(/\s+/g, ' ').trim();
+  }
+
+  return lines;
+}

src/pages/Home/components/ActionSection/index.jsx

@@ -3,6 +3,7 @@ import ShufflePanel from './ShufflePanel';
 import PreviewPanel from './PreviewPanel';
 import ShuffleAction from './ShuffleAction';
 import CopyAction from './CopyAction';
+import RemoveSpecialCharacterAction from './RemoveSpecialCharacterAction';
 import UniqueStopwordsAction from './UniqueStopwordsAction';
 import ImportStopwordsAction from './ImportStopwordsAction';
 import OnlineMarketplaceSettings from './OnlineMarketplaceSettings';
@@ -22,6 +23,7 @@ export default function ActionSection() {
       <Grid item xs={12}>
         <ShuffleAction />
         <CopyAction />
+        <RemoveSpecialCharacterAction />
         <UniqueStopwordsAction />
         <OnlineMarketplaceSettings />
         <SelfShoppingMall />