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

* feat(new tool): text diff and comparator

* chore(ci): increased memory in CI

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>