vue-markdown-design 0.3.0 → 0.3.2-beta

package/lib/render/Render.js

@@ -1,181 +1,157 @@
-"use strict";
-require('./index.css');var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
+require('./index.css');const require_runtime = require("../_virtual/_rolldown/runtime.js");
+const require_objectSpread2 = require("../_virtual/_@oxc-project_runtime@0.115.0/helpers/objectSpread2.js");
+;/* empty css       */
+const require_format = require("../utils/format.js");
+const require_functions = require("../utils/functions.js");
+const require_constant = require("../utils/constant.js");
+let lodash = require("lodash");
+let vue = require("vue");
+let highlight_js = require("highlight.js");
+highlight_js = require_runtime.__toESM(highlight_js);
+let markdown_it_emoji = require("markdown-it-emoji");
+let _markdown_design_markdown_it_sanitize = require("@markdown-design/markdown-it-sanitize");
+let markdown_it_anchor = require("markdown-it-anchor");
+markdown_it_anchor = require_runtime.__toESM(markdown_it_anchor);
+let markdown_it = require("markdown-it");
+markdown_it = require_runtime.__toESM(markdown_it);
+//#region src/render/Render.tsx
+var defaultBoolean = {
+	type: Boolean,
+	default: void 0
 };
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const vue = require("vue");
-;/* empty css            */
-const hljs = require("highlight.js");
-const markdownItEmoji = require("markdown-it-emoji");
-const markdownItSanitize = require("@markdown-design/markdown-it-sanitize");
-const format = require("../utils/format.js");
-const anchor = require("markdown-it-anchor");
-const lodash = require("lodash");
-const MarkdownIt = require("markdown-it");
-const functions = require("../utils/functions.js");
-const constant = require("../utils/constant.js");
-const defaultBoolean = {
-  type: Boolean,
-  default: void 0
+var { name, addPrefix } = require_format.createNamespace("render");
+var renderProps = {
+	src: {
+		type: [String, Number],
+		default: ""
+	},
+	plugins: {
+		type: [Function, Array],
+		default: () => []
+	},
+	inline: Boolean,
+	presetName: {
+		type: String,
+		default: "default"
+	},
+	html: {
+		type: Boolean,
+		default: true
+	},
+	sanitize: {
+		type: [Boolean, Object],
+		default: true
+	},
+	xhtmlOut: defaultBoolean,
+	breaks: defaultBoolean,
+	langPrefix: String,
+	linkify: defaultBoolean,
+	typographer: defaultBoolean,
+	quotes: [String, Array],
+	highlight: {
+		type: [
+			Boolean,
+			Function,
+			null
+		],
+		default: true
+	},
+	highlightOptions: Object,
+	emoji: {
+		type: [Boolean, Object],
+		default: true
+	},
+	anchor: {
+		type: [
+			Boolean,
+			Object,
+			Function
+		],
+		default: true
+	},
+	permalink: {
+		type: Boolean,
+		default: true
+	},
+	markdownClass: {
+		type: String,
+		default: "markdown-body"
+	}
 };
-const {
-  name,
-  addPrefix
-} = format.createNamespace("render");
-const renderProps = {
-  src: {
-    type: [String, Number],
-    default: ""
-  },
-  plugins: {
-    type: [Function, Array],
-    default: () => []
-  },
-  inline: Boolean,
-  presetName: {
-    type: String,
-    default: "default"
-  },
-  html: {
-    type: Boolean,
-    default: true
-  },
-  sanitize: {
-    type: [Boolean, Object],
-    default: true
-  },
-  xhtmlOut: defaultBoolean,
-  breaks: defaultBoolean,
-  langPrefix: String,
-  linkify: defaultBoolean,
-  typographer: defaultBoolean,
-  quotes: [String, Array],
-  highlight: {
-    type: [Boolean, Function, null],
-    default: true
-  },
-  highlightOptions: Object,
-  emoji: {
-    type: [Boolean, Object],
-    default: true
-  },
-  anchor: {
-    type: [Boolean, Object, Function],
-    default: true
-  },
-  permalink: {
-    type: Boolean,
-    default: true
-  },
-  markdownClass: {
-    type: String,
-    default: "markdown-body"
-  }
-};
-const renderEmits = {
-  envChange: (payload) => lodash.isObject(payload)
-};
-const _Render = /* @__PURE__ */ vue.defineComponent({
-  name,
-  props: renderProps,
-  emits: renderEmits,
-  setup(props, {
-    emit,
-    expose
-  }) {
-    const mdInstance = new MarkdownIt(props.presetName);
-    const optionKeys = ["html", "xhtmlOut", "breaks", "langPrefix", "linkify", "typographer", "quotes"];
-    vue.watch(() => optionKeys.map((key) => props[key]), () => {
-      mdInstance.set(lodash.pickBy(props, (value, key) => optionKeys.includes(key) && !lodash.isUndefined(value)));
-    }, {
-      immediate: true
-    });
-    props.highlightOptions && hljs.configure(props.highlightOptions);
-    vue.watchEffect(() => {
-      let highlight = props.highlight || null;
-      if (highlight === true) {
-        highlight = (str, language) => {
-          const {
-            getLanguage,
-            highlight: highlight2,
-            highlightAuto
-          } = hljs;
-          const {
-            value
-          } = getLanguage(language) ? highlight2(str, {
-            language
-          }) : highlightAuto(str);
-          return value;
-        };
-      }
-      mdInstance.set({
-        highlight
-      });
-    });
-    functions.runFnWithOptions(props.sanitize, (options) => mdInstance.use(markdownItSanitize.sanitize, options));
-    functions.runFnWithOptions(props.emoji, (options) => mdInstance.use(markdownItEmoji.full, options));
-    functions.runFnWithOptions(props.anchor, (options = {}) => {
-      const permalink = props.permalink ? {
-        permalink: anchor.permalink.linkInsideHeader({
-          placement: "before",
-          class: addPrefix("__anchor"),
-          space: false,
-          renderAttrs: () => ({
-            [constant.DATA_ANCHOR]: ""
-          })
-          // 适配 toc 组件，使之可以准确获取 HTMLHeadingElement
-        })
-      } : {};
-      const anchorOptions = lodash.isFunction(options) ? options(anchor) : options;
-      mdInstance.use(anchor, __spreadValues(__spreadValues({}, permalink), anchorOptions));
-    });
-    const getPlugins = () => {
-      const {
-        plugins
-      } = props;
-      return Array.isArray(plugins) ? plugins.map(format.allToArray) : [[plugins]];
-    };
-    getPlugins().forEach((plugin) => mdInstance.use(...plugin));
-    const refreshKeys = ["src", "inline", "highlight", ...optionKeys];
-    const htmlStr = vue.ref("");
-    vue.watch(() => refreshKeys.map((key) => props[key]), () => {
-      const {
-        src,
-        inline
-      } = props;
-      const env = {};
-      htmlStr.value = mdInstance[inline ? "renderInline" : "render"](String(src), env);
-      emit("envChange", env);
-    }, {
-      immediate: true
-    });
-    expose({
-      mdInstance,
-      htmlStr
-    });
-    return () => vue.createVNode("div", {
-      "class": name
-    }, [vue.createVNode("div", {
-      "class": [addPrefix("__wrapper"), props.markdownClass, {
-        [addPrefix("--permalink")]: props.permalink
-      }],
-      "innerHTML": htmlStr.value
-    }, null)]);
-  }
+var renderEmits = { envChange: (payload) => (0, lodash.isObject)(payload) };
+var Render_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	name,
+	props: renderProps,
+	emits: renderEmits,
+	setup(props, { emit, expose }) {
+		const mdInstance = new markdown_it.default(props.presetName);
+		const optionKeys = [
+			"html",
+			"xhtmlOut",
+			"breaks",
+			"langPrefix",
+			"linkify",
+			"typographer",
+			"quotes"
+		];
+		(0, vue.watch)(() => optionKeys.map((key) => props[key]), () => {
+			mdInstance.set((0, lodash.pickBy)(props, (value, key) => optionKeys.includes(key) && !(0, lodash.isUndefined)(value)));
+		}, { immediate: true });
+		props.highlightOptions && highlight_js.default.configure(props.highlightOptions);
+		(0, vue.watchEffect)(() => {
+			let highlight = props.highlight || null;
+			if (highlight === true) highlight = (str, language) => {
+				const { getLanguage, highlight, highlightAuto } = highlight_js.default;
+				const { value } = getLanguage(language) ? highlight(str, { language }) : highlightAuto(str);
+				return value;
+			};
+			mdInstance.set({ highlight });
+		});
+		require_functions.runFnWithOptions(props.sanitize, (options) => mdInstance.use(_markdown_design_markdown_it_sanitize.sanitize, options));
+		require_functions.runFnWithOptions(props.emoji, (options) => mdInstance.use(markdown_it_emoji.full, options));
+		require_functions.runFnWithOptions(props.anchor, (options = {}) => {
+			const permalink = props.permalink ? { permalink: markdown_it_anchor.default.permalink.linkInsideHeader({
+				placement: "before",
+				class: addPrefix("__anchor"),
+				space: false,
+				renderAttrs: () => ({ [require_constant.DATA_ANCHOR]: "" })
+			}) } : {};
+			const anchorOptions = (0, lodash.isFunction)(options) ? options(markdown_it_anchor.default) : options;
+			mdInstance.use(markdown_it_anchor.default, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, permalink), anchorOptions));
+		});
+		const getPlugins = () => {
+			const { plugins } = props;
+			return Array.isArray(plugins) ? plugins.map(require_format.allToArray) : [[plugins]];
+		};
+		getPlugins().forEach((plugin) => mdInstance.use(...plugin));
+		const refreshKeys = [
+			"src",
+			"inline",
+			"highlight",
+			...optionKeys
+		];
+		const htmlStr = (0, vue.ref)("");
+		(0, vue.watch)(() => refreshKeys.map((key) => props[key]), () => {
+			const { src, inline } = props;
+			const env = {};
+			htmlStr.value = mdInstance[inline ? "renderInline" : "render"](String(src), env);
+			emit("envChange", env);
+		}, { immediate: true });
+		expose({
+			mdInstance,
+			htmlStr
+		});
+		return () => (0, vue.createVNode)("div", { "class": name }, [(0, vue.createVNode)("div", {
+			"class": [
+				addPrefix("__wrapper"),
+				props.markdownClass,
+				{ [addPrefix("--permalink")]: props.permalink }
+			],
+			"innerHTML": htmlStr.value
+		}, null)]);
+	}
 });
