fix(react-renderer): add support for emoji callouts (#1067)

remirror · Aug 17, 2021 · 18c101a · 18c101a · github-actions · Aug 17, 2021
1 parent f305571
commit 18c101a
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 3 deletions.
diff --git a/.changeset/strong-planets-perform.md b/.changeset/strong-planets-perform.md
@@ -0,0 +1,5 @@
+---
+'@remirror/react-renderer': patch
+---
+
+Add support for callouts with emojis to the react-renderer
diff --git a/packages/remirror__react-renderer/__tests__/callout.spec.tsx b/packages/remirror__react-renderer/__tests__/callout.spec.tsx
@@ -21,7 +21,41 @@ describe('Callout', () => {
 
     expect(container.innerHTML).toMatchInlineSnapshot(`
       <div data-callout-type="info">
-        Important
+        <div>
+          Important
+        </div>
+      </div>
+    `);
+  });
+
+  it('renders callout with an emoji to HTML', () => {
+    const json: RemirrorJSON = {
+      type: 'callout',
+      attrs: {
+        type: 'info',
+        emoji: 'ℹ️',
+      },
+      content: [
+        {
+          type: 'text',
+          text: 'Important',
+        },
+      ],
+    };
+    const { container } = strictRender(<Callout node={json} markMap={{}} />);
+
+    expect(container.innerHTML).toMatchInlineSnapshot(`
+      <div data-callout-type="info"
+           data-callout-emoji="ℹ️"
+      >
+        <div class="remirror-callout-emoji-wrapper">
+          <span>
+            ℹ️
+          </span>
+        </div>
+        <div>
+          Important
+        </div>
       </div>
     `);
   });

diff --git a/packages/remirror__react-renderer/src/handlers/callout.tsx b/packages/remirror__react-renderer/src/handlers/callout.tsx
@@ -18,7 +18,21 @@ export const Callout: FC<{
     return <RemirrorRenderer json={node} key={ii} {...props} />;
   });
 
-  const calloutType = props.node.attrs?.type;
+  const { type, emoji } = props.node.attrs ?? {};
+  const dataAttrs: Record<string, unknown> = { 'data-callout-type': type };
 
-  return <div data-callout-type={calloutType}>{children}</div>;
+  if (emoji) {
+    dataAttrs['data-callout-emoji'] = emoji;
+  }
+
+  return (
+    <div {...dataAttrs}>
+      {emoji && (
+        <div className='remirror-callout-emoji-wrapper'>
+          <span>{emoji as string}</span>
+        </div>
+      )}
+      <div>{children}</div>
+    </div>
+  );
 };