Add font size option for embeds

Author: Ives van Hoorne

src/app/pages/Sandbox/Editor/Content/Header/ShareView.js

@@ -55,7 +55,7 @@ const ShareOptions = styled.div`
   color: rgba(255, 255, 255, 0.8);
   padding: 1rem;
 
-  box-shadow: -1px 4px 5px rgba(0,0,0,0.5);
+  box-shadow: -1px 4px 5px rgba(0, 0, 0, 0.5);
   background-color: ${props => props.theme.background2};
 
   width: 900px;
@@ -120,9 +120,7 @@ const Column = styled.div`
   }
 `;
 
-const ButtonContainer = styled.div`
-  margin-top: 0.25rem;
-`;
+const ButtonContainer = styled.div`margin-top: 0.25rem;`;
 
 const ButtonName = styled.div`
   margin: 0.5rem 0;
@@ -152,6 +150,7 @@ class ShareView extends React.PureComponent {
     defaultModule: null,
     autoResize: false,
     hideNavigation: false,
+    fontSize: 16,
   };
 
   handleChange = e => this.setState({ message: e.target.value });
@@ -178,6 +177,7 @@ class ShareView extends React.PureComponent {
       showPreview,
       autoResize,
       hideNavigation,
+      fontSize,
     } = this.state;
 
     const options = {};
@@ -201,6 +201,10 @@ class ShareView extends React.PureComponent {
       options.hidenavigation = 1;
     }
 
+    if (fontSize !== 16) {
+      options.fontsize = fontSize;
+    }
+
     return optionsToParameterizedUrl(options);
   };
 
@@ -247,9 +251,17 @@ class ShareView extends React.PureComponent {
     this.setState({ hideNavigation });
   };
 
+  setFontSize = (fontSize: number) => [this.setState({ fontSize })];
+
   render() {
     const { sandbox, modules, directories } = this.props;
-    const { showEditor, showPreview, autoResize, hideNavigation } = this.state;
+    const {
+      showEditor,
+      showPreview,
+      autoResize,
+      hideNavigation,
+      fontSize,
+    } = this.state;
 
     const defaultModule =
       this.state.defaultModule || findMainModule(modules).id;
@@ -283,6 +295,11 @@ class ShareView extends React.PureComponent {
                       value={hideNavigation}
                       setValue={this.setHideNavigation}
                     />
+                    <PaddedPreference
+                      title="Font size"
+                      value={fontSize}
+                      setValue={this.setFontSize}
+                    />
                   </div>
                   <div>
                     <h4>Default view</h4>

src/common/url.js

@@ -2,10 +2,16 @@
 
 export const getSandboxOptions = (url: string) => {
   const result = {};
-  const moduleMatch = url.match(/(\?|\&)(module)\=([^&]+)/);
+  const moduleMatch = url.match(/(\?|&)(module)=([^&]+)/);
   if (moduleMatch) {
     result.currentModule = moduleMatch[3];
   }
+
+  const fontSizeMatch = url.match(/(\?|&)(fontsize)=([^&]+)/);
+  if (fontSizeMatch) {
+    result.fontSize = +fontSizeMatch[3];
+  }
+
   result.isPreviewScreen = url.includes('view=preview');
   result.isEditorScreen = url.includes('view=editor');
 

src/embed/App.js

@@ -52,6 +52,7 @@ type State = {
   sidebarOpen: boolean,
   autoResize: boolean,
   hideNavigation: boolean,
+  fontSize: number,
 };
 
 export default class App extends React.PureComponent {
@@ -66,11 +67,13 @@ export default class App extends React.PureComponent {
       isEditorScreen,
       autoResize,
       hideNavigation,
+      fontSize,
     } = getSandboxOptions(document.location.href);
 
     this.state = {
       notFound: false,
       sandbox: null,
+      fontSize: fontSize || 16,
       showEditor: !isPreviewScreen,
       showPreview: !isEditorScreen,
       isInProjectView: !currentModule,
@@ -104,9 +107,9 @@ export default class App extends React.PureComponent {
         sandbox: response.data,
         currentModule:
           this.state.currentModule ||
-            response.data.modules.find(
-              m => m.title === 'index.js' && m.directoryShortid == null,
-            ).shortid,
+          response.data.modules.find(
+            m => m.title === 'index.js' && m.directoryShortid == null,
+          ).shortid,
       });
     } catch (e) {
       this.setState({ notFound: true });
@@ -178,6 +181,7 @@ export default class App extends React.PureComponent {
           currentModule={this.state.currentModule}
           hideNavigation={this.state.hideNavigation}
           autoResize={this.state.autoResize}
+          fontSize={this.state.fontSize}
         />
       </Container>
     );

src/embed/components/Content.js

@@ -32,6 +32,7 @@ type Props = {
   isInProjectView: boolean,
   hideNavigation: boolean,
   autoResize: boolean,
+  fontSize: number,
 };
 
 type State = {
@@ -151,6 +152,10 @@ export default class Content extends React.PureComponent {
     livePreviewEnabled: true,
   };
 
+  getPreferences = () => {
+    return { ...this.preferences, fontSize: this.props.fontSize };
+  };
+
   props: Props;
   state: State;
   render() {
@@ -161,6 +166,7 @@ export default class Content extends React.PureComponent {
       isInProjectView,
       currentModule,
       hideNavigation,
+      fontSize,
     } = this.props;
 
     const { errors } = this.state;
@@ -190,7 +196,7 @@ export default class Content extends React.PureComponent {
                 mainModule.id,
               )}
               changeCode={this.setCode}
-              preferences={this.preferences}
+              preferences={this.getPreferences()}
             />
           </Split>}
 
@@ -207,7 +213,7 @@ export default class Content extends React.PureComponent {
               fetchBundle={this.fetchBundle}
               addError={this.addError}
               clearErrors={this.clearErrors}
-              preferences={this.preferences}
+              preferences={this.getPreferences()}
               setProjectView={this.props.setProjectView}
               hideNavigation={hideNavigation}
               setFrameHeight={this.handleResize}