Skip to content

Commit

Permalink
Merge branch 'master' into master
Browse files Browse the repository at this point in the history
  • Loading branch information
dbismut authored Jan 2, 2022
2 parents a36b558 + 976e85e commit 5a15d3f
Show file tree
Hide file tree
Showing 3 changed files with 40 additions and 19 deletions.
38 changes: 29 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ A set of components and utilities to work faster with [DatoCMS](https://www.dato

<br /><br />
<a href="https://www.datocms.com/">
<img src="https://www.datocms.com/images/full_logo.svg" height="60">
<img src="https://www.datocms.com/images/full_logo.svg" height="60">
</a>
<br /><br />

Expand Down Expand Up @@ -572,7 +572,6 @@ import SyntaxHighlight from 'components/SyntaxHighlight';
<StructuredText
data={data.blogPost.content}
customRules={[

// Add HTML anchors to heading levels for in-page navigation
renderRule(isHeading, ({ node, children, key }) => {
const HeadingTag = `h${node.level}`;
Expand All @@ -588,7 +587,7 @@ import SyntaxHighlight from 'components/SyntaxHighlight';
</HeadingTag>
);
}),

// Use a custom syntax highlighter component for code blocks
renderRule(isCode, ({ node, key }) => {
return (
Expand All @@ -600,25 +599,27 @@ import SyntaxHighlight from 'components/SyntaxHighlight';
/>
);
}),

// Apply different formatting to top-level paragraphs
renderRule(
isParagraph,
({ adapter: { renderNode }, node, children, key, ancestors }) => {
if (isRoot(ancestors[0])) {
// If this paragraph node is a top-level one, give it a special class
return renderNode('p', { key, className: 'top-level-paragraph-container-example' }, children);
return renderNode(
'p',
{ key, className: 'top-level-paragraph-container-example' },
children,
);
} else {
// Proceed with default paragraph rendering...
// return renderNode('p', { key }, children);

// Or even completely remove the paragraph and directly render the inner children:
return children;
}
}
)


},
),
]}
/>;
```
Expand All @@ -636,3 +637,22 @@ Note: if you override the rules for `inline_item`, `item_link` or `block` nodes,
| 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) => ReactElement \| string \| null` | :x: | Convert a simple string text into React | `(text) => text` |

## Development

This repository contains a number of demos/examples. You can use them to locally test your changes to the package with `npm link`:

```
npm link
cd examples/images-and-seo/vanilla-react
npm link react-datocms
npm run start
```

Now on another terminal you can run:

```
npm run watch
```

This will re-compile the package everytime you make a change, and the example project will pick those changes instantly.
19 changes: 10 additions & 9 deletions package-lock.json

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
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-datocms",
"version": "1.6.7",
"version": "1.6.8",
"types": "dist/types/index.d.ts",
"main": "dist/cjs/index.js",
"module": "dist/esm/index.js",
Expand Down

0 comments on commit 5a15d3f

Please sign in to comment.