vuepress-plugin-md-power 1.0.0-rc.136 → 1.0.0-rc.138

package/lib/node/index.js

@@ -1158,14 +1158,14 @@ import { isPlainObject as isPlainObject2 } from "@vuepress/helper";
 
 // src/node/container/createContainer.ts
 import container from "markdown-it-container";
-function createContainerPlugin(md, type2, options = {}) {
-  const render = (tokens, index) => {
+function createContainerPlugin(md, type2, { before, after } = {}) {
+  const render = (tokens, index, options, env) => {
     const token = tokens[index];
     const info = token.info.trim().slice(type2.length).trim() || "";
     if (token.nesting === 1) {
-      return options.before?.(info, tokens, index) || `<div class="custom-container ${type2}">`;
+      return before?.(info, tokens, index, options, env) || `<div class="custom-container ${type2}">`;
     } else {
-      return options.after?.(info, tokens, index) || "</div>";
+      return after?.(info, tokens, index, options, env) || "</div>";
     }
   };
   md.use(container, type2, { render });
@@ -1209,6 +1209,186 @@ function cardPlugin(md) {
   });
 }
 
+// src/node/container/chat.ts
+var chatPlugin = (md) => {
+  md.block.ruler.before("fence", "chat_def", chatDef);
+  md.renderer.rules.chat_container = (tokens, idx, _, env) => {
+    const { meta, content } = tokens[idx];
+    const { title } = meta;
+    const messages = parseChatContent(content);
+    return `<div class="vp-chat">
+  <div class="vp-chat-header">
+    <p class="vp-chat-title">${title || "Chat"}</p>
+  </div>
+  <div class="vp-chat-content">
+    ${chatMessagesRender(md, env, messages)}
+  </div>
+</div>`;
+  };
+};
+function chatDef(state, startLine, endLine, silent) {
+  const start = state.bMarks[startLine] + state.tShift[startLine];
+  const max = state.eMarks[startLine];
+  let pos = start;
+  if (state.src.slice(pos, pos + 3) !== ":::")
+    return false;
+  pos += 3;
+  const info = state.src.slice(start + 3, max).trim();
+  if (!info.startsWith("chat"))
+    return false;
+  if (silent)
+    return true;
+  let line = startLine;
+  let content = "";
+  while (++line < endLine) {
+    if (state.src.slice(state.bMarks[line], state.eMarks[line]).trim() === ":::") {
+      break;
+    }
+    content += `${state.src.slice(state.bMarks[line], state.eMarks[line])}
+`;
+  }
+  const token = state.push("chat_container", "", 0);
+  token.meta = resolveAttrs(info).attrs;
+  token.content = content;
+  token.markup = "::: chat";
+  token.map = [startLine, line + 1];
+  state.line = line + 1;
+  return true;
+}
+function chatMessagesRender(md, env, messages) {
+  let currentDate = "";
+  return messages.map(({ sender, username, date, content }) => {
+    let messageContent = "";
+    if (!currentDate || currentDate !== date) {
+      currentDate = date;
+      messageContent += `<div class="vp-chat-date"><span>${currentDate}</span></div>
+`;
+    }
+    messageContent += `<div class="vp-chat-message ${sender}">
+      <div class="vp-chat-message-body">      ${sender === "user" ? `
+<p class="vp-chat-username">${username}</p>` : ""}
+        <div class="message-content">
+          ${md.render(content.join("\n"), cleanMarkdownEnv(env)).trim()}
+        </div>
+      </div>
+    </div>`;
+    return messageContent;
+  }).join("\n");
+}
+function parseChatContent(content) {
+  const lines = content.split("\n");
+  const messages = [];
+  let currentDate = "";
+  let message;
+  for (const line of lines) {
+    const lineStr = line.trim();
+    if (lineStr.startsWith("{:") && lineStr.endsWith("}")) {
+      currentDate = lineStr.slice(2, -1).trim();
+      continue;
+    }
+    if (lineStr.startsWith("{") && lineStr.endsWith("}")) {
+      const username = lineStr.slice(1, -1).trim();
+      message = {
+        sender: username === "." ? "self" : "user",
+        username,
+        date: currentDate,
+        content: []
+      };
+      messages.push(message);
+      continue;
+    }
+    if (message?.sender) {
+      message.content.push(line);
+    }
+  }
+  return messages;
+}
+
+// src/node/container/collapse.ts
+function collapsePlugin(md) {
+  createContainerPlugin(md, "collapse", {
+    before: (info, tokens, index) => {
+      const { attrs: attrs2 } = resolveAttrs(info);
+      const idx = parseCollapse(tokens, index, attrs2);
+      const { accordion } = attrs2;
+      return `<VPCollapse${accordion ? " accordion" : ""}${idx !== void 0 ? ` :index="${idx}"` : ""}>`;
+    },
+    after: () => `</VPCollapse>`
+  });
+  md.renderer.rules.collapse_item_open = (tokens, idx) => {
+    const token = tokens[idx];
+    const { expand, index } = token.meta;
+    return `<VPCollapseItem${expand ? " expand" : ""}${` :index="${index}"`}>`;
+  };
+  md.renderer.rules.collapse_item_close = () => "</VPCollapseItem>";
+  md.renderer.rules.collapse_item_title_open = () => "<template #title>";
+  md.renderer.rules.collapse_item_title_close = () => "</template>";
+}
+function parseCollapse(tokens, index, attrs2) {
+  const listStack = [];
+  let idx = -1;
+  let defaultIndex;
+  let hashExpand = false;
+  for (let i = index + 1; i < tokens.length; i++) {
+    const token = tokens[i];
+    if (token.type === "container_collapse_close") {
+      break;
+    }
+    if (token.type === "bullet_list_open") {
+      listStack.push(0);
+      if (listStack.length === 1)
+        token.hidden = true;
+    } else if (token.type === "bullet_list_close") {
+      listStack.pop();
+      if (listStack.length === 0)
+        token.hidden = true;
+    } else if (token.type === "list_item_open") {
+      const currentLevel = listStack.length;
+      if (currentLevel === 1) {
+        token.type = "collapse_item_open";
+        tokens[i + 1].type = "collapse_item_title_open";
+        tokens[i + 3].type = "collapse_item_title_close";
+        idx++;
+        const inlineToken = tokens[i + 2];
+        const firstToken = inlineToken.children[0];
+        let flag = "";
+        let expand;
+        if (firstToken.type === "text") {
+          firstToken.content = firstToken.content.trim().replace(/^:[+\-]\s*/, (match) => {
+            flag = match.trim();
+            return "";
+          });
+        }
+        if (attrs2.accordion) {
+          if (!hashExpand && flag === ":+") {
+            expand = hashExpand = true;
+            defaultIndex = idx;
+          }
+        } else if (flag === ":+") {
+          expand = true;
+        } else if (flag === ":-") {
+          expand = false;
+        } else {
+          expand = !!attrs2.expand;
+        }
+        token.meta = {
+          index: idx,
+          expand
+        };
+      }
+    } else if (token.type === "list_item_close") {
+      const currentLevel = listStack.length;
+      if (currentLevel === 1) {
+        token.type = "collapse_item_close";
+      }
+    }
+  }
+  if (attrs2.accordion && attrs2.expand && !hashExpand) {
+    defaultIndex = 0;
+  }
+  return defaultIndex;
+}
+
 // src/node/container/demoWrapper.ts
 function demoWrapperPlugin(md) {
   createContainerPlugin(md, "demo-wrapper", {
@@ -1383,7 +1563,7 @@ function updateInlineToken(inline, info, icon) {
 import { promises as fs2 } from "node:fs";
 import { resolveModule } from "local-pkg";
 import container3 from "markdown-it-container";
-import { path as path2 } from "vuepress/utils";
+import { colors, logger as logger2, path as path2 } from "vuepress/utils";
 var RE_INFO = /^(#editable)?(.*)$/;
 function createReplContainer(md, lang) {
   const type2 = `${lang}-repl`;
@@ -1416,24 +1596,28 @@ async function langReplPlugin(app, md, {
   }
   theme ??= { light: "github-light", dark: "github-dark" };
   const data = { grammars: {} };
-  const themesPath = path2.dirname(resolveModule("tm-themes"));
-  const grammarsPath = path2.dirname(resolveModule("tm-grammars"));
-  const readTheme = (theme2) => read(path2.join(themesPath, "themes", `${theme2}.json`));
-  const readGrammar = (grammar) => read(path2.join(grammarsPath, "grammars", `${grammar}.json`));
-  if (typeof theme === "string") {
-    data.theme = await readTheme(theme);
-  } else {
-    data.theme = await Promise.all([
-      readTheme(theme.light),
-      readTheme(theme.dark)
-    ]).then(([light, dark]) => ({ light, dark }));
-  }
-  if (kotlin)
-    data.grammars.kotlin = await readGrammar("kotlin");
-  if (go)
-    data.grammars.go = await readGrammar("go");
-  if (rust)
-    data.grammars.rust = await readGrammar("rust");
+  try {
+    const themesPath = path2.dirname(resolveModule("tm-themes"));
+    const grammarsPath = path2.dirname(resolveModule("tm-grammars"));
+    const readTheme = (theme2) => read(path2.join(themesPath, "themes", `${theme2}.json`));
+    const readGrammar = (grammar) => read(path2.join(grammarsPath, "grammars", `${grammar}.json`));
+    if (typeof theme === "string") {
+      data.theme = await readTheme(theme);
+    } else {
+      data.theme = await Promise.all([
+        readTheme(theme.light),
+        readTheme(theme.dark)
+      ]).then(([light, dark]) => ({ light, dark }));
+    }
+    if (kotlin)
+      data.grammars.kotlin = await readGrammar("kotlin");
+    if (go)
+      data.grammars.go = await readGrammar("go");
+    if (rust)
+      data.grammars.rust = await readGrammar("rust");
+  } catch {
+    logger2.error("[vuepress-plugin-md-power]", `Failed to load packages: ${colors.green("tm-themes")}, ${colors.green("tm-grammars")}, Please install them manually.`);
+  }
   await app.writeTemp(
     "internal/md-power/replEditorData.js",
     `export default ${JSON.stringify(data, null, 2)}`
@@ -1823,6 +2007,99 @@ ${titles.map(
   });
 };
 
+// src/node/container/timeline.ts
+import { isEmptyObject } from "@pengzhanbo/utils";
+var RE_KEY = /(\w+)=\s*/;
+var RE_SEARCH_KEY = /\s+\w+=\s*|$/;
+var RE_CLEAN_VALUE = /(?<quote>["'])(.*?)(\k<quote>)/;
+function timelinePlugin(md) {
+  createContainerPlugin(md, "timeline", {
+    before(info, tokens, index) {
+      parseTimeline(tokens, index);
+      const { attrs: attrs2 } = resolveAttrs(info);
+      const { horizontal, card, placement, line } = attrs2;
+      return `<VPTimeline${horizontal ? " horizontal" : ""}${card ? " card" : ' :card="undefined"'}${placement ? ` placement="${placement}"` : ""}${line ? ` line="${line}"` : ""}>`;
+    },
+    after: () => "</VPTimeline>"
+  });
+  md.renderer.rules.timeline_item_open = (tokens, idx) => {
+    const token = tokens[idx];
+    const { time, type: type2, icon, color, line, card, placement } = token.meta;
+    return `<VPTimelineItem${time ? ` time="${time}"` : ""}${type2 ? ` type="${type2}"` : ""}${color ? ` color="${color}"` : ""}${line ? ` line="${line}"` : ""}${icon ? ` icon="${icon}"` : ""}${card === "true" ? " card" : card === "false" ? "" : ' :card="undefined"'}${placement ? ` placement="${placement}"` : ""}>${icon ? `<template #icon><VPIcon name="${icon}"/></template>` : ""}`;
+  };
+  md.renderer.rules.timeline_item_close = () => "</VPTimelineItem>";
+  md.renderer.rules.timeline_item_title_open = () => "<template #title>";
+  md.renderer.rules.timeline_item_title_close = () => "</template>";
+}
+function parseTimeline(tokens, index) {
+  const listStack = [];
+  for (let i = index + 1; i < tokens.length; i++) {
+    const token = tokens[i];
+    if (token.type === "container_timeline_close") {
+      break;
+    }
+    if (token.type === "bullet_list_open") {
+      listStack.push(0);
+      if (listStack.length === 1)
+        token.hidden = true;
+    } else if (token.type === "bullet_list_close") {
+      listStack.pop();
+      if (listStack.length === 0)
+        token.hidden = true;
+    } else if (token.type === "list_item_open") {
+      const currentLevel = listStack.length;
+      if (currentLevel === 1) {
+        token.type = "timeline_item_open";
+        tokens[i + 1].type = "timeline_item_title_open";
+        tokens[i + 3].type = "timeline_item_title_close";
+        const inlineToken = tokens[i + 2];
+        const softbreakIndex = inlineToken.children.findLastIndex(
+          (token2) => token2.type === "softbreak"
+        );
+        if (softbreakIndex !== -1) {
+          const lastToken = inlineToken.children[inlineToken.children.length - 1];
+          token.meta = extractTimelineAttributes(lastToken.content.trim());
+          if (!isEmptyObject(token.meta)) {
+            inlineToken.children = inlineToken.children.slice(0, softbreakIndex);
+          }
+        } else {
+          token.meta = {};
+        }
+      }
+    } else if (token.type === "list_item_close") {
+      const currentLevel = listStack.length;
+      if (currentLevel === 1) {
+        token.type = "timeline_item_close";
+      }
+    }
+  }
+}
+function extractTimelineAttributes(rawText) {
+  const attrKeys = ["time", "type", "icon", "line", "color", "card", "placement"];
+  const attrs2 = {};
+  let buffer = rawText.trim();
+  while (buffer.length) {
+    const keyMatch = buffer.match(RE_KEY);
+    if (!keyMatch) {
+      break;
+    }
+    const matchedKey = keyMatch[1].toLowerCase();
+    if (!attrKeys.includes(matchedKey)) {
+      break;
+    }
+    const keyStart = keyMatch.index;
+    const keyEnd = keyStart + keyMatch[0].length;
+    buffer = buffer.slice(keyEnd);
+    let valueEnd = buffer.search(RE_SEARCH_KEY);
+    if (valueEnd === -1)
+      valueEnd = buffer.length;
+    const value = buffer.slice(0, valueEnd).trim();
+    attrs2[matchedKey] = value.replace(RE_CLEAN_VALUE, "$2");
+    buffer = buffer.slice(valueEnd);
+  }
+  return attrs2;
+}
+
 // src/node/container/index.ts
 async function containerPlugin(app, md, options) {
   alignPlugin(md);
@@ -1839,6 +2116,12 @@ async function containerPlugin(app, md, options) {
   if (options.fileTree) {
     fileTreePlugin(md, isPlainObject2(options.fileTree) ? options.fileTree : {});
   }
+  if (options.timeline)
+    timelinePlugin(md);
+  if (options.collapse)
+    collapsePlugin(md);
+  if (options.chat)
+    chatPlugin(md);
 }
 
 // src/node/demo/demo.ts
@@ -2402,7 +2685,7 @@ var vueContainerRender = {
         insertSetupScript(style, env);
       }
     }
-    return `<VPDemoBasic${title ? ` title="${title}"` : ""}${desc ? ` desc="${desc}"` : ""}${expanded ? " expanded" : ""}>
+    return `<VPDemoBasic type="vue"${title ? ` title="${title}"` : ""}${desc ? ` desc="${desc}"` : ""}${expanded ? " expanded" : ""}>
     <${componentName2} />
     <template #code>
 `;
@@ -2785,7 +3068,7 @@ var pdfPlugin = (md) => {
 
 // src/node/embed/video/artPlayer.ts
 import { isPackageExists as isPackageExists2 } from "local-pkg";
-import { colors } from "vuepress/utils";
+import { colors as colors2 } from "vuepress/utils";
 var installed = {
   dashjs: isPackageExists2("dashjs"),
   hlsjs: isPackageExists2("hls.js"),
@@ -2841,10 +3124,10 @@ function checkSupportType(type2) {
         break;
     }
     if (name) {
-      console.warn(`${colors.yellow("[vuepress-plugin-md-power] artPlayer: ")} ${colors.cyan(name)} is not installed, please install it via npm or yarn or pnpm`);
+      console.warn(`${colors2.yellow("[vuepress-plugin-md-power] artPlayer: ")} ${colors2.cyan(name)} is not installed, please install it via npm or yarn or pnpm`);
     }
   } else {
-    console.warn(`${colors.yellow("[vuepress-plugin-md-power] artPlayer: ")} unsupported video type: ${colors.cyan(type2)}`);
+    console.warn(`${colors2.yellow("[vuepress-plugin-md-power] artPlayer: ")} unsupported video type: ${colors2.cyan(type2)}`);
   }
 }
 
@@ -2905,6 +3188,7 @@ var bilibiliPlugin = (md) => {
         params.set("t", meta.time.toString());
       }
       params.set("autoplay", meta.autoplay ? "1" : "0");
+      params.set("high_quality", "1");
       const source = `${BILIBILI_LINK}?${params.toString()}`;
       return `<VideoBilibili src="${source}" width="${meta.width}" height="${meta.height}" ratio="${meta.ratio}" title="${meta.title}" />`;
     }
@@ -3132,7 +3416,9 @@ var abbrPlugin = (md) => {
   md.core.ruler.after("linkify", "abbr_replace", abbrReplace);
   md.renderer.rules.abbreviation = (tokens, idx, _, env) => {
     const { content, info } = tokens[idx];
-    return `<Abbreviation>${content}${info ? `<template #tooltip>${md.renderInline(info, cleanMarkdownEnv(env))}</template>` : ""}</Abbreviation>`;
+    const rendered = md.renderInline(info, cleanMarkdownEnv(env));
+    const label = rendered.replace(/<[^>]*>/g, "");
+    return `<Abbreviation aria-label="${label}">${content}${info ? `<template #tooltip>${rendered}</template>` : ""}</Abbreviation>`;
   };
 };
 
@@ -3428,6 +3714,21 @@ async function prepareConfigFile(app, options) {
     imports.add(`import Abbreviation from '${CLIENT_FOLDER}components/Abbreviation.vue'`);
     enhances.add(`app.component('Abbreviation', Abbreviation)`);
   }
+  if (options.timeline) {
+    imports.add(`import VPTimeline from '${CLIENT_FOLDER}components/VPTimeline.vue'`);
+    imports.add(`import VPTimelineItem from '${CLIENT_FOLDER}components/VPTimelineItem.vue'`);
+    enhances.add(`app.component('VPTimeline', VPTimeline)`);
+    enhances.add(`app.component('VPTimelineItem', VPTimelineItem)`);
+  }
+  if (options.collapse) {
+    imports.add(`import VPCollapse from '${CLIENT_FOLDER}components/VPCollapse.vue'`);
+    imports.add(`import VPCollapseItem from '${CLIENT_FOLDER}components/VPCollapseItem.vue'`);
+    enhances.add(`app.component('VPCollapse', VPCollapse)`);
+    enhances.add(`app.component('VPCollapseItem', VPCollapseItem)`);
+  }
+  if (options.chat) {
+    imports.add(`import '${CLIENT_FOLDER}styles/chat.css'`);
+  }
   return app.writeTemp(
     "md-power/config.js",
     `import { defineClientConfig } from 'vuepress/client'
@@ -3501,5 +3802,5 @@ export {
   resolveImageSize
 };
 /* istanbul ignore if -- @preserve */
-/* istanbul ignore else -- @preserve */
 /* istanbul ignore next -- @preserve */
+/* istanbul ignore else -- @preserve */

package/lib/shared/index.d.ts

@@ -217,6 +217,56 @@ interface MarkdownPowerPluginOptions {
      * @default false
      */
     plot?: boolean | PlotOptions;
+    /**
+     * 是否启用 timeline 语法
+     *
+     * ```md
+     * ::: timeline
+     * - title
+     *   time="Q1" icon="ri:clockwise-line" line="dashed" type="warning" color="red"
+     *
+     *   xxx
+     * :::
+     * ```
+     *
+     * @default false
+     */
+    timeline?: boolean;
+    /**
+     * 是否启用 collapse 折叠面板 语法
+     *
+     * ```md
+     * ::: collapse accordion
+     * - + title
+     *
+     *   content
+     *
+     * - - title
+     *
+     *   content
+     * :::
+     * ```
+     *
+     * @default false
+     */
+    collapse?: boolean;
+    /**
+     * 是否启用 chat 容器 语法
+     *
+     * ```md
+     * ::: chat
+     * {:date}
+     *
+     * {user}
+     * message
+     *
+     * {.}
+     * message
+     * :::
+     * ```
+     * @default false
+     */
+    chat?: boolean;
     /**
      * 是否启用 bilibili 视频嵌入
      *

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuepress-plugin-md-power",
   "type": "module",
-  "version": "1.0.0-rc.136",
+  "version": "1.0.0-rc.138",
   "description": "The Plugin for VuePress 2 - markdown power",
   "author": "pengzhanbo <volodymyr@foxmail.com>",
   "license": "MIT",
@@ -33,13 +33,13 @@
   "peerDependencies": {
     "artplayer": "^5.2.2",
     "dashjs": "^5.0.0",
-    "esbuild": "^0.25.1",
-    "hls.js": "^1.5.20",
+    "esbuild": "^0.25.2",
+    "hls.js": "^1.6.0",
     "less": "^4.2.2",
     "markdown-it": "^14.1.0",
     "mpegts.js": "^1.7.3",
-    "sass": "^1.85.1",
-    "sass-embedded": "^1.85.1",
+    "sass": "^1.86.1",
+    "sass-embedded": "^1.86.1",
     "stylus": "^0.64.0",
     "vuepress": "2.0.0-rc.20"
   },
@@ -68,24 +68,25 @@
     "@mdit/plugin-sup": "^0.16.0",
     "@mdit/plugin-tab": "^0.16.0",
     "@mdit/plugin-tasklist": "^0.16.0",
-    "@vuepress/helper": "2.0.0-rc.82",
+    "@pengzhanbo/utils": "^1.2.0",
+    "@vuepress/helper": "2.0.0-rc.91",
     "@vueuse/core": "^13.0.0",
     "chokidar": "3.6.0",
     "image-size": "^2.0.1",
     "local-pkg": "^1.1.1",
-    "lru-cache": "^11.0.2",
+    "lru-cache": "^11.1.0",
     "markdown-it-container": "^4.0.0",
-    "nanoid": "^5.1.3",
+    "nanoid": "^5.1.5",
     "shiki": "^3.2.1",
-    "tm-grammars": "^1.23.3",
-    "tm-themes": "^1.10.1",
+    "tm-grammars": "^1.23.7",
+    "tm-themes": "^1.10.3",
     "vue": "^3.5.13"
   },
   "devDependencies": {
     "@types/markdown-it": "^14.1.2",
     "artplayer": "^5.2.2",
     "dashjs": "^5.0.0",
-    "hls.js": "^1.5.20",
+    "hls.js": "^1.6.0",
     "mpegts.js": "1.7.3"
   },
   "publishConfig": {