@mantine-vue/code-highlight 3.1.0 → 3.3.0

package/cjs/index.cjs

@@ -19,15 +19,49 @@ var CodeHighlightAdapterProvider_default = /* @__PURE__ */ (0, vue.defineCompone
 	setup(__props) {
 		const props = __props;
 		const context = (0, vue.ref)(null);
+		const contextLoaded = (0, vue.ref)(false);
+		const loadedLanguages = (0, vue.ref)([]);
+		const requestedLanguages = /* @__PURE__ */ new Set();
+		let generation = 0;
 		const highlight = (0, vue.computed)(() => props.adapter.getHighlighter(context.value));
-		(0, vue.onMounted)(() => props.adapter.loadContext?.().then((value) => {
-			context.value = value;
-		}));
+		(0, vue.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 (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$1, [(0, vue.renderSlot)(_ctx.$slots, "default")]);
@@ -41,10 +75,24 @@ function provideCodeHighlightAdapterContext(value) {
 	(0, vue.provide)(CodeHighlightContext, value);
 }
 function useHighlight() {
-	return (0, vue.inject)(CodeHighlightContext, null)?.highlight || plainTextAdapter.getHighlighter(null);
+	const ctx = (0, vue.inject)(CodeHighlightContext, null);
+	const fallback = plainTextAdapter.getHighlighter(null);
+	return (input) => (ctx?.highlight || fallback)(input);
+}
+function useLoadLanguage() {
+	return (0, vue.inject)(CodeHighlightContext, null)?.loadLanguage || (() => {});
+}
+function useIsLanguageLoaded() {
+	return (0, vue.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] = (0, _mantine_vue_core.createSafeContext)("CodeHighlightProvider was not found in the component tree");
 //#endregion
@@ -163,7 +211,7 @@ var CopyCodeButton_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				variant: "none",
 				"tooltip-label": (0, vue.unref)(clipboard).copied.value ? props.copiedLabel : props.copyLabel,
 				"aria-label": (0, vue.unref)(clipboard).copied.value ? props.copiedLabel : `${props.copyLabel} code`,
-				onClick: _cache[0] || (_cache[0] = ($event) => (0, vue.unref)(clipboard).copy(props.code.trim()))
+				onClick: _cache[0] || (_cache[0] = ($event) => (0, vue.unref)(clipboard).copy(props.code))
 			}, {
 				default: (0, vue.withCtx)(() => [(0, vue.createVNode)(CopyIcon_default, { copied: (0, vue.unref)(clipboard).copied.value }, null, 8, ["copied"])]),
 				_: 1
@@ -309,7 +357,8 @@ var CodeHighlight_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			default: false
 		},
 		controls: {},
-		codeColorScheme: {}
+		codeColorScheme: {},
+		withFirstLineIndentation: { type: Boolean }
 	},
 	emits: ["update:expanded", "expanded-change"],
 	setup(__props, { emit: __emit }) {
@@ -342,21 +391,28 @@ var CodeHighlight_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			}
 		});
 		const highlight = useHighlight();
