@ndla/ui 56.0.123-alpha.0 → 56.0.124-alpha.0

package/lib/Embed/BrightcoveEmbed.js

@@ -1,142 +1,97 @@
-"use strict";
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const require_EmbedByline = require('../LicenseByline/EmbedByline.js');
+const require_EmbedErrorPlaceholder = require('./EmbedErrorPlaceholder.js');
+const require_licenseAttributes = require('../utils/licenseAttributes.js');
+const react = require_rolldown_runtime.__toESM(require("react"));
+const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
+const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
+const html_react_parser = require_rolldown_runtime.__toESM(require("html-react-parser"));
+const react_i18next = require_rolldown_runtime.__toESM(require("react-i18next"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.makeIframeString = exports.isNumeric = exports.default = void 0;
-var _htmlReactParser = _interopRequireDefault(require("html-react-parser"));
-var _react = require("react");
-var _reactI18next = require("react-i18next");
-var _primitives = require("@ndla/primitives");
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _EmbedErrorPlaceholder = _interopRequireDefault(require("./EmbedErrorPlaceholder"));
-var _LicenseByline = require("../LicenseByline");
-var _licenseAttributes = require("../utils/licenseAttributes");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * Copyright (c) 2023-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-const LinkedVideoButton = (0, _jsx2.styled)(_primitives.Button, {
-  base: {
-    marginBlockStart: "3xsmall"
-  }
-});
-const BrightcoveIframe = (0, _jsx2.styled)("iframe", {
-  base: {
-    border: 0,
-    height: "auto",
-    width: "100%"
-  }
-});
-const makeIframeString = function (url, width, height) {
-  let title = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "";
-  const strippedWidth = typeof width === "number" ? width : width.replace(/\s*px/, "");
-  const strippedHeight = typeof height === "number" ? height : height.replace(/\s*px/, "");
-  const urlOrTitle = title || url;
-  return `<iframe title="${urlOrTitle}" aria-label="${urlOrTitle}" src="${url}" width="${strippedWidth}" height="${strippedHeight}" allowfullscreen scrolling="no" frameborder="0" loading="lazy"></iframe>`;
-};
-exports.makeIframeString = makeIframeString;
-const isNumeric = value => !Number.isNaN(value - Number.parseFloat(value));
-exports.isNumeric = isNumeric;
+//#region src/Embed/BrightcoveEmbed.tsx
+const LinkedVideoButton = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Button, { base: { marginBlockStart: "3xsmall" } });
+const BrightcoveIframe = (0, __ndla_styled_system_jsx.styled)("iframe", { base: {
+	border: 0,
+	height: "auto",
+	width: "100%"
+} });
+const isNumeric = (value) => !Number.isNaN(value - Number.parseFloat(value));
 const getIframeProps = (data, sources) => {
-  const {
-    account,
-    videoid,
-    player = "default"
-  } = data;
-  const source = sources.filter(s => s.width && s.height).toSorted((a, b) => a.height - b.height)[0];
-  return {
-    src: `https://players.brightcove.net/${account}/${player}_default/index.html?videoId=${videoid}`,
-    height: source?.height ?? "480",
-    width: source?.width ?? "640"
-  };
+	const { account, videoid, player = "default" } = data;
+	const source = sources.filter((s) => s.width && s.height).toSorted((a, b) => a.height - b.height)[0];
+	return {
+		src: `https://players.brightcove.net/${account}/${player}_default/index.html?videoId=${videoid}`,
+		height: source?.height ?? "480",
+		width: source?.width ?? "640"
+	};
 };
-const BrightcoveEmbed = _ref => {
-  let {
-    embed,
-    renderContext = "article",
-    lang
-  } = _ref;
-  const [showOriginalVideo, setShowOriginalVideo] = (0, _react.useState)(true);
-  const {
-    t
-  } = (0, _reactI18next.useTranslation)();
-  const iframeRef = (0, _react.useRef)(null);
-  const {
-    embedData
-  } = embed;
-  const fallbackTitle = `${t("embed.type.video")}: ${embedData.videoid}`;
-  const parsedDescription = (0, _react.useMemo)(() => {
-    if (embed.embedData.caption || renderContext === "article") {
-      return embed.embedData.caption ? (0, _htmlReactParser.default)(embed.embedData.caption) : undefined;
-    } else if (embed.status === "success" && embed.data.description) {
-      return (0, _htmlReactParser.default)(embed.data.description);
-    }
-  }, [embed, renderContext]);
-  (0, _react.useEffect)(() => {
-    const iframe = iframeRef.current;
-    if (iframe) {
-      const [width, height] = [parseInt(iframe.width), parseInt(iframe.height)];
-      iframe.style.aspectRatio = `${width}/${height}`;
-      iframe.width = "";
-      iframe.height = "";
-    }
-  }, []);
-  if (embed.status === "error") {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_EmbedErrorPlaceholder.default, {
-      type: "video",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BrightcoveIframe, {
-        ref: iframeRef,
-        title: embedData.alt || fallbackTitle,
-        "aria-label": embedData.alt || fallbackTitle,
-        ...getIframeProps(embedData, []),
-        allow: "fullscreen; encrypted-media"
-      })
-    });
-  }
-  const {
-    data
-  } = embed;
-  const linkedVideoId = isNumeric(data.link?.text) ? data.link?.text : undefined;
-  const originalVideoProps = getIframeProps(embedData, data.sources);
-  const alternativeVideoProps = linkedVideoId ? getIframeProps({
-    ...embedData,
-    videoid: linkedVideoId
-  }, data.sources) : undefined;
-  const licenseProps = (0, _licenseAttributes.licenseAttributes)(data?.copyright?.license.license, lang, embedData.pageUrl);
-  const title = data.name?.trim() ? `${t("embed.type.video")}: ${data.name}` : fallbackTitle;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.Figure, {
-    "data-embed-type": "brightcove",
-    ...licenseProps,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "brightcove-video",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BrightcoveIframe, {
-        ref: iframeRef,
-        className: "original",
-        title: title,
-        "aria-label": title,
-        ...(alternativeVideoProps && !showOriginalVideo ? alternativeVideoProps : originalVideoProps),
-        allow: "fullscreen; encrypted-media"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LicenseByline.EmbedByline, {
-      type: "video",
-      copyright: data.copyright,
-      description: parsedDescription,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        children: !!linkedVideoId && /*#__PURE__*/(0, _jsxRuntime.jsx)(LinkedVideoButton, {
-          size: "small",
-          variant: "secondary",
-          onClick: () => setShowOriginalVideo(p => !p),
-          children: t(`figure.button.${!showOriginalVideo ? "original" : "alternative"}`)
-        })
-      })
-    })]
-  });
+const BrightcoveEmbed = ({ embed, renderContext = "article", lang }) => {
+	const [showOriginalVideo, setShowOriginalVideo] = (0, react.useState)(true);
+	const { t } = (0, react_i18next.useTranslation)();
+	const iframeRef = (0, react.useRef)(null);
+	const { embedData } = embed;
+	const fallbackTitle = `${t("embed.type.video")}: ${embedData.videoid}`;
+	const parsedDescription = (0, react.useMemo)(() => {
+		if (embed.embedData.caption || renderContext === "article") return embed.embedData.caption ? (0, html_react_parser.default)(embed.embedData.caption) : void 0;
+		else if (embed.status === "success" && embed.data.description) return (0, html_react_parser.default)(embed.data.description);
+	}, [embed, renderContext]);
+	(0, react.useEffect)(() => {
+		const iframe = iframeRef.current;
+		if (iframe) {
+			const [width, height] = [parseInt(iframe.width), parseInt(iframe.height)];
+			iframe.style.aspectRatio = `${width}/${height}`;
+			iframe.width = "";
+			iframe.height = "";
+		}
+	}, []);
+	if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmbedErrorPlaceholder.EmbedErrorPlaceholder_default, {
+		type: "video",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BrightcoveIframe, {
+			ref: iframeRef,
+			title: embedData.alt || fallbackTitle,
+			"aria-label": embedData.alt || fallbackTitle,
+			...getIframeProps(embedData, []),
+			allow: "fullscreen; encrypted-media"
+		})
+	});
+	const { data } = embed;
+	const linkedVideoId = isNumeric(data.link?.text) ? data.link?.text : void 0;
+	const originalVideoProps = getIframeProps(embedData, data.sources);
+	const alternativeVideoProps = linkedVideoId ? getIframeProps({
+		...embedData,
+		videoid: linkedVideoId
+	}, data.sources) : void 0;
+	const licenseProps = require_licenseAttributes.licenseAttributes(data?.copyright?.license.license, lang, embedData.pageUrl);
+	const title = data.name?.trim() ? `${t("embed.type.video")}: ${data.name}` : fallbackTitle;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.Figure, {
+		"data-embed-type": "brightcove",
+		...licenseProps,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "brightcove-video",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BrightcoveIframe, {
+				ref: iframeRef,
+				className: "original",
+				title,
+				"aria-label": title,
+				...alternativeVideoProps && !showOriginalVideo ? alternativeVideoProps : originalVideoProps,
+				allow: "fullscreen; encrypted-media"
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmbedByline.EmbedByline, {
+			type: "video",
+			copyright: data.copyright,
+			description: parsedDescription,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: !!linkedVideoId && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkedVideoButton, {
+				size: "small",
+				variant: "secondary",
+				onClick: () => setShowOriginalVideo((p) => !p),
+				children: t(`figure.button.${!showOriginalVideo ? "original" : "alternative"}`)
+			}) })
+		})]
+	});
 };
