chore(deps): updated minor deps version

* 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

README.md

@@ -26,6 +26,7 @@ docker run -d --name it-tools --restart unless-stopped -p 8080:80 ghcr.io/corent
 
 **Other solutions:**
 
+- [Cloudron](https://www.cloudron.io/store/tech.ittools.cloudron.html)
 - [Tipi](https://www.runtipi.io/docs/apps-available)
 - [Unraid](https://unraid.net/community/apps?q=it-tools)
 
@@ -34,23 +35,21 @@ docker run -d --name it-tools --restart unless-stopped -p 8080:80 ghcr.io/corent
 ### Recommended IDE Setup
 
 [VSCode](https://code.visualstudio.com/) with the following extensions:
-- [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) 
+
+- [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur)
 - [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
 - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
 - [i18n Ally](https://marketplace.visualstudio.com/items?itemName=lokalise.i18n-ally)
 
 with the following settings:
 
-```json5
+```json
 {
   "editor.formatOnSave": false,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   },
-  "i18n-ally.localesPaths": [
-    "locales",
-    "src/tools/*/locales"
-  ],
+  "i18n-ally.localesPaths": ["locales", "src/tools/*/locales"],
   "i18n-ally.keystyle": "nested"
 }
 ```

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

@@ -35,98 +35,99 @@
   "dependencies": {
     "@it-tools/bip39": "^0.0.4",
     "@it-tools/oggen": "^1.3.0",
-    "@sindresorhus/slugify": "^2.2.0",
-    "@tiptap/pm": "^2.1.6",
-    "@tiptap/starter-kit": "^2.1.6",
-    "@tiptap/vue-3": "^2.0.3",
+    "@sindresorhus/slugify": "^2.2.1",
+    "@tiptap/pm": "^2.1.7",
+    "@tiptap/starter-kit": "^2.1.7",
+    "@tiptap/vue-3": "^2.1.7",
     "@vicons/material": "^0.12.0",
     "@vicons/tabler": "^0.12.0",
-    "@vueuse/core": "^10.3.0",
-    "@vueuse/head": "^1.0.0",
-    "@vueuse/router": "^10.0.0",
+    "@vueuse/core": "^10.4.0",
+    "@vueuse/head": "^1.3.1",
+    "@vueuse/router": "^10.4.0",
     "bcryptjs": "^2.4.3",
     "change-case": "^4.1.2",
     "colord": "^2.9.3",
     "composerize-ts": "^0.6.2",
     "country-code-lookup": "^0.1.0",
     "cron-validator": "^1.3.1",
-    "cronstrue": "^2.26.0",
+    "cronstrue": "^2.31.0",
     "crypto-js": "^4.1.1",
-    "date-fns": "^2.29.3",
+    "date-fns": "^2.30.0",
     "emojilib": "^3.0.10",
     "figue": "^1.2.0",
     "fuse.js": "^6.6.2",
-    "highlight.js": "^11.7.0",
+    "highlight.js": "^11.8.0",
     "iarna-toml-esm": "^3.0.5",
     "json5": "^2.2.3",
     "jwt-decode": "^3.1.2",
-    "libphonenumber-js": "^1.10.28",
+    "libphonenumber-js": "^1.10.41",
     "lodash": "^4.17.21",
-    "mathjs": "^11.9.1",
+    "mathjs": "^11.10.0",
     "mime-types": "^2.1.35",
-    "naive-ui": "^2.34.3",
+    "monaco-editor": "^0.41.0",
+    "naive-ui": "^2.34.4",
     "netmask": "^2.0.2",
     "node-forge": "^1.3.1",
-    "oui": "^12.0.52",
-    "pinia": "^2.0.34",
+    "oui": "^12.0.71",
+    "pinia": "^2.1.6",
     "plausible-tracker": "^0.3.8",
-    "qrcode": "^1.5.1",
+    "qrcode": "^1.5.3",
     "randombytes": "^2.1.0",
-    "sql-formatter": "^12.0.0",
+    "sql-formatter": "^12.2.4",
     "ua-parser-js": "^1.0.35",
     "unicode-emoji-json": "^0.4.0",
-    "unplugin-auto-import": "^0.16.4",
+    "unplugin-auto-import": "^0.16.6",
     "uuid": "^9.0.0",
     "vue": "^3.3.4",
     "vue-i18n": "^9.2.2",
-    "vue-router": "^4.1.6",
-    "vue-tsc": "^1.8.1",
-    "xml-formatter": "^3.3.2",
-    "yaml": "^2.2.1"
+    "vue-router": "^4.2.4",
+    "vue-tsc": "^1.8.8",
+    "xml-formatter": "^3.5.0",
+    "yaml": "^2.3.1"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.40.2",
-    "@iconify-json/mdi": "^1.1.50",
+    "@antfu/eslint-config": "^0.41.0",
+    "@iconify-json/mdi": "^1.1.54",
     "@intlify/unplugin-vue-i18n": "^0.12.3",
-    "@playwright/test": "^1.32.3",
-    "@rushstack/eslint-patch": "^1.2.0",
-    "@tsconfig/node18": "^18.2.0",
+    "@playwright/test": "^1.37.1",
+    "@rushstack/eslint-patch": "^1.3.3",
+    "@tsconfig/node18": "^18.2.1",
     "@types/bcryptjs": "^2.4.2",
     "@types/crypto-js": "^4.1.1",
-    "@types/jsdom": "^21.0.0",
-    "@types/lodash": "^4.14.192",
+    "@types/jsdom": "^21.1.2",
+    "@types/lodash": "^4.14.197",
     "@types/mime-types": "^2.1.1",
-    "@types/netmask": "^2.0.0",
-    "@types/node": "^18.15.11",
-    "@types/node-forge": "^1.3.2",
-    "@types/qrcode": "^1.5.0",
+    "@types/netmask": "^2.0.2",
+    "@types/node": "^18.17.11",
+    "@types/node-forge": "^1.3.4",
+    "@types/qrcode": "^1.5.1",
     "@types/randombytes": "^2.0.0",
     "@types/ua-parser-js": "^0.7.36",
-    "@types/uuid": "^9.0.0",
-    "@unocss/eslint-config": "^0.55.0",
-    "@vitejs/plugin-vue": "^4.3.2",
+    "@types/uuid": "^9.0.2",
+    "@unocss/eslint-config": "^0.55.3",
+    "@vitejs/plugin-vue": "^4.3.3",
     "@vitejs/plugin-vue-jsx": "^3.0.2",
-    "@vue/compiler-sfc": "^3.2.47",
+    "@vue/compiler-sfc": "^3.3.4",
     "@vue/runtime-dom": "^3.3.4",
-    "@vue/test-utils": "^2.3.2",
+    "@vue/test-utils": "^2.4.1",
     "@vue/tsconfig": "^0.4.0",
-    "c8": "^8.0.0",
-    "consola": "^3.0.2",
-    "eslint": "^8.47.0",
-    "jsdom": "^22.0.0",
-    "less": "^4.1.3",
-    "prettier": "^3.0.0",
-    "typescript": "~5.1.0",
-    "unocss": "^0.55.0",
+    "c8": "^8.0.1",
+    "consola": "^3.2.3",
+    "eslint": "^8.48.0",
+    "jsdom": "^22.1.0",
+    "less": "^4.2.0",
+    "prettier": "^3.0.2",
+    "typescript": "~5.2.2",
+    "unocss": "^0.55.3",
     "unocss-preset-scrollbar": "^0.2.1",
     "unplugin-icons": "^0.16.5",
-    "unplugin-vue-components": "^0.25.0",
+    "unplugin-vue-components": "^0.25.1",
     "vite": "^4.4.9",
-    "vite-plugin-pwa": "^0.16.0",
-    "vite-plugin-vue-markdown": "^0.23.5",
+    "vite-plugin-pwa": "^0.16.4",
+    "vite-plugin-vue-markdown": "^0.23.8",
     "vite-svg-loader": "^4.0.0",
-    "vitest": "^0.34.0",
+    "vitest": "^0.34.3",
     "workbox-window": "^7.0.0",
-    "zx": "^7.2.1"
+    "zx": "^7.2.3"
   }
 }

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>

src/ui/c-diff-editor/c-diff-editor.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import * as monaco from 'monaco-editor';
+import { useStyleStore } from '@/stores/style.store';
+
+const props = withDefaults(defineProps<{ options?: monaco.editor.IDiffEditorOptions }>(), { options: () => ({}) });
+const { options } = toRefs(props);
+
+const editorContainer = ref<HTMLElement | null>(null);
+let editor: monaco.editor.IStandaloneDiffEditor | null = null;
+
+monaco.editor.defineTheme('it-tools-dark', {
+  base: 'vs-dark',
+  inherit: true,
+  rules: [],
+  colors: {
+    'editor.background': '#00000000',
+  },
+});
+
+monaco.editor.defineTheme('it-tools-light', {
+  base: 'vs',
+  inherit: true,
+  rules: [],
+  colors: {
+    'editor.background': '#00000000',
+  },
+});
+
+const styleStore = useStyleStore();
+
+watch(
+  () => styleStore.isDarkTheme,
+  isDarkTheme => monaco.editor.setTheme(isDarkTheme ? 'it-tools-dark' : 'it-tools-light'),
+  { immediate: true },
+);
+
+watch(
+  () => options.value,
+  options => editor?.updateOptions(options),
+  { immediate: true, deep: true },
+);
+
+useResizeObserver(editorContainer, () => {
+  editor?.layout();
+});
+
+onMounted(() => {
+  if (!editorContainer.value) {
+    return;
+  }
+
+  editor = monaco.editor.createDiffEditor(editorContainer.value, {
+    originalEditable: true,
+    minimap: {
+      enabled: false,
+    },
+  });
+
+  editor.setModel({
+    original: monaco.editor.createModel('original text', 'txt'),
+    modified: monaco.editor.createModel('modified text', 'txt'),
+  });
+});
+</script>
+
+<template>
+  <div ref="editorContainer" h-600px />
+</template>