vuepress-plugin-md-power 1.0.0-rc.131 → 1.0.0-rc.133

package/lib/client/components/Abbreviation.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue'
+import { nextTick, ref, useTemplateRef, watch } from 'vue'
+
+const show = ref(false)
+const tooltip = useTemplateRef<HTMLSpanElement>('tooltip')
+const styles = ref<CSSProperties>()
+
+watch(show, () => nextTick(() => {
+  if (__VUEPRESS_SSR__)
+    return
+
+  if (show.value && tooltip.value) {
+    const { x, width } = tooltip.value.getBoundingClientRect()
+    const innerWidth = window.innerWidth
+    const space = 16
+    let translate = 0
+    if (x - space < 0)
+      translate = Math.abs(x) + space
+
+    else if (x + width + space > innerWidth)
+      translate = innerWidth - x - width - space
+
+    if (translate !== 0) {
+      styles.value = {
+        '--vp-abbr-transform': `translateX(${translate}px) translateX(-50%)`,
+        '--vp-abbr-space-transform': `translateX(${-translate}px) translateX(-50%)`,
+      }
+    }
+  }
+}))
+</script>
+
+<template>
+  <span class="vp-abbr" @mouseenter="show = true" @mouseleave="show = false">
+    <slot />
+    <Transition name="fade">
+      <span v-show="show" ref="tooltip" class="vp-abbr-tooltip" :style="styles">
+        <slot name="tooltip" />
+      </span>
+    </Transition>
+  </span>
+</template>
+
+<style>
+:root {
+  --vp-abbr-bg: var(--vp-c-bg);
+  --vp-abbr-text: var(--vp-c-text-2);
+  --vp-abbr-border: var(--vp-c-divider);
+  --vp-abbr-transform: translateX(-50%);
+  --vp-abbr-space-transform: translateX(-50%);
+}
+
+.vp-abbr {
+  position: relative;
+  text-decoration: underline dotted currentcolor;
+  text-underline-offset: 4px;
+  cursor: help;
+}
+
+.vp-abbr .vp-abbr-tooltip {
+  position: absolute;
+  top: calc(100% + 12px);
+  left: 50%;
+  z-index: 1;
+  width: max-content;
+  max-width: min(calc(100vw - 32px), 360px);
+  padding: 8px 14px;
+  font-size: 0.875em;
+  line-height: 1.7;
+  color: var(--vp-abbr-text);
+  cursor: auto;
+  background-color: var(--vp-abbr-bg);
+  border: solid 1px var(--vp-abbr-border);
+  border-radius: 4px;
+  box-shadow: var(--vp-shadow-2);
+  transform: var(--vp-abbr-transform);
+}
+
+.vp-abbr .vp-abbr-tooltip::before,
+.vp-abbr .vp-abbr-tooltip::after {
+  position: absolute;
+  top: -16px;
+  left: 50%;
+  display: block;
+  width: 0;
+  height: 0;
+  content: "";
+  border: 8px solid transparent;
+  border-bottom-color: var(--vp-abbr-bg);
+  transform: var(--vp-abbr-space-transform);
+}
+
+.vp-abbr .vp-abbr-tooltip::before {
+  top: -17px;
+  border-bottom-color: var(--vp-abbr-border);
+}
+</style>

