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!!
Got it working by rewriting parts of the media client
Very hacky but it works
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hii, @Fabio Moretti have you find any solution which works with legacyUploadImage?
Thanks
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Let us know if you find the solution with the legacyUploadImage, thanks you.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
@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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.