Skip to content

Commit

Permalink
Add metaTransformer option
Browse files Browse the repository at this point in the history
  • Loading branch information
@stefanoverna
stefanoverna committed Feb 17, 2021
1 parent 252f5e3 commit 28a8e95
Show file tree
Hide file tree
Showing 6 changed files with 62 additions and 28 deletions.
24 changes: 14 additions & 10 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -451,12 +451,15 @@ export default {
return null;
}
},
renderLinkToRecord: ({ record, children, key, h }) => {
renderLinkToRecord: ({ record, children, key, h, transformedMeta }) => {
switch (record.__typename) {
case "TeamMemberRecord":
return h(
"a",
{ key, attrs: { href: `/team/${record.slug}` } },
{
key,
attrs: { ...transformedMeta, href: `/team/${record.slug}` },
},
children,
);
default:
Expand Down Expand Up @@ -540,11 +543,12 @@ export default {

## Props

| prop | type | required | description | default |
| ------------------ | -------------------------------------------------------- | ----------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ---------------- |
| data | `StructuredTextGraphQlResponse \| DastNode` | :white_check_mark: | The actual [field value](https://www.datocms.com/docs/structured-text/dast) you get from DatoCMS | |
| renderInlineRecord | `({ record }) => VNode \| null` | Only required if document contains `inlineItem` nodes | Convert an `inlineItem` DAST node into React | `[]` |
| renderLinkToRecord | `({ record, children }) => VNode \| null` | Only required if document contains `itemLink` nodes | Convert an `itemLink` DAST node into React | `null` |
| renderBlock | `({ record }) => VNode \| null` | Only required if document contains `block` nodes | Convert a `block` DAST node into React | `null` |
| customRules | `Array<RenderRule>` | :x: | Customize how document is converted in JSX (use `renderRule()` to generate) | `null` |
| renderText | `(text: string, key: string) => VNode \| string \| null` | :x: | Convert a simple string text into React | `(text) => text` |
| prop | type | required | description | default |
| ------------------ | -------------------------------------------------------- | ----------------------------------------------------- | ------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------- |
| data | `StructuredTextGraphQlResponse \| DastNode` | :white_check_mark: | The actual [field value](https://www.datocms.com/docs/structured-text/dast) you get from DatoCMS | |
| renderInlineRecord | `({ record }) => VNode \| null` | Only required if document contains `inlineItem` nodes | Convert an `inlineItem` DAST node into React | `[]` |
| renderLinkToRecord | `({ record, children }) => VNode \| null` | Only required if document contains `itemLink` nodes | Convert an `itemLink` DAST node into React | `null` |
| renderBlock | `({ record }) => VNode \| null` | Only required if document contains `block` nodes | Convert a `block` DAST node into React | `null` |
| metaTransformer | `({ node, meta }) => Object \| null` | :x: | Transform `link` and `itemLink` meta property into HTML props | [See function](https://github.com/datocms/structured-text/blob/main/packages/generic-html-renderer/src/index.ts#L61) |
| customRules | `Array<RenderRule>` | :x: | Customize how document is converted in JSX (use `renderRule()` to generate) | `null` |
| renderText | `(text: string, key: string) => VNode \| string \| null` | :x: | Convert a simple string text into React | `(text) => text` |
26 changes: 13 additions & 13 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
},
"dependencies": {
"@znck/prop-types": "^0.6.3",
"datocms-structured-text-generic-html-renderer": "1.0.1",
"datocms-structured-text-generic-html-renderer": "1.0.6",
"hyphenate-style-name": "^1.0.4"
},
"peerDependencies": {
Expand Down
2 changes: 1 addition & 1 deletion src/StructuredText/__tests__/__snapshots__/index.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ exports[`StructuredText simple dast with no links/blocks with default rules rend
exports[`StructuredText with links/blocks with default rules renders the document 1`] = `
<div>
<h1>This is a<mark>title</mark><a href="/docs/how-to-code">How to code</a><a href="/docs/how-to-code">here!</a></h1>
<h1>This is a<mark>title</mark><a href="/docs/how-to-code">How to code</a><a target="_blank" href="/docs/how-to-code">here!</a></h1>
<figure>
<blockquote>Foo bar.</blockquote>
<figcaption>Mark Smith</figcaption>
Expand Down
26 changes: 23 additions & 3 deletions src/StructuredText/__tests__/index.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,9 @@ describe("StructuredText", () => {
{
type: "itemLink",
item: "123",
meta: {
openInNewWindow: true,
},
children: [{ type: "span", value: "here!" }],
},
],
Expand Down Expand Up @@ -144,19 +147,36 @@ describe("StructuredText", () => {
case "DocPageRecord":
return h(
"a",
{ attrs: { href: `/docs/${record.slug}` }, key },
{
attrs: {
href: `/docs/${record.slug}`,
},
key,
},
record.title,
);
default:
return null;
}
},
renderLinkToRecord: ({ record, children, h, key }) => {
renderLinkToRecord: ({
record,
children,
h,
key,
transformedMeta,
}) => {
switch (record.__typename) {
case "DocPageRecord":
return h(
"a",
{ attrs: { href: `/docs/${record.slug}` }, key },
{
attrs: {
...transformedMeta,
href: `/docs/${record.slug}`,
},
key,
},
children,
);
default:
Expand Down
10 changes: 10 additions & 0 deletions src/StructuredText/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {
render,
renderRule,
defaultMetaTransformer,
} from "datocms-structured-text-generic-html-renderer";
import {
isBlock,
Expand All @@ -20,6 +21,7 @@ export const StructuredText = {
"renderInlineRecord",
"renderLinkToRecord",
"renderBlock",
"metaTransformer",
"customRules",
"renderText",
],
Expand All @@ -32,6 +34,7 @@ export const StructuredText = {
renderBlock,
renderText,
customRules,
metaTransformer,
} = ctx.props;

if (!data) {
Expand Down Expand Up @@ -114,6 +117,12 @@ export const StructuredText = {
key,
h,
adapter,
transformedMeta: node.meta
? (metaTransformer || defaultMetaTransformer)({
node,
meta: node.meta,
})
: null,
});
}),
renderRule(isBlock, ({ node, key }) => {
Expand Down Expand Up @@ -143,6 +152,7 @@ export const StructuredText = {
return renderBlock({ record: item, key, h, adapter });
}),
].concat(customRules || []),
metaTransformer,
);

return result;
Expand Down

1 comment on commit 28a8e95

@vercel
Copy link

@vercel vercel bot commented on 28a8e95 Feb 17, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.