package/lib/client/components/Annotation.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { onClickOutside, useEventListener } from '@vueuse/core'
+import { computed, nextTick, ref, useTemplateRef, watch } from 'vue'
+
+const props = defineProps<{
+  label: string
+  total: number
+}>()
+
+const active = ref(false)
+const list = computed(() => Array.from({ length: props.total }, (_, i) => i))
+const position = ref({ x: 0, y: 0 })
+
+const popover = useTemplateRef<HTMLDivElement>('popover')
+const button = useTemplateRef<HTMLButtonElement>('button')
+onClickOutside(popover, () => (active.value = false), {
+  ignore: [button],
+})
+
+function updatePosition() {
+  if (__VUEPRESS_SSR__)
+    return
+  if (!active.value || !popover.value || !button.value)
+    return
+  const { x: _x, y: _y, width: w, height: h } = button.value.getBoundingClientRect()
+  const x = _x + w / 2
+  const y = _y + h
+
+  const { width, height } = popover.value.getBoundingClientRect()
+  const { clientWidth, clientHeight } = document.documentElement
+  position.value.x = x + width + 16 > clientWidth ? clientWidth - x - width - 16 : 0
+  position.value.y = y + height + 16 > clientHeight ? clientHeight - y - height - 16 : 0
+}
+
+watch(active, () => nextTick(updatePosition))
+useEventListener('resize', updatePosition)
+</script>
+
+<template>
+  <span class="vp-annotation" :class="{ active, [label]: true }" :aria-label="label">
+    <span ref="button" class="vpi-annotation" @click="active = !active" />
+    <Transition name="fade">
+      <div
+        v-show="active" ref="popover"
+        class="annotations-popover" :class="{ list: list.length > 1 }"
+        :style="{ '--vp-annotation-x': `${position.x}px`, '--vp-annotation-y': `${position.y}px` }"
+      >
+        <div v-for="i in list" :key="label + i" class="annotation">
+          <slot :name="`item-${i}`" />
+        </div>
+      </div>
+    </Transition>
+  </span>
+</template>
+
+<style scoped>
+.vp-annotation {
+  position: relative;
+}
+
+.vpi-annotation {
+  --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' fill-rule='evenodd' d='M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10a10 10 0 0 1-4.262-.951l-4.537.93a1 1 0 0 1-1.18-1.18l.93-4.537A10 10 0 0 1 2 12m10-4a1 1 0 0 1 1 1v2h2a1 1 0 1 1 0 2h-2v2a1 1 0 1 1-2 0v-2H9a1 1 0 1 1 0-2h2V9a1 1 0 0 1 1-1' clip-rule='evenodd'/%3E%3C/svg%3E");
+
+  position: relative;
+  top: -2px;
+  z-index: 2;
+  width: 1.2em;
+  height: 1.2em;
+  color: currentcolor;
+  cursor: pointer;
+  opacity: 0.5;
+  transition: color var(--vp-t-color), opacity var(--vp-t-color), transform var(--vp-t-color);
+  transform: rotate(0deg);
+}
+
+.vp-annotation.active {
+  z-index: 10;
+}
+
+.vp-annotation:where(:hover, .active) .vpi-annotation {
+  color: var(--vp-c-brand-2);
+  opacity: 1;
+}
+
+.vp-annotation.active .vpi-annotation {
+  transform: rotate(-45deg);
+}
+
+.annotations-popover {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: max-content;
+  max-width: min(calc(100vw - 32px), 360px);
+  max-height: 360px;
+  padding: 8px 12px;
+  overflow-y: auto;
+  font-size: 14px;
+  background-color: var(--vp-c-bg);
+  border: solid 1px var(--vp-c-divider);
+  border-radius: 4px;
+  box-shadow: var(--vp-shadow-2);
+  transform: translateX(var(--vp-annotation-x, 0)) translateY(var(--vp-annotation-y, 0));
+}
+
+.annotations-popover.list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px;
+  background-color: var(--vp-c-bg-soft);
+}
+
+.annotations-popover.list .annotation {
+  padding: 4px 12px;
+  background-color: var(--vp-c-bg);
+  border-radius: 4px;
+  box-shadow: var(--vp-shadow-1);
+}
+</style>

package/lib/client/components/ArtPlayer.vue

