Skip to content

Commit b7f16fa

Browse files
jpedroschmitzjpedroschmitz
authored
feat: html-renderer (#77)
1 parent 3f454e8 commit b7f16fa

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

67 files changed

+2839
-316
lines changed

‎.changeset/gold-jars-compete.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
'@graphcms/rich-text-react-renderer': minor
3+
---
4+
5+
This update has no new features, only new types.
6+
7+
⚡️ New
8+
9+
- Add `NodeRendererType` type
10+
- Add `RichTextProps` type
11+
- Add `DefaultElementProps` type
12+
- Add `ClassRendererProps` type
13+
- Add `LinkRendererProps` type

‎.changeset/shiny-horses-repeat.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
'@graphcms/rich-text-types': minor
3+
---
4+
5+
⚠️ This release has breaking changes!
6+
7+
⚡️ New
8+
9+
- Add `isEmpty` utility function
10+
- Add `EmptyElementsToRemove` enum as a replacement for `RemoveEmptyElementType`
11+
- Add `elementTypeKeys`
12+
13+
⚠️ Breaking Changes
14+
15+
> The `RichTextProps`, `ClassRendererProps`, `LinkRendererProps`, `DefaultElementProps` and the `NodeRendererType` type are now available on the `@graphcms/rich-text-react-renderer` package.
16+
17+
- Remove `RichTextProps` type
18+
- Remove `NodeRendererType` type
19+
- Remove `RemoveEmptyElementType` type
20+
- Remove `ClassRendererProps` type
21+
- Remove `LinkRendererProps` type
22+
- Remove `DefaultElementProps` type

‎.changeset/tricky-apples-collect.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
'@graphcms/rich-text-html-renderer': minor
3+
---
4+
5+
Initial version of the `html-renderer` for Rich Text content.
6+
7+
## Features
8+
9+
- `astToHtmlString` function for returning HTML
10+
- Types for the package
11+
- Vue and Svelte examples

‎LICENSE.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MIT License
22

3-
Copyright (c) 2021 GraphCMS
3+
Copyright (c) 2022 GraphCMS
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎README.md‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,17 @@ A set of companion packages for GraphCMS's Rich Text Field
44

55
## ✨ Packages
66

7-
- [rich-text-react-renderer](./packages/react-renderer): Render Rich Text content from GraphCMS in React applications;
7+
- [rich-text-html-renderer](./packages/html-renderer): Framework agnostic Rich Text renderer.
8+
- [rich-text-react-renderer](./packages/react-renderer): Out of the box Rich Text renderer for React;
89
- [rich-text-types](./packages/types): TypeScript definitions for the GraphCMS Rich Text field type;
910
- [html-to-slate-ast](./packages/html-to-slate-ast): HTML to Slate AST converter for the GraphCMS's RichTextAST format.
1011

12+
## ⚡️ Examples (Rich Text Renderer)
13+
14+
- [Vue](./examples/vue)
15+
- [Svelte](./examples/svelte/)
16+
- [React](./examples/react/)
17+
1118
## 🤝 Contributing
1219

1320
Thanks for being interested in contributing! We're so glad you want to help! All types of contributions are welcome, such as bug fixes, issues, or feature requests. Also, don't forget to check the roadmap. See [`CONTRIBUTING.md`](./.github/CONTRIBUTING.md) for ways to get started.

examples/react/content.ts renamed to examples/content-example.ts

File renamed without changes.

‎examples/react/.gitignore‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
110
node_modules
2-
.cache
3-
dist
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎examples/react/index.html‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,10 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7-
<title>Playground</title>
6+
<title>React Example</title>
87
</head>
9-
108
<body>
119
<div id="root"></div>
12-
<script src="./index.tsx"></script>
10+
<script type="module" src="/src/main.tsx"></script>
1311
</body>
1412
</html>

‎examples/react/package.json‎

Lines changed: 14 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,23 @@
11
{
2-
"name": "@graphcms/react-example",
3-
"version": "1.0.0",
4-
"main": "index.js",
2+
"name": "react-example",
53
"private": true,
6-
"license": "MIT",
4+
"version": "0.0.0",
75
"scripts": {
8-
"start": "parcel index.html",
9-
"build": "parcel build index.html",
10-
"watch": "parcel watch index.html"
6+
"dev": "vite",
7+
"build": "tsc && vite build",
8+
"preview": "vite preview"
119
},
1210
"dependencies": {
13-
"prismjs": "^1.24.1",
14-
"react-app-polyfill": "^1.0.0"
15-
},
16-
"alias": {
17-
"@graphcms/rich-text-types": "../../packages/types",
18-
"@graphcms/rich-text-react-renderer": "../../packages/react-renderer",
19-
"react": "../../node_modules/react",
20-
"react-dom": "../../node_modules/react-dom/profiling",
21-
"scheduler/tracing": "../../node_modules/scheduler/tracing-profiling"
11+
"prismjs": "^1.27.0",
12+
"react": "^17.0.2",
13+
"react-dom": "^17.0.2"
2214
},
2315
"devDependencies": {
24-
"@types/react": "^17.0.5",
25-
"@types/react-dom": "^17.0.3",
26-
"parcel": "1.12.3",
27-
"typescript": "^4.2.4"
16+
"@types/prismjs": "^1.26.0",
17+
"@types/react": "^17.0.33",
18+
"@types/react-dom": "^17.0.10",
19+
"@vitejs/plugin-react": "^1.0.7",
20+
"typescript": "^4.5.4",
21+
"vite": "^2.8.0"
2822
}
2923
}

examples/react/index.tsx renamed to examples/react/src/App.tsx

Lines changed: 9 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,23 @@
1-
import 'react-app-polyfill/ie11';
2-
import * as React from 'react';
3-
import * as ReactDOM from 'react-dom';
1+
import React from 'react';
2+
43
import { RichText } from '@graphcms/rich-text-react-renderer';
4+
55
import Prism from 'prismjs';
66
import 'prismjs/plugins/line-numbers/prism-line-numbers';
77
import 'prismjs/themes/prism-tomorrow.css';
88
import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
99

10-
import { content, references } from './content';
10+
import { content, references } from '../../content-example';
1111

12-
const App = () => {
12+
export default function App() {
1313
React.useEffect(() => {
1414
Prism.highlightAll();
1515
}, []);
1616

1717
return (
1818
<div>
19+
<h1>React example</h1>
20+
1921
<RichText
2022
content={content}
2123
references={references}
@@ -37,6 +39,7 @@ const App = () => {
3739
href={href}
3840
target={openInNewTab ? '_blank' : '_self'}
3941
style={{ color: 'green' }}
42+
rel="noreferrer"
4043
>
4144
{children}
4245
</a>
@@ -45,19 +48,6 @@ const App = () => {
4548
<h2 style={{ color: 'darkcyan' }}>{children}</h2>
4649
),
4750
bold: ({ children }) => <strong>{children}</strong>,
48-
// code_block: ({ children }) => {
49-
// return (
50-
// <pre
51-
// style={{
52-
// backgroundColor: 'darkcyan',
53-
// padding: '12px',
54-
// borderRadius: '4px',
55-
// }}
56-
// >
57-
// {children}
58-
// </pre>
59-
// );
60-
// },
6151
code_block: ({ children }) => {
6252
return (
6353
<pre className="line-numbers language-none">
@@ -81,6 +71,4 @@ const App = () => {
8171
/>
8272
</div>
8373
);
84-
};
85-
86-
ReactDOM.render(<App />, document.getElementById('root'));
74+
}

0 commit comments

Comments
 (0)