vuepress-plugin-md-power 1.0.0-rc.170 → 1.0.0-rc.172

package/lib/client/composables/mark.d.ts

@@ -0,0 +1,4 @@
+//#region src/client/composables/mark.d.ts
+declare function setupMarkHighlight(mode: 'lazy' | 'eager'): void;
+//#endregion
+export { setupMarkHighlight };

package/lib/client/composables/mark.js

@@ -0,0 +1,108 @@
+import { onBeforeUnmount, onMounted } from "vue";
+import { onContentUpdated, useRouter } from "vuepress/client";
+
+//#region src/client/composables/mark.ts
+const MARK_MODE_ATTR = "data-mark-mode";
+const MARK_MODE_LAZY = "lazy";
+const MARK_VISIBLE_CLASS = "vp-mark-visible";
+const MARK_BOUND_ATTR = "data-vp-mark-bound";
+const MARK_SELECTOR = ".vp-doc mark";
+const DOC_SELECTOR = ".vp-doc";
+const BOUND_SELECTOR = `${MARK_SELECTOR}[${MARK_BOUND_ATTR}="1"]`;
+function setupMarkHighlight(mode) {
+	if (typeof window === "undefined" || __VUEPRESS_SSR__) return;
+	const root = document.documentElement;
+	if (mode !== MARK_MODE_LAZY) {
+		root.removeAttribute(MARK_MODE_ATTR);
+		return;
+	}
+	root.setAttribute(MARK_MODE_ATTR, MARK_MODE_LAZY);
+	let intersectionObserver = null;
+	let mutationObserver = null;
+	let rafId = null;
+	let removeAfterEach = null;
+	const ensureObserver = () => {
+		if (!intersectionObserver) intersectionObserver = new IntersectionObserver((entries, obs) => {
+			for (const entry of entries) {
+				if (!entry.isIntersecting && entry.intersectionRatio <= 0) continue;
+				const target = entry.target;
+				target.classList.add(MARK_VISIBLE_CLASS);
+				target.removeAttribute(MARK_BOUND_ATTR);
+				obs.unobserve(target);
+			}
+		}, {
+			threshold: [
+				0,
+				.1,
+				.25,
+				.5
+			],
+			rootMargin: "8% 0px -8% 0px"
+		});
+		return intersectionObserver;
+	};
+	const bindMarks = () => {
+		const marks = Array.from(document.querySelectorAll(MARK_SELECTOR)).filter((mark) => mark instanceof HTMLElement && !mark.classList.contains(MARK_VISIBLE_CLASS) && mark.getAttribute(MARK_BOUND_ATTR) !== "1");
+		if (marks.length === 0) return;
+		const observer = ensureObserver();
+		for (const mark of marks) {
+			mark.setAttribute(MARK_BOUND_ATTR, "1");
+			observer.observe(mark);
+		}
+	};
+	const scheduleBind = () => {
+		if (rafId !== null) cancelAnimationFrame(rafId);
+		rafId = requestAnimationFrame(() => {
+			rafId = null;
+			bindMarks();
+		});
+	};
+	const observeDocMutations = () => {
+		const doc = document.querySelector(DOC_SELECTOR);
+		if (!doc) return;
+		if (mutationObserver) mutationObserver.disconnect();
+		mutationObserver = new MutationObserver((mutations) => {
+			if (mutations.some((mutation) => mutation.addedNodes.length > 0)) scheduleBind();
+		});
+		mutationObserver.observe(doc, {
+			childList: true,
+			subtree: true
+		});
+	};
+	const resetObserver = () => {
+		document.querySelectorAll(BOUND_SELECTOR).forEach((mark) => {
+			if (!mark.classList.contains(MARK_VISIBLE_CLASS)) mark.removeAttribute(MARK_BOUND_ATTR);
+		});
+		if (intersectionObserver) {
+			intersectionObserver.disconnect();
+			intersectionObserver = null;
+		}
+	};
+	const router = useRouter();
+	onMounted(() => {
+		observeDocMutations();
+		scheduleBind();
+	});
+	onContentUpdated(() => {
+		resetObserver();
+		observeDocMutations();
+		scheduleBind();
+	});
+	if (router?.afterEach) removeAfterEach = router.afterEach(() => {
+		resetObserver();
+		observeDocMutations();
+		scheduleBind();
+	});
+	if (router?.isReady) router.isReady().then(() => scheduleBind()).catch(() => {});
+	onBeforeUnmount(() => {
+		if (rafId !== null) cancelAnimationFrame(rafId);
+		resetObserver();
+		mutationObserver?.disconnect();
+		mutationObserver = null;
+		removeAfterEach?.();
+		removeAfterEach = null;
+	});
+}
+
+//#endregion
+export { setupMarkHighlight };

