@ndla/ui 56.0.129-alpha.0 → 56.0.131-alpha.0
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.
- package/es/Embed/ConceptEmbed.js +5 -5
- package/es/Embed/ConceptEmbed.js.map +1 -1
- package/es/Embed/GlossEmbed.js +3 -3
- package/es/Embed/GlossEmbed.js.map +1 -1
- package/lib/Article/Article.js +4 -4
- package/lib/Article/ArticleByline.js +2 -2
- package/lib/Article/ArticleByline.js.map +1 -1
- package/lib/AudioPlayer/AudioPlayer.js +4 -4
- package/lib/AudioPlayer/index.js +2 -2
- package/lib/Breadcrumb/Breadcrumb.js +2 -2
- package/lib/Breadcrumb/HomeBreadcrumb.js +2 -2
- package/lib/Breadcrumb/index.js +3 -3
- package/lib/CampaignBlock/CampaignBlock.js +2 -2
- package/lib/CampaignBlock/CampaignBlock.js.map +1 -1
- package/lib/Concept/Concept.js +11 -11
- package/lib/Concept/Concept.js.map +1 -1
- package/lib/ContactBlock/ContactBlock.js +2 -2
- package/lib/ContentTypeBadge/ContentTypeBadge.js +20 -20
- package/lib/ContentTypeBadge/ContentTypeBadge.js.map +1 -1
- package/lib/ContentTypeHero/ContentTypeHero.js +20 -20
- package/lib/ContentTypeHero/ContentTypeHero.js.map +1 -1
- package/lib/CopyParagraphButton/index.js +2 -2
- package/lib/Embed/AudioEmbed.js +9 -9
- package/lib/Embed/AudioEmbed.js.map +1 -1
- package/lib/Embed/BrightcoveEmbed.js +6 -6
- package/lib/Embed/BrightcoveEmbed.js.map +1 -1
- package/lib/Embed/CodeEmbed.js +6 -6
- package/lib/Embed/CodeEmbed.js.map +1 -1
- package/lib/Embed/ConceptEmbed.d.ts +4 -2
- package/lib/Embed/ConceptEmbed.js +13 -13
- package/lib/Embed/ConceptEmbed.js.map +1 -1
- package/lib/Embed/ConceptInlineTriggerButton.js +2 -2
- package/lib/Embed/ConceptInlineTriggerButton.js.map +1 -1
- package/lib/Embed/CopyrightEmbed.js +2 -2
- package/lib/Embed/EmbedErrorPlaceholder.js +2 -2
- package/lib/Embed/ExternalEmbed.js +4 -4
- package/lib/Embed/ExternalEmbed.js.map +1 -1
- package/lib/Embed/GlossEmbed.d.ts +3 -1
- package/lib/Embed/GlossEmbed.js +9 -9
- package/lib/Embed/GlossEmbed.js.map +1 -1
- package/lib/Embed/H5pEmbed.js +2 -2
- package/lib/Embed/H5pEmbed.js.map +1 -1
- package/lib/Embed/IframeEmbed.js +4 -4
- package/lib/Embed/IframeEmbed.js.map +1 -1
- package/lib/Embed/ImageEmbed.js +6 -6
- package/lib/Embed/ImageEmbed.js.map +1 -1
- package/lib/Embed/RelatedContentEmbed.js +6 -6
- package/lib/Embed/RelatedContentEmbed.js.map +1 -1
- package/lib/ErrorMessage/index.js +2 -2
- package/lib/FactBox/index.js +2 -2
- package/lib/FileList/File.js +2 -2
- package/lib/FileList/File.js.map +1 -1
- package/lib/Gloss/Gloss.js +4 -4
- package/lib/LicenseByline/EmbedByline.js +2 -2
- package/lib/LinkBlock/LinkBlock.js +2 -2
- package/lib/LinkBlock/LinkBlock.js.map +1 -1
- package/lib/Pitch/Pitch.js +2 -2
- package/lib/Pitch/Pitch.js.map +1 -1
- package/lib/RelatedArticleList/RelatedArticleList.js +4 -4
- package/lib/RelatedArticleList/RelatedArticleList.js.map +1 -1
- package/lib/RelatedArticleList/index.js +2 -2
- package/lib/i18n/i18n.js +8 -8
- package/lib/i18n/i18n.js.map +1 -1
- package/lib/index.js +156 -156
- package/lib/locale/messages-en.js +2 -2
- package/lib/locale/messages-nb.js +2 -2
- package/lib/locale/messages-nn.js +2 -2
- package/lib/locale/messages-se.js +2 -2
- package/lib/model/index.js +10 -10
- package/lib/utils/relativeUrl.js +2 -2
- package/lib/utils/relativeUrl.js.map +1 -1
- package/package.json +7 -7
- package/src/Embed/ConceptEmbed.stories.tsx +5 -2
- package/src/Embed/ConceptEmbed.tsx +8 -7
- package/src/Embed/GlossEmbed.stories.tsx +5 -2
- package/src/Embed/GlossEmbed.tsx +5 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContentTypeHero.js","names":["contentTypeToHeroMap: Record<ContentType, HeroVariant>","Hero"],"sources":["../../src/ContentTypeHero/ContentTypeHero.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-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 { forwardRef } from \"react\";\nimport { Hero, type HeroProps, type HeroVariant } from \"@ndla/primitives\";\nimport type { ContentType } from \"../ContentTypeBadge/ContentTypeBadge\";\nimport * as contentTypes from \"../model/ContentType\";\n\nexport const contentTypeToHeroMap: Record<ContentType, HeroVariant> = {\n [contentTypes.SUBJECT_MATERIAL]: \"primary\",\n [contentTypes.TASKS_AND_ACTIVITIES]: \"brand2Bold\",\n [contentTypes.ASSESSMENT_RESOURCES]: \"brand2\",\n // This will never happen\n [contentTypes.SUBJECT]: \"primary\",\n [contentTypes.SOURCE_MATERIAL]: \"brand1\",\n // This will never happen\n [contentTypes.LEARNING_PATH]: \"primary\",\n [contentTypes.TOPIC]: \"neutral\",\n [contentTypes.MULTIDISCIPLINARY]: \"primary\",\n [contentTypes.CONCEPT]: \"brand1Moderate\",\n [contentTypes.EXTERNAL]: \"primary\",\n [contentTypes.IMAGE]: \"primary\",\n [contentTypes.AUDIO]: \"primary\",\n [contentTypes.PODCAST]: \"primary\",\n [contentTypes.VIDEO]: \"primary\",\n [contentTypes.MISSING]: \"neutral\",\n [contentTypes.GLOSS]: \"brand1Moderate\",\n // this will never happen\n [contentTypes.PROGRAMME]: \"primary\",\n // this will never happen\n [contentTypes.PODCAST_SERIES]: \"primary\",\n [contentTypes.FRONTPAGE_ARTICLE]: \"primary\",\n};\n\nexport interface ContentTypeHeroProps extends HeroProps {\n contentType: ContentType | undefined;\n}\n\nexport const ContentTypeHero = forwardRef<HTMLDivElement, ContentTypeHeroProps>(\n ({ contentType, children, ...props }, ref) => {\n return (\n <Hero\n variant={contentTypeToHeroMap[contentType ?? \"missing\"] ?? contentTypeToHeroMap[\"missing\"]}\n {...props}\n ref={ref}\n >\n {children}\n </Hero>\n );\n },\n);\n"],"mappings":";;;;;;;AAaA,MAAaA,uBAAyD;
|
|
1
|
+
{"version":3,"file":"ContentTypeHero.js","names":["contentTypeToHeroMap: Record<ContentType, HeroVariant>","Hero"],"sources":["../../src/ContentTypeHero/ContentTypeHero.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-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 { forwardRef } from \"react\";\nimport { Hero, type HeroProps, type HeroVariant } from \"@ndla/primitives\";\nimport type { ContentType } from \"../ContentTypeBadge/ContentTypeBadge\";\nimport * as contentTypes from \"../model/ContentType\";\n\nexport const contentTypeToHeroMap: Record<ContentType, HeroVariant> = {\n [contentTypes.SUBJECT_MATERIAL]: \"primary\",\n [contentTypes.TASKS_AND_ACTIVITIES]: \"brand2Bold\",\n [contentTypes.ASSESSMENT_RESOURCES]: \"brand2\",\n // This will never happen\n [contentTypes.SUBJECT]: \"primary\",\n [contentTypes.SOURCE_MATERIAL]: \"brand1\",\n // This will never happen\n [contentTypes.LEARNING_PATH]: \"primary\",\n [contentTypes.TOPIC]: \"neutral\",\n [contentTypes.MULTIDISCIPLINARY]: \"primary\",\n [contentTypes.CONCEPT]: \"brand1Moderate\",\n [contentTypes.EXTERNAL]: \"primary\",\n [contentTypes.IMAGE]: \"primary\",\n [contentTypes.AUDIO]: \"primary\",\n [contentTypes.PODCAST]: \"primary\",\n [contentTypes.VIDEO]: \"primary\",\n [contentTypes.MISSING]: \"neutral\",\n [contentTypes.GLOSS]: \"brand1Moderate\",\n // this will never happen\n [contentTypes.PROGRAMME]: \"primary\",\n // this will never happen\n [contentTypes.PODCAST_SERIES]: \"primary\",\n [contentTypes.FRONTPAGE_ARTICLE]: \"primary\",\n};\n\nexport interface ContentTypeHeroProps extends HeroProps {\n contentType: ContentType | undefined;\n}\n\nexport const ContentTypeHero = forwardRef<HTMLDivElement, ContentTypeHeroProps>(\n ({ contentType, children, ...props }, ref) => {\n return (\n <Hero\n variant={contentTypeToHeroMap[contentType ?? \"missing\"] ?? contentTypeToHeroMap[\"missing\"]}\n {...props}\n ref={ref}\n >\n {children}\n </Hero>\n );\n },\n);\n"],"mappings":";;;;;;;AAaA,MAAaA,uBAAyD;8GACnC;kHACI;kHACA;qGAEb;6GACQ;2GAEF;mGACR;+GACY;qGACV;sGACC;mGACH;mGACA;qGACE;mGACF;qGACE;mGACF;uGAEI;4GAEK;+GACG;AACnC;AAMD,MAAa,kBAAkB,sBAC7B,CAAC,EAAE,aAAa,SAAU,GAAG,OAAO,EAAE,QAAQ;AAC5C,wBACE,2BAACC;EACC,SAAS,qBAAqB,eAAe,cAAc,qBAAqB;EAChF,GAAI;EACC;EAEJ;GACI;AAEV,EACF"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
const
|
|
1
|
+
const require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_CopyParagraphButton_CopyParagraphButton = require('./CopyParagraphButton.js');
|
|
2
2
|
|
|
3
3
|
//#region src/CopyParagraphButton/index.tsx
|
|
4
|
-
var CopyParagraphButton_default$1 =
|
|
4
|
+
var CopyParagraphButton_default$1 = require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_CopyParagraphButton_CopyParagraphButton.CopyParagraphButton_default$1;
|
|
5
5
|
|
|
6
6
|
//#endregion
|
|
7
7
|
exports.CopyParagraphButton_default = CopyParagraphButton_default$1;
|
package/lib/Embed/AudioEmbed.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
|
|
2
|
-
const
|
|
3
|
-
const
|
|
4
|
-
const
|
|
5
|
-
const
|
|
2
|
+
const require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_LicenseByline_EmbedByline = require('../LicenseByline/EmbedByline.js');
|
|
3
|
+
const require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Embed_EmbedErrorPlaceholder = require('./EmbedErrorPlaceholder.js');
|
|
4
|
+
const require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_utils_licenseAttributes = require('../utils/licenseAttributes.js');
|
|
5
|
+
const require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_AudioPlayer_index = require('../AudioPlayer/index.js');
|
|
6
6
|
const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
|
|
7
7
|
const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
|
|
8
8
|
const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
|
|
@@ -11,9 +11,9 @@ const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-ru
|
|
|
11
11
|
const StyledFigure = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Figure, { base: { clear: "both" } });
|
|
12
12
|
const AudioEmbed = ({ embed, lang }) => {
|
|
13
13
|
const type = embed.embedData.type === "standard" ? "audio" : "podcast";
|
|
14
|
-
if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
14
|
+
if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Embed_EmbedErrorPlaceholder.EmbedErrorPlaceholder_default, { type });
|
|
15
15
|
const { data, embedData } = embed;
|
|
16
|
-
if (embedData.type === "minimal") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
16
|
+
if (embedData.type === "minimal") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_AudioPlayer_index.AudioPlayer_default, {
|
|
17
17
|
speech: true,
|
|
18
18
|
src: data.audioFile.url,
|
|
19
19
|
title: data.title.title
|
|
@@ -27,19 +27,19 @@ const AudioEmbed = ({ embed, lang }) => {
|
|
|
27
27
|
url: coverPhoto.url,
|
|
28
28
|
alt: coverPhoto.altText
|
|
29
29
|
};
|
|
30
|
-
const licenseProps =
|
|
30
|
+
const licenseProps = require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_utils_licenseAttributes.licenseAttributes(data.copyright.license.license, lang, embedData.url);
|
|
31
31
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledFigure, {
|
|
32
32
|
lang,
|
|
33
33
|
"data-embed-type": type,
|
|
34
34
|
...licenseProps,
|
|
35
|
-
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
35
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_AudioPlayer_index.AudioPlayer_default, {
|
|
36
36
|
description: data.podcastMeta?.introduction ?? "",
|
|
37
37
|
img,
|
|
38
38
|
src: data.audioFile.url,
|
|
39
39
|
textVersion: data.manuscript?.manuscript.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { dangerouslySetInnerHTML: { __html: data.manuscript.manuscript } }) : void 0,
|
|
40
40
|
title: data.title.title,
|
|
41
41
|
subtitle
|
|
42
|
-
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
42
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_LicenseByline_EmbedByline.EmbedByline, {
|
|
43
43
|
error: false,
|
|
44
44
|
type: data.audioType === "standard" ? "audio" : "podcast",
|
|
45
45
|
copyright: embed.data.copyright
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AudioEmbed.js","names":["Figure","EmbedErrorPlaceholder","AudioPlayer","EmbedByline"],"sources":["../../src/Embed/AudioEmbed.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 { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { AudioMetaData } from \"@ndla/types-embed\";\nimport EmbedErrorPlaceholder from \"./EmbedErrorPlaceholder\";\nimport type { Author } from \"./ImageEmbed\";\nimport AudioPlayer from \"../AudioPlayer\";\nimport { EmbedByline } from \"../LicenseByline\";\nimport { licenseAttributes } from \"../utils/licenseAttributes\";\n\nconst StyledFigure = styled(Figure, {\n base: {\n clear: \"both\",\n },\n});\n\ninterface Props {\n embed: AudioMetaData;\n lang?: string;\n}\n\nexport const getFirstNonEmptyLicenseCredits = (authors: {\n creators: Author[];\n rightsholders: Author[];\n processors: Author[];\n}) => Object.values(authors).find((i) => i.length > 0) ?? [];\n\nconst AudioEmbed = ({ embed, lang }: Props) => {\n const type = embed.embedData.type === \"standard\" ? \"audio\" : \"podcast\";\n if (embed.status === \"error\") {\n return <EmbedErrorPlaceholder type={type} />;\n }\n\n const { data, embedData } = embed;\n\n if (embedData.type === \"minimal\") {\n return <AudioPlayer speech src={data.audioFile.url} title={data.title.title} />;\n }\n\n const subtitle = data.series ? { title: data.series.title.title, url: `/podkast/${data.series.id}` } : undefined;\n\n const coverPhoto = data.podcastMeta?.coverPhoto;\n\n const img = coverPhoto && { url: coverPhoto.url, alt: coverPhoto.altText };\n\n const licenseProps = licenseAttributes(data.copyright.license.license, lang, embedData.url);\n\n return (\n <StyledFigure lang={lang} data-embed-type={type} {...licenseProps}>\n <AudioPlayer\n description={data.podcastMeta?.introduction ?? \"\"}\n img={img}\n src={data.audioFile.url}\n textVersion={\n data.manuscript?.manuscript.length ? (\n <div dangerouslySetInnerHTML={{ __html: data.manuscript.manuscript }} />\n ) : undefined\n }\n title={data.title.title}\n subtitle={subtitle}\n />\n <EmbedByline\n error={false}\n type={data.audioType === \"standard\" ? \"audio\" : \"podcast\"}\n copyright={embed.data.copyright}\n />\n </StyledFigure>\n );\n};\n\nexport default AudioEmbed;\n"],"mappings":";;;;;;;;;;AAiBA,MAAM,eAAe,qCAAOA,0BAAQ,EAClC,MAAM,EACJ,OAAO,OACR,EACF,EAAC;AAaF,MAAM,aAAa,CAAC,EAAE,OAAO,MAAa,KAAK;CAC7C,MAAM,OAAO,MAAM,UAAU,SAAS,aAAa,UAAU;AAC7D,KAAI,MAAM,WAAW,QACnB,wBAAO,2BAACC,
|
|
1
|
+
{"version":3,"file":"AudioEmbed.js","names":["Figure","EmbedErrorPlaceholder","AudioPlayer","EmbedByline"],"sources":["../../src/Embed/AudioEmbed.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 { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { AudioMetaData } from \"@ndla/types-embed\";\nimport EmbedErrorPlaceholder from \"./EmbedErrorPlaceholder\";\nimport type { Author } from \"./ImageEmbed\";\nimport AudioPlayer from \"../AudioPlayer\";\nimport { EmbedByline } from \"../LicenseByline\";\nimport { licenseAttributes } from \"../utils/licenseAttributes\";\n\nconst StyledFigure = styled(Figure, {\n base: {\n clear: \"both\",\n },\n});\n\ninterface Props {\n embed: AudioMetaData;\n lang?: string;\n}\n\nexport const getFirstNonEmptyLicenseCredits = (authors: {\n creators: Author[];\n rightsholders: Author[];\n processors: Author[];\n}) => Object.values(authors).find((i) => i.length > 0) ?? [];\n\nconst AudioEmbed = ({ embed, lang }: Props) => {\n const type = embed.embedData.type === \"standard\" ? \"audio\" : \"podcast\";\n if (embed.status === \"error\") {\n return <EmbedErrorPlaceholder type={type} />;\n }\n\n const { data, embedData } = embed;\n\n if (embedData.type === \"minimal\") {\n return <AudioPlayer speech src={data.audioFile.url} title={data.title.title} />;\n }\n\n const subtitle = data.series ? { title: data.series.title.title, url: `/podkast/${data.series.id}` } : undefined;\n\n const coverPhoto = data.podcastMeta?.coverPhoto;\n\n const img = coverPhoto && { url: coverPhoto.url, alt: coverPhoto.altText };\n\n const licenseProps = licenseAttributes(data.copyright.license.license, lang, embedData.url);\n\n return (\n <StyledFigure lang={lang} data-embed-type={type} {...licenseProps}>\n <AudioPlayer\n description={data.podcastMeta?.introduction ?? \"\"}\n img={img}\n src={data.audioFile.url}\n textVersion={\n data.manuscript?.manuscript.length ? (\n <div dangerouslySetInnerHTML={{ __html: data.manuscript.manuscript }} />\n ) : undefined\n }\n title={data.title.title}\n subtitle={subtitle}\n />\n <EmbedByline\n error={false}\n type={data.audioType === \"standard\" ? \"audio\" : \"podcast\"}\n copyright={embed.data.copyright}\n />\n </StyledFigure>\n );\n};\n\nexport default AudioEmbed;\n"],"mappings":";;;;;;;;;;AAiBA,MAAM,eAAe,qCAAOA,0BAAQ,EAClC,MAAM,EACJ,OAAO,OACR,EACF,EAAC;AAaF,MAAM,aAAa,CAAC,EAAE,OAAO,MAAa,KAAK;CAC7C,MAAM,OAAO,MAAM,UAAU,SAAS,aAAa,UAAU;AAC7D,KAAI,MAAM,WAAW,QACnB,wBAAO,2BAACC,oIAA4B,OAAQ;CAG9C,MAAM,EAAE,MAAM,WAAW,GAAG;AAE5B,KAAI,UAAU,SAAS,UACrB,wBAAO,2BAACC;EAAY;EAAO,KAAK,KAAK,UAAU;EAAK,OAAO,KAAK,MAAM;GAAS;CAGjF,MAAM,WAAW,KAAK,SAAS;EAAE,OAAO,KAAK,OAAO,MAAM;EAAO,MAAM,WAAW,KAAK,OAAO,GAAG;CAAG;CAEpG,MAAM,aAAa,KAAK,aAAa;CAErC,MAAM,MAAM,cAAc;EAAE,KAAK,WAAW;EAAK,KAAK,WAAW;CAAS;CAE1E,MAAM,eAAe,iHAAkB,KAAK,UAAU,QAAQ,SAAS,MAAM,UAAU,IAAI;AAE3F,wBACE,4BAAC;EAAmB;EAAM,mBAAiB;EAAM,GAAI;6BACnD,2BAACA;GACC,aAAa,KAAK,aAAa,gBAAgB;GAC1C;GACL,KAAK,KAAK,UAAU;GACpB,aACE,KAAK,YAAY,WAAW,yBAC1B,2BAAC,SAAI,yBAAyB,EAAE,QAAQ,KAAK,WAAW,WAAY,IAAI;GAG5E,OAAO,KAAK,MAAM;GACR;IACV,kBACF,2BAACC;GACC,OAAO;GACP,MAAM,KAAK,cAAc,aAAa,UAAU;GAChD,WAAW,MAAM,KAAK;IACtB;GACW;AAElB;AAED,yBAAe"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
|
|
2
|
-
const
|
|
3
|
-
const
|
|
4
|
-
const
|
|
2
|
+
const require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_LicenseByline_EmbedByline = require('../LicenseByline/EmbedByline.js');
|
|
3
|
+
const require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Embed_EmbedErrorPlaceholder = require('./EmbedErrorPlaceholder.js');
|
|
4
|
+
const require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_utils_licenseAttributes = require('../utils/licenseAttributes.js');
|
|
5
5
|
const react = require_rolldown_runtime.__toESM(require("react"));
|
|
6
6
|
const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
|
|
7
7
|
const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
|
|
@@ -45,7 +45,7 @@ const BrightcoveEmbed = ({ embed, renderContext = "article", lang }) => {
|
|
|
45
45
|
iframe.height = "";
|
|
46
46
|
}
|
|
47
47
|
}, []);
|
|
48
|
-
if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
48
|
+
if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Embed_EmbedErrorPlaceholder.EmbedErrorPlaceholder_default, {
|
|
49
49
|
type: "video",
|
|
50
50
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BrightcoveIframe, {
|
|
51
51
|
ref: iframeRef,
|
|
@@ -62,7 +62,7 @@ const BrightcoveEmbed = ({ embed, renderContext = "article", lang }) => {
|
|
|
62
62
|
...embedData,
|
|
63
63
|
videoid: linkedVideoId
|
|
64
64
|
}, data.sources) : void 0;
|
|
65
|
-
const licenseProps =
|
|
65
|
+
const licenseProps = require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_utils_licenseAttributes.licenseAttributes(data?.copyright?.license.license, lang, embedData.pageUrl);
|
|
66
66
|
const title = data.name?.trim() ? `${t("embed.type.video")}: ${data.name}` : fallbackTitle;
|
|
67
67
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.Figure, {
|
|
68
68
|
"data-embed-type": "brightcove",
|
|
@@ -77,7 +77,7 @@ const BrightcoveEmbed = ({ embed, renderContext = "article", lang }) => {
|
|
|
77
77
|
...alternativeVideoProps && !showOriginalVideo ? alternativeVideoProps : originalVideoProps,
|
|
78
78
|
allow: "fullscreen; encrypted-media"
|
|
79
79
|
})
|
|
80
|
-
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
80
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_LicenseByline_EmbedByline.EmbedByline, {
|
|
81
81
|
type: "video",
|
|
82
82
|
copyright: data.copyright,
|
|
83
83
|
description: parsedDescription,
|
|
@@ -1 +1 @@
|
|
|
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":";;;;;;;;;;;;AAyBA,MAAM,oBAAoB,qCAAOA,0BAAQ,EACvC,MAAM,EACJ,kBAAkB,UACnB,EACF,EAAC;AAEF,MAAM,mBAAmB,qCAAO,UAAU,EACxC,MAAM;CACJ,QAAQ;CACR,QAAQ;CACR,OAAO;AACR,EACF,EAAC;AASF,MAAa,YAAY,CAACC,WAAgB,OAAO,MAAM,QAAQ,OAAO,WAAW,MAAM,CAAC;AAExF,MAAM,iBAAiB,CAACC,MAA2BC,YAAqC;CACtF,MAAM,EAAE,SAAS,SAAS,SAAS,WAAW,GAAG;CAEjD,MAAM,SAAS,QAAQ,OAAO,CAAC,MAAM,EAAE,SAAS,EAAE,OAAO,CAAC,SAAS,CAAC,GAAG,MAAM,EAAG,SAAU,EAAE,OAAQ,CAAC;AAErG,QAAO;EACL,MAAM,iCAAiC,QAAQ,GAAG,OAAO,8BAA8B,QAAQ;EAC/F,QAAQ,QAAQ,UAAU;EAC1B,OAAO,QAAQ,SAAS;CACzB;AACF;AACD,MAAM,kBAAkB,CAAC,EAAE,OAAO,gBAAgB,WAAW,MAAa,KAAK;CAC7E,MAAM,CAAC,mBAAmB,qBAAqB,GAAG,oBAAS,KAAK;CAChE,MAAM,EAAE,GAAG,GAAG,mCAAgB;CAC9B,MAAM,YAAY,kBAA0B,KAAK;CACjD,MAAM,EAAE,WAAW,GAAG;CACtB,MAAM,iBAAiB,EAAE,EAAE,mBAAmB,CAAC,IAAI,UAAU,QAAQ;CACrE,MAAM,oBAAoB,mBAAQ,MAAM;AACtC,MAAI,MAAM,UAAU,WAAW,kBAAkB,UAC/C,QAAO,MAAM,UAAU,UAAU,+BAAM,MAAM,UAAU,QAAQ;WACtD,MAAM,WAAW,aAAa,MAAM,KAAK,YAClD,QAAO,+BAAM,MAAM,KAAK,YAAY;CAEvC,GAAE,CAAC,OAAO,aAAc,EAAC;AAE1B,sBAAU,MAAM;EACd,MAAM,SAAS,UAAU;AACzB,MAAI,QAAQ;GACV,MAAM,CAAC,OAAO,OAAO,GAAG,CAAC,SAAS,OAAO,MAAM,EAAE,SAAS,OAAO,OAAO,AAAC;AACzE,UAAO,MAAM,eAAe,EAAE,MAAM,GAAG,OAAO;AAC9C,UAAO,QAAQ;AACf,UAAO,SAAS;EACjB;CACF,GAAE,CAAE,EAAC;AACN,KAAI,MAAM,WAAW,QACnB,wBACE,2BAACC;EAAsB,MAAK;4BAC1B,2BAAC;GACC,KAAK;GACL,OAAO,UAAU,OAAO;GACxB,cAAY,UAAU,OAAO;GAC7B,GAAI,eAAe,WAAW,CAAE,EAAC;GACjC,OAAM;IACN;GACoB;CAG5B,MAAM,EAAE,MAAM,GAAG;CAEjB,MAAM,gBAAgB,UAAU,KAAK,MAAM,KAAK,GAAG,KAAK,MAAM;CAE9D,MAAM,qBAAqB,eAAe,WAAW,KAAK,QAAQ;CAClE,MAAM,wBAAwB,gBAC1B,eAAe;EAAE,GAAG;EAAW,SAAS;CAAe,GAAE,KAAK,QAAQ;CAG1E,MAAM,eAAe,
|
|
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":";;;;;;;;;;;;AAyBA,MAAM,oBAAoB,qCAAOA,0BAAQ,EACvC,MAAM,EACJ,kBAAkB,UACnB,EACF,EAAC;AAEF,MAAM,mBAAmB,qCAAO,UAAU,EACxC,MAAM;CACJ,QAAQ;CACR,QAAQ;CACR,OAAO;AACR,EACF,EAAC;AASF,MAAa,YAAY,CAACC,WAAgB,OAAO,MAAM,QAAQ,OAAO,WAAW,MAAM,CAAC;AAExF,MAAM,iBAAiB,CAACC,MAA2BC,YAAqC;CACtF,MAAM,EAAE,SAAS,SAAS,SAAS,WAAW,GAAG;CAEjD,MAAM,SAAS,QAAQ,OAAO,CAAC,MAAM,EAAE,SAAS,EAAE,OAAO,CAAC,SAAS,CAAC,GAAG,MAAM,EAAG,SAAU,EAAE,OAAQ,CAAC;AAErG,QAAO;EACL,MAAM,iCAAiC,QAAQ,GAAG,OAAO,8BAA8B,QAAQ;EAC/F,QAAQ,QAAQ,UAAU;EAC1B,OAAO,QAAQ,SAAS;CACzB;AACF;AACD,MAAM,kBAAkB,CAAC,EAAE,OAAO,gBAAgB,WAAW,MAAa,KAAK;CAC7E,MAAM,CAAC,mBAAmB,qBAAqB,GAAG,oBAAS,KAAK;CAChE,MAAM,EAAE,GAAG,GAAG,mCAAgB;CAC9B,MAAM,YAAY,kBAA0B,KAAK;CACjD,MAAM,EAAE,WAAW,GAAG;CACtB,MAAM,iBAAiB,EAAE,EAAE,mBAAmB,CAAC,IAAI,UAAU,QAAQ;CACrE,MAAM,oBAAoB,mBAAQ,MAAM;AACtC,MAAI,MAAM,UAAU,WAAW,kBAAkB,UAC/C,QAAO,MAAM,UAAU,UAAU,+BAAM,MAAM,UAAU,QAAQ;WACtD,MAAM,WAAW,aAAa,MAAM,KAAK,YAClD,QAAO,+BAAM,MAAM,KAAK,YAAY;CAEvC,GAAE,CAAC,OAAO,aAAc,EAAC;AAE1B,sBAAU,MAAM;EACd,MAAM,SAAS,UAAU;AACzB,MAAI,QAAQ;GACV,MAAM,CAAC,OAAO,OAAO,GAAG,CAAC,SAAS,OAAO,MAAM,EAAE,SAAS,OAAO,OAAO,AAAC;AACzE,UAAO,MAAM,eAAe,EAAE,MAAM,GAAG,OAAO;AAC9C,UAAO,QAAQ;AACf,UAAO,SAAS;EACjB;CACF,GAAE,CAAE,EAAC;AACN,KAAI,MAAM,WAAW,QACnB,wBACE,2BAACC;EAAsB,MAAK;4BAC1B,2BAAC;GACC,KAAK;GACL,OAAO,UAAU,OAAO;GACxB,cAAY,UAAU,OAAO;GAC7B,GAAI,eAAe,WAAW,CAAE,EAAC;GACjC,OAAM;IACN;GACoB;CAG5B,MAAM,EAAE,MAAM,GAAG;CAEjB,MAAM,gBAAgB,UAAU,KAAK,MAAM,KAAK,GAAG,KAAK,MAAM;CAE9D,MAAM,qBAAqB,eAAe,WAAW,KAAK,QAAQ;CAClE,MAAM,wBAAwB,gBAC1B,eAAe;EAAE,GAAG;EAAW,SAAS;CAAe,GAAE,KAAK,QAAQ;CAG1E,MAAM,eAAe,iHAAkB,MAAM,WAAW,QAAQ,SAAS,MAAM,UAAU,QAAQ;CAEjG,MAAM,QAAQ,KAAK,MAAM,MAAM,IAAI,EAAE,EAAE,mBAAmB,CAAC,IAAI,KAAK,KAAK,IAAI;AAE7E,wBACE,4BAACC;EAAO,mBAAgB;EAAa,GAAI;6BACvC,2BAAC;GAAI,WAAU;6BACb,2BAAC;IACC,KAAK;IACL,WAAU;IACH;IACP,cAAY;IACZ,GAAK,0BAA0B,oBAAoB,wBAAwB;IAC3E,OAAM;KACN;IACE,kBACN,2BAACC;GAAY,MAAK;GAAQ,WAAW,KAAK;GAAY,aAAa;6BACjE,2BAAC,qBACI,iCACD,2BAAC;IAAkB,MAAK;IAAQ,SAAQ;IAAY,SAAS,MAAM,qBAAqB,CAAC,OAAO,EAAE;cAC/F,GAAG,iBAAiB,oBAAoB,aAAa,cAAc,EAAE;KACpD,GAElB;IACM;GACP;AAEZ;AAED,8BAAe"}
|
package/lib/Embed/CodeEmbed.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
|
|
2
|
-
const
|
|
3
|
-
const
|
|
4
|
-
const
|
|
2
|
+
const require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Embed_EmbedErrorPlaceholder = require('./EmbedErrorPlaceholder.js');
|
|
3
|
+
const require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_CodeBlock_CodeBlock = require('../CodeBlock/CodeBlock.js');
|
|
4
|
+
const require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_CodeBlock_codeLanguageOptions = require('../CodeBlock/codeLanguageOptions.js');
|
|
5
5
|
const react = require_rolldown_runtime.__toESM(require("react"));
|
|
6
6
|
const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
|
|
7
7
|
const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
|
|
@@ -20,7 +20,7 @@ const StyledFigure = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Figu
|
|
|
20
20
|
"& > *:not(:where(:first-child))": { marginBlockStart: "xsmall" }
|
|
21
21
|
} });
|
|
22
22
|
const getTitleFromFormat = (format) => {
|
|
23
|
-
const selectedLanguage =
|
|
23
|
+
const selectedLanguage = require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_CodeBlock_codeLanguageOptions.codeLanguageOptions.find((item) => item.format === format);
|
|
24
24
|
if (selectedLanguage) return selectedLanguage.title;
|
|
25
25
|
return;
|
|
26
26
|
};
|
|
@@ -35,12 +35,12 @@ const CodeEmbed = ({ embed }) => {
|
|
|
35
35
|
};
|
|
36
36
|
}
|
|
37
37
|
}, [isCopied]);
|
|
38
|
-
if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
38
|
+
if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Embed_EmbedErrorPlaceholder.EmbedErrorPlaceholder_default, { type: "code" });
|
|
39
39
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledFigure, {
|
|
40
40
|
"data-embed-type": "code-block",
|
|
41
41
|
children: [
|
|
42
42
|
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledFigCaption, { children: embed.embedData.title || getTitleFromFormat(embed.embedData.codeFormat) }),
|
|
43
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
43
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_CodeBlock_CodeBlock.CodeBlock_default, {
|
|
44
44
|
highlightedCode: embed.status === "success" ? embed.data.highlightedCode : "",
|
|
45
45
|
format: embed.embedData.codeFormat
|
|
46
46
|
}),
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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,yHAAoB,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,oIAAsB,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"}
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
|
+
import { type ReactNode } from "react";
|
|
8
9
|
import type { ConceptMetaData } from "@ndla/types-embed";
|
|
9
10
|
import type { RenderContext } from "./types";
|
|
10
11
|
import { type ConceptProps } from "../Concept/Concept";
|
|
@@ -15,10 +16,11 @@ interface BaseProps {
|
|
|
15
16
|
}
|
|
16
17
|
interface Props extends BaseProps {
|
|
17
18
|
embed: ConceptMetaData;
|
|
19
|
+
children?: ReactNode;
|
|
18
20
|
}
|
|
19
|
-
export declare const ConceptEmbed: ({ embed, renderContext, lang, previewAlt }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
export declare const ConceptEmbed: ({ embed, renderContext, lang, previewAlt, children }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
20
22
|
export interface InlineConceptProps extends ConceptProps, BaseProps {
|
|
21
|
-
|
|
23
|
+
linkContent?: ReactNode;
|
|
22
24
|
source?: string;
|
|
23
25
|
}
|
|
24
26
|
export declare const InlineConcept: import("react").ForwardRefExoticComponent<Omit<InlineConceptProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
|
|
2
|
-
const
|
|
3
|
-
const
|
|
4
|
-
const
|
|
5
|
-
const
|
|
2
|
+
const require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Embed_EmbedErrorPlaceholder = require('./EmbedErrorPlaceholder.js');
|
|
3
|
+
const require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Embed_ConceptInlineTriggerButton = require('./ConceptInlineTriggerButton.js');
|
|
4
|
+
const require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Embed_GlossEmbed = require('./GlossEmbed.js');
|
|
5
|
+
const require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Concept_Concept = require('../Concept/Concept.js');
|
|
6
6
|
const react = require_rolldown_runtime.__toESM(require("react"));
|
|
7
7
|
const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
|
|
8
8
|
const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
|
|
@@ -16,19 +16,19 @@ const StyledPopoverContent = (0, __ndla_styled_system_jsx.styled)(__ndla_primiti
|
|
|
16
16
|
maxHeight: "50vh",
|
|
17
17
|
overflowY: "auto"
|
|
18
18
|
} });
|
|
19
|
-
const ConceptEmbed = ({ embed, renderContext, lang, previewAlt }) => {
|
|
19
|
+
const ConceptEmbed = ({ embed, renderContext, lang, previewAlt, children }) => {
|
|
20
20
|
const parsedContent = (0, react.useMemo)(() => {
|
|
21
21
|
if (embed.status === "error" || !embed.data.concept.content) return void 0;
|
|
22
22
|
return (0, html_react_parser.default)(embed.data.concept.content.htmlContent);
|
|
23
23
|
}, [embed]);
|
|
24
24
|
const parsedTitle = (0, react.useMemo)(() => embed.status === "success" ? (0, html_react_parser.default)(embed.data.concept.title.htmlTitle) : void 0, [embed]);
|
|
25
|
-
if (embed.status === "error" && embed.embedData.type === "inline") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children
|
|
26
|
-
if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
25
|
+
if (embed.status === "error" && embed.embedData.type === "inline") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children });
|
|
26
|
+
if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Embed_EmbedErrorPlaceholder.EmbedErrorPlaceholder_default, { type: "gloss" });
|
|
27
27
|
const { concept, visualElement } = embed.data;
|
|
28
|
-
if (embed.data.concept.glossData) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
28
|
+
if (embed.data.concept.glossData) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Embed_GlossEmbed.GlossEmbed, { embed });
|
|
29
29
|
if (embed.embedData.type === "inline") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InlineConcept, {
|
|
30
30
|
previewAlt,
|
|
31
|
-
|
|
31
|
+
linkContent: children,
|
|
32
32
|
copyright: concept.copyright,
|
|
33
33
|
visualElement,
|
|
34
34
|
lang,
|
|
@@ -46,7 +46,7 @@ const ConceptEmbed = ({ embed, renderContext, lang, previewAlt }) => {
|
|
|
46
46
|
children: parsedContent
|
|
47
47
|
});
|
|
48
48
|
};
|
|
49
|
-
const InlineConcept = (0, react.forwardRef)(({
|
|
49
|
+
const InlineConcept = (0, react.forwardRef)(({ linkContent, copyright, visualElement, previewAlt, lang, children, title, source,...rest }, ref) => {
|
|
50
50
|
const contentRef = (0, react.useRef)(null);
|
|
51
51
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.PopoverRoot, {
|
|
52
52
|
initialFocusEl: () => contentRef.current,
|
|
@@ -54,10 +54,10 @@ const InlineConcept = (0, react.forwardRef)(({ linkText, copyright, visualElemen
|
|
|
54
54
|
asChild: true,
|
|
55
55
|
ref,
|
|
56
56
|
...rest,
|
|
57
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
57
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Embed_ConceptInlineTriggerButton.ConceptInlineTriggerButton, { children: linkContent })
|
|
58
58
|
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledPopoverContent, {
|
|
59
59
|
ref: contentRef,
|
|
60
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
60
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Concept_Concept.Concept, {
|
|
61
61
|
copyright,
|
|
62
62
|
visualElement,
|
|
63
63
|
title,
|
|
@@ -69,7 +69,7 @@ const InlineConcept = (0, react.forwardRef)(({ linkText, copyright, visualElemen
|
|
|
69
69
|
}) })]
|
|
70
70
|
});
|
|
71
71
|
});
|
|
72
|
-
const BlockConcept = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
72
|
+
const BlockConcept = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Concept_Concept.Concept, {
|
|
73
73
|
...props,
|
|
74
74
|
"data-embed-type": "concept",
|
|
75
75
|
ref
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConceptEmbed.js","names":["PopoverContent","EmbedErrorPlaceholder","GlossEmbed","PopoverRoot","PopoverTrigger","ConceptInlineTriggerButton","Portal","Concept"],"sources":["../../src/Embed/ConceptEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-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 { forwardRef, useMemo, useRef } from \"react\";\nimport { Portal } from \"@ark-ui/react\";\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ConceptMetaData } from \"@ndla/types-embed\";\nimport { ConceptInlineTriggerButton } from \"./ConceptInlineTriggerButton\";\nimport EmbedErrorPlaceholder from \"./EmbedErrorPlaceholder\";\nimport { GlossEmbed } from \"./GlossEmbed\";\nimport type { RenderContext } from \"./types\";\nimport { Concept, type ConceptProps } from \"../Concept/Concept\";\n\ninterface BaseProps {\n renderContext?: RenderContext;\n lang?: string;\n previewAlt?: boolean;\n}\n\ninterface Props extends BaseProps {\n embed: ConceptMetaData;\n}\n\nconst StyledPopoverContent = styled(PopoverContent, {\n base: {\n width: \"surface.xlarge\",\n maxHeight: \"50vh\",\n overflowY: \"auto\",\n },\n});\n\nexport const ConceptEmbed = ({ embed, renderContext, lang, previewAlt }: Props) => {\n const parsedContent = useMemo(() => {\n if (embed.status === \"error\" || !embed.data.concept.content) return undefined;\n return parse(embed.data.concept.content.htmlContent);\n }, [embed]);\n\n const parsedTitle = useMemo(\n () => (embed.status === \"success\" ? parse(embed.data.concept.title.htmlTitle) : undefined),\n [embed],\n );\n\n if (embed.status === \"error\" && embed.embedData.type === \"inline\") {\n return <span>{
|
|
1
|
+
{"version":3,"file":"ConceptEmbed.js","names":["PopoverContent","EmbedErrorPlaceholder","GlossEmbed","PopoverRoot","PopoverTrigger","ConceptInlineTriggerButton","Portal","Concept"],"sources":["../../src/Embed/ConceptEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-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 { forwardRef, useMemo, useRef, type ReactNode } from \"react\";\nimport { Portal } from \"@ark-ui/react\";\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ConceptMetaData } from \"@ndla/types-embed\";\nimport { ConceptInlineTriggerButton } from \"./ConceptInlineTriggerButton\";\nimport EmbedErrorPlaceholder from \"./EmbedErrorPlaceholder\";\nimport { GlossEmbed } from \"./GlossEmbed\";\nimport type { RenderContext } from \"./types\";\nimport { Concept, type ConceptProps } from \"../Concept/Concept\";\n\ninterface BaseProps {\n renderContext?: RenderContext;\n lang?: string;\n previewAlt?: boolean;\n}\n\ninterface Props extends BaseProps {\n embed: ConceptMetaData;\n children?: ReactNode;\n}\n\nconst StyledPopoverContent = styled(PopoverContent, {\n base: {\n width: \"surface.xlarge\",\n maxHeight: \"50vh\",\n overflowY: \"auto\",\n },\n});\n\nexport const ConceptEmbed = ({ embed, renderContext, lang, previewAlt, children }: Props) => {\n const parsedContent = useMemo(() => {\n if (embed.status === \"error\" || !embed.data.concept.content) return undefined;\n return parse(embed.data.concept.content.htmlContent);\n }, [embed]);\n\n const parsedTitle = useMemo(\n () => (embed.status === \"success\" ? parse(embed.data.concept.title.htmlTitle) : undefined),\n [embed],\n );\n\n if (embed.status === \"error\" && embed.embedData.type === \"inline\") {\n return <span>{children}</span>;\n }\n if (embed.status === \"error\") {\n // TODO: This could be either concept or gloss. We don't know if it errors out. :)\n return <EmbedErrorPlaceholder type=\"gloss\" />;\n }\n\n const { concept, visualElement } = embed.data;\n\n // TODO: Consider whether we should do this in article-converter instead.\n if (embed.data.concept.glossData) {\n return <GlossEmbed embed={embed} />;\n }\n\n if (embed.embedData.type === \"inline\") {\n return (\n <InlineConcept\n previewAlt={previewAlt}\n linkContent={children}\n copyright={concept.copyright}\n visualElement={visualElement}\n lang={lang}\n title={parsedTitle}\n source={concept.source}\n >\n {parsedContent}\n </InlineConcept>\n );\n }\n\n return (\n <BlockConcept\n previewAlt={previewAlt}\n copyright={concept.copyright}\n visualElement={visualElement}\n lang={lang}\n title={renderContext === \"embed\" ? undefined : parsedTitle}\n source={concept.source}\n >\n {parsedContent}\n </BlockConcept>\n );\n};\n\nexport interface InlineConceptProps extends ConceptProps, BaseProps {\n linkContent?: ReactNode;\n source?: string;\n}\n\nexport const InlineConcept = forwardRef<HTMLSpanElement, InlineConceptProps>(\n ({ linkContent, copyright, visualElement, previewAlt, lang, children, title, source, ...rest }, ref) => {\n const contentRef = useRef<HTMLDivElement>(null);\n return (\n <PopoverRoot initialFocusEl={() => contentRef.current}>\n {/* @ts-expect-error placing ref and rest on popover trigger somehow removes a bug where the popover target becomes a bit bigger */}\n <PopoverTrigger asChild ref={ref} {...rest}>\n <ConceptInlineTriggerButton>{linkContent}</ConceptInlineTriggerButton>\n </PopoverTrigger>\n <Portal>\n <StyledPopoverContent ref={contentRef}>\n <Concept\n copyright={copyright}\n visualElement={visualElement}\n title={title}\n lang={lang}\n source={source}\n previewAlt={previewAlt}\n >\n {children}\n </Concept>\n </StyledPopoverContent>\n </Portal>\n </PopoverRoot>\n );\n },\n);\n\nexport interface BlockConceptProps extends ConceptProps {}\n\nexport const BlockConcept = forwardRef<HTMLElement, BlockConceptProps>((props, ref) => (\n <Concept {...props} data-embed-type=\"concept\" ref={ref} />\n));\n"],"mappings":";;;;;;;;;;;;;AA+BA,MAAM,uBAAuB,qCAAOA,kCAAgB,EAClD,MAAM;CACJ,OAAO;CACP,WAAW;CACX,WAAW;AACZ,EACF,EAAC;AAEF,MAAa,eAAe,CAAC,EAAE,OAAO,eAAe,MAAM,YAAY,UAAiB,KAAK;CAC3F,MAAM,gBAAgB,mBAAQ,MAAM;AAClC,MAAI,MAAM,WAAW,YAAY,MAAM,KAAK,QAAQ,QAAS;AAC7D,SAAO,+BAAM,MAAM,KAAK,QAAQ,QAAQ,YAAY;CACrD,GAAE,CAAC,KAAM,EAAC;CAEX,MAAM,cAAc,mBAClB,MAAO,MAAM,WAAW,YAAY,+BAAM,MAAM,KAAK,QAAQ,MAAM,UAAU,WAC7E,CAAC,KAAM,EACR;AAED,KAAI,MAAM,WAAW,WAAW,MAAM,UAAU,SAAS,SACvD,wBAAO,2BAAC,UAAM,WAAgB;AAEhC,KAAI,MAAM,WAAW,QAEnB,wBAAO,2BAACC,oIAAsB,MAAK,UAAU;CAG/C,MAAM,EAAE,SAAS,eAAe,GAAG,MAAM;AAGzC,KAAI,MAAM,KAAK,QAAQ,UACrB,wBAAO,2BAACC,sGAAkB,QAAS;AAGrC,KAAI,MAAM,UAAU,SAAS,SAC3B,wBACE,2BAAC;EACa;EACZ,aAAa;EACb,WAAW,QAAQ;EACJ;EACT;EACN,OAAO;EACP,QAAQ,QAAQ;YAEf;GACa;AAIpB,wBACE,2BAAC;EACa;EACZ,WAAW,QAAQ;EACJ;EACT;EACN,OAAO,kBAAkB,mBAAsB;EAC/C,QAAQ,QAAQ;YAEf;GACY;AAElB;AAOD,MAAa,gBAAgB,sBAC3B,CAAC,EAAE,aAAa,WAAW,eAAe,YAAY,MAAM,UAAU,OAAO,OAAQ,GAAG,MAAM,EAAE,QAAQ;CACtG,MAAM,aAAa,kBAAuB,KAAK;AAC/C,wBACE,4BAACC;EAAY,gBAAgB,MAAM,WAAW;6BAE5C,2BAACC;GAAe;GAAa;GAAK,GAAI;6BACpC,2BAACC,gJAA4B,cAAyC;IACvD,kBACjB,2BAACC,mDACC,2BAAC;GAAqB,KAAK;6BACzB,2BAACC;IACY;IACI;IACR;IACD;IACE;IACI;IAEX;KACO;IACW,GAChB;GACG;AAEjB,EACF;AAID,MAAa,eAAe,sBAA2C,CAAC,OAAO,wBAC7E,2BAACA;CAAQ,GAAI;CAAO,mBAAgB;CAAe;EAAO,CAC1D"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
|
|
2
|
-
const
|
|
2
|
+
const require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Embed_InlineTriggerButton = require('./InlineTriggerButton.js');
|
|
3
3
|
const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
|
|
4
4
|
|
|
5
5
|
//#region src/Embed/ConceptInlineTriggerButton.tsx
|
|
6
|
-
const ConceptInlineTriggerButton = (0, __ndla_styled_system_jsx.styled)(
|
|
6
|
+
const ConceptInlineTriggerButton = (0, __ndla_styled_system_jsx.styled)(require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Embed_InlineTriggerButton.InlineTriggerButton, { base: {
|
|
7
7
|
position: "relative",
|
|
8
8
|
overflow: "visible",
|
|
9
9
|
borderBottom: "1px solid",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConceptInlineTriggerButton.js","names":["InlineTriggerButton"],"sources":["../../src/Embed/ConceptInlineTriggerButton.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-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 { styled } from \"@ndla/styled-system/jsx\";\nimport { InlineTriggerButton } from \"./InlineTriggerButton\";\n\nexport const ConceptInlineTriggerButton = styled(InlineTriggerButton, {\n base: {\n position: \"relative\",\n overflow: \"visible\",\n borderBottom: \"1px solid\",\n borderStyle: \"dashed\",\n borderColor: \"stroke.hover\",\n paddingBlockStart: \"5xsmall\",\n width: \"fit-content\",\n cursor: \"pointer\",\n _hover: {\n borderColor: \"text.link\",\n background: \"surface.actionSubtle.hover\",\n },\n _active: {\n borderColor: \"text.link\",\n background: \"surface.actionSubtle.active\",\n },\n // The global focus ring forces the border-radius to be xsmall, causing the dashed border to be cut off. This is a workaround.\n _focusVisible: {\n outline: \"none\",\n borderRadius: \"0\",\n _after: {\n content: '\"\"',\n position: \"absolute\",\n inset: \"0\",\n outline: \"3px\",\n borderRadius: \"xsmall\",\n outlineColor: \"stroke.default\",\n outlineOffset: \"3px\",\n outlineStyle: \"solid\",\n },\n },\n },\n});\n"],"mappings":";;;;;AAWA,MAAa,6BAA6B,qCAAOA,
|
|
1
|
+
{"version":3,"file":"ConceptInlineTriggerButton.js","names":["InlineTriggerButton"],"sources":["../../src/Embed/ConceptInlineTriggerButton.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-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 { styled } from \"@ndla/styled-system/jsx\";\nimport { InlineTriggerButton } from \"./InlineTriggerButton\";\n\nexport const ConceptInlineTriggerButton = styled(InlineTriggerButton, {\n base: {\n position: \"relative\",\n overflow: \"visible\",\n borderBottom: \"1px solid\",\n borderStyle: \"dashed\",\n borderColor: \"stroke.hover\",\n paddingBlockStart: \"5xsmall\",\n width: \"fit-content\",\n cursor: \"pointer\",\n _hover: {\n borderColor: \"text.link\",\n background: \"surface.actionSubtle.hover\",\n },\n _active: {\n borderColor: \"text.link\",\n background: \"surface.actionSubtle.active\",\n },\n // The global focus ring forces the border-radius to be xsmall, causing the dashed border to be cut off. This is a workaround.\n _focusVisible: {\n outline: \"none\",\n borderRadius: \"0\",\n _after: {\n content: '\"\"',\n position: \"absolute\",\n inset: \"0\",\n outline: \"3px\",\n borderRadius: \"xsmall\",\n outlineColor: \"stroke.default\",\n outlineOffset: \"3px\",\n outlineStyle: \"solid\",\n },\n },\n },\n});\n"],"mappings":";;;;;AAWA,MAAa,6BAA6B,qCAAOA,sHAAqB,EACpE,MAAM;CACJ,UAAU;CACV,UAAU;CACV,cAAc;CACd,aAAa;CACb,aAAa;CACb,mBAAmB;CACnB,OAAO;CACP,QAAQ;CACR,QAAQ;EACN,aAAa;EACb,YAAY;CACb;CACD,SAAS;EACP,aAAa;EACb,YAAY;CACb;CAED,eAAe;EACb,SAAS;EACT,cAAc;EACd,QAAQ;GACN,SAAS;GACT,UAAU;GACV,OAAO;GACP,SAAS;GACT,cAAc;GACd,cAAc;GACd,eAAe;GACf,cAAc;EACf;CACF;AACF,EACF,EAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
|
|
2
|
-
const
|
|
2
|
+
const require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_LicenseByline_EmbedByline = require('../LicenseByline/EmbedByline.js');
|
|
3
3
|
const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
|
|
4
4
|
const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
|
|
5
5
|
|
|
@@ -11,7 +11,7 @@ const CopyrightEmbed = ({ embed, children }) => {
|
|
|
11
11
|
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledCopyrightContent, {
|
|
12
12
|
"data-copyright-content": "",
|
|
13
13
|
children
|
|
14
|
-
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
14
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_LicenseByline_EmbedByline.EmbedByline, {
|
|
15
15
|
type: "copyright",
|
|
16
16
|
copyright: embed.embedData.copyright
|
|
17
17
|
})]
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
|
|
2
|
-
const
|
|
2
|
+
const require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_LicenseByline_EmbedByline = require('../LicenseByline/EmbedByline.js');
|
|
3
3
|
const react = require_rolldown_runtime.__toESM(require("react"));
|
|
4
4
|
const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
|
|
5
5
|
const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
|
|
@@ -31,7 +31,7 @@ const EmbedErrorPlaceholder = ({ type, children, figureType, float }) => {
|
|
|
31
31
|
children: [children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ErrorPlaceholder, {
|
|
32
32
|
"data-embed-type": type,
|
|
33
33
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.ErrorWarningLine, {})
|
|
34
|
-
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
34
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_LicenseByline_EmbedByline.EmbedByline, {
|
|
35
35
|
error: true,
|
|
36
36
|
type
|
|
37
37
|
})]
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
|
|
2
|
-
const
|
|
3
|
-
const
|
|
2
|
+
const require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Embed_EmbedErrorPlaceholder = require('./EmbedErrorPlaceholder.js');
|
|
3
|
+
const require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_ResourceBox_ResourceBox = require('../ResourceBox/ResourceBox.js');
|
|
4
4
|
const react = require_rolldown_runtime.__toESM(require("react"));
|
|
5
5
|
const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
|
|
6
6
|
const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
|
|
@@ -24,7 +24,7 @@ const ExternalEmbed = ({ embed }) => {
|
|
|
24
24
|
iframe.height = "";
|
|
25
25
|
}
|
|
26
26
|
}, []);
|
|
27
|
-
if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
27
|
+
if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Embed_EmbedErrorPlaceholder.EmbedErrorPlaceholder_default, { type: "external" });
|
|
28
28
|
const { embedData, data } = embed;
|
|
29
29
|
if (embedData.type === "fullscreen") {
|
|
30
30
|
const image = {
|
|
@@ -33,7 +33,7 @@ const ExternalEmbed = ({ embed }) => {
|
|
|
33
33
|
};
|
|
34
34
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Figure, {
|
|
35
35
|
"data-embed-type": "external",
|
|
36
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
36
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_ResourceBox_ResourceBox.ResourceBox_default, {
|
|
37
37
|
image,
|
|
38
38
|
title: embedData.title ?? "",
|
|
39
39
|
url: embedData.url,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExternalEmbed.js","names":["Figure","EmbedErrorPlaceholder","ResourceBox"],"sources":["../../src/Embed/ExternalEmbed.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, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { OembedMetaData } from \"@ndla/types-embed\";\nimport EmbedErrorPlaceholder from \"./EmbedErrorPlaceholder\";\nimport { ResourceBox } from \"../ResourceBox\";\n\ninterface Props {\n embed: OembedMetaData;\n}\n\nconst StyledFigure = styled(Figure, {\n base: {\n \"& iframe\": {\n height: \"auto\",\n width: \"100%\",\n },\n },\n});\n\nconst ExternalEmbed = ({ embed }: Props) => {\n const { t } = useTranslation();\n const figRef = useRef<HTMLElement>(null);\n\n useEffect(() => {\n const iframe = figRef.current?.querySelector(\"iframe\");\n if (iframe) {\n const [width, height] = [Number.parseInt(iframe.width), Number.parseInt(iframe.height)];\n iframe.style.aspectRatio = `${width ? width : 16}/${height ? height : 9}`;\n iframe.width = \"\";\n iframe.height = \"\";\n }\n }, []);\n\n if (embed.status === \"error\") {\n return <EmbedErrorPlaceholder type=\"external\" />;\n }\n\n const { embedData, data } = embed;\n\n if (embedData.type === \"fullscreen\") {\n const image = {\n src: data.iframeImage?.image.imageUrl,\n alt: embedData.alt !== undefined ? embedData.alt : (data.iframeImage?.alttext?.alttext ?? \"\"),\n };\n return (\n <Figure data-embed-type=\"external\">\n <ResourceBox\n image={image}\n title={embedData.title ?? \"\"}\n url={embedData.url}\n caption={embedData.caption ?? \"\"}\n buttonText={t(\"license.other.itemImage.ariaLabel\")}\n />\n </Figure>\n );\n }\n\n return (\n <StyledFigure\n data-embed-type=\"external\"\n ref={figRef}\n dangerouslySetInnerHTML={{ __html: data?.oembed?.html ?? \"\" }}\n />\n );\n};\nexport default ExternalEmbed;\n"],"mappings":";;;;;;;;;;AAoBA,MAAM,eAAe,qCAAOA,0BAAQ,EAClC,MAAM,EACJ,YAAY;CACV,QAAQ;CACR,OAAO;AACR,EACF,EACF,EAAC;AAEF,MAAM,gBAAgB,CAAC,EAAE,OAAc,KAAK;CAC1C,MAAM,EAAE,GAAG,GAAG,mCAAgB;CAC9B,MAAM,SAAS,kBAAoB,KAAK;AAExC,sBAAU,MAAM;EACd,MAAM,SAAS,OAAO,SAAS,cAAc,SAAS;AACtD,MAAI,QAAQ;GACV,MAAM,CAAC,OAAO,OAAO,GAAG,CAAC,OAAO,SAAS,OAAO,MAAM,EAAE,OAAO,SAAS,OAAO,OAAO,AAAC;AACvF,UAAO,MAAM,eAAe,EAAE,QAAQ,QAAQ,GAAG,GAAG,SAAS,SAAS,EAAE;AACxE,UAAO,QAAQ;AACf,UAAO,SAAS;EACjB;CACF,GAAE,CAAE,EAAC;AAEN,KAAI,MAAM,WAAW,QACnB,wBAAO,2BAACC,
|
|
1
|
+
{"version":3,"file":"ExternalEmbed.js","names":["Figure","EmbedErrorPlaceholder","ResourceBox"],"sources":["../../src/Embed/ExternalEmbed.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, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { OembedMetaData } from \"@ndla/types-embed\";\nimport EmbedErrorPlaceholder from \"./EmbedErrorPlaceholder\";\nimport { ResourceBox } from \"../ResourceBox\";\n\ninterface Props {\n embed: OembedMetaData;\n}\n\nconst StyledFigure = styled(Figure, {\n base: {\n \"& iframe\": {\n height: \"auto\",\n width: \"100%\",\n },\n },\n});\n\nconst ExternalEmbed = ({ embed }: Props) => {\n const { t } = useTranslation();\n const figRef = useRef<HTMLElement>(null);\n\n useEffect(() => {\n const iframe = figRef.current?.querySelector(\"iframe\");\n if (iframe) {\n const [width, height] = [Number.parseInt(iframe.width), Number.parseInt(iframe.height)];\n iframe.style.aspectRatio = `${width ? width : 16}/${height ? height : 9}`;\n iframe.width = \"\";\n iframe.height = \"\";\n }\n }, []);\n\n if (embed.status === \"error\") {\n return <EmbedErrorPlaceholder type=\"external\" />;\n }\n\n const { embedData, data } = embed;\n\n if (embedData.type === \"fullscreen\") {\n const image = {\n src: data.iframeImage?.image.imageUrl,\n alt: embedData.alt !== undefined ? embedData.alt : (data.iframeImage?.alttext?.alttext ?? \"\"),\n };\n return (\n <Figure data-embed-type=\"external\">\n <ResourceBox\n image={image}\n title={embedData.title ?? \"\"}\n url={embedData.url}\n caption={embedData.caption ?? \"\"}\n buttonText={t(\"license.other.itemImage.ariaLabel\")}\n />\n </Figure>\n );\n }\n\n return (\n <StyledFigure\n data-embed-type=\"external\"\n ref={figRef}\n dangerouslySetInnerHTML={{ __html: data?.oembed?.html ?? \"\" }}\n />\n );\n};\nexport default ExternalEmbed;\n"],"mappings":";;;;;;;;;;AAoBA,MAAM,eAAe,qCAAOA,0BAAQ,EAClC,MAAM,EACJ,YAAY;CACV,QAAQ;CACR,OAAO;AACR,EACF,EACF,EAAC;AAEF,MAAM,gBAAgB,CAAC,EAAE,OAAc,KAAK;CAC1C,MAAM,EAAE,GAAG,GAAG,mCAAgB;CAC9B,MAAM,SAAS,kBAAoB,KAAK;AAExC,sBAAU,MAAM;EACd,MAAM,SAAS,OAAO,SAAS,cAAc,SAAS;AACtD,MAAI,QAAQ;GACV,MAAM,CAAC,OAAO,OAAO,GAAG,CAAC,OAAO,SAAS,OAAO,MAAM,EAAE,OAAO,SAAS,OAAO,OAAO,AAAC;AACvF,UAAO,MAAM,eAAe,EAAE,QAAQ,QAAQ,GAAG,GAAG,SAAS,SAAS,EAAE;AACxE,UAAO,QAAQ;AACf,UAAO,SAAS;EACjB;CACF,GAAE,CAAE,EAAC;AAEN,KAAI,MAAM,WAAW,QACnB,wBAAO,2BAACC,oIAAsB,MAAK,aAAa;CAGlD,MAAM,EAAE,WAAW,MAAM,GAAG;AAE5B,KAAI,UAAU,SAAS,cAAc;EACnC,MAAM,QAAQ;GACZ,KAAK,KAAK,aAAa,MAAM;GAC7B,KAAK,UAAU,iBAAoB,UAAU,MAAO,KAAK,aAAa,SAAS,WAAW;EAC3F;AACD,yBACE,2BAACD;GAAO,mBAAgB;6BACtB,2BAACE;IACQ;IACP,OAAO,UAAU,SAAS;IAC1B,KAAK,UAAU;IACf,SAAS,UAAU,WAAW;IAC9B,YAAY,EAAE,oCAAoC;KAClD;IACK;CAEZ;AAED,wBACE,2BAAC;EACC,mBAAgB;EAChB,KAAK;EACL,yBAAyB,EAAE,QAAQ,MAAM,QAAQ,QAAQ,GAAI;GAC7D;AAEL;AACD,4BAAe"}
|
|
@@ -5,9 +5,11 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
|
+
import { type ReactNode } from "react";
|
|
8
9
|
import type { ConceptMetaData } from "@ndla/types-embed";
|
|
9
10
|
interface Props {
|
|
10
11
|
embed: ConceptMetaData;
|
|
12
|
+
children?: ReactNode;
|
|
11
13
|
}
|
|
12
|
-
export declare const GlossEmbed: ({ embed }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export declare const GlossEmbed: ({ embed, children }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
13
15
|
export {};
|
package/lib/Embed/GlossEmbed.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
|
|
2
|
-
const
|
|
3
|
-
const
|
|
4
|
-
const
|
|
2
|
+
const require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Embed_EmbedErrorPlaceholder = require('./EmbedErrorPlaceholder.js');
|
|
3
|
+
const require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Embed_ConceptInlineTriggerButton = require('./ConceptInlineTriggerButton.js');
|
|
4
|
+
const require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Gloss_Gloss = require('../Gloss/Gloss.js');
|
|
5
5
|
const react = require_rolldown_runtime.__toESM(require("react"));
|
|
6
6
|
const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
|
|
7
7
|
const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
|
|
@@ -10,10 +10,10 @@ const __ark_ui_react = require_rolldown_runtime.__toESM(require("@ark-ui/react")
|
|
|
10
10
|
|
|
11
11
|
//#region src/Embed/GlossEmbed.tsx
|
|
12
12
|
const StyledPopoverContent = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.PopoverContent, { base: { width: "surface.xlarge" } });
|
|
13
|
-
const GlossEmbed = ({ embed }) => {
|
|
13
|
+
const GlossEmbed = ({ embed, children }) => {
|
|
14
14
|
const contentRef = (0, react.useRef)(null);
|
|
15
|
-
if (embed.status === "error" && embed.embedData.type === "inline") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children
|
|
16
|
-
if (embed.status === "error" || !embed.data.concept.glossData) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
15
|
+
if (embed.status === "error" && embed.embedData.type === "inline") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children });
|
|
16
|
+
if (embed.status === "error" || !embed.data.concept.glossData) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Embed_EmbedErrorPlaceholder.EmbedErrorPlaceholder_default, { type: "gloss" });
|
|
17
17
|
const { concept, visualElement } = embed.data;
|
|
18
18
|
const audio = visualElement?.status === "success" && visualElement.resource === "audio" ? {
|
|
19
19
|
src: visualElement.data.audioFile.url,
|
|
@@ -23,10 +23,10 @@ const GlossEmbed = ({ embed }) => {
|
|
|
23
23
|
initialFocusEl: () => contentRef.current,
|
|
24
24
|
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.PopoverTrigger, {
|
|
25
25
|
asChild: true,
|
|
26
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
26
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Embed_ConceptInlineTriggerButton.ConceptInlineTriggerButton, { children })
|
|
27
27
|
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledPopoverContent, {
|
|
28
28
|
ref: contentRef,
|
|
29
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Figure, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
29
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Figure, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Gloss_Gloss.Gloss_default, {
|
|
30
30
|
glossData: concept.glossData,
|
|
31
31
|
title: concept.title,
|
|
32
32
|
audio,
|
|
@@ -37,7 +37,7 @@ const GlossEmbed = ({ embed }) => {
|
|
|
37
37
|
});
|
|
38
38
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Figure, {
|
|
39
39
|
"data-embed-type": "gloss",
|
|
40
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
40
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Gloss_Gloss.Gloss_default, {
|
|
41
41
|
glossData: concept.glossData,
|
|
42
42
|
title: concept.title,
|
|
43
43
|
audio,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GlossEmbed.js","names":["PopoverContent","EmbedErrorPlaceholder","PopoverRoot","PopoverTrigger","ConceptInlineTriggerButton","Portal","Figure","Gloss"],"sources":["../../src/Embed/GlossEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-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 { useRef } from \"react\";\nimport { Portal } from \"@ark-ui/react\";\nimport { Figure, PopoverContent, PopoverRoot, PopoverTrigger } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ConceptMetaData } from \"@ndla/types-embed\";\nimport { ConceptInlineTriggerButton } from \"./ConceptInlineTriggerButton\";\nimport EmbedErrorPlaceholder from \"./EmbedErrorPlaceholder\";\nimport { Gloss } from \"../Gloss\";\n\ninterface Props {\n embed: ConceptMetaData;\n}\n\nconst StyledPopoverContent = styled(PopoverContent, {\n base: {\n width: \"surface.xlarge\",\n },\n});\n\nexport const GlossEmbed = ({ embed }: Props) => {\n const contentRef = useRef<HTMLDivElement>(null);\n if (embed.status === \"error\" && embed.embedData.type === \"inline\") {\n return <span>{
|
|
1
|
+
{"version":3,"file":"GlossEmbed.js","names":["PopoverContent","EmbedErrorPlaceholder","PopoverRoot","PopoverTrigger","ConceptInlineTriggerButton","Portal","Figure","Gloss"],"sources":["../../src/Embed/GlossEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-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 { useRef, type ReactNode } from \"react\";\nimport { Portal } from \"@ark-ui/react\";\nimport { Figure, PopoverContent, PopoverRoot, PopoverTrigger } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ConceptMetaData } from \"@ndla/types-embed\";\nimport { ConceptInlineTriggerButton } from \"./ConceptInlineTriggerButton\";\nimport EmbedErrorPlaceholder from \"./EmbedErrorPlaceholder\";\nimport { Gloss } from \"../Gloss\";\n\ninterface Props {\n embed: ConceptMetaData;\n children?: ReactNode;\n}\n\nconst StyledPopoverContent = styled(PopoverContent, {\n base: {\n width: \"surface.xlarge\",\n },\n});\n\nexport const GlossEmbed = ({ embed, children }: Props) => {\n const contentRef = useRef<HTMLDivElement>(null);\n if (embed.status === \"error\" && embed.embedData.type === \"inline\") {\n return <span>{children}</span>;\n }\n if (embed.status === \"error\" || !embed.data.concept.glossData) {\n return <EmbedErrorPlaceholder type=\"gloss\" />;\n }\n\n const { concept, visualElement } = embed.data;\n\n const audio =\n visualElement?.status === \"success\" && visualElement.resource === \"audio\"\n ? {\n src: visualElement.data.audioFile.url,\n title: visualElement.data.title.title,\n }\n : undefined;\n\n if (embed.embedData.type === \"inline\") {\n return (\n <PopoverRoot initialFocusEl={() => contentRef.current}>\n <PopoverTrigger asChild>\n <ConceptInlineTriggerButton>{children}</ConceptInlineTriggerButton>\n </PopoverTrigger>\n <Portal>\n <StyledPopoverContent ref={contentRef}>\n <Figure>\n <Gloss\n glossData={concept.glossData}\n title={concept.title}\n audio={audio}\n exampleIds={embed.embedData.exampleIds}\n exampleLangs={embed.embedData.exampleLangs}\n />\n </Figure>\n </StyledPopoverContent>\n </Portal>\n </PopoverRoot>\n );\n }\n\n return (\n <Figure data-embed-type=\"gloss\">\n <Gloss\n glossData={concept.glossData}\n title={concept.title}\n audio={audio}\n exampleIds={embed.embedData.exampleIds}\n exampleLangs={embed.embedData.exampleLangs}\n variant=\"bordered\"\n />\n </Figure>\n );\n};\n"],"mappings":";;;;;;;;;;;AAsBA,MAAM,uBAAuB,qCAAOA,kCAAgB,EAClD,MAAM,EACJ,OAAO,iBACR,EACF,EAAC;AAEF,MAAa,aAAa,CAAC,EAAE,OAAO,UAAiB,KAAK;CACxD,MAAM,aAAa,kBAAuB,KAAK;AAC/C,KAAI,MAAM,WAAW,WAAW,MAAM,UAAU,SAAS,SACvD,wBAAO,2BAAC,UAAM,WAAgB;AAEhC,KAAI,MAAM,WAAW,YAAY,MAAM,KAAK,QAAQ,UAClD,wBAAO,2BAACC,oIAAsB,MAAK,UAAU;CAG/C,MAAM,EAAE,SAAS,eAAe,GAAG,MAAM;CAEzC,MAAM,QACJ,eAAe,WAAW,aAAa,cAAc,aAAa,UAC9D;EACE,KAAK,cAAc,KAAK,UAAU;EAClC,OAAO,cAAc,KAAK,MAAM;CACjC;AAGP,KAAI,MAAM,UAAU,SAAS,SAC3B,wBACE,4BAACC;EAAY,gBAAgB,MAAM,WAAW;6BAC5C,2BAACC;GAAe;6BACd,2BAACC,sIAA4B,WAAsC;IACpD,kBACjB,2BAACC,mDACC,2BAAC;GAAqB,KAAK;6BACzB,2BAACC,sDACC,2BAACC;IACC,WAAW,QAAQ;IACnB,OAAO,QAAQ;IACR;IACP,YAAY,MAAM,UAAU;IAC5B,cAAc,MAAM,UAAU;KAC9B,GACK;IACY,GAChB;GACG;AAIlB,wBACE,2BAACD;EAAO,mBAAgB;4BACtB,2BAACC;GACC,WAAW,QAAQ;GACnB,OAAO,QAAQ;GACR;GACP,YAAY,MAAM,UAAU;GAC5B,cAAc,MAAM,UAAU;GAC9B,SAAQ;IACR;GACK;AAEZ"}
|
package/lib/Embed/H5pEmbed.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
|
|
2
|
-
const
|
|
2
|
+
const require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Embed_EmbedErrorPlaceholder = require('./EmbedErrorPlaceholder.js');
|
|
3
3
|
const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
|
|
4
4
|
const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
|
|
5
5
|
const react_i18next = require_rolldown_runtime.__toESM(require("react-i18next"));
|
|
@@ -16,7 +16,7 @@ const FigureOembed = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Figu
|
|
|
16
16
|
} });
|
|
17
17
|
const H5pEmbed = ({ embed }) => {
|
|
18
18
|
const { t } = (0, react_i18next.useTranslation)();
|
|
19
|
-
if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
19
|
+
if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Embed_EmbedErrorPlaceholder.EmbedErrorPlaceholder_default, { type: "h5p" });
|
|
20
20
|
if (embed.data.oembed) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FigureOembed, {
|
|
21
21
|
"data-embed-type": "h5p",
|
|
22
22
|
dangerouslySetInnerHTML: { __html: embed.data.oembed.html ?? "" }
|