Introduce inline embeds (#52)

* feat: introduce inline embeds * chore: add changesets * chore: changeset
hygraph · Dec 7, 2021 · bc9e612 · bc9e612
1 parent 78655ee
commit bc9e612
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 0 deletions.
diff --git a/.changeset/spotty-dogs-wonder.md b/.changeset/spotty-dogs-wonder.md
@@ -0,0 +1,5 @@
+---
+'@graphcms/rich-text-types': minor
+---
+
+Add isInline to EmbedProps type
diff --git a/packages/react-renderer/test/RichText.test.tsx b/packages/react-renderer/test/RichText.test.tsx
@@ -695,4 +695,85 @@ describe('custom embeds and assets', () => {
  expect(console.warn).toHaveBeenCalledTimes(1);
  expect(container).toMatchInlineSnapshot(`<div />`);
  });
+
+ it('should render inline embeds', () => {
+ const content: RichTextContent = [
+ {
+ type: 'embed',
+ nodeId: 'custom_post_id_1',
+ children: [
+ {
+ text: '',
+ },
+ ],
+ nodeType: 'Post',
+ isInline: true,
+ },
+ {
+ type: 'embed',
+ nodeId: 'custom_post_id_2',
+ children: [
+ {
+ text: '',
+ },
+ ],
+ nodeType: 'Post',
+ },
+ ];
+
+ const references = [
+ {
+ id: 'custom_post_id_1',
+ title: 'GraphCMS is awesome :rocket:',
+ },
+ {
+ id: 'custom_post_id_2',
+ title: 'Post template',
+ },
+ ];
+
+ const { container } = render(
+ <RichText
+ content={content}
+ references={references}
+ renderers={{
+ embed: {
+ Post: ({
+ title,
+ nodeId,
+ isInline,
+ }: EmbedProps<{ title: string }>) => {
+ return (
+ <div>
+ <h3>{title}</h3>
+ {isInline ? <span>{nodeId}</span> : <div>{nodeId}</div>}
+ </div>
+ );
+ },
+ },
+ }}
+ />
+ );
+
+ expect(container).toMatchInlineSnapshot(`
+ <div>
+ <div>
+ <h3>
+ GraphCMS is awesome :rocket:
+ </h3>
+ <span>
+ custom_post_id_1
+ </span>
+ </div>
+ <div>
+ <h3>
+ Post template
+ </h3>
+ <div>
+ custom_post_id_2
+ </div>
+ </div>
+ </div>
+ `);
+ });
 });
diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
@@ -117,6 +117,7 @@ export interface IFrameElement extends IFrameProps, Element {
 export type EmbedProps<T = any> = T & {
  nodeId: string;
  nodeType: string;
+ isInline?: boolean;
 };
 
 export interface EmbedElement extends EmbedProps, Element {