From 1141796f24c92564f5068e03f12b4e12865691d8 Mon Sep 17 00:00:00 2001 From: Philipinho <16838612+Philipinho@users.noreply.github.com> Date: Sun, 1 Sep 2024 17:30:34 +0100 Subject: [PATCH] Show version * Add default mermaid content --- .../components/settings/settings-sidebar.tsx | 41 ++-- .../components/settings/settings.module.css | 5 + .../components/slash-menu/menu-items.ts | 213 +++++++++--------- apps/client/src/vite-env.d.ts | 1 + apps/client/vite.config.ts | 1 + 5 files changed, 140 insertions(+), 121 deletions(-) diff --git a/apps/client/src/components/settings/settings-sidebar.tsx b/apps/client/src/components/settings/settings-sidebar.tsx index bab25307..3ba5ff29 100644 --- a/apps/client/src/components/settings/settings-sidebar.tsx +++ b/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() { {menuItems} +
+ + v{APP_VERSION} + +
); } diff --git a/apps/client/src/components/settings/settings.module.css b/apps/client/src/components/settings/settings.module.css index deb1f114..546ff351 100644 --- a/apps/client/src/components/settings/settings.module.css +++ b/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; +} diff --git a/apps/client/src/features/editor/components/slash-menu/menu-items.ts b/apps/client/src/features/editor/components/slash-menu/menu-items.ts index bd86fcb6..2c6d5021 100644 --- a/apps/client/src/features/editor/components/slash-menu/menu-items.ts +++ b/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(), diff --git a/apps/client/src/vite-env.d.ts b/apps/client/src/vite-env.d.ts index 11f02fe2..e16c0ce0 100644 --- a/apps/client/src/vite-env.d.ts +++ b/apps/client/src/vite-env.d.ts @@ -1 +1,2 @@ /// +declare const APP_VERSION: string diff --git a/apps/client/vite.config.ts b/apps/client/vite.config.ts index 899284cf..9da366ea 100644 --- a/apps/client/vite.config.ts +++ b/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: {