-var _default = exports.default = BrightcoveEmbed;
+var BrightcoveEmbed_default = BrightcoveEmbed;
+
+//#endregion
+exports.BrightcoveEmbed_default = BrightcoveEmbed_default;
+//# sourceMappingURL=BrightcoveEmbed.js.map

package/lib/Embed/BrightcoveEmbed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BrightcoveEmbed.js","names":["Button","value: any","data: BrightcoveEmbedData","sources: BrightcoveVideoSource[]","EmbedErrorPlaceholder","Figure","EmbedByline"],"sources":["../../src/Embed/BrightcoveEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport parse from \"html-react-parser\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Button, Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { BrightcoveEmbedData, BrightcoveMetaData, BrightcoveVideoSource } from \"@ndla/types-embed\";\nimport EmbedErrorPlaceholder from \"./EmbedErrorPlaceholder\";\nimport type { RenderContext } from \"./types\";\nimport { EmbedByline } from \"../LicenseByline\";\nimport { licenseAttributes } from \"../utils/licenseAttributes\";\n\ninterface Props {\n  embed: BrightcoveMetaData;\n  renderContext?: RenderContext;\n  lang?: string;\n}\n\nconst LinkedVideoButton = styled(Button, {\n  base: {\n    marginBlockStart: \"3xsmall\",\n  },\n});\n\nconst BrightcoveIframe = styled(\"iframe\", {\n  base: {\n    border: 0,\n    height: \"auto\",\n    width: \"100%\",\n  },\n});\n\nexport const makeIframeString = (url: string, width: string | number, height: string | number, title = \"\") => {\n  const strippedWidth = typeof width === \"number\" ? width : width.replace(/\\s*px/, \"\");\n  const strippedHeight = typeof height === \"number\" ? height : height.replace(/\\s*px/, \"\");\n  const urlOrTitle = title || url;\n  return `<iframe title=\"${urlOrTitle}\" aria-label=\"${urlOrTitle}\" src=\"${url}\" width=\"${strippedWidth}\" height=\"${strippedHeight}\" allowfullscreen scrolling=\"no\" frameborder=\"0\" loading=\"lazy\"></iframe>`;\n};\n\nexport const isNumeric = (value: any) => !Number.isNaN(value - Number.parseFloat(value));\n\nconst getIframeProps = (data: BrightcoveEmbedData, sources: BrightcoveVideoSource[]) => {\n  const { account, videoid, player = \"default\" } = data;\n\n  const source = sources.filter((s) => s.width && s.height).toSorted((a, b) => a!.height! - b.height!)[0];\n\n  return {\n    src: `https://players.brightcove.net/${account}/${player}_default/index.html?videoId=${videoid}`,\n    height: source?.height ?? \"480\",\n    width: source?.width ?? \"640\",\n  };\n};\nconst BrightcoveEmbed = ({ embed, renderContext = \"article\", lang }: Props) => {\n  const [showOriginalVideo, setShowOriginalVideo] = useState(true);\n  const { t } = useTranslation();\n  const iframeRef = useRef<HTMLIFrameElement>(null);\n  const { embedData } = embed;\n  const fallbackTitle = `${t(\"embed.type.video\")}: ${embedData.videoid}`;\n  const parsedDescription = useMemo(() => {\n    if (embed.embedData.caption || renderContext === \"article\") {\n      return embed.embedData.caption ? parse(embed.embedData.caption) : undefined;\n    } else if (embed.status === \"success\" && embed.data.description) {\n      return parse(embed.data.description);\n    }\n  }, [embed, renderContext]);\n\n  useEffect(() => {\n    const iframe = iframeRef.current;\n    if (iframe) {\n      const [width, height] = [parseInt(iframe.width), parseInt(iframe.height)];\n      iframe.style.aspectRatio = `${width}/${height}`;\n      iframe.width = \"\";\n      iframe.height = \"\";\n    }\n  }, []);\n  if (embed.status === \"error\") {\n    return (\n      <EmbedErrorPlaceholder type=\"video\">\n        <BrightcoveIframe\n          ref={iframeRef}\n          title={embedData.alt || fallbackTitle}\n          aria-label={embedData.alt || fallbackTitle}\n          {...getIframeProps(embedData, [])}\n          allow=\"fullscreen; encrypted-media\"\n        />\n      </EmbedErrorPlaceholder>\n    );\n  }\n  const { data } = embed;\n\n  const linkedVideoId = isNumeric(data.link?.text) ? data.link?.text : undefined;\n\n  const originalVideoProps = getIframeProps(embedData, data.sources);\n  const alternativeVideoProps = linkedVideoId\n    ? getIframeProps({ ...embedData, videoid: linkedVideoId }, data.sources)\n    : undefined;\n\n  const licenseProps = licenseAttributes(data?.copyright?.license.license, lang, embedData.pageUrl);\n\n  const title = data.name?.trim() ? `${t(\"embed.type.video\")}: ${data.name}` : fallbackTitle;\n\n  return (\n    <Figure data-embed-type=\"brightcove\" {...licenseProps}>\n      <div className=\"brightcove-video\">\n        <BrightcoveIframe\n          ref={iframeRef}\n          className=\"original\"\n          title={title}\n          aria-label={title}\n          {...(alternativeVideoProps && !showOriginalVideo ? alternativeVideoProps : originalVideoProps)}\n          allow=\"fullscreen; encrypted-media\"\n        />\n      </div>\n      <EmbedByline type=\"video\" copyright={data.copyright!} description={parsedDescription}>\n        <div>\n          {!!linkedVideoId && (\n            <LinkedVideoButton size=\"small\" variant=\"secondary\" onClick={() => setShowOriginalVideo((p) => !p)}>\n              {t(`figure.button.${!showOriginalVideo ? \"original\" : \"alternative\"}`)}\n            </LinkedVideoButton>\n          )}\n        </div>\n      </EmbedByline>\n    </Figure>\n  );\n};\n\nexport default BrightcoveEmbed;\n"],"mappings":"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"}

