feat: 修改信息面板和手风琴语法

examples/markdown/basic.md

@@ -292,17 +292,13 @@
 **说明**
 使用连续三个冒号`:::`和关键字（`[primary | info | warning | danger | success]`）来声明
 ```
-:::primary // [primary | info | warning | danger | success]
-标题
-:
+:::primary // [primary | info | warning | danger | success] 标题
 内容
 :::
 ```
 
 **效果**
-:::p
-标题
-:
+:::p 标题
 内容
 :::
 :::success
@@ -317,33 +313,21 @@
 **说明**
 使用连续三个加号`+++`和关键字（`[ + | - ]`）来声明，关键字`+`表示默认收起，关键字`-`表示默认展开
 ```
-++++
-点击展开更多
-:
++++ 点击展开更多
 内容
-+-
-默认展开
-:
+++- 默认展开
 内容
-++
-默认收起
-:
+++ 默认收起
 内容
 +++
 ```
 
 **效果**
-++++
-点击展开更多
-:
++++ 点击展开更多
 内容
-+-
-默认展开
-:
+++- 默认展开
 内容
-++
-默认收起
-:
+++ 默认收起
 内容
 +++
 

src/core/hooks/Detail.js

@@ -19,18 +19,12 @@ import { getDetailRule } from '@/utils/regexp';
 import { blockNames } from '@/utils/sanitize';
 
 /**
- * +++(+|-)
- * 点击查看详情
- * :
+ * +++(-) 点击查看详情
  * body
  * body
- * +-
- * 标题（默认收起内容）
- * :
+ * ++ 标题（默认收起内容）
  * 内容
- * ++
- * 标题（默认展开内容）
- * :
+ * ++- 标题（默认展开内容）
  * 内容2
  * +++
  */
