Merge PR CorentinTh#1753: added markdown preview feature

Author: qzztf

components.d.ts

@@ -136,6 +136,7 @@ declare module 'vue' {
     LoremIpsumGenerator: typeof import('./src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue')['default']
     MacAddressGenerator: typeof import('./src/tools/mac-address-generator/mac-address-generator.vue')['default']
     MacAddressLookup: typeof import('./src/tools/mac-address-lookup/mac-address-lookup.vue')['default']
+    MarkdownPreview: typeof import('./src/tools/markdown-preview/markdown-preview.vue')['default']
     MarkdownToHtml: typeof import('./src/tools/markdown-to-html/markdown-to-html.vue')['default']
     MathEvaluator: typeof import('./src/tools/math-evaluator/math-evaluator.vue')['default']
     MenuBar: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar.vue')['default']

src/tools/index.ts

@@ -1,8 +1,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 latexToUnicode } from './latex-to-unicode';
-import { tool as textToStyledLetters } from './text-to-styled-letters';
+import { tool as markdownPreview } from './markdown-preview';
 import { tool as emailNormalizer } from './email-normalizer';
 
 import { tool as asciiTextDrawer } from './ascii-text-drawer';
@@ -118,7 +117,7 @@ export const toolsByCategory: ToolCategory[] = [
       xmlToJson,
       jsonToXml,
       markdownToHtml,
-      textToStyledLetters,
+      markdownPreview,
     ],
   },
   {
@@ -171,7 +170,7 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Math',
-    components: [mathEvaluator, etaCalculator, percentageCalculator, latexToUnicode],
+    components: [mathEvaluator, etaCalculator, percentageCalculator],
   },
   {
     name: 'Measurement',

src/tools/markdown-preview/index.ts

@@ -0,0 +1,12 @@
+import { Markdown } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Markdown preview',
+  path: '/markdown-preview',
+  description: 'Live preview of Markdown as you type',
+  keywords: ['markdown', 'preview'],
+  component: () => import('./markdown-preview.vue'),
+  icon: Markdown,
+  createdAt: new Date('2026-03-17'),
+});

src/tools/markdown-preview/markdown-preview.e2e.spec.ts

@@ -0,0 +1,19 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Tool - Markdown preview', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/markdown-preview');
+  });
+
+  test('Has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle('Markdown preview - IT Tools');
+  });
+
+  test('renders markdown in preview as user types', async ({ page }) => {
+    await page.getByTestId('markdown-input').fill('# Hello World\n\n**Bold** and *italic*');
+    const preview = page.getByTestId('markdown-preview');
+    await expect(preview.locator('h1')).toHaveText('Hello World');
+    await expect(preview.locator('strong')).toHaveText('Bold');
+    await expect(preview.locator('em')).toHaveText('italic');
+  });
+});

src/tools/markdown-preview/markdown-preview.service.test.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it } from 'vitest';
+import { renderMarkdown } from './markdown-preview.service';
+
+describe('markdown-preview', () => {
+  it('renders markdown to html', () => {
+    expect(renderMarkdown('# Hello')).toContain('<h1>Hello</h1>');
+    expect(renderMarkdown('**bold**')).toContain('<strong>bold</strong>');
+    expect(renderMarkdown('*italic*')).toContain('<em>italic</em>');
+  });
+
+  it('renders empty string as empty', () => {
+    expect(renderMarkdown('')).toBe('');
+  });
+
+  it('sanitizes script tags', () => {
+    const result = renderMarkdown('<script>alert("xss")</script>');
+    expect(result).not.toContain('<script>');
+  });
+});

src/tools/markdown-preview/markdown-preview.service.ts

@@ -0,0 +1,9 @@
+import markdownit from 'markdown-it';
+import DomPurify from 'dompurify';
+
+const md = markdownit();
+
+export function renderMarkdown(markdown: string): string {
+  const html = md.render(markdown);
+  return DomPurify.sanitize(html, { ADD_ATTR: ['target'] });
+}

src/tools/markdown-preview/markdown-preview.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { useStorage } from '@vueuse/core';
+import { renderMarkdown } from './markdown-preview.service';
+
+const inputMarkdown = useStorage('markdown-preview:input', '');
+const previewHtml = computed(() => renderMarkdown(inputMarkdown.value));
+</script>
+
+<template>
+  <div class="markdown-preview-tool">
+    <c-input-text
+      v-model:value="inputMarkdown"
+
+      placeholder="Your Markdown content..."
+      rows="8"
+
+      label="Your Markdown to preview:"
+      autocomplete="off"
+      autocorrect="off"
+      autocapitalize="off"
+      spellcheck="false"
+      raw-text autofocus multiline monospace
+      test-id="markdown-input"
+    />
+
+    <n-divider />
+
+    <n-form-item label="Rendered preview:">
+      <c-card>
+        <div
+          class="markdown-preview"
+          data-test-id="markdown-preview"
+          v-html="previewHtml"
+        />
+      </c-card>
+    </n-form-item>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.markdown-preview-tool {
+  flex: 0 0 100%;
+}
+
+.markdown-preview {
+  overflow: auto;
+  width: 100%;
+  min-height: 200px;
+  max-height: 600px;
+  box-sizing: border-box;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  :deep(h1) { font-size: 1.5em; }
+  :deep(h2) { font-size: 1.3em; }
+  :deep(h3) { font-size: 1.1em; }
+  :deep(h1), :deep(h2), :deep(h3) { margin: 0.5em 0; line-height: 1.3; }
+  :deep(p), :deep(ul), :deep(ol) { margin: 0.5em 0; line-height: 1.6; }
+  :deep(ul), :deep(ol) { padding-left: 1.5em; }
+  :deep(code) { background: var(--n-color-modal); padding: 0.2em 0.4em; border-radius: 4px; font-size: 0.9em; }
+  :deep(pre) { background: var(--n-color-modal); padding: 12px; border-radius: 6px; overflow-x: auto; margin: 0.5em 0; }
+  :deep(pre code) { background: none; padding: 0; font-size: 0.9em; }
+  :deep(a) { color: var(--n-color-primary); text-decoration: none; }
+  :deep(a:hover) { text-decoration: underline; }
+}
+</style>