How to specify a custom Media Client in Atlaskit especially @atlaskit/editor-core

Fabio Moretti March 2, 2021

I'm trying to use @atlaskit/editor-core in a project and want to specify my own Fileserver/MediaClient. But apparently this is very hard to accomplish since I can only set the Auth Provider and not the Media Provider in the Editor.

 

Atlasskit does provide a function, where I could mock the client and instead of really mocking I could inject my own client this way... but is this really the best option?

Since the documentation on @atlaskit/editor-core is fairly basic, I do not know where else to look...

Findings so far: with the following line the mocking can be enabled.

import { mediaMock } from '@atlaskit/media-test-helpers'
mediaMock.enable()

Minimal Example:

import React from 'react';
import { MediaProvider } from '@atlaskit/editor-common';
import { Editor } from '@atlaskit/editor-core';
import { MediaClientConfig } from '@atlaskit/media-core';
import { mediaMock, mediaPickerAuthProvider } from '@atlaskit/media-test-helpers';

mediaMock.enable();


// Crreating basic MediaProvider
const collection = 'sample-collection';
const mediaClientConfig: MediaClientConfig = {
  authProvider: mediaPickerAuthProvider(),
};

const mediaProvider = Promise.resolve<MediaProvider>({
  uploadParams: { collection },
  viewMediaClientConfig: mediaClientConfig,
  uploadMediaClientConfig: mediaClientConfig,
});

export const EditorMinimal = () => {
  return (
    <Editor
      appearance="full-page"
      media={{
        provider: mediaProvider,
        allowResizing: true,
        allowMediaSingle: true,
        useMediaPickerPopup: false,
        allowDropzoneDropLine: true,
        isCopyPasteEnabled: true,
      }}
    />
  );
};


Any link, direction, advise or starting point will be appreciated!!

3 answers

1 accepted

0 votes
Answer accepted
Fabio Moretti March 5, 2021

Got it working by rewriting parts of the media client

0 votes
Darshak Patel
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
October 27, 2021

Hii, @Fabio Moretti  have you find any solution which works with legacyUploadImage?

Thanks

Carlos Sandoval
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
March 3, 2021

Let us know if you find the solution with the legacyUploadImage, thanks you.

Darshak Patel
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
July 18, 2024

@Carlos Sandoval I apologize for the delayed response to your comment. You will need to write custom backend code to handle the images you are copying and pasting into the editor-core

What we have done is, once you upload an image into the editor core, legacyUploadImage gives you the capability to get the data from the clipboard. You can then upload that data internally to AWS or another service, and use the resulting AWS image URL to pass that to callback function provided by legacyUploadImage.

Of course, you will need to handle authentication to ensure that your data is secure and not exposed to unauthorized access.

PS: this work's with images only.

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events