vuepress-plugin-md-power 1.0.0-rc.97 → 1.0.0-rc.99

package/lib/client/components/CanIUse.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed, getCurrentInstance, ref } from 'vue'
 import { useEventListener } from '@vueuse/core'
+import { computed, getCurrentInstance, ref } from 'vue'
 
 interface MessageData {
   type: string

package/lib/client/components/CodeEditor.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { getHighlighterCore } from 'shiki/core'
-import type { HighlighterCore } from 'shiki/core'
 import editorData from '@internal/md-power/replEditorData'
+import { getHighlighterCore } from 'shiki/core'
 import { onMounted, onUnmounted, ref, shallowRef, watch } from 'vue'
+import type { HighlighterCore } from 'shiki/core'
 import { resolveCodeInfo } from '../composables/codeRepl.js'
 
 let highlighter: HighlighterCore | null = null

package/lib/client/components/CodeRepl.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { defineAsyncComponent, shallowRef } from 'vue'
 import { useCodeRepl } from '../composables/codeRepl.js'
+import IconClose from './IconClose.vue'
+import IconConsole from './IconConsole.vue'
 import IconRun from './IconRun.vue'
 import Loading from './Loading.vue'
-import IconConsole from './IconConsole.vue'
-import IconClose from './IconClose.vue'
 
 defineProps<{
   editable?: boolean

package/lib/client/components/FileTreeItem.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { onMounted, onUnmounted, ref } from 'vue'
 
 const props = defineProps<{
   type: 'file' | 'folder'
@@ -10,13 +10,22 @@ const props = defineProps<{
 const active = ref(!!props.expanded)
 const el = ref<HTMLElement>()
 
+function toggle() {
+  active.value = !active.value
+}
+
 onMounted(() => {
   if (!el.value || props.type !== 'folder')
     return
 
-  el.value.querySelector('.tree-node.folder')?.addEventListener('click', () => {
-    active.value = !active.value
-  })
+  el.value.querySelector('.tree-node.folder')?.addEventListener('click', toggle)
+})
+
+onUnmounted(() => {
+  if (!el.value || props.type !== 'folder')
+    return
+
+  el.value.querySelector('.tree-node.folder')?.removeEventListener('click', toggle)
 })
 </script>
 
@@ -45,6 +54,15 @@ onMounted(() => {
   transition: border var(--t-color), background-color var(--t-color);
 }
 
+.vp-file-tree .vp-file-tree-title {
+  padding-left: 16px;
+  margin: -16px -16px 0;
+  font-weight: bold;
+  color: var(--vp-c-text-1);
+  border-bottom: solid 1px var(--vp-c-divider);
+  transition: color var(--t-color), border-color var(--t-color);
+}
+
 .vp-file-tree ul {
   padding: 0 !important;
   margin: 0 !important;
@@ -105,7 +123,7 @@ onMounted(() => {
   transition: color var(--t-color);
 }
 
-.file-tree-item .tree-node.file .name.focus {
+.file-tree-item .tree-node .name.focus {
   font-weight: bold;
   color: var(--vp-c-brand-1);
   transition: color var(--t-color);

package/lib/client/components/PDFViewer.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { onMounted, toRefs } from 'vue'
-import type { PDFTokenMeta } from '../../shared/index.js'
-import { useSize } from '../composables/size.js'
 import { usePDF } from '../composables/pdf.js'
+import { useSize } from '../composables/size.js'
+import type { PDFTokenMeta } from '../../shared/index.js'
 
 const props = defineProps<PDFTokenMeta>()
 

package/lib/client/components/Plot.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { computed, ref, shallowRef } from 'vue'
 import { onClickOutside, useMediaQuery } from '@vueuse/core'
+import { computed, ref, shallowRef } from 'vue'
 import { usePageFrontmatter } from 'vuepress/client'
-import type { PlotOptions } from '../../shared/index.js'
 import { pluginOptions } from '../options.js'
+import type { PlotOptions } from '../../shared/index.js'
 
 const props = defineProps<Omit<PlotOptions, 'tag'>>()
 

package/lib/client/components/Replit.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref } from 'vue'
-import type { ReplitTokenMeta } from '../../shared/index.js'
 import Loading from './Loading.vue'
+import type { ReplitTokenMeta } from '../../shared/index.js'
 
 const props = defineProps<ReplitTokenMeta>()
 

package/lib/client/composables/pdf.js

@@ -1,8 +1,8 @@
 // src/client/composables/pdf.ts
-import { ensureEndingSlash, isLinkHttp } from "vuepress/shared";
 import { withBase } from "vuepress/client";
+import { ensureEndingSlash, isLinkHttp } from "vuepress/shared";
 import { pluginOptions } from "../options.js";
-import { checkIsMobile, checkIsSafari, checkIsiPad } from "../utils/is.js";
+import { checkIsiPad, checkIsMobile, checkIsSafari } from "../utils/is.js";
 function queryStringify(options) {
   const { page, noToolbar, zoom } = options;
   const params = [

package/lib/client/utils/link.js

@@ -1,6 +1,6 @@
 // src/client/utils/link.ts
-import { isLinkHttp } from "vuepress/shared";
 import { withBase } from "vuepress/client";
+import { isLinkHttp } from "vuepress/shared";
 function normalizeLink(url) {
   return isLinkHttp(url) ? url : withBase(url);
 }

package/lib/node/index.d.ts

@@ -1,5 +1,6 @@
-import { Plugin } from 'vuepress/core';
 import { BuiltinTheme, ThemeRegistration } from 'shiki';
+import { App } from 'vuepress';
+import { Plugin } from 'vuepress/core';
 
 type CanIUseMode = 'embed' | 'image';
 interface CanIUseTokenMeta {
@@ -26,61 +27,6 @@ interface SizeOptions {
     ratio?: number | string;
 }
 
-type PDFEmbedType = 'iframe' | 'embed' | 'pdfjs';
-interface PDFTokenMeta extends SizeOptions {
-    page?: number;
-    noToolbar?: boolean;
-    zoom?: number;
-    src?: string;
-    title?: string;
-}
-interface PDFOptions {
-    /**
-     * pdfjs url
-     */
-    pdfjsUrl?: string;
-}
-
-interface IconsOptions {
-    /**
-     * The prefix of the icon className
-     * @default 'vp-mdi'
-     */
-    prefix?: string;
-    /**
-     * The size of the icon
-     * @default '1em'
-     */
-    size?: string | number;
-    /**
-     * The color of the icon
-     * @default 'currentColor'
-     */
-    color?: string;
-}
-
-interface VideoOptions {
-    bilibili?: boolean;
-    youtube?: boolean;
-}
-interface BilibiliTokenMeta extends SizeOptions {
-    title?: string;
-    bvid?: string;
-    aid?: string;
-    cid?: string;
-    autoplay?: boolean;
-    time?: string | number;
-    page?: number;
-}
-interface YoutubeTokenMeta extends SizeOptions {
-    title?: string;
-    id: string;
-    autoplay?: boolean;
-    loop?: boolean;
-    start?: string | number;
-    end?: string | number;
-}
-
 interface CodepenTokenMeta extends SizeOptions {
     title?: string;
     user?: string;
@@ -102,32 +48,22 @@ interface CodeSandboxTokenMeta extends SizeOptions {
     console?: boolean;
 }
 
-type ThemeOptions = BuiltinTheme | {
-    light: BuiltinTheme;
-    dark: BuiltinTheme;
-};
-interface ReplOptions {
-    theme?: ThemeOptions;
-    go?: boolean;
-    kotlin?: boolean;
-    rust?: boolean;
-}
-interface ReplEditorData {
-    grammars: {
-        go?: any;
-        kotlin?: any;
-        rust?: any;
-    };
-    theme: ThemeRegistration | {
-        light: ThemeRegistration;
-        dark: ThemeRegistration;
-    };
-}
-
-interface ReplitTokenMeta extends SizeOptions {
-    title?: string;
-    source?: string;
-    theme?: string;
+interface IconsOptions {
+    /**
+     * The prefix of the icon className
+     * @default 'vp-mdi'
+     */
+    prefix?: string;
+    /**
+     * The size of the icon
+     * @default '1em'
+     */
+    size?: string | number;
+    /**
+     * The color of the icon
+     * @default 'currentColor'
+     */
+    color?: string;
 }
 
 interface JSFiddleTokenMeta extends SizeOptions {
@@ -138,6 +74,21 @@ interface JSFiddleTokenMeta extends SizeOptions {
     tab?: string;
 }
 
+type PDFEmbedType = 'iframe' | 'embed' | 'pdfjs';
+interface PDFTokenMeta extends SizeOptions {
+    page?: number;
+    noToolbar?: boolean;
+    zoom?: number;
+    src?: string;
+    title?: string;
+}
+interface PDFOptions {
+    /**
+     * pdfjs url
+     */
+    pdfjsUrl?: string;
+}
+
 interface PlotOptions {
     /**
      * 是否启用 `=| |=`  markdown （该标记为非标准标记，脱离插件将不生效）
@@ -166,24 +117,171 @@ interface PlotOptions {
     trigger?: 'hover' | 'click';
 }
 
+type ThemeOptions = BuiltinTheme | {
+    light: BuiltinTheme;
+    dark: BuiltinTheme;
+};
+interface ReplOptions {
+    theme?: ThemeOptions;
+    go?: boolean;
+    kotlin?: boolean;
+    rust?: boolean;
+}
+interface ReplEditorData {
+    grammars: {
+        go?: any;
+        kotlin?: any;
+        rust?: any;
+    };
+    theme: ThemeRegistration | {
+        light: ThemeRegistration;
+        dark: ThemeRegistration;
+    };
+}
+
 interface MarkdownPowerPluginOptions {
+    /**
+     * 是否启用 PDF 嵌入语法
+     *
+     * `@[pdf](pdf_url)`
+     *
+     * @default false
+     */
     pdf?: boolean | PDFOptions;
+    /**
+     * 是否启用 iconify 图标嵌入语法
+     *
+     * `:[collect:icon_name]:`
+     *
+     * @default false
+     */
     icons?: boolean | IconsOptions;
+    /**
+     * 是否启用 隐秘文本 语法
+     *
+     * `!!plot_content!!`
+     *
+     * @default false
+     */
     plot?: boolean | PlotOptions;
+    /**
+     * 是否启用 bilibili 视频嵌入
+     *
+     * `@[bilibili](bid)`
+     *
+     * @default false
+     */
     bilibili?: boolean;
+    /**
+     * 是否启用 youtube 视频嵌入
+     *
+     * `@[youtube](video_id)`
+     *
+     * @default false
+     */
     youtube?: boolean;
+    /**
+     * 是否启用 codepen 嵌入
+     *
+     * `@[codepen](pen_id)`
+     *
+     * @default false
+     */
     codepen?: boolean;
     /**
      * @deprecated
      */
     replit?: boolean;
+    /**
+     * 是否启用 codeSandbox 嵌入
+     *
+     * `@[codesandbox](codesandbox_id)`
+     *
+     * @default false
+     */
     codeSandbox?: boolean;
+    /**
+     * 是否启用 jsfiddle 嵌入
+     *
+     * `@[jsfiddle](jsfiddle_id)`
+     *
+     * @default false
+     */
     jsfiddle?: boolean;
+    /**
+     * 是否启用 REPL 容器语法
+     *
+     * @default false
+     */
     repl?: false | ReplOptions;
+    /**
+     * 是否启用 文件树 容器语法
+     *
+     * @default false
+     */
     fileTree?: boolean;
+    /**
+     * 是否启用 caniuse 嵌入语法
+     *
+     * `@[caniuse](feature_name)`
+     *
+     * @default false
+     */
     caniuse?: boolean | CanIUseOptions;
+    /**
+     * 是否启用 自动填充 图片宽高属性
+     *
+     * __请注意，无论是否启用，该功能仅在构建生产包时生效__
+     *
+     * - 如果为 `true` ，等同于 `'local'`
+     * - 如果为 `local`，则仅对本地图片 添加 width 和 height
+     * - 如果为 `all`，则对所有图片(即包括 本地 和 远程) 添加 width 和 height
+     *
+     * 图片在加载过程中如果比较慢，从加载到完成的过程会导致页面布局不稳定，导致内容闪烁等。
+     * 此功能通过给图片添加 `width` 和 `height` 属性来解决该问题。
+     *
+     * 请谨慎使用 `all` 选项，该选项会在构建阶段发起网络请求，尝试加载远程图片以获取图片尺寸信息，
+     * 这可能会导致 构建时间变得更长（幸运的是获取尺寸信息只需要加载图片 几 KB 的数据包，因此耗时不会过长）
+     *
+     * @default false
+     */
+    imageSize?: boolean | 'local' | 'all';
+}
+
+interface ReplitTokenMeta extends SizeOptions {
+    title?: string;
+    source?: string;
+    theme?: string;
+}
+
+interface VideoOptions {
+    bilibili?: boolean;
+    youtube?: boolean;
+}
+interface BilibiliTokenMeta extends SizeOptions {
+    title?: string;
+    bvid?: string;
+    aid?: string;
+    cid?: string;
+    autoplay?: boolean;
+    time?: string | number;
+    page?: number;
+}
+interface YoutubeTokenMeta extends SizeOptions {
+    title?: string;
+    id: string;
+    autoplay?: boolean;
+    loop?: boolean;
+    start?: string | number;
+    end?: string | number;
+}
+
+interface ImgSize {
+    width: number;
+    height: number;
 }
+declare function resolveImageSize(app: App, url: string, remote?: boolean): Promise<ImgSize>;
 
 declare function markdownPowerPlugin(options?: MarkdownPowerPluginOptions): Plugin;
 
-export { type BilibiliTokenMeta, type CanIUseMode, type CanIUseOptions, type CanIUseTokenMeta, type CodeSandboxTokenMeta, type CodepenTokenMeta, type IconsOptions, type JSFiddleTokenMeta, type MarkdownPowerPluginOptions, type PDFEmbedType, type PDFOptions, type PDFTokenMeta, type PlotOptions, type ReplEditorData, type ReplOptions, type ReplitTokenMeta, type SizeOptions, type ThemeOptions, type VideoOptions, type YoutubeTokenMeta, markdownPowerPlugin };
+export { type BilibiliTokenMeta, type CanIUseMode, type CanIUseOptions, type CanIUseTokenMeta, type CodeSandboxTokenMeta, type CodepenTokenMeta, type IconsOptions, type JSFiddleTokenMeta, type MarkdownPowerPluginOptions, type PDFEmbedType, type PDFOptions, type PDFTokenMeta, type PlotOptions, type ReplEditorData, type ReplOptions, type ReplitTokenMeta, type SizeOptions, type ThemeOptions, type VideoOptions, type YoutubeTokenMeta, markdownPowerPlugin, resolveImageSize };