feat(ImgSize): added ability to render custom form in image widget (#639)

d3m1d0v · web-flow · commit b52945349472 · 2025-02-19T20:38:32.000+03:00
diff --git a/demo/stories/examples/img-custom-form/ImageCustomForm.stories.tsx b/demo/stories/examples/img-custom-form/ImageCustomForm.stories.tsx
@@ -0,0 +1,13 @@
+import type {StoryObj} from '@storybook/react';
+
+import {ImageCustomFormDemo as component} from './ImageCustomForm';
+
+export const Story: StoryObj<typeof component> = {
+    args: {},
+};
+Story.storyName = 'Custom Image Widget';
+
+export default {
+    title: 'Examples / Custom Image Widget',
+    component,
+};
diff --git a/demo/stories/examples/img-custom-form/ImageCustomForm.tsx b/demo/stories/examples/img-custom-form/ImageCustomForm.tsx
@@ -0,0 +1,128 @@
+import {memo} from 'react';
+
+import {FilePlus} from '@gravity-ui/icons';
+import {Button, FilePreview, Icon, useFileInput} from '@gravity-ui/uikit';
+
+import {type ImgSizeOptions, MarkdownEditorView, useMarkdownEditor} from '../../../../src';
+import {PlaygroundLayout} from '../../../components/PlaygroundLayout';
+import {randomDelay} from '../../../utils/delay';
+
+type RenderImageWidgetFormFn = NonNullable<ImgSizeOptions['renderImageWidgetForm']>;
+type RenderImageWidgetFormProps = Parameters<RenderImageWidgetFormFn>[0];
+
+const ImageForm = memo<RenderImageWidgetFormProps>(function ImageForm({onSubmit, onAttach}) {
+    const {controlProps, triggerProps} = useFileInput({onUpdate: onAttach});
+
+    return (
+        <div
+            style={{
+                display: 'grid',
+                padding: '12px 16px',
+                justifyItems: 'center',
+                alignItems: 'center',
+                gridTemplateColumns: 'repeat(3, 1fr)',
+                gridGap: 8,
+            }}
+        >
+            {/* Rendering previews for images */}
+            {getImages().map(({id, url}) => {
+                const name = id;
+                return (
+                    <FilePreview
+                        key={id}
+                        imageSrc={url}
+                        file={{name, type: 'image/png'} as File}
+                        onClick={() => onSubmit({url, name, alt: '', width: 320, height: 320})}
+                    />
+                );
+            })}
+
+            {/* Rendering a button for uploading images from device */}
+            <Button
+                size="xl"
+                view="flat-secondary"
+                width="max"
+                style={
+                    {
+                        '--g-button-height': '100%',
+                        '--g-button-border-radius': '4px',
+                    } as React.CSSProperties
+                }
+                {...triggerProps}
+            >
+                <Icon data={FilePlus} width={36} height={36} />
+            </Button>
+            <input type="file" multiple={false} accept="image/*" {...controlProps} />
+        </div>
+    );
+});
+
+export const ImageCustomFormDemo = memo(() => {
+    const editor = useMarkdownEditor({
+        initial: {
+            mode: 'wysiwyg',
+            markup: '&nbsp;\n\nClick the `Image` action on the toolbar or select it from the slash `/` menu.',
+        },
+        handlers: {
+            uploadFile: async (file) => {
+                await randomDelay(1000, 3000);
+                return {url: URL.createObjectURL(file)};
+            },
+        },
+        wysiwygConfig: {
+            extensionOptions: {
+                imgSize: {
+                    // pass a function to render custom form in the image widget
+                    renderImageWidgetForm: (props) => <ImageForm {...props} />,
+                },
+            },
+        },
+    });
+
+    return (
+        <PlaygroundLayout
+            editor={editor}
+            view={({className}) => (
+                <MarkdownEditorView
+                    autofocus
+                    stickyToolbar
+                    settingsVisible
+                    editor={editor}
+                    className={className}
+                />
+            )}
+        />
+    );
+});
+
+ImageCustomFormDemo.displayName = 'ImageCustomFormDemo';
+
+type ImageItem = {
+    id: string;
+    url: string;
+};
+
+function getImages(): ImageItem[] {
+    return [
+        {
+            id: 'low',
+            url: 'https://avatars.mds.yandex.net/get-shedevrum/14441318/img_1c3b6b42eee211efad66ea120268400c/orig',
+        },
+        {
+            id: 'unsatisfactory',
+            url: 'https://avatars.mds.yandex.net/get-shedevrum/15170052/img_7ba17345eee211efa1d9c61932b2752e/orig',
+        },
+        {
+            id: 'good',
+            url: 'https://avatars.mds.yandex.net/get-shedevrum/16106905/img_26cb5157eee311efb16cf600b5cb441c/orig',
+        },
+        {
+            id: 'outstanding',
+            url: 'https://avatars.mds.yandex.net/get-shedevrum/14441318/img_834891dceee111ef80908e055cc35a5d/orig',
+        },
+        {
+            id: 'amazing',
+            url: 'https://avatars.mds.yandex.net/get-shedevrum/15320627/img_d62906eeeee211ef9e61968caa0a2b17/orig',
+        },
+    ];
+}
diff --git a/src/extensions/yfm/ImgSize/ImageWidget/index.ts b/src/extensions/yfm/ImgSize/ImageWidget/index.ts
@@ -2,6 +2,7 @@ import type {Action, ExtensionAuto} from '../../../../core';
 import type {FileUploadHandler} from '../../../../utils/upload';
 
 import {addImageWidget} from './actions';
+import type {RenderImageWidgetFormFn} from './view';
 import type {ImageWidgetDescriptorOpts} from './widget';
 
 const addImageWidgetAction = 'addImageWidget';
@@ -11,12 +12,14 @@ export type ImageWidgetOptions = Pick<
     'needToSetDimensionsForUploadedImages' | 'enableNewImageSizeCalculation'
 > & {
     imageUploadHandler?: FileUploadHandler;
+    renderImageWidgetForm?: RenderImageWidgetFormFn;
 };
 
 export const ImageWidget: ExtensionAuto<ImageWidgetOptions> = (builder, opts) => {
     builder.addAction(addImageWidgetAction, (deps) =>
         addImageWidget(deps, {
             uploadImages: opts.imageUploadHandler,
+            renderImageForm: opts.renderImageWidgetForm,
             needToSetDimensionsForUploadedImages: opts.needToSetDimensionsForUploadedImages,
             enableNewImageSizeCalculation: opts.enableNewImageSizeCalculation,
         }),
diff --git a/src/extensions/yfm/ImgSize/ImageWidget/view.tsx b/src/extensions/yfm/ImgSize/ImageWidget/view.tsx
@@ -5,7 +5,11 @@ import {Icon, Popup, type PopupPlacement} from '@gravity-ui/uikit';
 import {useMountedState} from 'react-use';
 
 import {cn} from '../../../../classname';
-import {ImageForm, type ImageFormProps} from '../../../../forms/ImageForm';
+import {
+    ImageForm,
+    type ImageFormProps,
+    type ImageFormSubmitParams,
+} from '../../../../forms/ImageForm';
 import {i18n} from '../../../../i18n/widgets';
 import {useBooleanState, useElementState} from '../../../../react-utils/hooks';
 
@@ -14,29 +18,59 @@ import './view.scss';
 const b = cn('image-placeholder');
 const placement: PopupPlacement = ['bottom-start', 'top-start', 'bottom-end', 'top-end'];
 
-export type FilePlaceholderProps = {
+export type RenderImageWidgetFormProps = {
+    /** Handler for submitting form */
+    onSubmit: (params: ImageFormSubmitParams) => void;
+    /** Handler for cancellation */
+    onCancel: () => void;
+    /** Handler for attach file from device */
+    onAttach?: (files: File[]) => void;
+    /** Uploading attached file */
+    uploading?: boolean;
+};
+export type RenderImageWidgetFormFn = (props: RenderImageWidgetFormProps) => React.ReactNode;
+
+const defaultFormRenderer: RenderImageWidgetFormFn = (props) => {
+    return (
+        <ImageForm
+            autoFocus
+            loading={props.uploading}
+            onCancel={props.onCancel}
+            onSubmit={props.onSubmit}
+            onAttach={props.onAttach}
+        />
+    );
+};
+
+export type ImagePlaceholderProps = {
     onCancel: () => void;
     onSubmit: ImageFormProps['onSubmit'];
     onAttach?: (files: File[]) => Promise<void>;
+    renderForm?: RenderImageWidgetFormFn;
 };
 
-export const FilePlaceholder: React.FC<FilePlaceholderProps> = ({onCancel, onSubmit, onAttach}) => {
+export const ImagePlaceholder: React.FC<ImagePlaceholderProps> = ({
+    onCancel,
+    onSubmit,
+    onAttach,
+    renderForm,
+}) => {
     const isMounted = useMountedState();
-    const [loading, showLoading, hideLoading] = useBooleanState(false);
+    const [uploading, startUploading, stopUploading] = useBooleanState(false);
     const [anchor, setAnchor] = useElementState();
     const attachHandler = useCallback<NonNullable<ImageFormProps['onAttach']>>(
         (files) => {
             if (!onAttach) return;
             if (isMounted()) {
-                showLoading();
+                startUploading();
                 onAttach(files).finally(() => {
                     if (isMounted()) {
-                        hideLoading();
+                        stopUploading();
                     }
                 });
             }
         },
-        [isMounted, onAttach, showLoading, hideLoading],
+        [isMounted, onAttach, startUploading, stopUploading],
     );
 
     return (
@@ -46,13 +80,12 @@ export const FilePlaceholder: React.FC<FilePlaceholderProps> = ({onCancel, onSub
                 {i18n('image')}
             </div>
             <Popup open modal onOpenChange={onCancel} anchorElement={anchor} placement={placement}>
-                <ImageForm
-                    autoFocus
-                    loading={loading}
-                    onCancel={onCancel}
-                    onSubmit={onSubmit}
-                    onAttach={onAttach && attachHandler}
-                />
+                {(renderForm || defaultFormRenderer)({
+                    onCancel,
+                    onSubmit,
+                    uploading,
+                    onAttach: onAttach && attachHandler,
+                })}
             </Popup>
         </>
     );
diff --git a/src/extensions/yfm/ImgSize/ImageWidget/widget.tsx b/src/extensions/yfm/ImgSize/ImageWidget/widget.tsx
@@ -10,7 +10,7 @@ import {imageType, normalizeUrlFactory} from '../../../markdown';
 import {ImgSizeAttr} from '../../../specs';
 import {ImagesUploadProcess} from '../ImagePaste/upload';
 
-import {FilePlaceholder, type FilePlaceholderProps} from './view';
+import {ImagePlaceholder, type ImagePlaceholderProps, type RenderImageWidgetFormFn} from './view';
 
 export const addWidget = (
     tr: Transaction,
@@ -26,6 +26,7 @@ export type ImageWidgetDescriptorOpts = {
     needToSetDimensionsForUploadedImages: boolean;
     uploadImages?: FileUploadHandler;
     enableNewImageSizeCalculation?: boolean;
+    renderImageForm?: RenderImageWidgetFormFn;
 };
 
 class ImageWidgetDescriptor extends ReactWidgetDescriptor {
@@ -34,6 +35,7 @@ class ImageWidgetDescriptor extends ReactWidgetDescriptor {
     private readonly uploadImages;
     private readonly needToSetDimensionsForUploadedImages: boolean;
     private readonly enableNewImageSizeCalculation?: boolean;
+    private readonly renderImageForm: RenderImageWidgetFormFn | undefined;
 
     private widgetHandler: ImageWidgetHandler | null = null;
 
@@ -42,6 +44,7 @@ class ImageWidgetDescriptor extends ReactWidgetDescriptor {
         this.domElem = document.createElement('span');
         this.deps = deps;
         this.uploadImages = opts.uploadImages;
+        this.renderImageForm = opts.renderImageForm;
         this.needToSetDimensionsForUploadedImages = opts.needToSetDimensionsForUploadedImages;
         this.enableNewImageSizeCalculation = opts.enableNewImageSizeCalculation;
     }
@@ -54,6 +57,7 @@ class ImageWidgetDescriptor extends ReactWidgetDescriptor {
                     getPos,
                     decoId: this.id,
                     uploadImages: this.uploadImages,
+                    renderImageForm: this.renderImageForm,
                     needToSetDimensionsForUploadedImages: this.needToSetDimensionsForUploadedImages,
                     enableNewImageSizeCalculation: this.enableNewImageSizeCalculation,
                 },
@@ -83,6 +87,7 @@ type ImageWidgetHandlerProps = {
     view: EditorView;
     getPos: () => number;
     uploadImages?: FileUploadHandler;
+    renderImageForm?: RenderImageWidgetFormFn;
     needToSetDimensionsForUploadedImages: boolean;
     enableNewImageSizeCalculation?: boolean;
 };
@@ -96,6 +101,7 @@ class ImageWidgetHandler {
     private readonly normalizeUrl;
     private readonly needToSetDimensionsForUploadedImages: boolean;
     private readonly enableNewImageSizeCalculation?: boolean;
+    private readonly renderImageForm: RenderImageWidgetFormFn | undefined;
 
     private cancelled = false;
 
@@ -105,6 +111,7 @@ class ImageWidgetHandler {
             view,
             getPos,
             uploadImages,
+            renderImageForm,
             needToSetDimensionsForUploadedImages,
             enableNewImageSizeCalculation,
         }: ImageWidgetHandlerProps,
@@ -115,6 +122,7 @@ class ImageWidgetHandler {
         this.getPos = getPos;
         this.uploadImages = uploadImages;
         this.normalizeUrl = normalizeUrlFactory(deps);
+        this.renderImageForm = renderImageForm;
         this.needToSetDimensionsForUploadedImages = needToSetDimensionsForUploadedImages;
         this.enableNewImageSizeCalculation = enableNewImageSizeCalculation;
     }
@@ -127,21 +135,22 @@ class ImageWidgetHandler {
         this.view = view;
         this.getPos = getPos;
         return (
-            <FilePlaceholder
+            <ImagePlaceholder
                 onCancel={this.onCancel}
                 onSubmit={this.onSubmit}
                 onAttach={this.uploadImages && this.onAttach}
+                renderForm={this.renderImageForm}
             />
         );
     }
 
-    private onCancel: FilePlaceholderProps['onCancel'] = () => {
+    private onCancel: ImagePlaceholderProps['onCancel'] = () => {
         this.cancelled = true;
         this.view.dispatch(removeDecoration(this.view.state.tr, this.decoId));
         this.view.focus();
     };
 
-    private onSubmit: FilePlaceholderProps['onSubmit'] = (params) => {
+    private onSubmit: ImagePlaceholderProps['onSubmit'] = (params) => {
         if (this.cancelled) return;
 
         const url = this.normalizeUrl(params.url)?.url;
@@ -159,7 +168,7 @@ class ImageWidgetHandler {
         this.insertNodes([node]);
     };
 
-    private onAttach: FilePlaceholderProps['onAttach'] = async (files) => {
+    private onAttach: ImagePlaceholderProps['onAttach'] = async (files) => {
         if (this.cancelled || !this.uploadImages) return;
 
         const {view} = this;
diff --git a/src/extensions/yfm/ImgSize/index.ts b/src/extensions/yfm/ImgSize/index.ts
@@ -1,7 +1,7 @@
 import type {Action, ExtensionAuto} from '../../../core';
 
 import {ImagePaste, type ImagePasteOptions} from './ImagePaste';
-import {ImageWidget} from './ImageWidget';
+import {ImageWidget, type ImageWidgetOptions} from './ImageWidget';
 import {ImgSizeSpecs, type ImgSizeSpecsOptions} from './ImgSizeSpecs';
 import {type AddImageAttrs, addImage} from './actions';
 import {addImageAction} from './const';
@@ -17,13 +17,15 @@ export type ImgSizeOptions = ImgSizeSpecsOptions & {
 } & Pick<
         ImagePasteOptions,
         'imageUploadHandler' | 'parseInsertedUrlAsImage' | 'enableNewImageSizeCalculation'
-    >;
+    > &
+    Pick<ImageWidgetOptions, 'renderImageWidgetForm'>;
 
 export const ImgSize: ExtensionAuto<ImgSizeOptions> = (builder, opts) => {
     builder.use(ImgSizeSpecs, opts);
 
     builder.use(ImageWidget, {
         imageUploadHandler: opts.imageUploadHandler,
+        renderImageWidgetForm: opts.renderImageWidgetForm,
         needToSetDimensionsForUploadedImages: Boolean(opts.needToSetDimensionsForUploadedImages),
         enableNewImageSizeCalculation: Boolean(opts.enableNewImageSizeCalculation),
     });
