feat: export elements functions (#107)

Co-authored-by: raphael.bastiansch@maruthree.com <raphael.bastiansch@maruthree.com> Co-authored-by: João Pedro Schmitz <jpedroschmitz@hotmail.com>
hygraph · Aug 16, 2023 · 7992b80 · 7992b80
1 parent 9e1a163
commit 7992b80
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 34 deletions.
diff --git a/.changeset/two-lions-guess.md b/.changeset/two-lions-guess.md
@@ -0,0 +1,5 @@
+---
+'@graphcms/rich-text-html-renderer': minor
+---
+
+Export `defaultElements`
diff --git a/examples/content-example.ts b/examples/content-example.ts
@@ -6,20 +6,6 @@ export const content: RichTextContent = {
  type: 'heading-two',
  children: [{ text: 'Awesome new Hygraph cap!' }],
  },
- {
- src: 'https://media.graphassets.com/bFyCrmvuQfO7n0l5ZmH5',
- type: 'image',
- title: 'logo.svg',
- width: 0,
- handle: 'mQeGmwkXTnqTfcgUXVr7',
- height: 0,
- children: [
- {
- text: '',
- },
- ],
- mimeType: 'image/svg+xml',
- },
  {
  type: 'paragraph',
  children: [
@@ -88,19 +74,9 @@ export const content: RichTextContent = {
  type: 'code-block',
  children: [
  {
- text: 'const graph = \'cms\'\n\n<?php $echo "Hello" ?>',
- },
- ],
- },
- {
- type: 'embed',
- nodeId: 'cknjbzowggjo90b91kjisy03a',
- children: [
- {
- text: '',
+ text: 'const hy = \'graph\'\n\n<?php $echo "Hello" ?>',
  },
  ],
- nodeType: 'Asset',
  },
  {
  type: 'embed',
@@ -146,15 +122,6 @@ export const content: RichTextContent = {
 };
 
 export const references: EmbedReferences = [
- {
- id: 'cknjbzowggjo90b91kjisy03a',
- handle: 'dsQtt0ARqO28baaXbVy9',
- fileName: 'nkkwzgz0bw6fg6mqzjc1.png',
- height: 690,
- width: 880,
- url: 'https://media.graphassets.com/dsQtt0ARqO28baaXbVy9',
- mimeType: 'image/png',
- },
  {
  id: 'ckrus0f14ao760b32mz2dwvgx',
  handle: '7M0lXLdCQfeIDXnT2SVS',

diff --git a/packages/html-renderer/README.md b/packages/html-renderer/README.md
@@ -67,6 +67,26 @@ const html = astToHtmlString({
 });
 ```
 
+If needed, you can also import the `defaultElements` from the package and use it as a base for your custom renderers.
+
+```js
+import {
+ astToHtmlString,
+ defaultElements,
+} from '@graphcms/rich-text-html-renderer';
+
+const content = {
+ /* ... */
+};
+
+const html = astToHtmlString({
+ content: inlineContent,
+ renderers: {
+ bold: props => defaultElements.bold(props),
+ },
+});
+```
+
 Below you can check the full list of elements you can customize, alongside the props available for each of them.
 
 - `a`

diff --git a/packages/html-renderer/src/index.ts b/packages/html-renderer/src/index.ts
@@ -290,4 +290,5 @@ export function astToHtmlString({
  }).join('');
 }
 
+export { defaultElements } from './defaultElements';
 export * from './types';