package/lib/Embed/CodeEmbed.js

@@ -1,86 +1,62 @@
-"use strict";
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const require_EmbedErrorPlaceholder = require('./EmbedErrorPlaceholder.js');
+const require_CodeBlock = require('../CodeBlock/CodeBlock.js');
+const require_codeLanguageOptions = require('../CodeBlock/codeLanguageOptions.js');
+const react = require_rolldown_runtime.__toESM(require("react"));
+const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
+const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
+const react_i18next = require_rolldown_runtime.__toESM(require("react-i18next"));
+const __ndla_icons = require_rolldown_runtime.__toESM(require("@ndla/icons"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+const __ndla_util = require_rolldown_runtime.__toESM(require("@ndla/util"));
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _reactI18next = require("react-i18next");
-var _icons = require("@ndla/icons");
-var _primitives = require("@ndla/primitives");
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _util = require("@ndla/util");
-var _EmbedErrorPlaceholder = _interopRequireDefault(require("./EmbedErrorPlaceholder"));
-var _CodeBlock = require("../CodeBlock");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * Copyright (c) 2023-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-const StyledFigCaption = (0, _jsx2.styled)("figcaption", {
-  base: {
-    textStyle: "label.large",
-    fontWeight: "bold"
-  }
-});
-const StyledFigure = (0, _jsx2.styled)(_primitives.Figure, {
-  base: {
-    clear: "both",
-    // We apply margin here to allow for the float and size props on figure to work as intended.
-    "& > *:not(:where(:first-child))": {
-      marginBlockStart: "xsmall"
-    }
-  }
-});
-const getTitleFromFormat = format => {
-  const selectedLanguage = _CodeBlock.codeLanguageOptions.find(item => item.format === format);
-  if (selectedLanguage) {
-    return selectedLanguage.title;
-  }
-  return;
+//#region src/Embed/CodeEmbed.tsx
+const StyledFigCaption = (0, __ndla_styled_system_jsx.styled)("figcaption", { base: {
+	textStyle: "label.large",
+	fontWeight: "bold"
+} });
+const StyledFigure = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Figure, { base: {
+	clear: "both",
+	"& > *:not(:where(:first-child))": { marginBlockStart: "xsmall" }
+} });
+const getTitleFromFormat = (format) => {
+	const selectedLanguage = require_codeLanguageOptions.codeLanguageOptions.find((item) => item.format === format);
+	if (selectedLanguage) return selectedLanguage.title;
+	return;
 };
-const CodeEmbed = _ref => {
-  let {
-    embed
-  } = _ref;
-  const [isCopied, setIsCopied] = (0, _react.useState)(false);
-  const {
-    t
-  } = (0, _reactI18next.useTranslation)();
-  (0, _react.useEffect)(() => {
-    if (isCopied) {
-      const timer = setInterval(() => setIsCopied(false), 3000);
-      // ensure interval is cleared - also if unmounted
-      return () => {
-        clearTimeout(timer);
-      };
-    }
-  }, [isCopied]);
-  if (embed.status === "error") {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_EmbedErrorPlaceholder.default, {
-      type: "code"
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledFigure, {
-    "data-embed-type": "code-block",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFigCaption, {
-      children: embed.embedData.title || getTitleFromFormat(embed.embedData.codeFormat)
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CodeBlock.CodeBlock, {
-      highlightedCode: embed.status === "success" ? embed.data.highlightedCode : "",
-      format: embed.embedData.codeFormat
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.Button, {
-      variant: "secondary",
-      onClick: () => {
-        (0, _util.copyTextToClipboard)(embed.status === "success" ? embed.data.decodedContent : "");
-        setIsCopied(true);
-      },
-      children: [isCopied ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CheckLine, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.FileCopyLine, {}), isCopied ? t("codeBlock.copiedCode") : t("codeBlock.copyCode")]
-    })]
-  });
+const CodeEmbed = ({ embed }) => {
+	const [isCopied, setIsCopied] = (0, react.useState)(false);
+	const { t } = (0, react_i18next.useTranslation)();
+	(0, react.useEffect)(() => {
+		if (isCopied) {
+			const timer = setInterval(() => setIsCopied(false), 3e3);
+			return () => {
+				clearTimeout(timer);
+			};
+		}
+	}, [isCopied]);
+	if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmbedErrorPlaceholder.EmbedErrorPlaceholder_default, { type: "code" });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledFigure, {
+		"data-embed-type": "code-block",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledFigCaption, { children: embed.embedData.title || getTitleFromFormat(embed.embedData.codeFormat) }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CodeBlock.CodeBlock_default, {
+				highlightedCode: embed.status === "success" ? embed.data.highlightedCode : "",
+				format: embed.embedData.codeFormat
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.Button, {
+				variant: "secondary",
+				onClick: () => {
+					(0, __ndla_util.copyTextToClipboard)(embed.status === "success" ? embed.data.decodedContent : "");
+					setIsCopied(true);
+				},
+				children: [isCopied ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.CheckLine, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.FileCopyLine, {}), isCopied ? t("codeBlock.copiedCode") : t("codeBlock.copyCode")]
+			})
+		]
+	});
 };
