@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.
Files changed (88) hide show
  1. package/dist/x-markdown.cjs10.js +1 -1
  2. package/dist/x-markdown.cjs13.js +1 -1
  3. package/dist/x-markdown.cjs14.js +1 -1
  4. package/dist/x-markdown.cjs14.js.map +1 -1
  5. package/dist/x-markdown.cjs15.js +1 -1
  6. package/dist/x-markdown.cjs15.js.map +1 -1
  7. package/dist/x-markdown.cjs16.js +1 -1
  8. package/dist/x-markdown.cjs17.js +1 -1
  9. package/dist/x-markdown.cjs18.js +1 -1
  10. package/dist/x-markdown.cjs19.js +1 -1
  11. package/dist/x-markdown.cjs19.js.map +1 -1
  12. package/dist/x-markdown.cjs20.js +2 -0
  13. package/dist/x-markdown.cjs20.js.map +1 -0
  14. package/dist/x-markdown.cjs22.js +1 -1
  15. package/dist/x-markdown.cjs22.js.map +1 -1
  16. package/dist/x-markdown.cjs23.js +2 -0
  17. package/dist/x-markdown.cjs23.js.map +1 -0
  18. package/dist/{x-markdown.cjs24.js → x-markdown.cjs25.js} +2 -2
  19. package/dist/{x-markdown.cjs24.js.map → x-markdown.cjs25.js.map} +1 -1
  20. package/dist/x-markdown.cjs27.js +1 -1
  21. package/dist/x-markdown.cjs27.js.map +1 -1
  22. package/dist/x-markdown.cjs28.js +1 -1
  23. package/dist/x-markdown.cjs28.js.map +1 -1
  24. package/dist/x-markdown.cjs29.js +2 -0
  25. package/dist/x-markdown.cjs29.js.map +1 -0
  26. package/dist/x-markdown.cjs31.js +1 -1
  27. package/dist/x-markdown.cjs31.js.map +1 -1
  28. package/dist/x-markdown.cjs32.js +2 -0
  29. package/dist/x-markdown.cjs32.js.map +1 -0
  30. package/dist/{x-markdown.cjs33.js → x-markdown.cjs34.js} +2 -2
  31. package/dist/x-markdown.cjs34.js.map +1 -0
  32. package/dist/x-markdown.cjs7.js +1 -1
  33. package/dist/x-markdown.cjs7.js.map +1 -1
  34. package/dist/x-markdown.cjs9.js +1 -1
  35. package/dist/x-markdown.cjs9.js.map +1 -1
  36. package/dist/x-markdown.es10.js +1 -1
  37. package/dist/x-markdown.es13.js +3 -3
  38. package/dist/x-markdown.es14.js +69 -28
  39. package/dist/x-markdown.es14.js.map +1 -1
  40. package/dist/x-markdown.es15.js +31 -2
  41. package/dist/x-markdown.es15.js.map +1 -1
  42. package/dist/x-markdown.es16.js +1 -2
  43. package/dist/x-markdown.es16.js.map +1 -1
  44. package/dist/x-markdown.es17.js +2 -4
  45. package/dist/x-markdown.es17.js.map +1 -1
  46. package/dist/x-markdown.es18.js +4 -4
  47. package/dist/x-markdown.es19.js +5 -204
  48. package/dist/x-markdown.es19.js.map +1 -1
  49. package/dist/x-markdown.es20.js +207 -0
  50. package/dist/x-markdown.es20.js.map +1 -0
  51. package/dist/x-markdown.es22.js +7 -71
  52. package/dist/x-markdown.es22.js.map +1 -1
  53. package/dist/x-markdown.es23.js +75 -0
  54. package/dist/x-markdown.es23.js.map +1 -0
  55. package/dist/{x-markdown.es24.js → x-markdown.es25.js} +4 -4
  56. package/dist/{x-markdown.es24.js.map → x-markdown.es25.js.map} +1 -1
  57. package/dist/x-markdown.es27.js +157 -5
  58. package/dist/x-markdown.es27.js.map +1 -1
  59. package/dist/x-markdown.es28.js +5 -139
  60. package/dist/x-markdown.es28.js.map +1 -1
  61. package/dist/x-markdown.es29.js +142 -0
  62. package/dist/x-markdown.es29.js.map +1 -0
  63. package/dist/x-markdown.es31.js +74 -121
  64. package/dist/x-markdown.es31.js.map +1 -1
  65. package/dist/x-markdown.es32.js +125 -0
  66. package/dist/x-markdown.es32.js.map +1 -0
  67. package/dist/x-markdown.es34.js +6 -0
  68. package/dist/x-markdown.es34.js.map +1 -0
  69. package/dist/x-markdown.es7.js +3 -47
  70. package/dist/x-markdown.es7.js.map +1 -1
  71. package/dist/x-markdown.es9.js +2 -10
  72. package/dist/x-markdown.es9.js.map +1 -1
  73. package/package.json +2 -1
  74. package/dist/x-markdown.cjs21.js +0 -2
  75. package/dist/x-markdown.cjs21.js.map +0 -1
  76. package/dist/x-markdown.cjs26.js +0 -2
  77. package/dist/x-markdown.cjs26.js.map +0 -1
  78. package/dist/x-markdown.cjs30.js +0 -2
  79. package/dist/x-markdown.cjs30.js.map +0 -1
  80. package/dist/x-markdown.cjs33.js.map +0 -1
  81. package/dist/x-markdown.es21.js +0 -11
  82. package/dist/x-markdown.es21.js.map +0 -1
  83. package/dist/x-markdown.es26.js +0 -160
  84. package/dist/x-markdown.es26.js.map +0 -1
  85. package/dist/x-markdown.es30.js +0 -78
  86. package/dist/x-markdown.es30.js.map +0 -1
  87. package/dist/x-markdown.es33.js +0 -6
  88. package/dist/x-markdown.es33.js.map +0 -1
@@ -1,142 +1,8 @@
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
- });
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
- _sfc_main as default
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":["../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
+ {"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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"}
@@ -1,125 +1,78 @@
1
- import { defineComponent, computed, createElementBlock, openBlock, normalizeStyle, createElementVNode, toDisplayString, normalizeClass, createTextVNode, Fragment, renderList, unref } from "vue";
2
- import { useHighlight } from "./x-markdown.es7.js";
3
- const _hoisted_1 = { class: "x-md-syntax-code-block" };
4
- const _hoisted_2 = { class: "x-md-code-content" };
5
- const _hoisted_3 = { key: 0 };
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
- _sfc_main as default
70
+ createSingletonPromise,
71
+ isClient,
72
+ isObject,
73
+ toArray,
74
+ tryOnScopeDispose,
75
+ useTimeoutFn,
76
+ watchImmediate
124
77
  };
125
78
  //# sourceMappingURL=x-markdown.es31.js.map