:sparkles: fix https://github.com/Vanessa219/vditor/issues/1553

CHANGELOG.md

@@ -7,6 +7,7 @@
   * 添加 option.keydown
   * 添加 option.link 和 options.image
   * 添加 hljs.defaultLang
+  * 添加 hljs.renderMenu
 
 ### TODO
 
@@ -14,6 +15,8 @@
 
 ### v3.10.1 / 2024-01
 
+* [添加 options.preview.hljs.renderMenu 方法](https://github.com/Vanessa219/vditor/issues/1553) `引入特性`
+
 ### v3.9.9 / 2024-01-30
 
 * [导出 PDF 时主题错误](https://github.com/Vanessa219/vditor/issues/1549) `修复缺陷`

README.md

@@ -309,6 +309,7 @@ new Vditor('vditor', {
 | style | 可选值参见[Chroma](https://xyproto.github.io/splash/docs/longer/all.html) | `github` |
 | lineNumber | 是否启用行号 | false |
 | langs | 自定义指定语言 | [CODE_LANGUAGES](https://github.com/Vanessa219/vditor/blob/53ca8f9a0e511b37b5dae7c6b15eb933e9e02ccd/src/ts/constants.ts#L20) |
+| renderMenu | 渲染菜单按钮 | - |
 
 #### options.preview.markdown
 
@@ -585,7 +586,7 @@ options?: IPreviewOptions {
 | previewImage(oldImgElement: HTMLImageElement, lang: keyof II18n = "zh_CN", theme = "classic") | 点击图片预览 |
 | mermaidRender(element: HTMLElement, cdn = options.cdn, theme = options.theme) | 流程图/时序图/甘特图 |
 | flowchartRender(element: HTMLElement, cdn = options.cdn) | flowchart 渲染 |
-| codeRender(element: HTMLElement) | 为 element 中的代码块添加复制按钮 |
+| codeRender(element: HTMLElement, option?: IHljs) | 为 element 中的代码块添加复制按钮 |
 | chartRender(element: (HTMLElement \| Document) = document, cdn = options.cdn, theme = options.theme) | 图表渲染 |
 | mindmapRender(element: (HTMLElement \| Document) = document, cdn = options.cdn, theme = options.theme) | 脑图渲染 |
 | plantumlRender(element: (HTMLElement \| Document) = document, cdn = options.cdn) | plantuml 渲染 |

README_en_US.md

@@ -293,6 +293,7 @@ new Vditor('vditor', {
 | style | For optional values, see [Chroma](https://xyproto.github.io/splash/docs/longer/all.html) | `github` |
 | lineNumber | Whether to enable line number | false |
 | langs | Custom languages | [CODE_LANGUAGES](https://github.com/Vanessa219/vditor/blob/53ca8f9a0e511b37b5dae7c6b15eb933e9e02ccd/src/ts/constants.ts#L20) |
+| renderMenu | render menu button | - |
 
 #### options.preview.markdown
 
@@ -537,7 +538,7 @@ options?: IPreviewOptions {
 | previewImage(oldImgElement: HTMLImageElement, lang: keyof II18n = "zh_CN", theme = "classic") | Click on the image to preview |
 | mermaidRender(element: HTMLElement, cdn = options.cdn, theme = options.theme) | flowchart/sequence diagram/gantt diagram rendering |
 | flowchartRender(element: HTMLElement, cdn = options.cdn) | flowchart.js rendering |
-| codeRender(element: HTMLElement) | Add a copy button for the code block in element |
+| codeRender(element: HTMLElement, option?: IHljs) | Add a copy button for the code block in element |
 | chartRender(element: (HTMLElement\| Document) = document, cdn = options.cdn, theme = options.theme) | Chart rendering |
 | plantumlRender(element: (HTMLElement\| Document) = document, cdn = options.cdn) | plantuml rendering |
 | abcRender(element: (HTMLElement\| Document) = document, cdn = options.cdn) | Stave rendering |

src/ts/markdown/codeRender.ts

@@ -1,7 +1,7 @@
 import {code160to32} from "../util/code160to32";
 import {Constants} from "../constants";
 
-export const codeRender = (element: HTMLElement) => {
+export const codeRender = (element: HTMLElement, option?: IHljs) => {
     Array.from<HTMLElement>(element.querySelectorAll("pre > code")).filter((e, index) => {
         if (e.parentElement.classList.contains("vditor-wysiwyg__pre") ||
             e.parentElement.classList.contains("vditor-ir__marker--pre")) {
@@ -49,7 +49,9 @@ onclick="this.previousElementSibling.select();document.execCommand('copy');this.
         const textarea = document.createElement("textarea");
         textarea.value = code160to32(codeText);
         divElement.insertAdjacentElement("afterbegin", textarea);
-
+        if (option && option.renderMenu) {
+            option.renderMenu(e, divElement);
+        }
         e.before(divElement);
         e.style.maxHeight = (window.outerHeight - 40) + "px";
         // https://github.com/Vanessa219/vditor/issues/1356

src/ts/markdown/previewRender.ts

@@ -119,7 +119,7 @@ export const previewRender = async (previewElement: HTMLDivElement, markdown: st
     if (mergedOptions.anchor === 1) {
         previewElement.classList.add("vditor-reset--anchor");
     }
-    codeRender(previewElement);
+    codeRender(previewElement, mergedOptions.hljs);
     highlightRender(mergedOptions.hljs, previewElement, mergedOptions.cdn);
     mathRender(previewElement, {
         cdn: mergedOptions.cdn,

src/ts/preview/index.ts

@@ -220,7 +220,7 @@ export class Preview {
         if (cmtFocusElement) {
             cmtFocusElement.classList.remove("vditor-comment--focus");
         }
-        codeRender(vditor.preview.previewElement);
+        codeRender(vditor.preview.previewElement, vditor.options.preview.hljs);
         highlightRender(vditor.options.preview.hljs, vditor.preview.previewElement,
             vditor.options.cdn);
         mermaidRender(vditor.preview.previewElement, vditor.options.cdn, vditor.options.theme);

src/ts/util/processCode.ts

@@ -90,7 +90,7 @@ export const processCodeRender = (previewPanel: HTMLElement, vditor: IVditor) =>
         })
         if (!cRender) {
             highlightRender(Object.assign({}, vditor.options.preview.hljs), previewPanel, vditor.options.cdn);
-            codeRender(previewPanel);
+            codeRender(previewPanel, vditor.options.preview.hljs);
         }
     }
 

types/index.d.ts

@@ -435,6 +435,8 @@ interface IHljs {
     enable?: boolean;
     /** 自定义指定语言: CODE_LANGUAGES */
     langs?: string[];
+    /** 渲染右上角菜单按钮 */
+    renderMenu?(element: HTMLElement, menuElement: HTMLElement): void;
 }
 
 /** @link https://ld246.com/article/1549638745630#options-preview-math */
@@ -726,6 +728,7 @@ interface IOptions {
         language: string,
         render: (element: HTMLElement, vditor: IVditor) => void
     }[],
+
     /** 编辑器异步渲染完成后的回调方法 */
     after?(): void;