Cannot properly initialize the editor component in Jira Cloud with all its modules

vrutkevich · August 17, 2020, 8:23am

Hi All!
Have you ever tried to connect the editor component with its components?
We have the following code:

import {Editor, EditorContext} from '@atlaskit/editor-core';
import {EmojiResource} from '@atlaskit/emoji/resource';
this.emojiProvider = new EmojiResource({
            providers: [
                {
                    url: '/emoji/standard',
                    securityProvider: () => ({headers: {Authorization: 'JWT ' + meta.get('token')}}),
                }
            ],
        });
<EditorContext>
    <Editor appearance="full-width"
        emojiProvider={this.emojiProvider}
        contentTransformerProvider={schema => new JIRATransformer(schema)}
    />
</EditorContext>

But all the time we are receiving the following errors:

ascii-input-rules.js?58b7:22 Uncaught TypeError: provider.then is not a function
at handleProvider (ascii-input-rules.js?58b7:22)
at eval (provider-factory.js?d294:82)
at Array.forEach (<anonymous>)
at ProviderFactory.notifyUpdated (provider-factory.js?d294:81)
at ProviderFactory.setProvider (provider-factory.js?d294:35)
at Editor.handleProviders (editor.js?938a:181)
at Editor.componentDidMount (editor.js?938a:100)
at commitLifeCycles (react-dom.development.js?61bb:19814)
at commitLayoutEffects (react-dom.development.js?61bb:22803)
at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:237)
at invokeGuardedCallback (react-dom.development.js?61bb:292)
at commitRootImpl (react-dom.development.js?61bb:22541)
at unstable_runWithPriority (scheduler.development.js?3069:653)
at runWithPriority$1 (react-dom.development.js?61bb:11039)
at commitRoot (react-dom.development.js?61bb:22381)
at finishSyncRender (react-dom.development.js?61bb:21807)
at performSyncWorkOnRoot (react-dom.development.js?61bb:21793)
at eval (react-dom.development.js?61bb:11089)
at unstable_runWithPriority (scheduler.development.js?3069:653)
at runWithPriority$1 (react-dom.development.js?61bb:11039)
at flushSyncCallbackQueueImpl (react-dom.development.js?61bb:11084)
at flushSyncCallbackQueue (react-dom.development.js?61bb:11072)
at discreteUpdates$1 (react-dom.development.js?61bb:21893)
at discreteUpdates (react-dom.development.js?61bb:806)
at dispatchDiscreteEvent (react-dom.development.js?61bb:4168)

LoadingEmojiComponent.js?fbd2:38 Uncaught TypeError: futureEmojiProvider.then is not a function
at ResourcedEmoji.LoadingEmojiComponent.loadEmojiProvider (LoadingEmojiComponent.js?fbd2:38)
at ResourcedEmoji.LoadingEmojiComponent [as constructor] (LoadingEmojiComponent.js?fbd2:18)
at new ResourcedEmoji (ResourcedEmoji.js?21e0:14)
at constructClassInstance (react-dom.development.js?61bb:12880)
at updateClassComponent (react-dom.development.js?61bb:17100)
at beginWork (react-dom.development.js?61bb:18620)
at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:237)
at invokeGuardedCallback (react-dom.development.js?61bb:292)
at beginWork$1 (react-dom.development.js?61bb:23203)
at performUnitOfWork (react-dom.development.js?61bb:22157)
at workLoopSync (react-dom.development.js?61bb:22130)
at performSyncWorkOnRoot (react-dom.development.js?61bb:21756)
at eval (react-dom.development.js?61bb:11089)
at unstable_runWithPriority (scheduler.development.js?3069:653)
at runWithPriority$1 (react-dom.development.js?61bb:11039)
at flushSyncCallbackQueueImpl (react-dom.development.js?61bb:11084)
at flushSyncCallbackQueue (react-dom.development.js?61bb:11072)
at discreteUpdates$1 (react-dom.development.js?61bb:21893)
at discreteUpdates (react-dom.development.js?61bb:806)
at dispatchDiscreteEvent (react-dom.development.js?61bb:4168)

Any ideas how overpass this will be greatly appreciated.
The editor component without modules is initialized, but this is not enough.
Thanks.

Sincerely, Vadim

dmorrow · August 17, 2020, 11:51am

Hi @vrutkevich,

I think this question should be posted in the Ecosystem Design Category.

Regards,
Dugald

vrutkevich · August 17, 2020, 12:04pm

Hi @dmorrow!
Thanks. Moved to the Ecosystem Design.

Sincerely, Vadim

vrutkevich · August 21, 2020, 5:16pm

Hi @douges!
Could you please provide any input or advise who can help with this. Any help will be greatly appreciated.
Thanks.

Sincerely, Vadim

andreas.schmidt · August 24, 2020, 11:49am

Based on the error I’d try this:

this.emojiProvider = new EmojiResource({
            providers: Promise.resolve([
                {
                    url: '/emoji/standard',
                    securityProvider: () => ({headers: {Authorization: 'JWT ' + meta.get('token')}}),
                }
            ]),
        });

vrutkevich · August 24, 2020, 1:39pm

Thanks @andreas.schmidt, will try this.

douges · August 24, 2020, 10:12pm

i’ll find someone internally to help you

vrutkevich · August 25, 2020, 11:43am

