feat: 🎸 add CodeSandbox support

Author: streamich

README.md

@@ -75,6 +75,7 @@
 
 <div align="center">
   <div>DailyMotion</div>
+  <div>CodeSandbox</div>
   <div>Facebook Video</div>
   <div>Figma</div>
   <div>Gfycat</div>

src/ReactEmbed.tsx

@@ -41,6 +41,7 @@ const defaultBlocks: Blocks = {
   soundcloud: React.lazy(() => import('./blocks/soundcloud')),
   tweet: React.lazy(() => import('./blocks/tweet')),
   youtube: React.lazy(() => import('./blocks/youtube')),
+  codesandbox: React.lazy(() => import('./blocks/codesandbox')),
 };
 
 export type ReactEmbedRouterResult = undefined | [undefined | React.ComponentType<BlockProps>, EmbedBlockId];

src/__story__/codesandbox.story.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import {storiesOf} from '@storybook/react';
+import Embed from '..';
+import {Box} from './Box';
+
+storiesOf('codesandbox', module)
+  .add('Default', () => {
+    return <Embed url={'https://codesandbox.io/embed/react-new?fontsize=14&hidenavigation=1&theme=dark'} />;
+  })
+  .add('Fitted', () => {
+    return (
+      <Box>
+        <Embed url={'https://codesandbox.io/embed/react-new?fontsize=14&hidenavigation=1&theme=dark'} />
+      </Box>
+    );
+  });

src/blocks/codesandbox/index.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import {BlockProps} from '../..';
+
+export interface CodeSandboxProps extends BlockProps {}
+
+const CodeSandbox: React.FC<CodeSandboxProps> = ({
+  url,
+  renderWrap,
+}) => {
+
+  return renderWrap(
+    <iframe
+      src={url}
+      style={{
+        width: '100%',
+        height: '500px',
+        border: 0,
+        borderRadius: '4px',
+        overflow: 'hidden',
+      }}
+      width="100%"
+      height="500"
+      allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+   />
+  );
+};
+
+export default CodeSandbox;

src/routeToBlock.ts

@@ -92,6 +92,9 @@ const routeToBlock: ReactEmbedRouter = (blocks: Blocks, parsed: ParsedUrl) => {
     case 'dropbox.com':
     case 'www.dropbox.com':
       return [blocks.dropbox, ''];
+    case 'codesandbox.io':
+      if (url.includes('codesandbox.io/embed/')) return [blocks.codesandbox, ''];
+      return undefined;
     default:
       if (canPlayPdf(url)) {
         return [blocks.pdf, ''];