-exports.default = _Render;
+//#endregion
+exports.default = Render_default;
 exports.renderEmits = renderEmits;
 exports.renderProps = renderProps;

package/lib/render/index.css

@@ -1,16 +1,26 @@
-/* light */
+/*light */
 .markdown-body {
   color-scheme: light;
+  /** CSS default easing. Use for hover state changes and micro-interactions. */
+  /** Accelerating motion. Use for elements exiting the viewport (moving off-screen). */
+  /** Smooth acceleration and deceleration. Use for elements moving or morphing within the viewport. */
+  /** Decelerating motion. Use for elements entering the viewport or appearing on screen. */
+  /** Constant motion with no acceleration. Use for continuous animations like progress bars or loaders. */
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
   margin: 0;
+  font-weight: 400;
   color: #1f2328;
   background-color: #ffffff;
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
   font-size: 16px;
   line-height: 1.5;
   word-wrap: break-word;
 }
+.markdown-body a {
+  text-decoration: underline;
+  text-underline-offset: .2rem;
+}
 .markdown-body .octicon {
   display: inline-block;
   fill: currentColor;
@@ -42,7 +52,7 @@
   display: none !important;
 }
 .markdown-body a {
-  background-color: transparent;
+  background-color: rgba(0,0,0,0);
   color: #0969da;
   text-decoration: none;
 }