Thanks @douges. Here’s my email for contact vrutkevich@stiltsoft.com.
Thanks.

Sincerely, Vadim

vrutkevich · August 25, 2020, 12:39pm

@pstreule could you please advise on this issue. We greatly need your input on this.
Many thanks.

Sincerely, Vadim

tthanhdang · August 26, 2020, 1:13am

Hi @vrutkevich,

Could you please to try these hints?

Try to use import { EmojiResource } from "@atlaskit/emoji"; not from @atlaskit/emoji/resource.
this.emojiProvider is a promise with resolving an instance of EmojiResource. Currently, you are using this.emojiProvider as an instance of EmojiResource. Basically, the code will look like this

import {Editor, EditorContext} from '@atlaskit/editor-core';
import {EmojiResource} from '@atlaskit/emoji/resource';
...
getEmojiProvider = () => {
       const emojiProvider = new EmojiResource({
            providers: [
                {
                    url: '/emoji/standard',
                    securityProvider: () => ({headers: {Authorization: 'JWT ' + meta.get('token')}}),
                }
            ],
        });

  return Promise.resolve(emojiProvider);
}

...

<EditorContext>
    <Editor appearance="full-width"
        emojiProvider={this.getEmojiProvider()}
        contentTransformerProvider={schema => new JIRATransformer(schema)}
    />
</EditorContext>

If you use Typescript, I guess you would get type complains when you pass a wrong type of emojiProvider prop to Editor. I hope this may help.

aovsyannikov · August 26, 2020, 2:42pm

Hi @tthanhdang,

Thanks a lot for your help.
I was able to implement emojiProvider and it works.
Unfortunately, I came across another issue with metionProvider. I couldn’t find REST API response format. I’ve tried the same as Jira Cloud uses (/rest/internal/2/userteam/mention/search)

[{accountId: '', avatarUrl: '', name: '', type: 'USER'}, ...]

It doesn’t work (popup doesn’t appear and button doesn’t work) and there are no errors. Please advise on this.

We need all modules to work correctly. Please give me some examples for the following modules: macroProvider, mediaProvider.

Regards,
Alexander

vrutkevich · August 31, 2020, 6:57am

Hi @tthanhdang,
Could you please advise on the user mentions module. Is it possible to get the source code or some guide how you initialize modules in Jira Cloud?
Thanks.

Sincerely, Vadim

tthanhdang · September 4, 2020, 3:02pm

Hi @vrutkevich and @aovsyannikov,

Since I am not working in Jira Cloud team. I used to work with Editor 2 years ago so my knowledge about the Editor is out of update now and Editor is very big and complex component. I am not sure whether there is a public source of @atlaskit/editor-core or not.
About your question about mentionProvider, I tried to search about it in Confluence Frontend (it’s Atlassian internal repository), here is what I understand:

import { MentionProvider, MentionResource } from "@atlaskit/editor-core";

...
getMentionProvider = (): Promise<MentionProvider> => {
  const USER_MENTION_SERVICE_URL = "/gateway/api/mentions";

  const userMentionConfig = {
    url: `${USER_MENTION_SERVICE_URL}/${cloudId}`,
    productId: "micros-group/confluence",
    containerId: spaceId ? spaceId : null,
    shouldHighlightMention: (mention) => mention.id === accountId,
  };

  const mentionResource = new MentionResource(userMentionConfig);
  return Promise.resolve(mentionResource);
}

...

<EditorContext>
    <Editor
       mentionProvider={this.getMentionProvider()}
    />
</EditorContext>

Actual source code to initialise the mentionProvider in Confluence is quite long and spread in some files. The above example is a short version which I can understand and transfer it in this comment.

Regards,
Tung.

JesusQuintana · October 1, 2020, 10:27pm

Hi! @vrutkevich !
I work from the Editor Team, I am trying to understand the user case.

Do you want to setup the Editor using Atlassian Services?, or are you implementing your own backend services?

To give you more insigth, the Editor itself does not implement any comunication with backend services, it uses providers to do this job (Provider has to be provided by the consumer of the editor). In theory, you can create your own provider, the only requirement is that they have to follow the correct type that you can find in @atlaskit/editor-common/provider-factory (Providers).

As you mention, each team offers his own provider configuration to be used with the respective related service, if you want to use this with your own backend service, you might need to implement a similar response, and in theory it should work (not my area of expertise).

You can find mention response type in @atlaskit/mention/types under the name MentionResult.

Best,
Jesús

vrutkevich · October 5, 2020, 8:50am

Hi @JesusQuintana ,
Thanks for taking a look at this issue. The developer will send a direct message to you shortly.
We want to provide a capability to edit the Summary / Environment field with all its capabilities within our app. As of now, we have issue with the media editor module, without it, all the content of the field is reset.

The developer will provide all the details regarding the use case.
Thanks.

Sincerely, Vadim

UmeshChaudhary · November 19, 2024, 8:38am

Hello there!
I am trying to implement the emoji on our editor as well.
However the above mentioned solution didn’t worked for me.

  const getEmojiProvider = () => {
    const emojiProvider = new EmojiResource({
      providers: [
                {
                    url: '/emoji/standard',
                }
            ],
        });

  return Promise.resolve(emojiProvider);
}

I get error:

Error: failed to fetch emoji from /emoji/standard

Is the solution still valid?
I couldn’t find a proper documentation about this anywhere else too.

Thanks!