Make iframe height configurable and add border (#520)

thumbtack · Oct 22, 2019 · 054513e · 054513e
1 parent 85fa537
commit 054513e
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git a/www/src/cms/cms.js b/www/src/cms/cms.js
@@ -5,16 +5,20 @@ import styles from '!css-loader!sass-loader!./preview.scss';
 CMS.registerEditorComponent({
     id: 'figma',
     label: 'Figma',
-    fields: [{ name: 'id', label: 'Figma URL', widget: 'string' }],
+    fields: [
+        { name: 'id', label: 'Figma URL', widget: 'string' },
+        { name: 'height', label: 'Height', widget: 'number', default: 500, min: 350 },
+    ],
     // eslint-disable-next-line no-useless-escape
-    pattern: /<iframe height="500" width="100%" src="https:\/\/www.figma.com\/embed\?embed_host=astra&url=(https:\/\/([\w\.-]+\.)?figma.com\/(file|proto)\/([0-9a-zA-Z]{22,128})(?:\/.*)?)" allowfullscreen frameborder="0"><\/iframe>$/,
+    pattern: /<iframe height="(\d*)" width="100%" src="https:\/\/www.figma.com\/embed\?embed_host=astra&url=(https:\/\/([\w\.-]+\.)?figma.com\/(file|proto)\/([0-9a-zA-Z]{22,128})(?:\/.*)?)" allowfullscreen frameborder="0"><\/iframe>$/,
     fromBlock: match => ({
-        id: match[1],
+        height: match[1],
+        id: match[2],
     }),
     toBlock: obj =>
-        `<iframe height="500" width="100%" src="https://www.figma.com/embed?embed_host=astra&url=${obj.id}" allowfullscreen frameborder="0"></iframe>`,
+        `<iframe height="${obj.height}" width="100%" src="https://www.figma.com/embed?embed_host=astra&url=${obj.id}" allowfullscreen frameborder="0"></iframe>`,
     toPreview: obj =>
-        `<iframe height="500" width="100%" src="https://www.figma.com/embed?embed_host=astra&url=${obj.id}" allowfullscreen frameborder="0"></iframe>`,
+        `<iframe height="${obj.height}" width="100%" src="https://www.figma.com/embed?embed_host=astra&url=${obj.id}" allowfullscreen frameborder="0"></iframe>`,
 });
 
 CMS.registerPreviewStyle(styles.toString(), { raw: true });
diff --git a/www/src/components/mdx/index.jsx b/www/src/components/mdx/index.jsx
@@ -159,6 +159,14 @@ export const HR = p => (
     <hr {...p} className="bt b-gray-300 mv4" style={{ height: '0', border: '0' }} />
 );
 
+export const Iframe = p => (
+    <iframe
+        {...p}
+        className="pa1 mb1 ba bw-2 br2 b-gray-300"
+        title="Image of component from Figma"
+    />
+);
+
 export const MDXRenderer = ({ children }) => {
     let renderedChildren = children;
 
@@ -184,6 +192,7 @@ export const MDXRenderer = ({ children }) => {
                 td: TD,
                 th: TH,
                 hr: HR,
+                iframe: Iframe,
             }}
         >
             {renderedChildren}