diff --git a/examples/scripts/index-demo.js b/examples/scripts/index-demo.js index 111e2de0..8c0580d5 100644 --- a/examples/scripts/index-demo.js +++ b/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', // }, // } // ], diff --git a/src/sass/ch-icon.scss b/src/sass/ch-icon.scss index cd5418ce..59b37e24 100644 --- a/src/sass/ch-icon.scss +++ b/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" } \ No newline at end of file +.ch-icon-trendingUp:before { content: "\EA72" } +.ch-icon-inlineCode:before { content: "\EA73" } +.ch-icon-codeBlock:before { content: "\EA74" } \ No newline at end of file diff --git a/src/sass/components/shortcut_key_config.scss b/src/sass/components/shortcut_key_config.scss index 7b3f3b49..f84e8b22 100644 --- a/src/sass/components/shortcut_key_config.scss +++ b/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; } } diff --git a/src/sass/icons/uEA73-inlineCode.svg b/src/sass/icons/uEA73-inlineCode.svg new file mode 100644 index 00000000..9c124fc6 --- /dev/null +++ b/src/sass/icons/uEA73-inlineCode.svg @@ -0,0 +1,18 @@ + + + + + + + + + diff --git a/src/sass/icons/uEA74-codeBlock.svg b/src/sass/icons/uEA74-codeBlock.svg new file mode 100644 index 00000000..b2fe6397 --- /dev/null +++ b/src/sass/icons/uEA74-codeBlock.svg @@ -0,0 +1 @@ + diff --git a/src/toolbars/HookCenter.js b/src/toolbars/HookCenter.js index e3b3e0a3..c7d2ce96 100644 --- a/src/toolbars/HookCenter.js +++ b/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, diff --git a/src/toolbars/hooks/Code.js b/src/toolbars/hooks/Code.js index 476ba151..7fcd2ca8 100644 --- a/src/toolbars/hooks/Code.js +++ b/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, diff --git a/src/toolbars/hooks/InlineCode.js b/src/toolbars/hooks/InlineCode.js new file mode 100644 index 00000000..4127b344 --- /dev/null +++ b/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'); + } +}