package/lib/client/composables/pdf.js

@@ -1,6 +1,6 @@
 import { ensureEndingSlash, isLinkHttp } from "vuepress/shared";
-import { isMobile, isSafari, isiPad } from "@vuepress/helper/client";
 import { withBase } from "vuepress/client";
+import { isMobile, isSafari, isiPad } from "@vuepress/helper/client";
 import { pluginOptions } from "../options.js";
 
 //#region src/client/composables/pdf.ts

package/lib/node/index.d.ts

@@ -210,6 +210,9 @@ interface CodeTreeOptions {
   height?: string | number;
 }
 //#endregion
+//#region src/shared/mark.d.ts
+type MarkOptions = 'lazy' | 'eager';
+//#endregion
 //#region src/shared/repl.d.ts
 type ThemeOptions = BuiltinTheme | {
   light: BuiltinTheme;
@@ -279,6 +282,11 @@ interface MarkdownPowerPluginOptions {
    * @default false
    */
   abbr?: boolean;
+  /**
+   * 马克笔动画模式
+   * @default 'eager'
+   */
+  mark?: MarkOptions;
   /**
    * 配置代码块分组
    */

package/lib/node/index.js

@@ -6,9 +6,8 @@ import http from "node:https";
 import { URL, URLSearchParams } from "node:url";
 import { camelCase, isBoolean, isEmptyObject, isNull, isNumber, isPlainObject as isPlainObject$1, isString, isUndefined, kebabCase, notNullish, omit, toArray, uniqueBy, withTimeout } from "@pengzhanbo/utils";
 import imageSize from "image-size";
-import { colors, fs, getDirname, logger, ora, path } from "vuepress/utils";
+import { colors, fs, getDirname, logger, ora, path, tinyglobby } from "vuepress/utils";
 import path$1 from "node:path";
-import { globSync } from "tinyglobby";
 import { isLinkHttp as isLinkHttp$1, isLinkWithProtocol, removeEndingSlash, removeLeadingSlash } from "vuepress/shared";
 import fs$1, { promises } from "node:fs";
 import process from "node:process";
@@ -1474,7 +1473,7 @@ function codeTreePlugin(md, app, options = {}) {
 		content: ({ dir, icon,...props }, _, env) => {
 			const codeTreeFiles = env.codeTreeFiles ??= [];
 			const root = findFile(app, env, dir);
-			const files = globSync("**/*", {
+			const files = tinyglobby.globSync("**/*", {
 				cwd: root,
 				onlyFiles: true,
 				dot: true,
@@ -3961,7 +3960,7 @@ const iconPlugin = (md, options = {}) => {
 //#endregion
 //#region src/node/icon/prepareIcon.ts
 function getFontAwesomeCDNLink(type) {
-	return `https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/js/${type}.min.js`;
+	return `https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/js/${type}.min.js`;
 }
 function prepareIcon(imports, options = {}) {
 	const setupContent = [];
@@ -3974,7 +3973,7 @@ function prepareIcon(imports, options = {}) {
 			"fontawesome"
 		].map(getFontAwesomeCDNLink).map((asset$1) => normalizeAsset(asset$1, "fontawesome"));
 		if (asset === "fontawesome-with-brands") return normalizeAsset(getFontAwesomeCDNLink("brands"), "fontawesome");
-		return null;
+		return normalizeAsset(asset, "fontawesome");
 	}).flat().filter(notNullish));
 	let hasStyle = false;
 	let hasScript = false;
@@ -4331,6 +4330,13 @@ async function prepareConfigFile(app, options) {
 		enhances.add(`app.component('VPTable', VPTable)`);
 	}
 	const setupIcon = prepareIcon(imports, options.icon);
+	const setupStmts = [];
+	const iconSetup = setupIcon.trim();
+	if (iconSetup) setupStmts.push(iconSetup);
+	const markMode = options.mark === "lazy" ? "lazy" : "eager";
+	imports.add(`import { setupMarkHighlight } from '${CLIENT_FOLDER}composables/mark.js'`);
+	setupStmts.push(`setupMarkHighlight(${JSON.stringify(markMode)})`);
+	const setupContent = setupStmts.length ? `    ${setupStmts.join("\n    ")}\n` : "";
 	return app.writeTemp("md-power/config.js", `\
 import { defineClientConfig } from 'vuepress/client'
 ${Array.from(imports.values()).join("\n")}
@@ -4342,7 +4348,7 @@ export default defineClientConfig({
 ${Array.from(enhances.values()).map((item) => `    ${item}`).join("\n")}
   },
   setup() {
-    ${setupIcon}
+    ${setupContent}
   }
 })
 `);

package/lib/shared/index.d.ts

@@ -208,6 +208,9 @@ interface CodeTreeOptions {
   height?: string | number;
 }
 //#endregion
+//#region src/shared/mark.d.ts
+type MarkOptions = 'lazy' | 'eager';
+//#endregion
 //#region src/shared/repl.d.ts
 type ThemeOptions = BuiltinTheme | {
   light: BuiltinTheme;
@@ -277,6 +280,11 @@ interface MarkdownPowerPluginOptions {
    * @default false
    */
   abbr?: boolean;
+  /**
+   * 马克笔动画模式
+   * @default 'eager'
+   */
+  mark?: MarkOptions;
   /**
    * 配置代码块分组
    */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuepress-plugin-md-power",
   "type": "module",
-  "version": "1.0.0-rc.170",
+  "version": "1.0.0-rc.172",
   "description": "The Plugin for VuePress 2 - markdown power",
   "author": "pengzhanbo <volodymyr@foxmail.com>",
   "license": "MIT",
@@ -33,7 +33,7 @@
   "peerDependencies": {
     "artplayer": "^5.3.0",
     "dashjs": "^5.0.3",
-    "esbuild": "^0.25.10",
+    "esbuild": "^0.25.11",
     "hls.js": "^1.6.13",
     "less": "^4.4.2",
     "markdown-it": "^14.1.0",
@@ -42,7 +42,7 @@
     "sass": "^1.93.2",
     "sass-embedded": "^1.93.2",
     "stylus": "^0.64.0",
-    "vuepress": "2.0.0-rc.24"
+    "vuepress": "2.0.0-rc.26"
   },
   "peerDependenciesMeta": {
     "artplayer": {
@@ -85,7 +85,7 @@
     "@mdit/plugin-tab": "^0.22.2",
     "@mdit/plugin-tasklist": "^0.22.1",
     "@pengzhanbo/utils": "^2.1.0",
-    "@vuepress/helper": "2.0.0-rc.112",
+    "@vuepress/helper": "2.0.0-rc.114",
     "@vueuse/core": "^13.9.0",
     "chokidar": "4.0.3",
     "image-size": "^2.0.2",
@@ -94,9 +94,8 @@
     "markdown-it-container": "^4.0.0",
     "nanoid": "^5.1.6",
     "shiki": "^3.13.0",
-    "tinyglobby": "^0.2.15",
-    "tm-grammars": "^1.24.17",
-    "tm-themes": "^1.10.9",
+    "tm-grammars": "^1.24.22",
+    "tm-themes": "^1.10.11",
     "vue": "^3.5.22"
   },
   "devDependencies": {