@hejiayue/x-markdown-test 0.0.1-beta.119 → 0.0.1-beta.121
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.
- package/dist/x-markdown.cjs10.js +1 -1
- package/dist/x-markdown.cjs13.js +1 -1
- package/dist/x-markdown.cjs14.js +1 -1
- package/dist/x-markdown.cjs14.js.map +1 -1
- package/dist/x-markdown.cjs15.js +1 -1
- package/dist/x-markdown.cjs15.js.map +1 -1
- package/dist/x-markdown.cjs16.js +1 -1
- package/dist/x-markdown.cjs17.js +1 -1
- package/dist/x-markdown.cjs18.js +1 -1
- package/dist/x-markdown.cjs19.js +1 -1
- package/dist/x-markdown.cjs19.js.map +1 -1
- package/dist/x-markdown.cjs20.js +2 -0
- package/dist/x-markdown.cjs20.js.map +1 -0
- package/dist/x-markdown.cjs22.js +1 -1
- package/dist/x-markdown.cjs22.js.map +1 -1
- package/dist/x-markdown.cjs23.js +2 -0
- package/dist/x-markdown.cjs23.js.map +1 -0
- package/dist/{x-markdown.cjs24.js → x-markdown.cjs25.js} +2 -2
- package/dist/{x-markdown.cjs24.js.map → x-markdown.cjs25.js.map} +1 -1
- package/dist/x-markdown.cjs27.js +1 -1
- package/dist/x-markdown.cjs27.js.map +1 -1
- package/dist/x-markdown.cjs28.js +1 -1
- package/dist/x-markdown.cjs28.js.map +1 -1
- package/dist/x-markdown.cjs29.js +2 -0
- package/dist/x-markdown.cjs29.js.map +1 -0
- package/dist/x-markdown.cjs31.js +1 -1
- package/dist/x-markdown.cjs31.js.map +1 -1
- package/dist/x-markdown.cjs32.js +2 -0
- package/dist/x-markdown.cjs32.js.map +1 -0
- package/dist/{x-markdown.cjs33.js → x-markdown.cjs34.js} +2 -2
- package/dist/x-markdown.cjs34.js.map +1 -0
- package/dist/x-markdown.cjs7.js +1 -1
- package/dist/x-markdown.cjs7.js.map +1 -1
- package/dist/x-markdown.cjs9.js +1 -1
- package/dist/x-markdown.cjs9.js.map +1 -1
- package/dist/x-markdown.es10.js +1 -1
- package/dist/x-markdown.es13.js +3 -3
- package/dist/x-markdown.es14.js +69 -28
- package/dist/x-markdown.es14.js.map +1 -1
- package/dist/x-markdown.es15.js +31 -2
- package/dist/x-markdown.es15.js.map +1 -1
- package/dist/x-markdown.es16.js +1 -2
- package/dist/x-markdown.es16.js.map +1 -1
- package/dist/x-markdown.es17.js +2 -4
- package/dist/x-markdown.es17.js.map +1 -1
- package/dist/x-markdown.es18.js +4 -4
- package/dist/x-markdown.es19.js +5 -204
- package/dist/x-markdown.es19.js.map +1 -1
- package/dist/x-markdown.es20.js +207 -0
- package/dist/x-markdown.es20.js.map +1 -0
- package/dist/x-markdown.es22.js +7 -71
- package/dist/x-markdown.es22.js.map +1 -1
- package/dist/x-markdown.es23.js +75 -0
- package/dist/x-markdown.es23.js.map +1 -0
- package/dist/{x-markdown.es24.js → x-markdown.es25.js} +4 -4
- package/dist/{x-markdown.es24.js.map → x-markdown.es25.js.map} +1 -1
- package/dist/x-markdown.es27.js +157 -5
- package/dist/x-markdown.es27.js.map +1 -1
- package/dist/x-markdown.es28.js +5 -139
- package/dist/x-markdown.es28.js.map +1 -1
- package/dist/x-markdown.es29.js +142 -0
- package/dist/x-markdown.es29.js.map +1 -0
- package/dist/x-markdown.es31.js +74 -121
- package/dist/x-markdown.es31.js.map +1 -1
- package/dist/x-markdown.es32.js +125 -0
- package/dist/x-markdown.es32.js.map +1 -0
- package/dist/x-markdown.es34.js +6 -0
- package/dist/x-markdown.es34.js.map +1 -0
- package/dist/x-markdown.es7.js +3 -47
- package/dist/x-markdown.es7.js.map +1 -1
- package/dist/x-markdown.es9.js +2 -10
- package/dist/x-markdown.es9.js.map +1 -1
- package/package.json +2 -1
- package/dist/x-markdown.cjs21.js +0 -2
- package/dist/x-markdown.cjs21.js.map +0 -1
- package/dist/x-markdown.cjs26.js +0 -2
- package/dist/x-markdown.cjs26.js.map +0 -1
- package/dist/x-markdown.cjs30.js +0 -2
- package/dist/x-markdown.cjs30.js.map +0 -1
- package/dist/x-markdown.cjs33.js.map +0 -1
- package/dist/x-markdown.es21.js +0 -11
- package/dist/x-markdown.es21.js.map +0 -1
- package/dist/x-markdown.es26.js +0 -160
- package/dist/x-markdown.es26.js.map +0 -1
- package/dist/x-markdown.es30.js +0 -78
- package/dist/x-markdown.es30.js.map +0 -1
- package/dist/x-markdown.es33.js +0 -6
- package/dist/x-markdown.es33.js.map +0 -1
package/dist/x-markdown.es28.js
CHANGED
|
@@ -1,142 +1,8 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
import
|
|
4
|
-
const
|
|
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
|
-
});
|
|
1
|
+
import _sfc_main from "./x-markdown.es32.js";
|
|
2
|
+
/* empty css */
|
|
3
|
+
import _export_sfc from "./x-markdown.es22.js";
|
|
4
|
+
const SyntaxCodeBlock = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ddb364e9"]]);
|
|
139
5
|
export {
|
|
140
|
-
|
|
6
|
+
SyntaxCodeBlock as default
|
|
141
7
|
};
|
|
142
8
|
//# sourceMappingURL=x-markdown.es28.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"x-markdown.es28.js","sources":[
|
|
1
|
+
{"version":3,"file":"x-markdown.es28.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -0,0 +1,142 @@
|
|
|
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.es29.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"x-markdown.es29.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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"}
|
package/dist/x-markdown.es31.js
CHANGED
|
@@ -1,125 +1,78 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
7
|
-
...{
|
|
8
|
-
name: "SyntaxCodeBlock"
|
|
9
|
-
},
|
|
10
|
-
__name: "SyntaxCodeBlock",
|
|
11
|
-
props: {
|
|
12
|
-
code: {},
|
|
13
|
-
language: {},
|
|
14
|
-
lightTheme: { default: "vitesse-light" },
|
|
15
|
-
darkTheme: { default: "vitesse-dark" },
|
|
16
|
-
isDark: { type: Boolean, default: false },
|
|
17
|
-
colorReplacements: {},
|
|
18
|
-
codeMaxHeight: {},
|
|
19
|
-
enableAnimate: { type: Boolean, default: false }
|
|
20
|
-
},
|
|
21
|
-
setup(__props, { expose: __expose }) {
|
|
22
|
-
const props = __props;
|
|
23
|
-
const code = computed(() => props.code.trim());
|
|
24
|
-
const language = computed(() => props.language || "text");
|
|
25
|
-
const actualTheme = computed(() => props.isDark ? props.darkTheme : props.lightTheme);
|
|
26
|
-
const { lines, preStyle } = useHighlight(code, {
|
|
27
|
-
language,
|
|
28
|
-
theme: actualTheme,
|
|
29
|
-
colorReplacements: props.colorReplacements
|
|
30
|
-
});
|
|
31
|
-
const applyColorReplacement = (color, replacements) => {
|
|
32
|
-
if (!replacements) return color;
|
|
33
|
-
return replacements[color.toLowerCase()] || color;
|
|
34
|
-
};
|
|
35
|
-
const normalizeStyleKeys = (style) => {
|
|
36
|
-
const normalized = {};
|
|
37
|
-
Object.entries(style).forEach(([key, value]) => {
|
|
38
|
-
const camelKey = key.replace(/-([a-z])/g, (_, char) => char.toUpperCase());
|
|
39
|
-
normalized[camelKey] = value;
|
|
40
|
-
});
|
|
41
|
-
return normalized;
|
|
42
|
-
};
|
|
43
|
-
const getTokenStyle = (token) => {
|
|
44
|
-
if (!token) {
|
|
45
|
-
return {};
|
|
46
|
-
}
|
|
47
|
-
if (token.htmlStyle) {
|
|
48
|
-
const baseStyle = normalizeStyleKeys(token.htmlStyle);
|
|
49
|
-
if (!props.colorReplacements) return baseStyle;
|
|
50
|
-
const style2 = { ...baseStyle };
|
|
51
|
-
if (style2.color && typeof style2.color === "string") {
|
|
52
|
-
style2.color = applyColorReplacement(style2.color, props.colorReplacements);
|
|
53
|
-
}
|
|
54
|
-
if (style2.backgroundColor && typeof style2.backgroundColor === "string") {
|
|
55
|
-
style2.backgroundColor = applyColorReplacement(style2.backgroundColor, props.colorReplacements);
|
|
56
|
-
}
|
|
57
|
-
return style2;
|
|
58
|
-
}
|
|
59
|
-
const style = {};
|
|
60
|
-
if (token.color) {
|
|
61
|
-
style.color = props.colorReplacements ? applyColorReplacement(token.color, props.colorReplacements) : token.color;
|
|
62
|
-
}
|
|
63
|
-
if (token.fontStyle === "italic") {
|
|
64
|
-
style.fontStyle = "italic";
|
|
65
|
-
}
|
|
66
|
-
if (token.fontWeight) {
|
|
67
|
-
style.fontWeight = token.fontWeight;
|
|
68
|
-
}
|
|
69
|
-
return style;
|
|
70
|
-
};
|
|
71
|
-
const showFallback = computed(() => !lines.value?.length);
|
|
72
|
-
const codeContainerStyle = computed(() => ({
|
|
73
|
-
...preStyle.value,
|
|
74
|
-
maxHeight: props.codeMaxHeight
|
|
75
|
-
}));
|
|
76
|
-
__expose({
|
|
77
|
-
lines,
|
|
78
|
-
code,
|
|
79
|
-
language,
|
|
80
|
-
actualTheme
|
|
81
|
-
});
|
|
82
|
-
return (_ctx, _cache) => {
|
|
83
|
-
return openBlock(), createElementBlock("div", _hoisted_1, [
|
|
84
|
-
showFallback.value ? (openBlock(), createElementBlock("pre", {
|
|
85
|
-
key: 0,
|
|
86
|
-
style: normalizeStyle(codeContainerStyle.value)
|
|
87
|
-
}, [
|
|
88
|
-
createElementVNode("code", null, toDisplayString(code.value), 1)
|
|
89
|
-
], 4)) : (openBlock(), createElementBlock("pre", {
|
|
90
|
-
key: 1,
|
|
91
|
-
class: normalizeClass(["shiki", actualTheme.value]),
|
|
92
|
-
style: normalizeStyle(codeContainerStyle.value),
|
|
93
|
-
tabindex: "0"
|
|
94
|
-
}, [
|
|
95
|
-
_cache[4] || (_cache[4] = createTextVNode(" ", -1)),
|
|
96
|
-
createElementVNode("code", _hoisted_2, [
|
|
97
|
-
_cache[2] || (_cache[2] = createTextVNode("\n ", -1)),
|
|
98
|
-
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(lines), (line, i) => {
|
|
99
|
-
return openBlock(), createElementBlock("span", {
|
|
100
|
-
key: i,
|
|
101
|
-
class: "x-md-code-line"
|
|
102
|
-
}, [
|
|
103
|
-
_cache[0] || (_cache[0] = createTextVNode("\n ", -1)),
|
|
104
|
-
!line.length ? (openBlock(), createElementBlock("span", _hoisted_3, " ")) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(line, (token, j) => {
|
|
105
|
-
return openBlock(), createElementBlock("span", {
|
|
106
|
-
key: j,
|
|
107
|
-
style: normalizeStyle(getTokenStyle(token)),
|
|
108
|
-
class: normalizeClass({ "x-md-animated-word": props.enableAnimate })
|
|
109
|
-
}, toDisplayString(token.content), 7);
|
|
110
|
-
}), 128)),
|
|
111
|
-
_cache[1] || (_cache[1] = createTextVNode("\n ", -1))
|
|
112
|
-
]);
|
|
113
|
-
}), 128)),
|
|
114
|
-
_cache[3] || (_cache[3] = createTextVNode("\n ", -1))
|
|
115
|
-
]),
|
|
116
|
-
_cache[5] || (_cache[5] = createTextVNode("\n ", -1))
|
|
117
|
-
], 6))
|
|
118
|
-
]);
|
|
119
|
-
};
|
|
1
|
+
import { shallowRef, shallowReadonly, toValue, getCurrentScope, onScopeDispose, watch } from "vue";
|
|
2
|
+
function tryOnScopeDispose(fn, failSilently) {
|
|
3
|
+
if (getCurrentScope()) {
|
|
4
|
+
onScopeDispose(fn, failSilently);
|
|
5
|
+
return true;
|
|
120
6
|
}
|
|
121
|
-
|
|
7
|
+
return false;
|
|
8
|
+
}
|
|
9
|
+
const isClient = typeof window !== "undefined" && typeof document !== "undefined";
|
|
10
|
+
const toString = Object.prototype.toString;
|
|
11
|
+
const isObject = (val) => toString.call(val) === "[object Object]";
|
|
12
|
+
function createSingletonPromise(fn) {
|
|
13
|
+
let _promise;
|
|
14
|
+
function wrapper() {
|
|
15
|
+
if (!_promise) _promise = fn();
|
|
16
|
+
return _promise;
|
|
17
|
+
}
|
|
18
|
+
wrapper.reset = async () => {
|
|
19
|
+
const _prev = _promise;
|
|
20
|
+
_promise = void 0;
|
|
21
|
+
if (_prev) await _prev;
|
|
22
|
+
};
|
|
23
|
+
return wrapper;
|
|
24
|
+
}
|
|
25
|
+
function toArray(value) {
|
|
26
|
+
return Array.isArray(value) ? value : [value];
|
|
27
|
+
}
|
|
28
|
+
function useTimeoutFn(cb, interval, options = {}) {
|
|
29
|
+
const { immediate = true, immediateCallback = false } = options;
|
|
30
|
+
const isPending = shallowRef(false);
|
|
31
|
+
let timer;
|
|
32
|
+
function clear() {
|
|
33
|
+
if (timer) {
|
|
34
|
+
clearTimeout(timer);
|
|
35
|
+
timer = void 0;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
function stop() {
|
|
39
|
+
isPending.value = false;
|
|
40
|
+
clear();
|
|
41
|
+
}
|
|
42
|
+
function start(...args) {
|
|
43
|
+
if (immediateCallback) cb();
|
|
44
|
+
clear();
|
|
45
|
+
isPending.value = true;
|
|
46
|
+
timer = setTimeout(() => {
|
|
47
|
+
isPending.value = false;
|
|
48
|
+
timer = void 0;
|
|
49
|
+
cb(...args);
|
|
50
|
+
}, toValue(interval));
|
|
51
|
+
}
|
|
52
|
+
if (immediate) {
|
|
53
|
+
isPending.value = true;
|
|
54
|
+
if (isClient) start();
|
|
55
|
+
}
|
|
56
|
+
tryOnScopeDispose(stop);
|
|
57
|
+
return {
|
|
58
|
+
isPending: shallowReadonly(isPending),
|
|
59
|
+
start,
|
|
60
|
+
stop
|
|
61
|
+
};
|
|
62
|
+
}
|
|
63
|
+
function watchImmediate(source, cb, options) {
|
|
64
|
+
return watch(source, cb, {
|
|
65
|
+
...options,
|
|
66
|
+
immediate: true
|
|
67
|
+
});
|
|
68
|
+
}
|
|
122
69
|
export {
|
|
123
|
-
|
|
70
|
+
createSingletonPromise,
|
|
71
|
+
isClient,
|
|
72
|
+
isObject,
|
|
73
|
+
toArray,
|
|
74
|
+
tryOnScopeDispose,
|
|
75
|
+
useTimeoutFn,
|
|
76
|
+
watchImmediate
|
|
124
77
|
};
|
|
125
78
|
//# sourceMappingURL=x-markdown.es31.js.map
|