feat: 增加有序列表、无序列表按钮

Tencent · Nov 12, 2022 · f52ff42 · f52ff42
1 parent 187ffe2
commit f52ff42
Show file tree

Hide file tree

Showing 7 changed files with 141 additions and 55 deletions.
diff --git a/examples/scripts/index-demo.js b/examples/scripts/index-demo.js
@@ -151,7 +151,10 @@ var basicConfig = {
       'color',
       'header',
       '|',
-      'list',
+      'ol',
+      'ul',
+      'checklist',
+      '|',
       'formula',
       {
         insert: ['image', 'audio', 'video', 'link', 'hr', 'br', 'code', 'formula', 'toc', 'table', 'pdf', 'word', 'ruby'],

diff --git a/src/toolbars/HookCenter.js b/src/toolbars/HookCenter.js
@@ -26,9 +26,11 @@ import Color from './hooks/Color';
 import Header from './hooks/Header';
 import Insert from './hooks/Insert';
 import List from './hooks/List';
+import Ol from './hooks/Ol';
+import Ul from './hooks/Ul';
+import CheckList from './hooks/CheckList';
 import Graph from './hooks/Graph';
 import Size from './hooks/Size';
-import CheckList from './hooks/CheckList';
 import H1 from './hooks/H1';
 import H2 from './hooks/H2';
 import H3 from './hooks/H3';
@@ -76,9 +78,11 @@ const HookList = {
   header: Header,
   insert: Insert,
   list: List,
+  ol: Ol,
+  ul: Ul,
+  checklist: CheckList,
   graph: Graph,
   size: Size,
-  checklist: CheckList,
   h1: H1,
   h2: H2,
   h3: H3,

diff --git a/src/toolbars/hooks/CheckList.js b/src/toolbars/hooks/CheckList.js
@@ -14,32 +14,28 @@
  * limitations under the License.
  */
 import MenuBase from '@/toolbars/MenuBase';
+import { getSelection } from '@/utils/selection';
+import { getListFromStr } from '@/utils/regexp';
+
 /**
- * 插入检查项的按钮
- */
-export default class CheckList extends MenuBase {
+ * 下标的按钮
+ **/
+export default class Checklist extends MenuBase {
   constructor($cherry) {
     super($cherry);
     this.setName('checklist', 'checklist');
   }
 
-  $dealSelection(selection) {
-    let $selection = selection ? selection : 'No.1\n    No.1.1\nNo.2';
-    $selection = $selection.replace(/^\n+/, '').replace(/\n+$/, '');
-    $selection = $selection.replace(/^(\s*)(\S[\s\S]*?)$/gm, '$1- [ ]  $2');
-    return $selection;
-  }
-
   /**
-   * 响应点击事件
+   *
    * @param {string} selection 被用户选中的文本内容
    * @param {string} shortKey 快捷键参数，本函数不处理这个参数
    * @returns {string} 回填到编辑器光标位置/选中文本区域的内容
    */
   onClick(selection, shortKey = '') {
-    const [before] = selection.match(/^\n*/);
-    const [after] = selection.match(/\n*$/);
-    const $selection = `${before}${this.$dealSelection(selection)}${after}`;
-    return $selection;
+    const $selection = getSelection(this.editor.editor, selection, 'line', true) || 'No.1\n    No.1.1\nNo.2';
+    const [before] = $selection.match(/^\n*/);
+    const [after] = $selection.match(/\n*$/);
+    return `${before}${getListFromStr($selection, 'checklist')}${after}`;
   }
 }
diff --git a/src/toolbars/hooks/List.js b/src/toolbars/hooks/List.js
@@ -15,6 +15,7 @@
  */
 import MenuBase from '@/toolbars/MenuBase';
 import { getSelection } from '@/utils/selection';
+import { getListFromStr } from '@/utils/regexp';
 /**
  * 插入有序/无序/checklist列表的按钮
  */
@@ -33,42 +34,6 @@ export default class List extends MenuBase {
     return this.subMenuConfig;
   }
 
-  /**
-   * 处理编辑区域有选中文字时的操作
-   * @param {string} selection 编辑区选中的文本内容
-   * @param {string} type 操作类型：ol 有序列表，ul 无序列表，checklist 检查项
-   * @returns {string} 对应的markdown源码
-   */
-  $dealSelection(selection, type) {
-    let $selection = selection ? selection : 'No.1\n    No.1.1\nNo.2';
-    $selection = $selection.replace(/^\n+/, '').replace(/\n+$/, '');
-    let pre = '1.';
-    switch (type) {
-      case 'ol':
-        pre = '1.';
-        break;
-      case 'ul':
-        pre = '-';
-        break;
-      case 'checklist':
-        pre = '- [x]';
-        break;
-    }
-    $selection = $selection.replace(/^(\s*)([0-9a-zA-Z]+\.|- \[x\]|- \[ \]|-) /gm, '$1');
-    // 对有序列表进行序号自增处理
-    if (pre === '1.') {
-      const listNum = {};
-      $selection = $selection.replace(/^(\s*)(\S[\s\S]*?)$/gm, (match, p1, p2) => {
-        const space = p1.match(/[ \t]/g)?.length || 0;
-        listNum[space] = listNum[space] ? listNum[space] + 1 : 1;
-        return `${p1}${listNum[space]}. ${p2}`;
-      });
-    } else {
-      $selection = $selection.replace(/^(\s*)(\S[\s\S]*?)$/gm, `$1${pre} $2`);
-    }
-    return $selection;
-  }
-
   /**
    * 响应点击事件
    * @param {string} selection 编辑区选中的文本内容
@@ -81,7 +46,7 @@ export default class List extends MenuBase {
     const [before] = $selection.match(/^\n*/);
     const [after] = $selection.match(/\n*$/);
     if (listType[shortKey] !== null) {
-      return `${before}${this.$dealSelection($selection, listType[shortKey])}${after}`;
+      return `${before}${getListFromStr($selection, listType[shortKey])}${after}`;
     }
     return $selection;
   }

diff --git a/src/toolbars/hooks/Ol.js b/src/toolbars/hooks/Ol.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 Ol extends MenuBase {
+  constructor($cherry) {
+    super($cherry);
+    this.setName('ol', 'ol');
+  }
+
+  /**
+   *
+   * @param {string} selection 被用户选中的文本内容
+   * @param {string} shortKey 快捷键参数，本函数不处理这个参数
+   * @returns {string} 回填到编辑器光标位置/选中文本区域的内容
+   */
+  onClick(selection, shortKey = '') {
+    const $selection = getSelection(this.editor.editor, selection, 'line', true) || 'No.1\n    No.1.1\nNo.2';
+    const [before] = $selection.match(/^\n*/);
+    const [after] = $selection.match(/\n*$/);
+    return `${before}${getListFromStr($selection, 'ol')}${after}`;
+  }
+}
diff --git a/src/toolbars/hooks/Ul.js b/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', 'ul');
+  }
+
+  /**
+   *
+   * @param {string} selection 被用户选中的文本内容
+   * @param {string} shortKey 快捷键参数，本函数不处理这个参数
+   * @returns {string} 回填到编辑器光标位置/选中文本区域的内容
+   */
+  onClick(selection, shortKey = '') {
+    const $selection = getSelection(this.editor.editor, selection, 'line', true) || 'No.1\n    No.1.1\nNo.2';
+    const [before] = $selection.match(/^\n*/);
+    const [after] = $selection.match(/\n*$/);
+    return `${before}${getListFromStr($selection, 'ul')}${after}`;
+  }
+}
diff --git a/src/utils/regexp.js b/src/utils/regexp.js
@@ -167,3 +167,39 @@ export function getCodeBlockRule() {
   codeBlock.reg = new RegExp(codeBlock.begin.source + codeBlock.content.source + codeBlock.end.source, 'g');
   return codeBlock;
 }
