@hashicorp/mds-react 0.9.0

package/dist/components/code-block/code-block.module.scss

@@ -0,0 +1,511 @@
+//
+// CODE-BLOCK
+//
+
+@use 'styles/mixins/focus-ring' as *;
+
+// CODE-BLOCK PARENT/WRAPPER
+.code-block {
+	--code-block-code-padding: 16px;
+
+	position: relative;
+	color: var(--code-block-color-foreground-primary);
+	background-color: var(--code-block-color-surface-primary);
+	border: 1px solid var(--code-block-color-border-strong);
+
+	pre,
+	code {
+		line-height: 1.4286;
+		white-space: pre;
+		text-align: left;
+		text-shadow: none;
+		word-wrap: normal;
+		word-break: normal;
+		word-spacing: normal;
+		tab-size: 4;
+		hyphens: none;
+
+		@media print {
+			text-shadow: none;
+		}
+	}
+
+	@media print {
+		.line-highlight {
+			/*
+       * This will prevent browsers from replacing the background color with white.
+       * It's necessary because the element is layered on top of the displayed code.
+       */
+			-webkit-print-color-adjust: exact;
+			print-color-adjust: exact;
+		}
+	}
+}
+
+.dark {
+	// COLORS
+
+	// Descriptive color names:
+
+	--code-block-color-blue: #2d8eff;
+	--code-block-color-cyan: #32fff7;
+	--code-block-color-green: #86ff13;
+	--code-block-color-orange: #ffa800;
+	--code-block-color-purple: #c76cff;
+	--code-block-color-red: #ff3b20;
+
+	// Semantic color names:
+
+	// Base UI colors:
+	--code-block-color-foreground-primary: #d5d7db;
+	--code-block-color-foreground-faint: #b2b6bd;
+	--code-block-color-surface-primary: #0d0e12;
+	--code-block-color-surface-faint: #15181e;
+	// status ----
+	--code-block-color-foreground-success: #009241;
+	--code-block-color-foreground-critical: #ef3016;
+	// interactive ---
+	--code-block-color-foreground-interactive: #dedfe3;
+	--code-block-color-foreground-interactive-hover: #fff;
+	--code-block-color-foreground-interactive-active: #f1f2f3;
+	--code-block-color-surface-interactive-active: #2b303c;
+	// actions ---
+	--code-block-color-foreground-action: #2b89ff;
+	--code-block-color-foreground-action-hover: #389aff;
+	--code-block-color-foreground-action-active: #4ca1ff;
+	// borders
+	--code-block-color-border-strong: rgba(178, 182, 189, 40%); // #b2b6bd66
+	--code-block-color-border-primary: rgba(178, 182, 189, 20%); // #b2b6bd33
+	// selection
+	--code-block-color-foreground-selection: #0d0e12;
+	--code-block-color-surface-selection: #86ff13;
+
+	// CodeBlock UI:
+	// lines of code - highlighted ----
+	--code-block-color-line-highlight: rgba(0, 74, 222, 20%);
+	--code-block-color-line-highlight-border: #1555d4;
+
+	// Syntax highlighting tokens:
+	// general ----
+	--code-block-color-token: var(--code-block-color-foreground-primary);
+	// specific ----
+	--code-block-color-atrule: var(--code-block-color-blue);
+	--code-block-color-code-block-attr-name: var(--code-block-color-blue);
+	--code-block-color-attr-value: var(--code-block-color-blue);
+	--code-block-color-boolean: var(--code-block-color-purple);
+	--code-block-color-builtin: var(--code-block-color-orange);
+	--code-block-color-char: var(--code-block-color-orange);
+	--code-block-color-class-name: var(--code-block-color-blue);
+	--code-block-color-comment: var(--code-block-color-foreground-faint);
+	--code-block-color-control: var(--code-block-color-cyan);
+	--code-block-color-constant: var(--code-block-color-purple);
+	--code-block-color-deleted: var(--code-block-color-red);
+	--code-block-color-entity: var(--code-block-color-green);
+	--code-block-color-function: var(--code-block-color-blue);
+	--code-block-color-important: var(--code-block-color-red);
+	--code-block-color-keyword: var(--code-block-color-green);
+	--code-block-color-namespace: var(--code-block-color-red);
+	--code-block-color-number: var(--code-block-color-purple);
+	--code-block-color-operator: var(--code-block-color-cyan);
+	--code-block-color-prolog: var(--code-block-color-foreground-primary);
+	--code-block-color-property: var(--code-block-color-blue);
+	--code-block-color-punctuation: var(--code-block-color-foreground-primary);
+	--code-block-color-regex: var(--code-block-color-orange);
+	--code-block-color-script: var(--code-block-color-foreground-primary);
+	--code-block-color-selector: var(--code-block-color-green);
+	--code-block-color-string: var(--code-block-color-orange);
+	--code-block-color-symbol: var(--code-block-color-orange);
+	--code-block-color-tag: var(--code-block-color-green);
+	--code-block-color-url: var(--code-block-color-cyan);
+	// language-scoped:
+	// css ----
+	--code-block-color-lang-css: var(--code-block-color-purple);
+	--code-block-color-lang-css-token: var(--code-block-color-green);
+	--code-block-color-lang-css-atrule: var(--code-block-color-purple);
+	--code-block-color-lang-css-entity: var(--code-block-color-blue);
+	--code-block-color-lang-css-function: var(--code-block-color-cyan);
+	--code-block-color-lang-css-property: var(--code-block-color-cyan);
+	--code-block-color-lang-css-punctuation: var(--code-block-color-orange);
+	--code-block-color-lang-css-not-atrule: var(
+		--code-block-color-foreground-primary
+	);
+	--code-block-color-lang-css-selector: var(--code-block-color-blue);
+	--code-block-color-lang-css-url: var(--code-block-color-orange);
+	// javascript ----
+	--code-block-color-lang-js-constant: var(--code-block-color-orange);
+	// markup/html ----
+	--code-block-color-lang-markup-attr-value: var(--code-block-color-yellow);
+	--code-block-color-lang-markup-entity-named: var(--code-block-color-purple);
+	--code-block-color-lang-markup-entity-not-named: var(
+		--code-block-color-green
+	);
+}
+
+// Syntax highlighting ----
+// General
+.code-block {
+	// Common tokens
+	:global(.token.bold) {
+		font-weight: bold;
+	}
+	:global(.token.italic) {
+		font-style: italic;
+	}
+
+	// General tokens
+	:global(.token) {
+		color: var(--code-block-color-token);
+	}
+
+	:global(.token.atrule) {
+		color: var(--code-block-color-atrule);
+	}
+	:global(.token.attr-name) {
+		color: var(--code-block-color-attr-name);
+	}
+	:global(.token.attr-value) {
+		color: var(--code-block-color-attr-value);
+	}
+	:global(.token.boolean) {
+		color: var(--code-block-color-boolean);
+	}
+	:global(.token.builtin) {
+		color: var(--code-block-color-builtin);
+	}
+	:global(.token.char) {
+		color: var(--code-block-color-char);
+	}
+	:global(.token.class-name) {
+		color: var(--code-block-color-class-name);
+	}
+	:global(.token.comment) {
+		color: var(--code-block-color-comment);
+	}
+	:global(.token.constant) {
+		color: var(--code-block-color-constant);
+	}
+	:global(.token.deleted) {
+		color: var(--code-block-color-deleted);
+	}
+	:global(.token.entity) {
+		color: var(--code-block-color-entity);
+	}
+	:global(.token.function) {
+		color: var(--code-block-color-function);
+	}
+	:global(.token.important) {
+		color: var(--code-block-color-important);
+	}
+	:global(.token.keyword) {
+		color: var(--code-block-color-keyword);
+	}
+	:global(.token.namespace) {
+		color: var(--code-block-color-namespace);
+	}
+	:global(.token.number) {
+		color: var(--code-block-color-number);
+	}
+	:global(.token.operator) {
+		color: var(--code-block-color-operator);
+	}
+	:global(.token.punctuation) {
+		color: var(--code-block-color-punctuation);
+	}
+	:global(.token.prolog) {
+		color: var(--code-block-color-prolog);
+	}
+	:global(.token.property) {
+		color: var(--code-block-color-property);
+	}
+	:global(.token.regex) {
+		color: var(--code-block-color-regex);
+	}
+	:global(.token.script) {
+		color: var(--code-block-color-script);
+	}
+	:global(.token.selector) {
+		color: var(--code-block-color-selector);
+	}
+	:global(.token.string) {
+		color: var(--code-block-color-string);
+	}
+	:global(.token.symbol) {
+		color: var(--code-block-color-symbol);
+	}
+	:global(.token.tag) {
+		color: var(--code-block-color-tag);
+	}
+	:global(.token.url) {
+		color: var(--code-block-color-url);
+	}
+	:global(.token.variable) {
+		color: var(--code-block-color-comment);
+	}
+}
+// Language-specific
+.language-css {
+	color: var(--code-block-color-lang-css);
+
+	.token {
+		color: var(--code-block-color-lang-css-token);
+	}
+	:global(.token.atrule) {
+		color: var(--code-block-color-lang-css-atrule);
+	}
+	:global(.token.rule:not(.atrule)) {
+		color: var(--code-block-color-lang-css-not-atrule);
+	}
+	:global(.token.entity) {
+		color: var(--code-block-color-lang-css-entity);
+	}
+	:global(.token.function) {
+		color: var(--code-block-color-lang-css-function);
+	}
+	:global(.token.property) {
+		color: var(--code-block-color-lang-css-property);
+	}
+	:global(.token.punctuation) {
+		color: var(--code-block-color-lang-css-punctuatione);
+	}
+	:global(.token.selector) {
+		color: var(--code-block-color-lang-css-selector);
+	}
+	:global(.token.url) {
+		color: var(--code-block-color-lang-css-url);
+	}
+}
+.language-javascript {
+	:global(.token.constant) {
+		color: var(--code-block-color-lang-js-constant);
+	}
+}
+.language-markup,
+.language-html {
+	:global(.token.attr-value) {
+		color: var(--code-block-color-lang-markup-attr-value);
+	}
+	:global(.token.entity.named-entity) {
+		color: var(--code-block-color-lang-markup-entity-named);
+	}
+	:global(.token.entity:not(.named-entity)) {
+		color: var(--code-block-color-lang-markup-entity-not-named);
+	}
+}
+
+// isStandalone
+.is-standalone {
+	border-radius: 6px;
+}
+
+// CHILD COMPONENTS / ELEMENTS
+
+// Header (contains title & description)
+
+.title {
+	color: var(--code-block-color-foreground-primary);
+}
+
+.description {
+	color: var(--code-block-color-foreground-faint);
+}
+
+.header {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	padding: 8px var(--code-block-code-padding);
+	background-color: var(--code-block-color-surface-faint);
+	border-bottom: 1px solid var(--code-block-color-border-primary);
+	border-top-left-radius: inherit;
+	border-top-right-radius: inherit;
+
+	&:empty {
+		display: none;
+	}
+
+	// we add very basic styling for elements that may be yielded in the "title"/"description" elements
+
+	strong {
+		font-weight: var(--mds-typography-font-weight-semibold);
+	}
+
+	code,
+	pre {
+		display: inline;
+		font-size: 0.9em; // as discussed with designers, we reduce the size for optical/visual balance
+		font-family: var(--mds-typography-font-stack-mono);
+		line-height: 1em;
+	}
+
+	a {
+		color: var(--code-block-color-foreground-action);
+
+		&:focus,
+		&:focus-visible {
+			text-decoration: none;
+			outline: 2px solid var(--mds-color-focus-action-internal);
+			outline-offset: 1px;
+		}
+
+		&:hover {
+			color: var(--mds-color-foreground-action-hover);
+		}
+
+		&:active {
+			color: var(--mds-color-foreground-action-active);
+		}
+	}
+}
+
+.body {
+	position: relative;
+	border-radius: inherit;
+}
+
+// Code
+.code {
+	@include hds-focus-ring-basic();
+	display: block;
+	margin: 0;
+	padding: var(--code-block-code-padding) 0;
+	overflow: auto;
+	font-size: 0.8125rem;
+	font-family: var(--mds-typography-font-stack-mono);
+	border-radius: inherit;
+
+	::selection {
+		color: var(--code-block-color-foreground-selection);
+		background-color: var(--code-block-color-surface-selection);
+	}
+}
+
+// CopyButton
+.copy-button {
+	--copy-button-token-idle: var(--code-block-color-foreground-primary);
+	--copy-button-token-success: var(--code-block-color-foreground-success);
+	--copy-button-token-error: var(--code-block-color-foreground-success);
+
+	position: absolute !important;
+	top: 11px; // 12px -1px accounting for border
+	right: 12px; // 12px -1px accounting for border
+	// Overriding default colors must have !important due to style modules
+	color: var(--code-block-color-foreground-primary) !important;
+	background-color: var(--code-block-color-surface-faint) !important;
+	border: 1px solid var(--code-block-color-border-strong) !important;
+
+	&:hover {
+		background-color: var(--code-block-color-surface-primary) !important;
+		border-color: var(--code-block-color-border-strong) !important;
+	}
+
+	&:active {
+		background-color: var(
+			--code-block-color-surface-interactive-active
+		) !important;
+	}
+
+	&:focus,
+	&:focus-visible {
+		background-color: var(--code-block-color-surface-faint) !important;
+	}
+}
+
+// Highlighted Lines
+.line-highlight {
+	right: 0;
+	left: 0;
+	margin-top: 0px;
+	background-color: var(--code-block-color-line-highlight);
+	border: solid var(--code-block-color-line-highlight-border);
+	border-width: 0 0 0 4px;
+	mix-blend-mode: screen;
+	pointer-events: none;
+
+	// Enable the top border if this is the first line in a group of lines
+	&.line-highlight-first {
+		border-top-width: 1px;
+	}
+
+	// Enable the bottom border if this is the last line in a group of lines
+	&.line-highlight-last {
+		border-bottom-width: 1px;
+	}
+}
+
+.line-numbers {
+	counter-reset: linenumber;
+
+	.code {
+		position: relative;
+		padding-left: 49px;
+	}
+
+	.line-numbers-rows {
+		position: absolute;
+		top: 0;
+		left: 0;
+		min-width: 49px;
+		min-height: 100%;
+		padding: var(--code-block-code-padding) 0;
+		border-right: 1px solid var(--code-block-color-border-primary);
+		user-select: none;
+		pointer-events: none;
+
+		> span {
+			display: block;
+			counter-increment: linenumber;
+
+			&::before {
+				display: block;
+				padding-right: var(--code-block-code-padding);
+				text-align: right;
+				content: counter(linenumber);
+			}
+		}
+	}
+
+	.line-of-code.line-highlight {
+		// This disables the thicker left border on highlighted lines.
+		border-width: 0;
+
+		// This resets the left padding to the original value.
+		padding-left: var(--mds-spacing-05);
+	}
+}
+
+.line-of-code {
+	// Lines of code are <span> elements which are inline by default, but
+	// we want them to take up the full width of the code block.
+	display: block;
+
+	// When we're rendering line numbers, we need to add padding to the
+	// left of lines of code to make room for the line numbers.
+	padding-left: var(--mds-spacing-05);
+
+	&.line-highlight {
+		// This accounts for the 4px margin on the left side so the content
+		// does not get moved by the margin.
+		padding-left: var(--mds-spacing-04);
+
+		// Enable the top border if this is the first line in a group of lines
+		&.line-highlight-first {
+			border-top-width: 1px;
+		}
+
+		// Enable the bottom border if this is the last line in a group of lines
+		&.line-highlight-last {
+			border-bottom-width: 1px;
+		}
+	}
+
+	& > span {
+		padding-right: var(--mds-spacing-09);
+	}
+}
+
+.line-number {
+	// Line numbers are <span> elements which are inline by default, but we
+	// want them to behave like block elements.
+	display: block;
+	color: #999;
+}

