@ndla/article-converter 5.1.7 → 6.0.0

package/es/plugins/anchorPlugin.js

@@ -0,0 +1,27 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+/**
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { attributesToProps, domToReact } from 'html-react-parser';
+import SafeLink from '@ndla/safelink';
+import { getPossiblyRelativeUrl } from '@ndla/ui';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+export var anchorPlugin = function anchorPlugin(node, opts, _ref) {
+  var path = _ref.path;
+  var props = attributesToProps(node.attribs);
+  var href = getPossiblyRelativeUrl(props.href, path);
+  return _jsx(SafeLink, _objectSpread(_objectSpread({}, props), {}, {
+    to: href,
+    children: domToReact(node.children, opts)
+  }));
+};

package/es/plugins/asidePlugin.js

@@ -7,11 +7,11 @@
  */
 
 import { domToReact } from 'html-react-parser';
-import { Aside, FactBoxV2 } from '@ndla/ui';
+import { Aside, FactBox } from '@ndla/ui';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 export var asidePlugin = function asidePlugin(node, opts) {
   if (node.attribs['data-type'] === 'factAside') {
-    return _jsx(FactBoxV2, {
+    return _jsx(FactBox, {
       children: domToReact(node.children, opts)
     });
   } else if (node.attribs['data-type'] === 'rightAside') {

package/es/plugins/copyParagraphPlugin.js

@@ -6,14 +6,14 @@
  *
  */
 
-import { CopyParagraphButtonV2 } from '@ndla/ui';
+import { CopyParagraphButton } from '@ndla/ui';
 import { domToReact } from 'html-react-parser';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 export var copyParagraphPlugin = function copyParagraphPlugin(node, converterOpts, opts) {
   var _parent$attribs;
   var parent = node.parent;
   if ((parent === null || parent === void 0 ? void 0 : parent.name) === 'section' || (parent === null || parent === void 0 ? void 0 : parent.name) === 'div' && Object.keys((_parent$attribs = parent.attribs) !== null && _parent$attribs !== void 0 ? _parent$attribs : {}).length === 0) {
-    return _jsx(CopyParagraphButtonV2, {
+    return _jsx(CopyParagraphButton, {
       copyText: node.attribs['data-text'],
       lang: opts.articleLanguage,
       children: domToReact(node.children, converterOpts)

package/es/plugins/divPlugin.js

@@ -20,14 +20,14 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 
 import partition from 'lodash/partition';
 import { domToReact, attributesToProps } from 'html-react-parser';
-import { FileListV2, RelatedArticleListV2, Grid, GridParallaxItem } from '@ndla/ui';
+import { FileList, RelatedArticleList, Grid, GridParallaxItem } from '@ndla/ui';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 export var divPlugin = function divPlugin(node, opts) {
   if (node.attribs['data-type'] === 'related-content' && node.children.length) {
     var props = attributesToProps(node.attribs);
-    return _jsx(RelatedArticleListV2, _objectSpread(_objectSpread({}, props), {}, {
+    return _jsx(RelatedArticleList, _objectSpread(_objectSpread({}, props), {}, {
       headingLevel: "h3",
       children: domToReact(node.children, opts)
     }));
@@ -42,7 +42,7 @@ export var divPlugin = function divPlugin(node, opts) {
       pdfs = _partition2[0],
       files = _partition2[1];
     return _jsxs(_Fragment, {
-      children: [files.length ? _jsx(FileListV2, {
+      children: [files.length ? _jsx(FileList, {
         children: domToReact(files, opts)
       }) : undefined, domToReact(pdfs, opts)]
     });

package/es/plugins/embed/brightcoveEmbedPlugin.js

@@ -15,6 +15,7 @@ export var brightcoveEmbedPlugin = function brightcoveEmbedPlugin(element, _, op
   var data = JSON.parse(props['data-json']);
   return _jsx(BrightcoveEmbed, {
     embed: data,
-    heartButton: (_opts$components = opts.components) === null || _opts$components === void 0 ? void 0 : _opts$components.heartButton
+    heartButton: (_opts$components = opts.components) === null || _opts$components === void 0 ? void 0 : _opts$components.heartButton,
+    renderContext: opts.renderContext
   });
 };

package/es/plugins/embed/fileEmbedPlugin.js

@@ -7,7 +7,7 @@
  */
 
 import { attributesToProps } from 'html-react-parser';
-import { PdfFile, FileV2 } from '@ndla/ui';
+import { PdfFile, File } from '@ndla/ui';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 export var fileEmbedPlugin = function fileEmbedPlugin(element) {
   var props = attributesToProps(element.attribs);
@@ -23,7 +23,7 @@ export var fileEmbedPlugin = function fileEmbedPlugin(element) {
       url: url
     });
   } else {
-    return _jsx(FileV2, {
+    return _jsx(File, {
       url: url,
       title: title,
       fileExists: data.status === 'success' ? !!data.data.exists : false,

package/es/plugins/embed/imageEmbedPlugin.js

@@ -20,6 +20,7 @@ export var imageEmbedPlugin = function imageEmbedPlugin(element, _, opts) {
     path: opts.path,
     previewAlt: opts.previewAlt,
     heartButton: (_opts$components = opts.components) === null || _opts$components === void 0 ? void 0 : _opts$components.heartButton,
-    lang: opts.articleLanguage
+    lang: opts.articleLanguage,
+    renderContext: opts.renderContext
   });
 };

package/es/plugins/index.js

@@ -18,7 +18,7 @@ import { paragraphPlugin } from './paragraphPlugin';
 import { spanPlugin } from './spanPlugin';
 import { h3Plugin } from './h3Plugin';
 import { mathPlugin } from './mathPlugin';
-import { anchorPlugin } from './oembed/anchorPlugin';
+import { anchorPlugin as oembedAnchorPlugin } from './oembed/anchorPlugin';
 import { divPlugin } from './divPlugin';
 import { tablePlugin } from './tablePlugin';
 import { asidePlugin } from './asidePlugin';
@@ -26,6 +26,7 @@ import { ulPlugin } from './ulPlugin';
 import { ddPlugin } from './ddPlugin';
 import { dtPlugin } from './dtPlugin';
 import { navPlugin } from './navPlugin';
+import { anchorPlugin } from './anchorPlugin';
 export var basePlugins = {
   h2: copyParagraphPlugin,
   h3: h3Plugin,
@@ -39,8 +40,9 @@ export var basePlugins = {
   ul: ulPlugin,
   dd: ddPlugin,
   dt: dtPlugin,
-  nav: navPlugin
+  nav: navPlugin,
+  a: anchorPlugin
 };
 export var oembedPlugins = _objectSpread(_objectSpread({}, basePlugins), {}, {
-  a: anchorPlugin
+  a: oembedAnchorPlugin
 });

package/es/plugins/oembed/anchorPlugin.js

@@ -13,11 +13,17 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
  */
 
 import { attributesToProps, domToReact } from 'html-react-parser';
+import { getPossiblyRelativeUrl } from '@ndla/ui';
+import SafeLink from '@ndla/safelink';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-export var anchorPlugin = function anchorPlugin(node, options) {
+export var anchorPlugin = function anchorPlugin(node, options, _ref) {
+  var path = _ref.path;
   var props = attributesToProps(node.attribs);
-  return _jsx("a", _objectSpread(_objectSpread({}, props), {}, {
+  var href = getPossiblyRelativeUrl(props.href, path);
+  return _jsx(SafeLink, _objectSpread(_objectSpread({}, props), {}, {
     target: "_blank",
+    to: href,
+    rel: "noreferrer",
     children: domToReact(node.children, options)
   }));
 };

package/lib/plugins/anchorPlugin.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { PluginType } from './types';
+export declare const anchorPlugin: PluginType;

package/lib/plugins/anchorPlugin.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.anchorPlugin = void 0;
+var _htmlReactParser = require("html-react-parser");
+var _safelink = _interopRequireDefault(require("@ndla/safelink"));
+var _ui = require("@ndla/ui");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } /**
+                                                                                                                                                                                                                                                                                                                                                                                               * Copyright (c) 2023-present, NDLA.
+                                                                                                                                                                                                                                                                                                                                                                                               *
+                                                                                                                                                                                                                                                                                                                                                                                               * This source code is licensed under the GPLv3 license found in the
+                                                                                                                                                                                                                                                                                                                                                                                               * LICENSE file in the root directory of this source tree.
+                                                                                                                                                                                                                                                                                                                                                                                               *
+                                                                                                                                                                                                                                                                                                                                                                                               */
+var anchorPlugin = function anchorPlugin(node, opts, _ref) {
+  var path = _ref.path;
+  var props = (0, _htmlReactParser.attributesToProps)(node.attribs);
+  var href = (0, _ui.getPossiblyRelativeUrl)(props.href, path);
+  return (0, _jsxRuntime.jsx)(_safelink.default, _objectSpread(_objectSpread({}, props), {}, {
+    to: href,
+    children: (0, _htmlReactParser.domToReact)(node.children, opts)
+  }));
+};
+exports.anchorPlugin = anchorPlugin;

package/lib/plugins/asidePlugin.js

@@ -17,7 +17,7 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
 
 var asidePlugin = function asidePlugin(node, opts) {
   if (node.attribs['data-type'] === 'factAside') {
-    return (0, _jsxRuntime.jsx)(_ui.FactBoxV2, {
+    return (0, _jsxRuntime.jsx)(_ui.FactBox, {
       children: (0, _htmlReactParser.domToReact)(node.children, opts)
     });
   } else if (node.attribs['data-type'] === 'rightAside') {

package/lib/plugins/copyParagraphPlugin.js

@@ -19,7 +19,7 @@ var copyParagraphPlugin = function copyParagraphPlugin(node, converterOpts, opts
   var _parent$attribs;
   var parent = node.parent;
   if ((parent === null || parent === void 0 ? void 0 : parent.name) === 'section' || (parent === null || parent === void 0 ? void 0 : parent.name) === 'div' && Object.keys((_parent$attribs = parent.attribs) !== null && _parent$attribs !== void 0 ? _parent$attribs : {}).length === 0) {
-    return (0, _jsxRuntime.jsx)(_ui.CopyParagraphButtonV2, {
+    return (0, _jsxRuntime.jsx)(_ui.CopyParagraphButton, {
       copyText: node.attribs['data-text'],
       lang: opts.articleLanguage,
       children: (0, _htmlReactParser.domToReact)(node.children, converterOpts)

package/lib/plugins/divPlugin.js

@@ -30,7 +30,7 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 var divPlugin = function divPlugin(node, opts) {
   if (node.attribs['data-type'] === 'related-content' && node.children.length) {
     var props = (0, _htmlReactParser.attributesToProps)(node.attribs);
-    return (0, _jsxRuntime.jsx)(_ui.RelatedArticleListV2, _objectSpread(_objectSpread({}, props), {}, {
+    return (0, _jsxRuntime.jsx)(_ui.RelatedArticleList, _objectSpread(_objectSpread({}, props), {}, {
       headingLevel: "h3",
       children: (0, _htmlReactParser.domToReact)(node.children, opts)
     }));
@@ -45,7 +45,7 @@ var divPlugin = function divPlugin(node, opts) {
       pdfs = _partition2[0],
       files = _partition2[1];
     return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [files.length ? (0, _jsxRuntime.jsx)(_ui.FileListV2, {
+      children: [files.length ? (0, _jsxRuntime.jsx)(_ui.FileList, {
         children: (0, _htmlReactParser.domToReact)(files, opts)
       }) : undefined, (0, _htmlReactParser.domToReact)(pdfs, opts)]
     });

package/lib/plugins/embed/brightcoveEmbedPlugin.js

@@ -21,7 +21,8 @@ var brightcoveEmbedPlugin = function brightcoveEmbedPlugin(element, _, opts) {
   var data = JSON.parse(props['data-json']);
   return (0, _jsxRuntime.jsx)(_ui.BrightcoveEmbed, {
     embed: data,
-    heartButton: (_opts$components = opts.components) === null || _opts$components === void 0 ? void 0 : _opts$components.heartButton
+    heartButton: (_opts$components = opts.components) === null || _opts$components === void 0 ? void 0 : _opts$components.heartButton,
+    renderContext: opts.renderContext
   });
 };
 exports.brightcoveEmbedPlugin = brightcoveEmbedPlugin;

package/lib/plugins/embed/fileEmbedPlugin.js

@@ -29,7 +29,7 @@ var fileEmbedPlugin = function fileEmbedPlugin(element) {
       url: url
     });
   } else {
-    return (0, _jsxRuntime.jsx)(_ui.FileV2, {
+    return (0, _jsxRuntime.jsx)(_ui.File, {
       url: url,
       title: title,
       fileExists: data.status === 'success' ? !!data.data.exists : false,

package/lib/plugins/embed/imageEmbedPlugin.js

@@ -26,7 +26,8 @@ var imageEmbedPlugin = function imageEmbedPlugin(element, _, opts) {
     path: opts.path,
     previewAlt: opts.previewAlt,
     heartButton: (_opts$components = opts.components) === null || _opts$components === void 0 ? void 0 : _opts$components.heartButton,
-    lang: opts.articleLanguage
+    lang: opts.articleLanguage,
+    renderContext: opts.renderContext
   });
 };
 exports.imageEmbedPlugin = imageEmbedPlugin;

package/lib/plugins/index.js

@@ -18,6 +18,7 @@ var _ulPlugin = require("./ulPlugin");
 var _ddPlugin = require("./ddPlugin");
 var _dtPlugin = require("./dtPlugin");
 var _navPlugin = require("./navPlugin");
+var _anchorPlugin2 = require("./anchorPlugin");
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -43,7 +44,8 @@ var basePlugins = {
   ul: _ulPlugin.ulPlugin,
   dd: _ddPlugin.ddPlugin,
   dt: _dtPlugin.dtPlugin,
-  nav: _navPlugin.navPlugin
+  nav: _navPlugin.navPlugin,
+  a: _anchorPlugin2.anchorPlugin
 };
 exports.basePlugins = basePlugins;
 var oembedPlugins = _objectSpread(_objectSpread({}, basePlugins), {}, {

package/lib/plugins/oembed/anchorPlugin.js

@@ -5,7 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.anchorPlugin = void 0;
 var _htmlReactParser = require("html-react-parser");
+var _ui = require("@ndla/ui");
+var _safelink = _interopRequireDefault(require("@ndla/safelink"));
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -18,10 +21,14 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
                                                                                                                                                                                                                                                                                                                                                                                                * LICENSE file in the root directory of this source tree.
                                                                                                                                                                                                                                                                                                                                                                                                *
                                                                                                                                                                                                                                                                                                                                                                                                */
-var anchorPlugin = function anchorPlugin(node, options) {
+var anchorPlugin = function anchorPlugin(node, options, _ref) {
+  var path = _ref.path;
   var props = (0, _htmlReactParser.attributesToProps)(node.attribs);
-  return (0, _jsxRuntime.jsx)("a", _objectSpread(_objectSpread({}, props), {}, {
+  var href = (0, _ui.getPossiblyRelativeUrl)(props.href, path);
+  return (0, _jsxRuntime.jsx)(_safelink.default, _objectSpread(_objectSpread({}, props), {}, {
     target: "_blank",
+    to: href,
+    rel: "noreferrer",
     children: (0, _htmlReactParser.domToReact)(node.children, options)
   }));
 };

package/lib/plugins/types.d.ts

@@ -6,7 +6,7 @@
  *
  */
 /// <reference types="react" />
-import { HeartButtonType } from '@ndla/ui';
+import { HeartButtonType, RenderContext } from '@ndla/ui';
 import { Element, HTMLReactParserOptions } from 'html-react-parser';
 export interface DynamicComponents {
     heartButton?: HeartButtonType;
@@ -19,5 +19,6 @@ export interface TransformOptions {
     frontendDomain?: string;
     components?: DynamicComponents;
     articleLanguage?: string;
+    renderContext?: RenderContext;
 }
 export type PluginType = (element: Element, options: HTMLReactParserOptions, metaData: TransformOptions) => JSX.Element | undefined | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/article-converter",
-  "version": "5.1.7",
+  "version": "6.0.0",
   "description": "Transforms NDLA articles into extended html versions",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -30,8 +30,8 @@
     "@ndla/types-embed": "^4.0.5"
   },
   "dependencies": {
-    "@ndla/code": "^5.0.8",
-    "@ndla/ui": "^48.0.0",
+    "@ndla/code": "^5.0.10",
+    "@ndla/ui": "^49.0.1",
     "html-react-parser": "^4.2.2",
     "lodash": "^4.17.20"
   },
@@ -44,5 +44,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ed966f21f13cb62868b6aa70406c9acf8234bc75"
+  "gitHead": "613a1b7bd697142fdcee7cca42c743f4c2431a40"
 }

package/src/plugins/anchorPlugin.tsx

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { 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);
+
+  return (
+    <SafeLink {...props} to={href}>
+      {domToReact(node.children, opts)}
+    </SafeLink>
+  );
+};

package/src/plugins/asidePlugin.tsx

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

package/src/plugins/copyParagraphPlugin.tsx

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

package/src/plugins/divPlugin.tsx

@@ -8,7 +8,7 @@
 
 import partition from 'lodash/partition';
 import { domToReact, attributesToProps, Element } from 'html-react-parser';
-import { FileListV2, RelatedArticleListV2, Grid, GridType, GridParallaxItem } from '@ndla/ui';
+import { FileList, RelatedArticleList, Grid, GridType, GridParallaxItem } from '@ndla/ui';
 import { PluginType } from './types';
 
 export const divPlugin: PluginType = (node, opts) => {
@@ -16,10 +16,10 @@ export const divPlugin: PluginType = (node, opts) => {
     const props = attributesToProps(node.attribs);
 
     return (
-      <RelatedArticleListV2 {...props} headingLevel="h3">
+      <RelatedArticleList {...props} headingLevel="h3">
         {/* @ts-ignore */}
         {domToReact(node.children, opts)}
-      </RelatedArticleListV2>
+      </RelatedArticleList>
     );
   } else if (node.attribs['data-type'] === 'file' && node.childNodes.length) {
     const elements = node.childNodes.filter(
@@ -32,7 +32,7 @@ export const divPlugin: PluginType = (node, opts) => {
 
     return (
       <>
-        {files.length ? <FileListV2>{domToReact(files, opts)}</FileListV2> : undefined}
+        {files.length ? <FileList>{domToReact(files, opts)}</FileList> : undefined}
         {domToReact(pdfs, opts)}
       </>
     );

package/src/plugins/embed/brightcoveEmbedPlugin.tsx

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

package/src/plugins/embed/fileEmbedPlugin.tsx

@@ -8,7 +8,7 @@
 
 import { attributesToProps } from 'html-react-parser';
 import { FileMetaData } from '@ndla/types-embed';
-import { PdfFile, FileV2 } from '@ndla/ui';
+import { PdfFile, File } from '@ndla/ui';
 import { PluginType } from '../types';
 
 export const fileEmbedPlugin: PluginType = (element) => {
@@ -19,7 +19,7 @@ export const fileEmbedPlugin: PluginType = (element) => {
     return <PdfFile title={title} url={url} />;
   } else {
     return (
-      <FileV2
+      <File
         url={url}
         title={title}
         fileExists={data.status === 'success' ? !!data.data.exists : false}

package/src/plugins/embed/imageEmbedPlugin.tsx

@@ -24,6 +24,7 @@ export const imageEmbedPlugin: PluginType = (element, _, opts) => {
       previewAlt={opts.previewAlt}
       heartButton={opts.components?.heartButton}
       lang={opts.articleLanguage}
+      renderContext={opts.renderContext}
     />
   );
 };

package/src/plugins/index.ts

@@ -13,7 +13,7 @@ import { paragraphPlugin } from './paragraphPlugin';
 import { spanPlugin } from './spanPlugin';
 import { h3Plugin } from './h3Plugin';
 import { mathPlugin } from './mathPlugin';
-import { anchorPlugin } from './oembed/anchorPlugin';
+import { anchorPlugin as oembedAnchorPlugin } from './oembed/anchorPlugin';
 import { divPlugin } from './divPlugin';
 import { tablePlugin } from './tablePlugin';
 import { asidePlugin } from './asidePlugin';
@@ -21,6 +21,7 @@ import { ulPlugin } from './ulPlugin';
 import { ddPlugin } from './ddPlugin';
 import { dtPlugin } from './dtPlugin';
 import { navPlugin } from './navPlugin';
+import { anchorPlugin } from './anchorPlugin';
 
 export const basePlugins: Record<string, PluginType> = {
   h2: copyParagraphPlugin,
@@ -36,9 +37,10 @@ export const basePlugins: Record<string, PluginType> = {
   dd: ddPlugin,
   dt: dtPlugin,
   nav: navPlugin,
+  a: anchorPlugin,
 };
 
 export const oembedPlugins: Record<string, PluginType> = {
   ...basePlugins,
-  a: anchorPlugin,
+  a: oembedAnchorPlugin,
 };

package/src/plugins/oembed/anchorPlugin.tsx

@@ -7,12 +7,16 @@
  */
 
 import { attributesToProps, domToReact } from 'html-react-parser';
+import { getPossiblyRelativeUrl } from '@ndla/ui';
+import SafeLink from '@ndla/safelink';
 import { PluginType } from '../types';
-export const anchorPlugin: PluginType = (node, options) => {
+
+export const anchorPlugin: PluginType = (node, options, { path }) => {
   const props = attributesToProps(node.attribs);
+  const href = getPossiblyRelativeUrl(props.href, path);
   return (
-    <a {...props} target="_blank">
+    <SafeLink {...props} target="_blank" to={href} rel="noreferrer">
       {domToReact(node.children, options)}
-    </a>
+    </SafeLink>
   );
 };

package/src/plugins/types.ts

@@ -6,7 +6,7 @@
  *
  */
 
-import { HeartButtonType } from '@ndla/ui';
+import { HeartButtonType, RenderContext } from '@ndla/ui';
 import { Element, HTMLReactParserOptions } from 'html-react-parser';
 
 export interface DynamicComponents {
@@ -21,6 +21,7 @@ export interface TransformOptions {
   frontendDomain?: string;
   components?: DynamicComponents;
   articleLanguage?: string;
+  renderContext?: RenderContext;
 }
 
 export type PluginType = (