@ndla/article-converter 9.0.12-alpha.0 → 9.0.13-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/plugins/copyParagraphPlugin.js +1 -2
- package/es/plugins/embed/blogPostEmbedPlugin.js +2 -3
- package/es/plugins/embed/contactBlockEmbedPlugin.js +1 -2
- package/es/plugins/embed/imageEmbedPlugin.js +0 -3
- package/es/plugins/olPlugin.js +2 -3
- package/es/transform.js +1 -1
- package/lib/plugins/copyParagraphPlugin.js +1 -2
- package/lib/plugins/embed/blogPostEmbedPlugin.js +2 -3
- package/lib/plugins/embed/contactBlockEmbedPlugin.js +1 -2
- package/lib/plugins/embed/imageEmbedPlugin.js +0 -3
- package/lib/plugins/olPlugin.js +2 -3
- package/lib/transform.js +1 -1
- package/package.json +3 -3
- package/src/plugins/embed/imageEmbedPlugin.tsx +1 -3
|
@@ -10,9 +10,8 @@ import { domToReact } from "html-react-parser";
|
|
|
10
10
|
import { CopyParagraphButton } from "@ndla/ui";
|
|
11
11
|
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
12
12
|
export const copyParagraphPlugin = (node, converterOpts, opts) => {
|
|
13
|
-
var _parent$attribs;
|
|
14
13
|
const parent = node.parent;
|
|
15
|
-
if (
|
|
14
|
+
if (parent?.name === "section" || parent?.name === "div" && Object.keys(parent.attribs ?? {}).length === 0 || parent?.name === "ndlaembed" && parent.attribs["data-resource"] === "uu-disclaimer") {
|
|
16
15
|
return _jsx(CopyParagraphButton, {
|
|
17
16
|
copyText: node.attribs["data-text"],
|
|
18
17
|
lang: opts.articleLanguage,
|
|
@@ -9,9 +9,8 @@
|
|
|
9
9
|
import { attributesToProps } from "html-react-parser";
|
|
10
10
|
import { BlogPostV2 } from "@ndla/ui";
|
|
11
11
|
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
12
|
-
export const errorSvgSrc =
|
|
12
|
+
export const errorSvgSrc = `data:image/svg+xml;charset=UTF-8,%3Csvg fill='%238A8888' height='400' viewBox='0 0 24 12' width='100%25' xmlns='http://www.w3.org/2000/svg' style='background-color: %23EFF0F2'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath transform='scale(0.3) translate(28, 8.5)' d='M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3E%3C/svg%3E`;
|
|
13
13
|
export const blogPostEmbedPlugin = (element, _, opts) => {
|
|
14
|
-
var _data$data$metaImage$, _data$data$metaImage;
|
|
15
14
|
const props = attributesToProps(element.attribs);
|
|
16
15
|
const data = JSON.parse(props["data-json"]);
|
|
17
16
|
const {
|
|
@@ -29,7 +28,7 @@ export const blogPostEmbedPlugin = (element, _, opts) => {
|
|
|
29
28
|
path: opts.path,
|
|
30
29
|
metaImage: {
|
|
31
30
|
alt: alt ? alt : "",
|
|
32
|
-
url: data.status === "success" ?
|
|
31
|
+
url: data.status === "success" ? data.data.metaImage?.image.imageUrl ?? errorSvgSrc : errorSvgSrc
|
|
33
32
|
}
|
|
34
33
|
});
|
|
35
34
|
};
|
|
@@ -10,7 +10,6 @@ import { attributesToProps } from "html-react-parser";
|
|
|
10
10
|
import { ContactBlock } from "@ndla/ui";
|
|
11
11
|
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
12
12
|
export const contactBlockEmbedPlugin = (element, _, opts) => {
|
|
13
|
-
var _opts$canonicalUrls;
|
|
14
13
|
const props = attributesToProps(element.attribs);
|
|
15
14
|
const embedData = JSON.parse(props["data-json"]);
|
|
16
15
|
const {
|
|
@@ -32,6 +31,6 @@ export const contactBlockEmbedPlugin = (element, _, opts) => {
|
|
|
32
31
|
name: name,
|
|
33
32
|
blob: blob,
|
|
34
33
|
lang: opts.articleLanguage,
|
|
35
|
-
imageCanonicalUrl:
|
|
34
|
+
imageCanonicalUrl: opts.canonicalUrls?.image
|
|
36
35
|
});
|
|
37
36
|
};
|
|
@@ -10,12 +10,9 @@ import { attributesToProps } from "html-react-parser";
|
|
|
10
10
|
import { ImageEmbed } from "@ndla/ui";
|
|
11
11
|
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
12
12
|
export const imageEmbedPlugin = (element, _, opts) => {
|
|
13
|
-
var _element$parentNode;
|
|
14
13
|
const props = attributesToProps(element.attribs);
|
|
15
14
|
const data = JSON.parse(props["data-json"]);
|
|
16
|
-
const inGrid = ((_element$parentNode = element.parentNode) === null || _element$parentNode === void 0 || (_element$parentNode = _element$parentNode.parentNode) === null || _element$parentNode === void 0 || (_element$parentNode = _element$parentNode.attribs) === null || _element$parentNode === void 0 ? void 0 : _element$parentNode["data-type"]) === "grid";
|
|
17
15
|
return _jsx(ImageEmbed, {
|
|
18
|
-
inGrid: inGrid,
|
|
19
16
|
embed: data,
|
|
20
17
|
previewAlt: opts.previewAlt,
|
|
21
18
|
lang: opts.articleLanguage,
|
package/es/plugins/olPlugin.js
CHANGED
|
@@ -10,12 +10,11 @@ import { attributesToProps, domToReact } from "html-react-parser";
|
|
|
10
10
|
import { OrderedList } from "@ndla/ui";
|
|
11
11
|
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
12
12
|
export const olPlugin = (node, converterOpts, opts) => {
|
|
13
|
-
var _node$attribs$class;
|
|
14
13
|
const props = attributesToProps(node.attribs);
|
|
15
14
|
const letterClass = node.attribs["data-type"] === "letters" ? "ol-list--roman" : false;
|
|
16
15
|
const num = node.attribs.start;
|
|
17
|
-
const numClass = num ?
|
|
18
|
-
const classes = [
|
|
16
|
+
const numClass = num ? `ol-reset-${num}` : false;
|
|
17
|
+
const classes = [node.attribs.class ?? false, letterClass, numClass].filter(c => !!c).join(" ");
|
|
19
18
|
return _jsx(OrderedList, {
|
|
20
19
|
...props,
|
|
21
20
|
className: classes.length ? classes : undefined,
|
package/es/transform.js
CHANGED
|
@@ -12,7 +12,7 @@ import { basePlugins, oembedPlugins } from "./plugins";
|
|
|
12
12
|
import { embedPlugins } from "./plugins/embed";
|
|
13
13
|
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
14
14
|
const transform = (content, opts) => {
|
|
15
|
-
const plugins = opts
|
|
15
|
+
const plugins = opts?.isOembed ? oembedPlugins : basePlugins;
|
|
16
16
|
const options = {
|
|
17
17
|
replace: node => {
|
|
18
18
|
if (!("attribs" in node)) {
|
|
@@ -16,9 +16,8 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
|
16
16
|
*/
|
|
17
17
|
|
|
18
18
|
const copyParagraphPlugin = (node, converterOpts, opts) => {
|
|
19
|
-
var _parent$attribs;
|
|
20
19
|
const parent = node.parent;
|
|
21
|
-
if (
|
|
20
|
+
if (parent?.name === "section" || parent?.name === "div" && Object.keys(parent.attribs ?? {}).length === 0 || parent?.name === "ndlaembed" && parent.attribs["data-resource"] === "uu-disclaimer") {
|
|
22
21
|
return (0, _jsxRuntime.jsx)(_ui.CopyParagraphButton, {
|
|
23
22
|
copyText: node.attribs["data-text"],
|
|
24
23
|
lang: opts.articleLanguage,
|
|
@@ -15,9 +15,8 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
|
15
15
|
*
|
|
16
16
|
*/
|
|
17
17
|
|
|
18
|
-
const errorSvgSrc = exports.errorSvgSrc =
|
|
18
|
+
const errorSvgSrc = exports.errorSvgSrc = `data:image/svg+xml;charset=UTF-8,%3Csvg fill='%238A8888' height='400' viewBox='0 0 24 12' width='100%25' xmlns='http://www.w3.org/2000/svg' style='background-color: %23EFF0F2'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath transform='scale(0.3) translate(28, 8.5)' d='M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3E%3C/svg%3E`;
|
|
19
19
|
const blogPostEmbedPlugin = (element, _, opts) => {
|
|
20
|
-
var _data$data$metaImage$, _data$data$metaImage;
|
|
21
20
|
const props = (0, _htmlReactParser.attributesToProps)(element.attribs);
|
|
22
21
|
const data = JSON.parse(props["data-json"]);
|
|
23
22
|
const {
|
|
@@ -35,7 +34,7 @@ const blogPostEmbedPlugin = (element, _, opts) => {
|
|
|
35
34
|
path: opts.path,
|
|
36
35
|
metaImage: {
|
|
37
36
|
alt: alt ? alt : "",
|
|
38
|
-
url: data.status === "success" ?
|
|
37
|
+
url: data.status === "success" ? data.data.metaImage?.image.imageUrl ?? errorSvgSrc : errorSvgSrc
|
|
39
38
|
}
|
|
40
39
|
});
|
|
41
40
|
};
|
|
@@ -16,7 +16,6 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
|
16
16
|
*/
|
|
17
17
|
|
|
18
18
|
const contactBlockEmbedPlugin = (element, _, opts) => {
|
|
19
|
-
var _opts$canonicalUrls;
|
|
20
19
|
const props = (0, _htmlReactParser.attributesToProps)(element.attribs);
|
|
21
20
|
const embedData = JSON.parse(props["data-json"]);
|
|
22
21
|
const {
|
|
@@ -38,7 +37,7 @@ const contactBlockEmbedPlugin = (element, _, opts) => {
|
|
|
38
37
|
name: name,
|
|
39
38
|
blob: blob,
|
|
40
39
|
lang: opts.articleLanguage,
|
|
41
|
-
imageCanonicalUrl:
|
|
40
|
+
imageCanonicalUrl: opts.canonicalUrls?.image
|
|
42
41
|
});
|
|
43
42
|
};
|
|
44
43
|
exports.contactBlockEmbedPlugin = contactBlockEmbedPlugin;
|
|
@@ -16,12 +16,9 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
|
16
16
|
*/
|
|
17
17
|
|
|
18
18
|
const imageEmbedPlugin = (element, _, opts) => {
|
|
19
|
-
var _element$parentNode;
|
|
20
19
|
const props = (0, _htmlReactParser.attributesToProps)(element.attribs);
|
|
21
20
|
const data = JSON.parse(props["data-json"]);
|
|
22
|
-
const inGrid = ((_element$parentNode = element.parentNode) === null || _element$parentNode === void 0 || (_element$parentNode = _element$parentNode.parentNode) === null || _element$parentNode === void 0 || (_element$parentNode = _element$parentNode.attribs) === null || _element$parentNode === void 0 ? void 0 : _element$parentNode["data-type"]) === "grid";
|
|
23
21
|
return (0, _jsxRuntime.jsx)(_ui.ImageEmbed, {
|
|
24
|
-
inGrid: inGrid,
|
|
25
22
|
embed: data,
|
|
26
23
|
previewAlt: opts.previewAlt,
|
|
27
24
|
lang: opts.articleLanguage,
|
package/lib/plugins/olPlugin.js
CHANGED
|
@@ -16,12 +16,11 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
|
16
16
|
*/
|
|
17
17
|
|
|
18
18
|
const olPlugin = (node, converterOpts, opts) => {
|
|
19
|
-
var _node$attribs$class;
|
|
20
19
|
const props = (0, _htmlReactParser.attributesToProps)(node.attribs);
|
|
21
20
|
const letterClass = node.attribs["data-type"] === "letters" ? "ol-list--roman" : false;
|
|
22
21
|
const num = node.attribs.start;
|
|
23
|
-
const numClass = num ?
|
|
24
|
-
const classes = [
|
|
22
|
+
const numClass = num ? `ol-reset-${num}` : false;
|
|
23
|
+
const classes = [node.attribs.class ?? false, letterClass, numClass].filter(c => !!c).join(" ");
|
|
25
24
|
return (0, _jsxRuntime.jsx)(_ui.OrderedList, {
|
|
26
25
|
...props,
|
|
27
26
|
className: classes.length ? classes : undefined,
|
package/lib/transform.js
CHANGED
|
@@ -19,7 +19,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
|
|
|
19
19
|
*/
|
|
20
20
|
|
|
21
21
|
const transform = (content, opts) => {
|
|
22
|
-
const plugins = opts
|
|
22
|
+
const plugins = opts?.isOembed ? _plugins.oembedPlugins : _plugins.basePlugins;
|
|
23
23
|
const options = {
|
|
24
24
|
replace: node => {
|
|
25
25
|
if (!("attribs" in node)) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ndla/article-converter",
|
|
3
|
-
"version": "9.0.
|
|
3
|
+
"version": "9.0.13-alpha.0",
|
|
4
4
|
"description": "Transforms NDLA articles into extended html versions",
|
|
5
5
|
"license": "GPL-3.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"@ndla/types-embed": "^4.1.8"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@ndla/ui": "^55.0.
|
|
34
|
+
"@ndla/ui": "^55.0.13-alpha.0",
|
|
35
35
|
"html-react-parser": "^5.1.8"
|
|
36
36
|
},
|
|
37
37
|
"peerDependencies": {
|
|
@@ -46,5 +46,5 @@
|
|
|
46
46
|
"publishConfig": {
|
|
47
47
|
"access": "public"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "93dde6fe4aaca52642f8fa0a27f4acad359207cb"
|
|
50
50
|
}
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
-
import { attributesToProps
|
|
9
|
+
import { attributesToProps } from "html-react-parser";
|
|
10
10
|
import { ImageMetaData } from "@ndla/types-embed";
|
|
11
11
|
import { ImageEmbed } from "@ndla/ui";
|
|
12
12
|
import { PluginType } from "../types";
|
|
@@ -14,11 +14,9 @@ import { PluginType } from "../types";
|
|
|
14
14
|
export const imageEmbedPlugin: PluginType = (element, _, opts) => {
|
|
15
15
|
const props = attributesToProps(element.attribs);
|
|
16
16
|
const data = JSON.parse(props["data-json"] as string) as ImageMetaData;
|
|
17
|
-
const inGrid = (element.parentNode?.parentNode as Element)?.attribs?.["data-type"] === "grid";
|
|
18
17
|
|
|
19
18
|
return (
|
|
20
19
|
<ImageEmbed
|
|
21
|
-
inGrid={inGrid}
|
|
22
20
|
embed={data}
|
|
23
21
|
previewAlt={opts.previewAlt}
|
|
24
22
|
lang={opts.articleLanguage}
|