Tweaked text in coverage placeholder and added button to allow file u…

…pload

packages/slate-editor/src/extensions/placeholders/components/InputPlaceholder.tsx

@@ -11,6 +11,7 @@ import styles from './InputPlaceholder.module.scss';
 import type { ContentRenderProps } from './Placeholder';
 
 export interface Props extends Omit<BaseProps, 'title' | 'onSubmit'> {
+    children?: ReactNode;
     title: ReactNode | FunctionComponent<ContentRenderProps>;
     description: ReactNode | FunctionComponent<ContentRenderProps>;
     // Input properties
@@ -28,6 +29,7 @@ export interface Props extends Omit<BaseProps, 'title' | 'onSubmit'> {
 const isEsc = isHotkey('esc');
 
 export function InputPlaceholder({
+    children,
     className,
     action,
     title,
@@ -135,6 +137,7 @@ export function InputPlaceholder({
                     value={value}
                 />
             </form>
+            {children}
         </Frame>
     );
 }

packages/slate-editor/src/extensions/placeholders/elements/CoveragePlaceholderElement.module.scss

@@ -0,0 +1,9 @@
+@import "styles/variables";
+
+.Action {
+    margin: $spacing-2 0 0;
+}
+
+.Button {
+    text-decoration: none;
+}

packages/slate-editor/src/extensions/placeholders/elements/CoveragePlaceholderElement.tsx

@@ -7,12 +7,13 @@ import React, { type DragEvent, useEffect, useState } from 'react';
 import { Transforms } from 'slate';
 import { useSelected, useSlateStatic } from 'slate-react';
 
-import { SearchInput } from '#components';
-import { PlaceholderCoverage } from '#icons';
+import { Button, SearchInput } from '#components';
+import { PlaceholderCoverage, Upload } from '#icons';
 import { URL_WITH_OPTIONAL_PROTOCOL_REGEXP, useFunction } from '#lib';
 
 import { createCoverage } from '#extensions/coverage';
 import { EventsEditor } from '#modules/events';
+import { UploadcareEditor } from '#modules/uploadcare';
 
 import { InputPlaceholder } from '../components/InputPlaceholder';
 import { withLoadingDots } from '../components/LoadingDots';
@@ -24,6 +25,8 @@ import { replacePlaceholder } from '../lib';
 import type { PlaceholderNode } from '../PlaceholderNode';
 import { PlaceholdersManager, usePlaceholderManagement } from '../PlaceholdersManager';
 
+import styles from './CoveragePlaceholderElement.module.scss';
+
 type Url = string;
 type CoverageRef = Pick<CoverageNode, 'coverage'>;
 type Mode = 'search' | 'create';
@@ -49,6 +52,22 @@ export function CoveragePlaceholderElement({
         PlaceholdersManager.activate(element);
     });
 
+    const handleUpload = useFunction(async () => {
+        const files = await UploadcareEditor.upload(editor, { multiple: false });
+        if (!files) {
+            return;
+        }
+
+        setMode('search');
+        const uploading = toProgressPromise(files[0]).then(async (fileInfo: PrezlyFileInfo) => {
+            const file = UploadcareFile.createFromUploadcareWidgetPayload(fileInfo);
+            const ref = await onCreateCoverage(file);
+
+            return { coverage: { id: ref.coverage.id } };
+        });
+        PlaceholdersManager.register(element.type, element.uuid, uploading);
+    });
+
     const handleDrop = useFunction((event: DragEvent) => {
         event.preventDefault();
         event.stopPropagation();
@@ -133,10 +152,11 @@ export function CoveragePlaceholderElement({
             renderFrame={() =>
                 mode === 'create' ? (
                     <InputPlaceholder
+                        autoFocus
                         format="card"
                         selected={isSelected}
-                        title="Coverage"
-                        description="Type the URL of the new Coverage you want to add"
+                        title="Log new coverage"
+                        description="Paste a coverage URL or upload a coverage file (you can also drop it here)."
                         placeholder="www.website.com/article"
                         pattern={URL_WITH_OPTIONAL_PROTOCOL_REGEXP.source}
                         action="Add coverage"
@@ -145,7 +165,18 @@ export function CoveragePlaceholderElement({
                         onEsc={() => PlaceholdersManager.deactivate(element)}
                         onRemove={handleRemove}
                         onSubmit={handleSubmitUrl}
-                    />
+                    >
+                        <div className={styles.Action}>
+                            <Button
+                                className={styles.Button}
+                                icon={Upload}
+                                onClick={handleUpload}
+                                variant="underlined"
+                            >
+                                Upload a coverage file
+                            </Button>
+                        </div>
+                    </InputPlaceholder>
                 ) : undefined
             }
             inputTitle="Coverage"

packages/slate-editor/src/icons/index.ts

@@ -109,6 +109,7 @@ export { default as Resize } from './Resize.svg';
 export { default as Search } from './Search.svg';
 export { default as SocialFacebook } from './Social-Facebook.svg';
 export { default as SocialTwitter } from './Social-Twitter.svg';
+export { default as Upload } from './Upload.svg';
 export { default as User } from './User.svg';
 export { default as Video } from './Video.svg';
 export { default as WarningCircle } from './Warning-Circle.svg';