cherry-muse 1.0.1

package/src/toolbars/hooks/Size.js

@@ -0,0 +1,100 @@
+/**
+ * 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 { getSelection } from '@/utils/selection';
+
+export default class Size extends MenuBase {
+  constructor($cherry) {
+    super($cherry);
+    this.setName('size', 'format_size');
+    this.subMenuConfig = [
+      { name: 'size-1', iconName: 'highlighter_size_1', onclick: this.bindSubClick.bind(this, '12') },
+      { name: 'size-2', iconName: 'highlighter_size_2', onclick: this.bindSubClick.bind(this, '17') },
+      { name: 'size-3', iconName: 'highlighter_size_3', onclick: this.bindSubClick.bind(this, '24') },
+      { name: 'size-4', iconName: 'highlighter_size_4', onclick: this.bindSubClick.bind(this, '32') },
+    ];
+    this.shortKeyMap = {
+      'Alt-1': '12',
+      'Alt-2': '17',
+      'Alt-3': '24',
+      'Alt-4': '32',
+    };
+  }
+
+  getSubMenuConfig() {
+    return this.subMenuConfig;
+  }
+
+  _getFlagStr(shortKey) {
+    const test = shortKey.replace(/[^0-9]+([0-9])/g, '$1');
+    let header = '#';
+    for (let i = 1; i < test; i++) {
+      header += '#';
+    }
+    return header;
+  }
+
+  $testIsSize(selection) {
+    return /^\s*(![0-9]+) [\s\S]+!/.test(selection);
+  }
+
+  $getSizeByShortKey(shortKey) {
+    if (/^[0-9]+$/.test(shortKey)) {
+      return shortKey;
+    }
+    return this.shortKeyMap[shortKey] || '17';
+  }
+
+  onClick(selection, shortKey = '17') {
+    const size = this.$getSizeByShortKey(shortKey);
+    let $selection = getSelection(this.editor.editor, selection) || '字号';
+    // 如果选中的内容里有字号语法，则直接去掉该语法
+    if (!this.isSelections && !this.$testIsSize($selection)) {
+      this.getMoreSelection('!32 ', '!', () => {
+        const newSelection = this.editor.editor.getSelection();
+        if (this.$testIsSize(newSelection)) {
+          $selection = newSelection;
+          return true;
+        }
+        return false;
+      });
+    }
+    if (this.$testIsSize($selection)) {
+      // 如果选中的内容里有字号语法，并且字号与目标一致，则去掉字号语法
+      // 反之，修改字号与目标一致
+      let needClean = true;
+      const tmp = $selection.replace(/(^)(\s*)(![0-9]+)([^\n]+)(!)(\s*)($)/gm, (w, m1, m2, m3, m4, m5, m6, m7) => {
+        needClean = needClean ? m3 === `!${size}` : false;
+        return `${m1}${m2}!${size}${m4}${m5}${m6}${m7}`;
+      });
+      if (needClean) {
+        return $selection.replace(/(^)(\s*)(![0-9]+\s*)([^\n]+)(!)(\s*)($)/gm, '$1$4$7');
+      }
+      this.registerAfterClickCb(() => {
+        this.setLessSelection(`!${size} `, '!');
+      });
+      return tmp;
+    }
+    this.registerAfterClickCb(() => {
+      this.setLessSelection(`!${size} `, '!');
+    });
+    return $selection.replace(/(^)([^\n]+)($)/gm, `$1!${size} $2!$3`);
+  }
+
+  get shortcutKeys() {
+    return ['Alt-1', 'Alt-2', 'Alt-3', 'Alt-4'];
+  }
+}

package/src/toolbars/hooks/Split.js

@@ -0,0 +1,37 @@
+/**
+ * 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';
+/**
+ * 工具栏里的分割线，用来切分不同类型按钮的区域
+ * 一个实例中可以配置多个分割线
+ */
+export default class Split extends MenuBase {
+  constructor($cherry) {
+    super($cherry);
+    this.setName('split', '|');
+  }
+
+  /**
+   * 重载创建按钮逻辑
+   * @returns {HTMLElement} 分割线标签
+   */
+  createBtn() {
+    const className = 'cherry-toolbar-button cherry-toolbar-split';
+    const i = document.createElement('i');
+    i.className = className;
+    return i;
+  }
+}

package/src/toolbars/hooks/Strikethrough.js

