Editor embeds (#680)

- [x] Make deleting an embed easier
- [x] Add document level ability to disable embeds
- [x] Add team level ability to disable embeds
- [x] GitHub
- [x] Numeracy
- [x] Mode Analytics
- [x] Figma
- [x] Airtable
- [x] Vimeo
- [x] RealtimeBoard
- [x] Loom
- [x] Lucidcharts
- [x] Framer
- [x] InVision
- [x] Typeform
- [x] Marvel
- [x] Spotify
- [x] Codepen
- [x] Trello

app/scenes/Document/Document.js

@@ -277,7 +277,8 @@ class DocumentScene extends React.Component<Props> {
   };
 
   render() {
-    const { location, match } = this.props;
+    const { location, auth, match } = this.props;
+    const team = auth.team;
     const Editor = this.editorComponent;
     const document = this.document;
     const revision = this.revision;
@@ -296,7 +297,7 @@ class DocumentScene extends React.Component<Props> {
       );
     }
 
-    if (!document || !Editor) {
+    if (!document || !team || !Editor) {
       return (
         <Container column auto>
           <PageTitle title={location.state ? location.state.title : ''} />
@@ -307,6 +308,8 @@ class DocumentScene extends React.Component<Props> {
       );
     }
 
+    const embedsDisabled = document.embedsDisabled || !team.documentEmbeds;
+
     return (
       <ErrorBoundary>
         <Container
@@ -359,10 +362,12 @@ class DocumentScene extends React.Component<Props> {
             )}
             <MaxWidth column auto>
               <Editor
+                key={embedsDisabled ? 'embeds-disabled' : 'embeds-enabled'}
                 titlePlaceholder="Start with a title…"
                 bodyPlaceholder="…the rest is your canvas"
                 defaultValue={revision ? revision.text : document.text}
                 pretitle={document.emoji}
+                disableEmbeds={embedsDisabled}
                 onImageUploadStart={this.onImageUploadStart}
                 onImageUploadStop={this.onImageUploadStop}
                 onSearchLink={this.onSearchLink}

app/scenes/Document/components/Header.js

@@ -95,6 +95,7 @@ class Header extends React.Component<Props> {
       auth,
     } = this.props;
     const canShareDocuments = auth.team && auth.team.sharing;
+    const canToggleEmbeds = auth.team && auth.team.documentEmbeds;
 
     return (
       <Actions
@@ -168,7 +169,11 @@ class Header extends React.Component<Props> {
           )}
           {!isEditing && (
             <Action>
-              <DocumentMenu document={document} showPrint />
+              <DocumentMenu
+                document={document}
+                showToggleEmbeds={canToggleEmbeds}
+                showPrint
+              />
             </Action>
           )}
           {!isEditing &&

app/scenes/Settings/Security.js

@@ -21,10 +21,12 @@ class Security extends React.Component<Props> {
   form: ?HTMLFormElement;
 
   @observable sharing: boolean;
+  @observable documentEmbeds: boolean;
 
   componentDidMount() {
     const { auth } = this.props;
     if (auth.team) {
+      this.documentEmbeds = auth.team.documentEmbeds;
       this.sharing = auth.team.sharing;
     }
   }
@@ -34,13 +36,18 @@ class Security extends React.Component<Props> {
 
     await this.props.auth.updateTeam({
       sharing: this.sharing,
+      documentEmbeds: this.documentEmbeds,
     });
     this.props.ui.showToast('Settings saved', 'success');
   };
 
   handleChange = (ev: SyntheticInputEvent<*>) => {
-    if (ev.target.name === 'sharing') {
-      this.sharing = ev.target.checked;
+    switch (ev.target.name) {
+      case 'sharing':
+        return (this.sharing = ev.target.checked);
+      case 'documentEmbeds':
+        return (this.documentEmbeds = ev.target.checked);
+      default:
     }
   };
 
@@ -56,18 +63,25 @@ class Security extends React.Component<Props> {
         <PageTitle title="Security" />
         <h1>Security</h1>
         <HelpText>
-          Settings that impact the access, security and privacy of your
+          Settings that impact the access, security and content of your
           knowledgebase.
         </HelpText>
 
         <form onSubmit={this.handleSubmit} ref={ref => (this.form = ref)}>
           <Checkbox
-            label="Allow sharing documents"
+            label="Public document sharing"
             name="sharing"
             checked={this.sharing}
             onChange={this.handleChange}
             note="When enabled documents can be shared publicly by any team member"
           />
+          <Checkbox
+            label="Rich service embeds"
+            name="documentEmbeds"
+            checked={this.documentEmbeds}
+            onChange={this.handleChange}
+            note="Convert links to supported services into rich embeds within your documents"
+          />
           <Button type="submit" disabled={isSaving || !this.isValid}>
             {isSaving ? 'Saving…' : 'Save'}
           </Button>