Show version

* Add default mermaid content

apps/client/src/components/settings/settings-sidebar.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from "react";
-import { Group, Text, ScrollArea, ActionIcon, rem } from "@mantine/core";
+import React, { useEffect, useState } from 'react';
+import { Group, Text, ScrollArea, ActionIcon, rem } from '@mantine/core';
 import {
   IconUser,
   IconSettings,
@@ -8,9 +8,9 @@ import {
   IconUsersGroup,
   IconSpaces,
   IconBrush,
-} from "@tabler/icons-react";
-import { Link, useLocation, useNavigate } from "react-router-dom";
-import classes from "./settings.module.css";
+} from '@tabler/icons-react';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
+import classes from './settings.module.css';
 
 interface DataItem {
   label: string;
@@ -25,27 +25,27 @@ interface DataGroup {
 
 const groupedData: DataGroup[] = [
   {
-    heading: "Account",
+    heading: 'Account',
     items: [
-      { label: "Profile", icon: IconUser, path: "/settings/account/profile" },
+      { label: 'Profile', icon: IconUser, path: '/settings/account/profile' },
       {
-        label: "Preferences",
+        label: 'Preferences',
         icon: IconBrush,
-        path: "/settings/account/preferences",
+        path: '/settings/account/preferences',
       },
     ],
   },
   {
-    heading: "Workspace",
+    heading: 'Workspace',
     items: [
-      { label: "General", icon: IconSettings, path: "/settings/workspace" },
+      { label: 'General', icon: IconSettings, path: '/settings/workspace' },
       {
-        label: "Members",
+        label: 'Members',
         icon: IconUsers,
-        path: "/settings/members",
+        path: '/settings/members',
       },
-      { label: "Groups", icon: IconUsersGroup, path: "/settings/groups" },
-      { label: "Spaces", icon: IconSpaces, path: "/settings/spaces" },
+      { label: 'Groups', icon: IconUsersGroup, path: '/settings/groups' },
+      { label: 'Spaces', icon: IconSpaces, path: '/settings/spaces' },
     ],
   },
 ];
@@ -93,6 +93,17 @@ export default function SettingsSidebar() {
       </Group>
 
       <ScrollArea w="100%">{menuItems}</ScrollArea>
+      <div className={classes.version}>
+        <Text
+          className={classes.version}
+          c="dimmed"
+          component="a"
+          href="https://github.com/docmost/docmost/releases"
+          target="_blank"
+        >
+          v{APP_VERSION}
+        </Text>
+      </div>
     </div>
   );
 }

apps/client/src/components/settings/settings.module.css

@@ -57,3 +57,8 @@
     display: flex;
     align-items: center;
 }
+
+.version {
+    padding-left: var(--mantine-spacing-xs) ;
+    padding-top: 10px;
+}

apps/client/src/features/editor/components/slash-menu/menu-items.ts

