diff --git a/src/examples/images.tsx b/src/examples/images.tsx index 1ee3b422..8e218230 100644 --- a/src/examples/images.tsx +++ b/src/examples/images.tsx @@ -29,6 +29,30 @@ some more some ` +export const ImageWithNoBackend: Story<{ readOnly: boolean }> = () => { + return ( + <> + ( + + + + ) + }) + ]} + onChange={console.log} + /> + + ) +} + export const ImageWithBackend: Story<{ readOnly: boolean }> = () => { return ( <> diff --git a/src/plugins/image/ImageDialog.tsx b/src/plugins/image/ImageDialog.tsx index 38c81536..73de3089 100644 --- a/src/plugins/image/ImageDialog.tsx +++ b/src/plugins/image/ImageDialog.tsx @@ -4,7 +4,7 @@ import React from 'react' import { useForm } from 'react-hook-form' import styles from '../../styles/ui.module.css' import { editorRootElementRef$, useTranslation } from '../core/index' -import { closeImageDialog$, imageAutocompleteSuggestions$, imageDialogState$, saveImage$ } from './index' +import { closeImageDialog$, imageAutocompleteSuggestions$, imageDialogState$, imageUploadHandler$, saveImage$ } from './index' import { DownshiftAutoComplete } from '../core/ui/DownshiftAutoComplete' import { useCellValues, usePublisher } from '@mdxeditor/gurx' @@ -16,10 +16,11 @@ interface ImageFormFields { } export const ImageDialog: React.FC = () => { - const [imageAutocompleteSuggestions, state, editorRootElementRef] = useCellValues( + const [imageAutocompleteSuggestions, state, editorRootElementRef, imageUploadHandler] = useCellValues( imageAutocompleteSuggestions$, imageDialogState$, - editorRootElementRef$ + editorRootElementRef$, + imageUploadHandler$ ) const saveImage = usePublisher(saveImage$) const closeImageDialog = usePublisher(closeImageDialog$) @@ -57,13 +58,19 @@ export const ImageDialog: React.FC = () => { }} className={styles.multiFieldForm} > -
- - -
+ {imageUploadHandler !== null && ( +
+ + +
+ )}
- + ( DRAGSTART_COMMAND, (event) => { + if (!theUploadHandler) { + return false + } return onDragStart(event) }, COMMAND_PRIORITY_HIGH