-var _default = exports.default = CodeEmbed;
+var CodeEmbed_default = CodeEmbed;
+
+//#endregion
+exports.CodeEmbed_default = CodeEmbed_default;
+//# sourceMappingURL=CodeEmbed.js.map

package/lib/Embed/CodeEmbed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeEmbed.js","names":["Figure","format: string","item: ICodeLangugeOption","EmbedErrorPlaceholder","CodeBlock","Button","CheckLine","FileCopyLine"],"sources":["../../src/Embed/CodeEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { useEffect, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { FileCopyLine, CheckLine } from \"@ndla/icons\";\nimport { Button, Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { CodeMetaData } from \"@ndla/types-embed\";\nimport { copyTextToClipboard } from \"@ndla/util\";\nimport EmbedErrorPlaceholder from \"./EmbedErrorPlaceholder\";\nimport { CodeBlock, codeLanguageOptions } from \"../CodeBlock\";\nimport type { ICodeLangugeOption } from \"../CodeBlock/codeLanguageOptions\";\n\ninterface Props {\n  embed: CodeMetaData;\n}\n\nconst StyledFigCaption = styled(\"figcaption\", {\n  base: {\n    textStyle: \"label.large\",\n    fontWeight: \"bold\",\n  },\n});\n\nconst StyledFigure = styled(Figure, {\n  base: {\n    clear: \"both\",\n    // We apply margin here to allow for the float and size props on figure to work as intended.\n    \"& > *:not(:where(:first-child))\": {\n      marginBlockStart: \"xsmall\",\n    },\n  },\n});\n\nconst getTitleFromFormat = (format: string) => {\n  const selectedLanguage = codeLanguageOptions.find((item: ICodeLangugeOption) => item.format === format);\n  if (selectedLanguage) {\n    return selectedLanguage.title;\n  }\n  return;\n};\n\nconst CodeEmbed = ({ embed }: Props) => {\n  const [isCopied, setIsCopied] = useState(false);\n  const { t } = useTranslation();\n\n  useEffect(() => {\n    if (isCopied) {\n      const timer = setInterval(() => setIsCopied(false), 3000);\n      // ensure interval is cleared - also if unmounted\n      return () => {\n        clearTimeout(timer);\n      };\n    }\n  }, [isCopied]);\n\n  if (embed.status === \"error\") {\n    return <EmbedErrorPlaceholder type=\"code\" />;\n  }\n\n  return (\n    <StyledFigure data-embed-type=\"code-block\">\n      <StyledFigCaption>{embed.embedData.title || getTitleFromFormat(embed.embedData.codeFormat)}</StyledFigCaption>\n      <CodeBlock\n        highlightedCode={embed.status === \"success\" ? embed.data.highlightedCode : \"\"}\n        format={embed.embedData.codeFormat}\n      />\n      <Button\n        variant=\"secondary\"\n        onClick={() => {\n          copyTextToClipboard(embed.status === \"success\" ? embed.data.decodedContent : \"\");\n          setIsCopied(true);\n        }}\n      >\n        {isCopied ? <CheckLine /> : <FileCopyLine />}\n        {isCopied ? t(\"codeBlock.copiedCode\") : t(\"codeBlock.copyCode\")}\n      </Button>\n    </StyledFigure>\n  );\n};\n\nexport default CodeEmbed;\n"],"mappings":";;;;;;;;;;;;;AAuBA,MAAM,mBAAmB,qCAAO,cAAc,EAC5C,MAAM;CACJ,WAAW;CACX,YAAY;AACb,EACF,EAAC;AAEF,MAAM,eAAe,qCAAOA,0BAAQ,EAClC,MAAM;CACJ,OAAO;CAEP,mCAAmC,EACjC,kBAAkB,SACnB;AACF,EACF,EAAC;AAEF,MAAM,qBAAqB,CAACC,WAAmB;CAC7C,MAAM,mBAAmB,gDAAoB,KAAK,CAACC,SAA6B,KAAK,WAAW,OAAO;AACvG,KAAI,iBACF,QAAO,iBAAiB;AAE1B;AACD;AAED,MAAM,YAAY,CAAC,EAAE,OAAc,KAAK;CACtC,MAAM,CAAC,UAAU,YAAY,GAAG,oBAAS,MAAM;CAC/C,MAAM,EAAE,GAAG,GAAG,mCAAgB;AAE9B,sBAAU,MAAM;AACd,MAAI,UAAU;GACZ,MAAM,QAAQ,YAAY,MAAM,YAAY,MAAM,EAAE,IAAK;AAEzD,UAAO,MAAM;AACX,iBAAa,MAAM;GACpB;EACF;CACF,GAAE,CAAC,QAAS,EAAC;AAEd,KAAI,MAAM,WAAW,QACnB,wBAAO,2BAACC,+DAAsB,MAAK,SAAS;AAG9C,wBACE,4BAAC;EAAa,mBAAgB;;mBAC5B,2BAAC,8BAAkB,MAAM,UAAU,SAAS,mBAAmB,MAAM,UAAU,WAAW,GAAoB;mBAC9G,2BAACC;IACC,iBAAiB,MAAM,WAAW,YAAY,MAAM,KAAK,kBAAkB;IAC3E,QAAQ,MAAM,UAAU;KACxB;mBACF,4BAACC;IACC,SAAQ;IACR,SAAS,MAAM;AACb,0CAAoB,MAAM,WAAW,YAAY,MAAM,KAAK,iBAAiB,GAAG;AAChF,iBAAY,KAAK;IAClB;eAEA,2BAAW,2BAACC,2BAAY,mBAAG,2BAACC,8BAAe,EAC3C,WAAW,EAAE,uBAAuB,GAAG,EAAE,qBAAqB;KACxD;;GACI;AAElB;AAED,wBAAe"}

