feat: copy and import file

.idea/workspace.xml

@@ -4,18 +4,10 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="fix: deploy message">
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="chore: tools by category">
-      <change afterPath="$PROJECT_DIR$/src/components/index.css" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/utils/string.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/App.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/App.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/input/ToolTextInput.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/input/ToolTextInput.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/ToolHeader.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ToolHeader.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/ToolLayout.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ToolLayout.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/home/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/home/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/string/split/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/split/index.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/pages/string/split/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/split/meta.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/tools/defineTool.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/tools/defineTool.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/tools/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/tools/index.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -137,7 +129,7 @@
       <workItem from="1719006951159" duration="2377000" />
       <workItem from="1719021128819" duration="3239000" />
       <workItem from="1719083989394" duration="7971000" />
-      <workItem from="1719092003308" duration="8256000" />
+      <workItem from="1719092003308" duration="9218000" />
     </task>
     <task id="LOCAL-00001" summary="feat: use vite and ts">
       <option name="closed" value="true" />
@@ -347,7 +339,15 @@
       <option name="project" value="LOCAL" />
       <updated>1719096551866</updated>
     </task>
-    <option name="localTasksCounter" value="27" />
+    <task id="LOCAL-00027" summary="chore: tools by category">
+      <option name="closed" value="true" />
+      <created>1719102365836</created>
+      <option name="number" value="00027" />
+      <option name="presentableId" value="LOCAL-00027" />
+      <option name="project" value="LOCAL" />
+      <updated>1719102365836</updated>
+    </task>
+    <option name="localTasksCounter" value="28" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -390,7 +390,8 @@
     <MESSAGE value="feat: tools normalized" />
     <MESSAGE value="feat: search tools" />
     <MESSAGE value="fix: deploy message" />
-    <option name="LAST_COMMIT_MESSAGE" value="fix: deploy message" />
+    <MESSAGE value="chore: tools by category" />
+    <option name="LAST_COMMIT_MESSAGE" value="chore: tools by category" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />

src/components/input/ToolTextInput.tsx

@@ -3,7 +3,8 @@ import Typography from '@mui/material/Typography';
 import Button from '@mui/material/Button';
 import PublishIcon from '@mui/icons-material/Publish';
 import ContentPasteIcon from '@mui/icons-material/ContentPaste';
-import React from 'react';
+import React, { useContext, useRef } from 'react';
+import { CustomSnackBarContext } from '../../contexts/CustomSnackBarContext';
 
 export default function ToolTextInput({
   value,
@@ -14,6 +15,34 @@ export default function ToolTextInput({
   value: string;
   onChange: (value: string) => void;
 }) {
+  const { showSnackBar } = useContext(CustomSnackBarContext);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleCopy = () => {
+    navigator.clipboard
+      .writeText(value)
+      .then(() => showSnackBar('Text copied', 'success'))
+      .catch((err) => {
+        showSnackBar('Failed to copy: ', 'error');
+      });
+  };
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const text = e.target?.result;
+        if (typeof text === 'string') {
+          onChange(text);
+        }
+      };
+      reader.readAsText(file);
+    }
+  };
+
+  const handleImportClick = () => {
+    fileInputRef.current?.click();
+  };
   return (
     <Box>
       <Typography fontSize={30} color={'primary'}>
@@ -27,9 +56,20 @@ export default function ToolTextInput({
         rows={10}
       />
       <Stack mt={1} direction={'row'} spacing={2}>
-        <Button startIcon={<PublishIcon />}>Import from file</Button>
+        <Button onClick={handleImportClick} startIcon={<PublishIcon />}>
-        <Button startIcon={<ContentPasteIcon />}>Copy to clipboard</Button>
+          Import from file
+        </Button>
+        <Button onClick={handleCopy} startIcon={<ContentPasteIcon />}>
+          Copy to clipboard
+        </Button>
       </Stack>
+      <input
+        type="file"
+        accept="*"
+        ref={fileInputRef}
+        style={{ display: 'none' }}
+        onChange={handleFileChange}
+      />
     </Box>
   );
 }

src/pages/string/split/meta.ts

@@ -5,7 +5,7 @@ import image from '../../../assets/text.png';
 export const tool = defineTool('string', {
   path: 'split',
   name: 'Text splitter',
-  image: image,
+  image,
   description:
     "World's simplest browser-based utility for splitting text. Load your text in the input form on the left and you'll automatically get pieces of this text on the right. Powerful, free, and fast. Load text – get chunks.",
   keywords: ['text', 'split'],