@@ -103,7 +113,7 @@
 .markdown-body hr {
   box-sizing: content-box;
   overflow: hidden;
-  background: transparent;
+  background: rgba(0,0,0,0);
   border-bottom: 1px solid #d1d9e0b3;
   height: .25em;
   padding: 0;
@@ -184,7 +194,7 @@
 .markdown-body [role=button]:focus,
 .markdown-body input[type=radio]:focus,
 .markdown-body input[type=checkbox]:focus {
-  outline: 2px solid #0969da;
+  outline: 2px solid var(--borderColor-accent-emphasis);
   outline-offset: -2px;
   box-shadow: none;
 }
@@ -192,13 +202,13 @@
 .markdown-body [role=button]:focus:not(:focus-visible),
 .markdown-body input[type=radio]:focus:not(:focus-visible),
 .markdown-body input[type=checkbox]:focus:not(:focus-visible) {
-  outline: solid 1px transparent;
+  outline: solid 1px rgba(0,0,0,0);
 }
 .markdown-body a:focus-visible,
 .markdown-body [role=button]:focus-visible,
 .markdown-body input[type=radio]:focus-visible,
 .markdown-body input[type=checkbox]:focus-visible {
-  outline: 2px solid #0969da;
+  outline: 2px solid var(--borderColor-accent-emphasis);
   outline-offset: -2px;
   box-shadow: none;
 }
@@ -218,10 +228,10 @@
   color: #1f2328;
   vertical-align: middle;
   background-color: #f6f8fa;
-  border: solid 1px #d1d9e0b3;
-  border-bottom-color: #d1d9e0b3;
+  border: solid 1px var(--borderColor-muted);
+  border-bottom-color: var(--borderColor-muted);
   border-radius: 6px;
-  box-shadow: inset 0 -1px 0 #d1d9e0b3;
+  box-shadow: inset 0 -1px 0 var(--borderColor-muted);
 }
 .markdown-body h1,
 .markdown-body h2,
