feat: #847 插入菜单添加“内联代码”按钮 (#849)

feat: #847 插入菜单添加“内联代码”按钮

feat: #847 插入菜单添加“内联代码”按钮

Co-authored-by: Saraph1nes <xiayx.leo@qq.com>

examples/scripts/index-demo.js

@@ -179,7 +179,7 @@ var basicConfig = {
       '|',
       'formula',
       {
-        insert: ['image', 'audio', 'video', 'link', 'hr', 'br', 'code', 'formula', 'toc', 'table', 'pdf', 'word'],
+        insert: ['image', 'audio', 'video', 'link', 'hr', 'br', 'code', 'inlineCode', 'formula', 'toc', 'table', 'pdf', 'word'],
       },
       'graph',
       'customMenuTable',
@@ -216,7 +216,7 @@ var basicConfig = {
     //       serviceUrl: 'http://localhost:3001',
     //       injectPayload: {
     //         thumb_media_id: 'ft7IwCi1eukC6lRHzmkYuzeMmVXWbU3JoipysW2EZamblyucA67wdgbYTix4X377',
-    //         author: 'Cherry Markdown', 
+    //         author: 'Cherry Markdown',
     //       },
     //     }
     //   ],

src/sass/ch-icon.scss

@@ -108,4 +108,6 @@
 .ch-icon-justifyRight:before { content: "\EA6F" }
 .ch-icon-chevronsLeft:before { content: "\EA70" }
 .ch-icon-chevronsRight:before { content: "\EA71" }
-.ch-icon-trendingUp:before { content: "\EA72" }
+.ch-icon-trendingUp:before { content: "\EA72" }
+.ch-icon-inlineCode:before { content: "\EA73" }
+.ch-icon-codeBlock:before { content: "\EA74" }

src/sass/components/shortcut_key_config.scss

@@ -32,6 +32,9 @@
         .shortcut-key-config-panel-kbd {
           display: flex;
           gap: 10px;
+          min-width: 120px;
+          justify-content: right;
+
           .keyboard-key {
             border-radius: 3px;
             border-style: solid;
@@ -43,7 +46,7 @@
             vertical-align: middle;
             line-height: 20px;
             margin: 4px;
-            width: 10px;
+            min-width: 16px;
             text-align: center;
           }
         }

src/toolbars/HookCenter.js

@@ -41,6 +41,7 @@ import FullScreen from './hooks/FullScreen';
 import Undo from './hooks/Undo';
 import Redo from './hooks/Redo';
 import Code from './hooks/Code';
+import InlineCode from './hooks/InlineCode';
 import CodeTheme from './hooks/CodeTheme';
 import Export from './hooks/Export';
 import Settings from './hooks/Settings';
@@ -99,6 +100,7 @@ const HookList = {
   quickTable: QuickTable,
   togglePreview: TogglePreview,
   code: Code,
+  inlineCode: InlineCode,
   codeTheme: CodeTheme,
   export: Export,
   settings: Settings,

src/toolbars/hooks/Code.js

@@ -24,7 +24,7 @@ export default class Code extends MenuBase {
    */
   constructor($cherry) {
     super($cherry);
-    this.setName('code', 'code');
+    this.setName('code', 'codeBlock');
     this.shortcutKeyMap = {
       [`${CONTROL_KEY}-${getKeyCode('k')}`]: {
         hookName: this.name,

src/toolbars/hooks/InlineCode.js

@@ -0,0 +1,53 @@
+/**
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import MenuBase from '@/toolbars/MenuBase';
+import { CONTROL_KEY } from '@/utils/shortcutKey';
+/**
+ * 插入行内代码的按钮
+ */
+export default class InlineCode extends MenuBase {
+  constructor($cherry) {
+    super($cherry);
+    this.setName('inlineCode', 'inlineCode');
+    this.shortcutKeyMap = {
+      [`${CONTROL_KEY}-Backquote`]: {
+        hookName: this.name,
+        aliasName: this.$cherry.locale[this.name],
+      },
+    };
+  }
+
+  /**
+   * 响应点击事件
+   * @param {string} selection 被用户选中的文本内容
+   * @param {string} shortKey 快捷键参数，本函数不处理这个参数
+   * @returns {string} 回填到编辑器光标位置/选中文本区域的内容
+   */
+  onClick(selection, shortKey = '') {
+    if (!selection) {
+      this.registerAfterClickCb(() => this.setLessSelection('`', '`'));
+      return '``';
+    }
+
+    if (!selection.includes('\n')) {
+      this.registerAfterClickCb(() => this.setLessSelection('`', '`'));
+      return `\`${selection}\``;
+    }
+
+    const arr = selection.split('\n').map((item) => `\`${item}\``);
+    return arr.join('\n');
+  }
+}