fix(fluent-editor): fix code-block highlight (#1894)

packages/fluent-editor/docs/src/components/BasicUsage.vue

@@ -38,7 +38,7 @@ onMounted(() => {
       toolbar: {
         container: TOOLBAR_CONFIG
       },
-      'emoji-toolbar': true
+      'emoji-toolbar': true,
       mention: {
         itemKey: 'cn',
         searchKey,
@@ -48,7 +48,8 @@ onMounted(() => {
           })
         }
       },
-      file: true
+      file: true,
+      syntax: true
     }
   })
 })

packages/fluent-editor/src/assets/editor.scss

@@ -72,7 +72,7 @@
     }
 
     .ql-ui {
-      position: initial;
+      position: absolute;
     }
 
     li > .ql-ui {
@@ -267,12 +267,6 @@
     }
 
     // 代码块
-    .ql-code-block-container {
-      select.ql-ui {
-        display: none;
-      }
-    }
-
     code,
     .ql-code-block-container {
       background-color: #f8f8f8;

packages/fluent-editor/src/fluent-editor.ts

@@ -16,7 +16,7 @@ import Mention from './mention/Mention' // @提醒
 import SoftBreak from './soft-break' // 软回车
 import Strike from './strike' // 删除线
 import BetterTable from './table/better-table' // 表格
-// import CustomSyntax from './syntax' // 代码块高亮
+import CustomSyntax from './syntax' // 代码块高亮
 import Toolbar from './toolbar' // 工具栏
 import Video from './video' // 视频
 
@@ -142,7 +142,7 @@ const registerModules = function () {
       'modules/link': Link,     // 报错
       // 'modules/screenshot': Screenshot,//暂未开发
       // 'modules/quickmenu': QuickMenu,//暂未开发
-      // 'modules/syntax': CustomSyntax,   // 原本就是注释的，但是对应的代码高亮功能可以使用
+      'modules/syntax': CustomSyntax,
     },
     true, //覆盖内部模块
   )

packages/fluent-editor/src/syntax/index.ts

@@ -1,14 +1,12 @@
 import Quill from 'quill';
 import * as hljs from 'highlight.js';
+import 'highlight.js/styles/atom-one-dark.css'
 
 const Syntax = Quill.imports['modules/syntax'];
 
 // @dynamic
 class CustomSyntax extends Syntax {
   static DEFAULTS: { hljs: any; interval: number; languages: { key: string; label: string }[] };
-  initListener() {
-    // fix: initListener方法写了代码块高亮下拉框的逻辑，重写该方法，屏蔽代码块高亮
-  }
 }
 
 CustomSyntax.DEFAULTS = {