package/dist/components/code-block/code-block.module.scss.js

@@ -0,0 +1,34 @@
+const e = "dark__aBMo7", n = "token__aGMSy", t = "title__nX-Ny", i = "description__-44hG", _ = "header__42Fek", a = "body__pLFmP", l = "code__J06se", o = {
+  "code-block": "code-block__dOm6M",
+  "line-highlight": "line-highlight__a84m6",
+  dark: e,
+  "language-css": "language-css__8iYaN",
+  token: n,
+  "language-javascript": "language-javascript__EWK5u",
+  "language-markup": "language-markup__E7NSA",
+  "language-html": "language-html__rLwMK",
+  "is-standalone": "is-standalone__WLWxy",
+  title: t,
+  description: i,
+  header: _,
+  body: a,
+  code: l,
+  "copy-button": "copy-button__nMsTD",
+  "line-highlight-first": "line-highlight-first__OMDUP",
+  "line-highlight-last": "line-highlight-last__qC6nm",
+  "line-numbers": "line-numbers__a9m-I",
+  "line-numbers-rows": "line-numbers-rows__MjGTO",
+  "line-of-code": "line-of-code__mDztA",
+  "line-number": "line-number__-g7V-"
+};
+export {
+  a as body,
+  l as code,
+  e as dark,
+  o as default,
+  i as description,
+  _ as header,
+  t as title,
+  n as token
+};
+//# sourceMappingURL=code-block.module.scss.js.map

