feat: 图片相关

- Vanessa219#1220 改善图片预览问题，增加options->preview->showImage: boolean控制是否双击预览 - 增加options->previewImage函数获取触发的图片节点，参数img: HTMLImageElement 链接相关 - 增加options-> link属性，options->open: boolean控制点击打开链接，intercept函数控制点击的链接，参数 url: string
heiyehk · Jan 7, 2023 · 029f1b1 · 029f1b1
1 parent 9dbbc79
commit 029f1b1
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 54 deletions.
diff --git a/src/ts/ir/index.ts b/src/ts/ir/index.ts
@@ -1,5 +1,5 @@
-import {Constants} from "../constants";
-import {isCtrl, isFirefox} from "../util/compatibility";
+import { Constants } from "../constants";
+import { isCtrl, isFirefox } from "../util/compatibility";
 import {
     blurEvent,
     copyEvent, cutEvent, dblclickEvent,
@@ -9,17 +9,17 @@ import {
     scrollCenter,
     selectEvent,
 } from "../util/editorCommonEvent";
-import {paste} from "../util/fixBrowserBehavior";
-import {hasClosestByAttribute, hasClosestByClassName} from "../util/hasClosest";
+import { paste } from "../util/fixBrowserBehavior";
+import { hasClosestByAttribute, hasClosestByClassName } from "../util/hasClosest";
 import {
     getEditorRange, setRangeByWbr,
     setSelectionFocus,
 } from "../util/selection";
-import {clickToc} from "../util/toc";
-import {expandMarker} from "./expandMarker";
-import {highlightToolbarIR} from "./highlightToolbarIR";
-import {input} from "./input";
-import {processAfterRender, processHint} from "./process";
+import { clickToc } from "../util/toc";
+import { expandMarker } from "./expandMarker";
+import { highlightToolbarIR } from "./highlightToolbarIR";
+import { input } from "./input";
+import { processAfterRender, processHint } from "./process";
 
 class IR {
     public range: Range;
@@ -93,9 +93,9 @@ class IR {
             if (this.preventInput) {
                 this.preventInput = false;
                 processAfterRender(vditor, {
-                  enableAddUndoStack: true,
-                  enableHint: true,
-                  enableInput: true,
+                    enableAddUndoStack: true,
+                    enableHint: true,
+                    enableInput: true,
                 });
                 return;
             }
@@ -149,7 +149,12 @@ class IR {
             // 打开链接
             const aElement = hasClosestByAttribute(event.target, "data-type", "a");
             if (aElement && (!aElement.classList.contains("vditor-ir__node--expand"))) {
-                window.open(aElement.querySelector(":scope > .vditor-ir__marker--link").textContent);
+                if (vditor.options.link && vditor.options.link.intercept) {
+                    vditor.options.link.intercept(aElement.querySelector(":scope > .vditor-ir__marker--link").textContent);
+                }
+                if (vditor.options.link && vditor.options.link.open) {
+                    window.open(aElement.querySelector(":scope > .vditor-ir__marker--link").textContent);
+                }
                 return;
             }
 
@@ -253,4 +258,4 @@ class IR {
     }
 }
 
-export {IR};
+export { IR };
diff --git a/src/ts/preview/index.ts b/src/ts/preview/index.ts
@@ -1,21 +1,21 @@
-import {abcRender} from "../markdown/abcRender";
-import {chartRender} from "../markdown/chartRender";
-import {codeRender} from "../markdown/codeRender";
-import {flowchartRender} from "../markdown/flowchartRender";
-import {getMarkdown} from "../markdown/getMarkdown";
-import {graphvizRender} from "../markdown/graphvizRender";
-import {highlightRender} from "../markdown/highlightRender";
-import {mathRender} from "../markdown/mathRender";
-import {mediaRender} from "../markdown/mediaRender";
-import {mermaidRender} from "../markdown/mermaidRender";
-import {markmapRender} from "../markdown/markmapRender";
-import {mindmapRender} from "../markdown/mindmapRender";
-import {plantumlRender} from "../markdown/plantumlRender";
-import {getEventName} from "../util/compatibility";
-import {hasClosestByClassName, hasClosestByMatchTag} from "../util/hasClosest";
-import {hasClosestByTag} from "../util/hasClosestByHeadings";
-import {setSelectionFocus} from "../util/selection";
-import {previewImage} from "./image";
+import { abcRender } from "../markdown/abcRender";
+import { chartRender } from "../markdown/chartRender";
+import { codeRender } from "../markdown/codeRender";
+import { flowchartRender } from "../markdown/flowchartRender";
+import { getMarkdown } from "../markdown/getMarkdown";
+import { graphvizRender } from "../markdown/graphvizRender";
+import { highlightRender } from "../markdown/highlightRender";
+import { mathRender } from "../markdown/mathRender";
+import { mediaRender } from "../markdown/mediaRender";
+import { mermaidRender } from "../markdown/mermaidRender";
+import { markmapRender } from "../markdown/markmapRender";
+import { mindmapRender } from "../markdown/mindmapRender";
+import { plantumlRender } from "../markdown/plantumlRender";
+import { getEventName } from "../util/compatibility";
+import { hasClosestByClassName, hasClosestByMatchTag } from "../util/hasClosest";
+import { hasClosestByTag } from "../util/hasClosestByHeadings";
+import { setSelectionFocus } from "../util/selection";
+import { previewImage } from "./image";
 
 export class Preview {
     public element: HTMLElement;
@@ -52,7 +52,10 @@ export class Preview {
                 }
                 return;
             }
-            if (event.target.tagName === "IMG") {
+            if (vditor.options.previewImage) {
+                vditor.options.previewImage(event.target as HTMLImageElement)
+            }
+            if (vditor.options.preview.showImage) {
                 previewImage(event.target as HTMLImageElement, vditor.options.lang, vditor.options.theme);
             }
         });
@@ -179,7 +182,7 @@ export class Preview {
                     }
                 };
 
-                xhr.send(JSON.stringify({markdownText}));
+                xhr.send(JSON.stringify({ markdownText }));
             } else {
                 let html = vditor.lute.Md2HTML(markdownText);
                 if (vditor.options.preview.transform) {

diff --git a/src/ts/util/editorCommonEvent.ts b/src/ts/util/editorCommonEvent.ts
@@ -1,21 +1,21 @@
-import {Constants} from "../constants";
-import {processHeading} from "../ir/process";
-import {processKeydown as irProcessKeydown} from "../ir/processKeydown";
-import {getMarkdown} from "../markdown/getMarkdown";
-import {previewImage} from "../preview/image";
-import {processHeading as processHeadingSV} from "../sv/process";
-import {processKeydown as mdProcessKeydown} from "../sv/processKeydown";
-import {setEditMode} from "../toolbar/EditMode";
-import {hidePanel} from "../toolbar/setToolbar";
-import {afterRenderEvent} from "../wysiwyg/afterRenderEvent";
-import {processKeydown} from "../wysiwyg/processKeydown";
-import {removeHeading, setHeading} from "../wysiwyg/setHeading";
-import {getEventName, isCtrl} from "./compatibility";
-import {execAfterRender, paste} from "./fixBrowserBehavior";
-import {getSelectText} from "./getSelectText";
-import {hasClosestByAttribute, hasClosestByMatchTag} from "./hasClosest";
-import {matchHotKey} from "./hotKey";
-import {getCursorPosition, getEditorRange} from "./selection";
+import { Constants } from "../constants";
+import { processHeading } from "../ir/process";
+import { processKeydown as irProcessKeydown } from "../ir/processKeydown";
+import { getMarkdown } from "../markdown/getMarkdown";
+import { previewImage } from "../preview/image";
+import { processHeading as processHeadingSV } from "../sv/process";
+import { processKeydown as mdProcessKeydown } from "../sv/processKeydown";
+import { setEditMode } from "../toolbar/EditMode";
+import { hidePanel } from "../toolbar/setToolbar";
+import { afterRenderEvent } from "../wysiwyg/afterRenderEvent";
+import { processKeydown } from "../wysiwyg/processKeydown";
+import { removeHeading, setHeading } from "../wysiwyg/setHeading";
+import { getEventName, isCtrl } from "./compatibility";
+import { execAfterRender, paste } from "./fixBrowserBehavior";
+import { getSelectText } from "./getSelectText";
+import { hasClosestByAttribute, hasClosestByMatchTag } from "./hasClosest";
+import { matchHotKey } from "./hotKey";
+import { getCursorPosition, getEditorRange } from "./selection";
 
 export const focusEvent = (vditor: IVditor, editorElement: HTMLElement) => {
     editorElement.addEventListener("focus", () => {
@@ -29,7 +29,12 @@ export const focusEvent = (vditor: IVditor, editorElement: HTMLElement) => {
 export const dblclickEvent = (vditor: IVditor, editorElement: HTMLElement) => {
     editorElement.addEventListener("dblclick", (event: MouseEvent & { target: HTMLElement }) => {
         if (event.target.tagName === "IMG") {
-            previewImage(event.target as HTMLImageElement, vditor.options.lang, vditor.options.theme);
+            if (vditor.options.previewImage) {
+                vditor.options.previewImage(event.target as HTMLImageElement)
+            }
+            if (vditor.options.preview.showImage) {
+                previewImage(event.target as HTMLImageElement, vditor.options.lang, vditor.options.theme);
+            }
         }
     });
 };

diff --git a/types/index.d.ts b/types/index.d.ts
@@ -114,7 +114,7 @@ declare class Lute {
 
     public static New(): Lute;
 
-    public static EscapeHTMLStr(html:string): string;
+    public static EscapeHTMLStr(html: string): string;
 
     public static GetHeadingID(node: ILuteNode): string;
 
@@ -484,6 +484,7 @@ interface IPreview {
     theme?: IPreviewTheme;
     /** @link https://ld246.com/article/1549638745630#options-preview-actions  */
     actions?: Array<IPreviewAction | IPreviewActionCustom>;
+    showImage?: boolean;
 
     /** 预览回调 */
     parse?(element: HTMLElement): void;
@@ -619,6 +620,11 @@ interface IOptions {
     mode?: "wysiwyg" | "sv" | "ir";
     /** @link https://ld246.com/article/1549638745630#options-preview */
     preview?: IPreview;
+    previewImage?: (img: HTMLImageElement) => void;
+    link?: {
+        open?: boolean;
+        intercept?: (href: string) => void;
+    },
     /** @link https://ld246.com/article/1549638745630#options-hint */
     hint?: IHint;
     /** @link https://ld246.com/article/1549638745630#options-toolbarConfig */