feat(toolbar, bundle): add ToolbarButtonPopup type and use it for link, image and file actions in murkup mode (#228)

Author: d3m1d0v

src/bundle/config/markup.ts src/bundle/config/markup.tsxsrc/bundle/config/markup.ts renamed to src/bundle/config/markup.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import {i18n} from '../../i18n/menubar';
 import {
     isBoldActive,
@@ -10,6 +12,7 @@ import {
     isItalicActive,
 } from '../../markup/active';
 import {
+    insertLink,
     insertTable,
     liftListItem,
     sinkListItem,
@@ -45,19 +48,21 @@ import {ToolbarData} from '../../toolbar/Toolbar';
 import {ToolbarGroupData} from '../../toolbar/ToolbarGroup';
 import {ToolbarListButtonData} from '../../toolbar/ToolbarListButton';
 import {
+    ToolbarButtonPopupData,
     ToolbarDataType,
     ToolbarListItemData,
     ToolbarReactComponentData,
     ToolbarSingleItemData,
 } from '../../toolbar/types';
+import {ToolbarLinkPopup} from '../toolbar/custom/ToolbarLinkPopup';
 import {MToolbarColors} from '../toolbar/markup/MToolbarColors';
-import {MToolbarFile} from '../toolbar/markup/MToolbarFile';
-import {MToolbarImage} from '../toolbar/markup/MToolbarImage';
-import {MToolbarLink} from '../toolbar/markup/MToolbarLink';
+import {MToolbarFilePopup} from '../toolbar/markup/MToolbarFilePopup';
+import {MToolbarImagePopup} from '../toolbar/markup/MToolbarImagePopup';
 
 import {ActionName} from './action-names';
 import {icons} from './icons';
 
+const noop = () => {};
 const isActiveFn = () => false;
 const isEnableFn = () => true;
 
@@ -278,11 +283,29 @@ export const mListMoveListConfig: MToolbarListButtonData = {
     ],
 };
 
-export const mLinkButton: MToolbarReactComponentData = {
+export const mLinkButton: ToolbarButtonPopupData<CodeEditor> = {
     id: ActionName.link,
-    type: ToolbarDataType.ReactComponent,
-    component: MToolbarLink,
-    width: 28,
+    type: ToolbarDataType.ButtonPopup,
+    icon: icons.link,
+    title: i18n('link'),
+    exec: noop,
+    isActive: isActiveFn,
+    isEnable: isEnableFn,
+    renderPopup: (props) => {
+        const {editor} = props;
+        const selection = editor.cm.getSelection();
+
+        return (
+            <ToolbarLinkPopup
+                {...props}
+                formInitialText={selection}
+                formReadOnlyText={Boolean(selection)}
+                onSubmit={(url, text) => {
+                    insertLink({url, text})(editor.cm);
+                }}
+            />
+        );
+    },
 };
 
 export const mNoteButton: MToolbarSingleItemData = {
@@ -427,15 +450,23 @@ export const mToolbarConfig: MToolbarData = [
     [
         {
             id: 'image',
-            type: ToolbarDataType.ReactComponent,
-            component: MToolbarImage,
-            width: 28,
+            type: ToolbarDataType.ButtonPopup,
+            icon: icons.image,
+            title: i18n('image'),
+            exec: noop,
+            isActive: isActiveFn,
+            isEnable: isEnableFn,
+            renderPopup: (props) => <MToolbarImagePopup {...props} />,
         },
         {
             id: 'file',
-            type: ToolbarDataType.ReactComponent,
-            component: MToolbarFile,
-            width: 28,
+            type: ToolbarDataType.ButtonPopup,
+            icon: icons.file,
+            title: i18n('file'),
+            exec: noop,
+            isActive: isActiveFn,
+            isEnable: isEnableFn,
+            renderPopup: (props) => <MToolbarFilePopup {...props} />,
         },
         mTableButton,
         mCheckboxButton,

src/bundle/toolbar/custom/ToolbarFile.tsx

@@ -0,0 +1,84 @@
+import React, {RefObject, useCallback} from 'react';
+
+import {Popup, PopupPlacement} from '@gravity-ui/uikit';
+
+import {FileForm, FileFormProps} from '../../../forms/FileForm';
+import {i18n} from '../../../i18n/forms';
+import {useBooleanState} from '../../../react-utils/hooks';
+import {useToaster} from '../../../react-utils/toaster';
+import type {ToolbarBaseProps} from '../../../toolbar';
+import {BatchUploadResult, FileUploadHandler, batchUploadFiles} from '../../../utils/upload';
+
+const placement: PopupPlacement = ['bottom-start', 'top-start', 'bottom-end', 'top-end'];
+
+export type ToolbarFilePopupProps = Omit<ToolbarBaseProps<never>, 'editor'> & {
+    hide: () => void;
+    anchorRef: RefObject<HTMLElement>;
+
+    uploadHandler?: FileUploadHandler;
+    onSuccessUpload?: (result: BatchUploadResult) => void;
+} & Pick<FileFormProps, 'onSubmit'>;
+
+export const ToolbarFilePopup: React.FC<ToolbarFilePopupProps> = ({
+    className,
+    hide,
+    anchorRef,
+
+    onSubmit,
+    focus,
+    onClick,
+    uploadHandler,
+    onSuccessUpload,
+}) => {
+    const toaster = useToaster();
+    const [loading, showLoading, hideLoading] = useBooleanState(false);
+
+    const handleCancel = useCallback(() => {
+        hide();
+        focus();
+    }, [focus, hide]);
+
+    return (
+        <Popup
+            open
+            onClose={handleCancel}
+            anchorRef={anchorRef}
+            placement={placement}
+            className={className}
+        >
+            <FileForm
+                autoFocus
+                onAttach={
+                    uploadHandler &&
+                    ((files) => {
+                        showLoading();
+                        batchUploadFiles(files, uploadHandler).then(
+                            (res) => {
+                                hideLoading();
+                                hide();
+                                onSuccessUpload?.(res);
+                            },
+                            (error) => {
+                                hideLoading();
+                                toaster.add({
+                                    theme: 'danger',
+                                    name: 'toolbar_file_upload',
+                                    title: i18n('file_upload_failed'),
+                                    content: String(error),
+                                });
+                            },
+                        );
+                    })
+                }
+                onCancel={handleCancel}
+                onSubmit={(data) => {
+                    hide();
+                    focus();
+                    onSubmit(data);
+                    onClick?.('addFile');
+                }}
+                loading={loading}
+            />
+        </Popup>
+    );
+};