feat: #992 增加配置代码块自定义按钮的功能

Tencent · Dec 12, 2024 · a645e7f · a645e7f
1 parent d9275e6
commit a645e7f
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 9 deletions.
diff --git a/examples/scripts/index-demo.js b/examples/scripts/index-demo.js
@@ -133,6 +133,13 @@ var basicConfig = {
         theme: 'twilight',
         lineNumber: true, // 默认显示行号
         expandCode: true,
+        copyCode: true,
+        editCode: true,
+        changeLang: true,
+        customBtns: [
+          { html: '自定义按钮1', onClick: (event, code)=>{console.log(`自定义按钮1: ${code}`);} },
+          { html: '自定义按钮2', onClick: (event, code)=>{console.log(`自定义按钮2: ${code}`);} },
+        ],
       },
       table: {
         enableChart: true,

diff --git a/src/Cherry.config.js b/src/Cherry.config.js
@@ -265,6 +265,10 @@ const defaultConfig = {
          *        indentedCodeBlock：false
          */
         indentedCodeBlock: true,
+        /**
+         * 自定义按钮，出现在代码块右上角
+         **/
+        customBtns: [],
       },
       emoji: {
         useUnicode: true, // 是否使用unicode进行渲染

diff --git a/src/sass/cherry.scss b/src/sass/cherry.scss
@@ -640,6 +640,7 @@
   * {
     pointer-events: all;
   }
+  .cherry-code-block-custom-btn,
   .cherry-copy-code-block,
   .cherry-unExpand-code-block,
   .cherry-edit-code-block {
@@ -652,13 +653,16 @@
     float: right;
     top: 15px;
     border-radius: 5px;
-    margin-left: -27px;
+    // margin-left: -27px;
     transition: all 0.3s;
     z-index: 2;
     color: #3582fb;
     background-color: #eee;
     border-color: #3582fb;
   }
+  .cherry-code-block-custom-btn {
+    width: auto;
+  }
   .cherry-expand-code-block{
     position: absolute;
     width: 25px;
@@ -680,19 +684,12 @@
     right:10px;
   }
   .cherry-unExpand-code-block{
-    right: 10px;
     z-index: 12;
-    margin-top: 30px;
     &.hidden {
       display: none;
     }
   }
-  .cherry-copy-code-block {
-    right: 10px;
-  }
-  .cherry-edit-code-block {
-    right: 10+25+5px;
-  }
+  .cherry-code-block-custom-btn:hover,
   .cherry-copy-code-block:hover,
   .cherry-expand-code-block:hover,
   .cherry-unExpand-code-block:hover,
@@ -806,6 +803,7 @@
   [data-code-block-theme='funky'] &,
   [data-code-block-theme='solarized-light'] &,
   [data-code-block-theme='coy'] & {
+    .cherry-code-block-custom-btn,
     .cherry-copy-code-block,
     .cherry-expand-code-block,
     .cherry-unExpand-code-block,

diff --git a/src/utils/codeBlockContentHandler.js b/src/utils/codeBlockContentHandler.js
@@ -174,11 +174,14 @@ export default class CodeBlockHandler {
         this.$changeLang(e.target.value || '');
       });
     }
+    // 第一行的按钮的right值
+    let oneLineBtnsRight = 10;
     if (editCode === 'true' && isEnableBubbleAndEditorShow) {
       // 添加编辑btn
       const editDom = document.createElement('div');
       editDom.className = 'cherry-edit-code-block';
       editDom.innerHTML = '<i class="ch-icon ch-icon-edit"></i>';
+      editDom.style.right = `${oneLineBtnsRight}px`;
       this.container.appendChild(editDom);
       editDom.addEventListener('click', (e) => {
         e.preventDefault();
@@ -189,12 +192,14 @@ export default class CodeBlockHandler {
         this.parent.showCodeBlockPreviewerBubbles('click', this.target);
       });
       this.editDom = editDom;
+      oneLineBtnsRight += 8;
     }
     if (copyCode === 'true') {
       // 添加复制btn
       const copyDom = document.createElement('div');
       copyDom.className = 'cherry-copy-code-block';
       copyDom.innerHTML = '<i class="ch-icon ch-icon-copy"></i>';
+      copyDom.style.right = `${oneLineBtnsRight}px`;
       this.container.appendChild(copyDom);
       copyDom.addEventListener('click', (e) => {
         e.preventDefault();
@@ -203,6 +208,26 @@ export default class CodeBlockHandler {
         this.$copyCodeBlock();
       });
       this.copyDom = copyDom;
+      oneLineBtnsRight += 8;
+    }
+    const { customBtns } = this.$cherry.options.engine.syntax.codeBlock;
+    if (customBtns) {
+      this.codeBlockCustomBtns = [];
+      customBtns.forEach((btn) => {
+        const dom = document.createElement('div');
+        dom.className = 'cherry-code-block-custom-btn';
+        dom.innerHTML = btn.html;
+        dom.style.right = `${oneLineBtnsRight}px`;
+        this.container.appendChild(dom);
+        dom.addEventListener('click', (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          const codeContent = this.target.querySelector('pre').innerText;
+          btn.onClick(e, codeContent);
+        });
+        this.codeBlockCustomBtns.push(dom);
+        oneLineBtnsRight += 8;
+      });
     }
     if (expandCode === 'true') {
       const isExpand = this.target.classList.contains('cherry-code-expand');
@@ -211,6 +236,7 @@ export default class CodeBlockHandler {
       const unExpandDom = document.createElement('div');
       unExpandDom.className = 'cherry-unExpand-code-block';
       unExpandDom.innerHTML = '<i class="ch-icon ch-icon-unExpand"></i>';
+      unExpandDom.style.right = `${oneLineBtnsRight}px`;
       if (!isExpand || !maskDom) {
         unExpandDom.classList.add('hidden');
       }
@@ -222,6 +248,7 @@ export default class CodeBlockHandler {
         this.$expandCodeBlock(false);
       });
       this.unExpandDom = unExpandDom;
+      oneLineBtnsRight += 8;
     }
   }
   // 隐藏所有按钮（切换语言、编辑、复制）

diff --git a/types/cherry.d.ts b/types/cherry.d.ts
@@ -308,6 +308,13 @@ export interface CherryEngineOptions {
        *        indentedCodeBlock：false
        */
       indentedCodeBlock?: boolean,
+      /**
+         * 自定义按钮，出现在代码块右上角
+         **/
+      customBtns?: {
+        'html': '',
+        'onClick': (event: MouseEvent, code: string) => {},
+      }[],
     },
     emoji?: {
       useUnicode?: boolean, // 是否使用unicode进行渲染