From 3818c9315a23c719bed2ba3e0c371e4467cac892 Mon Sep 17 00:00:00 2001 From: Aneek Ghosh Date: Sat, 29 Mar 2025 18:01:50 +0530 Subject: [PATCH 1/3] #49 | created JSON escaper tool --- src/components/result/ToolTextResult.tsx | 8 +- src/pages/tools/json/escape-json/index.tsx | 112 ++++++++++++++++++++ src/pages/tools/json/escape-json/meta.ts | 14 +++ src/pages/tools/json/escape-json/service.ts | 7 ++ src/pages/tools/json/index.ts | 4 +- 5 files changed, 142 insertions(+), 3 deletions(-) create mode 100644 src/pages/tools/json/escape-json/index.tsx create mode 100644 src/pages/tools/json/escape-json/meta.ts create mode 100644 src/pages/tools/json/escape-json/service.ts diff --git a/src/components/result/ToolTextResult.tsx b/src/components/result/ToolTextResult.tsx index 2f9cef0..4316f05 100644 --- a/src/components/result/ToolTextResult.tsx +++ b/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({ [] = [ + { + 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(''); + const [result, setResult] = useState(''); + + const compute = (options: InitialValuesType, input: string) => { + setResult(escapeJson(input, options.wrapInQuotesFlag)); + }; + + const getGroups: GetGroupsType | null = ({ + values, + updateField + }) => [ + { + title: 'Quote Output', + component: ( + + updateField('wrapInQuotesFlag', val)} + checked={values.wrapInQuotesFlag} + title={'Wrap Output In Quotes'} + description={'Add double quotes around the output JSON data.'} + /> + + ) + } + ]; + + return ( + + } + resultComponent={ + + } + initialValues={initialValues} + getGroups={getGroups} + toolInfo={{ + title: 'What is a JSON Escaper?', + description: longDescription + }} + exampleCards={exampleCards} + input={input} + setInput={setInput} + compute={compute} + /> + ); +} diff --git a/src/pages/tools/json/escape-json/meta.ts b/src/pages/tools/json/escape-json/meta.ts new file mode 100644 index 0000000..bc45f00 --- /dev/null +++ b/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')) +}); diff --git a/src/pages/tools/json/escape-json/service.ts b/src/pages/tools/json/escape-json/service.ts new file mode 100644 index 0000000..db4c99f --- /dev/null +++ b/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; +}; diff --git a/src/pages/tools/json/index.ts b/src/pages/tools/json/index.ts index 6484d1b..864e303 100644 --- a/src/pages/tools/json/index.ts +++ b/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 ]; From 95fe64bdef3997445583c1a4fe6b3d5474e17d5b Mon Sep 17 00:00:00 2001 From: "Ibrahima G. Coulibaly" Date: Sun, 30 Mar 2025 10:34:31 +0000 Subject: [PATCH 2/3] docs: discord --- README.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/README.md b/README.md index 86a48e3..c515d8b 100644 --- a/README.md +++ b/README.md @@ -13,11 +13,9 @@ -

From 14d7798ab40c99fa4545cc02b6abc1dcf6dd6d36 Mon Sep 17 00:00:00 2001 From: "Ibrahima G. Coulibaly" Date: Sun, 30 Mar 2025 12:39:46 +0000 Subject: [PATCH 3/3] refactor: removeSpecialCharacters -> keepSpecialCharacters --- .idea/workspace.xml | 101 +++++++++++---------- src/components/result/ToolTextResult.tsx | 8 +- src/pages/tools/json/escape-json/index.tsx | 3 +- 3 files changed, 56 insertions(+), 56 deletions(-) diff --git a/.idea/workspace.xml b/.idea/workspace.xml index 0d3b2eb..9f82295 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -6,7 +6,8 @@ - + + - { - "keyToString": { - "ASKED_ADD_EXTERNAL_FILES": "true", - "ASKED_SHARE_PROJECT_CONFIGURATION_FILES": "true", - "Docker.Dockerfile build.executor": "Run", - "Docker.Dockerfile.executor": "Run", - "Playwright.Create transparent PNG.should make png color transparent.executor": "Run", - "Playwright.JoinText Component.executor": "Run", - "Playwright.JoinText Component.should merge text pieces with specified join character.executor": "Run", - "RunOnceActivity.OpenProjectViewOnStart": "true", - "RunOnceActivity.ShowReadmeOnStart": "true", - "RunOnceActivity.git.unshallow": "true", - "Vitest.compute function (1).executor": "Run", - "Vitest.compute function.executor": "Run", - "Vitest.mergeText.executor": "Run", - "Vitest.mergeText.should merge lines and preserve blank lines when deleteBlankLines is false.executor": "Run", - "Vitest.mergeText.should merge lines, preserve blank lines and trailing spaces when both deleteBlankLines and deleteTrailingSpaces are false.executor": "Run", - "Vitest.parsePageRanges.executor": "Run", - "Vitest.removeDuplicateLines function.executor": "Run", - "Vitest.removeDuplicateLines function.newlines option.executor": "Run", - "Vitest.removeDuplicateLines function.newlines option.should filter newlines when newlines is set to filter.executor": "Run", - "Vitest.replaceText function (regexp mode).should return the original text when passed an invalid regexp.executor": "Run", - "Vitest.replaceText function.executor": "Run", - "git-widget-placeholder": "main", - "ignore.virus.scanning.warn.message": "true", - "kotlin-language-version-configured": "true", - "last_opened_file_path": "C:/Users/Ibrahima/IdeaProjects/omni-tools/src/components/input", - "node.js.detected.package.eslint": "true", - "node.js.detected.package.tslint": "true", - "node.js.selected.package.eslint": "(autodetect)", - "node.js.selected.package.tslint": "(autodetect)", - "nodejs_package_manager_path": "npm", - "npm.build.executor": "Run", - "npm.dev.executor": "Run", - "npm.lint.executor": "Run", - "npm.prebuild.executor": "Run", - "npm.script:create:tool.executor": "Run", - "npm.test.executor": "Run", - "npm.test:e2e.executor": "Run", - "npm.test:e2e:run.executor": "Run", - "prettierjs.PrettierConfiguration.Package": "C:\\Users\\Ibrahima\\IdeaProjects\\omni-tools\\node_modules\\prettier", - "project.structure.last.edited": "Problems", - "project.structure.proportion": "0.0", - "project.structure.side.proportion": "0.2", - "settings.editor.selected.configurable": "refactai_advanced_settings", - "ts.external.directory.path": "C:\\Users\\Ibrahima\\IdeaProjects\\omni-tools\\node_modules\\typescript\\lib", - "vue.rearranger.settings.migration": "true" + +}]]>