Merge branch 'dev'

.github/workflows/pr-merge.yml

@@ -1,4 +1,4 @@
-name: PR Closed
+name: PR Closed Or Merge
 
 on:
   pull_request_target:
@@ -7,21 +7,15 @@ on:
 
 jobs:
   remove_assets:
+    # 不需要在fork仓库的pr中运行
+    if: github.repository == 'Tencent/cherry-markdown'
     runs-on: ubuntu-latest
 
     steps:
       # 检出仓库代码
       - name: Checkout repository
         uses: actions/checkout@v2
 
-      # 打印 PR 详细信息
-      - name: Print PR details
-        run: |
-          echo "The PR ID is ${{ github.event.pull_request.id }}"
-          echo "The PR number is ${{ github.event.pull_request.number }}"
-          echo "The PR title is ${{ github.event.pull_request.title }}"
-          echo "The PR branch is ${{ github.event.pull_request.head.ref }}"
-
       # 安装 cos-nodejs-sdk-v5
       - name: Install cos-nodejs-sdk-v5
         run: npm install cos-nodejs-sdk-v5

client/src/components/CherryMarkdown/cherry.config.ts

@@ -60,6 +60,20 @@ const initCherryMarkdown = () => {
       // 对复制内容进行额外处理
       return code;
     },
