ui: enhanced markdown editor

packages/ui-default/components/monaco/index.ts

@@ -3,7 +3,7 @@ import { EditorAction, registerEditorAction } from 'monaco-editor/esm/vs/editor/
 import { IQuickInputService } from 'monaco-editor/esm/vs/platform/quickinput/common/quickInput';
 import list from 'monaco-themes/themes/themelist.json';
 import i18n from 'vj/utils/i18n';
-import './monaco.css';
+import './monaco.styl';
 
 export default monaco;
 export const customOptions: monaco.editor.IStandaloneDiffEditorConstructionOptions = JSON.parse(localStorage.getItem('editor.config') || '{}');
@@ -89,4 +89,8 @@ export function registerAction(
     customOptions.fontSize = current;
     localStorage.setItem('editor.config', JSON.stringify(customOptions));
   });
+  if (model.getLanguageId() === 'markdown') {
+    const suggestWidget = (editor.getContribution('editor.contrib.suggestController') as any).widget?.value;
+    if (suggestWidget?._setDetailsVisible) suggestWidget._setDetailsVisible(true);
+  }
 }

packages/ui-default/components/monaco/languages/markdown.ts

@@ -92,8 +92,66 @@ const qqEmojies = [
   'quantou',
   'chajin',
   'aini',
-  'no',
-  'ok',
+  'NO',
+  'OK',
+  'aiqing',
+  'feiwen',
+  'tiaotiao',
+  'fadou',
+  'ouhuo',
+  'zhuanquan',
+  'ketou',
+  'huitou',
+  'tiaosheng',
+  'huishou',
+  'jidong',
+  'jiewu',
+  'xianwen',
+  'zuotaiji',
+  'youtaiji',
+  'shuangxi',
+  'bianpao',
+  'denglong',
+  'facai',
+  'Kge',
+  'gouwu',
+  'youjian',
+  'shuai',
+  'hecai',
+  'qidao',
+  'baojin',
+  'bangbangtang',
+  'henai',
+  'xiamian',
+  'xiangjiao',
+  'feiji',
+  'kaiche',
+  'zuochetou',
+  'chexiang',
+  'youchetou',
+  'duoyun',
+  'xiayu',
+  'chaopiao',
+  'xiongmao',
+  'dengpao',
+  'fengche',
+  'naozhong',
+  'dasan',
+  'caiqiu',
+  'zuanjie',
+  'shafa',
+  'zhijin',
+  'yao',
+  'shouqiang',
+  'qingwa',
+];
+const idMap = [
+  14, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 0, 50, 51, 96, 53, 54, 73, 74, 75, 76, 77, 78, 55, 56,
+  57, 58, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 97, 98, 99, 100, 101, 102, 103, 104, 105, 106, 107, 108,
+  109, 110, 111, 112, 32, 113, 114, 115, 63, 64, 59, 33, 34, 116, 36, 37, 38, 91, 92, 93, 29, 117, 72, 45,
+  42, 39, 62, 46, 47, 71, 95, 118, 119, 120, 121, 122, 123, 124, 27, 21, 23, 25, 26, 125, 126, 127, 128,
+  129, 130, 131, 132, 133, 134, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150,
+  151, 152, 153, 154, 155, 156, 157, 158, 159, 160, 161, 162, 163, 164, 165, 166, 167, 168, 169, 170,
 ];
 
 function emoji(range) {
@@ -110,8 +168,8 @@ function qqEmoji(range) {
   return qqEmojies.map((i, index) => ({
     label: `/${i}`,
     kind: monaco.languages.CompletionItemKind.Keyword,
-    documentation: `![${i}](//qq-face.vercel.app/gif/s${index}.gif)`,
-    insertText: `![${i}](//qq-face.vercel.app/gif/s${index}.gif =32x32) `,
+    documentation: { value: `![${i}](//qq-face.vercel.app/gif/s${idMap[index]}.gif)`, isTrusted: true },
+    insertText: `![${i}](//qq-face.vercel.app/gif/s${idMap[index]}.gif =32x32) `,
     range,
   }));
 }
@@ -181,9 +239,9 @@ monaco.languages.registerCompletionItemProvider('markdown', {
       `, ['data', 'users']);
       return {
         suggestions: users.map((i) => ({
-          label: `@${i.uname} (UID=${i._id})`,
+          label: { label: `@${i.uname}`, description: `UID=${i._id}` },
           kind: monaco.languages.CompletionItemKind.Property,
-          documentation: { value: `![monaco_avatar](${i.avatarUrl})`, isTrusted: true },
+          documentation: { value: `[](#loader) ![avatar](${i.avatarUrl})`, isTrusted: true },
           insertText: `@[](/user/${i._id}) `,
           range,
           sortText: i.priv === 0 ? '0' : '1',

packages/ui-default/components/monaco/monaco.css

@@ -1,4 +0,0 @@
-img[alt=monaco_avatar] {
-  width: 64px;
-  height: 64px;
-}

packages/ui-default/components/monaco/monaco.styl

@@ -0,0 +1,30 @@
+[data-mode-id="markdown"] > .monaco-editor
+  [widgetid="editor.widget.suggestWidget"]
+    width: 250px !important;
+
+  [widgetid="suggest.details"], .suggest-details.no-type
+    width: 64px !important;
+    height: 64px !important;
+    .codicon-close, .scrollbar
+      display: none;
+    .docs.markdown-docs > div
+      padding: 0 !important;
+    img
+      z-index: 100;
+      width: 64px;
+      height: 64px;
+      position: absolute;
+    a[title="#loader"]
+      text-indent: -9999em
+      z-index: 99;
+      border: rem(5px) solid rgba($primary-color, .2)
+      border-left: rem(5px) solid $primary-color
+      animation: load8 1.1s infinite linear
+      border-radius: 50%
+      width: rem(50px)
+      height: rem(50px)
+      margin-left: rem(-25px)
+      margin-top: rem(-25px)
+      left: 50%
+      top: 50%
+      position: absolute