vuepress-plugin-md-power 1.0.0-rc.158 → 1.0.0-rc.160

package/lib/client/components/VPTable.vue

@@ -0,0 +1,187 @@
+<script setup lang="ts">
+import { decodeData } from '@vuepress/helper/client'
+import { useClipboard, useToggle } from '@vueuse/core'
+import { computed, useTemplateRef } from 'vue'
+
+const props = defineProps<{
+  /** 表格标题 */
+  title?: string
+  /** 对其方式 */
+  align?: 'left' | 'center' | 'right'
+  /** 复制为 html/markdown */
+  copy?: false | 'all' | 'html' | 'md'
+  /** 最大化内容 */
+  maxContent?: boolean
+  /** @internal */
+  markdown?: string
+}>()
+
+const tableEl = useTemplateRef('table')
+const rawContent = computed(() => props.markdown ? decodeData(props.markdown) : '')
+
+const [isHTMLCopied, toggleHTMLCopy] = useToggle()
+const [isMDCopied, toggleMDCopy] = useToggle()
+const { copy: copyTable } = useClipboard()
+
+function onCopy(type: 'html' | 'md') {
+  copyTable(type === 'md' ? rawContent.value : tableEl.value?.innerHTML || '')
+  type === 'html' ? toggleHTMLCopy(true) : toggleMDCopy(true)
+  setTimeout(() => {
+    type === 'html' ? toggleHTMLCopy(false) : toggleMDCopy(false)
+  }, 1500)
+}
+</script>
+
+<template>
+  <div class="vp-table" :class="{ [align || 'left']: true }">
+    <div class="table-container">
+      <div class="table-content">
+        <div v-if="copy" class="table-toolbar">
+          <button
+            v-if="copy === 'all' || copy === 'html'"
+            type="button"
+            aria-label="Copy Table as HTML"
+            @click="onCopy('html')"
+          >
+            <span :class="isHTMLCopied ? 'vpi-table-copied' : 'vpi-table-copy'" />
+            <span>HTML</span>
+          </button>
+          <button
+            v-if="copy === 'all' || copy === 'md'"
+            type="button"
+            aria-label="Copy Table as Markdown"
+            @click="onCopy('md')"
+          >
+            <span :class="isMDCopied ? 'vpi-table-copied' : 'vpi-table-copy'" />
+            <span>Markdown</span>
+          </button>
+        </div>
+        <div ref="table" :class="{ 'max-content': maxContent }">
+          <slot />
+        </div>
+      </div>
+      <p v-if="title" class="table-title">
+        {{ title }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<style>
+.vp-table {
+  display: flex;
+  max-width: 100%;
+  margin: 16px 0;
+}
+
+.vp-table.left {
+  justify-content: flex-start;
+}
+
+.vp-table.center {
+  justify-content: center;
+}
+
+.vp-table.right {
+  justify-content: flex-end;
+}
+
+.vp-table .table-container,
+.vp-table .table-content {
+  width: fit-content;
+  max-width: 100%;
+}
+
+.vp-table .table-content {
+  margin: 0 auto;
+}
+
+.vp-table .table-title {
+  margin: 8px auto;
+  font-weight: 500;
+  text-align: center;
+}
+
+.vp-table .table-container table {
+  margin: 0;
+}
+
+.vp-table .table-toolbar {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.vp-table .table-toolbar button {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  font-size: 14px;
+  color: var(--vp-c-text-3);
+  cursor: pointer;
+  transition: var(--vp-t-color);
+  transition-property: color;
+}
+
+.vp-table .table-toolbar button:hover {
+  color: var(--vp-c-text-2);
+}
+
+.vpi-table-copy {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M20.829 12.861c.171-.413.171-.938.171-1.986s0-1.573-.171-1.986a2.25 2.25 0 0 0-1.218-1.218c-.413-.171-.938-.171-1.986-.171H11.1c-1.26 0-1.89 0-2.371.245a2.25 2.25 0 0 0-.984.984C7.5 9.209 7.5 9.839 7.5 11.1v6.525c0 1.048 0 1.573.171 1.986c.229.551.667.99 1.218 1.218c.413.171.938.171 1.986.171s1.573 0 1.986-.171m7.968-7.968a2.25 2.25 0 0 1-1.218 1.218c-.413.171-.938.171-1.986.171s-1.573 0-1.986.171a2.25 2.25 0 0 0-1.218 1.218c-.171.413-.171.938-.171 1.986s0 1.573-.171 1.986a2.25 2.25 0 0 1-1.218 1.218m7.968-7.968a11.68 11.68 0 0 1-7.75 7.9l-.218.068M16.5 7.5v-.9c0-1.26 0-1.89-.245-2.371a2.25 2.25 0 0 0-.983-.984C14.79 3 14.16 3 12.9 3H6.6c-1.26 0-1.89 0-2.371.245a2.25 2.25 0 0 0-.984.984C3 4.709 3 5.339 3 6.6v6.3c0 1.26 0 1.89.245 2.371c.216.424.56.768.984.984c.48.245 1.111.245 2.372.245H7.5'/%3E%3C/svg%3E");
+}
+
+.vpi-table-copied {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m9 20.42l-6.21-6.21l2.83-2.83L9 14.77l9.88-9.89l2.83 2.83z'/%3E%3C/svg%3E");
+}
+
+.vp-table .table-content .max-content {
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+.vp-table .table-content .max-content table {
+  width: max-content;
+}
+
+/* -----  Highlight --------- */
+.vp-table table th.tip,
+.vp-table table td.tip,
+.vp-table table th.note,
+.vp-table table td.note {
+  color: var(--vp-c-tip-1);
+  background-color: var(--vp-c-tip-soft);
+}
+
+.vp-table table th.info,
+.vp-table table td.info {
+  color: var(--vp-c-default-1);
+  background-color: var(--vp-c-default-soft);
+}
+
+.vp-table table th.warning,
+.vp-table table td.warning {
+  color: var(--vp-c-warning-1);
+  background-color: var(--vp-c-warning-soft);
+}
+
+.vp-table table th.danger,
+.vp-table table td.danger,
+.vp-table table th.caution,
+.vp-table table td.caution {
+  color: var(--vp-c-danger-1);
+  background-color: var(--vp-c-danger-soft);
+}
+
+.vp-table table th.success,
+.vp-table table td.success {
+  color: var(--vp-c-success-1);
+  background-color: var(--vp-c-success-soft);
+}
+
+.vp-table table th.important,
+.vp-table table td.important {
+  color: var(--vp-c-important-1);
+  background-color: var(--vp-c-important-soft);
+}
+</style>

package/lib/client/composables/codeRepl.js

@@ -152,8 +152,9 @@ function useCodeRepl(el) {
 		finished.value = false;
 		if (pyodide === null) {
 			const { loadPyodide, version } = await import(
-			/* webpackChunkName: "pyodide" */
-			"pyodide");
+				/* webpackChunkName: "pyodide" */
+				"pyodide"
+);
 			pyodide = await loadPyodide({ indexURL: `https://cdn.jsdelivr.net/pyodide/v${version}/full/` });
 		}
 		pyodide.setStdout({ batched: (msg) => stdout.value.push(msg) });

package/lib/client/composables/demo.js

@@ -105,7 +105,7 @@ function useNormalDemo(draw, title, config) {
 function createHTMLTemplate(title, id, config) {
 	const { cssLib = [], jsLib = [], html, css, script } = config || {};
 	const stylesheet = cssLib.map((url) => `<link rel="stylesheet" href="${url}">`).join("");
-	const scripts = jsLib.map((url) => `<script src="${url}"></script>`).join("");
+	const scripts = jsLib.map((url) => `<script src="${url}"><\/script>`).join("");
 	return `<!DOCTYPE html>
 <html>
   <head>
@@ -117,7 +117,7 @@ function createHTMLTemplate(title, id, config) {
   </head>
   <body>
     ${html}
-    <script>;(function(){${script}})();</script>
+    <script>;(function(){${script}})();<\/script>
     <script>;(function(){
   const height = Math.ceil(document.documentElement.getBoundingClientRect().height)
   window.parent?.postMessage({ type: '${id}', height }, '*')
@@ -128,7 +128,7 @@ function createHTMLTemplate(title, id, config) {
     window.parent?.postMessage({ type: '${id}', height }, '*')
   })
   resizeObserver.observe(document.documentElement)
-})();</script>
+})();<\/script>
   </body>
 </html>`;
 }

package/lib/node/index.d.ts

@@ -235,6 +235,38 @@ interface ReplEditorData {
   };
 }
 //#endregion
+//#region src/shared/table.d.ts
+interface TableContainerOptions {
+  /**
+  * 表格对齐方式
+  * - 'left': 左对齐
+  * - 'center': 居中对齐
+  * - 'right': 右对齐
+  *
+  * @default 'left'
+  */
+  align?: "left" | "center" | "right";
+  /**
+  * 表格复制
+  * - true: 等同于 `all`，支持复制为 html 和 markdown 格式
+  * - 'all': 支持复制为 html 和 markdown 格式
+  * - 'html': 只支持复制为 html 格式
+  * - 'md': 只支持复制为 markdown 格式
+  * - `false`: 禁用复制
+  *
+  * @default true
+  */
+  copy?: boolean | "all" | "html" | "md";
+  /**
+  * 表格宽度是否为最大内容宽度
+  *
+  * 最大内容宽度时，行内元素不再自动换行，超出容器宽度时表格显示滚动条
+  *
+  * @default false
+  */
+  maxContent?: boolean;
+}
+//#endregion
 //#region src/shared/plugin.d.ts
 interface MarkdownPowerPluginOptions {
   /**
@@ -263,7 +295,6 @@ interface MarkdownPowerPluginOptions {
   * @default false
   */
   pdf?: boolean | PDFOptions;
-  // new syntax
   /**
   * 是否启用 图标支持
   * - iconify - `::collect:icon_name::` => `<VPIcon name="collect:icon_name" />`
@@ -346,7 +377,6 @@ interface MarkdownPowerPluginOptions {
   * @default false
   */
   field?: boolean;
-  // video embed
   /**
   * 是否启用 acfun 视频嵌入
   *
@@ -383,7 +413,6 @@ interface MarkdownPowerPluginOptions {
   * `@[audioReader](url)`
   */
   audioReader?: boolean;
-  // code embed
   /**
   * 是否启用 codepen 嵌入
   *
@@ -412,7 +441,6 @@ interface MarkdownPowerPluginOptions {
   * @default false
   */
   jsfiddle?: boolean;
-  // container
   /**
   * 是否启用 REPL 容器语法
   *
@@ -451,7 +479,14 @@ interface MarkdownPowerPluginOptions {
   * @default false
   */
   caniuse?: boolean | CanIUseOptions;
-  // enhance
+  /**
+  * 是否启用 table 容器语法，为表格提供增强功能
+  *
+  * - `copy`: 是否启用复制功能，支持复制为 html 格式 和 markdown 格式
+  *
+  * @default false
+  */
+  table?: boolean | TableContainerOptions;
   /**
   * 是否启用 自动填充 图片宽高属性
   *

package/lib/node/index.js

@@ -1,6 +1,6 @@
 import { createRequire } from "node:module";
 import { tab } from "@mdit/plugin-tab";
-import { addViteOptimizeDepsInclude, ensureEndingSlash, isArray, isLinkAbsolute, isLinkExternal, isLinkHttp, isPlainObject } from "@vuepress/helper";
+import { addViteOptimizeDepsInclude, encodeData, ensureEndingSlash, isArray, isLinkAbsolute, isLinkExternal, isLinkHttp, isPlainObject } from "@vuepress/helper";
 import { Buffer } from "node:buffer";
 import http from "node:https";
 import { URL, URLSearchParams } from "node:url";
@@ -1040,12 +1040,16 @@ async function imageSizePlugin(app, md, type = false) {
 			if (!cache$1.has(filepath$1)) return false;
 		} else if (!cache$1.has(filepath$1)) {
 			if (!fs.existsSync(filepath$1)) return false;
-			const { width: w, height: h } = imageSize(fs.readFileSync(filepath$1));
-			if (!w || !h) return false;
-			cache$1.set(filepath$1, {
-				width: w,
-				height: h
-			});
+			try {
+				const { width: w, height: h } = imageSize(fs.readFileSync(filepath$1));
+				if (!w || !h) return false;
+				cache$1.set(filepath$1, {
+					width: w,
+					height: h
+				});
+			} catch {
+				return false;
+			}
 		}
 		const { width: originalWidth, height: originalHeight } = cache$1.get(filepath$1);
 		const ratio = originalWidth / originalHeight;
@@ -2430,6 +2434,83 @@ function stepsPlugin(md) {
 	createContainerPlugin(md, "steps", { before: () => "<div class=\"vp-steps\">" });
 }
 
+//#endregion
+//#region src/node/container/table.ts
+/**
+*  在不破坏表格语法的前提下，通过容器语法将表格包裹起来，为表格提供增强功能
+*
+* @example
+* ```md
+* ::: table title="表格标题" max-content copy align="center" hl-rows="warning:1,2,3;error:4,5,6" hl-cols="warning:1;error:2,3" hl-cells="warning:(1,2)(2,3);"
+*
+* | xx | xx | xx |
+* | -- | -- | -- |
+* | xx | xx | xx |
+* :::
+* ```
+*/
+function tablePlugin(md, options = {}) {
+	createContainerSyntaxPlugin(md, "table", (tokens, index, opt, env) => {
+		const { hlCols = "", hlRows = "", hlCells = "",...meta } = tokens[index].meta;
+		const props = {
+			copy: true,
+			maxContent: false,
+			...options,
+			...meta
+		};
+		const content = tokens[index].content;
+		if (props.copy) {
+			props.copy = props.copy === true ? "all" : props.copy;
+			if (props.copy === "all" || props.copy === "md") props.markdown = encodeData(content.trim());
+		}
+		if (!hlCols && !hlRows && !hlCells) return `<VPTable ${stringifyAttrs(props)}>${md.render(content, env)}</VPTable>`;
+		const rows = parseHl(hlRows);
+		const cols = parseHl(hlCols);
+		const cells = parseHlCells(hlCells);
+		const tableTokens = md.parse(content, env);
+		let isTable = false;
+		let colIndex = 0;
+		let rowIndex = 0;
+		for (const token of tableTokens) {
+			if (token.type === "table_open") isTable = true;
+			if (token.type === "table_close") isTable = false;
+			if (!isTable) continue;
+			if (token.type === "tr_open") {
+				rowIndex++;
+				colIndex = 0;
+			}
+			if (token.type === "th_open" || token.type === "td_open") {
+				colIndex++;
+				const classes = cells[rowIndex]?.[colIndex] || rows[rowIndex] || cols[colIndex];
+				if (classes) token.attrJoin("class", classes);
+			}
+		}
+		return `<VPTable ${stringifyAttrs(props)}>${md.renderer.render(tableTokens, opt, env)}</VPTable>`;
+	});
+}
+function parseHl(hl) {
+	const res = {};
+	if (!hl) return res;
+	hl.split(";").forEach((item) => {
+		const [key, value = "1"] = item.split(":");
+		String(value).split(",").forEach((v) => res[v.trim()] = key.trim());
+	});
+	return res;
+}
+function parseHlCells(hl) {
+	const res = {};
+	if (!hl) return res;
+	hl.split(";").forEach((item) => {
+		const [key, value = ""] = item.split(":");
+		value.trim().replace(/\s*\((\d+)\s*,\s*(\d+)\)\s*/g, (_, row, col) => {
+			res[row] ??= {};
+			res[row][col] = key.trim();
+			return "";
+		});
+	});
+	return res;
+}
+
 //#endregion
 //#region src/node/container/tabs.ts
 const tabs = (md) => {
@@ -2555,6 +2636,7 @@ async function containerPlugin(app, md, options) {
 	if (options.collapse) collapsePlugin(md);
 	if (options.chat) chatPlugin(md);
 	if (options.field) fieldPlugin(md);
+	if (options.table) tablePlugin(md, isPlainObject(options.table) ? options.table : {});
 }
 
 //#endregion
@@ -2681,10 +2763,10 @@ 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>",
+		content: "<script setup>\n<\/script>",
 		contentStripped: "",
 		tagOpen: "<script setup>",
-		tagClose: "</script>"
+		tagClose: "<\/script>"
 	};
 	scriptSetup.contentStripped = `${imports}\n${scriptSetup.contentStripped}`;
 	scriptSetup.content = scriptSetup.content.replace(SCRIPT_RE$1, (matched) => `${matched}\n${imports}`);
@@ -3531,10 +3613,9 @@ function checkSupportType(type) {
 				name = !installed.hlsjs ? "hls.js" : "";
 				break;
 			case "flv":
-			case "ts": {
+			case "ts":
 				name = !installed.mpegtsjs ? "mpegts.js" : "";
 				break;
-			}
 			case "mpd":
 			case "dash":
 				name = !installed.dashjs ? "dashjs" : "";
@@ -4281,6 +4362,10 @@ async function prepareConfigFile(app, options) {
 		imports.add(`import VPField from '${CLIENT_FOLDER}components/VPField.vue'`);
 		enhances.add(`app.component('VPField', VPField)`);
 	}
+	if (options.table) {
+		imports.add(`import VPTable from '${CLIENT_FOLDER}components/VPTable.vue'`);
+		enhances.add(`app.component('VPTable', VPTable)`);
+	}
 	const setupIcon = prepareIcon(imports, options.icon);
 	return app.writeTemp("md-power/config.js", `\
 import { defineClientConfig } from 'vuepress/client'

package/lib/shared/index.d.ts

@@ -233,6 +233,38 @@ interface ReplEditorData {
   };
 }
 //#endregion
+//#region src/shared/table.d.ts
+interface TableContainerOptions {
+  /**
+  * 表格对齐方式
+  * - 'left': 左对齐
+  * - 'center': 居中对齐
+  * - 'right': 右对齐
+  *
+  * @default 'left'
+  */
+  align?: "left" | "center" | "right";
+  /**
+  * 表格复制
+  * - true: 等同于 `all`，支持复制为 html 和 markdown 格式
+  * - 'all': 支持复制为 html 和 markdown 格式
+  * - 'html': 只支持复制为 html 格式
+  * - 'md': 只支持复制为 markdown 格式
+  * - `false`: 禁用复制
+  *
+  * @default true
+  */
+  copy?: boolean | "all" | "html" | "md";
+  /**
+  * 表格宽度是否为最大内容宽度
+  *
+  * 最大内容宽度时，行内元素不再自动换行，超出容器宽度时表格显示滚动条
+  *
+  * @default false
+  */
+  maxContent?: boolean;
+}
+//#endregion
 //#region src/shared/plugin.d.ts
 interface MarkdownPowerPluginOptions {
   /**
@@ -261,7 +293,6 @@ interface MarkdownPowerPluginOptions {
   * @default false
   */
   pdf?: boolean | PDFOptions;
-  // new syntax
   /**
   * 是否启用 图标支持
   * - iconify - `::collect:icon_name::` => `<VPIcon name="collect:icon_name" />`
@@ -344,7 +375,6 @@ interface MarkdownPowerPluginOptions {
   * @default false
   */
   field?: boolean;
-  // video embed
   /**
   * 是否启用 acfun 视频嵌入
   *
@@ -381,7 +411,6 @@ interface MarkdownPowerPluginOptions {
   * `@[audioReader](url)`
   */
   audioReader?: boolean;
-  // code embed
   /**
   * 是否启用 codepen 嵌入
   *
@@ -410,7 +439,6 @@ interface MarkdownPowerPluginOptions {
   * @default false
   */
   jsfiddle?: boolean;
-  // container
   /**
   * 是否启用 REPL 容器语法
   *
@@ -449,7 +477,14 @@ interface MarkdownPowerPluginOptions {
   * @default false
   */
   caniuse?: boolean | CanIUseOptions;
-  // enhance
+  /**
+  * 是否启用 table 容器语法，为表格提供增强功能
+  *
+  * - `copy`: 是否启用复制功能，支持复制为 html 格式 和 markdown 格式
+  *
+  * @default false
+  */
+  table?: boolean | TableContainerOptions;
   /**
   * 是否启用 自动填充 图片宽高属性
   *

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuepress-plugin-md-power",
   "type": "module",
-  "version": "1.0.0-rc.158",
+  "version": "1.0.0-rc.160",
   "description": "The Plugin for VuePress 2 - markdown power",
   "author": "pengzhanbo <volodymyr@foxmail.com>",
   "license": "MIT",
@@ -31,7 +31,7 @@
     "lib"
   ],
   "peerDependencies": {
-    "artplayer": "^5.2.3",
+    "artplayer": "^5.2.5",
     "dashjs": "^5.0.3",
     "esbuild": "^0.25.8",
     "hls.js": "^1.6.7",
@@ -86,22 +86,22 @@
     "@mdit/plugin-tasklist": "^0.22.1",
     "@pengzhanbo/utils": "^2.1.0",
     "@vuepress/helper": "2.0.0-rc.112",
-    "@vueuse/core": "^13.5.0",
+    "@vueuse/core": "^13.6.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.8.1",
+    "shiki": "^3.9.1",
     "tinyglobby": "0.2.13",
-    "tm-grammars": "^1.24.0",
+    "tm-grammars": "^1.24.1",
     "tm-themes": "^1.10.7",
-    "vue": "^3.5.17"
+    "vue": "^3.5.18"
   },
   "devDependencies": {
     "@types/markdown-it": "^14.1.2",
-    "artplayer": "^5.2.3",
+    "artplayer": "^5.2.5",
     "dashjs": "^5.0.3",
     "hls.js": "^1.6.7",
     "mpegts.js": "1.7.3"