fix: Allow selection of embeds (#1562)

* feat: Support importing .docx or .html files as new documents (#1551)

* Support importing .docx as new documents

* Add html file support, build types and interface for easily adding file types to importer

* fix: Upload embedded images in docx to storage

* refactor: Bulk of logic to command

* refactor: Do all importing on server, so we're not splitting logic for import into two places

* test: Add documentImporter tests


Co-authored-by: Lance Whatley <whatl3y@gmail.com>

* fix: Accessibility audit

* fix: Quick fix, non editable title
closes #1560

* fix: Embed selection

Co-authored-by: Lance Whatley <whatl3y@gmail.com>

app/embeds/Abstract.js

@@ -21,6 +21,7 @@ export default class Abstract extends React.Component<Props> {
 
     return (
       <Frame
+        {...this.props}
         src={`https://app.goabstract.com/embed/${shareId}`}
         title={`Abstract (${shareId})`}
       />

app/embeds/Airtable.js

@@ -20,6 +20,7 @@ export default class Airtable extends React.Component<Props> {
 
     return (
       <Frame
+        {...this.props}
         src={`https://airtable.com/embed/${shareId}`}
         title={`Airtable (${shareId})`}
         border

app/embeds/ClickUp.js

@@ -17,6 +17,12 @@ export default class ClickUp extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
 
   render() {
-    return <Frame src={this.props.attrs.href} title="ClickUp Embed" />;
+    return (
+      <Frame
+        {...this.props}
+        src={this.props.attrs.href}
+        title="ClickUp Embed"
+      />
+    );
   }
 }

app/embeds/Codepen.js

@@ -17,6 +17,6 @@ export default class Codepen extends React.Component<Props> {
   render() {
     const normalizedUrl = this.props.attrs.href.replace(/\/pen\//, "/embed/");
 
-    return <Frame src={normalizedUrl} title="Codepen Embed" />;
+    return <Frame {...this.props} src={normalizedUrl} title="Codepen Embed" />;
   }
 }

app/embeds/Figma.js

@@ -19,6 +19,7 @@ export default class Figma extends React.Component<Props> {
   render() {
     return (
       <Frame
+        {...this.props}
         src={`https://www.figma.com/embed?embed_host=outline&url=${this.props.attrs.href}`}
         title="Figma Embed"
         border

app/embeds/Framer.js

@@ -15,6 +15,13 @@ export default class Framer extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
 
   render() {
-    return <Frame src={this.props.attrs.href} title="Framer Embed" border />;
+    return (
+      <Frame
+        {...this.props}
+        src={this.props.attrs.href}
+        title="Framer Embed"
+        border
+      />
+    );
   }
 }

app/embeds/Gist.js

@@ -6,6 +6,7 @@ const URL_REGEX = new RegExp(
 );
 
 type Props = {|
+  isSelected: boolean,
   attrs: {|
     href: string,
     matches: string[],
@@ -48,6 +49,7 @@ class Gist extends React.Component<Props> {
 
     return (
       <iframe
+        className={this.props.isSelected ? "ProseMirror-selectednode" : ""}
         ref={this.updateIframeContent}
         type="text/html"
         frameBorder="0"

app/embeds/GoogleDocs.js

@@ -17,6 +17,7 @@ export default class GoogleDocs extends React.Component<Props> {
   render() {
     return (
       <Frame
+        {...this.props}
         src={this.props.attrs.href.replace("/edit", "/preview")}
         icon={
           <img

app/embeds/GoogleSheets.js

@@ -17,6 +17,7 @@ export default class GoogleSlides extends React.Component<Props> {
   render() {
     return (
       <Frame
+        {...this.props}
         src={this.props.attrs.href.replace("/edit", "/preview")}
         icon={
           <img

app/embeds/GoogleSlides.js

@@ -17,6 +17,7 @@ export default class GoogleSlides extends React.Component<Props> {
   render() {
     return (
       <Frame
+        {...this.props}
         src={this.props.attrs.href
           .replace("/edit", "/preview")
           .replace("/pub", "/embed")}

app/embeds/InVision.js

@@ -12,6 +12,7 @@ const IMAGE_REGEX = new RegExp(
 );
 
 type Props = {|
+  isSelected: boolean,
   attrs: {|
     href: string,
     matches: string[],
@@ -25,6 +26,7 @@ export default class InVision extends React.Component<Props> {
     if (IMAGE_REGEX.test(this.props.attrs.href)) {
       return (
         <ImageZoom
+          className={this.props.isSelected ? "ProseMirror-selectednode" : ""}
           image={{
             src: this.props.attrs.href,
             alt: "InVision Embed",
@@ -37,6 +39,12 @@ export default class InVision extends React.Component<Props> {
         />
       );
     }
-    return <Frame src={this.props.attrs.href} title="InVision Embed" />;
+    return (
+      <Frame
+        {...this.props}
+        src={this.props.attrs.href}
+        title="InVision Embed"
+      />
+    );
   }
 }

app/embeds/Loom.js

@@ -17,6 +17,6 @@ export default class Loom extends React.Component<Props> {
   render() {
     const normalizedUrl = this.props.attrs.href.replace("share", "embed");
 
-    return <Frame src={normalizedUrl} title="Loom Embed" />;
+    return <Frame {...this.props} src={normalizedUrl} title="Loom Embed" />;
   }
 }

app/embeds/Lucidchart.js

@@ -20,6 +20,7 @@ export default class Lucidchart extends React.Component<Props> {
 
     return (
       <Frame
+        {...this.props}
         src={`https://lucidchart.com/documents/embeddedchart/${chartId}`}
         title="Lucidchart Embed"
       />

app/embeds/Marvel.js

@@ -15,6 +15,13 @@ export default class Marvel extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
 
   render() {
-    return <Frame src={this.props.attrs.href} title="Marvel Embed" border />;
+    return (
+      <Frame
+        {...this.props}
+        src={this.props.attrs.href}
+        title="Marvel Embed"
+        border
+      />
+    );
   }
 }

app/embeds/Mindmeister.js

@@ -21,6 +21,7 @@ export default class Mindmeister extends React.Component<Props> {
 
     return (
       <Frame
+        {...this.props}
         src={`https://www.mindmeister.com/maps/public_map_shell/${chartId}`}
         title="Mindmeister Embed"
         border

app/embeds/Miro.js

@@ -20,6 +20,7 @@ export default class RealtimeBoard extends React.Component<Props> {
 
     return (
       <Frame
+        {...this.props}
         src={`https://realtimeboard.com/app/embed/${boardId}`}
         title={`RealtimeBoard (${boardId})`}
       />

app/embeds/ModeAnalytics.js

@@ -21,7 +21,11 @@ export default class ModeAnalytics extends React.Component<Props> {
     const normalizedUrl = this.props.attrs.href.replace(/\/embed$/, "");
 
     return (
-      <Frame src={`${normalizedUrl}/embed`} title="Mode Analytics Embed" />
+      <Frame
+        {...this.props}
+        src={`${normalizedUrl}/embed`}
+        title="Mode Analytics Embed"
+      />
     );
   }
 }

app/embeds/Prezi.js

@@ -17,6 +17,8 @@ export default class Prezi extends React.Component<Props> {
   render() {
     const url = this.props.attrs.href.replace(/\/embed$/, "");
 
-    return <Frame src={`${url}/embed`} title="Prezi Embed" border />;
+    return (
+      <Frame {...this.props} src={`${url}/embed`} title="Prezi Embed" border />
+    );
   }
 }

app/embeds/Spotify.js

@@ -27,6 +27,7 @@ export default class Spotify extends React.Component<Props> {
 
     return (
       <Frame
+        {...this.props}
         width="300px"
         height="380px"
         src={`https://open.spotify.com/embed${normalizedPath}`}

app/embeds/Trello.js

@@ -31,6 +31,7 @@ export default class Trello extends React.Component<Props> {
 
     return (
       <Frame
+        {...this.props}
         width="248px"
         height="185px"
         src={`https://trello.com/embed/board?id=${objectId}`}

app/embeds/Typeform.js

@@ -17,6 +17,12 @@ export default class Typeform extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
 
   render() {
-    return <Frame src={this.props.attrs.href} title="Typeform Embed" />;
+    return (
+      <Frame
+        {...this.props}
+        src={this.props.attrs.href}
+        title="Typeform Embed"
+      />
+    );
   }
 }

app/embeds/Vimeo.js

@@ -20,6 +20,7 @@ export default class Vimeo extends React.Component<Props> {
 
     return (
       <Frame
+        {...this.props}
         src={`https://player.vimeo.com/video/${videoId}?byline=0`}
         title={`Vimeo Embed (${videoId})`}
       />

app/embeds/YouTube.js

@@ -5,6 +5,7 @@ import Frame from "./components/Frame";
 const URL_REGEX = /(?:https?:\/\/)?(?:www\.)?youtu\.?be(?:\.com)?\/?.*(?:watch|embed)?(?:.*v=|v\/|\/)([a-zA-Z0-9_-]{11})$/i;
 
 type Props = {|
+  isSelected: boolean,
   attrs: {|
     href: string,
     matches: string[],
@@ -20,6 +21,7 @@ export default class YouTube extends React.Component<Props> {
 
     return (
       <Frame
+        {...this.props}
         src={`https://www.youtube.com/embed/${videoId}?modestbranding=1`}
         title={`YouTube (${videoId})`}
       />

app/embeds/components/Frame.js

@@ -12,6 +12,7 @@ type Props = {
   title?: string,
   icon?: React.Node,
   canonicalUrl?: string,
+  isSelected?: boolean,
   width?: string,
   height?: string,
 };
@@ -48,13 +49,19 @@ class Frame extends React.Component<PropsWithRef> {
       icon,
       title,
       canonicalUrl,
-      ...rest
+      isSelected,
+      src,
     } = this.props;
     const Component = border ? StyledIframe : "iframe";
     const withBar = !!(icon || canonicalUrl);
 
     return (
-      <Rounded width={width} height={height} withBar={withBar}>
+      <Rounded
+        width={width}
+        height={height}
+        withBar={withBar}
+        className={isSelected ? "ProseMirror-selectednode" : ""}
+      >
         {this.isLoaded && (
           <Component
             ref={forwardedRef}
@@ -66,8 +73,8 @@ class Frame extends React.Component<PropsWithRef> {
             frameBorder="0"
             title="embed"
             loading="lazy"
+            src={src}
             allowFullScreen
-            {...rest}
           />
         )}
         {withBar && (