@ndla/article-converter 1.0.1 → 1.0.3
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/README.md +32 -0
- package/es/plugins/{AsidePlugin.js → asidePlugin.js} +1 -1
- package/es/plugins/{CopyParagraphPlugin.js → copyParagraphPlugin.js} +1 -1
- package/es/plugins/{DivPlugin.js → divPlugin.js} +1 -1
- package/es/plugins/embed/{AudioEmbedPlugin.js → audioEmbedPlugin.js} +1 -1
- package/es/plugins/embed/{BrightcoveEmbedPlugin.js → brightcoveEmbedPlugin.js} +1 -1
- package/es/plugins/embed/{CodeEmbedPlugin.js → codeEmbedPlugin.js} +1 -1
- package/es/plugins/embed/{ConceptEmbedPlugin.js → conceptEmbedPlugin.js} +1 -1
- package/es/plugins/embed/{ConceptListEmbedPlugin.js → conceptListEmbedPlugin.js} +1 -1
- package/es/plugins/embed/{ContentLinkEmbedPlugin.js → contentLinkEmbedPlugin.js} +1 -1
- package/es/plugins/embed/{ExternalEmbedPlugin.js → externalEmbedPlugin.js} +1 -1
- package/es/plugins/embed/{FileEmbedPlugin.js → fileEmbedPlugin.js} +1 -1
- package/es/plugins/embed/{FootnoteEmbedPlugin.js → footnoteEmbedPlugin.js} +1 -1
- package/es/plugins/embed/{H5pEmbedPlugin.js → h5pEmbedPlugin.js} +1 -1
- package/es/plugins/embed/{IframeEmbedPlugin.js → iframeEmbedPlugin.js} +1 -1
- package/es/plugins/embed/{ImageEmbedPlugin.js → imageEmbedPlugin.js} +1 -1
- package/es/plugins/embed/index.js +26 -26
- package/es/plugins/embed/{RelatedContentEmbedPlugin.js → relatedContentEmbedPlugin.js} +1 -1
- package/es/plugins/{H3Plugin.js → h3Plugin.js} +1 -1
- package/es/plugins/index.js +22 -20
- package/es/plugins/{MathPlugin.js → mathPlugin.js} +1 -1
- package/es/plugins/oembed/{AnchorPlugin.js → anchorPlugin.js} +1 -1
- package/es/plugins/{OLPlugin.js → olPlugin.js} +1 -1
- package/es/plugins/{ParagraphPlugin.js → paragraphPlugin.js} +1 -1
- package/es/plugins/{SpanPlugin.js → spanPlugin.js} +1 -1
- package/es/plugins/{TablePlugin.js → tablePlugin.js} +1 -1
- package/es/plugins/{ULPlugin.js → ulPlugin.js} +1 -1
- package/lib/plugins/{AsidePlugin.d.ts → asidePlugin.d.ts} +1 -1
- package/lib/plugins/{AsidePlugin.js → asidePlugin.js} +3 -3
- package/lib/plugins/{CopyParagraphPlugin.d.ts → copyParagraphPlugin.d.ts} +1 -1
- package/lib/plugins/{CopyParagraphPlugin.js → copyParagraphPlugin.js} +3 -3
- package/lib/plugins/{DivPlugin.d.ts → divPlugin.d.ts} +1 -1
- package/lib/plugins/{DivPlugin.js → divPlugin.js} +3 -3
- package/lib/plugins/embed/{AudioEmbedPlugin.d.ts → audioEmbedPlugin.d.ts} +1 -1
- package/lib/plugins/embed/{AudioEmbedPlugin.js → audioEmbedPlugin.js} +3 -3
- package/lib/plugins/embed/{BrightcoveEmbedPlugin.d.ts → brightcoveEmbedPlugin.d.ts} +1 -1
- package/lib/plugins/embed/{BrightcoveEmbedPlugin.js → brightcoveEmbedPlugin.js} +3 -3
- package/lib/plugins/embed/{FileEmbedPlugin.d.ts → codeEmbedPlugin.d.ts} +1 -1
- package/lib/plugins/embed/{CodeEmbedPlugin.js → codeEmbedPlugin.js} +3 -3
- package/lib/plugins/embed/{ConceptEmbedPlugin.d.ts → conceptEmbedPlugin.d.ts} +1 -1
- package/lib/plugins/embed/{ConceptEmbedPlugin.js → conceptEmbedPlugin.js} +3 -3
- package/lib/plugins/embed/conceptListEmbedPlugin.d.ts +9 -0
- package/lib/plugins/embed/{ConceptListEmbedPlugin.js → conceptListEmbedPlugin.js} +3 -3
- package/lib/plugins/embed/contentLinkEmbedPlugin.d.ts +9 -0
- package/lib/plugins/embed/{ContentLinkEmbedPlugin.js → contentLinkEmbedPlugin.js} +3 -3
- package/lib/plugins/embed/{ExternalEmbedPlugin.d.ts → externalEmbedPlugin.d.ts} +1 -1
- package/lib/plugins/embed/{ExternalEmbedPlugin.js → externalEmbedPlugin.js} +3 -3
- package/lib/plugins/embed/{CodeEmbedPlugin.d.ts → fileEmbedPlugin.d.ts} +1 -1
- package/lib/plugins/embed/{FileEmbedPlugin.js → fileEmbedPlugin.js} +3 -3
- package/lib/plugins/embed/footnoteEmbedPlugin.d.ts +9 -0
- package/lib/plugins/embed/{FootnoteEmbedPlugin.js → footnoteEmbedPlugin.js} +3 -3
- package/lib/plugins/embed/{H5pEmbedPlugin.d.ts → h5pEmbedPlugin.d.ts} +1 -1
- package/lib/plugins/embed/{H5pEmbedPlugin.js → h5pEmbedPlugin.js} +3 -3
- package/lib/plugins/embed/iframeEmbedPlugin.d.ts +9 -0
- package/lib/plugins/embed/{IframeEmbedPlugin.js → iframeEmbedPlugin.js} +3 -3
- package/lib/plugins/embed/imageEmbedPlugin.d.ts +9 -0
- package/lib/plugins/embed/{ImageEmbedPlugin.js → imageEmbedPlugin.js} +3 -3
- package/lib/plugins/embed/index.js +26 -26
- package/lib/plugins/embed/relatedContentEmbedPlugin.d.ts +9 -0
- package/lib/plugins/embed/{RelatedContentEmbedPlugin.js → relatedContentEmbedPlugin.js} +3 -3
- package/lib/plugins/{OLPlugin.d.ts → h3Plugin.d.ts} +1 -1
- package/lib/plugins/{H3Plugin.js → h3Plugin.js} +3 -3
- package/lib/plugins/index.js +22 -20
- package/lib/plugins/{MathPlugin.d.ts → mathPlugin.d.ts} +1 -1
- package/lib/plugins/{MathPlugin.js → mathPlugin.js} +3 -3
- package/lib/plugins/oembed/{AnchorPlugin.d.ts → anchorPlugin.d.ts} +1 -1
- package/lib/plugins/oembed/{AnchorPlugin.js → anchorPlugin.js} +3 -3
- package/lib/plugins/{ULPlugin.d.ts → olPlugin.d.ts} +1 -1
- package/lib/plugins/{OLPlugin.js → olPlugin.js} +3 -3
- package/lib/plugins/paragraphPlugin.d.ts +9 -0
- package/lib/plugins/{ParagraphPlugin.js → paragraphPlugin.js} +3 -3
- package/lib/plugins/spanPlugin.d.ts +9 -0
- package/lib/plugins/{SpanPlugin.js → spanPlugin.js} +3 -3
- package/lib/plugins/tablePlugin.d.ts +9 -0
- package/lib/plugins/{TablePlugin.js → tablePlugin.js} +3 -3
- package/lib/plugins/{H3Plugin.d.ts → ulPlugin.d.ts} +1 -1
- package/lib/plugins/{ULPlugin.js → ulPlugin.js} +3 -3
- package/package.json +5 -5
- package/src/plugins/{AsidePlugin.tsx → asidePlugin.tsx} +1 -1
- package/src/plugins/{CopyParagraphPlugin.tsx → copyParagraphPlugin.tsx} +1 -1
- package/src/plugins/{DivPlugin.tsx → divPlugin.tsx} +1 -1
- package/src/plugins/embed/{AudioEmbedPlugin.tsx → audioEmbedPlugin.tsx} +1 -1
- package/src/plugins/embed/{BrightcoveEmbedPlugin.tsx → brightcoveEmbedPlugin.tsx} +1 -1
- package/src/plugins/embed/{CodeEmbedPlugin.tsx → codeEmbedPlugin.tsx} +1 -1
- package/src/plugins/embed/{ConceptEmbedPlugin.tsx → conceptEmbedPlugin.tsx} +1 -1
- package/src/plugins/embed/{ConceptListEmbedPlugin.tsx → conceptListEmbedPlugin.tsx} +1 -1
- package/src/plugins/embed/{ContentLinkEmbedPlugin.tsx → contentLinkEmbedPlugin.tsx} +1 -1
- package/src/plugins/embed/{ExternalEmbedPlugin.tsx → externalEmbedPlugin.tsx} +1 -1
- package/src/plugins/embed/{FileEmbedPlugin.tsx → fileEmbedPlugin.tsx} +1 -1
- package/src/plugins/embed/{FootnoteEmbedPlugin.tsx → footnoteEmbedPlugin.tsx} +1 -1
- package/src/plugins/embed/{H5pEmbedPlugin.tsx → h5pEmbedPlugin.tsx} +1 -1
- package/src/plugins/embed/{IframeEmbedPlugin.tsx → iframeEmbedPlugin.tsx} +1 -1
- package/src/plugins/embed/{ImageEmbedPlugin.tsx → imageEmbedPlugin.tsx} +1 -1
- package/src/plugins/embed/index.ts +26 -26
- package/src/plugins/embed/{RelatedContentEmbedPlugin.tsx → relatedContentEmbedPlugin.tsx} +1 -1
- package/src/plugins/{H3Plugin.tsx → h3Plugin.tsx} +1 -1
- package/src/plugins/index.ts +22 -20
- package/src/plugins/{MathPlugin.tsx → mathPlugin.tsx} +1 -1
- package/src/plugins/oembed/{AnchorPlugin.tsx → anchorPlugin.tsx} +1 -1
- package/src/plugins/{OLPlugin.tsx → olPlugin.tsx} +1 -1
- package/src/plugins/{ParagraphPlugin.tsx → paragraphPlugin.tsx} +1 -1
- package/src/plugins/{SpanPlugin.tsx → spanPlugin.tsx} +1 -1
- package/src/plugins/{TablePlugin.tsx → tablePlugin.tsx} +1 -1
- package/src/plugins/{ULPlugin.tsx → ulPlugin.tsx} +1 -1
- package/lib/plugins/ParagraphPlugin.d.ts +0 -9
- package/lib/plugins/SpanPlugin.d.ts +0 -9
- package/lib/plugins/TablePlugin.d.ts +0 -9
- package/lib/plugins/embed/ConceptListEmbedPlugin.d.ts +0 -9
- package/lib/plugins/embed/ContentLinkEmbedPlugin.d.ts +0 -9
- package/lib/plugins/embed/FootnoteEmbedPlugin.d.ts +0 -9
- package/lib/plugins/embed/IframeEmbedPlugin.d.ts +0 -9
- package/lib/plugins/embed/ImageEmbedPlugin.d.ts +0 -9
- package/lib/plugins/embed/RelatedContentEmbedPlugin.d.ts +0 -9
package/README.md
ADDED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
# Article-converter
|
|
2
|
+
|
|
3
|
+
Converts NDLA articles created in [ed.ndla.no](https://ed.ndla.no) into a React tree.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```sh
|
|
8
|
+
yarn add @ndla/article-converter
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Why is this package needed?
|
|
12
|
+
|
|
13
|
+
Articles rendered on [NDLA.no](https://ndla.no) can contain different embeds, each having their own data requirements. In order to keep embed data fresh, it is fetched directly from its source instead of being embedded within the stored article. As such, a transformation process is required.
|
|
14
|
+
|
|
15
|
+
In order to allow for flexibility in how and when an article is transformed, the process has been split up in several different steps:
|
|
16
|
+
|
|
17
|
+
1. An article is created in our CMS, Editorial. The content is stored in a database. Embeds are stored as custom `<ndlaembed />` html elements.
|
|
18
|
+
2. A web application fetches an article through our [GraphQL api](https://api.ndla.no/graphql). GraphQL fetches the article from the database, extracts the `<ndlaembed />` tags and fetches the required embed metadata. The metadata is then serialized and stored in a `data-json` attribute on the `<ndlaembed>`.
|
|
19
|
+
3. The web application receives a response from GraphQL, and calls `transform` from the `@ndla/article-converter` package.
|
|
20
|
+
4. The `@ndla/article-converter` package transforms the HTML string into React Elements, and applies a series of transformations to further transform the article. It returns a valid React tree.
|
|
21
|
+
|
|
22
|
+
## Functions
|
|
23
|
+
|
|
24
|
+
This package exports two functions that allows one to transform NDLA content to React nodes.
|
|
25
|
+
|
|
26
|
+
- **transform**: Accepts an entire NDLA article string that has been passed through GraphQL, and returns a React tree. Accepts the following transformation options:
|
|
27
|
+
- **isOembed**: Adds `target="_blank"` to all links.
|
|
28
|
+
- **subject**: Adds a specific subject context to the article.
|
|
29
|
+
- **path**: The path to use for the rendered article.
|
|
30
|
+
- **previewAlt**: Show visual previews of image alt texts.
|
|
31
|
+
- **frontendDomain**: The frontend domain to use for generated links.
|
|
32
|
+
- **extractEmbedData**: Accepts a string containing a single `<ndlaembed>` element that has been passed through GraphQL. Returns a react tree.
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
import { domToReact } from 'html-react-parser';
|
|
10
10
|
import { Aside, FactBoxV2 } from '@ndla/ui';
|
|
11
11
|
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
12
|
-
export var
|
|
12
|
+
export var asidePlugin = function asidePlugin(node, opts) {
|
|
13
13
|
if (node.attribs['data-type'] === 'factAside') {
|
|
14
14
|
return _jsx(FactBoxV2, {
|
|
15
15
|
children: domToReact(node.children, opts)
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
import { CopyParagraphButtonV2 } from '@ndla/ui';
|
|
10
10
|
import { domToReact } from 'html-react-parser';
|
|
11
11
|
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
12
|
-
export var
|
|
12
|
+
export var copyParagraphPlugin = function copyParagraphPlugin(node, opts) {
|
|
13
13
|
return _jsx(CopyParagraphButtonV2, {
|
|
14
14
|
copyText: node.attribs['data-text'],
|
|
15
15
|
children: domToReact(node.children, opts)
|
|
@@ -21,7 +21,7 @@ import { FileListV2, RelatedArticleListV2 } from '@ndla/ui';
|
|
|
21
21
|
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
22
22
|
import { Fragment as _Fragment } from "@emotion/react/jsx-runtime";
|
|
23
23
|
import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
|
|
24
|
-
export var
|
|
24
|
+
export var divPlugin = function divPlugin(node, opts) {
|
|
25
25
|
if (node.attribs['data-type'] === 'related-content' && node.children.length) {
|
|
26
26
|
var props = attributesToProps(node.attribs);
|
|
27
27
|
return _jsx(RelatedArticleListV2, _objectSpread(_objectSpread({}, props), {}, {
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
import { attributesToProps } from 'html-react-parser';
|
|
10
10
|
import { AudioEmbed } from '@ndla/ui';
|
|
11
11
|
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
12
|
-
export var
|
|
12
|
+
export var audioEmbedPlugin = function audioEmbedPlugin(element, _, opts) {
|
|
13
13
|
var props = attributesToProps(element.attribs);
|
|
14
14
|
var data = JSON.parse(props['data-json']);
|
|
15
15
|
return _jsx(AudioEmbed, {
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
import { attributesToProps } from 'html-react-parser';
|
|
10
10
|
import { BrightcoveEmbed } from '@ndla/ui';
|
|
11
11
|
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
12
|
-
export var
|
|
12
|
+
export var brightcoveEmbedPlugin = function brightcoveEmbedPlugin(element) {
|
|
13
13
|
var props = attributesToProps(element.attribs);
|
|
14
14
|
var data = JSON.parse(props['data-json']);
|
|
15
15
|
return _jsx(BrightcoveEmbed, {
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
import { attributesToProps } from 'html-react-parser';
|
|
10
10
|
import { CodeEmbed } from '@ndla/code';
|
|
11
11
|
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
12
|
-
export var
|
|
12
|
+
export var codeEmbedPlugin = function codeEmbedPlugin(element) {
|
|
13
13
|
var props = attributesToProps(element.attribs);
|
|
14
14
|
var data = JSON.parse(props['data-json']);
|
|
15
15
|
return _jsx(CodeEmbed, {
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
import { attributesToProps } from 'html-react-parser';
|
|
10
10
|
import { ConceptEmbed } from '@ndla/ui';
|
|
11
11
|
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
12
|
-
export var
|
|
12
|
+
export var conceptEmbedPlugin = function conceptEmbedPlugin(element) {
|
|
13
13
|
var props = attributesToProps(element.attribs);
|
|
14
14
|
var data = JSON.parse(props['data-json']);
|
|
15
15
|
return _jsx(ConceptEmbed, {
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
import { attributesToProps } from 'html-react-parser';
|
|
10
10
|
import { ConceptListEmbed } from '@ndla/ui';
|
|
11
11
|
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
12
|
-
export var
|
|
12
|
+
export var conceptListEmbedPlugin = function conceptListEmbedPlugin(element) {
|
|
13
13
|
var props = attributesToProps(element.attribs);
|
|
14
14
|
var data = JSON.parse(props['data-json']);
|
|
15
15
|
return _jsx(ConceptListEmbed, {
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
import { attributesToProps } from 'html-react-parser';
|
|
10
10
|
import { ContentLinkEmbed } from '@ndla/ui';
|
|
11
11
|
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
12
|
-
export var
|
|
12
|
+
export var contentLinkEmbedPlugin = function contentLinkEmbedPlugin(element, _, _ref) {
|
|
13
13
|
var isOembed = _ref.isOembed;
|
|
14
14
|
var props = attributesToProps(element.attribs);
|
|
15
15
|
var data = JSON.parse(props['data-json']);
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
import { attributesToProps } from 'html-react-parser';
|
|
10
10
|
import { ExternalEmbed } from '@ndla/ui';
|
|
11
11
|
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
12
|
-
export var
|
|
12
|
+
export var externalEmbedPlugin = function externalEmbedPlugin(element) {
|
|
13
13
|
var props = attributesToProps(element.attribs);
|
|
14
14
|
var data = JSON.parse(props['data-json']);
|
|
15
15
|
return _jsx(ExternalEmbed, {
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
import { attributesToProps } from 'html-react-parser';
|
|
10
10
|
import { PdfFile, FileV2 } from '@ndla/ui';
|
|
11
11
|
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
12
|
-
export var
|
|
12
|
+
export var fileEmbedPlugin = function fileEmbedPlugin(element) {
|
|
13
13
|
var props = attributesToProps(element.attribs);
|
|
14
14
|
var data = JSON.parse(props['data-json']);
|
|
15
15
|
var _data$embedData = data.embedData,
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
import { attributesToProps } from 'html-react-parser';
|
|
10
10
|
import { FootnoteEmbed } from '@ndla/ui';
|
|
11
11
|
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
12
|
-
export var
|
|
12
|
+
export var footnoteEmbedPlugin = function footnoteEmbedPlugin(element) {
|
|
13
13
|
var props = attributesToProps(element.attribs);
|
|
14
14
|
var data = JSON.parse(props['data-json']);
|
|
15
15
|
return _jsx(FootnoteEmbed, {
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
import { attributesToProps } from 'html-react-parser';
|
|
10
10
|
import { H5pEmbed } from '@ndla/ui';
|
|
11
11
|
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
12
|
-
export var
|
|
12
|
+
export var h5pEmbedPlugin = function h5pEmbedPlugin(element) {
|
|
13
13
|
var props = attributesToProps(element.attribs);
|
|
14
14
|
var data = JSON.parse(props['data-json']);
|
|
15
15
|
return _jsx(H5pEmbed, {
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
import { attributesToProps } from 'html-react-parser';
|
|
10
10
|
import { IframeEmbed } from '@ndla/ui';
|
|
11
11
|
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
12
|
-
export var
|
|
12
|
+
export var iframeEmbedPlugin = function iframeEmbedPlugin(element) {
|
|
13
13
|
var props = attributesToProps(element.attribs);
|
|
14
14
|
var data = JSON.parse(props['data-json']);
|
|
15
15
|
return _jsx(IframeEmbed, {
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
import { ImageEmbed } from '@ndla/ui';
|
|
10
10
|
import { attributesToProps } from 'html-react-parser';
|
|
11
11
|
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
12
|
-
export var
|
|
12
|
+
export var imageEmbedPlugin = function imageEmbedPlugin(element, _, opts) {
|
|
13
13
|
var props = attributesToProps(element.attribs);
|
|
14
14
|
var data = JSON.parse(props['data-json']);
|
|
15
15
|
return _jsx(ImageEmbed, {
|
|
@@ -6,31 +6,31 @@
|
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
20
|
-
import {
|
|
21
|
-
import {
|
|
9
|
+
import { audioEmbedPlugin } from './audioEmbedPlugin';
|
|
10
|
+
import { externalEmbedPlugin } from './externalEmbedPlugin';
|
|
11
|
+
import { h5pEmbedPlugin } from './h5pEmbedPlugin';
|
|
12
|
+
import { iframeEmbedPlugin } from './iframeEmbedPlugin';
|
|
13
|
+
import { imageEmbedPlugin } from './imageEmbedPlugin';
|
|
14
|
+
import { footnoteEmbedPlugin } from './footnoteEmbedPlugin';
|
|
15
|
+
import { brightcoveEmbedPlugin } from './brightcoveEmbedPlugin';
|
|
16
|
+
import { relatedContentEmbedPlugin } from './relatedContentEmbedPlugin';
|
|
17
|
+
import { contentLinkEmbedPlugin } from './contentLinkEmbedPlugin';
|
|
18
|
+
import { conceptEmbedPlugin } from './conceptEmbedPlugin';
|
|
19
|
+
import { conceptListEmbedPlugin } from './conceptListEmbedPlugin';
|
|
20
|
+
import { fileEmbedPlugin } from './fileEmbedPlugin';
|
|
21
|
+
import { codeEmbedPlugin } from './codeEmbedPlugin';
|
|
22
22
|
export var embedPlugins = {
|
|
23
|
-
image:
|
|
24
|
-
audio:
|
|
25
|
-
h5p:
|
|
26
|
-
'code-block':
|
|
27
|
-
external:
|
|
28
|
-
iframe:
|
|
29
|
-
footnote:
|
|
30
|
-
brightcove:
|
|
31
|
-
'related-content':
|
|
32
|
-
'content-link':
|
|
33
|
-
concept:
|
|
34
|
-
'concept-list':
|
|
35
|
-
file:
|
|
23
|
+
image: imageEmbedPlugin,
|
|
24
|
+
audio: audioEmbedPlugin,
|
|
25
|
+
h5p: h5pEmbedPlugin,
|
|
26
|
+
'code-block': codeEmbedPlugin,
|
|
27
|
+
external: externalEmbedPlugin,
|
|
28
|
+
iframe: iframeEmbedPlugin,
|
|
29
|
+
footnote: footnoteEmbedPlugin,
|
|
30
|
+
brightcove: brightcoveEmbedPlugin,
|
|
31
|
+
'related-content': relatedContentEmbedPlugin,
|
|
32
|
+
'content-link': contentLinkEmbedPlugin,
|
|
33
|
+
concept: conceptEmbedPlugin,
|
|
34
|
+
'concept-list': conceptListEmbedPlugin,
|
|
35
|
+
file: fileEmbedPlugin
|
|
36
36
|
};
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
import { attributesToProps } from 'html-react-parser';
|
|
10
10
|
import { RelatedContentEmbed } from '@ndla/ui';
|
|
11
11
|
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
12
|
-
export var
|
|
12
|
+
export var relatedContentEmbedPlugin = function relatedContentEmbedPlugin(element, _, opts) {
|
|
13
13
|
var props = attributesToProps(element.attribs);
|
|
14
14
|
var data = JSON.parse(props['data-json']);
|
|
15
15
|
return _jsx(RelatedContentEmbed, {
|
|
@@ -11,7 +11,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
|
|
|
11
11
|
|
|
12
12
|
import { attributesToProps, domToReact } from 'html-react-parser';
|
|
13
13
|
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
14
|
-
export var
|
|
14
|
+
export var h3Plugin = function h3Plugin(node, opts) {
|
|
15
15
|
var props = attributesToProps(node.attribs);
|
|
16
16
|
return (
|
|
17
17
|
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
|
package/es/plugins/index.js
CHANGED
|
@@ -9,27 +9,29 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
|
|
|
9
9
|
*
|
|
10
10
|
*/
|
|
11
11
|
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
20
|
-
import {
|
|
21
|
-
import {
|
|
12
|
+
import { copyParagraphPlugin } from './copyParagraphPlugin';
|
|
13
|
+
import { olPlugin } from './olPlugin';
|
|
14
|
+
import { paragraphPlugin } from './paragraphPlugin';
|
|
15
|
+
import { spanPlugin } from './spanPlugin';
|
|
16
|
+
import { h3Plugin } from './h3Plugin';
|
|
17
|
+
import { mathPlugin } from './mathPlugin';
|
|
18
|
+
import { anchorPlugin } from './oembed/anchorPlugin';
|
|
19
|
+
import { divPlugin } from './divPlugin';
|
|
20
|
+
import { tablePlugin } from './tablePlugin';
|
|
21
|
+
import { asidePlugin } from './asidePlugin';
|
|
22
|
+
import { ulPlugin } from './ulPlugin';
|
|
22
23
|
export var basePlugins = {
|
|
23
|
-
h2:
|
|
24
|
-
h3:
|
|
25
|
-
ol:
|
|
26
|
-
p:
|
|
27
|
-
span:
|
|
28
|
-
math:
|
|
29
|
-
div:
|
|
30
|
-
table:
|
|
31
|
-
aside:
|
|
24
|
+
h2: copyParagraphPlugin,
|
|
25
|
+
h3: h3Plugin,
|
|
26
|
+
ol: olPlugin,
|
|
27
|
+
p: paragraphPlugin,
|
|
28
|
+
span: spanPlugin,
|
|
29
|
+
math: mathPlugin,
|
|
30
|
+
div: divPlugin,
|
|
31
|
+
table: tablePlugin,
|
|
32
|
+
aside: asidePlugin,
|
|
33
|
+
ul: ulPlugin
|
|
32
34
|
};
|
|
33
35
|
export var oembedPlugins = _objectSpread(_objectSpread({}, basePlugins), {}, {
|
|
34
|
-
a:
|
|
36
|
+
a: anchorPlugin
|
|
35
37
|
});
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
|
|
9
9
|
import { attributesToProps } from 'html-react-parser';
|
|
10
10
|
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
11
|
-
export var
|
|
11
|
+
export var mathPlugin = function mathPlugin(node) {
|
|
12
12
|
var props = attributesToProps(node.attribs);
|
|
13
13
|
return _jsx("span", {
|
|
14
14
|
dangerouslySetInnerHTML: {
|
|
@@ -11,7 +11,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
|
|
|
11
11
|
|
|
12
12
|
import { attributesToProps, domToReact } from 'html-react-parser';
|
|
13
13
|
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
14
|
-
export var
|
|
14
|
+
export var anchorPlugin = function anchorPlugin(node, options) {
|
|
15
15
|
var props = attributesToProps(node.attribs);
|
|
16
16
|
return _jsx("a", _objectSpread(_objectSpread({}, props), {}, {
|
|
17
17
|
target: "_blank",
|
|
@@ -11,7 +11,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
|
|
|
11
11
|
|
|
12
12
|
import { attributesToProps, domToReact } from 'html-react-parser';
|
|
13
13
|
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
14
|
-
export var
|
|
14
|
+
export var olPlugin = function olPlugin(node, opts) {
|
|
15
15
|
var _node$attribs$class;
|
|
16
16
|
var props = attributesToProps(node.attribs);
|
|
17
17
|
var letterClass = node.attribs['data-type'] === 'letters' ? 'ol-list--roman' : false;
|
|
@@ -11,7 +11,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
|
|
|
11
11
|
|
|
12
12
|
import { attributesToProps, domToReact } from 'html-react-parser';
|
|
13
13
|
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
14
|
-
export var
|
|
14
|
+
export var paragraphPlugin = function paragraphPlugin(node, opts) {
|
|
15
15
|
if (node.attribs['data-align'] === 'center') {
|
|
16
16
|
var _node$attribs$class;
|
|
17
17
|
var props = attributesToProps(node.attribs);
|
|
@@ -11,7 +11,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
|
|
|
11
11
|
|
|
12
12
|
import { attributesToProps, domToReact } from 'html-react-parser';
|
|
13
13
|
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
14
|
-
export var
|
|
14
|
+
export var spanPlugin = function spanPlugin(node, opts) {
|
|
15
15
|
if (node.attribs['data-size'] === 'large') {
|
|
16
16
|
var _node$attribs$class;
|
|
17
17
|
var props = attributesToProps(node.attribs);
|
|
@@ -12,7 +12,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
|
|
|
12
12
|
import { Table } from '@ndla/ui';
|
|
13
13
|
import { attributesToProps, domToReact } from 'html-react-parser';
|
|
14
14
|
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
15
|
-
export var
|
|
15
|
+
export var tablePlugin = function tablePlugin(node, opts) {
|
|
16
16
|
var props = attributesToProps(node.attribs);
|
|
17
17
|
return _jsx(Table, _objectSpread(_objectSpread({}, props), {}, {
|
|
18
18
|
children: domToReact(node.children, opts)
|
|
@@ -11,7 +11,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
|
|
|
11
11
|
|
|
12
12
|
import { attributesToProps, domToReact } from 'html-react-parser';
|
|
13
13
|
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
14
|
-
export var
|
|
14
|
+
export var ulPlugin = function ulPlugin(node, opts) {
|
|
15
15
|
if (node.attribs['data-type'] === 'two-column') {
|
|
16
16
|
var _node$attribs$class;
|
|
17
17
|
var props = attributesToProps(node.attribs);
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.asidePlugin = void 0;
|
|
7
7
|
var _htmlReactParser = require("html-react-parser");
|
|
8
8
|
var _ui = require("@ndla/ui");
|
|
9
9
|
var _jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
@@ -15,7 +15,7 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
|
15
15
|
*
|
|
16
16
|
*/
|
|
17
17
|
|
|
18
|
-
var
|
|
18
|
+
var asidePlugin = function asidePlugin(node, opts) {
|
|
19
19
|
if (node.attribs['data-type'] === 'factAside') {
|
|
20
20
|
return (0, _jsxRuntime.jsx)(_ui.FactBoxV2, {
|
|
21
21
|
children: (0, _htmlReactParser.domToReact)(node.children, opts)
|
|
@@ -29,4 +29,4 @@ var AsidePlugin = function AsidePlugin(node, opts) {
|
|
|
29
29
|
}
|
|
30
30
|
return null;
|
|
31
31
|
};
|
|
32
|
-
exports.
|
|
32
|
+
exports.asidePlugin = asidePlugin;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.copyParagraphPlugin = void 0;
|
|
7
7
|
var _ui = require("@ndla/ui");
|
|
8
8
|
var _htmlReactParser = require("html-react-parser");
|
|
9
9
|
var _jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
@@ -15,10 +15,10 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
|
15
15
|
*
|
|
16
16
|
*/
|
|
17
17
|
|
|
18
|
-
var
|
|
18
|
+
var copyParagraphPlugin = function copyParagraphPlugin(node, opts) {
|
|
19
19
|
return (0, _jsxRuntime.jsx)(_ui.CopyParagraphButtonV2, {
|
|
20
20
|
copyText: node.attribs['data-text'],
|
|
21
21
|
children: (0, _htmlReactParser.domToReact)(node.children, opts)
|
|
22
22
|
});
|
|
23
23
|
};
|
|
24
|
-
exports.
|
|
24
|
+
exports.copyParagraphPlugin = copyParagraphPlugin;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.divPlugin = void 0;
|
|
7
7
|
var _partition3 = _interopRequireDefault(require("lodash/partition"));
|
|
8
8
|
var _htmlReactParser = require("html-react-parser");
|
|
9
9
|
var _ui = require("@ndla/ui");
|
|
@@ -18,7 +18,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
|
18
18
|
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; }
|
|
19
19
|
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; }
|
|
20
20
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
21
|
-
var
|
|
21
|
+
var divPlugin = function divPlugin(node, opts) {
|
|
22
22
|
if (node.attribs['data-type'] === 'related-content' && node.children.length) {
|
|
23
23
|
var props = (0, _htmlReactParser.attributesToProps)(node.attribs);
|
|
24
24
|
return (0, _jsxRuntime.jsx)(_ui.RelatedArticleListV2, _objectSpread(_objectSpread({}, props), {}, {
|
|
@@ -43,4 +43,4 @@ var DivPlugin = function DivPlugin(node, opts) {
|
|
|
43
43
|
}
|
|
44
44
|
return null;
|
|
45
45
|
};
|
|
46
|
-
exports.
|
|
46
|
+
exports.divPlugin = divPlugin;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.audioEmbedPlugin = void 0;
|
|
7
7
|
var _htmlReactParser = require("html-react-parser");
|
|
8
8
|
var _ui = require("@ndla/ui");
|
|
9
9
|
var _jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
@@ -15,7 +15,7 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
|
15
15
|
*
|
|
16
16
|
*/
|
|
17
17
|
|
|
18
|
-
var
|
|
18
|
+
var audioEmbedPlugin = function audioEmbedPlugin(element, _, opts) {
|
|
19
19
|
var props = (0, _htmlReactParser.attributesToProps)(element.attribs);
|
|
20
20
|
var data = JSON.parse(props['data-json']);
|
|
21
21
|
return (0, _jsxRuntime.jsx)(_ui.AudioEmbed, {
|
|
@@ -23,4 +23,4 @@ var AudioEmbedPlugin = function AudioEmbedPlugin(element, _, opts) {
|
|
|
23
23
|
articlePath: opts.path
|
|
24
24
|
});
|
|
25
25
|
};
|
|
26
|
-
exports.
|
|
26
|
+
exports.audioEmbedPlugin = audioEmbedPlugin;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.brightcoveEmbedPlugin = void 0;
|
|
7
7
|
var _htmlReactParser = require("html-react-parser");
|
|
8
8
|
var _ui = require("@ndla/ui");
|
|
9
9
|
var _jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
@@ -15,11 +15,11 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
|
15
15
|
*
|
|
16
16
|
*/
|
|
17
17
|
|
|
18
|
-
var
|
|
18
|
+
var brightcoveEmbedPlugin = function brightcoveEmbedPlugin(element) {
|
|
19
19
|
var props = (0, _htmlReactParser.attributesToProps)(element.attribs);
|
|
20
20
|
var data = JSON.parse(props['data-json']);
|
|
21
21
|
return (0, _jsxRuntime.jsx)(_ui.BrightcoveEmbed, {
|
|
22
22
|
embed: data
|
|
23
23
|
});
|
|
24
24
|
};
|
|
25
|
-
exports.
|
|
25
|
+
exports.brightcoveEmbedPlugin = brightcoveEmbedPlugin;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.codeEmbedPlugin = void 0;
|
|
7
7
|
var _htmlReactParser = require("html-react-parser");
|
|
8
8
|
var _code = require("@ndla/code");
|
|
9
9
|
var _jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
@@ -15,11 +15,11 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
|
15
15
|
*
|
|
16
16
|
*/
|
|
17
17
|
|
|
18
|
-
var
|
|
18
|
+
var codeEmbedPlugin = function codeEmbedPlugin(element) {
|
|
19
19
|
var props = (0, _htmlReactParser.attributesToProps)(element.attribs);
|
|
20
20
|
var data = JSON.parse(props['data-json']);
|
|
21
21
|
return (0, _jsxRuntime.jsx)(_code.CodeEmbed, {
|
|
22
22
|
embed: data
|
|
23
23
|
});
|
|
24
24
|
};
|
|
25
|
-
exports.
|
|
25
|
+
exports.codeEmbedPlugin = codeEmbedPlugin;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.conceptEmbedPlugin = void 0;
|
|
7
7
|
var _htmlReactParser = require("html-react-parser");
|
|
8
8
|
var _ui = require("@ndla/ui");
|
|
9
9
|
var _jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
@@ -15,7 +15,7 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
|
15
15
|
*
|
|
16
16
|
*/
|
|
17
17
|
|
|
18
|
-
var
|
|
18
|
+
var conceptEmbedPlugin = function conceptEmbedPlugin(element) {
|
|
19
19
|
var props = (0, _htmlReactParser.attributesToProps)(element.attribs);
|
|
20
20
|
var data = JSON.parse(props['data-json']);
|
|
21
21
|
return (0, _jsxRuntime.jsx)(_ui.ConceptEmbed, {
|
|
@@ -23,4 +23,4 @@ var ConceptEmbedPlugin = function ConceptEmbedPlugin(element) {
|
|
|
23
23
|
fullWidth: true
|
|
24
24
|
});
|
|
25
25
|
};
|
|
26
|
-
exports.
|
|
26
|
+
exports.conceptEmbedPlugin = conceptEmbedPlugin;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) 2023-present, NDLA.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the GPLv3 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*
|
|
7
|
+
*/
|
|
8
|
+
import { PluginType } from '../types';
|
|
9
|
+
export declare const conceptListEmbedPlugin: PluginType;
|