@financial-times/cp-content-pipeline-ui 5.6.4 → 6.0.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/CHANGELOG.md +24 -0
- package/README.md +1 -1
- package/lib/components/ArticleBody/index.d.ts +1 -1
- package/lib/components/ArticleBody/index.js +3 -3
- package/lib/components/ArticleBody/index.js.map +1 -1
- package/lib/components/Body/index.d.ts +6 -4
- package/lib/components/Body/index.js +9 -9
- package/lib/components/Body/index.js.map +1 -1
- package/lib/components/ContentPackageBody/index.d.ts +1 -1
- package/lib/components/ContentPackageBody/index.js +2 -2
- package/lib/components/ContentPackageBody/index.js.map +1 -1
- package/lib/components/LiveBlogBody/index.d.ts +1 -1
- package/lib/components/LiveBlogBody/index.js +2 -2
- package/lib/components/LiveBlogBody/index.js.map +1 -1
- package/lib/components/PodcastBody/index.d.ts +1 -1
- package/lib/components/PodcastBody/index.js +2 -2
- package/lib/components/PodcastBody/index.js.map +1 -1
- package/lib/components/RichText/index.d.ts +3 -3
- package/lib/components/RichText/index.js.map +1 -1
- package/lib/components/Topper/Intro.d.ts +3 -1
- package/lib/components/Topper/Intro.js +2 -2
- package/lib/components/Topper/Intro.js.map +1 -1
- package/lib/components/Topper/index.d.ts +2 -1
- package/lib/components/Topper/index.js +2 -2
- package/lib/components/Topper/index.js.map +1 -1
- package/package.json +3 -3
- package/src/components/ArticleBody/index.tsx +6 -3
- package/src/components/Body/index.tsx +23 -12
- package/src/components/ContentPackageBody/index.tsx +2 -2
- package/src/components/LiveBlogBody/index.tsx +2 -2
- package/src/components/PodcastBody/index.tsx +2 -2
- package/src/components/RichText/index.tsx +8 -13
- package/src/components/Topper/Intro.tsx +8 -1
- package/src/components/Topper/index.tsx +3 -0
- package/tsconfig.tsbuildinfo +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -540,6 +540,30 @@
|
|
|
540
540
|
* @financial-times/cp-content-pipeline-schema bumped from ^2.6.0 to ^2.6.1
|
|
541
541
|
* @financial-times/cp-content-pipeline-styles bumped from ^2.2.3 to ^2.2.4
|
|
542
542
|
|
|
543
|
+
## [6.0.0](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v5.6.4...cp-content-pipeline-ui-v6.0.0) (2024-04-24)
|
|
544
|
+
|
|
545
|
+
|
|
546
|
+
### ⚠ BREAKING CHANGES
|
|
547
|
+
|
|
548
|
+
* split components map into body and rich text components
|
|
549
|
+
|
|
550
|
+
### Features
|
|
551
|
+
|
|
552
|
+
* split components map into body and rich text components ([75ee6dd](https://github.com/Financial-Times/cp-content-pipeline/commit/75ee6ddef02d33f77aed746a7d64c3eb29a9be19))
|
|
553
|
+
|
|
554
|
+
|
|
555
|
+
### Bug Fixes
|
|
556
|
+
|
|
557
|
+
* handle summary link clicks in topper intros ([16dd3ec](https://github.com/Financial-Times/cp-content-pipeline/commit/16dd3ec740b70e32ebb11c68bf874aad5abcfa38))
|
|
558
|
+
|
|
559
|
+
|
|
560
|
+
### Dependencies
|
|
561
|
+
|
|
562
|
+
* The following workspace dependencies were updated
|
|
563
|
+
* devDependencies
|
|
564
|
+
* @financial-times/cp-content-pipeline-client bumped from ^3.4.1 to ^3.4.2
|
|
565
|
+
* @financial-times/cp-content-pipeline-schema bumped from ^2.6.1 to ^2.6.2
|
|
566
|
+
|
|
543
567
|
## [5.6.3](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v5.6.2...cp-content-pipeline-ui-v5.6.3) (2024-04-23)
|
|
544
568
|
|
|
545
569
|
|
package/README.md
CHANGED
|
@@ -48,7 +48,7 @@ const articleData = // obtain data by use of cp-content-pipeline-api directly or
|
|
|
48
48
|
const componentOverrides = {
|
|
49
49
|
Link: removeOutboundLinks,
|
|
50
50
|
};
|
|
51
|
-
<Body content={articleData}
|
|
51
|
+
<Body content={articleData} richTextComponents={componentOverrides}>
|
|
52
52
|
```
|
|
53
53
|
|
|
54
54
|
### Top-Level Components
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { BodyProps } from '../Body';
|
|
3
|
-
export default function ArticleBody({ content,
|
|
3
|
+
export default function ArticleBody({ content, richTextComponents, }: BodyProps): React.JSX.Element | null;
|
|
@@ -28,13 +28,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
28
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
29
|
const react_1 = __importDefault(require("react"));
|
|
30
30
|
const RichText_1 = __importStar(require("../RichText"));
|
|
31
|
-
function ArticleBody({ content,
|
|
31
|
+
function ArticleBody({ content, richTextComponents, }) {
|
|
32
32
|
if (!content?.body?.structured) {
|
|
33
33
|
return null;
|
|
34
34
|
}
|
|
35
|
-
return (react_1.default.createElement(RichText_1.ComponentsContext.Provider, { value:
|
|
35
|
+
return (react_1.default.createElement(RichText_1.ComponentsContext.Provider, { value: richTextComponents },
|
|
36
36
|
react_1.default.createElement("article", { className: "n-content-body" },
|
|
37
|
-
react_1.default.createElement(RichText_1.default, { structuredContent: content.body.structured, components:
|
|
37
|
+
react_1.default.createElement(RichText_1.default, { structuredContent: content.body.structured, components: richTextComponents }))));
|
|
38
38
|
}
|
|
39
39
|
exports.default = ArticleBody;
|
|
40
40
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ArticleBody/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAAyB;AACzB,wDAAyD;AAGzD,SAAwB,WAAW,CAAC,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ArticleBody/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAAyB;AACzB,wDAAyD;AAGzD,SAAwB,WAAW,CAAC,EAClC,OAAO,EACP,kBAAkB,GACR;IACV,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE;QAC9B,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,8BAAC,4BAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,kBAAkB;QACnD,2CAAS,SAAS,EAAC,gBAAgB;YACjC,8BAAC,kBAAQ,IACP,iBAAiB,EAAE,OAAO,CAAC,IAAI,CAAC,UAAU,EAC1C,UAAU,EAAE,kBAAkB,GAC9B,CACM,CACiB,CAC9B,CAAA;AACH,CAAC;AAlBD,8BAkBC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { JSXElementConstructor } from 'react';
|
|
2
2
|
import type { ArticleQuery } from '@financial-times/cp-content-pipeline-client';
|
|
3
|
-
import type {
|
|
3
|
+
import type { RichTextComponentMapRecord } from '../RichText';
|
|
4
4
|
import type { Serialiser } from '@financial-times/x-interaction';
|
|
5
5
|
type PostTrackerConfig = {
|
|
6
6
|
usePostTracker: boolean;
|
|
@@ -8,14 +8,16 @@ type PostTrackerConfig = {
|
|
|
8
8
|
onRead: () => void;
|
|
9
9
|
onError: () => void;
|
|
10
10
|
};
|
|
11
|
+
type BodyComponentMapRecord = Partial<Record<'live-blog-body' | 'article-body' | 'podcast-body' | 'content-package-body', JSXElementConstructor<any>>>;
|
|
11
12
|
export type BodyProps = {
|
|
12
13
|
content: ArticleQuery['content'];
|
|
13
|
-
|
|
14
|
+
richTextComponents?: RichTextComponentMapRecord;
|
|
15
|
+
bodyComponents?: BodyComponentMapRecord;
|
|
14
16
|
showShareButtons?: boolean;
|
|
15
17
|
showBackToTop?: boolean;
|
|
16
18
|
xInteractionSerialiser?: Serialiser;
|
|
17
19
|
postTrackerConfig?: PostTrackerConfig;
|
|
18
20
|
AdSlot?: React.FC;
|
|
19
21
|
};
|
|
20
|
-
export default function Body({ content,
|
|
22
|
+
export default function Body({ content, richTextComponents, bodyComponents, showBackToTop, showShareButtons, xInteractionSerialiser, postTrackerConfig, AdSlot, }: BodyProps): React.JSX.Element | null;
|
|
21
23
|
export {};
|
|
@@ -8,24 +8,24 @@ const ArticleBody_1 = __importDefault(require("../ArticleBody"));
|
|
|
8
8
|
const LiveBlogBody_1 = __importDefault(require("../LiveBlogBody"));
|
|
9
9
|
const PodcastBody_1 = __importDefault(require("../PodcastBody"));
|
|
10
10
|
const ContentPackageBody_1 = __importDefault(require("../ContentPackageBody"));
|
|
11
|
-
function Body({ content,
|
|
11
|
+
function Body({ content, richTextComponents, bodyComponents, showBackToTop, showShareButtons, xInteractionSerialiser, postTrackerConfig, AdSlot, }) {
|
|
12
12
|
if (!content?.body?.structured) {
|
|
13
13
|
return null;
|
|
14
14
|
}
|
|
15
|
-
const LiveBlog =
|
|
16
|
-
const Article =
|
|
17
|
-
const Podcast =
|
|
18
|
-
const ContentPackage =
|
|
15
|
+
const LiveBlog = bodyComponents?.['live-blog-body'] ?? LiveBlogBody_1.default;
|
|
16
|
+
const Article = bodyComponents?.['article-body'] ?? ArticleBody_1.default;
|
|
17
|
+
const Podcast = bodyComponents?.['podcast-body'] ?? PodcastBody_1.default;
|
|
18
|
+
const ContentPackage = bodyComponents?.['content-package-body'] ?? ContentPackageBody_1.default;
|
|
19
19
|
if (content.__typename === 'LiveBlogPackage') {
|
|
20
|
-
return (react_1.default.createElement(LiveBlog, { content: content,
|
|
20
|
+
return (react_1.default.createElement(LiveBlog, { content: content, richTextComponents: richTextComponents, showShareButtons: showShareButtons, showBackToTop: showBackToTop, xInteractionSerialiser: xInteractionSerialiser, postTrackerConfig: postTrackerConfig }));
|
|
21
21
|
}
|
|
22
22
|
else if (content.__typename === 'Audio') {
|
|
23
|
-
return react_1.default.createElement(Podcast, { content: content,
|
|
23
|
+
return react_1.default.createElement(Podcast, { content: content, richTextComponents: richTextComponents });
|
|
24
24
|
}
|
|
25
25
|
else if (content.__typename === 'ContentPackage') {
|
|
26
|
-
return (react_1.default.createElement(ContentPackage, { content: content,
|
|
26
|
+
return (react_1.default.createElement(ContentPackage, { content: content, richTextComponents: richTextComponents, AdSlot: AdSlot }));
|
|
27
27
|
}
|
|
28
|
-
return react_1.default.createElement(Article, { content: content,
|
|
28
|
+
return react_1.default.createElement(Article, { content: content, richTextComponents: richTextComponents });
|
|
29
29
|
}
|
|
30
30
|
exports.default = Body;
|
|
31
31
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Body/index.tsx"],"names":[],"mappings":";;;;;AAAA,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Body/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAoD;AACpD,iEAAwC;AACxC,mEAA0C;AAC1C,iEAAwC;AACxC,+EAAsD;AAgCtD,SAAwB,IAAI,CAAC,EAC3B,OAAO,EACP,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,sBAAsB,EACtB,iBAAiB,EACjB,MAAM,GACI;IACV,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE;QAC9B,OAAO,IAAI,CAAA;KACZ;IAED,MAAM,QAAQ,GAAG,cAAc,EAAE,CAAC,gBAAgB,CAAC,IAAI,sBAAY,CAAA;IACnE,MAAM,OAAO,GAAG,cAAc,EAAE,CAAC,cAAc,CAAC,IAAI,qBAAW,CAAA;IAC/D,MAAM,OAAO,GAAG,cAAc,EAAE,CAAC,cAAc,CAAC,IAAI,qBAAW,CAAA;IAC/D,MAAM,cAAc,GAClB,cAAc,EAAE,CAAC,sBAAsB,CAAC,IAAI,4BAAkB,CAAA;IAEhE,IAAI,OAAO,CAAC,UAAU,KAAK,iBAAiB,EAAE;QAC5C,OAAO,CACL,8BAAC,QAAQ,IACP,OAAO,EAAE,OAAO,EAChB,kBAAkB,EAAE,kBAAkB,EACtC,gBAAgB,EAAE,gBAAgB,EAClC,aAAa,EAAE,aAAa,EAC5B,sBAAsB,EAAE,sBAAsB,EAC9C,iBAAiB,EAAE,iBAAiB,GACpC,CACH,CAAA;KACF;SAAM,IAAI,OAAO,CAAC,UAAU,KAAK,OAAO,EAAE;QACzC,OAAO,8BAAC,OAAO,IAAC,OAAO,EAAE,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,GAAI,CAAA;KAC7E;SAAM,IAAI,OAAO,CAAC,UAAU,KAAK,gBAAgB,EAAE;QAClD,OAAO,CACL,8BAAC,cAAc,IACb,OAAO,EAAE,OAAO,EAChB,kBAAkB,EAAE,kBAAkB,EACtC,MAAM,EAAE,MAAM,GACd,CACH,CAAA;KACF;IAED,OAAO,8BAAC,OAAO,IAAC,OAAO,EAAE,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,GAAI,CAAA;AAC9E,CAAC;AA5CD,uBA4CC"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { BodyProps } from '../Body';
|
|
3
|
-
export default function ContentPackageBody({ content,
|
|
3
|
+
export default function ContentPackageBody({ content, richTextComponents, AdSlot, }: BodyProps): React.JSX.Element | null;
|
|
@@ -10,7 +10,7 @@ const classnames_1 = __importDefault(require("classnames"));
|
|
|
10
10
|
function validTeasers(teasers) {
|
|
11
11
|
return teasers.filter((teaser) => !!teaser);
|
|
12
12
|
}
|
|
13
|
-
function ContentPackageBody({ content,
|
|
13
|
+
function ContentPackageBody({ content, richTextComponents, AdSlot, }) {
|
|
14
14
|
if (content.__typename !== 'ContentPackage') {
|
|
15
15
|
return null;
|
|
16
16
|
}
|
|
@@ -24,7 +24,7 @@ function ContentPackageBody({ content, components, AdSlot, }) {
|
|
|
24
24
|
? 'More from this Special Report'
|
|
25
25
|
: 'More from this Series';
|
|
26
26
|
const secondaryTeaserMods = design?.theme === 'extra' ? ['inverse'] : [];
|
|
27
|
-
return (react_1.default.createElement(RichText_1.ComponentsContext.Provider, { value:
|
|
27
|
+
return (react_1.default.createElement(RichText_1.ComponentsContext.Provider, { value: richTextComponents },
|
|
28
28
|
react_1.default.createElement("article", { id: "site-content", role: "main", "data-attribute": "article-content-body", "data-content-id": content.id, "data-syndicatable": content.canBeSyndicated, className: design && design.theme
|
|
29
29
|
? `design-theme--${design.theme} article`
|
|
30
30
|
: 'article n-content-body js-article__content-body n-content-body' },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ContentPackageBody/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,0CAA+C;AAE/C,0EAGkD;AAElD,4DAAmC;AAInC,SAAS,YAAY,CAAC,OAAkC;IACtD,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,EAA4B,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;AACvE,CAAC;AAqBD,SAAwB,kBAAkB,CAAC,EACzC,OAAO,EACP,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ContentPackageBody/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,5 +3,5 @@ import type { BodyProps } from '../Body';
|
|
|
3
3
|
type LiveBlogBodyProps = BodyProps & {
|
|
4
4
|
xInteractionSerialiser?: any;
|
|
5
5
|
};
|
|
6
|
-
export default function LiveBlogBody({ content,
|
|
6
|
+
export default function LiveBlogBody({ content, richTextComponents, xInteractionSerialiser, showShareButtons, showBackToTop, postTrackerConfig, }: LiveBlogBodyProps): React.JSX.Element | null;
|
|
7
7
|
export {};
|
|
@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
const react_1 = __importDefault(require("react"));
|
|
7
7
|
const RichText_1 = require("../RichText");
|
|
8
8
|
const LiveBlogWrapper_1 = require("../LiveBlogWrapper");
|
|
9
|
-
function LiveBlogBody({ content,
|
|
9
|
+
function LiveBlogBody({ content, richTextComponents, xInteractionSerialiser, showShareButtons, showBackToTop = true, postTrackerConfig, }) {
|
|
10
10
|
if (content.__typename !== 'LiveBlogPackage')
|
|
11
11
|
return null;
|
|
12
12
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
13
13
|
const posts = content.liveBlogPosts || [];
|
|
14
|
-
return (react_1.default.createElement(RichText_1.ComponentsContext.Provider, { value:
|
|
14
|
+
return (react_1.default.createElement(RichText_1.ComponentsContext.Provider, { value: richTextComponents },
|
|
15
15
|
react_1.default.createElement(LiveBlogWrapper_1.LiveBlogWrapper, { articleUrl: `https://www.ft.com/content/${content.id}`, id: "live-blog-wrapper", posts: posts, serialiser: xInteractionSerialiser, showShareButtons: showShareButtons ?? true, backToTop: showBackToTop ? 'o-topper' : undefined, postTrackerConfig: postTrackerConfig })));
|
|
16
16
|
}
|
|
17
17
|
exports.default = LiveBlogBody;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/LiveBlogBody/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AAEzB,0CAA+C;AAC/C,wDAAoD;AASpD,SAAwB,YAAY,CAAC,EACnC,OAAO,EACP,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/LiveBlogBody/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AAEzB,0CAA+C;AAC/C,wDAAoD;AASpD,SAAwB,YAAY,CAAC,EACnC,OAAO,EACP,kBAAkB,EAClB,sBAAsB,EACtB,gBAAgB,EAChB,aAAa,GAAG,IAAI,EACpB,iBAAiB,GACC;IAClB,IAAI,OAAO,CAAC,UAAU,KAAK,iBAAiB;QAAE,OAAO,IAAI,CAAA;IAEzD,8DAA8D;IAC9D,MAAM,KAAK,GAAG,OAAO,CAAC,aAAa,IAAI,EAAE,CAAA;IAEzC,OAAO,CACL,8BAAC,4BAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,kBAAkB;QACnD,8BAAC,iCAAe,IACd,UAAU,EAAE,8BAA8B,OAAO,CAAC,EAAE,EAAE,EACtD,EAAE,EAAC,mBAAmB,EACtB,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,sBAAsB,EAClC,gBAAgB,EAAE,gBAAgB,IAAI,IAAI,EAC1C,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EACjD,iBAAiB,EAAE,iBAAiB,GACpC,CACyB,CAC9B,CAAA;AACH,CAAC;AA1BD,+BA0BC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { BodyProps } from '../Body';
|
|
3
|
-
export default function PodcastBody({ content,
|
|
3
|
+
export default function PodcastBody({ content, richTextComponents, showPlayer, showAccessbilityGuide, }: BodyProps & {
|
|
4
4
|
showPlayer?: boolean;
|
|
5
5
|
showAccessbilityGuide?: boolean;
|
|
6
6
|
}): React.JSX.Element | null;
|
|
@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
const react_1 = __importDefault(require("react"));
|
|
7
7
|
const RichText_1 = __importDefault(require("../RichText"));
|
|
8
|
-
function PodcastBody({ content,
|
|
8
|
+
function PodcastBody({ content, richTextComponents, showPlayer = true, showAccessbilityGuide = true, }) {
|
|
9
9
|
if (content.__typename !== 'Audio') {
|
|
10
10
|
return null;
|
|
11
11
|
}
|
|
@@ -23,7 +23,7 @@ function PodcastBody({ content, components, showPlayer = true, showAccessbilityG
|
|
|
23
23
|
react_1.default.createElement("a", { href: podcast.url }, "download the MP3 file"),
|
|
24
24
|
" to play locally.")))),
|
|
25
25
|
content.body?.structured && (react_1.default.createElement("article", { className: "n-content-body" },
|
|
26
|
-
react_1.default.createElement(RichText_1.default, { structuredContent: content.body.structured, components:
|
|
26
|
+
react_1.default.createElement(RichText_1.default, { structuredContent: content.body.structured, components: richTextComponents }),
|
|
27
27
|
showAccessbilityGuide && (react_1.default.createElement("p", null,
|
|
28
28
|
react_1.default.createElement("a", { href: "/accessibility#podcast-transcriptions" }, "View our accessibility guide"),
|
|
29
29
|
"."))))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/PodcastBody/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,2DAAkC;AAGlC,SAAwB,WAAW,CAAC,EAClC,OAAO,EACP,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/PodcastBody/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,2DAAkC;AAGlC,SAAwB,WAAW,CAAC,EAClC,OAAO,EACP,kBAAkB,EAClB,UAAU,GAAG,IAAI,EACjB,qBAAqB,GAAG,IAAI,GAC0C;IACtE,IAAI,OAAO,CAAC,UAAU,KAAK,OAAO,EAAE;QAClC,OAAO,IAAI,CAAA;KACZ;IACD,MAAM,gBAAgB,GAAG,YAAY,CAAA;IACrC,MAAM,OAAO,GAAG,OAAO,CAAC,KAAK,EAAE,IAAI,CACjC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,gBAAgB,CACjD,CAAA;IAED,OAAO,CACL;QACE,yEAAyE;QACzE,SAAS,EAAC,+DAA+D,oBAC1D,cAAc,oBACd,sBAAsB;QAEpC,UAAU,IAAI,OAAO,EAAE,GAAG,IAAI,CAC7B,uCAAK,SAAS,EAAC,gBAAgB;YAC7B,yCACE,QAAQ,4BACS,SAAS,wBACP,SAAS,qBACX,OAAO,CAAC,EAAE;gBAG3B,0CAAQ,GAAG,EAAE,OAAO,CAAC,GAAG,EAAE,IAAI,EAAE,gBAAgB,GAAI;gBACpD;;oBACoE,GAAG;oBACrE,qCAAG,IAAI,EAAE,OAAO,CAAC,GAAG,4BAA2B;wCAC7C,CACE,CACJ,CACP;QAEA,OAAO,CAAC,IAAI,EAAE,UAAU,IAAI,CAC3B,2CAAS,SAAS,EAAC,gBAAgB;YACjC,8BAAC,kBAAQ,IACP,iBAAiB,EAAE,OAAO,CAAC,IAAI,CAAC,UAAU,EAC1C,UAAU,EAAE,kBAAkB,GAC9B;YACD,qBAAqB,IAAI,CACxB;gBACE,qCAAG,IAAI,EAAC,uCAAuC,mCAE3C;oBAEF,CACL,CACO,CACX,CACG,CACP,CAAA;AACH,CAAC;AAzDD,8BAyDC"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import React, { JSXElementConstructor } from 'react';
|
|
2
2
|
import type { StructuredContentFragment } from '@financial-times/cp-content-pipeline-client';
|
|
3
3
|
import { ContentTreeWorkarounds } from '@financial-times/cp-content-pipeline-schema';
|
|
4
|
-
export type
|
|
5
|
-
export declare const ComponentsContext: React.Context<Partial<Record<"blockquote" | "body" | "cite" | "link" | "strong" | "table" | "video" | "clip" | "text" | "layout" | "heading" | "flourish" | "recommended" | "image-set" | "paragraph" | "pullquote" | "tweet" | "big-number" | "table-caption" | "table-body" | "table-footer" | "root" | "break" | "thematic-break" | "emphasis" | "strikethrough" | "list" | "list-item" | "clip-set" | "scrolly-block" | "scrolly-section" | "scrolly-copy" | "scrolly-heading" | "scrolly-image" | "layout-slot" | "layout-image" | "table-row" | "table-cell" | "youtube-video" | "main-image" | "raw-image" | "main-image-raw" | "author-link" | "
|
|
4
|
+
export type RichTextComponentMapRecord = Partial<Record<ContentTreeWorkarounds.AnyNode['type'] | 'fallback', JSXElementConstructor<any>>>;
|
|
5
|
+
export declare const ComponentsContext: React.Context<Partial<Record<"blockquote" | "body" | "cite" | "link" | "strong" | "table" | "video" | "clip" | "text" | "layout" | "heading" | "flourish" | "recommended" | "image-set" | "paragraph" | "pullquote" | "tweet" | "big-number" | "table-caption" | "table-body" | "table-footer" | "root" | "break" | "thematic-break" | "emphasis" | "strikethrough" | "list" | "list-item" | "clip-set" | "scrolly-block" | "scrolly-section" | "scrolly-copy" | "scrolly-heading" | "scrolly-image" | "layout-slot" | "layout-image" | "table-row" | "table-cell" | "youtube-video" | "main-image" | "raw-image" | "main-image-raw" | "author-link" | "fallback", React.JSXElementConstructor<any>>> | undefined>;
|
|
6
6
|
type WithOptionalProperty<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
|
|
7
7
|
export type RichTextProps = {
|
|
8
8
|
structuredContent: WithOptionalProperty<StructuredContentFragment, 'references'>;
|
|
9
|
-
components?:
|
|
9
|
+
components?: RichTextComponentMapRecord;
|
|
10
10
|
};
|
|
11
11
|
export default function RichText({ structuredContent, components, }: RichTextProps): React.JSX.Element | null;
|
|
12
12
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/RichText/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,+CAKc;AACd,iEAAwC;AACxC,wDAAqD;AACrD,sCAA8C;AAC9C,6DAAoC;AACpC,qDAA4B;AAC5B,2DAAkC;AAClC,yDAAgC;AAChC,6DAAoC;AACpC,qDAA4B;AAC5B,qDAA4B;AAC5B,mDAA0B;AAC1B,6DAAoC;AAEpC,uDAc0B;AAI1B,mEAA0C;AAC1C,kDAA8C;AAC9C,sDAK0B;AAC1B,iEAA6D;AAC7D,mEAA0C;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/RichText/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { IntroFragment } from '@financial-times/cp-content-pipeline-client';
|
|
3
|
-
export default function Intro({ structured, source }: IntroFragment
|
|
3
|
+
export default function Intro({ structured, source, handleSummaryLinkClick, }: IntroFragment & {
|
|
4
|
+
handleSummaryLinkClick?: (event: React.MouseEvent<HTMLElement>) => void;
|
|
5
|
+
}): React.JSX.Element;
|
|
@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
const react_1 = __importDefault(require("react"));
|
|
7
7
|
const RichText_1 = __importDefault(require("../RichText"));
|
|
8
8
|
const classnames_1 = __importDefault(require("classnames"));
|
|
9
|
-
function Intro({ structured, source }) {
|
|
10
|
-
return (react_1.default.createElement("div", { className: (0, classnames_1.default)(`o-topper__${source}`, {
|
|
9
|
+
function Intro({ structured, source, handleSummaryLinkClick, }) {
|
|
10
|
+
return (react_1.default.createElement("div", { onClick: handleSummaryLinkClick, className: (0, classnames_1.default)(`o-topper__${source}`, {
|
|
11
11
|
'o-topper__summary--body': source === 'summary',
|
|
12
12
|
}) },
|
|
13
13
|
react_1.default.createElement(RichText_1.default, { structuredContent: structured })));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Intro.js","sourceRoot":"","sources":["../../../src/components/Topper/Intro.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,2DAAkC;AAElC,4DAAmC;AAEnC,SAAwB,KAAK,CAAC,
|
|
1
|
+
{"version":3,"file":"Intro.js","sourceRoot":"","sources":["../../../src/components/Topper/Intro.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,2DAAkC;AAElC,4DAAmC;AAEnC,SAAwB,KAAK,CAAC,EAC5B,UAAU,EACV,MAAM,EACN,sBAAsB,GAGvB;IACC,OAAO,CACL,uCACE,OAAO,EAAE,sBAAsB,EAC/B,SAAS,EAAE,IAAA,oBAAU,EAAC,aAAa,MAAM,EAAE,EAAE;YAC3C,yBAAyB,EAAE,MAAM,KAAK,SAAS;SAChD,CAAC;QAEF,8BAAC,kBAAQ,IAAC,iBAAiB,EAAE,UAAU,GAAI,CACvC,CACP,CAAA;AACH,CAAC;AAjBD,wBAiBC"}
|
|
@@ -6,6 +6,7 @@ type TopperProps = {
|
|
|
6
6
|
slot?: string;
|
|
7
7
|
followButtonSlot?: FollowButtonSlot;
|
|
8
8
|
readNextSlot?: () => ReactElement;
|
|
9
|
+
handleSummaryLinkClick?: (event: React.MouseEvent<HTMLElement>) => void;
|
|
9
10
|
};
|
|
10
|
-
export default function Topper({ content, slot, followButtonSlot, readNextSlot, }: TopperProps): React.JSX.Element | null;
|
|
11
|
+
export default function Topper({ content, slot, followButtonSlot, readNextSlot, handleSummaryLinkClick, }: TopperProps): React.JSX.Element | null;
|
|
11
12
|
export {};
|
|
@@ -13,7 +13,7 @@ const Headshot_1 = __importDefault(require("./Headshot"));
|
|
|
13
13
|
const Columnist_1 = __importDefault(require("./Columnist"));
|
|
14
14
|
const LiveBlogIndicator_1 = __importDefault(require("./LiveBlogIndicator"));
|
|
15
15
|
const classnames_1 = __importDefault(require("classnames"));
|
|
16
|
-
function Topper({ content, slot, followButtonSlot, readNextSlot, }) {
|
|
16
|
+
function Topper({ content, slot, followButtonSlot, readNextSlot, handleSummaryLinkClick, }) {
|
|
17
17
|
const { topper } = content;
|
|
18
18
|
if (!topper) {
|
|
19
19
|
return null;
|
|
@@ -60,7 +60,7 @@ function Topper({ content, slot, followButtonSlot, readNextSlot, }) {
|
|
|
60
60
|
react_1.default.createElement(LiveBlogIndicator_1.default, { realtime: content.realtime ?? undefined, lastUpdatedDateTime: getMostRecentPostPublishedDate() }))) : (react_1.default.createElement(Tags_1.default, { __typename: topper.__typename, isPackage: isPackage, displayConcept: topper.displayConcept ?? undefined, brandConcept: ('brandConcept' in topper && topper.brandConcept) || undefined, genreConcept: ('genreConcept' in topper && topper.genreConcept) || undefined, headshot: hasHeadshot || undefined, followButtonVariant: topper.followButtonVariant, FollowButtonSlot: followButtonSlot })),
|
|
61
61
|
react_1.default.createElement(Headline_1.default, { headline: topper.headline, isLargeHeadline: ('isLargeHeadline' in topper && topper.isLargeHeadline) ??
|
|
62
62
|
undefined }),
|
|
63
|
-
topper.intro && (react_1.default.createElement(Intro_1.default, { structured: topper.intro.structured, source: topper.intro.source })),
|
|
63
|
+
topper.intro && (react_1.default.createElement(Intro_1.default, { structured: topper.intro.structured, source: topper.intro.source, handleSummaryLinkClick: handleSummaryLinkClick })),
|
|
64
64
|
hasHeadshot && content.__typename !== 'Audio' && (react_1.default.createElement(Headshot_1.default, { url: topper.headshot, altText: headshotAltText })),
|
|
65
65
|
isOpinion && topper.columnist && (react_1.default.createElement(Columnist_1.default, { authorConcept: topper.columnist, followButtonVariant: topper.followButtonVariant, followButtonSlot: followButtonSlot }))),
|
|
66
66
|
readNextSlot && (react_1.default.createElement("div", { className: "o-topper__read-next" }, readNextSlot())),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Topper/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA2C;AAC3C,wDAA+B;AAC/B,kDAAyB;AACzB,0DAAiC;AACjC,oDAA2B;AAC3B,wDAA+B;AAC/B,0DAAiC;AACjC,4DAAmC;AACnC,4EAAmD;AAEnD,4DAAmC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Topper/index.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@financial-times/cp-content-pipeline-ui",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "6.0.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -17,8 +17,8 @@
|
|
|
17
17
|
"@babel/preset-react": "^7.22.5",
|
|
18
18
|
"@dotcom-tool-kit/npm": "^3.1.4",
|
|
19
19
|
"@financial-times/content-tree": "github:financial-times/content-tree#14370e3",
|
|
20
|
-
"@financial-times/cp-content-pipeline-client": "^3.4.
|
|
21
|
-
"@financial-times/cp-content-pipeline-schema": "^2.6.
|
|
20
|
+
"@financial-times/cp-content-pipeline-client": "^3.4.2",
|
|
21
|
+
"@financial-times/cp-content-pipeline-schema": "^2.6.2",
|
|
22
22
|
"@financial-times/cp-content-pipeline-styles": "^2.2.4",
|
|
23
23
|
"@financial-times/n-scrollytelling-image": "^1.1.0",
|
|
24
24
|
"@financial-times/o-colors": "^6.6.2",
|
|
@@ -2,17 +2,20 @@ import React from 'react'
|
|
|
2
2
|
import RichText, { ComponentsContext } from '../RichText'
|
|
3
3
|
import type { BodyProps } from '../Body'
|
|
4
4
|
|
|
5
|
-
export default function ArticleBody({
|
|
5
|
+
export default function ArticleBody({
|
|
6
|
+
content,
|
|
7
|
+
richTextComponents,
|
|
8
|
+
}: BodyProps) {
|
|
6
9
|
if (!content?.body?.structured) {
|
|
7
10
|
return null
|
|
8
11
|
}
|
|
9
12
|
|
|
10
13
|
return (
|
|
11
|
-
<ComponentsContext.Provider value={
|
|
14
|
+
<ComponentsContext.Provider value={richTextComponents}>
|
|
12
15
|
<article className="n-content-body">
|
|
13
16
|
<RichText
|
|
14
17
|
structuredContent={content.body.structured}
|
|
15
|
-
components={
|
|
18
|
+
components={richTextComponents}
|
|
16
19
|
/>
|
|
17
20
|
</article>
|
|
18
21
|
</ComponentsContext.Provider>
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import React from 'react'
|
|
1
|
+
import React, { JSXElementConstructor } from 'react'
|
|
2
2
|
import ArticleBody from '../ArticleBody'
|
|
3
3
|
import LiveBlogBody from '../LiveBlogBody'
|
|
4
4
|
import PodcastBody from '../PodcastBody'
|
|
5
5
|
import ContentPackageBody from '../ContentPackageBody'
|
|
6
6
|
import type { ArticleQuery } from '@financial-times/cp-content-pipeline-client'
|
|
7
|
-
import type {
|
|
7
|
+
import type { RichTextComponentMapRecord } from '../RichText'
|
|
8
8
|
import type { Serialiser } from '@financial-times/x-interaction'
|
|
9
9
|
|
|
10
10
|
type PostTrackerConfig = {
|
|
@@ -14,9 +14,19 @@ type PostTrackerConfig = {
|
|
|
14
14
|
onError: () => void
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
+
type BodyComponentMapRecord = Partial<
|
|
18
|
+
Record<
|
|
19
|
+
'live-blog-body' | 'article-body' | 'podcast-body' | 'content-package-body',
|
|
20
|
+
// using any here, no easy way to make a type that works for all the potential renderers
|
|
21
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
22
|
+
JSXElementConstructor<any>
|
|
23
|
+
>
|
|
24
|
+
>
|
|
25
|
+
|
|
17
26
|
export type BodyProps = {
|
|
18
27
|
content: ArticleQuery['content']
|
|
19
|
-
|
|
28
|
+
richTextComponents?: RichTextComponentMapRecord
|
|
29
|
+
bodyComponents?: BodyComponentMapRecord
|
|
20
30
|
showShareButtons?: boolean
|
|
21
31
|
showBackToTop?: boolean
|
|
22
32
|
xInteractionSerialiser?: Serialiser
|
|
@@ -26,7 +36,8 @@ export type BodyProps = {
|
|
|
26
36
|
|
|
27
37
|
export default function Body({
|
|
28
38
|
content,
|
|
29
|
-
|
|
39
|
+
richTextComponents,
|
|
40
|
+
bodyComponents,
|
|
30
41
|
showBackToTop,
|
|
31
42
|
showShareButtons,
|
|
32
43
|
xInteractionSerialiser,
|
|
@@ -37,17 +48,17 @@ export default function Body({
|
|
|
37
48
|
return null
|
|
38
49
|
}
|
|
39
50
|
|
|
40
|
-
const LiveBlog =
|
|
41
|
-
const Article =
|
|
42
|
-
const Podcast =
|
|
51
|
+
const LiveBlog = bodyComponents?.['live-blog-body'] ?? LiveBlogBody
|
|
52
|
+
const Article = bodyComponents?.['article-body'] ?? ArticleBody
|
|
53
|
+
const Podcast = bodyComponents?.['podcast-body'] ?? PodcastBody
|
|
43
54
|
const ContentPackage =
|
|
44
|
-
|
|
55
|
+
bodyComponents?.['content-package-body'] ?? ContentPackageBody
|
|
45
56
|
|
|
46
57
|
if (content.__typename === 'LiveBlogPackage') {
|
|
47
58
|
return (
|
|
48
59
|
<LiveBlog
|
|
49
60
|
content={content}
|
|
50
|
-
|
|
61
|
+
richTextComponents={richTextComponents}
|
|
51
62
|
showShareButtons={showShareButtons}
|
|
52
63
|
showBackToTop={showBackToTop}
|
|
53
64
|
xInteractionSerialiser={xInteractionSerialiser}
|
|
@@ -55,16 +66,16 @@ export default function Body({
|
|
|
55
66
|
/>
|
|
56
67
|
)
|
|
57
68
|
} else if (content.__typename === 'Audio') {
|
|
58
|
-
return <Podcast content={content}
|
|
69
|
+
return <Podcast content={content} richTextComponents={richTextComponents} />
|
|
59
70
|
} else if (content.__typename === 'ContentPackage') {
|
|
60
71
|
return (
|
|
61
72
|
<ContentPackage
|
|
62
73
|
content={content}
|
|
63
|
-
|
|
74
|
+
richTextComponents={richTextComponents}
|
|
64
75
|
AdSlot={AdSlot}
|
|
65
76
|
/>
|
|
66
77
|
)
|
|
67
78
|
}
|
|
68
79
|
|
|
69
|
-
return <Article content={content}
|
|
80
|
+
return <Article content={content} richTextComponents={richTextComponents} />
|
|
70
81
|
}
|
|
@@ -35,7 +35,7 @@ type SecondaryTeasersProps = {
|
|
|
35
35
|
|
|
36
36
|
export default function ContentPackageBody({
|
|
37
37
|
content,
|
|
38
|
-
|
|
38
|
+
richTextComponents,
|
|
39
39
|
AdSlot,
|
|
40
40
|
}: BodyProps) {
|
|
41
41
|
if (content.__typename !== 'ContentPackage') {
|
|
@@ -58,7 +58,7 @@ export default function ContentPackageBody({
|
|
|
58
58
|
const secondaryTeaserMods = design?.theme === 'extra' ? ['inverse'] : []
|
|
59
59
|
|
|
60
60
|
return (
|
|
61
|
-
<ComponentsContext.Provider value={
|
|
61
|
+
<ComponentsContext.Provider value={richTextComponents}>
|
|
62
62
|
<article
|
|
63
63
|
id="site-content"
|
|
64
64
|
role="main"
|
|
@@ -12,7 +12,7 @@ type LiveBlogBodyProps = BodyProps & {
|
|
|
12
12
|
|
|
13
13
|
export default function LiveBlogBody({
|
|
14
14
|
content,
|
|
15
|
-
|
|
15
|
+
richTextComponents,
|
|
16
16
|
xInteractionSerialiser,
|
|
17
17
|
showShareButtons,
|
|
18
18
|
showBackToTop = true,
|
|
@@ -24,7 +24,7 @@ export default function LiveBlogBody({
|
|
|
24
24
|
const posts = content.liveBlogPosts || []
|
|
25
25
|
|
|
26
26
|
return (
|
|
27
|
-
<ComponentsContext.Provider value={
|
|
27
|
+
<ComponentsContext.Provider value={richTextComponents}>
|
|
28
28
|
<LiveBlogWrapper
|
|
29
29
|
articleUrl={`https://www.ft.com/content/${content.id}`}
|
|
30
30
|
id="live-blog-wrapper"
|
|
@@ -4,7 +4,7 @@ import type { BodyProps } from '../Body'
|
|
|
4
4
|
|
|
5
5
|
export default function PodcastBody({
|
|
6
6
|
content,
|
|
7
|
-
|
|
7
|
+
richTextComponents,
|
|
8
8
|
showPlayer = true,
|
|
9
9
|
showAccessbilityGuide = true,
|
|
10
10
|
}: BodyProps & { showPlayer?: boolean; showAccessbilityGuide?: boolean }) {
|
|
@@ -45,7 +45,7 @@ export default function PodcastBody({
|
|
|
45
45
|
<article className="n-content-body">
|
|
46
46
|
<RichText
|
|
47
47
|
structuredContent={content.body.structured}
|
|
48
|
-
components={
|
|
48
|
+
components={richTextComponents}
|
|
49
49
|
/>
|
|
50
50
|
{showAccessbilityGuide && (
|
|
51
51
|
<p>
|
|
@@ -47,23 +47,18 @@ import {
|
|
|
47
47
|
import { ScrollyImage } from '../Scrollytelling/ScrollyImage'
|
|
48
48
|
import YoutubeVideo from '../YoutubeVideo'
|
|
49
49
|
|
|
50
|
-
export type
|
|
50
|
+
export type RichTextComponentMapRecord = Partial<
|
|
51
51
|
Record<
|
|
52
|
-
|
|
53
|
-
| 'live-blog-body'
|
|
54
|
-
| 'article-body'
|
|
55
|
-
| 'podcast-body'
|
|
56
|
-
| 'content-package-body'
|
|
57
|
-
| 'fallback',
|
|
52
|
+
ContentTreeWorkarounds.AnyNode['type'] | 'fallback',
|
|
58
53
|
// using any here, no easy way to make a type that works for all the potential renderers
|
|
59
54
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
60
55
|
JSXElementConstructor<any>
|
|
61
56
|
>
|
|
62
57
|
>
|
|
63
58
|
|
|
64
|
-
export const ComponentsContext = createContext<
|
|
65
|
-
|
|
66
|
-
)
|
|
59
|
+
export const ComponentsContext = createContext<
|
|
60
|
+
RichTextComponentMapRecord | undefined
|
|
61
|
+
>({})
|
|
67
62
|
|
|
68
63
|
type WithOptionalProperty<T, K extends keyof T> = Pick<Partial<T>, K> &
|
|
69
64
|
Omit<T, K>
|
|
@@ -74,14 +69,14 @@ export type RichTextProps = {
|
|
|
74
69
|
StructuredContentFragment,
|
|
75
70
|
'references'
|
|
76
71
|
>
|
|
77
|
-
components?:
|
|
72
|
+
components?: RichTextComponentMapRecord
|
|
78
73
|
}
|
|
79
74
|
|
|
80
75
|
/* This will be the default set of components we provide, that most
|
|
81
76
|
* clients can use to render a workable article page
|
|
82
77
|
*/
|
|
83
78
|
|
|
84
|
-
const componentMap:
|
|
79
|
+
const componentMap: RichTextComponentMapRecord = {
|
|
85
80
|
fallback: (props) => props.children,
|
|
86
81
|
'big-number': BigNumber,
|
|
87
82
|
cite: Cite,
|
|
@@ -135,7 +130,7 @@ const RichTextChild = ({
|
|
|
135
130
|
parentIndex,
|
|
136
131
|
}: {
|
|
137
132
|
node: ContentTreeWorkarounds.AnyNode
|
|
138
|
-
components:
|
|
133
|
+
components: RichTextComponentMapRecord
|
|
139
134
|
references: StructuredContentFragment['references']
|
|
140
135
|
parentIndex: number
|
|
141
136
|
}) => {
|