vuepress-plugin-md-power 1.0.0-rc.153 → 1.0.0-rc.155

package/lib/client/components/FileTreeNode.vue

@@ -16,7 +16,7 @@ const activeFileTreeNode = inject<Ref<string>>('active-file-tree-node', ref(''))
 
 const onNodeClick = inject<
   (filename: string, type: 'file' | 'folder') => void
->('on-file-tree-node-click', () => {})
+    >('on-file-tree-node-click', () => {})
 
 const active = ref(props.expanded)
 

package/lib/client/components/Plot.vue

@@ -1,61 +1,46 @@
 <script setup lang="ts">
 import type { PlotOptions } from '../../shared/index.js'
 import { onClickOutside, useMediaQuery } from '@vueuse/core'
-import { computed, ref, shallowRef } from 'vue'
+import { computed, onMounted, ref, useTemplateRef } from 'vue'
 import { usePageFrontmatter } from 'vuepress/client'
 import { pluginOptions } from '../options.js'
 
-const props = defineProps<Omit<PlotOptions, 'tag'>>()
+const props = defineProps<PlotOptions>()
 
 const matter = usePageFrontmatter()
+const isMobile = useMediaQuery('(max-width: 768px)')
 
-const options = computed(() => {
-  const plot = typeof pluginOptions.plot === 'object' ? pluginOptions.plot : {}
-
+const plot = computed(() => {
+  const global = typeof pluginOptions.plot === 'object' ? pluginOptions.plot : {}
+  const current = (typeof matter.value.plot === 'object' ? matter.value.plot : {}) as PlotOptions
   return {
-    trigger: props.trigger || matter.value.plotTrigger || plot.trigger || 'hover',
-    color: props.color || plot.color,
-    mask: props.mask || plot.mask,
+    trigger: isMobile.value ? 'click' : props.trigger ?? current.trigger ?? global.trigger ?? 'hover',
+    effect: props.effect ?? current.effect ?? global.effect ?? 'mask',
   }
 })
+const active = ref(false)
+const el = useTemplateRef<HTMLElement>('el')
+const classes = ref<string[]>([])
 
-const styles = computed(() => {
-  const plot = options.value
-  if (!plot.color && !plot.mask)
-    return {}
-  const style: Record<string, string> = {}
-  if (plot.color) {
-    if (typeof plot.color === 'string') {
-      style['--vp-c-plot-light'] = plot.color
-    }
-    else {
-      style['--vp-c-plot-light'] = plot.color.light
-      style['--vp-c-plot-dark'] = plot.color.dark
-    }
+onMounted(() => {
+  if (!el.value)
+    return
+  const classList = el.value.classList
+  if (!classList.contains('hover') && !classList.contains('click')) {
+    classes.value.push(plot.value.trigger)
   }
-  if (plot.mask) {
-    if (typeof plot.mask === 'string') {
-      style['--vp-c-bg-plot-light'] = plot.mask
-    }
-    else {
-      style['--vp-c-bg-plot-light'] = plot.mask.light
-      style['--vp-c-bg-plot-dark'] = plot.mask.dark
-    }
+  if (!classList.contains('mask') && !classList.contains('blur')) {
+    classes.value.push(plot.value.effect)
   }
-  return style
 })
 
-const isMobile = useMediaQuery('(max-width: 768px)')
-const active = ref(false)
-const el = shallowRef<HTMLElement>()
-
 onClickOutside(el, () => {
-  if (options.value.trigger === 'click' || isMobile.value)
+  if (plot.value.trigger === 'click' || el.value?.classList.contains('click'))
     active.value = false
 })
 
 function onClick() {
-  if (props.trigger === 'click' || isMobile.value)
+  if (plot.value.trigger === 'click' || el.value?.classList.contains('click'))
     active.value = !active.value
 }
 </script>
@@ -64,8 +49,7 @@ function onClick() {
   <span
     ref="el"
     class="vp-plot"
-    :class="{ hover: options.trigger !== 'click', active }"
-    :style="styles"
+    :class="[{ active }, ...classes]"
     @click="onClick"
   >
     <slot />
@@ -73,25 +57,39 @@ function onClick() {
 </template>
 
 <style>
+:root {
+  --vp-plot-bg: var(--vp-c-text-1);
+  --vp-plot-c-text: var(--vp-c-neutral-inverse);
+  --vp-plot-blur: 0.2rem;
+}
+
 .vp-plot {
   padding-right: 2px;
   padding-left: 2px;
-  color: transparent;
-  background-color: var(--vp-c-bg-plot-light, #000);
-  transition: color ease 0.25s, background-color ease 0.25s;
 }
 
-[data-theme="dark"] .vp-plot {
-  background-color: var(--vp-c-bg-plot-dark, #fff);
+.vp-plot.click {
+  cursor: pointer;
+}
+
+.vp-plot:where(.blur) {
+  filter: blur(var(--vp-plot-blur));
+  transition: filter var(--vp-t-color);
+}
+
+.vp-plot:where(.mask) {
+  color: transparent;
+  background-color: var(--vp-plot-bg);
+  transition: color var(--vp-t-color), background-color var(--vp-t-color);
 }
 
-.vp-plot.hover:hover,
-.vp-plot.active {
-  color: var(--vp-c-plot-light, #fff);
+.vp-plot:where(.blur.hover):hover,
+.vp-plot:where(.blur).active {
+  filter: blur(0);
 }
 
-[data-theme="dark"] .vp-plot.hover:hover,
-[data-theme="dark"] .vp-plot.active {
-  color: var(--vp-c-plot-dark, #000);
+.vp-plot:where(.mask.hover):hover,
+.vp-plot:where(.mask).active {
+  color: var(--vp-plot-c-text);
 }
 </style>

package/lib/client/components/VPField.vue

@@ -4,15 +4,17 @@ defineProps<{
   type?: string
   required?: boolean
   optional?: boolean
+  deprecated?: boolean
   defaultValue?: string
 }>()
 </script>
 
 <template>
-  <div class="vp-field">
+  <div class="vp-field" :class="{ required, optional, deprecated }">
     <p class="field-meta">
       <span class="name">{{ name }}</span>
       <span v-if="required || optional" :class="{ required, optional }">{{ required ? 'Required' : optional ? 'Optional' : '' }}</span>
+      <span v-if="deprecated" class="deprecated">Deprecated</span>
       <span v-if="type" class="type"><code>{{ type }}</code></span>
     </p>
     <p v-if="defaultValue" class="default-value">
@@ -48,8 +50,13 @@ defineProps<{
   font-weight: 500;
 }
 
+.vp-field.deprecated .field-meta .name {
+  text-decoration: line-through;
+}
+
 .vp-field .field-meta .required,
-.vp-field .field-meta .optional {
+.vp-field .field-meta .optional,
+.vp-field .field-meta .deprecated {
   display: inline-block;
   padding: 2px 8px;
   font-size: 12px;
@@ -68,6 +75,11 @@ defineProps<{
   border: solid 1px var(--vp-c-divider);
 }
 
+.vp-field .field-meta .deprecated {
+  color: var(--vp-c-danger-2);
+  border: solid 1px var(--vp-c-danger-2);
+}
+
 .vp-field .field-meta .type {
   flex: 1 2;
   text-align: right;
@@ -76,7 +88,8 @@ defineProps<{
 .vp-field .default-value {
   margin: 0;
   font-size: 14px;
-  line-height: 1;
+  line-height: 1.7;
+  transform: translateY(-4px);
 }
 
 .vp-field .description :where(p, ul, ol) {

package/lib/client/components/{Youtube.vue → VPVideoEmbed.vue}

@@ -5,6 +5,7 @@ import { useSize } from '../composables/size.js'
 const props = defineProps<{
   src: string
   title: string
+  type?: string
   width?: string
   height?: string
   ratio?: string
@@ -21,9 +22,9 @@ const { el, width, height, resize } = useSize(options)
   <ClientOnly>
     <iframe
       ref="el"
-      class="video-youtube-iframe"
+      class="video-iframe" :class="type"
       :src="src"
-      :title="title || 'Youtube'"
+      :title="title || type"
       :style="{ width, height }"
       :allow="IFRAME_ALLOW"
       @load="resize"
@@ -32,7 +33,7 @@ const { el, width, height, resize } = useSize(options)
 </template>
 
 <style>
-.video-youtube-iframe {
+.video-iframe {
   width: 100%;
   margin: 16px auto;
   border: none;

package/lib/node/index.d.ts

@@ -186,32 +186,22 @@ interface PDFOptions {
 }
 //#endregion
 //#region src/shared/plot.d.ts
+/**
+* 是否启用 `!! !!`  markdown （该标记为非标准标记，脱离插件将不生效）
+*/
 interface PlotOptions {
-  /**
-  * 是否启用 `!! !!`  markdown （该标记为非标准标记，脱离插件将不生效）
-  * @default true
-  */
-  tag?: boolean;
-  /**
-  * 遮罩层颜色
-  */
-  mask?: string | {
-    light: string;
-    dark: string;
-  };
-  /**
-  * 文本颜色
-  */
-  color?: string | {
-    light: string;
-    dark: string;
-  };
   /**
   * 触发方式
   *
   * @default 'hover'
   */
   trigger?: "hover" | "click";
+  /**
+  * 遮罩层效果
+  *
+  * @default 'mask'
+  */
+  effect?: "mask" | "blur";
 }
 //#endregion
 //#region src/shared/codeTree.d.ts
@@ -358,6 +348,14 @@ interface MarkdownPowerPluginOptions {
   field?: boolean;
   // video embed
   /**
+  * 是否启用 acfun 视频嵌入
+  *
+  * `@[acfun](acid)`
+  *
+  * @default false
+  */
+  acfun?: boolean;
+  /**
   * 是否启用 bilibili 视频嵌入
   *
   * `@[bilibili](bid)`
@@ -486,6 +484,10 @@ interface VideoOptions {
   bilibili?: boolean;
   youtube?: boolean;
 }
+interface AcFunTokenMeta extends SizeOptions {
+  title?: string;
+  id: string;
+}
 interface BilibiliTokenMeta extends SizeOptions {
   title?: string;
   bvid?: string;
@@ -527,4 +529,4 @@ declare function resolveImageSize(app: App, url: string, remote?: boolean): Prom
 //#region src/node/plugin.d.ts
 declare function markdownPowerPlugin(options?: MarkdownPowerPluginOptions): Plugin;
 //#endregion
-export { ArtPlayerTokenMeta, BilibiliTokenMeta, CanIUseMode, CanIUseOptions, CanIUseTokenMeta, CodeSandboxTokenMeta, CodeTabsOptions, CodepenTokenMeta, DemoContainerRender, DemoFile, DemoMeta, FileTreeIconMode, FileTreeOptions, FontAwesomeAssetBuiltIn, FontAwesomePrefix, FontAwesomeProvider, IconAssetLink, IconFontProvider, IconOptions, IconProviderBase, IconifyPrefix, IconifyProvider, JSFiddleTokenMeta, LiteralUnion, MarkdownDemoEnv, MarkdownPowerPluginOptions, NpmToOptions, NpmToPackageManager, PDFEmbedType, PDFOptions, PDFTokenMeta, PlotOptions, ReplEditorData, ReplOptions, ReplitTokenMeta, SizeOptions, ThemeOptions, VideoOptions, YoutubeTokenMeta, createCodeTabIconGetter, markdownPowerPlugin, resolveImageSize };
+export { AcFunTokenMeta, ArtPlayerTokenMeta, BilibiliTokenMeta, CanIUseMode, CanIUseOptions, CanIUseTokenMeta, CodeSandboxTokenMeta, CodeTabsOptions, CodepenTokenMeta, DemoContainerRender, DemoFile, DemoMeta, FileTreeIconMode, FileTreeOptions, FontAwesomeAssetBuiltIn, FontAwesomePrefix, FontAwesomeProvider, IconAssetLink, IconFontProvider, IconOptions, IconProviderBase, IconifyPrefix, IconifyProvider, JSFiddleTokenMeta, LiteralUnion, MarkdownDemoEnv, MarkdownPowerPluginOptions, NpmToOptions, NpmToPackageManager, PDFEmbedType, PDFOptions, PDFTokenMeta, PlotOptions, ReplEditorData, ReplOptions, ReplitTokenMeta, SizeOptions, ThemeOptions, VideoOptions, YoutubeTokenMeta, createCodeTabIconGetter, markdownPowerPlugin, resolveImageSize };

package/lib/node/index.js

@@ -9,7 +9,7 @@ import imageSize from "image-size";
 import { colors, fs, getDirname, logger, ora, path } from "vuepress/utils";
 import path$1 from "node:path";
 import { globSync } from "tinyglobby";
-import { isLinkHttp as isLinkHttp$1, removeEndingSlash, removeLeadingSlash } from "vuepress/shared";
+import { isLinkHttp as isLinkHttp$1, isLinkWithProtocol, removeEndingSlash, removeLeadingSlash } from "vuepress/shared";
 import fs$1, { promises } from "node:fs";
 import process from "node:process";
 import container from "markdown-it-container";
@@ -17,6 +17,8 @@ import { isPackageExists, resolveModule } from "local-pkg";
 import { LRUCache } from "lru-cache";
 import { watch } from "chokidar";
 import { customAlphabet } from "nanoid";
+import { removeLeadingSlash as removeLeadingSlash$1 } from "@vuepress/shared";
+import { path as path$2 } from "@vuepress/utils";
 import { attrs } from "@mdit/plugin-attrs";
 import { footnote } from "@mdit/plugin-footnote";
 import { mark } from "@mdit/plugin-mark";
@@ -968,7 +970,7 @@ function resolveAttrs(info) {
 	};
 }
 function resolveAttr(info, key) {
-	const pattern = new RegExp(`(?:^|\\s+)${key}(?:=(?<quote>['"])(?<valueWithQuote>.+?)\\k<quote>|=(?<valueWithoutQuote>\\S+))?(?:\\s+|$)`);
+	const pattern = /* @__PURE__ */ new RegExp(`(?:^|\\s+)${key}(?:=(?<quote>['"])(?<valueWithQuote>.+?)\\k<quote>|=(?<valueWithoutQuote>\\S+))?(?:\\s+|$)`);
 	const groups = info.match(pattern)?.groups;
 	return groups?.valueWithQuote || groups?.valueWithoutQuote;
 }
@@ -1113,18 +1115,25 @@ function fetchImageSize(src) {
 			for await (const chunk of stream) {
 				chunks.push(chunk);
 				try {
-					const { width: width$1, height: height$1 } = imageSize(Buffer.concat(chunks));
-					if (width$1 && height$1) return resolve({
-						width: width$1,
-						height: height$1
+					const { width, height } = imageSize(Buffer.concat(chunks));
+					if (width && height) return resolve({
+						width,
+						height
 					});
 				} catch {}
 			}
-			const { width, height } = imageSize(Buffer.concat(chunks));
-			resolve({
-				width,
-				height
-			});
+			try {
+				const { width, height } = imageSize(Buffer.concat(chunks));
+				resolve({
+					width,
+					height
+				});
+			} catch {
+				resolve({
+					width: 0,
+					height: 0
+				});
+			}
 		}).on("error", () => resolve({
 			width: 0,
 			height: 0
@@ -1144,13 +1153,13 @@ async function resolveImageSize(app, url, remote = false) {
 	if (isLinkHttp(url) && remote) return await fetchImageSize(url);
 	if (url[0] === "/") {
 		const filepath$1 = app.dir.public(url.slice(1));
-		if (fs.existsSync(filepath$1)) {
+		if (fs.existsSync(filepath$1)) try {
 			const { width, height } = imageSize(fs.readFileSync(filepath$1));
 			return {
 				width,
 				height
 			};
-		}
+		} catch {}
 	}
 	return {
 		width: 0,
@@ -1746,11 +1755,12 @@ function fieldPlugin(md) {
 	createContainerPlugin(md, "field", {
 		before: (info) => {
 			const { attrs: attrs$1 } = resolveAttrs(info);
-			const { name, type, required, optional, default: defaultValue } = attrs$1;
+			const { name, type, required, optional, deprecated, default: defaultValue } = attrs$1;
 			const props = stringifyAttrs({
 				name,
 				required,
-				optional
+				optional,
+				deprecated
 			});
 			return `<VPField${props}${!isUndefined(type) ? ` type="${type}"` : ""}${!isUndefined(defaultValue) ? ` default-value="${defaultValue}"` : ""}>`;
 		},
@@ -2667,8 +2677,8 @@ function importer(func) {
 //#endregion
 //#region src/node/demo/supports/insertScript.ts
 const SCRIPT_RE$1 = /<script.*?>/;
-function insertSetupScript({ export: name, path: path$2 }, env) {
-	const imports = `import ${name ? `${name} from ` : ""}'${path$2}';`;
+function insertSetupScript({ export: name, path: path$3 }, env) {
+	const imports = `import ${name ? `${name} from ` : ""}'${path$3}';`;
 	const scriptSetup = env.sfcBlocks.scriptSetup ??= {
 		type: "script",
 		content: "<script setup>\n</script>",
@@ -2716,39 +2726,39 @@ const tasks = {};
 const target$2 = "md-power/demo/watcher.txt";
 function demoWatcher(app, watchers) {
 	if (!watcher) watcher = watch([], { ignoreInitial: true });
-	Object.keys(tasks).forEach((path$2) => {
-		watcher.add(path$2);
+	Object.keys(tasks).forEach((path$3) => {
+		watcher.add(path$3);
 	});
 	const code = readFileSync(app.dir.temp(target$2));
 	if (code) {
 		const paths = JSON.parse(code || "{}");
-		Object.entries(paths).forEach(([path$2, output]) => {
-			watcher.add(path$2);
-			tasks[path$2] = output;
+		Object.entries(paths).forEach(([path$3, output]) => {
+			watcher.add(path$3);
+			tasks[path$3] = output;
 		});
 	}
 	updateWatchFiles(app);
-	watcher.on("change", (path$2) => {
-		if (tasks[path$2]) {
-			const code$1 = readFileSync(path$2);
+	watcher.on("change", (path$3) => {
+		if (tasks[path$3]) {
+			const code$1 = readFileSync(path$3);
 			if (code$1 === false) return;
 			const source = parseEmbedCode(code$1);
-			compileCode(source, tasks[path$2]);
+			compileCode(source, tasks[path$3]);
 		}
 	});
-	watcher.on("unlink", (path$2) => {
-		delete tasks[path$2];
-		watcher.unwatch(path$2);
+	watcher.on("unlink", (path$3) => {
+		delete tasks[path$3];
+		watcher.unwatch(path$3);
 	});
 	watchers.push({ close: () => {
 		watcher.close();
 		watcher = null;
 	} });
 }
-function addTask(app, path$2, output) {
-	if (tasks[path$2]) return;
-	tasks[path$2] = output;
-	if (watcher) watcher.add(path$2);
+function addTask(app, path$3, output) {
+	if (tasks[path$3]) return;
+	tasks[path$3] = output;
+	if (watcher) watcher.add(path$3);
 	updateWatchFiles(app);
 }
 async function updateWatchFiles(app) {
@@ -3161,8 +3171,8 @@ function getContainerMeta(info) {
 function extendsPageWithDemo(page) {
 	const markdownEnv = page.markdownEnv;
 	const demoFiles = markdownEnv.demoFiles ?? [];
-	page.deps.push(...demoFiles.filter(({ type }) => type === "markdown").map(({ path: path$2 }) => path$2));
-	(page.frontmatter.gitInclude ??= []).push(...demoFiles.filter(({ gitignore }) => !gitignore).map(({ path: path$2 }) => path$2));
+	page.deps.push(...demoFiles.filter(({ type }) => type === "markdown").map(({ path: path$3 }) => path$3));
+	(page.frontmatter.gitInclude ??= []).push(...demoFiles.filter(({ gitignore }) => !gitignore).map(({ path: path$3 }) => path$3));
 }
 
 //#endregion
@@ -3429,6 +3439,39 @@ const pdfPlugin = (md) => {
 	});
 };
 
+//#endregion
+//#region src/node/embed/video/acfun.ts
+const AC_FUN_LINK = "https://www.acfun.cn/player";
+const acfunPlugin = (md) => {
+	createEmbedRuleBlock(md, {
+		type: "acfun",
+		name: "video_acfun",
+		syntaxPattern: /^@\[acfun([^\]]*)\]\(([^)]*)\)/,
+		meta([, info, id]) {
+			const { attrs: attrs$1 } = resolveAttrs(info);
+			return {
+				id,
+				title: attrs$1.title || "AcFun",
+				width: attrs$1.width ? parseRect(attrs$1.width) : "100%",
+				height: attrs$1.height ? parseRect(attrs$1.height) : void 0,
+				ratio: attrs$1.ratio ?? "16:10"
+			};
+		},
+		content(meta) {
+			const { id, width, height, ratio, title } = meta;
+			const src = `${AC_FUN_LINK}/${id}`;
+			return `<VPVideoEmbed${stringifyAttrs({
+				src,
+				width,
+				height,
+				ratio,
+				title,
+				type: "acfun"
+			})} />`;
+		}
+	});
+};
+
 //#endregion
 //#region src/node/embed/video/artPlayer.ts
 const installed = {
@@ -3533,10 +3576,10 @@ const bilibiliPlugin = (md) => {
 				cid,
 				autoplay: attrs$1.autoplay ?? false,
 				time: timeToSeconds(attrs$1.time),
-				title: attrs$1.title,
+				title: attrs$1.title || "Bilibili",
 				width: attrs$1.width ? parseRect(attrs$1.width) : "100%",
 				height: attrs$1.height ? parseRect(attrs$1.height) : void 0,
-				ratio: attrs$1.ratio ? parseRect(attrs$1.ratio) : void 0
+				ratio: attrs$1.ratio
 			};
 		},
 		content(meta) {
@@ -3548,14 +3591,15 @@ const bilibiliPlugin = (md) => {
 			if (meta.time) params.set("t", meta.time.toString());
 			params.set("autoplay", meta.autoplay ? "1" : "0");
 			params.set("high_quality", "1");
-			const source = `${BILIBILI_LINK}?${params.toString()}`;
+			const src = `${BILIBILI_LINK}?${params.toString()}`;
 			const { width, height, ratio, title } = meta;
-			return `<VideoBilibili${stringifyAttrs({
-				src: source,
+			return `<VPVideoEmbed${stringifyAttrs({
+				src,
 				width,
 				height,
 				ratio,
-				title
+				title,
+				type: "bilibili"
 			})} />`;
 		}
 	});
@@ -3577,10 +3621,10 @@ const youtubePlugin = (md) => {
 				loop: attrs$1.loop ?? false,
 				start: timeToSeconds(attrs$1.start),
 				end: timeToSeconds(attrs$1.end),
-				title: attrs$1.title,
+				title: attrs$1.title || "YouTube",
 				width: attrs$1.width ? parseRect(attrs$1.width) : "100%",
 				height: attrs$1.height ? parseRect(attrs$1.height) : void 0,
-				ratio: attrs$1.ratio ? parseRect(attrs$1.ratio) : void 0
+				ratio: attrs$1.ratio
 			};
 		},
 		content(meta) {
@@ -3589,14 +3633,15 @@ const youtubePlugin = (md) => {
 			if (meta.loop) params.set("loop", "1");
 			if (meta.start) params.set("start", meta.start.toString());
 			if (meta.end) params.set("end", meta.end.toString());
-			const source = `${YOUTUBE_LINK}/${meta.id}?${params.toString()}`;
+			const src = `${YOUTUBE_LINK}/${meta.id}?${params.toString()}`;
 			const { width, height, ratio, title } = meta;
-			return `<VideoYoutube${stringifyAttrs({
-				src: source,
+			return `<VPVideoEmbed${stringifyAttrs({
+				src,
 				width,
 				height,
 				ratio,
-				title
+				title,
+				type: "youtube"
 			})} />`;
 		}
 	});
@@ -3611,6 +3656,7 @@ function embedSyntaxPlugin(md, options) {
 		legacyCaniuse(md, caniuse);
 	}
 	if (options.pdf) md.use(pdfPlugin);
+	if (options.acfun) md.use(acfunPlugin);
 	if (options.bilibili) md.use(bilibiliPlugin);
 	if (options.youtube) md.use(youtubePlugin);
 	if (options.artPlayer) md.use(artPlayerPlugin);
@@ -3655,7 +3701,7 @@ function parseSource(source) {
 	};
 	else {
 		const end = source.indexOf(`\n${char}`);
-		const len = char.length + 1;
+		const len = 4;
 		return {
 			matter: source.slice(0, end + len),
 			content: source.slice(end + len)
@@ -3663,6 +3709,81 @@ function parseSource(source) {
 	}
 }
 
+//#endregion
+//#region src/node/enhance/links.ts
+function linksPlugin(md) {
+	const externalAttrs = {
+		target: "_blank",
+		rel: "noopener noreferrer"
+	};
+	let hasOpenInternalLink = false;
+	const internalTag = "VPLink";
+	function handleLinkOpen(tokens, idx, env) {
+		hasOpenInternalLink = false;
+		const token = tokens[idx];
+		const hrefIndex = token.attrIndex("href");
+		/* istanbul ignore if -- @preserve */
+		if (hrefIndex < 0) return;
+		const hrefAttr = token.attrs[hrefIndex];
+		const hrefLink = hrefAttr[1];
+		if (isLinkWithProtocol(hrefLink)) {
+			Object.entries(externalAttrs).forEach(([key, val]) => {
+				token.attrSet(key, val);
+			});
+			return;
+		}
+		if (hrefLink[0] === "#") return;
+		hasOpenInternalLink = true;
+		token.tag = internalTag;
+		const matched = hrefLink.match(/^([^#?]*?(?:\/|\.md|\.html))([#?].*)?$/);
+		if (matched) {
+			const rawPath = matched[1];
+			const { absolutePath, relativePath } = resolvePaths(rawPath, env.base || "/", env.filePathRelative ?? null);
+			(env.links ??= []).push({
+				raw: rawPath,
+				absolute: absolutePath,
+				relative: relativePath
+			});
+		}
+	}
+	md.renderer.rules.link_open = (tokens, idx, opts, env, self) => {
+		handleLinkOpen(tokens, idx, env);
+		return self.renderToken(tokens, idx, opts);
+	};
+	md.renderer.rules.link_close = (tokens, idx, opts, _env, self) => {
+		if (hasOpenInternalLink) {
+			hasOpenInternalLink = false;
+			tokens[idx].tag = internalTag;
+		}
+		return self.renderToken(tokens, idx, opts);
+	};
+}
+/**
+* Resolve relative and absolute paths according to the `base` and `filePathRelative`
+*/
+function resolvePaths(rawPath, base, filePathRelative) {
+	let absolutePath;
+	let relativePath;
+	if (rawPath.startsWith("/")) if (rawPath.endsWith(".md")) {
+		absolutePath = path$2.join(base, rawPath);
+		relativePath = removeLeadingSlash$1(rawPath);
+	} else {
+		absolutePath = rawPath;
+		relativePath = path$2.relative(base, absolutePath);
+	}
+	else if (filePathRelative) {
+		relativePath = path$2.join(path$2.dirname(encodeURI(filePathRelative)), rawPath);
+		absolutePath = path$2.join(base, relativePath);
+	} else {
+		relativePath = rawPath.replace(/^(?:\.\/)?(.*)$/, "$1");
+		absolutePath = null;
+	}
+	return {
+		absolutePath,
+		relativePath
+	};
+}
+
 //#endregion
 //#region src/node/icon/createIconRule.ts
 function createIconRule([l1, l2, r1, r2], deprecated) {
@@ -3878,7 +3999,7 @@ const abbrPlugin = (md) => {
 		const { abbreviations } = state.env;
 		if (!abbreviations) return;
 		const abbreviationsRegExpText = Object.keys(abbreviations).map((x) => x.substring(1)).sort((a, b) => b.length - a.length).map(escapeRE).join("|");
-		const regexpSimple = new RegExp(`(?:${abbreviationsRegExpText})`);
+		const regexpSimple = /* @__PURE__ */ new RegExp(`(?:${abbreviationsRegExpText})`);
 		const regExp = new RegExp(`(^|${WORDING_REGEXP_TEXT})(${abbreviationsRegExpText})($|${WORDING_REGEXP_TEXT})`, "g");
 		for (const token of tokens) {
 			if (token.type !== "inline") continue;
@@ -4024,18 +4145,18 @@ const plotDef = (state, silent) => {
 	const content = state.src.slice(start + 2, state.pos);
 	state.posMax = state.pos;
 	state.pos = start + 2;
-	const token = state.push("plot_inline", "Plot", 0);
-	token.markup = "!!";
-	token.content = content;
+	const openToken = state.push("plot_inline_open", "Plot", 1);
+	openToken.markup = "!!";
+	openToken.content = content;
+	const contentToken = state.push("text", "", 0);
+	contentToken.content = content;
+	const closeToken = state.push("plot_inline_close", "Plot", -1);
+	closeToken.markup = "!!";
 	state.pos = state.posMax + 2;
 	state.posMax = max;
 	return true;
 };
 const plotPlugin = (md) => {
-	md.renderer.rules.plot_inline = (tokens, idx) => {
-		const token = tokens[idx];
-		return `<Plot>${token.content}</Plot>`;
-	};
 	md.inline.ruler.before("emphasis", "plot", plotDef);
 };
 
@@ -4081,13 +4202,9 @@ async function prepareConfigFile(app, options) {
 		imports.add(`import PDFViewer from '${CLIENT_FOLDER}components/PDFViewer.vue'`);
 		enhances.add(`app.component('PDFViewer', PDFViewer)`);
 	}
-	if (options.bilibili) {
-		imports.add(`import Bilibili from '${CLIENT_FOLDER}components/Bilibili.vue'`);
-		enhances.add(`app.component('VideoBilibili', Bilibili)`);
-	}
-	if (options.youtube) {
-		imports.add(`import Youtube from '${CLIENT_FOLDER}components/Youtube.vue'`);
-		enhances.add(`app.component('VideoYoutube', Youtube)`);
+	if (options.acfun || options.bilibili || options.youtube) {
+		imports.add(`import VPVideoEmbed from '${CLIENT_FOLDER}components/VPVideoEmbed.vue'`);
+		enhances.add(`app.component('VPVideoEmbed', VPVideoEmbed)`);
 	}
 	if (options.codepen) {
 		imports.add(`import CodePen from '${CLIENT_FOLDER}components/CodePen.vue'`);
@@ -4224,6 +4341,7 @@ function markdownPowerPlugin(options = {}) {
 			]);
 		},
 		extendsMarkdown: async (md, app) => {
+			linksPlugin(md);
 			docsTitlePlugin(md);
 			embedSyntaxPlugin(md, options);
 			inlineSyntaxPlugin(md, options);

package/lib/shared/index.d.ts

@@ -184,32 +184,22 @@ interface PDFOptions {
 }
 //#endregion
 //#region src/shared/plot.d.ts
+/**
+* 是否启用 `!! !!`  markdown （该标记为非标准标记，脱离插件将不生效）
+*/
 interface PlotOptions {
-  /**
-  * 是否启用 `!! !!`  markdown （该标记为非标准标记，脱离插件将不生效）
-  * @default true
-  */
-  tag?: boolean;
-  /**
-  * 遮罩层颜色
-  */
-  mask?: string | {
-    light: string;
-    dark: string;
-  };
-  /**
-  * 文本颜色
-  */
-  color?: string | {
-    light: string;
-    dark: string;
-  };
   /**
   * 触发方式
   *
   * @default 'hover'
   */
   trigger?: "hover" | "click";
+  /**
+  * 遮罩层效果
+  *
+  * @default 'mask'
+  */
+  effect?: "mask" | "blur";
 }
 //#endregion
 //#region src/shared/codeTree.d.ts
@@ -356,6 +346,14 @@ interface MarkdownPowerPluginOptions {
   field?: boolean;
   // video embed
   /**
+  * 是否启用 acfun 视频嵌入
+  *
+  * `@[acfun](acid)`
+  *
+  * @default false
+  */
+  acfun?: boolean;
+  /**
   * 是否启用 bilibili 视频嵌入
   *
   * `@[bilibili](bid)`
@@ -484,6 +482,10 @@ interface VideoOptions {
   bilibili?: boolean;
   youtube?: boolean;
 }
+interface AcFunTokenMeta extends SizeOptions {
+  title?: string;
+  id: string;
+}
 interface BilibiliTokenMeta extends SizeOptions {
   title?: string;
   bvid?: string;
@@ -512,4 +514,4 @@ interface ArtPlayerTokenMeta extends SizeOptions {
   type?: string;
 }
 //#endregion
-export { ArtPlayerTokenMeta, BilibiliTokenMeta, CanIUseMode, CanIUseOptions, CanIUseTokenMeta, CodeSandboxTokenMeta, CodeTabsOptions, CodepenTokenMeta, DemoContainerRender, DemoFile, DemoMeta, FileTreeIconMode, FileTreeOptions, FontAwesomeAssetBuiltIn, FontAwesomePrefix, FontAwesomeProvider, IconAssetLink, IconFontProvider, IconOptions, IconProviderBase, IconifyPrefix, IconifyProvider, JSFiddleTokenMeta, LiteralUnion, MarkdownDemoEnv, MarkdownPowerPluginOptions, NpmToOptions, NpmToPackageManager, PDFEmbedType, PDFOptions, PDFTokenMeta, PlotOptions, ReplEditorData, ReplOptions, ReplitTokenMeta, SizeOptions, ThemeOptions, VideoOptions, YoutubeTokenMeta };
+export { AcFunTokenMeta, ArtPlayerTokenMeta, BilibiliTokenMeta, CanIUseMode, CanIUseOptions, CanIUseTokenMeta, CodeSandboxTokenMeta, CodeTabsOptions, CodepenTokenMeta, DemoContainerRender, DemoFile, DemoMeta, FileTreeIconMode, FileTreeOptions, FontAwesomeAssetBuiltIn, FontAwesomePrefix, FontAwesomeProvider, IconAssetLink, IconFontProvider, IconOptions, IconProviderBase, IconifyPrefix, IconifyProvider, JSFiddleTokenMeta, LiteralUnion, MarkdownDemoEnv, MarkdownPowerPluginOptions, NpmToOptions, NpmToPackageManager, PDFEmbedType, PDFOptions, PDFTokenMeta, PlotOptions, ReplEditorData, ReplOptions, ReplitTokenMeta, SizeOptions, ThemeOptions, VideoOptions, YoutubeTokenMeta };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuepress-plugin-md-power",
   "type": "module",
-  "version": "1.0.0-rc.153",
+  "version": "1.0.0-rc.155",
   "description": "The Plugin for VuePress 2 - markdown power",
   "author": "pengzhanbo <volodymyr@foxmail.com>",
   "license": "MIT",
@@ -39,8 +39,8 @@
     "markdown-it": "^14.1.0",
     "mpegts.js": "^1.7.3",
     "pyodide": "^0.27.7",
-    "sass": "^1.89.1",
-    "sass-embedded": "^1.89.1",
+    "sass": "^1.89.2",
+    "sass-embedded": "^1.89.2",
     "stylus": "^0.64.0",
     "vuepress": "2.0.0-rc.23"
   },
@@ -54,6 +54,9 @@
     "hls.js": {
       "optional": true
     },
+    "less": {
+      "optional": true
+    },
     "markdown-it": {
       "optional": true
     },
@@ -62,30 +65,39 @@
     },
     "pyodide": {
       "optional": true
+    },
+    "sass": {
+      "optional": true
+    },
+    "sass-embedded": {
+      "optional": true
+    },
+    "stylus": {
+      "optional": true
     }
   },
   "dependencies": {
-    "@mdit/plugin-attrs": "^0.21.0",
-    "@mdit/plugin-footnote": "^0.21.0",
-    "@mdit/plugin-mark": "^0.21.0",
-    "@mdit/plugin-sub": "^0.21.0",
-    "@mdit/plugin-sup": "^0.21.0",
-    "@mdit/plugin-tab": "^0.21.0",
-    "@mdit/plugin-tasklist": "^0.21.0",
+    "@mdit/plugin-attrs": "^0.23.1",
+    "@mdit/plugin-footnote": "^0.22.2",
+    "@mdit/plugin-mark": "^0.22.1",
+    "@mdit/plugin-sub": "^0.22.1",
+    "@mdit/plugin-sup": "^0.22.1",
+    "@mdit/plugin-tab": "^0.22.2",
+    "@mdit/plugin-tasklist": "^0.22.1",
     "@pengzhanbo/utils": "^2.1.0",
-    "@vuepress/helper": "2.0.0-rc.108",
-    "@vueuse/core": "^13.3.0",
-    "chokidar": "3.6.0",
+    "@vuepress/helper": "2.0.0-rc.110",
+    "@vueuse/core": "^13.4.0",
+    "chokidar": "4.0.3",
     "image-size": "^2.0.2",
     "local-pkg": "^1.1.1",
     "lru-cache": "^11.1.0",
     "markdown-it-container": "^4.0.0",
     "nanoid": "^5.1.5",
-    "shiki": "^3.6.0",
+    "shiki": "^3.7.0",
     "tinyglobby": "0.2.13",
     "tm-grammars": "^1.23.26",
     "tm-themes": "^1.10.6",
-    "vue": "^3.5.16"
+    "vue": "^3.5.17"
   },
   "devDependencies": {
     "@types/markdown-it": "^14.1.2",

package/lib/client/components/Bilibili.vue

@@ -1,45 +0,0 @@
-<script setup lang="ts">
-import { toRefs } from 'vue'
-import { useSize } from '../composables/size.js'
-
-const props = defineProps<{
-  src: string
-  title: string
-  width?: string
-  height?: string
-  ratio?: string
-}>()
-
-const IFRAME_ALLOW = 'accelerometer; autoplay; clipboard-write; encrypted-media; fullscreen; gyroscope; picture-in-picture'
-
-const options = toRefs(props)
-
-const { el, width, height, resize } = useSize(options)
-
-function onLoad() {
-  resize()
-}
-</script>
-
-<template>
-  <ClientOnly>
-    <iframe
-      ref="el"
-      class="video_bilibili_iframe"
-      :src="src"
-      :title="title || 'Bilibili'"
-      :style="{ width, height }"
-      :allow="IFRAME_ALLOW"
-      @load="onLoad"
-    />
-  </ClientOnly>
-</template>
-
-<style>
-.video_bilibili_iframe {
-  width: 100%;
-  margin: 16px auto;
-  border: none;
-  border-radius: 5px;
-}
-</style>