Merge branch 'dev'

Author: barryhu

examples/head_num.html

@@ -108,9 +108,12 @@
 <script>
   var cherry = new Cherry({
     id: 'markdown',
-    previewer: {
-      // head-num 表示启用标题自动序号
-      className: 'cherry-markdown head-num'
+    engine: {
+      syntax: {
+        header: {
+          anchorStyle: 'autonumber',
+        }
+      }
     },
     value: document.getElementById("demo-val").value,
   });

src/Cherry.config.js

@@ -89,6 +89,18 @@ const defaultConfig = {
         customRenderer: {
           // 自定义语法渲染器
         },
+        /**
+         * indentedCodeBlock是缩进代码块是否启用的开关
+         *
+         *    在6.X之前的版本中默认不支持该语法。
+         *    因为cherry的开发团队认为该语法太丑了（容易误触）
+         *    开发团队希望用```代码块语法来彻底取代该语法
+         *    但在后续的沟通中，开发团队发现在某些场景下该语法有更好的显示效果
+         *    因此开发团队在6.X版本中才引入了该语法
+         *    已经引用6.x以下版本的业务如果想做到用户无感知升级，可以去掉该语法：
+         *        indentedCodeBlock：false
+         */
+        indentedCodeBlock: true,
       },
       emoji: {
         useUnicode: true, // 是否使用unicode进行渲染
@@ -112,6 +124,15 @@ const defaultConfig = {
         /** 默认只渲染一个目录 */
         allowMultiToc: false,
       },
+      header: {
+        /**
+         * 标题的样式：
+         *  - default       默认样式，标题前面有锚点
+         *  - autonumber    标题前面有自增序号锚点
+         *  - none          标题没有锚点
+         */
+        anchorStyle: 'default',
+      },
     },
   },
   editor: {
@@ -123,6 +144,8 @@ const defaultConfig = {
     // editOnly: 纯编辑模式（没有预览，可通过toolbar切换成双栏或预览模式）
     // previewOnly: 预览模式（没有编辑框，toolbar只显示“返回编辑”按钮，可通过toolbar切换成编辑模式）
     defaultModel: 'edit&preview',
+    // 粘贴时是否自动将html转成markdown
+    convertWhenPaste: true,
   },
   toolbars: {
     theme: 'dark', // light or dark

src/Cherry.js

@@ -421,8 +421,11 @@ export default class Cherry extends CherryStatic {
   createPreviewer() {
     /** @type {HTMLDivElement} */
     let previewer;
+    const anchorStyle =
+      (this.options.engine.syntax.header && this.options.engine.syntax.header.anchorStyle) || 'default';
+    const autonumberClass = anchorStyle === 'autonumber' ? ' head-num' : '';
     const { className, dom } = this.options.previewer;
-    const previewerClassName = `cherry-previewer ${className}`;
+    const previewerClassName = ['cherry-previewer', className || '', autonumberClass].join(' ');
     if (dom) {
       previewer = dom;
       previewer.className += ` ${previewerClassName}`;

src/Editor.js

@@ -53,10 +53,12 @@ export default class Editor {
       editorDom: document.createElement('div'),
       wrapperDom: null,
       autoScrollByCursor: true,
+      convertWhenPaste: true,
       codemirror: {
         lineNumbers: false, // 显示行数
         cursorHeight: 0.85, // 光标高度，0.85好看一些
         indentUnit: 4, // 缩进单位为4
+        tabSize: 4, // 一个tab转换成的空格数量
         // styleActiveLine: false, // 当前行背景高亮
         // matchBrackets: true, // 括号匹配
         mode: 'markdown',
@@ -135,7 +137,7 @@ export default class Editor {
     // 复制html转换markdown
     const htmlText = clipboardData.getData('text/plain');
     let html = clipboardData.getData('Text/Html');
-    if (!html) {
+    if (!html || !this.options.convertWhenPaste) {
       return true;
     }
     const test = html.replace(/<(html|head|body|!)/g, '');

src/core/hooks/CodeBlock.js

@@ -35,6 +35,7 @@ export default class CodeBlock extends ParagraphBase {
     this.customParser = {};
     this.wrap = config.wrap; // 超出是否换行
     this.lineNumber = config.lineNumber; // 是否显示行号
+    this.indentedCodeBlock = typeof config.indentedCodeBlock === 'undefined' ? true : config.indentedCodeBlock; // 是否支持缩进代码块
     if (config && config.customRenderer) {
       this.customLang = Object.keys(config.customRenderer).map((lang) => lang.toLowerCase());
       this.customParser = { ...config.customRenderer };
@@ -196,9 +197,66 @@ export default class CodeBlock extends ParagraphBase {
     return cacheCode;
   }
 
+  /**
+   * 获取缩进代码块语法的正则
+   */
+  $getIndentedCodeReg() {
+    const ret = {
+      begin: '(?:^|\\n\\s*\\n)(?: {4}|\\t)',
+      end: '(?=$|\\n( {0,3}[^ \\t\\n]|\\n[^ \\t\\n]))',
+      content: '([\\s\\S]+?)',
+    };
+    return new RegExp(ret.begin + ret.content + ret.end, 'g');
+  }
+
+  /**
+   * 生成缩进代码块（没有行号、没有代码高亮）
+   */
+  $getIndentCodeBlock(str) {
+    if (!this.indentedCodeBlock) {
+      return str;
+    }
+    return this.$recoverCodeInIndent(str).replace(this.$getIndentedCodeReg(), (match, code) => {
+      const lineCount = (match.match(/\n/g) || []).length - 1;
+      const sign = this.$engine.md5(match);
+      const html = `<pre data-sign="${sign}" data-lines="${lineCount}">${escapeHTMLSpecialChar(
+        code.replace(/\n( {4}|\t)/g, '\n'),
+      )}</pre>`;
+      // return this.getCacheWithSpace(this.pushCache(html), match, true);
+      return this.pushCache(html, sign, lineCount);
+    });
+  }
+
+  /**
+   * 预处理缩进代码块，将缩进代码块里的高亮代码块和行内代码进行占位处理
+   */
+  $replaceCodeInIndent(str) {
+    if (!this.indentedCodeBlock) {
+      return str;
+    }
+    return str.replace(this.$getIndentedCodeReg(), (match) => {
+      return match.replace(/`/g, '~~~IndentCode');
+    });
+  }
+
+  /**
+   * 恢复预处理的内容
+   */
+  $recoverCodeInIndent(str) {
+    if (!this.indentedCodeBlock) {
+      return str;
+    }
+    return str.replace(this.$getIndentedCodeReg(), (match) => {
+      return match.replace(/~~~IndentCode/g, '`');
+    });
+  }
+
   beforeMakeHtml(str, sentenceMakeFunc, markdownParams) {
     let $str = str;
 
+    // 预处理缩进代码块
+    $str = this.$replaceCodeInIndent($str);
+
     $str = $str.replace(this.RULE.reg, (match, leadingContent, lang, code) => {
       let $code = code;
       const { sign, lines } = this.computeLines(match, leadingContent, code);
@@ -262,6 +320,10 @@ export default class CodeBlock extends ParagraphBase {
       });
       $str = $str.replace(/~~not~inlineCode/g, '\\`');
     }
+
+    // 处理缩进代码块
+    $str = this.$getIndentCodeBlock($str);
+
     return $str;
   }
 

src/core/hooks/Header.js

@@ -32,6 +32,7 @@ export default class Header extends ParagraphBase {
     this.RULE = this.rule();
     this.headerIDCache = [];
     this.headerIDCounter = {};
+    this.config = config || {};
     // TODO: AllowCustomID
   }
 
@@ -113,13 +114,21 @@ export default class Header extends ParagraphBase {
     const sign = this.$engine.md5(`${level}-${processedText.sign}-${anchorID}-${dataLines}`);
     const result = [
       `<h${level} id="${anchorID}" data-sign="${sign}" data-lines="${dataLines}">`,
-      `<a class="anchor" href="#${anchorID}"></a>`,
+      this.$getAnchor(anchorID),
       `${html}`,
       `</h${level}>`,
     ].join('');
     return { html: result, sign: `${sign}` };
   }
 
+  $getAnchor(anchorID) {
+    const anchorStyle = this.config.anchorStyle || 'default';
+    if (anchorStyle === 'none') {
+      return '';
+    }
+    return `<a class="anchor" href="#${anchorID}"></a>`;
+  }
+
   beforeMakeHtml(str) {
     let $str = str;
     // atx 优先

src/sass/cherry.scss

@@ -469,7 +469,7 @@
     font-size: 0.9em;
   }
 
-  .cm-s-default .cm-whitespace {
+  .cm-s-default .cm-whitespace, .cm-tab {
     font-family: $monospaceFont;
     font-size: 0.9em;
   }
@@ -629,9 +629,9 @@
 }
 
 .cherry-switch-paste {
-  width: 224px;
   margin-left: -112px;
   left: 50%;
+  box-sizing: content-box;
   .switch-btn--bg {
     transition: all 0.3s;
     position: absolute;

src/sass/markdown.scss

@@ -190,6 +190,15 @@
     margin: 0 0 $elementGap;
   }
 
+  pre {
+    padding: 16px;
+    overflow: auto;
+    font-size: 85%;
+    line-height: 1.45;
+    background-color: #f6f8fa;
+    border-radius: 6px;
+  }
+
   // 适配历史文章样式
   @import 'prettyprint/prettyprint.scss';
 

src/toolbars/PreviewerBubble.js

@@ -15,6 +15,7 @@
  */
 
 import imgSizeHander from '@/utils/imgSizeHander';
+import Event from '@/Event';
 /**
  * 预览区域的响应式工具栏
  */
@@ -59,6 +60,9 @@ export default class PreviewerBubble {
     this.previewerDom.addEventListener('scroll', (event) => {
       this.bubbleHandler.emit('scroll', event);
     });
+    Event.on(this.previewer.instanceId, Event.Events.previewerClose, () => {
+      this.$removeAllPreviewerBubbles();
+    });
     this.previewer.options.afterUpdateCallBack.push(() => {
       this.bubbleHandler.emit('previewUpdate', () => {
         this.$removeAllPreviewerBubbles();

types/cherry.d.ts

@@ -101,6 +101,8 @@ export interface CherryEditorOptions {
   height?: string;
   /** 编辑器初始化后的模式 */
   defaultModel?: EditorMode;
+  /** 粘贴时是否自动将html转成markdown */
+  convertWhenPaste?: boolean;
 }
 
 export type CherryLifecycle = (text: string, html: string) => void;