feat(editor): add markdown with syntax highlighting & mermaid (#544)

* feat(editor): add markdown with syntax highlighting & mermaid

* feat(ipc): add handler for opening external URLs

* feat(menu): add markdown preview option to main menu

* feat(ui): add active state support to ActionButton and Button

* refactor(i18n): restore markdown and mindmap preview options in locales

Author: antonreshetov

package.json

@@ -50,9 +50,12 @@
     "interactjs": "^1.10.27",
     "ky": "^1.7.5",
     "lucide-vue-next": "^0.476.0",
+    "marked": "^15.0.8",
+    "mermaid": "^11.6.0",
     "onigasm": "^2.2.5",
     "prettier": "^3.5.3",
     "radix-vue": "^1.9.17",
+    "sanitize-html": "^2.15.0",
     "tailwind-merge": "^3.0.2",
     "vue-sonner": "^1.3.0",
     "vue3-perfect-scrollbar": "^2.0.0"
@@ -68,6 +71,7 @@
     "@types/codemirror": "^5.60.15",
     "@types/fs-extra": "^11.0.4",
     "@types/node": "^22.10.8",
+    "@types/sanitize-html": "^2.15.0",
     "@vitejs/plugin-vue": "^5.2.1",
     "autoprefixer": "^10.4.20",
     "bumpp": "^9.10.2",

pnpm-lock.yaml

@@ -51,16 +51,16 @@
     "format": "Formátovat",
     "previewCode": "Náhled kódu",
     "previewScreenshot": "Náhled snímku obrazovky",
-    "previewMarkdown": "Náhled Markdownu",
-    "previewMindmap": "Náhled myšlenkové mapy",
     "fontSizeIncrease": "Zvětšit velikost písma",
     "fontSizeDecrease": "Zmenšit velikost písma",
     "fontSizeReset": "Obnovit velikost písma"
   },
   "markdown": {
     "label": "Markdown",
     "presentationMode": "Prezentační režim",
-    "preview": "Náhled"
+    "preview": "Náhled",
+    "previewMarkdown": "Náhled Markdownu",
+    "previewMindmap": "Náhled myšlenkové mapy"
   },
   "history": {
     "label": "Historie",

src/main/i18n/locales/cs_CZ/menu.json

@@ -51,16 +51,16 @@
     "format": "Formatieren",
     "previewCode": "Code-Vorschau",
     "previewScreenshot": "Screenshot-Vorschau",
-    "previewMarkdown": "Markdown-Vorschau",
-    "previewMindmap": "Mindmap-Vorschau",
     "fontSizeIncrease": "Schriftgröße erhöhen",
     "fontSizeDecrease": "Schriftgröße verringern",
     "fontSizeReset": "Schriftgröße zurücksetzen"
   },
   "markdown": {
     "label": "Markdown",
     "presentationMode": "Präsentationsmodus",
-    "preview": "Vorschau"
+    "preview": "Vorschau",
+    "previewMarkdown": "Markdown-Vorschau",
+    "previewMindmap": "Mindmap-Vorschau"
   },
   "history": {
     "label": "Verlauf",

src/main/i18n/locales/de_DE/menu.json

@@ -51,16 +51,16 @@
     "format": "Μορφοποίηση",
     "previewCode": "Προεπισκόπηση Κώδικα",
     "previewScreenshot": "Προεπισκόπηση Screenshot",
-    "previewMarkdown": "Προεπισκόπηση Markdown",
-    "previewMindmap": "Προεπισκόπηση Mindmap",
     "fontSizeIncrease": "Αύξηση Μεγέθους Γραμματοσειράς",
     "fontSizeDecrease": "Μείωση Μεγέθους Γραμματοσειράς",
     "fontSizeReset": "Επαναφορά Μεγέθους Γραμματοσειράς"
   },
   "markdown": {
     "label": "Markdown",
     "presentationMode": "Λειτουργία Παρουσίασης",
-    "preview": "Προεπισκόπηση"
+    "preview": "Προεπισκόπηση",
+    "previewMarkdown": "Προεπισκόπηση Markdown",
+    "previewMindmap": "Προεπισκόπηση Mindmap"
   },
   "history": {
     "label": "Ιστορικό",

src/main/i18n/locales/el_GR/menu.json

@@ -51,16 +51,16 @@
     "format": "Format",
     "previewCode": "Preview Code",
     "previewScreenshot": "Preview Screenshot",
-    "previewMarkdown": "Preview Markdown",
-    "previewMindmap": "Preview Mindmap",
     "fontSizeIncrease": "Font Size Increase",
     "fontSizeDecrease": "Font Size Decrease",
     "fontSizeReset": "Font Size Reset"
   },
   "markdown": {
     "label": "Markdown",
+    "preview": "Preview",
+    "previewMarkdown": "Preview Markdown",
     "presentationMode": "Presentation Mode",
-    "preview": "Preview"
+    "previewMindmap": "Preview Mindmap"
   },
   "history": {
     "label": "History",

src/main/i18n/locales/en_US/menu.json

@@ -51,16 +51,16 @@
     "format": "Formatear",
     "previewCode": "Vista Previa del Código",
     "previewScreenshot": "Vista Previa de Captura",
-    "previewMarkdown": "Vista Previa de Markdown",
-    "previewMindmap": "Vista Previa de Mapa Mental",
     "fontSizeIncrease": "Aumentar Tamaño de Fuente",
     "fontSizeDecrease": "Disminuir Tamaño de Fuente",
     "fontSizeReset": "Restablecer Tamaño de Fuente"
   },
   "markdown": {
     "label": "Markdown",
     "presentationMode": "Modo Presentación",
-    "preview": "Vista Previa"
+    "preview": "Vista Previa",
+    "previewMarkdown": "Vista Previa de Markdown",
+    "previewMindmap": "Vista Previa de Mapa Mental"
   },
   "history": {
     "label": "Historial",

src/main/i18n/locales/es_ES/menu.json

@@ -51,16 +51,16 @@
     "format": "قالب‌بندی",
     "previewCode": "پیش‌نمایش کد",
     "previewScreenshot": "پیش‌نمایش تصویر",
-    "previewMarkdown": "پیش‌نمایش Markdown",
-    "previewMindmap": "پیش‌نمایش نقشه ذهنی",
     "fontSizeIncrease": "افزایش اندازه فونت",
     "fontSizeDecrease": "کاهش اندازه فونت",
     "fontSizeReset": "بازنشانی اندازه فونت"
   },
   "markdown": {
     "label": "Markdown",
     "presentationMode": "حالت ارائه",
-    "preview": "پیش‌نمایش"
+    "preview": "پیش‌نمایش",
+    "previewMarkdown": "پیش‌نمایش Markdown",
+    "previewMindmap": "پیش‌نمایش نقشه ذهنی"
   },
   "history": {
     "label": "تاریخچه",

src/main/i18n/locales/fa_IR/menu.json

@@ -51,16 +51,16 @@
     "format": "Formater",
     "previewCode": "Aperçu du code",
     "previewScreenshot": "Aperçu de la capture d'écran",
-    "previewMarkdown": "Aperçu Markdown",
-    "previewMindmap": "Aperçu de la carte mentale",
     "fontSizeIncrease": "Augmenter la taille de la police",
     "fontSizeDecrease": "Diminuer la taille de la police",
     "fontSizeReset": "Réinitialiser la taille de la police"
   },
   "markdown": {
     "label": "Markdown",
     "presentationMode": "Mode présentation",
-    "preview": "Aperçu"
+    "preview": "Aperçu",
+    "previewMarkdown": "Aperçu Markdown",
+    "previewMindmap": "Aperçu de la carte mentale"
   },
   "history": {
     "label": "Historique",

src/main/i18n/locales/fr_FR/menu.json

@@ -51,16 +51,16 @@
     "format": "フォーマット",
     "previewCode": "コードのプレビュー",
     "previewScreenshot": "スクリーンショットのプレビュー",
-    "previewMarkdown": "Markdownのプレビュー",
-    "previewMindmap": "マインドマップのプレビュー",
     "fontSizeIncrease": "フォントサイズを大きく",
     "fontSizeDecrease": "フォントサイズを小さく",
     "fontSizeReset": "フォントサイズをリセット"
   },
   "markdown": {
     "label": "Markdown",
     "presentationMode": "プレゼンテーションモード",
-    "preview": "プレビュー"
+    "preview": "プレビュー",
+    "previewMarkdown": "Markdownのプレビュー",
+    "previewMindmap": "マインドマップのプレビュー"
   },
   "history": {
     "label": "履歴",