@@ -42,10 +36,10 @@ export default class Detail extends ParagraphBase {
   }
 
   makeHtml(str, sentenceMakeFunc) {
-    return str.replace(this.RULE.reg, (match, preLines, isShow, content) => {
+    return str.replace(this.RULE.reg, (match, preLines, isOpen, title, content) => {
       const lineCount = this.getLineCount(match, preLines);
       const sign = this.$engine.md5(match);
-      const { type, html } = this.$getDetailInfo(isShow, content, sentenceMakeFunc);
+      const { type, html } = this.$getDetailInfo(isOpen, title, content, sentenceMakeFunc);
       const ret = this.pushCache(
         `<div class="cherry-detail cherry-detail__${type}" data-sign="${sign}" data-lines="${lineCount}" >${html}</div>`,
         sign,
@@ -55,27 +49,29 @@ export default class Detail extends ParagraphBase {
     });
   }
 
-  $getDetailInfo(isShow, str, sentenceMakeFunc) {
-    const type = /\n\s*(\+\+|\+-)\s*\n/.test(str) ? 'multiple' : 'single';
-    const arr = str.split(/\n\s*(\+\+|\+-)\s*\n/);
-    let defaultShow = isShow !== '+';
+  $getDetailInfo(isOpen, title, str, sentenceMakeFunc) {
+    const type = /\n\s*(\+\+|\+\+-)\s*[^\n]+\n/.test(str) ? 'multiple' : 'single';
+    const arr = str.split(/\n\s*(\+\+[-]{0,1}\s*[^\n]+)\n/);
+    let defaultOpen = isOpen === '-';
+    let currentTitle = title;
     let html = '';
     if (type === 'multiple') {
       arr.forEach((item) => {
-        if (/(\+\+|\+-)/.test(item)) {
-          defaultShow = item !== '++';
+        if (/\+\+/.test(item)) {
+          defaultOpen = /\+\+-/.test(item);
+          currentTitle = item.replace(/\+\+[-]{0,1}\s*([^\n]+)$/, '$1');
           return true;
         }
-        html += this.$getDetailHtml(defaultShow, item, sentenceMakeFunc);
+        html += this.$getDetailHtml(defaultOpen, currentTitle, item, sentenceMakeFunc);
       });
     } else {
-      html = this.$getDetailHtml(defaultShow, str, sentenceMakeFunc);
+      html = this.$getDetailHtml(defaultOpen, currentTitle, str, sentenceMakeFunc);
     }
     return { type, html };
   }
 
-  $getDetailHtml(defaultShow, str, sentenceMakeFunc) {
-    let ret = `<details ${defaultShow ? 'open' : ''}>`;
+  $getDetailHtml(defaultOpen, title, str, sentenceMakeFunc) {
+    let ret = `<details ${defaultOpen ? 'open' : ''}>`;
     const paragraphProcessor = (str) => {
       if (str.trim() === '') {
         return '';
@@ -90,16 +86,14 @@ export default class Detail extends ParagraphBase {
       }
       return `<${domName}>${this.$cleanParagraph(html)}</${domName}>`;
     };
-    str.replace(/(^[\w\W]+?)\n\s*:\s*\n([\w\W]+$)/, (match, title, body) => {
-      ret += `<summary>${sentenceMakeFunc(title).html}</summary>`;
-      let $body = '';
-      if (this.isContainsCache(body)) {
-        $body = this.makeExcludingCached(body, paragraphProcessor);
-      } else {
-        $body = paragraphProcessor(body);
-      }
-      ret += `<div class="cherry-detail-body">${$body}</div>`;
-    });
+    ret += `<summary>${sentenceMakeFunc(title).html}</summary>`;
+    let $body = '';
+    if (this.isContainsCache(str)) {
+      $body = this.makeExcludingCached(str, paragraphProcessor);
+    } else {
+      $body = paragraphProcessor(str);
+    }
+    ret += `<div class="cherry-detail-body">${$body}</div>`;
     ret += `</details>`;
     return ret;
   }

src/core/hooks/Panel.js

@@ -53,11 +53,7 @@ export default class Panel extends ParagraphBase {
   }
 
   $getPanelInfo(name, str, sentenceMakeFunc) {
-    const ret = { type: this.$getTargetType(name), title: '', body: str };
-    str.replace(/^([^\n]+)\n\s*:\s*\n([\w\W]+)$/, (match, title, body) => {
-      ret.title = sentenceMakeFunc(title).html;
-      ret.body = body;
-    });
+    const ret = { type: this.$getTargetType(name), title: sentenceMakeFunc(this.$getTitle(name)).html, body: str };
     ret.title = `<div class="cherry-panel--title ${ret.title ? 'cherry-panel--title__not-empty' : ''}">${
       ret.title
     }</div>`;
@@ -85,8 +81,14 @@ export default class Panel extends ParagraphBase {
     return ret;
   }
 
+  $getTitle(name) {
+    const $name = name.trim();
+    return /\s/.test($name) ? $name.replace(/[^\s]+\s/, '') : '';
+  }
+
   $getTargetType(name) {
-    switch (name.toLowerCase()) {
+    const $name = /\s/.test(name.trim()) ? name.trim().replace(/\s.*$/, '') : name;
+    switch ($name.trim().toLowerCase()) {
       case 'primary':
       case 'p':
         return 'primary';

src/toolbars/hooks/Detail.js

@@ -34,11 +34,11 @@ export default class Detail extends MenuBase {
   onClick(selection) {
     let $selection =
       getSelection(this.editor.editor, selection, 'line', true) ||
-      '点击展开更多\n:\n内容\n+-\n默认展开\n:\n内容\n++\n默认收起\n:\n内容';
+      '点击展开更多\n内容\n++- 默认展开\n内容\n++ 默认收起\n内容';
     this.detailRule.lastIndex = 0;
     if (!this.detailRule.test($selection)) {
       // 如果没有命中手风琴语法，则尝试扩大选区
-      this.getMoreSelection('\n', '\n', () => {
+      this.getMoreSelection('+++ ', '\n', () => {
         const newSelection = this.editor.editor.getSelection();
         this.detailRule.lastIndex = 0;
         const isMatch = this.detailRule.test(newSelection);
@@ -52,13 +52,19 @@ export default class Detail extends MenuBase {
     if (this.detailRule.test($selection)) {
       // 如果命中了手风琴语法，则去掉手风琴语法
       this.detailRule.lastIndex = 0;
-      return $selection.replace(this.detailRule, (match, preLines, isShow, content) => {
-        return content;
+      return $selection.replace(this.detailRule, (match, preLines, isOpen, title, content) => {
+        return `${title}\n${content}`;
       });
     }
+    // 去掉开头的空格
+    $selection = $selection.replace(/^\s+/, '');
+    // 如果选中的内容不包含换行，则强制增加一个换行
+    if (!/\n/.test($selection)) {
+      $selection = `${$selection}\n${$selection}`;
+    }
     this.registerAfterClickCb(() => {
-      this.setLessSelection('\n', '\n');
+      this.setLessSelection('+++ ', '\n');
     });
-    return `++++\n${$selection}\n+++`.replace(/\n{2,}\+\+\+/g, '\n+++');
+    return `+++ ${$selection}\n+++`.replace(/\n{2,}\+\+\+/g, '\n+++');
   }
 }

src/toolbars/hooks/Panel.js

@@ -62,29 +62,41 @@ export default class Panel extends MenuBase {
     let ret = false;
     this.panelRule.lastIndex = 0;
     str.replace(this.panelRule, (match, preLines, name, content) => {
-      ret = name ? name : '';
+      const $name = /\s/.test(name.trim()) ? name.trim().replace(/\s.*$/, '') : name;
+      ret = $name ? $name.trim().toLowerCase() : '';
       return match;
     });
     return ret;
   }
 
+  $getTitle(str) {
+    this.panelRule.lastIndex = 0;
+    str.replace(this.panelRule, (match, preLines, name, content) => {
+      const $name = name.trim();
+      return /\s/.test($name) ? $name.replace(/[^\s]+\s/, '') : '';
+    });
+    return '';
+  }
+
   /**
    * 响应点击事件
    * @param {string} selection 被用户选中的文本内容
    * @param {string} shortKey 快捷键参数
    * @returns {string} 回填到编辑器光标位置/选中文本区域的内容
    */
   onClick(selection, shortKey = '') {
-    let $selection = getSelection(this.editor.editor, selection, 'line', true) || '标题\n:\n内容';
+    let $selection = getSelection(this.editor.editor, selection, 'line', true) || '内容';
     let currentName = this.$getNameFromStr($selection);
+    let title = this.$getTitle($selection);
     if (currentName === false) {
       // 如果没有命中面板语法，则尝试扩大选区
-      this.getMoreSelection('\n', '\n', () => {
+      this.getMoreSelection('::: ', '\n', () => {
         const newSelection = this.editor.editor.getSelection();
         const isMatch = this.$getNameFromStr(newSelection);
         if (isMatch !== false) {
           $selection = newSelection;
           currentName = isMatch;
+          title = this.$getTitle(newSelection);
         }
         return isMatch !== false;
       });
@@ -95,21 +107,34 @@ export default class Panel extends MenuBase {
         // 去掉面板语法
         this.panelRule.lastIndex = 0;
         return $selection.replace(this.panelRule, (match, preLines, name, content) => {
-          return content;
+          const $name = name.trim();
+          const $title = /\s/.test($name) ? $name.replace(/[^\s]+\s/, '') : '';
+          return `${$title}\n${content}`;
         });
       }
       // 修改name
       this.registerAfterClickCb(() => {
-        this.setLessSelection('\n', '\n');
+        this.setLessSelection('::: ', '\n');
       });
       this.panelRule.lastIndex = 0;
       return $selection.replace(this.panelRule, (match, preLines, name, content) => {
-        return `:::${shortKey}\n${content.replace(/\n+$/, '')}\n:::`;
+        const $name = name.trim();
+        const $title = /\s/.test($name) ? $name.replace(/[^\s]+\s/, '') : '';
+        return `::: ${shortKey} ${$title}\n${content.replace(/\n+$/, '')}\n:::`;
       });
     }
     this.registerAfterClickCb(() => {
-      this.setLessSelection('\n', '\n');
+      this.setLessSelection('::: ', '\n');
     });
-    return `:::${shortKey}\n${$selection}\n:::`.replace(/\n{2,}:::/g, '\n:::');
+    $selection = $selection.replace(/^\n+/, '');
+    if (/\n/.test($selection)) {
+      if (!title) {
+        title = $selection.replace(/\n[\w\W]+$/, '');
+        $selection = $selection.replace(/^[^\n]+\n/, '');
+      }
+    } else {
+      title = title ? title : '标题';
+    }
+    return `::: ${shortKey} ${title}\n${$selection}\n:::`.replace(/\n{2,}:::/g, '\n:::');
   }
 }

src/utils/regexp.js

@@ -211,7 +211,7 @@ export function getListFromStr(selection, type) {
  */
 export function getPanelRule() {
   const ret = {
-    begin: /(?:^|\n)(\n*(?:[^\S\n]*)):::([^:\n\s]+?)\s*\n/,
+    begin: /(?:^|\n)(\n*(?:[^\S\n]*)):::([^:][^\n]+?)\s*\n/,
     content: /([\w\W]*?)/,
     end: /\n[ \t]*:::[ \t]*(?=$|\n+)/,
   };
@@ -222,26 +222,20 @@ export function getPanelRule() {
 /**
  * 手风琴/detail语法的识别正则
  * 例：
- * +++(+|-)
- * 点击查看详情
- * :
+ * +++(-) 点击查看详情
  * body
  * body
- * +-
- * 标题（默认收起内容）
- * :
+ * ++ 标题（默认收起内容）
  * 内容
- * ++
- * 标题（默认展开内容）
- * :
+ * ++- 标题（默认展开内容）
  * 内容2
  * +++
  * @returns {object}
  */
 export function getDetailRule() {
   const ret = {
-    begin: /(?:^|\n)(\n*(?:[^\S\n]*))\+\+\+(\+|-)\s*\n/,
-    content: /([\w\W]+?\n:\n[\w\W]+?)/,
+    begin: /(?:^|\n)(\n*(?:[^\S\n]*))\+\+\+([-]{0,1})\s+([^\n]+)\n/,
+    content: /([\w\W]+?)/,
     end: /\n[ \t]*\+\+\+[ \t]*(?=$|\n+)/,
   };
   ret.reg = new RegExp(ret.begin.source + ret.content.source + ret.end.source, 'g');