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/components/DropToImport.js

@@ -8,7 +8,6 @@ import { withRouter, type RouterHistory, type Match } from "react-router-dom";
 import { createGlobalStyle } from "styled-components";
 import DocumentsStore from "stores/DocumentsStore";
 import LoadingIndicator from "components/LoadingIndicator";
-import importFile from "utils/importFile";
 
 const EMPTY_OBJECT = {};
 let importingLock = false;
@@ -61,12 +60,12 @@ class DropToImport extends React.Component<Props> {
       }
 
       for (const file of files) {
-        const doc = await importFile({
-          documents: this.props.documents,
+        const doc = await this.props.documents.import(
           file,
           documentId,
           collectionId,
-        });
+          { publish: true }
+        );
 
         if (redirect) {
           this.props.history.push(doc.url);
@@ -95,7 +94,7 @@ class DropToImport extends React.Component<Props> {
 
     return (
       <Dropzone
-        accept="text/markdown, text/plain"
+        accept={documents.importFileTypes.join(", ")}
         onDropAccepted={this.onDropAccepted}
         style={EMPTY_OBJECT}
         disableClick

app/components/DropdownMenu/DropdownMenu.js

@@ -177,6 +177,7 @@ class DropdownMenu extends React.Component<Props> {
                 {label || (
                   <NudeButton
                     id={`${this.id}button`}
+                    aria-label="More options"
                     aria-haspopup="true"
                     aria-expanded={isOpen ? "true" : "false"}
                     aria-controls={this.id}

app/components/Sidebar/components/HeaderBlock.js

@@ -21,7 +21,7 @@ function HeaderBlock({
 }: Props) {
   return (
     <Header justify="flex-start" align="center" {...rest}>
-      <TeamLogo alt={`${teamName} logo`} src={logoUrl} />
+      <TeamLogo alt={`${teamName} logo`} src={logoUrl} size="38px" />
       <Flex align="flex-start" column>
         <TeamName showDisclosure>
           {teamName}{" "}

app/components/TeamLogo.js

@@ -2,11 +2,12 @@
 import styled from "styled-components";
 
 const TeamLogo = styled.img`
-  width: auto;
-  height: 38px;
+  width: ${(props) => props.size || "auto"};
+  height: ${(props) => props.size || "38px"};
   border-radius: 4px;
   background: ${(props) => props.theme.background};
-  outline: 1px solid ${(props) => props.theme.divider};
+  border: 1px solid ${(props) => props.theme.divider};
+  overflow: hidden;
 `;
 
 export default TeamLogo;