From 4ffc04bc5dafca54793573b9cf1de79e8a3a2eed Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Sun, 20 Sep 2020 22:27:11 -0700 Subject: [PATCH] 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 * fix: Accessibility audit * fix: Quick fix, non editable title closes #1560 * fix: Embed selection Co-authored-by: Lance Whatley --- app/components/DropToImport.js | 9 +- app/components/DropdownMenu/DropdownMenu.js | 1 + .../Sidebar/components/HeaderBlock.js | 2 +- app/components/TeamLogo.js | 7 +- app/embeds/Abstract.js | 1 + app/embeds/Airtable.js | 1 + app/embeds/ClickUp.js | 8 +- app/embeds/Codepen.js | 2 +- app/embeds/Figma.js | 1 + app/embeds/Framer.js | 9 +- app/embeds/Gist.js | 2 + app/embeds/GoogleDocs.js | 1 + app/embeds/GoogleSheets.js | 1 + app/embeds/GoogleSlides.js | 1 + app/embeds/InVision.js | 10 +- app/embeds/Loom.js | 2 +- app/embeds/Lucidchart.js | 1 + app/embeds/Marvel.js | 9 +- app/embeds/Mindmeister.js | 1 + app/embeds/Miro.js | 1 + app/embeds/ModeAnalytics.js | 6 +- app/embeds/Prezi.js | 4 +- app/embeds/Spotify.js | 1 + app/embeds/Trello.js | 1 + app/embeds/Typeform.js | 8 +- app/embeds/Vimeo.js | 1 + app/embeds/YouTube.js | 2 + app/embeds/components/Frame.js | 13 +- app/menus/CollectionMenu.js | 24 +- app/scenes/Document/components/Document.js | 9 +- app/stores/DocumentsStore.js | 46 ++++ app/utils/ApiClient.js | 30 ++- app/utils/importFile.js | 58 ----- package.json | 6 +- server/api/documents.js | 205 ++++++++++-------- server/api/index.js | 9 +- server/auth/index.js | 2 +- server/commands/documentImporter.js | 113 ++++++++++ server/commands/documentImporter.test.js | 77 +++++++ server/commands/documentMover.js | 5 +- server/commands/documentMover.test.js | 2 +- server/commands/userInviter.test.js | 2 +- server/test/fixtures/images.docx | Bin 0 -> 9258 bytes server/test/fixtures/markdown.md | 8 + server/test/fixtures/webpage.html | 8 + server/utils/__mocks__/s3.js | 5 + server/utils/dataURItoBuffer.js | 20 ++ server/utils/dataURItoBuffer.test.js | 20 ++ server/utils/parseDocumentIds.test.js | 2 +- server/utils/parseImages.js | 26 +++ server/utils/parseImages.test.js | 24 ++ server/utils/s3.js | 22 ++ yarn.lock | 124 +++++++++-- 53 files changed, 735 insertions(+), 218 deletions(-) delete mode 100644 app/utils/importFile.js create mode 100644 server/commands/documentImporter.js create mode 100644 server/commands/documentImporter.test.js create mode 100644 server/test/fixtures/images.docx create mode 100644 server/test/fixtures/markdown.md create mode 100644 server/test/fixtures/webpage.html create mode 100644 server/utils/__mocks__/s3.js create mode 100644 server/utils/dataURItoBuffer.js create mode 100644 server/utils/dataURItoBuffer.test.js create mode 100644 server/utils/parseImages.js create mode 100644 server/utils/parseImages.test.js diff --git a/app/components/DropToImport.js b/app/components/DropToImport.js index ecb8c78c0..54b936f68 100644 --- a/app/components/DropToImport.js +++ b/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 { } 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 { return ( { {label || ( - + {teamName}{" "} diff --git a/app/components/TeamLogo.js b/app/components/TeamLogo.js index 2101be3b5..400c7f2f4 100644 --- a/app/components/TeamLogo.js +++ b/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; diff --git a/app/embeds/Abstract.js b/app/embeds/Abstract.js index f655c0701..f49a7c049 100644 --- a/app/embeds/Abstract.js +++ b/app/embeds/Abstract.js @@ -21,6 +21,7 @@ export default class Abstract extends React.Component { return ( diff --git a/app/embeds/Airtable.js b/app/embeds/Airtable.js index e77755228..69f9b49f9 100644 --- a/app/embeds/Airtable.js +++ b/app/embeds/Airtable.js @@ -20,6 +20,7 @@ export default class Airtable extends React.Component { return ( { static ENABLED = [URL_REGEX]; render() { - return ; + return ( + + ); } } diff --git a/app/embeds/Codepen.js b/app/embeds/Codepen.js index e809cc67c..69c446131 100644 --- a/app/embeds/Codepen.js +++ b/app/embeds/Codepen.js @@ -17,6 +17,6 @@ export default class Codepen extends React.Component { render() { const normalizedUrl = this.props.attrs.href.replace(/\/pen\//, "/embed/"); - return ; + return ; } } diff --git a/app/embeds/Figma.js b/app/embeds/Figma.js index 15a3f9c3e..234c522d8 100644 --- a/app/embeds/Figma.js +++ b/app/embeds/Figma.js @@ -19,6 +19,7 @@ export default class Figma extends React.Component { render() { return ( { static ENABLED = [URL_REGEX]; render() { - return ; + return ( + + ); } } diff --git a/app/embeds/Gist.js b/app/embeds/Gist.js index d70c00728..3dab38639 100644 --- a/app/embeds/Gist.js +++ b/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 { return (