@@ -17,123 +17,123 @@ import {
   IconPhoto,
   IconTable,
   IconTypography,
-} from '@tabler/icons-react';
+} from "@tabler/icons-react";
 import {
   CommandProps,
   SlashMenuGroupedItemsType,
-} from '@/features/editor/components/slash-menu/types';
-import { uploadImageAction } from '@/features/editor/components/image/upload-image-action.tsx';
-import { uploadVideoAction } from '@/features/editor/components/video/upload-video-action.tsx';
-import { uploadAttachmentAction } from '@/features/editor/components/attachment/upload-attachment-action.tsx';
-import IconExcalidraw from '@/components/icons/icon-excalidraw';
-import IconMermaid from '@/components/icons/icon-mermaid';
-import IconDrawio from '@/components/icons/icon-drawio';
+} from "@/features/editor/components/slash-menu/types";
+import { uploadImageAction } from "@/features/editor/components/image/upload-image-action.tsx";
+import { uploadVideoAction } from "@/features/editor/components/video/upload-video-action.tsx";
+import { uploadAttachmentAction } from "@/features/editor/components/attachment/upload-attachment-action.tsx";
+import IconExcalidraw from "@/components/icons/icon-excalidraw";
+import IconMermaid from "@/components/icons/icon-mermaid";
+import IconDrawio from "@/components/icons/icon-drawio";
 
 const CommandGroups: SlashMenuGroupedItemsType = {
   basic: [
     {
-      title: 'Text',
-      description: 'Just start typing with plain text.',
-      searchTerms: ['p', 'paragraph'],
+      title: "Text",
+      description: "Just start typing with plain text.",
+      searchTerms: ["p", "paragraph"],
       icon: IconTypography,
       command: ({ editor, range }: CommandProps) => {
         editor
           .chain()
           .focus()
           .deleteRange(range)
-          .toggleNode('paragraph', 'paragraph')
+          .toggleNode("paragraph", "paragraph")
           .run();
       },
     },
     {
-      title: 'To-do list',
-      description: 'Track tasks with a to-do list.',
-      searchTerms: ['todo', 'task', 'list', 'check', 'checkbox'],
+      title: "To-do list",
+      description: "Track tasks with a to-do list.",
+      searchTerms: ["todo", "task", "list", "check", "checkbox"],
       icon: IconCheckbox,
       command: ({ editor, range }: CommandProps) => {
         editor.chain().focus().deleteRange(range).toggleTaskList().run();
       },
     },
     {
-      title: 'Heading 1',
-      description: 'Big section heading.',
-      searchTerms: ['title', 'big', 'large'],
+      title: "Heading 1",
+      description: "Big section heading.",
+      searchTerms: ["title", "big", "large"],
       icon: IconH1,
       command: ({ editor, range }: CommandProps) => {
         editor
           .chain()
           .focus()
           .deleteRange(range)
-          .setNode('heading', { level: 1 })
+          .setNode("heading", { level: 1 })
           .run();
       },
     },
     {
-      title: 'Heading 2',
-      description: 'Medium section heading.',
-      searchTerms: ['subtitle', 'medium'],
+      title: "Heading 2",
+      description: "Medium section heading.",
+      searchTerms: ["subtitle", "medium"],
       icon: IconH2,
       command: ({ editor, range }: CommandProps) => {
         editor
           .chain()
           .focus()
           .deleteRange(range)
-          .setNode('heading', { level: 2 })
+          .setNode("heading", { level: 2 })
           .run();
       },
     },
     {
-      title: 'Heading 3',
-      description: 'Small section heading.',
-      searchTerms: ['subtitle', 'small'],
+      title: "Heading 3",
+      description: "Small section heading.",
+      searchTerms: ["subtitle", "small"],
       icon: IconH3,
       command: ({ editor, range }: CommandProps) => {
         editor
           .chain()
           .focus()
           .deleteRange(range)
-          .setNode('heading', { level: 3 })
+          .setNode("heading", { level: 3 })
           .run();
       },
     },
     {
-      title: 'Bullet list',
-      description: 'Create a simple bullet list.',
-      searchTerms: ['unordered', 'point', 'list'],
+      title: "Bullet list",
+      description: "Create a simple bullet list.",
+      searchTerms: ["unordered", "point", "list"],
       icon: IconList,
       command: ({ editor, range }: CommandProps) => {
         editor.chain().focus().deleteRange(range).toggleBulletList().run();
       },
     },
     {
-      title: 'Numbered list',
-      description: 'Create a list with numbering.',
-      searchTerms: ['numbered', 'ordered', 'list'],
+      title: "Numbered list",
+      description: "Create a list with numbering.",
+      searchTerms: ["numbered", "ordered", "list"],
       icon: IconListNumbers,
       command: ({ editor, range }: CommandProps) => {
         editor.chain().focus().deleteRange(range).toggleOrderedList().run();
       },
     },
     {
-      title: 'Quote',
-      description: 'Create block quote.',
-      searchTerms: ['blockquote', 'quotes'],
+      title: "Quote",
+      description: "Create block quote.",
+      searchTerms: ["blockquote", "quotes"],
       icon: IconBlockquote,
       command: ({ editor, range }: CommandProps) =>
         editor.chain().focus().deleteRange(range).toggleBlockquote().run(),
     },
     {
-      title: 'Code',
-      description: 'Capture a code snippet.',
-      searchTerms: ['codeblock'],
+      title: "Code",
+      description: "Capture a code snippet.",
+      searchTerms: ["codeblock"],
       icon: IconCode,
       command: ({ editor, range }: CommandProps) =>
         editor.chain().focus().deleteRange(range).toggleCodeBlock().run(),
     },
     {
-      title: 'Image',
-      description: 'Upload any image from your device.',
-      searchTerms: ['photo', 'picture', 'media'],
+      title: "Image",
+      description: "Upload any image from your device.",
+      searchTerms: ["photo", "picture", "media"],
       icon: IconPhoto,
       command: ({ editor, range }) => {
         editor.chain().focus().deleteRange(range).run();
@@ -142,9 +142,9 @@ const CommandGroups: SlashMenuGroupedItemsType = {
         if (!pageId) return;
 
         // upload image
-        const input = document.createElement('input');
-        input.type = 'file';
-        input.accept = 'image/*';
+        const input = document.createElement("input");
+        input.type = "file";
+        input.accept = "image/*";
         input.multiple = true;
         input.onchange = async () => {
           if (input.files?.length) {
@@ -158,9 +158,9 @@ const CommandGroups: SlashMenuGroupedItemsType = {
       },
     },
     {
-      title: 'Video',
-      description: 'Upload any video from your device.',
-      searchTerms: ['video', 'mp4', 'media'],
+      title: "Video",
+      description: "Upload any video from your device.",
+      searchTerms: ["video", "mp4", "media"],
       icon: IconMovie,
       command: ({ editor, range }) => {
         editor.chain().focus().deleteRange(range).run();
@@ -169,9 +169,9 @@ const CommandGroups: SlashMenuGroupedItemsType = {
         if (!pageId) return;
 
         // upload video
-        const input = document.createElement('input');
-        input.type = 'file';
-        input.accept = 'video/*';
+        const input = document.createElement("input");
+        input.type = "file";
+        input.accept = "video/*";
         input.onchange = async () => {
           if (input.files?.length) {
             const file = input.files[0];
@@ -183,9 +183,9 @@ const CommandGroups: SlashMenuGroupedItemsType = {
       },
     },
     {
-      title: 'File attachment',
-      description: 'Upload any file from your device.',
-      searchTerms: ['file', 'attachment', 'upload', 'pdf', 'csv', 'zip'],
+      title: "File attachment",
+      description: "Upload any file from your device.",
+      searchTerms: ["file", "attachment", "upload", "pdf", "csv", "zip"],
       icon: IconPaperclip,
       command: ({ editor, range }) => {
         editor.chain().focus().deleteRange(range).run();
@@ -194,16 +194,16 @@ const CommandGroups: SlashMenuGroupedItemsType = {
         if (!pageId) return;
 
         // upload file
-        const input = document.createElement('input');
-        input.type = 'file';
-        input.accept = '';
+        const input = document.createElement("input");
+        input.type = "file";
+        input.accept = "";
         input.onchange = async () => {
           if (input.files?.length) {
             const file = input.files[0];
             const pos = editor.view.state.selection.from;
-            if (file.type.includes('image/*')) {
+            if (file.type.includes("image/*")) {
               uploadImageAction(file, editor.view, pos, pageId);
-            } else if (file.type.includes('video/*')) {
+            } else if (file.type.includes("video/*")) {
               uploadVideoAction(file, editor.view, pos, pageId);
             } else {
               uploadAttachmentAction(file, editor.view, pos, pageId);
@@ -214,9 +214,9 @@ const CommandGroups: SlashMenuGroupedItemsType = {
       },
     },
     {
-      title: 'Table',
-      description: 'Insert a table.',
-      searchTerms: ['table', 'rows', 'columns'],
+      title: "Table",
+      description: "Insert a table.",
+      searchTerms: ["table", "rows", "columns"],
       icon: IconTable,
       command: ({ editor, range }: CommandProps) =>
         editor
@@ -227,43 +227,43 @@ const CommandGroups: SlashMenuGroupedItemsType = {
           .run(),
     },
     {
-      title: 'Toggle block',
-      description: 'Insert collapsible block.',
-      searchTerms: ['collapsible', 'block', 'toggle', 'details', 'expand'],
+      title: "Toggle block",
+      description: "Insert collapsible block.",
+      searchTerms: ["collapsible", "block", "toggle", "details", "expand"],
       icon: IconCaretRightFilled,
       command: ({ editor, range }: CommandProps) =>
         editor.chain().focus().deleteRange(range).toggleDetails().run(),
     },
     {
-      title: 'Callout',
-      description: 'Insert callout notice.',
+      title: "Callout",
+      description: "Insert callout notice.",
       searchTerms: [
-        'callout',
-        'notice',
-        'panel',
-        'info',
-        'warning',
-        'success',
-        'error',
-        'danger',
+        "callout",
+        "notice",
+        "panel",
+        "info",
+        "warning",
+        "success",
+        "error",
+        "danger",
       ],
       icon: IconInfoCircle,
       command: ({ editor, range }: CommandProps) =>
         editor.chain().focus().deleteRange(range).toggleCallout().run(),
     },
     {
-      title: 'Math inline',
-      description: 'Insert inline math equation.',
+      title: "Math inline",
+      description: "Insert inline math equation.",
       searchTerms: [
-        'math',
-        'inline',
-        'mathinline',
-        'inlinemath',
-        'inline math',
-        'equation',
-        'katex',
-        'latex',
-        'tex',
+        "math",
+        "inline",
+        "mathinline",
+        "inlinemath",
+        "inline math",
+        "equation",
+        "katex",
+        "latex",
+        "tex",
       ],
       icon: IconMathFunction,
       command: ({ editor, range }: CommandProps) =>
@@ -276,47 +276,48 @@ const CommandGroups: SlashMenuGroupedItemsType = {
           .run(),
     },
     {
-      title: 'Math block',
-      description: 'Insert math equation',
+      title: "Math block",
+      description: "Insert math equation",
       searchTerms: [
-        'math',
-        'block',
-        'mathblock',
-        'block math',
-        'equation',
-        'katex',
-        'latex',
-        'tex',
+        "math",
+        "block",
+        "mathblock",
+        "block math",
+        "equation",
+        "katex",
+        "latex",
+        "tex",
       ],
       icon: IconMath,
       command: ({ editor, range }: CommandProps) =>
         editor.chain().focus().deleteRange(range).setMathBlock().run(),
     },
     {
-      title: 'Mermaid diagram',
-      description: 'Insert mermaid diagram',
-      searchTerms: ['mermaid', 'diagrams', 'chart', 'uml'],
+      title: "Mermaid diagram",
+      description: "Insert mermaid diagram",
+      searchTerms: ["mermaid", "diagrams", "chart", "uml"],
       icon: IconMermaid,
       command: ({ editor, range }: CommandProps) =>
         editor
           .chain()
           .focus()
           .deleteRange(range)
-          .setCodeBlock({ language: 'mermaid' })
+          .setCodeBlock({ language: "mermaid" })
+          .insertContent("flowchart LR\n" + "    A --> B")
           .run(),
     },
     {
-      title: 'Draw.io (diagrams.net) ',
-      description: 'Insert and design Drawio diagrams',
-      searchTerms: ['drawio', 'diagrams', 'charts', 'uml'],
+      title: "Draw.io (diagrams.net) ",
+      description: "Insert and design Drawio diagrams",
+      searchTerms: ["drawio", "diagrams", "charts", "uml", "whiteboard"],
       icon: IconDrawio,
       command: ({ editor, range }: CommandProps) =>
         editor.chain().focus().deleteRange(range).setDrawio().run(),
     },
     {
-      title: 'Excalidraw diagram',
-      description: 'Draw and sketch excalidraw diagrams',
-      searchTerms: ['diagrams', 'draw', 'sketch'],
+      title: "Excalidraw diagram",
+      description: "Draw and sketch excalidraw diagrams",
+      searchTerms: ["diagrams", "draw", "sketch", "whiteboard"],
       icon: IconExcalidraw,
       command: ({ editor, range }: CommandProps) =>
         editor.chain().focus().deleteRange(range).setExcalidraw().run(),

apps/client/src/vite-env.d.ts

@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+declare const APP_VERSION: string

apps/client/vite.config.ts

@@ -12,6 +12,7 @@ export default defineConfig(({ mode }) => {
       "process.env": {
         APP_URL,
       },
+      'APP_VERSION': JSON.stringify(process.env.npm_package_version),
     },
     plugins: [react()],
     resolve: {