@@ -77,9 +77,9 @@ function initCustomType(type: string): CustomType {
 
   if ((type === 'mpd' || type === 'dash') && installed.dashjs) {
     customType[type] = async function (video, url, art) {
-      const dashjs = (await import(/* webpackChunkName: "dashjs" */ 'dashjs')).default
-      if (dashjs.supportsMediaSource()) {
-        const dashPlayer = dashjs.MediaPlayer().create()
+      const { supportsMediaSource, MediaPlayer } = (await import(/* webpackChunkName: "dashjs" */ 'dashjs'))
+      if (supportsMediaSource()) {
+        const dashPlayer = MediaPlayer().create()
         dashPlayer.initialize(video, url, props.autoplay, 0)
         art.on('destroy', () => dashPlayer.destroy())
       }

package/lib/node/index.d.ts

@@ -177,6 +177,12 @@ interface ReplEditorData {
 }
 
 interface MarkdownPowerPluginOptions {
+    /**
+     * 是否启用注释
+     * @default false
+     */
+    annotation?: boolean;
+    abbr?: boolean;
     /**
      * 配置代码块分组
      */

package/lib/node/index.js

@@ -3044,6 +3044,198 @@ import { sup } from "@mdit/plugin-sup";
 import { tasklist } from "@mdit/plugin-tasklist";
 import { isPlainObject as isPlainObject3 } from "@vuepress/helper";
 
+// src/node/inline/abbr.ts
+var abbrPlugin = (md) => {
+  const { arrayReplaceAt, escapeRE, lib } = md.utils;
+  const OTHER_CHARS = " \r\n$+<=>^`|~";
+  const UNICODE_PUNCTUATION_REGEXP = lib.ucmicro.P.source;
+  const UNICODE_SPACE_REGEXP = lib.ucmicro.Z.source;
+  const WORDING_REGEXP_TEXT = `${UNICODE_PUNCTUATION_REGEXP}|${UNICODE_SPACE_REGEXP}|[${OTHER_CHARS.split("").map(escapeRE).join("")}]`;
+  const abbrDefinition = (state, startLine, _endLine, silent) => {
+    let labelEnd = -1;
+    let pos = state.bMarks[startLine] + state.tShift[startLine];
+    const max = state.eMarks[startLine];
+    if (pos + 2 >= max || state.src.charAt(pos++) !== "*" || state.src.charAt(pos++) !== "[") {
+      return false;
+    }
+    const labelStart = pos;
+    while (pos < max) {
+      const ch = state.src.charAt(pos);
+      if (ch === "[")
+        return false;
+      if (ch === "]") {
+        labelEnd = pos;
+        break;
+      }
+      if (ch === "\\")
+        pos++;
+      pos++;
+    }
+    if (labelEnd < 0 || state.src.charAt(labelEnd + 1) !== ":")
+      return false;
+    if (silent)
+      return true;
+    const label = state.src.slice(labelStart, labelEnd).replace(/\\(.)/g, "$1");
+    const title = state.src.slice(labelEnd + 2, max).trim();
+    if (!label.length || !title.length)
+      return false;
+    (state.env.abbreviations ??= {})[`:${label}`] ??= title;
+    state.line = startLine + 1;
+    return true;
+  };
+  const abbrReplace = (state) => {
+    const tokens = state.tokens;
+    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 regExp = new RegExp(
+      `(^|${WORDING_REGEXP_TEXT})(${abbreviationsRegExpText})($|${WORDING_REGEXP_TEXT})`,
+      "g"
+    );
+    for (const token of tokens) {
+      if (token.type !== "inline")
+        continue;
+      let children = token.children;
+      for (let index = children.length - 1; index >= 0; index--) {
+        const currentToken = children[index];
+        if (currentToken.type !== "text")
+          continue;
+        const text = currentToken.content;
+        regExp.lastIndex = 0;
+        if (!regexpSimple.test(text))
+          continue;
+        const nodes = [];
+        let match;
+        let pos = 0;
+        while (match = regExp.exec(text)) {
+          const [, before, word, after] = match;
+          if (match.index > 0 || before.length > 0) {
+            const token2 = new state.Token("text", "", 0);
+            token2.content = text.slice(pos, match.index + before.length);
+            nodes.push(token2);
+          }
+          const abbrToken = new state.Token("abbreviation", "Abbreviation", 0);
+          abbrToken.content = word;
+          abbrToken.info = abbreviations[`:${word}`];
+          nodes.push(abbrToken);
+          regExp.lastIndex -= after.length;
+          pos = regExp.lastIndex;
+        }
+        if (!nodes.length)
+          continue;
+        if (pos < text.length) {
+          const token2 = new state.Token("text", "", 0);
+          token2.content = text.slice(pos);
+          nodes.push(token2);
+        }
+        token.children = children = arrayReplaceAt(children, index, nodes);
+      }
+    }
+  };
+  md.block.ruler.before("reference", "abbr_definition", abbrDefinition, {
+    alt: ["paragraph", "reference"]
+  });
+  md.core.ruler.after("linkify", "abbr_replace", abbrReplace);
+  md.renderer.rules.abbreviation = (tokens, idx) => {
+    const { content, info } = tokens[idx];
+    return `<Abbreviation>
+      ${content}
+      ${info ? `<template #tooltip>${md.renderInline(info)}</template>` : ""}
+    </Abbreviation>`;
+  };
+};
+
+// src/node/inline/annotation.ts
+var annotationDef = (state, startLine, endLine, silent) => {
+  const start = state.bMarks[startLine] + state.tShift[startLine];
+  const max = state.eMarks[startLine];
+  if (
+    // line should be at least 5 chars - "[+x]:"
+    start + 4 > max || state.src.charAt(start) !== "[" || state.src.charAt(start + 1) !== "+"
+  ) {
+    return false;
+  }
+  let pos = start + 2;
+  while (pos < max) {
+    if (state.src.charAt(pos) === " ")
+      return false;
+    if (state.src.charAt(pos) === "]")
+      break;
+    pos++;
+  }
+  if (
+    // empty footnote label
+    pos === start + 2 || pos + 1 >= max || state.src.charAt(++pos) !== ":"
+  ) {
+    return false;
+  }
+  if (silent)
+    return true;
+  pos++;
+  state.env.annotations ??= {};
+  const label = state.src.slice(start + 2, pos - 2);
+  const annotation = state.src.slice(pos, max).trim();
+  state.env.annotations[`:${label}`] ??= [];
+  state.env.annotations[`:${label}`].push(annotation);
+  state.line += 1;
+  return true;
+};
+var annotationRef = (state, silent) => {
+  const start = state.pos;
+  const max = state.posMax;
+  if (
+    // should be at least 4 chars - "[+x]"
+    start + 3 > max || typeof state.env.annotations === "undefined" || state.src.charAt(start) !== "[" || state.src.charAt(start + 1) !== "+"
+  ) {
+    return false;
+  }
+  let pos = start + 2;
+  while (pos < max) {
+    if (state.src.charAt(pos) === " " || state.src.charAt(pos) === "\n")
+      return false;
+    if (state.src.charAt(pos) === "]")
+      break;
+    pos++;
+  }
+  if (
+    //  empty annotation labels
+    pos === start + 2 || pos >= max
+  ) {
+    return false;
+  }
+  pos++;
+  const label = state.src.slice(start + 2, pos - 1);
+  const annotations = state.env.annotations?.[`:${label}`] ?? [];
+  if (annotations.length === 0)
+    return false;
+  if (!silent) {
+    const refToken = state.push("annotation_ref", "", 0);
+    refToken.meta = {
+      label,
+      annotations
+    };
+  }
+  state.pos = pos;
+  state.posMax = max;
+  return true;
+};
+var annotationPlugin = (md) => {
+  md.renderer.rules.annotation_ref = (tokens, idx) => {
+    const { label = "", annotations = [] } = tokens[idx].meta ?? {};
+    return `<Annotation label="${label}" :total="${annotations.length}">
+      ${annotations.map((annotation, i) => {
+      return `<template #item-${i}>${md.renderInline(annotation)}</template>`;
+    }).join("\n")}
+    </Annotation>`;
+  };
+  md.inline.ruler.before("image", "annotation_ref", annotationRef);
+  md.block.ruler.before("reference", "annotation", annotationDef, {
+    alt: ["paragraph", "reference"]
+  });
+};
+
 // src/node/inline/icons.ts
 var iconsPlugin = (md, options = {}) => md.inline.ruler.before("emphasis", "iconify", createTokenizer(options));
 function createTokenizer(options) {
@@ -3144,6 +3336,12 @@ function inlineSyntaxPlugin(md, options) {
   md.use(sup);
   md.use(footnote);
   md.use(tasklist);
+  if (options.annotation) {
+    md.use(annotationPlugin);
+  }
+  if (options.abbr) {
+    md.use(abbrPlugin);
+  }
   if (options.icons) {
     md.use(iconsPlugin, isPlainObject3(options.icons) ? options.icons : {});
   }
@@ -3217,6 +3415,14 @@ async function prepareConfigFile(app, options) {
     enhances.add(`app.component('VPDemoBasic', VPDemoBasic)`);
     enhances.add(`app.component('VPDemoNormal', VPDemoNormal)`);
   }
+  if (options.annotation) {
+    imports.add(`import Annotation from '${CLIENT_FOLDER}components/Annotation.vue'`);
+    enhances.add(`app.component('Annotation', Annotation)`);
+  }
+  if (options.abbr) {
+    imports.add(`import Abbreviation from '${CLIENT_FOLDER}components/Abbreviation.vue'`);
+    enhances.add(`app.component('Abbreviation', Abbreviation)`);
+  }
   return app.writeTemp(
     "md-power/config.js",
     `import { defineClientConfig } from 'vuepress/client'

package/lib/shared/index.d.ts

@@ -176,6 +176,12 @@ interface ReplEditorData {
 }
 
 interface MarkdownPowerPluginOptions {
+    /**
+     * 是否启用注释
+     * @default false
+     */
+    annotation?: boolean;
+    abbr?: boolean;
     /**
      * 配置代码块分组
      */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuepress-plugin-md-power",
   "type": "module",
-  "version": "1.0.0-rc.131",
+  "version": "1.0.0-rc.133",
   "description": "The Plugin for VuePress 2 - markdown power",
   "author": "pengzhanbo <volodymyr@foxmail.com>",
   "license": "MIT",
@@ -32,7 +32,7 @@
   ],
   "peerDependencies": {
     "artplayer": "^5.2.0",
-    "dashjs": "^4.7.4",
+    "dashjs": "^5.0.0",
     "esbuild": ">=0.24.2",
     "hls.js": "^1.5.18",
     "less": "^4.2.1",
@@ -41,7 +41,7 @@
     "sass": "^1.83.0",
     "sass-embedded": "^1.83.0",
     "stylus": ">=0.64.0",
-    "vuepress": "2.0.0-rc.19"
+    "vuepress": "2.0.0-rc.20"
   },
   "peerDependenciesMeta": {
     "artplayer": {
@@ -68,17 +68,17 @@
     "@mdit/plugin-sup": "^0.16.0",
     "@mdit/plugin-tab": "^0.16.0",
     "@mdit/plugin-tasklist": "^0.16.0",
-    "@vuepress/helper": "2.0.0-rc.73",
+    "@vuepress/helper": "2.0.0-rc.79",
     "@vueuse/core": "^12.7.0",
     "chokidar": "3.6.0",
     "image-size": "^1.2.0",
     "local-pkg": "^1.0.0",
     "lru-cache": "^11.0.2",
     "markdown-it-container": "^4.0.0",
-    "nanoid": "^5.1.0",
-    "shiki": "^2.4.1",
-    "tm-grammars": "^1.22.14",
-    "tm-themes": "^1.9.12",
+    "nanoid": "^5.1.2",
+    "shiki": "^3.0.0",
+    "tm-grammars": "^1.22.17",
+    "tm-themes": "^1.9.13",
     "vue": "^3.5.13"
   },
   "devDependencies": {