@ndla/article-converter 6.1.7 → 6.2.0

package/lib/transform.d.ts

@@ -7,5 +7,5 @@
  */
 /// <reference types="react" />
 import { TransformOptions } from "./plugins/types";
-declare const transform: (content: string, opts: TransformOptions) => string | JSX.Element | JSX.Element[];
+declare const transform: (content: string, opts: TransformOptions) => string | import("react").JSX.Element | import("react").JSX.Element[];
 export default transform;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/article-converter",
-  "version": "6.1.7",
+  "version": "6.2.0",
   "description": "Transforms NDLA articles into extended html versions",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -27,13 +27,13 @@
     "src"
   ],
   "devDependencies": {
-    "@ndla/types-backend": "^0.2.21",
-    "@ndla/types-embed": "^4.1.0"
+    "@ndla/types-backend": "^0.2.64",
+    "@ndla/types-embed": "^4.1.1"
   },
   "dependencies": {
-    "@ndla/code": "^5.0.48",
-    "@ndla/ui": "^50.11.3",
-    "html-react-parser": "^4.2.2",
+    "@ndla/code": "^5.0.49",
+    "@ndla/ui": "^50.12.0",
+    "html-react-parser": "^5.1.8",
     "lodash": "^4.17.20"
   },
   "peerDependencies": {
@@ -48,5 +48,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ae7b0eeb9ec17066999f7d2186bd31251b88ed4b"
+  "gitHead": "5a808c292eb3b4ca8281c1084930c7316051a375"
 }

package/src/plugins/anchorPlugin.tsx

@@ -6,18 +6,18 @@
  *
  */
 
-import { attributesToProps, domToReact } from "html-react-parser";
+import { DOMNode, attributesToProps, domToReact } from "html-react-parser";
 import { SafeLink } from "@ndla/safelink";
 import { getPossiblyRelativeUrl } from "@ndla/ui";
 import { PluginType } from "./types";
 
 export const anchorPlugin: PluginType = (node, opts, { path }) => {
   const props = attributesToProps(node.attribs);
-  const href = getPossiblyRelativeUrl(props.href, path);
+  const href = getPossiblyRelativeUrl(props.href as string, path);
 
   return (
     <SafeLink {...props} to={href}>
-      {domToReact(node.children, opts)}
+      {domToReact(node.children as DOMNode[], opts)}
     </SafeLink>
   );
 };

package/src/plugins/asidePlugin.tsx

@@ -6,16 +6,16 @@
  *
  */
 