package/lib/Embed/ConceptEmbed.js

@@ -1,131 +1,81 @@
-"use strict";
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const require_EmbedErrorPlaceholder = require('./EmbedErrorPlaceholder.js');
+const require_ConceptInlineTriggerButton = require('./ConceptInlineTriggerButton.js');
+const require_GlossEmbed = require('./GlossEmbed.js');
+const require_Concept = require('../Concept/Concept.js');
+const react = require_rolldown_runtime.__toESM(require("react"));
+const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
+const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
+const html_react_parser = require_rolldown_runtime.__toESM(require("html-react-parser"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+const __ark_ui_react = require_rolldown_runtime.__toESM(require("@ark-ui/react"));
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.InlineConcept = exports.ConceptEmbed = exports.BlockConcept = void 0;
-var _htmlReactParser = _interopRequireDefault(require("html-react-parser"));
-var _react = require("react");
-var _react2 = require("@ark-ui/react");
-var _primitives = require("@ndla/primitives");
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _ConceptInlineTriggerButton = require("./ConceptInlineTriggerButton");
-var _EmbedErrorPlaceholder = _interopRequireDefault(require("./EmbedErrorPlaceholder"));
-var _GlossEmbed = require("./GlossEmbed");
-var _Concept = require("../Concept/Concept");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * Copyright (c) 2024-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-const StyledPopoverContent = (0, _jsx2.styled)(_primitives.PopoverContent, {
-  base: {
-    width: "surface.xlarge",
-    maxHeight: "50vh",
-    overflowY: "auto"
-  }
+//#region src/Embed/ConceptEmbed.tsx
+const StyledPopoverContent = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.PopoverContent, { base: {
+	width: "surface.xlarge",
+	maxHeight: "50vh",
+	overflowY: "auto"
+} });
+const ConceptEmbed = ({ embed, renderContext, lang, previewAlt }) => {
+	const parsedContent = (0, react.useMemo)(() => {
+		if (embed.status === "error" || !embed.data.concept.content) return void 0;
+		return (0, html_react_parser.default)(embed.data.concept.content.htmlContent);
+	}, [embed]);
+	if (embed.status === "error" && embed.embedData.type === "inline") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: embed.embedData.linkText });
+	if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmbedErrorPlaceholder.EmbedErrorPlaceholder_default, { type: "gloss" });
+	const { concept, visualElement } = embed.data;
+	if (embed.data.concept.glossData) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_GlossEmbed.GlossEmbed, { embed });
+	if (embed.embedData.type === "inline") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InlineConcept, {
+		previewAlt,
+		linkText: embed.embedData.linkText,
+		copyright: concept.copyright,
+		visualElement,
+		lang,
+		title: concept.title.title,
+		source: concept.source,
+		children: parsedContent
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BlockConcept, {
+		previewAlt,
+		copyright: concept.copyright,
+		visualElement,
+		lang,
+		title: renderContext === "embed" ? void 0 : concept.title.title,
+		source: concept.source,
+		children: parsedContent
+	});
+};
+const InlineConcept = (0, react.forwardRef)(({ linkText, copyright, visualElement, previewAlt, lang, children, title, source,...rest }, ref) => {
+	const contentRef = (0, react.useRef)(null);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.PopoverRoot, {
+		initialFocusEl: () => contentRef.current,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.PopoverTrigger, {
+			asChild: true,
+			ref,
+			...rest,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ConceptInlineTriggerButton.ConceptInlineTriggerButton, { children: linkText })
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledPopoverContent, {
+			ref: contentRef,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Concept.Concept, {
+				copyright,
+				visualElement,
+				title,
+				lang,
+				source,
+				previewAlt,
+				children
+			})
+		}) })]
+	});
 });