+    onExpandCode: (event, code) => {
+      // 阻止默认的粘贴事件
+      // return false;
+      // 对复制内容进行额外处理
+      // console.log(event, code);
+      return code;
+    },
+    onUnExpandCode: (event, code) => {
+      // 阻止默认的粘贴事件
+      // return false;
+      // 对复制内容进行额外处理
+      // console.log(event, code);
+      return code;
+    },
     // 获取中文的拼音
     changeString2Pinyin: (string: string) => {
       /**
@@ -114,6 +128,8 @@ const initCherryMarkdown = () => {
           wrap: true,
           lineNumber: true,
           copyCode: true,
+          expandCode: true, // 是否展开代码块
+          unExpandCode: true, // 是否展开代码块
           customRenderer: {
           },
           indentedCodeBlock: true,
@@ -218,6 +234,9 @@ const initCherryMarkdown = () => {
       beforeImageMounted: callbacks.beforeImageMounted,
       onClickPreview: callbacks.onClickPreview,
       onCopyCode: callbacks.onCopyCode,
+      // 展开代码块代码时的回调
+      onExpandCode: callbacks.onExpandCode,
+      onUnExpandCode: callbacks.onUnExpandCode,
       changeString2Pinyin: callbacks.changeString2Pinyin,
     },
     previewer: {

examples/scripts/index-demo.js

@@ -118,6 +118,7 @@ var basicConfig = {
       codeBlock: {
         theme: 'twilight',
         lineNumber: true, // 默认显示行号
+        expandCode: true,
       },
       table: {
         enableChart: true,
@@ -156,6 +157,14 @@ var basicConfig = {
       },
     },
   },
+  multipleFileSelection: {
+    video: true,
+    audio: false,
+    image: true,
+    word: false,
+    pdf: true,
+    file: true,
+  },
   toolbars: {
     toolbar: [
       'bold',
@@ -179,7 +188,7 @@ var basicConfig = {
       '|',
       'formula',
       {
-        insert: ['image', 'audio', 'video', 'link', 'hr', 'br', 'code', 'inlineCode', 'formula', 'toc', 'table', 'pdf', 'word'],
+        insert: ['image', 'audio', 'video', 'link', 'hr', 'br', 'code', 'inlineCode', 'formula', 'toc', 'table', 'pdf', 'word', 'file'],
       },
       'graph',
       'customMenuTable',

src/Cherry.config.js

@@ -52,10 +52,80 @@ const callbacks = {
       callback('images/demo-dog.png');
     }
   },
+  fileUploadMulti(files, callback) {
+    const fileType = files[0].type;
+    const promises = [];
+    for (const file of files) {
+      const promise = new Promise((resolve) => {
+        if (/video/i.test(fileType)) {
+          resolve({
+            url: 'images/demo-dog.png',
+            params: {
+              name: `${file.name.replace(/\.[^.]+$/, '')}`,
+              poster: 'images/demo-dog.png?poster=true',
+              isBorder: true,
+              isShadow: true,
+              isRadius: true,
+            },
+          });
+        } else if (/image/i.test(fileType)) {
+          // 如果上传的是图片，则默认回显base64内容（因为没有图床）
+          // 创建 FileReader 对象
+          const reader = new FileReader();
+          // 读取文件内容
+          reader.onload = (event) => {
+            // 获取 base64 内容
+            const base64Content = event.target.result;
+            resolve({
+              url: base64Content,
+              params: {
+                name: `${file.name.replace(/\.[^.]+$/, '')}`,
+                isShadow: true,
+                width: '60%',
+                height: 'auto',
+              },
+            });
+          };
+          reader.readAsDataURL(file);
+        } else if (/audio/i.test(fileType)) {
+          resolve({
+            url: 'images/demo-dog.png',
+            params: {
+              name: `${file.name.replace(/\.[^.]+$/, '')}`,
+              poster: 'images/demo-dog.png?poster=true',
+              isBorder: true,
+              isShadow: true,
+              isRadius: true,
+            },
+          });
+        } else {
+          resolve('images/demo-dog.png');
+        }
+      });
+      promises.push(promise);
+    }
+    Promise.all(promises).then((results) => {
+      callback(results);
+    });
+  },
   afterChange: (text, html) => {},
   afterInit: (text, html) => {},
   beforeImageMounted: (srcProp, src) => ({ srcProp, src }),
   onClickPreview: (event) => {},
+  onExpandCode: (event, code) => {
+    // 阻止默认的粘贴事件
+    // return false;
+    // 对复制内容进行额外处理
+    // console.log(event, code);
+    return code;
+  },
+  onUnExpandCode: (event, code) => {
+    // 阻止默认的粘贴事件
+    // return false;
+    // 对复制内容进行额外处理
+    // console.log(event, code);
+    return code;
+  },
   /**
    * 粘贴时触发
    * @param {ClipboardEvent['clipboardData']} clipboardData
@@ -117,8 +187,11 @@ const defaultConfig = {
       htmlWhiteList: '',
       /**
        * 适配流式会话的场景，开启后将具备以下特性：
-       * 1. 代码块自动闭合，相当于强制 `engine.syntax.codeBlock.selfClosing=true`
-       * 2. 文章末尾的段横线标题语法（`\n-`）失效
+       * - cherry渲染频率从50ms/次提升到10ms/次
+       * - 代码块自动闭合，相当于强制 `engine.syntax.codeBlock.selfClosing=true`
+       * - 文章末尾的段横线标题语法（`\n-`）失效
+       * - 表格语法自动闭合，相当于强制`engine.syntax.table.selfClosing=true`
+       * - 加粗、斜体语法自动闭合，相当于强制`engine.syntax.fontEmphasis.selfClosing=true`
        *
        * 后续如果有新的需求，可提issue反馈
        */
@@ -168,6 +241,7 @@ const defaultConfig = {
         copyCode: true, // 是否显示“复制”按钮
         editCode: true, // 是否显示“编辑”按钮
         changeLang: true, // 是否显示“切换语言”按钮
+        expandCode: false, // 是否展开/收起代码块，当代码块行数大于10行时，会自动收起代码块
         selfClosing: true, // 自动闭合，为true时，当md中有奇数个```时，会自动在md末尾追加一个```
         customRenderer: {
           // 自定义语法渲染器
@@ -338,6 +412,8 @@ const defaultConfig = {
   },
   // 打开draw.io编辑页的url，如果为空则drawio按钮失效
   drawioIframeUrl: '',
+  // drawio iframe的样式
+  drawioIframeStyle: 'border: none;',
   /**
    * 上传文件的时候用来指定文件类型
    */
@@ -349,6 +425,17 @@ const defaultConfig = {
     pdf: '.pdf',
     file: '*',
   },
+  /**
+   * 上传文件的时候是否开启多选
+   */
+  multipleFileSelection: {
+    video: false,
+    audio: false,
+    image: false,
+    word: false,
+    pdf: false,
+    file: false,
+  },
   callback: {
     /**
      * 全局的URL处理器
@@ -359,11 +446,17 @@ const defaultConfig = {
     urlProcessor: callbacks.urlProcessor,
     // 上传文件的回调
     fileUpload: callbacks.fileUpload,
+    // 上传多文件的回调
+    fileUploadMulti: callbacks.fileUploadMulti,
     beforeImageMounted: callbacks.beforeImageMounted,
-    // 预览区域点击事件，previewer.enablePreviewerBubble = true 时生效
+    // 预览区域点击事件
     onClickPreview: callbacks.onClickPreview,
     // 复制代码块代码时的回调
     onCopyCode: callbacks.onCopyCode,
+    // 展开代码块代码时的回调
+    onExpandCode: callbacks.onExpandCode,
+    // 缩起代码块代码时的回调
+    onUnExpandCode: callbacks.onUnExpandCode,
     // 把中文变成拼音的回调，当然也可以把中文变成英文、英文变成中文
     changeString2Pinyin: callbacks.changeString2Pinyin,
     /**

src/core/hooks/CodeBlock.js

@@ -38,6 +38,7 @@ export default class CodeBlock extends ParagraphBase {
     this.wrap = config.wrap; // 超出是否换行
     this.lineNumber = config.lineNumber; // 是否显示行号
     this.copyCode = config.copyCode; // 是否显示“复制”按钮
+    this.expandCode = config.expandCode; // 是否显示“展开”按钮
     this.editCode = config.editCode; // 是否显示“编辑”按钮
     this.changeLang = config.changeLang; // 是否显示“切换语言”按钮
     this.selfClosing = config.selfClosing; // 自动闭合，为true时，当md中有奇数个```时，会自动在md末尾追加一个```
@@ -199,17 +200,29 @@ export default class CodeBlock extends ParagraphBase {
       cacheCode = Prism.highlight(cacheCode, Prism.languages[lang], lang);
       cacheCode = this.renderLineNumber(cacheCode);
     }
+    const needUnExpand = this.expandCode && $code.match(/\n/g)?.length > 10; // 是否需要收起代码块
     cacheCode = `<div
         data-sign="${sign}"
         data-type="codeBlock"
         data-lines="${lines}" 
         data-edit-code="${this.editCode}" 
         data-copy-code="${this.copyCode}"
+        data-expand-code="${this.expandCode}"
         data-change-lang="${this.changeLang}"
         data-lang="${$lang}"
+        style="position:relative"
+        class="${needUnExpand ? 'cherry-code-unExpand' : 'cherry-code-expand'}"
       >
       <pre class="language-${lang}">${this.wrapCode(cacheCode, lang)}</pre>
-    </div>`;
+      `;
+    if (needUnExpand) {
+      cacheCode += `<div class="cherry-mask-code-block">
+        <div class="expand-btn ">
+          <i class="ch-icon ch-icon-expand"></i>
+        </div>
+      </div>`;
+    }
+    cacheCode += '</div>';
     return cacheCode;
   }
 

src/sass/ch-icon.scss

@@ -110,4 +110,6 @@
 .ch-icon-chevronsRight:before { content: "\EA71" }
 .ch-icon-trendingUp:before { content: "\EA72" }
 .ch-icon-inlineCode:before { content: "\EA73" }
-.ch-icon-codeBlock:before { content: "\EA74" }
+.ch-icon-codeBlock:before { content: "\EA74" }
+.ch-icon-expand:before { content: "\EA75" }
+.ch-icon-unExpand:before { content: "\EA76" }