-import { domToReact } from "html-react-parser";
+import { DOMNode, domToReact } from "html-react-parser";
 import { Aside, FactBox } from "@ndla/ui";
 import { PluginType } from "./types";
 export const asidePlugin: PluginType = (node, opts) => {
   if (node.attribs["data-type"] === "factAside") {
-    return <FactBox>{domToReact(node.children, opts)}</FactBox>;
+    return <FactBox>{domToReact(node.children as DOMNode[], opts)}</FactBox>;
   } else if (node.attribs["data-type"] === "rightAside") {
     return (
       <Aside wideScreen alwaysShow>
-        {domToReact(node.children, opts)}
+        {domToReact(node.children as DOMNode[], opts)}
       </Aside>
     );
   }

package/src/plugins/copyParagraphPlugin.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import { Element, domToReact } from "html-react-parser";
+import { DOMNode, Element, domToReact } from "html-react-parser";
 import { CopyParagraphButton } from "@ndla/ui";
 import { PluginType } from "./types";
 export const copyParagraphPlugin: PluginType = (node, converterOpts, opts) => {
@@ -14,7 +14,7 @@ export const copyParagraphPlugin: PluginType = (node, converterOpts, opts) => {
   if (parent?.name === "section" || (parent?.name === "div" && Object.keys(parent.attribs ?? {}).length === 0)) {
     return (
       <CopyParagraphButton copyText={node.attribs["data-text"]} lang={opts.articleLanguage}>
-        {domToReact(node.children, converterOpts)}
+        {domToReact(node.children as DOMNode[], converterOpts)}
       </CopyParagraphButton>
     );
   }

package/src/plugins/ddPlugin.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import { attributesToProps, domToReact } from "html-react-parser";
+import { DOMNode, attributesToProps, domToReact } from "html-react-parser";
 import { DefinitionDescription } from "@ndla/ui";
 import { PluginType } from "./types";
 
@@ -15,7 +15,7 @@ export const ddPlugin: PluginType = (node, converterOpts, opts) => {
 
   return (
     <DefinitionDescription {...props} lang={opts.articleLanguage}>
-      {domToReact(node.children, converterOpts)}
+      {domToReact(node.children as DOMNode[], converterOpts)}
     </DefinitionDescription>
   );
 };

package/src/plugins/divPlugin.tsx

@@ -6,14 +6,14 @@
  *
  */
 
-import { domToReact, attributesToProps, Element } from "html-react-parser";
+import { domToReact, attributesToProps, Element, DOMNode } from "html-react-parser";
 import partition from "lodash/partition";
 import { FileList, RelatedArticleList, Grid, GridType, GridParallaxItem, FramedContent } from "@ndla/ui";
 import { PluginType } from "./types";
 
 export const divPlugin: PluginType = (node, opts) => {
   if (node.attribs["data-type"] === "framed-content" || node.attribs.class === "c-bodybox") {
-    return <FramedContent>{domToReact(node.children, opts)}</FramedContent>;
+    return <FramedContent>{domToReact(node.children as DOMNode[], opts)}</FramedContent>;
   }
   if (node.attribs["data-type"] === "related-content" && node.children.length) {
     const props = attributesToProps(node.attribs);
@@ -52,7 +52,7 @@ export const divPlugin: PluginType = (node, opts) => {
       </Grid>
     );
   } else if (node.attribs["data-parallax-cell"] === "true" && node.children.length) {
-    return <GridParallaxItem>{domToReact(node.children, opts)}</GridParallaxItem>;
+    return <GridParallaxItem>{domToReact(node.children as DOMNode[], opts)}</GridParallaxItem>;
   }
   return null;
 };

package/src/plugins/dtPlugin.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import { attributesToProps, domToReact } from "html-react-parser";
+import { DOMNode, attributesToProps, domToReact } from "html-react-parser";
 import { DefinitionTerm } from "@ndla/ui";
 import { PluginType } from "./types";
 
@@ -15,7 +15,7 @@ export const dtPlugin: PluginType = (node, converterOpts, opts) => {
 
   return (
     <DefinitionTerm {...props} lang={opts.articleLanguage}>
-      {domToReact(node.children, converterOpts)}
+      {domToReact(node.children as DOMNode[], converterOpts)}
     </DefinitionTerm>
   );
 };

package/src/plugins/embed/KeyFigureEmbedPlugin.tsx

@@ -13,7 +13,7 @@ import { PluginType } from "../types";
 
 export const keyFigureEmbedPlugin: PluginType = (element, _, opts) => {
   const props = attributesToProps(element.attribs);
-  const data = JSON.parse(props["data-json"]) as KeyFigureMetaData;
+  const data = JSON.parse(props["data-json"] as string) as KeyFigureMetaData;
   const { title, subtitle, alt } = data.embedData;
   return (
     <KeyFigure

package/src/plugins/embed/audioEmbedPlugin.tsx

@@ -13,6 +13,6 @@ import { PluginType } from "../types";
 
 export const audioEmbedPlugin: PluginType = (element, _, opts) => {
   const props = attributesToProps(element.attribs);
-  const data = JSON.parse(props["data-json"]) as AudioMetaData;
+  const data = JSON.parse(props["data-json"] as string) as AudioMetaData;
   return <AudioEmbed embed={data} heartButton={opts.components?.heartButton} lang={opts.articleLanguage} />;
 };

package/src/plugins/embed/blogPostEmbedPlugin.tsx

@@ -15,7 +15,7 @@ export const errorSvgSrc = `data:image/svg+xml;charset=UTF-8,%3Csvg fill='%238A8
 
 export const blogPostEmbedPlugin: PluginType = (element, _, opts) => {
   const props = attributesToProps(element.attribs);
-  const data = JSON.parse(props["data-json"]) as BlogPostMetaData;
+  const data = JSON.parse(props["data-json"] as string) as BlogPostMetaData;
   const { title, author, url, size, language, alt } = data.embedData;
   return (
     <BlogPostV2

package/src/plugins/embed/brightcoveEmbedPlugin.tsx

@@ -13,6 +13,6 @@ import { PluginType } from "../types";
 
 export const brightcoveEmbedPlugin: PluginType = (element, _, opts) => {
   const props = attributesToProps(element.attribs);
-  const data = JSON.parse(props["data-json"]) as BrightcoveMetaData;
+  const data = JSON.parse(props["data-json"] as string) as BrightcoveMetaData;
   return <BrightcoveEmbed embed={data} heartButton={opts.components?.heartButton} renderContext={opts.renderContext} />;
 };

package/src/plugins/embed/campaignBlockPlugin.tsx

@@ -13,7 +13,7 @@ import { PluginType } from "../types";
 
 export const campaignBlockPlugin: PluginType = (element, _, opts) => {
   const props = attributesToProps(element.attribs);
-  const data = JSON.parse(props["data-json"]) as CampaignBlockMetaData;
+  const data = JSON.parse(props["data-json"] as string) as CampaignBlockMetaData;
   const embed = data.embedData;
 
   return (

package/src/plugins/embed/codeEmbedPlugin.tsx

@@ -13,6 +13,6 @@ import { PluginType } from "../types";
 
 export const codeEmbedPlugin: PluginType = (element) => {
   const props = attributesToProps(element.attribs);
-  const data = JSON.parse(props["data-json"]) as CodeMetaData;
+  const data = JSON.parse(props["data-json"] as string) as CodeMetaData;
   return <CodeEmbed embed={data} />;
 };

package/src/plugins/embed/conceptEmbedPlugin.tsx

@@ -13,6 +13,6 @@ import { PluginType } from "../types";
 
 export const conceptEmbedPlugin: PluginType = (element, _, opts) => {
   const props = attributesToProps(element.attribs);
-  const data = JSON.parse(props["data-json"]) as ConceptMetaData;
+  const data = JSON.parse(props["data-json"] as string) as ConceptMetaData;
   return <ConceptEmbed embed={data} fullWidth heartButton={opts.components?.heartButton} lang={opts.articleLanguage} />;
 };

package/src/plugins/embed/conceptListEmbedPlugin.tsx

@@ -13,6 +13,6 @@ import { PluginType } from "../types";
 
 export const conceptListEmbedPlugin: PluginType = (element, _, opts) => {
   const props = attributesToProps(element.attribs);
-  const data = JSON.parse(props["data-json"]) as ConceptListMetaData;
+  const data = JSON.parse(props["data-json"] as string) as ConceptListMetaData;
   return <ConceptListEmbed embed={data} lang={opts.articleLanguage} />;
 };

package/src/plugins/embed/contactBlockEmbedPlugin.tsx

@@ -13,7 +13,7 @@ import { PluginType } from "../types";
 
 export const contactBlockEmbedPlugin: PluginType = (element, _, opts) => {
   const props = attributesToProps(element.attribs);
-  const embedData = JSON.parse(props["data-json"]) as ContactBlockMetaData;
+  const embedData = JSON.parse(props["data-json"] as string) as ContactBlockMetaData;
   const { name, email, description, blob, blobColor, jobTitle, alt } = embedData.embedData;
   return (
     <ContactBlock

package/src/plugins/embed/contentLinkEmbedPlugin.tsx

@@ -13,6 +13,6 @@ import { PluginType } from "../types";
 
 export const contentLinkEmbedPlugin: PluginType = (element, _, { isOembed }) => {
   const props = attributesToProps(element.attribs);
-  const data = JSON.parse(props["data-json"]) as ContentLinkMetaData;
+  const data = JSON.parse(props["data-json"] as string) as ContentLinkMetaData;
   return <ContentLinkEmbed embed={data} isOembed={isOembed} />;
 };

package/src/plugins/embed/copyrightEmbedPlugin.tsx

@@ -6,13 +6,13 @@
  *
  */
 
-import { attributesToProps, domToReact } from "html-react-parser";
+import { DOMNode, attributesToProps, domToReact } from "html-react-parser";
 import { CopyrightMetaData } from "@ndla/types-embed";
 import { CopyrightEmbed } from "@ndla/ui";
 import { PluginType } from "../types";
 
 export const copyrightEmbedPlugin: PluginType = (element, opts) => {
   const props = attributesToProps(element.attribs);
-  const data = JSON.parse(props["data-json"]) as CopyrightMetaData;
-  return <CopyrightEmbed embed={data}>{domToReact(element.children, opts)}</CopyrightEmbed>;
+  const data = JSON.parse(props["data-json"] as string) as CopyrightMetaData;
+  return <CopyrightEmbed embed={data}>{domToReact(element.children as DOMNode[], opts)}</CopyrightEmbed>;
 };

package/src/plugins/embed/externalEmbedPlugin.tsx

@@ -13,6 +13,6 @@ import { PluginType } from "../types";
 
 export const externalEmbedPlugin: PluginType = (element) => {
   const props = attributesToProps(element.attribs);
-  const data = JSON.parse(props["data-json"]) as OembedMetaData;
+  const data = JSON.parse(props["data-json"] as string) as OembedMetaData;
   return <ExternalEmbed embed={data} />;
 };

package/src/plugins/embed/fileEmbedPlugin.tsx

@@ -13,7 +13,7 @@ import { PluginType } from "../types";
 
 export const fileEmbedPlugin: PluginType = (element) => {
   const props = attributesToProps(element.attribs);
-  const data = JSON.parse(props["data-json"]) as FileMetaData;
+  const data = JSON.parse(props["data-json"] as string) as FileMetaData;
   const { type, title, url, display } = data.embedData;
   if (type === "pdf" && display === "block") {
     return <PdfFile title={title} url={url} />;

package/src/plugins/embed/footnoteEmbedPlugin.tsx

@@ -13,6 +13,6 @@ import { PluginType } from "../types";
 
 export const footnoteEmbedPlugin: PluginType = (element) => {
   const props = attributesToProps(element.attribs);
-  const data = JSON.parse(props["data-json"]) as FootnoteMetaData;
+  const data = JSON.parse(props["data-json"] as string) as FootnoteMetaData;
   return <FootnoteEmbed embed={data} />;
 };

package/src/plugins/embed/h5pEmbedPlugin.tsx

@@ -13,6 +13,6 @@ import { PluginType } from "../types";
 
 export const h5pEmbedPlugin: PluginType = (element) => {
   const props = attributesToProps(element.attribs);
-  const data = JSON.parse(props["data-json"]) as H5pMetaData;
+  const data = JSON.parse(props["data-json"] as string) as H5pMetaData;
   return <H5pEmbed embed={data} />;
 };

package/src/plugins/embed/iframeEmbedPlugin.tsx

@@ -13,6 +13,6 @@ import { PluginType } from "../types";
 
 export const iframeEmbedPlugin: PluginType = (element) => {
   const props = attributesToProps(element.attribs);
-  const data = JSON.parse(props["data-json"]) as IframeMetaData;
+  const data = JSON.parse(props["data-json"] as string) as IframeMetaData;
   return <IframeEmbed embed={data} />;
 };

package/src/plugins/embed/imageEmbedPlugin.tsx

@@ -13,7 +13,7 @@ import { PluginType } from "../types";
 
 export const imageEmbedPlugin: PluginType = (element, _, opts) => {
   const props = attributesToProps(element.attribs);
-  const data = JSON.parse(props["data-json"]) as ImageMetaData;
+  const data = JSON.parse(props["data-json"] as string) as ImageMetaData;
   const inGrid = (element.parentNode?.parentNode as Element)?.attribs?.["data-type"] === "grid";
 
   return (

package/src/plugins/embed/linkBlockEmbedPlugin.tsx

@@ -13,7 +13,7 @@ import { PluginType } from "../types";
 
 export const linkBlockPlugin: PluginType = (element, _, opts) => {
   const props = attributesToProps(element.attribs);
-  const data = JSON.parse(props["data-json"]) as LinkBlockMetaData;
+  const data = JSON.parse(props["data-json"] as string) as LinkBlockMetaData;
 
   return <LinkBlock {...data.embedData} path={opts.path} />;
 };

package/src/plugins/embed/relatedContentEmbedPlugin.tsx

@@ -13,6 +13,6 @@ import { PluginType } from "../types";
 
 export const relatedContentEmbedPlugin: PluginType = (element, _, opts) => {
   const props = attributesToProps(element.attribs);
-  const data = JSON.parse(props["data-json"]) as RelatedContentMetaData;
+  const data = JSON.parse(props["data-json"] as string) as RelatedContentMetaData;
   return <RelatedContentEmbed embed={data} subject={opts.subject} ndlaFrontendDomain={opts.frontendDomain} />;
 };

package/src/plugins/embed/uuDisclaimerEmbedPlugin.tsx

@@ -6,13 +6,13 @@
  *
  */
 
-import { attributesToProps, domToReact } from "html-react-parser";
+import { DOMNode, attributesToProps, domToReact } from "html-react-parser";
 import { UuDisclaimerMetaData } from "@ndla/types-embed";
 import { UuDisclaimerEmbed } from "@ndla/ui";
 import { PluginType } from "../types";
 
 export const uuDisclaimerEmbedPlugin: PluginType = (element, opts) => {
   const props = attributesToProps(element.attribs);
-  const data = JSON.parse(props["data-json"]) as UuDisclaimerMetaData;
-  return <UuDisclaimerEmbed embed={data}>{domToReact(element.children, opts)}</UuDisclaimerEmbed>;
+  const data = JSON.parse(props["data-json"] as string) as UuDisclaimerMetaData;
+  return <UuDisclaimerEmbed embed={data}>{domToReact(element.children as DOMNode[], opts)}</UuDisclaimerEmbed>;
 };

package/src/plugins/h3Plugin.tsx

@@ -6,14 +6,14 @@
  *
  */
 
-import { attributesToProps, domToReact } from "html-react-parser";
+import { DOMNode, attributesToProps, domToReact } from "html-react-parser";
 import { PluginType } from "./types";
 export const h3Plugin: PluginType = (node, converterOpts, opts) => {
   const props = attributesToProps(node.attribs);
   return (
     // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
     <h3 {...props} tabIndex={0} lang={opts.articleLanguage}>
-      {domToReact(node.children, converterOpts)}
+      {domToReact(node.children as DOMNode[], converterOpts)}
     </h3>
   );
 };

package/src/plugins/navPlugin.tsx

@@ -6,14 +6,14 @@
  *
  */
 
-import { attributesToProps, domToReact } from "html-react-parser";
+import { DOMNode, attributesToProps, domToReact } from "html-react-parser";
 import { LinkBlockSection } from "@ndla/ui";
 import { PluginType } from "./types";
 
 export const navPlugin: PluginType = (node, opts) => {
   if (node.attribs["data-type"] === "link-block-list") {
     const props = attributesToProps(node.attribs);
-    return <LinkBlockSection {...props}>{domToReact(node.children, opts)}</LinkBlockSection>;
+    return <LinkBlockSection {...props}>{domToReact(node.children as DOMNode[], opts)}</LinkBlockSection>;
   }
   return null;
 };

package/src/plugins/oembed/anchorPlugin.tsx

@@ -6,17 +6,17 @@
  *
  */
 
-import { attributesToProps, domToReact } from "html-react-parser";
+import { DOMNode, attributesToProps, domToReact } from "html-react-parser";
 import { SafeLink } from "@ndla/safelink";
 import { getPossiblyRelativeUrl } from "@ndla/ui";
 import { PluginType } from "../types";
 
 export const anchorPlugin: PluginType = (node, options, { path }) => {
   const props = attributesToProps(node.attribs);
-  const href = getPossiblyRelativeUrl(props.href, path);
+  const href = getPossiblyRelativeUrl(props.href as string, path);
   return (
     <SafeLink {...props} target="_blank" to={href} rel="noreferrer">
-      {domToReact(node.children, options)}
+      {domToReact(node.children as DOMNode[], options)}
     </SafeLink>
   );
 };

package/src/plugins/olPlugin.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import { attributesToProps, domToReact } from "html-react-parser";
+import { DOMNode, attributesToProps, domToReact } from "html-react-parser";
 import { OrderedList } from "@ndla/ui";
 import { PluginType } from "./types";
 export const olPlugin: PluginType = (node, converterOpts, opts) => {
@@ -18,7 +18,7 @@ export const olPlugin: PluginType = (node, converterOpts, opts) => {
 
   return (
     <OrderedList {...props} className={classes.length ? classes : undefined} lang={opts.articleLanguage}>
-      {domToReact(node.children, converterOpts)}
+      {domToReact(node.children as DOMNode[], converterOpts)}
     </OrderedList>
   );
 };

package/src/plugins/paragraphPlugin.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import { attributesToProps, domToReact } from "html-react-parser";
+import { DOMNode, attributesToProps, domToReact } from "html-react-parser";
 import { PluginType } from "./types";
 export const paragraphPlugin: PluginType = (node, converterOpts, opts) => {
   const props = attributesToProps(node.attribs);
@@ -14,13 +14,13 @@ export const paragraphPlugin: PluginType = (node, converterOpts, opts) => {
     const classes = [node.attribs.class ?? "", "u-text-center"].filter((c) => !!c).join(" ");
     return (
       <p {...props} lang={opts.articleLanguage} data-align={undefined} className={classes}>
-        {domToReact(node.children, converterOpts)}
+        {domToReact(node.children as DOMNode[], converterOpts)}
       </p>
     );
   }
   return (
     <p {...props} lang={opts.articleLanguage}>
-      {domToReact(node.children, converterOpts)}
+      {domToReact(node.children as DOMNode[], converterOpts)}
     </p>
   );
 };

package/src/plugins/spanPlugin.tsx

@@ -6,14 +6,14 @@
  *
  */
 
-import { attributesToProps, domToReact } from "html-react-parser";
+import { DOMNode, attributesToProps, domToReact } from "html-react-parser";
 import { PluginType } from "./types";
 export const spanPlugin: PluginType = (node, opts) => {
   if (node.attribs["data-size"] === "large") {
     const props = attributesToProps(node.attribs);
     return (
       <span {...props} data-size={undefined} className={`${node.attribs.class ?? ""} u-large-body-text`}>
-        {domToReact(node.children, opts)}
+        {domToReact(node.children as DOMNode[], opts)}
       </span>
     );
   }

package/src/plugins/tablePlugin.tsx

@@ -6,14 +6,14 @@
  *
  */
 
-import { attributesToProps, domToReact } from "html-react-parser";
+import { DOMNode, attributesToProps, domToReact } from "html-react-parser";
 import { Table } from "@ndla/ui";
 import { PluginType } from "./types";
 export const tablePlugin: PluginType = (node, converterOpts, opts) => {
   const props = attributesToProps(node.attribs);
   return (
     <Table {...props} lang={opts.articleLanguage}>
-      {domToReact(node.children, converterOpts)}
+      {domToReact(node.children as DOMNode[], converterOpts)}
     </Table>
   );
 };

package/src/plugins/ulPlugin.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import { attributesToProps, domToReact } from "html-react-parser";
+import { DOMNode, attributesToProps, domToReact } from "html-react-parser";
 import { UnOrderedList } from "@ndla/ui";
 import { PluginType } from "./types";
 export const ulPlugin: PluginType = (node, converterOpts, opts) => {
@@ -16,7 +16,7 @@ export const ulPlugin: PluginType = (node, converterOpts, opts) => {
     .join(" ");
   return (
     <UnOrderedList {...props} className={classes} lang={opts.articleLanguage}>
-      {domToReact(node.children, converterOpts)}
+      {domToReact(node.children as DOMNode[], converterOpts)}
     </UnOrderedList>
   );
 };