-const ConceptEmbed = _ref => {
-  let {
-    embed,
-    renderContext,
-    lang,
-    previewAlt
-  } = _ref;
-  const parsedContent = (0, _react.useMemo)(() => {
-    if (embed.status === "error" || !embed.data.concept.content) return undefined;
-    return (0, _htmlReactParser.default)(embed.data.concept.content.htmlContent);
-  }, [embed]);
-  if (embed.status === "error" && embed.embedData.type === "inline") {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      children: embed.embedData.linkText
-    });
-  }
-  if (embed.status === "error") {
-    // TODO: This could be either concept or gloss. We don't know if it errors out. :)
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_EmbedErrorPlaceholder.default, {
-      type: "gloss"
-    });
-  }
-  const {
-    concept,
-    visualElement
-  } = embed.data;
+const BlockConcept = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Concept.Concept, {
+	...props,
+	"data-embed-type": "concept",
+	ref
+}));
 
-  // TODO: Consider whether we should do this in article-converter instead.
-  if (embed.data.concept.glossData) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GlossEmbed.GlossEmbed, {
-      embed: embed
-    });
-  }
-  if (embed.embedData.type === "inline") {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(InlineConcept, {
-      previewAlt: previewAlt,
-      linkText: embed.embedData.linkText,
-      copyright: concept.copyright,
-      visualElement: visualElement,
-      lang: lang,
-      title: concept.title.title,
-      source: concept.source,
-      children: parsedContent
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BlockConcept, {
-    previewAlt: previewAlt,
-    copyright: concept.copyright,
-    visualElement: visualElement,
-    lang: lang,
-    title: renderContext === "embed" ? undefined : concept.title.title,
-    source: concept.source,
-    children: parsedContent
-  });
-};
+//#endregion
+exports.BlockConcept = BlockConcept;
 exports.ConceptEmbed = ConceptEmbed;
-const InlineConcept = exports.InlineConcept = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
-  let {
-    linkText,
-    copyright,
-    visualElement,
-    previewAlt,
-    lang,
-    children,
-    title,
-    source,
-    ...rest
-  } = _ref2;
-  const contentRef = (0, _react.useRef)(null);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.PopoverRoot, {
-    initialFocusEl: () => contentRef.current,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.PopoverTrigger, {
-      asChild: true,
-      ref: ref,
-      ...rest,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConceptInlineTriggerButton.ConceptInlineTriggerButton, {
-        children: linkText
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Portal, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledPopoverContent, {
-        ref: contentRef,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Concept.Concept, {
-          copyright: copyright,
-          visualElement: visualElement,
-          title: title,
-          lang: lang,
-          source: source,
-          previewAlt: previewAlt,
-          children: children
-        })
-      })
-    })]
-  });
-});
-const BlockConcept = exports.BlockConcept = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Concept.Concept, {
-  ...props,
-  "data-embed-type": "concept",
-  ref: ref
-}));
+exports.InlineConcept = InlineConcept;
+//# sourceMappingURL=ConceptEmbed.js.map