+
+/**
+ * 从selection里获取列表语法
+ * @param {*} selection
+ * @param {('ol'|'ul'|'checklist')} type  列表类型
+ * @returns {String}
+ */
+export function getListFromStr(selection, type) {
+  let $selection = selection ? selection : 'No.1\n    No.1.1\nNo.2';
+  $selection = $selection.replace(/^\n+/, '').replace(/\n+$/, '');
+  let pre = '1.';
+  switch (type) {
+    case 'ol':
+      pre = '1.';
+      break;
+    case 'ul':
+      pre = '-';
+      break;
+    case 'checklist':
+      pre = '- [x]';
+      break;
+  }
+  $selection = $selection.replace(/^(\s*)([0-9a-zA-Z]+\.|- \[x\]|- \[ \]|-) /gm, '$1');
+  // 对有序列表进行序号自增处理
+  if (pre === '1.') {
+    const listNum = {};
+    $selection = $selection.replace(/^(\s*)(\S[\s\S]*?)$/gm, (match, p1, p2) => {
+      const space = p1.match(/[ \t]/g)?.length || 0;
+      listNum[space] = listNum[space] ? listNum[space] + 1 : 1;
+      return `${p1}${listNum[space]}. ${p2}`;
+    });
+  } else {
+    $selection = $selection.replace(/^(\s*)(\S[\s\S]*?)$/gm, `$1${pre} $2`);
+  }
+  return $selection;
+}