@@ -0,0 +1,65 @@
+/**
+ * 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 { getSelection } from '@/utils/selection';
+/**
+ * 删除线的按钮
+ */
+export default class Strikethrough extends MenuBase {
+  constructor($cherry) {
+    super($cherry);
+    this.setName('strikethrough', 'format_strikethrough');
+  }
+
+  $testIsStrike(selection) {
+    return /(~~)[\s\S]+(\1)/.test(selection);
+  }
+
+  /**
+   *
+   * @param {string} selection 被用户选中的文本内容
+   * @param {string} shortKey 快捷键参数，本函数不处理这个参数
+   * @returns {string} 回填到编辑器光标位置/选中文本区域的内容
+   */
+  onClick(selection, shortKey = '') {
+    let $selection = getSelection(this.editor.editor, selection) || this.locale.strikethrough;
+    // @ts-ignore
+    const needWhitespace = this.$cherry?.options?.engine?.syntax?.strikethrough?.needWhitespace;
+    const space = needWhitespace ? ' ' : '';
+    // 如果被选中的文本中包含删除线语法，则去掉删除线语法
+    if (!this.isSelections && !this.$testIsStrike($selection)) {
+      this.getMoreSelection(`${space}~~`, `~~${space}`, () => {
+        const newSelection = this.editor.editor.getSelection();
+        const isStrike = this.$testIsStrike(newSelection);
+        if (isStrike) {
+          $selection = newSelection;
+        }
+        return isStrike;
+      });
+    }
+    if (this.$testIsStrike($selection)) {
+      return selection.replace(/[\s]*(~~)([\s\S]+)(\1)[\s]*/g, '$2');
+    }
+    this.registerAfterClickCb(() => {
+      this.setLessSelection(`${space}~~`, `~~${space}`);
+    });
+    return $selection.replace(/(^)[\s]*([\s\S]+?)[\s]*($)/g, `$1${space}~~$2~~${space}$3`);
+  }
+
+  get shortcutKeys() {
+    return ['Ctrl-d'];
+  }
+}

package/src/toolbars/hooks/Sub.js

@@ -0,0 +1,58 @@
+/**
+ * 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 { getSelection } from '@/utils/selection';
+/**
+ * 下标的按钮
+ **/
+export default class Sub extends MenuBase {
+  constructor($cherry) {
+    super($cherry);
+    this.setName('sub', 'subscript');
+  }
+
+  $testIsSub(selection) {
+    return /^\s*(\^\^)[\s\S]+(\1)/.test(selection);
+  }
+
+  /**
+   *
+   * @param {string} selection 被用户选中的文本内容
+   * @param {string} shortKey 快捷键参数，本函数不处理这个参数
+   * @returns {string} 回填到编辑器光标位置/选中文本区域的内容
+   */
+  onClick(selection, shortKey = '') {
+    let $selection = getSelection(this.editor.editor, selection) || this.locale.sub;
+    // 如果选中的内容里有下标的语法，则认为是要去掉下标语法
+    if (!this.isSelections && !this.$testIsSub($selection)) {
+      this.getMoreSelection('^^', '^^', () => {
+        const newSelection = this.editor.editor.getSelection();
+        const isSub = this.$testIsSub(newSelection);
+        if (isSub) {
+          $selection = newSelection;
+        }
+        return isSub;
+      });
+    }
+    if (this.$testIsSub($selection)) {
+      return $selection.replace(/(^)(\s*)(\^\^)([^\n]+)(\3)(\s*)($)/gm, '$1$4$7');
+    }
+    this.registerAfterClickCb(() => {
+      this.setLessSelection('^^', '^^');
+    });
+    return $selection.replace(/(^)([^\n]+)($)/gm, '$1^^$2^^$3');
+  }
+}

package/src/toolbars/hooks/Sup.js

@@ -0,0 +1,58 @@
+/**
+ * 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 { getSelection } from '@/utils/selection';
+/**
+ * 上标的按钮
+ **/
+export default class Sup extends MenuBase {
+  constructor($cherry) {
+    super($cherry);
+    this.setName('sup', 'superscript');
+  }
+
+  $testIsSup(selection) {
+    return /^\s*(\^)[\s\S]+(\1)/.test(selection);
+  }
+
+  /**
+   *
+   * @param {string} selection 被用户选中的文本内容
+   * @param {string} shortKey 快捷键参数，本函数不处理这个参数
+   * @returns {string} 回填到编辑器光标位置/选中文本区域的内容
+   */
+  onClick(selection, shortKey = '') {
+    let $selection = getSelection(this.editor.editor, selection) || this.locale.sup;
+    // 如果选中的内容里有上标的语法，则认为是要去掉上标语法
+    if (!this.isSelections && !this.$testIsSup($selection)) {
+      this.getMoreSelection('^', '^', () => {
+        const newSelection = this.editor.editor.getSelection();
+        const isSup = this.$testIsSup(newSelection);
+        if (isSup) {
+          $selection = newSelection;
+        }
+        return isSup;
+      });
+    }
+    if (this.$testIsSup($selection)) {
+      return selection.replace(/(^)(\s*)(\^)([^\n]+)(\3)(\s*)($)/gm, '$1$4$7');
+    }
+    this.registerAfterClickCb(() => {
+      this.setLessSelection('^', '^');
+    });
+    return $selection.replace(/(^)([^\n]+)($)/gm, '$1^$2^$3');
+  }
+}

