@mantine-vue/code-highlight 3.1.0 → 3.3.0

package/esm/index.mjs

@@ -1,4 +1,4 @@
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createStaticVNode, createTextVNode, createVNode, defineComponent, guardReactiveProps, inject, mergeProps, normalizeProps, onMounted, openBlock, provide, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useAttrs, useSlots, watch, withCtx } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createStaticVNode, createTextVNode, createVNode, defineComponent, guardReactiveProps, inject, mergeProps, normalizeProps, openBlock, provide, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useAttrs, useSlots, watch, watchEffect, withCtx } from "vue";
 import { ActionIcon, Box, ScrollArea, Tooltip, UnstyledButton, createSafeContext, createVarsResolver, getRadius, getThemeColor, rem, useMantineContext, useProps, useStyles } from "@mantine-vue/core";
 import { useClipboard, useUncontrolled } from "@mantine-vue/hooks";
 //#region src/CodeHighlightProvider/adapters/plain-text-adapter.ts
@@ -18,15 +18,49 @@ var CodeHighlightAdapterProvider_default = /* @__PURE__ */ defineComponent({
 	setup(__props) {
 		const props = __props;
 		const context = ref(null);
+		const contextLoaded = ref(false);
+		const loadedLanguages = ref([]);
+		const requestedLanguages = /* @__PURE__ */ new Set();
+		let generation = 0;
 		const highlight = computed(() => props.adapter.getHighlighter(context.value));
-		onMounted(() => props.adapter.loadContext?.().then((value) => {
-			context.value = value;
-		}));
+		watch(() => props.adapter, async (adapter) => {
+			const currentGeneration = ++generation;
+			context.value = null;
+			contextLoaded.value = !adapter.loadContext;
+			loadedLanguages.value = [];
+			requestedLanguages.clear();
+			if (adapter.loadContext) {
+				const value = await adapter.loadContext();
+				if (currentGeneration === generation) {
+					context.value = value;
+					contextLoaded.value = true;
+				}
+			}
+		}, { immediate: true });
+		function loadLanguage(language) {
+			if (!contextLoaded.value || !language || !props.adapter.loadLanguage || requestedLanguages.has(language)) return;
+			const currentGeneration = generation;
+			requestedLanguages.add(language);
+			let result;
+			try {
+				result = props.adapter.loadLanguage(context.value, language);
+			} catch {
+				requestedLanguages.delete(language);
+				return;
+			}
+			result?.then(() => {
+				if (currentGeneration === generation && !loadedLanguages.value.includes(language)) loadedLanguages.value = [...loadedLanguages.value, language];
+			}, () => currentGeneration === generation && requestedLanguages.delete(language));
+		}
 		provideCodeHighlightAdapterContext({
-			adapter: props.adapter,
+			get adapter() {
+				return props.adapter;
+			},
 			get highlight() {
 				return highlight.value;
-			}
+			},
+			loadLanguage,
+			isLanguageLoaded: (language) => !language || !props.adapter.loadLanguage || loadedLanguages.value.includes(language)
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1$1, [renderSlot(_ctx.$slots, "default")]);
@@ -40,10 +74,24 @@ function provideCodeHighlightAdapterContext(value) {
 	provide(CodeHighlightContext, value);
 }
 function useHighlight() {
-	return inject(CodeHighlightContext, null)?.highlight || plainTextAdapter.getHighlighter(null);
+	const ctx = inject(CodeHighlightContext, null);
+	const fallback = plainTextAdapter.getHighlighter(null);
+	return (input) => (ctx?.highlight || fallback)(input);
+}
+function useLoadLanguage() {
+	return inject(CodeHighlightContext, null)?.loadLanguage || (() => {});
+}
+function useIsLanguageLoaded() {
+	return inject(CodeHighlightContext, null)?.isLanguageLoaded || (() => true);
 }
 var CodeHighlightAdapterProvider = CodeHighlightAdapterProvider_default;
 //#endregion
+//#region src/normalize-code.ts
+/** Removes blank leading lines and trailing whitespace before highlighting or copying code. */
+function normalizeCode(code, { withFirstLineIndentation } = {}) {
+	return withFirstLineIndentation ? code.replace(/^(?:[^\S\r\n]*\r?\n)+|\s+$/g, "") : code.trim();
+}
+//#endregion
 //#region src/CodeHighlight/CodeHighlight.context.ts
 var [provideCodeHighlightContext, useCodeHighlightContext] = createSafeContext("CodeHighlightProvider was not found in the component tree");
 //#endregion
@@ -162,7 +210,7 @@ var CopyCodeButton_default = /* @__PURE__ */ defineComponent({
 				variant: "none",
 				"tooltip-label": unref(clipboard).copied.value ? props.copiedLabel : props.copyLabel,
 				"aria-label": unref(clipboard).copied.value ? props.copiedLabel : `${props.copyLabel} code`,
-				onClick: _cache[0] || (_cache[0] = ($event) => unref(clipboard).copy(props.code.trim()))
+				onClick: _cache[0] || (_cache[0] = ($event) => unref(clipboard).copy(props.code))
 			}, {
 				default: withCtx(() => [createVNode(CopyIcon_default, { copied: unref(clipboard).copied.value }, null, 8, ["copied"])]),
 				_: 1
@@ -308,7 +356,8 @@ var CodeHighlight_default = /* @__PURE__ */ defineComponent({
 			default: false
 		},
 		controls: {},
-		codeColorScheme: {}
+		codeColorScheme: {},
+		withFirstLineIndentation: { type: Boolean }
 	},
 	emits: ["update:expanded", "expanded-change"],
 	setup(__props, { emit: __emit }) {
@@ -341,21 +390,28 @@ var CodeHighlight_default = /* @__PURE__ */ defineComponent({
 			}
 		});
 		const highlight = useHighlight();
+		const loadLanguage = useLoadLanguage();
+		const isLanguageLoaded = useIsLanguageLoaded();
+		const normalizedCode = computed(() => normalizeCode(props.code, { withFirstLineIndentation: props.withFirstLineIndentation }));
+		watchEffect(() => loadLanguage(props.language));
 		function resolveColorScheme(value) {
 			if (value !== "auto") return value;
 			return typeof window !== "undefined" && window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 		}
-		const highlighted = computed(() => highlight({
-			code: props.code.trim(),
-			language: props.language,
-			colorScheme: props.codeColorScheme ?? resolveColorScheme(mantine.colorScheme.value)
-		}));
+		const highlighted = computed(() => {
+			isLanguageLoaded(props.language);
+			return highlight({
+				code: normalizedCode.value,
+				language: props.language,
+				colorScheme: props.codeColorScheme ?? resolveColorScheme(mantine.colorScheme.value)
+			});
+		});
 		const renderedControls = computed(() => {
 			const value = props.controls !== void 0 ? typeof props.controls === "function" ? props.controls() : props.controls : slots.controls?.();
 			return Array.isArray(value) ? value : value ? [value] : [];
 		});
 		const shouldDisplayControls = computed(() => renderedControls.value.length > 0 || props.withExpandButton || props.withCopyButton);
-		const lineNumbers = computed(() => props.code.trim().split("\n").map((_, index) => index + 1));
+		const lineNumbers = computed(() => normalizedCode.value.split("\n").map((_, index) => index + 1));
 		const renderControls = () => renderedControls.value;
 		provideCodeHighlightContext({
 			getStyles,
@@ -381,7 +437,7 @@ var CodeHighlight_default = /* @__PURE__ */ defineComponent({
 					className: [highlighted.value.codeElementProps?.class, unref(attrs).class],
 					style: [highlighted.value.codeElementProps?.style, unref(attrs).style]
 				})
-			}, { "data-with-border": unref(props).withBorder || void 0 }), toDisplayString(unref(props).code.trim()), 17, _hoisted_2)) : (openBlock(), createBlock(unref(Box), mergeProps({ key: 2 }, {
+			}, { "data-with-border": unref(props).withBorder || void 0 }), toDisplayString(normalizedCode.value), 17, _hoisted_2)) : (openBlock(), createBlock(unref(Box), mergeProps({ key: 2 }, {
 				...unref(attrs),
 				...unref(getStyles)("codeHighlight")
 			}, {
@@ -406,7 +462,7 @@ var CodeHighlight_default = /* @__PURE__ */ defineComponent({
 						])) : createCommentVNode("", true),
 						unref(props).withCopyButton ? (openBlock(), createBlock(CopyCodeButton_default, {
 							key: 1,
-							code: unref(props).code,
+							code: normalizedCode.value,
 							"copied-label": unref(props).copiedLabel,
 							"copy-label": unref(props).copyLabel
 						}, null, 8, [
@@ -437,7 +493,7 @@ var CodeHighlight_default = /* @__PURE__ */ defineComponent({
 								className: highlighted.value.codeElementProps?.class,
 								style: highlighted.value.codeElementProps?.style
 							})
-						})), toDisplayString(unref(props).code.trim()), 17))], 16, _hoisted_5)], 16)]),
+						})), toDisplayString(normalizedCode.value), 17))], 16, _hoisted_5)], 16)]),
 						_: 1
 					}, 16, ["data-collapsed"]),
 					createVNode(unref(UnstyledButton), mergeProps(unref(getStyles)("showCodeButton"), {
@@ -482,6 +538,7 @@ var InlineCodeHighlight = Object.assign(/* @__PURE__ */ defineComponent({
 			type: Boolean,
 			default: false
 		},
+		withFirstLineIndentation: { type: Boolean },
 		classNames: {},
 		styles: {},
 		vars: {},
@@ -592,7 +649,8 @@ var CodeHighlightTabs = Object.assign(/* @__PURE__ */ defineComponent({
 			default: false
 		},
 		controls: {},
-		codeColorScheme: {}
+		codeColorScheme: {},
+		withFirstLineIndentation: { type: Boolean }
 	},
 	emits: [
 		"update:activeTab",
@@ -694,6 +752,7 @@ var CodeHighlightTabs = Object.assign(/* @__PURE__ */ defineComponent({
 					controls: unref(props).controls,
 					"code-color-scheme": unref(props).codeColorScheme,
 					"with-line-numbers": unref(props).withLineNumbers,
+					"with-first-line-indentation": unref(props).withFirstLineIndentation,
 					"__with-offset": "",
 					"__static-selector": "CodeHighlightTabs",
 					onExpandedChange: unref(setExpanded),
@@ -720,6 +779,7 @@ var CodeHighlightTabs = Object.assign(/* @__PURE__ */ defineComponent({
 					"controls",
 					"code-color-scheme",
 					"with-line-numbers",
+					"with-first-line-indentation",
 					"onExpandedChange",
 					"class-names",
 					"styles"
@@ -735,7 +795,7 @@ function createHighlightJsAdapter(hljs) {
 	return { getHighlighter: () => ({ code, language }) => {
 		const lang = hljs.getLanguage(language) ? language : "plaintext";
 		return {
-			highlightedCode: hljs.highlight(code.trim(), { language: lang }).value,
+			highlightedCode: hljs.highlight(code, { language: lang }).value,
 			isHighlighted: true,
 			codeElementProps: { class: `hljs ${lang}` }
 		};
@@ -1888,28 +1948,70 @@ function stripElement(openTag, data) {
 function stripShikiCodeBlocks(data) {
 	return stripElement("code", stripElement("pre", data));
 }
-var createShikiAdapter = (loadShiki, { forceColorScheme } = {}) => ({
-	loadContext: loadShiki,
-	getHighlighter: (ctx) => {
-		if (!ctx) return ({ code }) => ({
-			highlightedCode: code,
-			isHighlighted: false
-		});
-		return ({ code, language, colorScheme }) => {
-			let _colorScheme = colorScheme;
-			if (colorScheme === "light") _colorScheme = light;
-			else if (colorScheme === "dark") _colorScheme = dark;
-			return {
-				isHighlighted: true,
-				highlightedCode: stripShikiCodeBlocks(ctx.codeToHtml(code, {
-					lang: language,
-					theme: forceColorScheme || _colorScheme
-				}))
+var specialLanguages = [
+	"text",
+	"plaintext",
+	"txt",
+	"plain",
+	"ansi"
+];
+function isLanguageAvailable(ctx, language) {
+	return !language || specialLanguages.includes(language) || typeof ctx.getLoadedLanguages !== "function" || ctx.getLoadedLanguages().includes(language);
+}
+var createShikiAdapter = (loadShiki, { forceColorScheme, resolveLanguage } = {}) => {
+	const warnedLanguages = /* @__PURE__ */ new Set();
+	const warnUnavailable = (language, reason) => {
+		if (warnedLanguages.has(language)) return;
+		warnedLanguages.add(language);
+		console.warn(`[@mantine-vue/code-highlight] Language \`${language}\` ${reason}, code is rendered as plain text.`);
+	};
+	return {
+		loadContext: loadShiki,
+		loadLanguage: resolveLanguage ? (ctx, language) => {
+			if (isLanguageAvailable(ctx, language)) return void 0;
+			const onLoadError = (error) => {
+				warnUnavailable(language, "could not be loaded");
+				throw error;
 			};
-		};
-	}
-});
+			try {
+				const grammar = resolveLanguage(language);
+				if (!grammar) {
+					warnUnavailable(language, "was not resolved by `resolveLanguage`");
+					return;
+				}
+				return Promise.resolve(ctx.loadLanguage(grammar)).catch(onLoadError);
+			} catch (error) {
+				return Promise.reject(error).catch(onLoadError);
+			}
+		} : void 0,
+		getHighlighter: (ctx) => {
+			if (!ctx) return ({ code }) => ({
+				highlightedCode: code,
+				isHighlighted: false
+			});
+			return ({ code, language, colorScheme }) => {
+				if (!isLanguageAvailable(ctx, language)) {
+					if (!resolveLanguage && language) warnUnavailable(language, "is not loaded");
+					return {
+						highlightedCode: code,
+						isHighlighted: false
+					};
+				}
+				let _colorScheme = colorScheme;
+				if (colorScheme === "light") _colorScheme = light;
+				else if (colorScheme === "dark") _colorScheme = dark;
+				return {
+					isHighlighted: true,
+					highlightedCode: stripShikiCodeBlocks(ctx.codeToHtml(code, {
+						lang: language,
+						theme: forceColorScheme || _colorScheme
+					}))
+				};
+			};
+		}
+	};
+};
 //#endregion
-export { CodeHighlight, CodeHighlightAdapterProvider, CodeHighlightControl_default as CodeHighlightControl, CodeHighlightTabs, InlineCodeHighlight, createHighlightJsAdapter, createShikiAdapter, plainTextAdapter, stripShikiCodeBlocks, useCodeHighlightContext, useHighlight };
+export { CodeHighlight, CodeHighlightAdapterProvider, CodeHighlightControl_default as CodeHighlightControl, CodeHighlightTabs, InlineCodeHighlight, createHighlightJsAdapter, createShikiAdapter, normalizeCode, plainTextAdapter, stripShikiCodeBlocks, useCodeHighlightContext, useHighlight, useIsLanguageLoaded, useLoadLanguage };
 
 //# sourceMappingURL=index.mjs.map