@@ -492,7 +502,7 @@
   background-color: #f6f8fa;
 }
 .markdown-body table img {
-  background-color: transparent;
+  background-color: rgba(0,0,0,0);
 }
 .markdown-body img[align=right] {
   padding-left: 20px;
@@ -503,7 +513,7 @@
 .markdown-body .emoji {
   max-width: none;
   vertical-align: text-top;
-  background-color: transparent;
+  background-color: rgba(0,0,0,0);
 }
 .markdown-body span.frame {
   display: block;
@@ -606,7 +616,7 @@
   margin: 0;
   word-break: normal;
   white-space: pre;
-  background: transparent;
+  background: rgba(0,0,0,0);
   border: 0;
 }
 .markdown-body .highlight {
@@ -629,13 +639,12 @@
 .markdown-body pre code,
 .markdown-body pre tt {
   display: inline;
-  max-width: auto;
   padding: 0;
   margin: 0;
   overflow: visible;
   line-height: inherit;
   word-wrap: normal;
-  background-color: transparent;
+  background-color: rgba(0,0,0,0);
   border: 0;
 }
 .markdown-body .csv-data td,
@@ -700,9 +709,6 @@
 .markdown-body .footnotes .data-footnote-backref g-emoji {
   font-family: monospace;
 }
-.markdown-body body:has(:modal) {
-  padding-right: var(--dialog-scrollgutter) !important;
-}
 .markdown-body .pl-c {
   color: #59636e;
 }
@@ -741,8 +747,8 @@
   color: #82071e;
 }
 .markdown-body .pl-ii {
-  color: #f6f8fa;
-  background-color: #82071e;
+  color: var(--fgColor-danger);
+  background-color: var(--bgColor-danger-muted);
 }
 .markdown-body .pl-c2 {
   color: #f6f8fa;
@@ -825,6 +831,16 @@
   width: 1em;
   height: 1em;
 }
+.markdown-body a:has(>p,>div,>pre,>blockquote) {
+  display: block;
+}
+.markdown-body a:has(>p,>div,>pre,>blockquote):not(:has(.snippet-clipboard-content,>pre)) {
+  width: fit-content;
+}
+.markdown-body a:has(>p,>div,>pre,>blockquote):has(.snippet-clipboard-content,>pre):focus-visible {
+  outline: 2px solid var(--borderColor-accent-emphasis);
+  outline-offset: 2px;
+}
 .markdown-body .task-list-item {
   list-style-type: none;
 }
@@ -856,7 +872,7 @@
   width: auto;
   height: 24px;
   overflow: visible;
-  clip: auto;
+  clip-path: none;
 }
 .markdown-body ::-webkit-calendar-picker-indicator {
   filter: invert(50%);

package/lib/render/index2.js

@@ -0,0 +1,6 @@
+const require_vue = require("../utils/vue.js");
+const require_Render = require("./Render.js");
+//#region src/render/index.ts
+var VmdRender = require_vue.withInstall(require_Render.default);
+//#endregion
+exports.default = VmdRender;