feat(new tool): text diff and comparator (#588)

* feat(new tool): text diff and comparator

* chore(ci): increased memory in CI

.github/workflows/ci.yml

@@ -31,4 +31,6 @@ jobs:
         run: pnpm typecheck
 
       - name: Build the app
+        env:
+          NODE_OPTIONS: --max-old-space-size=4096
         run: pnpm build

components.d.ts

@@ -27,6 +27,7 @@ declare module '@vue/runtime-core' {
     'CButton.demo': typeof import('./src/ui/c-button/c-button.demo.vue')['default']
     CCard: typeof import('./src/ui/c-card/c-card.vue')['default']
     'CCard.demo': typeof import('./src/ui/c-card/c-card.demo.vue')['default']
+    CDiffEditor: typeof import('./src/ui/c-diff-editor/c-diff-editor.vue')['default']
     ChmodCalculator: typeof import('./src/tools/chmod-calculator/chmod-calculator.vue')['default']
     Chronometer: typeof import('./src/tools/chronometer/chronometer.vue')['default']
     CInputText: typeof import('./src/ui/c-input-text/c-input-text.vue')['default']
@@ -166,6 +167,7 @@ declare module '@vue/runtime-core' {
     SvgPlaceholderGenerator: typeof import('./src/tools/svg-placeholder-generator/svg-placeholder-generator.vue')['default']
     TemperatureConverter: typeof import('./src/tools/temperature-converter/temperature-converter.vue')['default']
     TextareaCopyable: typeof import('./src/components/TextareaCopyable.vue')['default']
+    TextDiff: typeof import('./src/tools/text-diff/text-diff.vue')['default']
     TextStatistics: typeof import('./src/tools/text-statistics/text-statistics.vue')['default']
     TextToNatoAlphabet: typeof import('./src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue')['default']
     TokenDisplay: typeof import('./src/tools/otp-code-generator-and-validator/token-display.vue')['default']

package.json

@@ -64,6 +64,7 @@
     "lodash": "^4.17.21",
     "mathjs": "^11.9.1",
     "mime-types": "^2.1.35",
+    "monaco-editor": "^0.41.0",
     "naive-ui": "^2.34.3",
     "netmask": "^2.0.2",
     "node-forge": "^1.3.1",

src/tools/index.ts

@@ -2,6 +2,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 stringObfuscator } from './string-obfuscator';
+import { tool as textDiff } from './text-diff';
 import { tool as emojiPicker } from './emoji-picker';
 import { tool as passwordStrengthAnalyser } from './password-strength-analyser';
 import { tool as yamlToToml } from './yaml-to-toml';
@@ -146,7 +147,7 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Text',
-    components: [loremIpsumGenerator, textStatistics, emojiPicker, stringObfuscator],
+    components: [loremIpsumGenerator, textStatistics, emojiPicker, stringObfuscator, textDiff],
   },
   {
     name: 'Data',

src/tools/text-diff/index.ts

@@ -0,0 +1,12 @@
+import { FileDiff } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Text diff',
+  path: '/text-diff',
+  description: 'Compare two texts and see the differences between them.',
+  keywords: ['text', 'diff', 'compare', 'string', 'text diff', 'code'],
+  component: () => import('./text-diff.vue'),
+  icon: FileDiff,
+  createdAt: new Date('2023-08-16'),
+});

src/tools/text-diff/text-diff.vue

@@ -0,0 +1,5 @@
+<template>
+  <c-card w-full important:flex-1 important:pa-0>
+    <c-diff-editor />
+  </c-card>
+</template>