feat(react-tinacms-editor): media mgr opens from uploadDir

tinacms · Oct 12, 2020 · 7e1b133 · 7e1b133
1 parent f58eaf6
commit 7e1b133
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 9 deletions.
diff --git a/packages/react-tinacms-editor/src/components/ProsemirrorEditor/Menubar/index.tsx b/packages/react-tinacms-editor/src/components/ProsemirrorEditor/Menubar/index.tsx
@@ -38,14 +38,21 @@ import { LinkForm as LinkFormPopup } from '../../../plugins/Link'
 import { Plugin } from '../../../types'
 import { useEditorStateContext } from '../../../context/editorState'
 import { BaseMenubar } from '../../BaseMenubar'
+import { ImageProps } from '../../../types'
 
 interface Props {
  sticky?: boolean | string
  uploadImages?: (files: File[]) => Promise<string[]>
+ uploadDir?: ImageProps['uploadDir']
  plugins?: Plugin[]
 }
 
-export const Menubar = ({ plugins, uploadImages, ...rest }: Props) => {
+export const Menubar = ({
+ plugins,
+ uploadImages,
+ uploadDir,
+ ...rest
+}: Props) => {
  const { editorView } = useEditorStateContext()
 
  if (!editorView) return null
@@ -57,7 +64,11 @@ export const Menubar = ({ plugins, uploadImages, ...rest }: Props) => {
  <BlockMenu key="BlockMenu" />,
  <InlineMenu key="InlineMenu" />,
  <LinkMenu key="LinkMenu" />,
- <ImageMenu key="ImageMenu" uploadImages={uploadImages} />,
+ <ImageMenu
+ key="ImageMenu"
+ uploadImages={uploadImages}
+ uploadDir={uploadDir}
+ />,
  <TableMenu key="TableMenu" />,
  <QuoteMenu key="QuoteMenu" />,
  <CodeBlockMenu key="CodeBlockMenu" />,

diff --git a/packages/react-tinacms-editor/src/components/ProsemirrorEditor/index.tsx b/packages/react-tinacms-editor/src/components/ProsemirrorEditor/index.tsx
@@ -83,6 +83,11 @@ export const ProsemirrorEditor = styled(
  <Menubar
  sticky={sticky}
  uploadImages={imageProps && imageProps.upload}
+ uploadDir={
+ imageProps && typeof imageProps.uploadDir === 'string'
+ ? imageProps.uploadDir
+ : undefined
+ }
  plugins={plugins}
  />
  </EditorStateProvider>

diff --git a/packages/react-tinacms-editor/src/components/Wysiwyg/index.tsx b/packages/react-tinacms-editor/src/components/Wysiwyg/index.tsx
@@ -105,12 +105,15 @@ function useImageProps(
  React.useMemo(() => {
  if (!passedInImageProps) return
  const { uploadDir, parse } = passedInImageProps
- const directory = uploadDir && form ? uploadDir(form.values) : ''
+ const _uploadDir: string =
+ uploadDir && form && typeof uploadDir !== 'string'
+ ? uploadDir(form.values)
+ : ''
 
  setImageProps({
  async upload(files: File[]): Promise<string[]> {
  const filesToUpload = files.map(file => ({
- directory,
+ directory: _uploadDir,
  file,
  }))
 
@@ -127,6 +130,7 @@ function useImageProps(
  previewSrc(src: string) {
  return cms.media.previewSrc(src)
  },
+ uploadDir: _uploadDir,
  ...passedInImageProps,
  })
  }, [

diff --git a/packages/react-tinacms-editor/src/plugins/Image/Menu/ProsemirrorMenu.tsx b/packages/react-tinacms-editor/src/plugins/Image/Menu/ProsemirrorMenu.tsx
@@ -28,12 +28,14 @@ import { MediaIcon, UploadIcon, CloseIcon } from '@tinacms/icons'
 import { MenuButton, MenuDropdown } from '../../../components/MenuHelpers'
 import { useEditorStateContext } from '../../../context/editorState'
 import { insertImage } from '../commands'
+import { ImageProps } from '../../../types'
 
 export interface MenuProps {
  uploadImages?: (files: File[]) => Promise<string[]>
+ uploadDir?: ImageProps['uploadDir']
 }
 
-export const ProsemirrorMenu = ({ uploadImages }: MenuProps) => {
+export const ProsemirrorMenu = ({ uploadImages, uploadDir }: MenuProps) => {
  const cms = useCMS()
  const menuButtonRef = useRef()
  const { editorView } = useEditorStateContext()
@@ -121,10 +123,8 @@ export const ProsemirrorMenu = ({ uploadImages }: MenuProps) => {
  <ImageModalContent>
  <UploadSection
  onClick={() => {
- // TODO: get uploadDir here
- const directory = '/'
  cms.media.open({
- directory,
+ directory: typeof uploadDir === 'string' ? uploadDir : '/',
  onSelect: onMediaSelect,
  })
  }}

diff --git a/packages/react-tinacms-editor/src/types.ts b/packages/react-tinacms-editor/src/types.ts
@@ -27,7 +27,7 @@ import { Form, Media } from 'tinacms'
 
 export interface ImageProps {
  parse(media: Media): string
- uploadDir?(formValues: any): string
+ uploadDir?: ((formValues: any) => string) | string
  upload?: (files: File[]) => Promise<string[]>
  previewSrc?: (url: string) => string | Promise<string>
 }