package/dist/components/code-block/code-block.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/code-block/code-lines/index.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+interface CodeLinesProps {
+    value: ReactNode;
+    hasLineNumbers?: boolean;
+    highlightLines?: string;
+}
+/**
+ * Render the provided code into separate line elements,
+ * accounting for all provided options.
+ */
+declare const CodeLines: ({ value, hasLineNumbers: lineNumbers, highlightLines: highlight, }: CodeLinesProps) => import("react/jsx-runtime").JSX.Element;
+export { CodeLines };

package/dist/components/code-block/code-lines/index.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsxs as c, Fragment as L, jsx as e } from "react/jsx-runtime";
+import { useMemo as d } from "react";
+import u from "classnames";
+import G from "../utils/parse-highlighted-lines.js";
+import N from "./utils/split-jsx-into-lines.js";
+import b from "./utils/split-html-into-lines.js";
+import h from "../code-block.module.scss.js";
+const S = ({
+  value: n,
+  hasLineNumbers: I,
+  highlightLines: f
+}) => {
+  const o = G(f), m = d(() => (typeof n == "string" ? b(n) : N(n)).map((g, l) => {
+    const t = l + 1, s = o.indexOf(t) !== -1;
+    return { children: g, highlight: s };
+  }).map(({ highlight: g, ...l }, t, s) => {
+    const p = t === 0 ? null : s[t - 1], a = t === s.length - 1 ? null : s[t + 1];
+    return {
+      ...l,
+      highlight: g,
+      highlightIsFirstInGroup: !p || !p.highlight,
+      highlightIsLastInGroup: !a || !a.highlight
+    };
+  }), [n, o]);
+  return /* @__PURE__ */ c(L, { children: [
+    I ? /* @__PURE__ */ e("span", { "aria-hidden": "true", className: h["line-numbers-rows"], children: m.map((i, r) => /* @__PURE__ */ e(
+      "span",
+      {
+        className: u(h["line-number"], {
+          [h["line-highlight"]]: i.highlight,
+          [h["line-highlight-first"]]: i.highlightIsFirstInGroup,
+          [h["line-highlight-last"]]: i.highlightIsLastInGroup
+        })
+      },
+      r
+    )) }) : null,
+    /* @__PURE__ */ e("span", { children: m.map((i, r) => /* @__PURE__ */ c(
+      "span",
+      {
+        className: u(h["line-of-code"], {
+          [h["line-highlight"]]: i.highlight,
+          [h["line-highlight-first"]]: i.highlightIsFirstInGroup,
+          [h["line-highlight-last"]]: i.highlightIsLastInGroup
+        }),
+        children: [
+          i.children,
+          `
+`
+        ]
+      },
+      r
+    )) })
+  ] });
+};
+export {
+  S as CodeLines
+};
+//# sourceMappingURL=index.js.map

