@hejiayue/x-markdown-test 0.0.1-beta.136 → 0.0.1-beta.139

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,142 +0,0 @@
1
- import { defineComponent, ref, computed, nextTick, watch, onMounted, createElementBlock, openBlock, normalizeClass, createElementVNode, renderSlot } from "vue";
2
- import { debounce } from "lodash-es";
3
- import { useMermaid, useMermaidZoom, downloadSvgAsPng } from "./x-markdown.es9.js";
4
- const _hoisted_1 = {
5
- key: 0,
6
- class: "syntax-mermaid__loading"
7
- };
8
- const _hoisted_2 = ["innerHTML"];
9
- const _sfc_main = /* @__PURE__ */ defineComponent({
10
- __name: "SyntaxMermaid",
11
- props: {
12
- content: { default: "" },
13
- id: { default: "mermaid-default" },
14
- isDark: { type: Boolean, default: false },
15
- config: { default: () => ({}) }
16
- },
17
- emits: ["degraded", "ready"],
18
- setup(__props, { expose: __expose, emit: __emit }) {
19
- const props = __props;
20
- const emit = __emit;
21
- const renderContainerRef = ref(null);
22
- const mermaidContent = computed(() => props.content);
23
- const mermaidOptions = computed(() => ({
24
- id: props.id,
25
- theme: props.isDark ? "dark" : "default",
26
- config: props.config,
27
- container: renderContainerRef.value
28
- }));
29
- const mermaidResult = useMermaid(mermaidContent, mermaidOptions);
30
- const svg = ref("");
31
- const isLoading = computed(() => mermaidResult.isLoading.value);
32
- const error = computed(() => mermaidResult.error.value);
33
- const containerRef = ref(null);
34
- const zoomControls = useMermaidZoom({
35
- container: containerRef
36
- });
37
- const debouncedInitialize = debounce(initializeZoom, 500);
38
- function initializeZoom() {
39
- nextTick(() => {
40
- if (containerRef.value) {
41
- zoomControls.initialize();
42
- }
43
- });
44
- }
45
- watch(
46
- () => mermaidResult.data.value,
47
- (newSvg, oldSvg) => {
48
- console.log("[SyntaxMermaid] mermaidResult.data.value changed:", {
49
- oldSvg,
50
- newSvg,
51
- isNewSvg: !!newSvg,
52
- startsWithSvg: newSvg?.trim().startsWith("<svg"),
53
- preview: newSvg?.substring(0, 50)
54
- });
55
- if (newSvg) {
56
- svg.value = newSvg;
57
- debouncedInitialize();
58
- if (newSvg.trim().startsWith("<svg")) {
59
- console.log("[SyntaxMermaid] Emitting ready event - Mermaid is available");
60
- emit("ready");
61
- } else {
62
- console.log("[SyntaxMermaid] Emitting degraded event - Mermaid not available");
63
- emit("degraded");
64
- }
65
- }
66
- },
67
- { immediate: true }
68
- );
69
- watch(svg, (newSvg) => {
70
- if (newSvg) {
71
- debouncedInitialize();
72
- }
73
- });
74
- function zoomIn() {
75
- zoomControls?.zoomIn();
76
- }
77
- function zoomOut() {
78
- zoomControls?.zoomOut();
79
- }
80
- function reset() {
81
- zoomControls?.reset();
82
- }
83
- function fullscreen() {
84
- zoomControls?.fullscreen();
85
- zoomControls?.reset();
86
- }
87
- function download() {
88
- downloadSvgAsPng(svg.value);
89
- }
90
- function getSvg() {
91
- return svg.value;
92
- }
93
- function reinitialize() {
94
- debouncedInitialize();
95
- }
96
- onMounted(() => {
97
- if (svg.value) {
98
- debouncedInitialize();
99
- }
100
- });
101
- __expose({
102
- svg,
103
- isLoading,
104
- error,
105
- containerRef,
106
- zoomIn,
107
- zoomOut,
108
- reset,
109
- fullscreen,
110
- download,
111
- getSvg,
112
- reinitialize
113
- });
114
- return (_ctx, _cache) => {
115
- return openBlock(), createElementBlock("div", {
116
- ref_key: "containerRef",
117
- ref: containerRef,
118
- class: normalizeClass(["syntax-mermaid", { "syntax-mermaid--dark": props.isDark }])
119
- }, [
120
- createElementVNode("div", {
121
- ref_key: "renderContainerRef",
122
- ref: renderContainerRef,
123
- class: "syntax-mermaid__render-container",
124
- "aria-hidden": "true"
125
- }, null, 512),
126
- isLoading.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
127
- renderSlot(_ctx.$slots, "loading", {}, () => [
128
- _cache[0] || (_cache[0] = createElementVNode("span", { class: "syntax-mermaid__loading-text" }, "加载中...", -1))
129
- ])
130
- ])) : (openBlock(), createElementBlock("div", {
131
- key: 1,
132
- class: "syntax-mermaid__content",
133
- innerHTML: svg.value
134
- }, null, 8, _hoisted_2))
135
- ], 2);
136
- };
137
- }
138
- });
139
- export {
140
- _sfc_main as default
141
- };
142
- //# sourceMappingURL=x-markdown.es28.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"x-markdown.es28.js","sources":["../src/components/Mermaid/SyntaxMermaid.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { computed, nextTick, ref, watch, onMounted } from 'vue'\r\nimport { debounce } from 'lodash-es'\r\nimport { useMermaid, useMermaidZoom, downloadSvgAsPng } from '../../hooks'\r\n\r\ninterface SyntaxMermaidProps {\r\n content: string\r\n id?: string\r\n isDark?: boolean\r\n config?: Record<string, any>\r\n}\r\n\r\nconst props = withDefaults(defineProps<SyntaxMermaidProps>(), {\r\n content: '',\r\n id: 'mermaid-default',\r\n isDark: false,\r\n config: () => ({}),\r\n})\r\n\r\nconst emit = defineEmits<{\r\n degraded: []\r\n ready: []\r\n}>()\r\n\r\nconst renderContainerRef = ref<HTMLElement | null>(null)\r\n\r\nconst mermaidContent = computed(() => props.content)\r\nconst mermaidOptions = computed(() => ({\r\n id: props.id,\r\n theme: props.isDark ? 'dark' : 'default',\r\n config: props.config,\r\n container: renderContainerRef.value,\r\n}))\r\nconst mermaidResult = useMermaid(mermaidContent, mermaidOptions)\r\n\r\nconst svg = ref('')\r\nconst isLoading = computed(() => mermaidResult.isLoading.value)\r\nconst error = computed(() => mermaidResult.error.value)\r\n\r\nconst containerRef = ref<HTMLElement | null>(null)\r\n\r\nconst zoomControls = useMermaidZoom({\r\n container: containerRef,\r\n scaleStep: 0.2,\r\n minScale: 0.1,\r\n maxScale: 5,\r\n})\r\n\r\nconst debouncedInitialize = debounce(initializeZoom, 500)\r\n\r\nfunction initializeZoom() {\r\n nextTick(() => {\r\n if (containerRef.value) {\r\n zoomControls.initialize()\r\n }\r\n })\r\n}\r\n\r\nwatch(\r\n () => mermaidResult.data.value,\r\n (newSvg, oldSvg) => {\r\n console.log('[SyntaxMermaid] mermaidResult.data.value changed:', {\r\n oldSvg,\r\n newSvg,\r\n isNewSvg: !!newSvg,\r\n startsWithSvg: newSvg?.trim().startsWith('<svg'),\r\n preview: newSvg?.substring(0, 50)\r\n })\r\n\r\n if (newSvg) {\r\n svg.value = newSvg\r\n debouncedInitialize()\r\n\r\n // 检测是否成功渲染了 SVG(以 <svg 开头)\r\n if (newSvg.trim().startsWith('<svg')) {\r\n console.log('[SyntaxMermaid] Emitting ready event - Mermaid is available')\r\n emit('ready')\r\n } else {\r\n console.log('[SyntaxMermaid] Emitting degraded event - Mermaid not available')\r\n emit('degraded')\r\n }\r\n }\r\n },\r\n { immediate: true },\r\n)\r\n\r\nwatch(svg, (newSvg) => {\r\n if (newSvg) {\r\n debouncedInitialize()\r\n }\r\n})\r\n\r\nfunction zoomIn() {\r\n zoomControls?.zoomIn()\r\n}\r\n\r\nfunction zoomOut() {\r\n zoomControls?.zoomOut()\r\n}\r\n\r\nfunction reset() {\r\n zoomControls?.reset()\r\n}\r\n\r\nfunction fullscreen() {\r\n zoomControls?.fullscreen()\r\n zoomControls?.reset()\r\n}\r\n\r\nfunction download() {\r\n downloadSvgAsPng(svg.value)\r\n}\r\n\r\nfunction getSvg() {\r\n return svg.value\r\n}\r\n\r\nfunction reinitialize() {\r\n debouncedInitialize()\r\n}\r\n\r\nonMounted(() => {\r\n if (svg.value) {\r\n debouncedInitialize()\r\n }\r\n})\r\n\r\ndefineExpose({\r\n svg,\r\n isLoading,\r\n error,\r\n containerRef,\r\n zoomIn,\r\n zoomOut,\r\n reset,\r\n fullscreen,\r\n download,\r\n getSvg,\r\n reinitialize,\r\n})\r\n</script>\r\n\r\n<template>\r\n <div ref=\"containerRef\" class=\"syntax-mermaid\" :class=\"{ 'syntax-mermaid--dark': props.isDark }\">\r\n <div ref=\"renderContainerRef\" class=\"syntax-mermaid__render-container\" aria-hidden=\"true\" />\r\n\r\n <div v-if=\"isLoading\" class=\"syntax-mermaid__loading\">\r\n <slot name=\"loading\">\r\n <span class=\"syntax-mermaid__loading-text\">加载中...</span>\r\n </slot>\r\n </div>\r\n <div v-else class=\"syntax-mermaid__content\" v-html=\"svg\" />\r\n </div>\r\n</template>\r\n\r\n<style>\r\n.syntax-mermaid {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-height: 200px;\r\n overflow: hidden;\r\n cursor: grab;\r\n position: relative;\r\n}\r\n\r\n.syntax-mermaid__render-container {\r\n position: absolute;\r\n max-height: 0;\r\n opacity: 0;\r\n overflow: hidden;\r\n pointer-events: none;\r\n}\r\n\r\n.syntax-mermaid:active {\r\n cursor: grabbing;\r\n}\r\n\r\n.syntax-mermaid__content {\r\n width: 100%;\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.syntax-mermaid__content svg {\r\n transform-origin: center center;\r\n max-width: 100%;\r\n max-height: 100%;\r\n}\r\n\r\n.syntax-mermaid:fullscreen {\r\n max-height: 100vh;\r\n}\r\n\r\n.syntax-mermaid:fullscreen .syntax-mermaid__content {\r\n justify-content: center;\r\n}\r\n\r\n.syntax-mermaid__loading {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 100%;\r\n height: 100%;\r\n min-height: 200px;\r\n}\r\n\r\n.syntax-mermaid__loading-text {\r\n color: #666;\r\n font-size: 14px;\r\n}\r\n\r\n.syntax-mermaid--dark .syntax-mermaid__loading-text {\r\n color: #999;\r\n}\r\n</style>\r\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_openBlock","_renderSlot"],"mappings":"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"}
@@ -1,6 +0,0 @@
1
- import _sfc_main from "./x-markdown.es28.js";
2
- /* empty css */
3
- export {
4
- _sfc_main as default
5
- };
6
- //# sourceMappingURL=x-markdown.es33.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"x-markdown.es33.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}