package/src/toolbars/hooks/SwitchModel.js

@@ -0,0 +1,78 @@
+/**
+ * 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 Event from '@/Event';
+/**
+ * 切换预览/编辑模式的按钮
+ * 该按钮不支持切换到双栏编辑模式
+ * 只能切换成纯编辑模式和纯预览模式
+ **/
+export default class SwitchModel extends MenuBase {
+  constructor($cherry) {
+    super($cherry);
+    this.setName('switchPreview', 'preview');
+    this.instanceId = $cherry.instanceId;
+    this.attachEventListeners();
+    this.model = $cherry.model;
+    this.prevModel = this.model;
+  }
+
+  get isHidden() {
+    return this.$previewerHidden;
+  }
+
+  set isHidden(state) {
+    // 节流
+    if (state === this.$previewerHidden) {
+      return;
+    }
+    const icon = this.dom.querySelector('i');
+    // 隐藏预览，按钮状态为打开预览
+    if (state) {
+      icon.innerText = 'preview';
+      icon.title = this.locale.switchPreview;
+    } else {
+      icon.innerText = 'preview_off';
+      icon.title = this.locale.switchEdit;
+    }
+
+    this.$previewerHidden = state;
+  }
+
+  attachEventListeners() {
+    Event.on(this.instanceId, Event.Events.modelChange, ([model]) => {
+      this.prevModel = this.model;
+      this.model = model;
+    });
+  }
+
+  onClick() {
+    // const toolbar = this.dom.parentElement.parentElement;
+    if (this.model !== 'previewOnly') {
+      this.$cherry.switchModel('previewOnly', true);
+      // toolbar.classList.add('preview-only');
+      this.isHidden = false;
+    } else {
+      // toolbar.classList.remove('preview-only');
+      if (this.prevModel === 'edit&preview') {
+        this.$cherry.switchModel('edit&preview', true);
+      } else if (this.prevModel === 'editOnly') {
+        this.$cherry.switchModel('editOnly', true);
+      }
+      this.isHidden = true;
+    }
+  }
+}

package/src/toolbars/hooks/Table.js

@@ -0,0 +1,56 @@
+/**
+ * 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 BubbleTableMenu from '@/toolbars/BubbleTable';
+/**
+ * 插入普通表格
+ */
+export default class Table extends MenuBase {
+  constructor($cherry) {
+    super($cherry);
+    this.setName('table', 'table');
+
+    this.subBubbleTableMenu = new BubbleTableMenu({ row: 9, col: 9 });
+    $cherry.editor.options.wrapperDom.appendChild(this.subBubbleTableMenu.dom);
+    this.catchOnce = '';
+  }
+
+  /**
+   * 响应点击事件
+   * @param {string} selection 被用户选中的文本内容
+   * @returns {*} 回填到编辑器光标位置/选中文本区域的内容
+   */
+  onClick(selection, shortKey = '') {
+    // 如果二维面板处于隐藏状态，说明是第一次点击
+    if (this.subBubbleTableMenu.dom.style.display === 'none' || !this.hasCacheOnce()) {
+      // 插入表格，会出现一个二维面板，用户可以通过点击决定插入表格的行号和列号
+      const pos = this.dom.getBoundingClientRect();
+      this.subBubbleTableMenu.dom.style.left = `${pos.left + pos.width}px`;
+      this.subBubbleTableMenu.dom.style.top = `${pos.top + pos.height}px`;
+      this.subBubbleTableMenu.show((row, col) => {
+        const headerText = ' Header |'.repeat(col);
+        const controlText = ' ------ |'.repeat(col);
+        const rowText = `\n|${' Sample |'.repeat(col)}`;
+        const final = `${selection}\n\n|${headerText}\n|${controlText}${rowText.repeat(row)}\n\n`;
+        this.setCacheOnce(final);
+        this.fire(null);
+      });
+      this.updateMarkdown = false;
+      return false;
+    }
+    return this.getAndCleanCacheOnce();
+  }
+}

package/src/toolbars/hooks/Toc.js

@@ -0,0 +1,35 @@
+/**
+ * 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';
+/**
+ * 插入目录
+ */
+export default class Toc extends MenuBase {
+  constructor($cherry) {
+    super($cherry);
+    this.setName('toc', 'toc');
+  }
+
+  /**
+   * 响应点击事件
+   * @param {string} selection 被用户选中的文本内容
+   * @returns {string} 回填到编辑器光标位置/选中文本区域的内容
+   */
+  onClick(selection, shortKey = '') {
+    // 插入目录
+    return `${selection}\n\n[[toc]]\n`;
+  }
+}