+		const loadLanguage = useLoadLanguage();
+		const isLanguageLoaded = useIsLanguageLoaded();
+		const normalizedCode = (0, vue.computed)(() => normalizeCode(props.code, { withFirstLineIndentation: props.withFirstLineIndentation }));
+		(0, vue.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 = (0, vue.computed)(() => highlight({
-			code: props.code.trim(),
-			language: props.language,
-			colorScheme: props.codeColorScheme ?? resolveColorScheme(mantine.colorScheme.value)
-		}));
+		const highlighted = (0, vue.computed)(() => {
+			isLanguageLoaded(props.language);
+			return highlight({
+				code: normalizedCode.value,
+				language: props.language,
+				colorScheme: props.codeColorScheme ?? resolveColorScheme(mantine.colorScheme.value)
+			});
+		});
 		const renderedControls = (0, vue.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 = (0, vue.computed)(() => renderedControls.value.length > 0 || props.withExpandButton || props.withCopyButton);
-		const lineNumbers = (0, vue.computed)(() => props.code.trim().split("\n").map((_, index) => index + 1));
+		const lineNumbers = (0, vue.computed)(() => normalizedCode.value.split("\n").map((_, index) => index + 1));
 		const renderControls = () => renderedControls.value;
 		provideCodeHighlightContext({
 			getStyles,
@@ -382,7 +438,7 @@ var CodeHighlight_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					className: [highlighted.value.codeElementProps?.class, (0, vue.unref)(attrs).class],
 					style: [highlighted.value.codeElementProps?.style, (0, vue.unref)(attrs).style]
 				})
-			}, { "data-with-border": (0, vue.unref)(props).withBorder || void 0 }), (0, vue.toDisplayString)((0, vue.unref)(props).code.trim()), 17, _hoisted_2)) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.Box), (0, vue.mergeProps)({ key: 2 }, {
+			}, { "data-with-border": (0, vue.unref)(props).withBorder || void 0 }), (0, vue.toDisplayString)(normalizedCode.value), 17, _hoisted_2)) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.Box), (0, vue.mergeProps)({ key: 2 }, {
 				...(0, vue.unref)(attrs),
 				...(0, vue.unref)(getStyles)("codeHighlight")
 			}, {
@@ -407,7 +463,7 @@ var CodeHighlight_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						])) : (0, vue.createCommentVNode)("", true),
 						(0, vue.unref)(props).withCopyButton ? ((0, vue.openBlock)(), (0, vue.createBlock)(CopyCodeButton_default, {
 							key: 1,
-							code: (0, vue.unref)(props).code,
+							code: normalizedCode.value,
 							"copied-label": (0, vue.unref)(props).copiedLabel,
 							"copy-label": (0, vue.unref)(props).copyLabel
 						}, null, 8, [
@@ -438,7 +494,7 @@ var CodeHighlight_default = /* @__PURE__ */ (0, vue.defineComponent)({
 								className: highlighted.value.codeElementProps?.class,
 								style: highlighted.value.codeElementProps?.style
 							})
-						})), (0, vue.toDisplayString)((0, vue.unref)(props).code.trim()), 17))], 16, _hoisted_5)], 16)]),
+						})), (0, vue.toDisplayString)(normalizedCode.value), 17))], 16, _hoisted_5)], 16)]),
 						_: 1
 					}, 16, ["data-collapsed"]),
 					(0, vue.createVNode)((0, vue.unref)(_mantine_vue_core.UnstyledButton), (0, vue.mergeProps)((0, vue.unref)(getStyles)("showCodeButton"), {
@@ -483,6 +539,7 @@ var InlineCodeHighlight = Object.assign(/* @__PURE__ */ (0, vue.defineComponent)
 			type: Boolean,
 			default: false
 		},
+		withFirstLineIndentation: { type: Boolean },
 		classNames: {},
 		styles: {},
 		vars: {},
@@ -593,7 +650,8 @@ var CodeHighlightTabs = Object.assign(/* @__PURE__ */ (0, vue.defineComponent)({
 			default: false
 		},
 		controls: {},
-		codeColorScheme: {}
+		codeColorScheme: {},
+		withFirstLineIndentation: { type: Boolean }
 	},
 	emits: [
 		"update:activeTab",
@@ -695,6 +753,7 @@ var CodeHighlightTabs = Object.assign(/* @__PURE__ */ (0, vue.defineComponent)({
 					controls: (0, vue.unref)(props).controls,
 					"code-color-scheme": (0, vue.unref)(props).codeColorScheme,
 					"with-line-numbers": (0, vue.unref)(props).withLineNumbers,
+					"with-first-line-indentation": (0, vue.unref)(props).withFirstLineIndentation,
 					"__with-offset": "",
 					"__static-selector": "CodeHighlightTabs",
 					onExpandedChange: (0, vue.unref)(setExpanded),
@@ -721,6 +780,7 @@ var CodeHighlightTabs = Object.assign(/* @__PURE__ */ (0, vue.defineComponent)({
 					"controls",
 					"code-color-scheme",
 					"with-line-numbers",
+					"with-first-line-indentation",
 					"onExpandedChange",
 					"class-names",
 					"styles"
@@ -736,7 +796,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}` }
 		};
@@ -1889,27 +1949,69 @@ 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
 exports.CodeHighlight = CodeHighlight;
 exports.CodeHighlightAdapterProvider = CodeHighlightAdapterProvider;
@@ -1918,9 +2020,12 @@ exports.CodeHighlightTabs = CodeHighlightTabs;
 exports.InlineCodeHighlight = InlineCodeHighlight;
 exports.createHighlightJsAdapter = createHighlightJsAdapter;
 exports.createShikiAdapter = createShikiAdapter;
+exports.normalizeCode = normalizeCode;
 exports.plainTextAdapter = plainTextAdapter;
 exports.stripShikiCodeBlocks = stripShikiCodeBlocks;
 exports.useCodeHighlightContext = useCodeHighlightContext;
 exports.useHighlight = useHighlight;
+exports.useIsLanguageLoaded = useIsLanguageLoaded;
+exports.useLoadLanguage = useLoadLanguage;
 
 //# sourceMappingURL=index.cjs.map