feat: Add support markdown for system description

assets/js/hooks/Mapper/components/mapInterface/components/Comments/components/MarkdownComment/MarkdownComment.tsx

@@ -1,4 +1,3 @@
-import classes from './MarkdownComment.module.scss';
 import clsx from 'clsx';
 import {
   InfoDrawer,
@@ -49,7 +48,11 @@ export const MarkdownComment = ({ text, time, characterEveId, id }: MarkdownComm
     <>
       <InfoDrawer
         labelClassName="mb-[3px]"
-        className={clsx(classes.MarkdownCommentRoot, 'p-1 bg-stone-700/20 ')}
+        className={clsx(
+          'p-1 bg-stone-700/20',
+          'text-[12px] leading-[1.2] text-stone-300 break-words',
+          'bg-gradient-to-r from-stone-600/40 via-stone-600/10 to-stone-600/0',
+        )}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
         title={

assets/js/hooks/Mapper/components/mapInterface/components/CommentsEditor/CommentsEditor.module.scss

@@ -0,0 +1,9 @@
+.CERoot {
+  @apply border border-stone-400/30 rounded-[2px];
+
+  :global {
+    .cm-content {
+      @apply bg-stone-600/40;
+    }
+  }
+}

assets/js/hooks/Mapper/components/mapInterface/components/CommentsEditor/CommentsEditor.tsx

@@ -6,6 +6,7 @@ import { useHotkey } from '@/hooks/Mapper/hooks';
 import { useCallback, useRef, useState } from 'react';
 import { OutCommand } from '@/hooks/Mapper/types';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import classes from './CommentsEditor.module.scss';
 
 export interface CommentsEditorProps {}
 
@@ -48,6 +49,7 @@ export const CommentsEditor = ({}: CommentsEditorProps) => {
 
   return (
     <MarkdownEditor
+      className={classes.CERoot}
       value={textVal}
       onChange={setTextVal}
       overlayContent={

assets/js/hooks/Mapper/components/mapInterface/components/MarkdownEditor/MarkdownEditor.module.scss

@@ -1,9 +1,9 @@
 .CERoot {
-  @apply border border-stone-400/30 rounded-[2px];
+  @apply border border-stone-500/30 rounded-[2px];
 
   :global {
     .cm-content {
-      @apply bg-stone-600/40;
+      @apply bg-stone-950/70;
     }
 
     .cm-scroller {

assets/js/hooks/Mapper/components/mapInterface/components/MarkdownEditor/MarkdownEditor.tsx

@@ -44,9 +44,17 @@ export interface MarkdownEditorProps {
   overlayContent?: ReactNode;
   value: string;
   onChange: (value: string) => void;
+  height?: string;
+  className?: string;
 }
 
-export const MarkdownEditor = ({ value, onChange, overlayContent }: MarkdownEditorProps) => {
+export const MarkdownEditor = ({
+  value,
+  onChange,
+  overlayContent,
+  height = '70px',
+  className,
+}: MarkdownEditorProps) => {
   const [hasShift, setHasShift] = useState(false);
 
   const refData = useRef({ onChange });
@@ -66,9 +74,9 @@ export const MarkdownEditor = ({ value, onChange, overlayContent }: MarkdownEdit
     <div className={clsx(classes.MarkdownEditor, 'relative')}>
       <CodeMirror
         value={value}
-        height="70px"
+        height={height}
         extensions={CODE_MIRROR_EXTENSIONS}
-        className={classes.CERoot}
+        className={clsx(classes.CERoot, className)}
         theme={oneDark}
         onChange={handleOnChange}
         placeholder="Start typing..."

assets/js/hooks/Mapper/components/mapInterface/components/SystemSettingsDialog/SystemSettingsDialog.tsx

@@ -8,8 +8,8 @@ import { LabelsManager } from '@/hooks/Mapper/utils/labelsManager.ts';
 import { Dialog } from 'primereact/dialog';
 import { IconField } from 'primereact/iconfield';
 import { InputText } from 'primereact/inputtext';
-import { InputTextarea } from 'primereact/inputtextarea';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { MarkdownEditor } from '@/hooks/Mapper/components/mapInterface/components/MarkdownEditor';
 
 interface SystemSettingsDialog {
   systemId: string;
@@ -214,13 +214,9 @@ export const SystemSettingsDialog = ({ systemId, visible, setVisible }: SystemSe
 
             <div className="flex flex-col gap-1">
               <label htmlFor="username">Description</label>
-              <InputTextarea
+              <div className="h-[200px]">
-                autoResize
+                <MarkdownEditor value={description} onChange={e => setDescription(e)} height="180px" />
-                rows={5}
+              </div>
-                cols={30}
-                value={description}
-                onChange={e => setDescription(e.target.value)}
-              />
             </div>
           </div>
 

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemInfo/SystemInfoContent/SystemInfoContent.tsx

@@ -2,7 +2,7 @@ import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { isWormholeSpace } from '@/hooks/Mapper/components/map/helpers/isWormholeSpace.ts';
 import { useMemo } from 'react';
 import { getSystemById, sortWHClasses } from '@/hooks/Mapper/helpers';
-import { InfoDrawer, WHClassView, WHEffectView } from '@/hooks/Mapper/components/ui-kit';
+import { InfoDrawer, MarkdownTextViewer, WHClassView, WHEffectView } from '@/hooks/Mapper/components/ui-kit';
 import { getSystemStaticInfo } from '@/hooks/Mapper/mapRootProvider/hooks/useLoadSystemStatic';
 
 interface SystemInfoContentProps {
@@ -51,7 +51,7 @@ export const SystemInfoContent = ({ systemId }: SystemInfoContentProps) => {
             </div>
           }
         >
-          <div className="break-words">{description}</div>
+          <MarkdownTextViewer>{description}</MarkdownTextViewer>
         </InfoDrawer>
       )}
     </div>

assets/js/hooks/Mapper/components/ui-kit/MarkdownTextViewer.module.scss

@@ -1,8 +1,5 @@
-.MarkdownCommentRoot {
+.MarkdownTextViewer {
-  border-left-width: 3px;
-
   @apply text-[12px] leading-[1.2] text-stone-300 break-words;
-  @apply bg-gradient-to-r from-stone-600/40 via-stone-600/10 to-stone-600/0;
 
   .h1 {
     @apply text-[12px] font-normal m-0 p-0 border-none break-words whitespace-normal;
@@ -56,6 +53,10 @@
     @apply font-bold text-green-400 break-words whitespace-normal;
   }
 
+  strong {
+    font-weight: bold;
+  }
+
   i, em {
     @apply italic text-pink-400 break-words whitespace-normal;
   }

assets/js/hooks/Mapper/components/ui-kit/MarkdownTextViewer.tsx

@@ -2,10 +2,16 @@ import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import remarkBreaks from 'remark-breaks';
 
+import classes from './MarkdownTextViewer.module.scss';
+
 const REMARK_PLUGINS = [remarkGfm, remarkBreaks];
 
 type MarkdownTextViewerProps = { children: string };
 
 export const MarkdownTextViewer = ({ children }: MarkdownTextViewerProps) => {
-  return <Markdown remarkPlugins={REMARK_PLUGINS}>{children}</Markdown>;
+  return (
+    <div className={classes.MarkdownTextViewer}>
+      <Markdown remarkPlugins={REMARK_PLUGINS}>{children}</Markdown>
+    </div>
+  );
 };