package/src/toolbars/hooks/TogglePreview.js

@@ -0,0 +1,79 @@
+/**
+ * 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 Event from '@/Event';
+/**
+ * 关闭/展示预览区域的按钮
+ */
+export default class TogglePreview extends MenuBase {
+  /** @type {boolean} 当前预览状态 */
+  $previewerHidden = false;
+
+  constructor($cherry) {
+    super($cherry);
+    this.setName('previewClose', 'splitscreen_right');
+    this.instanceId = $cherry.instanceId;
+    this.updateMarkdown = false;
+    this.attachEventListeners();
+  }
+
+  /**
+   * 绑定预览事件
+   */
+  attachEventListeners() {
+    Event.on(this.instanceId, Event.Events.previewerClose, () => {
+      this.isHidden = true;
+    });
+    Event.on(this.instanceId, Event.Events.previewerOpen, () => {
+      this.isHidden = false;
+    });
+  }
+
+  get isHidden() {
+    return this.$previewerHidden;
+  }
+
+  set isHidden(state) {
+    // 节流
+    if (state === this.$previewerHidden) {
+      return;
+    }
+    const icon = this.dom.querySelector('i');
+    // 隐藏预览，按钮状态为打开预览
+    if (state) {
+      icon.innerText = 'splitscreen_right';
+      icon.title = this.locale.togglePreview;
+    } else {
+      icon.innerText = 'web_asset';
+      icon.title = this.locale.previewClose;
+    }
+
+    this.$previewerHidden = state;
+  }
+
+  /**
+   * 响应点击事件
+   */
+  onClick() {
+    if (this.editor.previewer.isPreviewerHidden()) {
+      this.$cherry.switchModel('edit&preview');
+      this.isHidden = false;
+    } else {
+      this.$cherry.switchModel('editOnly');
+      this.isHidden = true;
+    }
+  }
+}

package/src/toolbars/hooks/Ul.js

@@ -0,0 +1,41 @@
+/**
+ * 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 { getSelection } from '@/utils/selection';
+import { getListFromStr } from '@/utils/regexp';
+
+/**
+ * 下标的按钮
+ **/
+export default class Ul extends MenuBase {
+  constructor($cherry) {
+    super($cherry);
+    this.setName('ul', 'list');
+  }
+
+  /**
+   *
+   * @param {string} selection 被用户选中的文本内容
+   * @param {string} shortKey 快捷键参数，本函数不处理这个参数
+   * @returns {string} 回填到编辑器光标位置/选中文本区域的内容
+   */
+  onClick(selection, shortKey = '') {
+    const $selection = getSelection(this.editor.editor, selection, 'line', true) || 'Item 1\n    Item 1.1\nItem 2';
+    const [before] = $selection.match(/^\n*/);
+    const [after] = $selection.match(/\n*$/);
+    return `${before}${getListFromStr($selection, 'ul')}${after}`;
+  }
+}

package/src/toolbars/hooks/Underline.js

@@ -0,0 +1,65 @@
+/**
+ * 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';
+/**
+ * 下划线按钮
+ **/
+export default class Underline extends MenuBase {
+  constructor($cherry) {
+    super($cherry);
+    this.setName('underline', 'format_underlined');
+  }
+
+  $testIsUnderline(selection) {
+    return /^\s*(\/)[\s\S]+(\1)/.test(selection);
+  }
+
+  /**
+   *
+   * @param {string} selection 被用户选中的文本内容
+   * @param {string} shortKey 快捷键参数，本函数不处理这个参数
+   * @returns {string} 回填到编辑器光标位置/选中文本区域的内容
+   */
+  onClick(selection, shortKey = '') {
+    let $selection = selection ? selection : this.locale.underline;
+    // 如果选中的内容里有下划线语法，则认为是要去掉下划线语法
+    if (!this.isSelections && !this.$testIsUnderline($selection)) {
+      this.getMoreSelection(' /', '/ ', () => {
+        const newSelection = this.editor.editor.getSelection();
+        const isUnderline = this.$testIsUnderline(newSelection);
+        if (isUnderline) {
+          $selection = newSelection;
+        }
+        return isUnderline;
+      });
+    }
+    if (this.$testIsUnderline($selection)) {
+      return $selection.replace(/(^)(\s*)(\/)([^\n]+)(\3)(\s*)($)/gm, '$1$4$7');
+    }
+    this.registerAfterClickCb(() => {
+      this.setLessSelection(' /', '/ ');
+    });
+    // 如果选中的内容里没有下划线语法，则加上下划线
+    return $selection.replace(/(^)([^\n]+)($)/gm, '$1 /$2/ $3');
+  }
+
+  /**
+   * 声明绑定的快捷键，快捷键触发onClick
+   */
+  get shortcutKeys() {
+    return ['Ctrl-u'];
+  }
+}