#49 | created JSON escaper tool

src/components/result/ToolTextResult.tsx

@@ -9,11 +9,13 @@ import mime from 'mime';
 export default function ToolTextResult({
   title = 'Result',
   value,
-  extension = 'txt'
+  extension = 'txt',
+  removeSpecialCharacters = true
 }: {
   title?: string;
   value: string;
   extension?: string;
+  removeSpecialCharacters?: boolean;
 }) {
   const { showSnackBar } = useContext(CustomSnackBarContext);
   const handleCopy = () => {
@@ -45,7 +47,9 @@ export default function ToolTextResult({
     <Box>
       <InputHeader title={title} />
       <TextField
-        value={replaceSpecialCharacters(value)}
+        value={
+          removeSpecialCharacters ? replaceSpecialCharacters(value) : value
+        }
         fullWidth
         multiline
         sx={{

src/pages/tools/json/escape-json/index.tsx

@@ -0,0 +1,112 @@
+import React, { useState } from 'react';
+import ToolContent from '@components/ToolContent';
+import ToolTextInput from '@components/input/ToolTextInput';
+import ToolTextResult from '@components/result/ToolTextResult';
+import { escapeJson } from './service';
+import { CardExampleType } from '@components/examples/ToolExamples';
+import { ToolComponentProps } from '@tools/defineTool';
+import { GetGroupsType } from '@components/options/ToolOptions';
+import { Box } from '@mui/material';
+import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
+
+const initialValues = {
+  wrapInQuotesFlag: false
+};
+
+type InitialValuesType = typeof initialValues;
+
+const exampleCards: CardExampleType<InitialValuesType>[] = [
+  {
+    title: 'Escape a Simple JSON Object',
+    description: `In this example, we escape all quotes (") around the keys and values in a simple JSON object. This ensures that the JSON data is interpreted correctly if it's used in another JSON object or assigned to a variable as a string.`,
+    sampleText: `{"country": "Spain", "capital": "Madrid"}`,
+    sampleResult: `{{\\"country\\": \\"Spain\\", \\"capital\\": \\"Madrid\\"}`,
+    sampleOptions: {
+      wrapInQuotesFlag: false
+    }
+  },
+  {
+    title: 'Escape a Complex JSON Object',
+    description: `In this example, we escape a more complex JSON object with nested elements containing data about the Margherita pizza recipe. We escape all quotes within the object as well as convert all line breaks into special "\n" characters. Additionally, we wrap the entire output in double quotes by enabling the "Wrap Output in Quotes" option.`,
+    sampleText: `{
+  "name": "Pizza Margherita",
+  "ingredients": [
+    "tomato sauce",
+    "mozzarella cheese",
+    "fresh basil"
+  ],
+  "price": 12.50,
+  "vegetarian": true
+}`,
+    sampleResult: `"{\\n  \\"name\\": \\"Pizza Margherita\\",\\n  \\"ingredients\\": [\\n\\"tomato sauce\\",\\n    \\"mozzarella cheese\\",\\n    \\"fresh basil\\"\\n  ],\\n  \\"price\\": 12.50,\\n  \\"vegetarian\\": true\\n}"`,
+    sampleOptions: {
+      wrapInQuotesFlag: true
+    }
+  },
+  {
+    title: 'Escape a JSON Array of Numbers',
+    description: `This example showcases that escaping isn't necessary for JSON arrays containing only numbers. Since numbers themselves don't hold special meaning in JSON, the tool doesn't modify the input and the output remains the same as the original JSON array.`,
+    sampleText: `[1, 2, 3]`,
+    sampleResult: `[1, 2, 3]`,
+    sampleOptions: {
+      wrapInQuotesFlag: false
+    }
+  }
+];
+
+export default function EscapeJsonTool({
+  title,
+  longDescription
+}: ToolComponentProps) {
+  const [input, setInput] = useState<string>('');
+  const [result, setResult] = useState<string>('');
+
+  const compute = (options: InitialValuesType, input: string) => {
+    setResult(escapeJson(input, options.wrapInQuotesFlag));
+  };
+
+  const getGroups: GetGroupsType<InitialValuesType> | null = ({
+    values,
+    updateField
+  }) => [
+    {
+      title: 'Quote Output',
+      component: (
+        <Box>
+          <CheckboxWithDesc
+            onChange={(val) => updateField('wrapInQuotesFlag', val)}
+            checked={values.wrapInQuotesFlag}
+            title={'Wrap Output In Quotes'}
+            description={'Add double quotes around the output JSON data.'}
+          />
+        </Box>
+      )
+    }
+  ];
+
+  return (
+    <ToolContent
+      title={title}
+      inputComponent={
+        <ToolTextInput title="Input JSON" value={input} onChange={setInput} />
+      }
+      resultComponent={
+        <ToolTextResult
+          title="Escaped JSON"
+          value={result}
+          removeSpecialCharacters={false}
+        />
+      }
+      initialValues={initialValues}
+      getGroups={getGroups}
+      toolInfo={{
+        title: 'What is a JSON Escaper?',
+        description: longDescription
+      }}
+      exampleCards={exampleCards}
+      input={input}
+      setInput={setInput}
+      compute={compute}
+    />
+  );
+}

src/pages/tools/json/escape-json/meta.ts

@@ -0,0 +1,14 @@
+import { defineTool } from '@tools/defineTool';
+import { lazy } from 'react';
+
+export const tool = defineTool('json', {
+  name: 'Escape JSON',
+  path: 'escape-json',
+  icon: 'lets-icons:json-light',
+  description:
+    'Free online JSON escaper. Just load your JSON in the input field and it will automatically get escaped. In the tool options, you can optionally enable wrapping the escaped JSON in double quotes to get an escaped JSON string.',
+  shortDescription: 'Quickly escape special JSON characters.',
+  longDescription: `This tool converts special characters in JSON files and data structures into their escaped versions. Such special characters are, for example, double quotes, newline characters, backslashes, tabs, and many others. If these characters aren't escaped and appear in a raw JSON string without escaping, they can lead to errors in data parsing. The program turns them into safe versions by adding a backslash (\\) before the character, changing its interpretation. Additionally, you can enable the "Wrap Output in Quotes" checkbox in the options, which adds double quotes around the resulting escaped JSON data. This is useful when the escaped JSON data needs to be used as a string in other data structures or the JavaScript programming language. Json-abulous!`,
+  keywords: ['escape', 'json'],
+  component: lazy(() => import('./index'))
+});

src/pages/tools/json/escape-json/service.ts

@@ -0,0 +1,7 @@
+export const escapeJson = (input: string, wrapInQuotesFlag: boolean) => {
+  const escapedJson = JSON.stringify(input);
+  if (!wrapInQuotesFlag) {
+    return escapedJson.slice(1, -1);
+  }
+  return escapedJson;
+};

src/pages/tools/json/index.ts

@@ -3,11 +3,13 @@ import { tool as jsonMinify } from './minify/meta';
 import { tool as jsonStringify } from './stringify/meta';
 import { tool as validateJson } from './validateJson/meta';
 import { tool as jsonToXml } from './json-to-xml/meta';
+import { tool as escapeJson } from './escape-json/meta';
 
 export const jsonTools = [
   validateJson,
   jsonPrettify,
   jsonMinify,
   jsonStringify,
-  jsonToXml
+  jsonToXml,
+  escapeJson
 ];