package/dist/components/code-block/code-lines/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/code-block/code-lines/index.tsx"],"sourcesContent":["'use client'\n\n/**\n * Note: lines of code are expected to be stable. If we need to work with\n * dynamic code blocks in the future, we could assign random unique IDs\n * to each line during the `linesOfCode` `useMemo` function.\n *\n * For now, we disable react/no-array-index key for the entire file.\n */\n/* eslint-disable react/no-array-index-key */\n\nimport { useMemo, type ReactNode } from 'react'\nimport classNames from 'classnames'\nimport parseHighlightedLines from '../utils/parse-highlighted-lines'\nimport splitJsxIntoLines from './utils/split-jsx-into-lines'\nimport splitHtmlIntoLines from './utils/split-html-into-lines'\nimport s from '../code-block.module.scss'\n\ninterface CodeLinesProps {\n\tvalue: ReactNode\n\thasLineNumbers?: boolean\n\thighlightLines?: string\n}\n\n/**\n * Render the provided code into separate line elements,\n * accounting for all provided options.\n */\nconst CodeLines = ({\n\tvalue,\n\thasLineNumbers: lineNumbers,\n\thighlightLines: highlight,\n}: CodeLinesProps) => {\n\t// Parse out an array of integers representing which lines to highlight\n\tconst highlightedLines = parseHighlightedLines(highlight) as number[]\n\n\t/**\n\t * Split the incoming code into lines.\n\t * We need to do this in order to render each line of code in a\n\t * separate element, which is necessary for features such as highlighting\n\t * specific lines and allowing code to wrap.\n\t */\n\tconst linesOfCode = useMemo(() => {\n\t\tconst isHtmlString = typeof value === 'string'\n\t\tconst lineElements = isHtmlString\n\t\t\t? splitHtmlIntoLines(value)\n\t\t\t: splitJsxIntoLines(value)\n\t\treturn lineElements\n\t\t\t.map((children, index) => {\n\t\t\t\tconst number = index + 1\n\t\t\t\tconst highlight = highlightedLines.indexOf(number) !== -1\n\t\t\t\treturn { children, highlight }\n\t\t\t})\n\t\t\t.map(({ highlight, ...rest }, index, lines) => {\n\t\t\t\t// Add properties to help with highlighting adjacent lines of code,\n\t\t\t\t// in which case we want to apply a border to the first and last lines,\n\t\t\t\t// but not the lines in the middle of the group.\n\t\t\t\tconst prevLine = index === 0 ? null : lines[index - 1]\n\t\t\t\tconst nextLine = index === lines.length - 1 ? null : lines[index + 1]\n\t\t\t\treturn {\n\t\t\t\t\t...rest,\n\t\t\t\t\thighlight,\n\t\t\t\t\thighlightIsFirstInGroup: !prevLine || !prevLine.highlight,\n\t\t\t\t\thighlightIsLastInGroup: !nextLine || !nextLine.highlight,\n\t\t\t\t}\n\t\t\t})\n\t}, [value, highlightedLines])\n\n\t/**\n\t * For overflowing code, we use a two-column layout.\n\t * The first column contains line numbers, and is effectively fixed.\n\t * The second column contains the lines themselves, and is an overflow\n\t * container to allow extra long lines to scroll as needed.\n\t */\n\treturn (\n\t\t<>\n\t\t\t{lineNumbers ? (\n\t\t\t\t<span aria-hidden=\"true\" className={s['line-numbers-rows']}>\n\t\t\t\t\t{linesOfCode.map((line, idx) => (\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tkey={idx}\n\t\t\t\t\t\t\tclassName={classNames(s['line-number'], {\n\t\t\t\t\t\t\t\t[s['line-highlight']]: line.highlight,\n\t\t\t\t\t\t\t\t[s['line-highlight-first']]: line.highlightIsFirstInGroup,\n\t\t\t\t\t\t\t\t[s['line-highlight-last']]: line.highlightIsLastInGroup,\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</span>\n\t\t\t) : null}\n\t\t\t<span>\n\t\t\t\t{linesOfCode.map((line, idx) => (\n\t\t\t\t\t<span\n\t\t\t\t\t\tkey={idx}\n\t\t\t\t\t\tclassName={classNames(s['line-of-code'], {\n\t\t\t\t\t\t\t[s['line-highlight']]: line.highlight,\n\t\t\t\t\t\t\t[s['line-highlight-first']]: line.highlightIsFirstInGroup,\n\t\t\t\t\t\t\t[s['line-highlight-last']]: line.highlightIsLastInGroup,\n\t\t\t\t\t\t})}\n\t\t\t\t\t>\n\t\t\t\t\t\t{line.children}\n\t\t\t\t\t\t{/* We are _not_ rendering our lines as block elements, so we need\n\t\t\t\t\t\t    to add a trailing newline to all lines. As well, trailing\n\t\t\t\t\t\t\t\tnewlines are necessary for some browsers (FireFox)\n\t\t\t\t\t\t    to preserve whitespace during select-and-copy of code */}\n\t\t\t\t\t\t{'\\n'}\n\t\t\t\t\t</span>\n\t\t\t\t))}\n\t\t\t</span>\n\t\t</>\n\t)\n}\n\nexport { CodeLines }\n"],"names":["CodeLines","value","lineNumbers","highlight","highlightedLines","parseHighlightedLines","useMemo","splitHtmlIntoLines","splitJsxIntoLines","children","index","number","highlight2","rest","prevLine","lines","nextLine","jsxs","Fragment","jsx","s","linesOfCode","line","idx","classNames"],"mappings":";;;;;;;;AA4BmB,MAClBA,IAAA,CAAA;AAAA,EACA,OAAAC;AAAA,EACA,gBAAgBC;AAAA,EACjB,gBAAsBC;AAErB;AAQA,QAAMC,IAAcC,EAAcF,CAAA,OAC3BG,EAAe,OACA,OAAAL,KAClB,WAGcM,EAAUN,CAAA,IAAAO,EAAAP,CAAA,GACV,KAAQQ,GAAAC,MAAA;AACvB,UAAMP,IAAAA,IAAY,OACCC,UAAUO,CAAA,MAAA;AAC7B,aACO,UAAAF,GAAAN,WAAAA;EAIP,CAAA,EAAA,IAAA,CAAM,EAAA,WAAWS,GAAc,GAAAC,EAAO,GAAAH,SAAe;AACrD,UAAMI,IAAWJ,MAAU,IAAA,OAAMK,MAAa,CAAO,GACrDC,IAAON,MAAAK,EAAA,SAAA,IAAA,OAAAA,EAAAL,IAAA,CAAA;AAAA,WACH;AAAA,MACH,GAAAG;AAAA,MACA,WAAAD;AAAA,MACA,yBAAyB,MAAa,GAAS;AAAA,MAChD,wBAAA,CAAAI,KAAA,CAAAA,EAAA;AAAA,IACA;AAAA,EACH,CAAG,QASF,CAAA;AACE,SAAA,gBAAAC,EAAAC,GACC,EAAA,UAAK;AAAA,IAEJhB,IAAC,gBAAAiB,EAAA,QAAA,EAAA,eAAA,QAAA,WAAAC,EAAA,mBAAA,GAAA,UAAAC,EAAA,IAAA,CAAAC,GAAAC,MAAA,gBAAAJ;AAAA,MAAA;AAAA,MAAA;AAAA,QAEwC,WACpCK,EAAiBJ,EAAA,aAAQ,GAAA;AAAA,UAC5B,CAACA,EAAE,gBAAA,CAAA,GAAAE,EAAuB;AAAA,UAC1B,CAACF,EAAE,sBAAsB,CAAA,KAAQ;AAAA,UACjC,CAAAA,EAAA,qBAAA,CAAA,GAAAE,EAAA;AAAA,QAAA,CAAA;AAAA,MALI;AAAA;IASL,CAAA,EAAA,CAAA,IAAA;AAAA,IAGD,gBAAAH,EAAA,QAAA,EAAA,UAAAE,EAAA,IAAA,CAAAC,GAAAC,MAAA,gBAAAN;AAAA,MAAA;AAAA,MAAA;AAAA,QAEyC,WACrCO,EAAiBJ,EAAA,cAAQ,GAAA;AAAA,UAC5B,CAACA,EAAE,gBAAA,CAAA,GAAAE,EAAuB;AAAA,UAC1B,CAACF,EAAE,sBAAsB,CAAA,KAAQ;AAAA,UACjC,CAAAA,EAAA,qBAAA,CAAA,GAAAE,EAAA;AAAA,QAEA;QAAA,UAAK;AAAA,UAKLA,EAAA;AAAA,UAAA;AAAA;AAAA,QAAA;AAAA,MAZI;AAAA,MAcNC;AAAA,KAEH,EAAA,CAAA;AAAA,EAEF,EAAA,CAAA;;"}

package/dist/components/code-block/code-lines/utils/split-html-into-lines.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+/**
+ * Given a string of HTML, split it on newlines,
+ * and return an array of React <span> elements,
+ * each of which will contain a single line.
+ *
+ * Note that HTML tokens should not be multi-line,
+ * ie, all newline characters should be surfaced
+ * to the top level rather than nested in syntax
+ * highlighting tokens (otherwise the line-by-line
+ * markup we render would be invalid). We have
+ * a rehype plugin we use with our highlightString()
+ * utility to ensure newlines are surfaced in this way.
+ *
+ * @param {string} codeHtml String of HTML
+ * @returns Array of JSX <span> elements
+ */
+declare function splitHtmlIntoLines(codeHtml: string): (ReactNode | null)[];
+export default splitHtmlIntoLines;

package/dist/components/code-block/code-lines/utils/split-html-into-lines.js

@@ -0,0 +1,19 @@
+import { jsx as e } from "react/jsx-runtime";
+const r = '<span class="line"></span>';
+function p(t) {
+  const s = t.split(`
+`);
+  return s.map((n, i) => i == s.length - 1 && n == "" ? null : /* @__PURE__ */ e(
+    "span",
+    {
+      dangerouslySetInnerHTML: {
+        __html: n === "" || n === r ? "&nbsp;" : n
+      }
+    },
+    i
+  ));
+}
+export {
+  p as default
+};
+//# sourceMappingURL=split-html-into-lines.js.map

package/dist/components/code-block/code-lines/utils/split-html-into-lines.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-html-into-lines.js","sources":["../../../../../src/components/code-block/code-lines/utils/split-html-into-lines.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nconst SHIKI_BLANK_LINE = '<span class=\"line\"></span>'\n/**\n * Given a string of HTML, split it on newlines,\n * and return an array of React <span> elements,\n * each of which will contain a single line.\n *\n * Note that HTML tokens should not be multi-line,\n * ie, all newline characters should be surfaced\n * to the top level rather than nested in syntax\n * highlighting tokens (otherwise the line-by-line\n * markup we render would be invalid). We have\n * a rehype plugin we use with our highlightString()\n * utility to ensure newlines are surfaced in this way.\n *\n * @param {string} codeHtml String of HTML\n * @returns Array of JSX <span> elements\n */\nfunction splitHtmlIntoLines(codeHtml: string): (ReactNode | null)[] {\n\tconst lineParts = codeHtml.split('\\n')\n\treturn lineParts.map((lineHtml, stableIdx) => {\n\t\t// Cut trailing newlines\n\t\tconst isLastLine = stableIdx == lineParts.length - 1\n\t\tconst isTrailingNewline = isLastLine && lineHtml == ''\n\t\tif (isTrailingNewline) return null\n\t\t// Otherwise, render the line\n\t\treturn (\n\t\t\t<span\n\t\t\t\t// This array is stable, so we can use index as key\n\t\t\t\t// eslint-disable-next-line react/no-array-index-key\n\t\t\t\tkey={stableIdx}\n\t\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t\t__html:\n\t\t\t\t\t\tlineHtml === '' || lineHtml === SHIKI_BLANK_LINE\n\t\t\t\t\t\t\t? '&nbsp;'\n\t\t\t\t\t\t\t: lineHtml,\n\t\t\t\t}}\n\t\t\t/>\n\t\t)\n\t})\n}\n\nexport default splitHtmlIntoLines\n"],"names":["SHIKI_BLANK_LINE","splitHtmlIntoLines","codeHtml","lineParts","lineHtml","stableIdx","jsx"],"mappings":";AAEA,MAAMA,IAAmB;AAiBzB,SAASC,EAAmBC,GAAwC;AACnE,QAAMC,IAAYD,EAAS,MAAM;AAAA,CAAI;AACrC,SAAOC,EAAU,IAAI,CAACC,GAAUC,MAEZA,KAAaF,EAAU,SAAS,KACXC,KAAY,KACtB,OAG7B,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MAIA,yBAAyB;AAAA,QACxB,QACCF,MAAa,MAAMA,MAAaJ,IAC7B,WACAI;AAAA,MAAA;AAAA,IACL;AAAA,IANKC;AAAA,EAAA,CASP;AACF;"}