How can I optimize project building with atlaskit editor-core. Bundled.app.js is too big

Norbert Tovt March 19, 2024

Dear developers, please, try to help me. I am using webpack 5, after adding the library my projects started to take 12 mb instead of 400 kib as before and project building takes 50-80 seconds.

package.json:

{
"name": "project-name",
"version": "1.0.0",
"private": true,
"sideEffects": false,
"dependencies": {
"@atlaskit/adf-schema": "^35.7.0",
"@atlaskit/avatar": "^20.5.8",
"@atlaskit/comment": "^10.9.4",
"@atlaskit/css-reset": "^6.7.0",
"@atlaskit/editor-core": "^193.3.4",
"@atlaskit/editor-json-transformer": "^8.10.27",
"@atlaskit/editor-test-helpers": "^9.11.13",
"@swc/core": "^1.4.8",
"assert": "^2.1.0",
"buffer": "^6.0.3",
"process": "^0.11.10",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"string_decoder": "^1.3.0",
"util": "^0.12.5",
"uuid": "^9.0.0",
"zustand": "^4.5.2"
},
"scripts": {
"build": "webpack --mode production",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@atlaskit/avatar-group": "^9.5.1",
"@atlaskit/editor-wikimarkup-transformer": "^11.2.44",
"@atlaskit/form": "^9.0.10",
"@atlaskit/modal-dialog": "^12.10.8",
"@atlaskit/renderer": "^109.10.0",
"@atlaskit/textarea": "^5.0.1",
"@atlaskit/util-data-test": "^17.9.15",
"@babel/core": "^7.21.4",
"@babel/plugin-proposal-class-properties": "^7.18.6",
"@babel/plugin-proposal-object-rest-spread": "^7.20.7",
"@babel/plugin-transform-runtime": "^7.24.0",
"@babel/preset-env": "^7.21.4",
"@babel/preset-flow": "^7.21.4",
"@babel/preset-react": "^7.18.6",
"@babel/preset-typescript": "^7.21.4",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/user-event": "^14.4.3",
"@types/prosemirror-transform": "^1.5.0",
"@types/prosemirror-view": "^1.24.0",
"@types/react": "^18.0.5",
"@types/react-dom": "^18.0.1",
"@typescript-eslint/eslint-plugin": "^5.58.0",
"@typescript-eslint/parser": "^5.58.0",
"atlassian-webresource-webpack-plugin": "^5.2.11",
"babel-loader": "^9.1.2",
"css-loader": "^6.10.0",
"eslint": "^8.38.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-jsx-a11y": "^6.7.1",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"style-loader": "^3.3.4",
"terser-webpack-plugin": "^5.3.10",
"typescript": "^4.5.5",
"webpack": "^5.90.3",
"webpack-bundle-analyzer": "^4.10.1",
"webpack-cli": "^5.1.4"
}
}

webpack.config:

const WrmPlugin = require('atlassian-webresource-webpack-plugin');
const path = require('path');
const webpack = require('webpack');
const TerserPlugin = require('terser-webpack-plugin');
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
mode: 'production',
module: {
rules: [
{
test: /\.tsx?$/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
exclude: /node_modules/,
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
watch: true,
entry: {
app: './src/App.tsx',
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
fallback: {
"buffer": require.resolve('buffer/'),
}

},

plugins: [
new WrmPlugin({
pluginKey: '#',
locationPrefix: 'frontend/',
contextMap: {
app: ['app'],
},
watch: true,
xmlDescriptors: path.resolve('../backend/src/main/resources', 'META-INF', 'plugin-descriptors', 'wr-defs.xml'),
}),
new webpack.ProvidePlugin({
Buffer: ['buffer', 'Buffer'],
}),
new webpack.ProvidePlugin({
process: 'process/browser',
}),
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1
}),
// new BundleAnalyzerPlugin(),

],
optimization: {
mangleExports: 'size',
mangleWasmImports: true,
minimize: true,
minimizer: [new TerserPlugin({
exclude: /node_modules/,
minify: TerserPlugin.swcMinify,
parallel: true,
terserOptions: {
compress: true,
mangle: true,
toplevel: true,
module: true,
keep_classnames: false,
keep_fnames: false,
}
})],
nodeEnv: 'production',
removeAvailableModules: true,
innerGraph: true,
usedExports: true
},

output: {
filename: 'bundled.[name].js',
path: path.resolve('../backend/src/main/resources/frontend')
},
}

4 answers

1 accepted

1 vote
Answer accepted
Stuart Hinchliff
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
March 19, 2024

Hi @Norbert Tovt

I'm from the Editor team at Atlassian, we have recently released a new approach to using the Editor component called the "Composable Editor" which has a much smaller bundle. This is because during setup, you only include plugins that you need (the less plugins you use the higher your saving!).

Hopefully the documentation about how to setup the "Composable Editor" is useful and can help you get started if you want to take this approach:

https://atlaskit.atlassian.com/packages/editor/editor-core

There is also an example here:
https://atlaskit.atlassian.com/packages/editor/editor-core/example/basic-composable-editor

And more advanced usage here:
https://atlaskit.atlassian.com/packages/editor/editor-core/example/composable-editor-custom-toolbar

Kind regards,

Stuart

Norbert Tovt March 20, 2024

Thank you very much!

I really appreciate your help, It was super helpful.

But I have some problems with some plugins:

const { preset } = usePreset(() => {
return new EditorPresetBuilder()
.add(basePlugin)
.add(listPlugin)
.add(blockTypePlugin)
.add(textFormattingPlugin)
.add(textColorPlugin)
}, []);
import React, {  useState } from 'react';
import Avatar from "@atlaskit/avatar";
import { getEmojiResource } from '@atlaskit/util-data-test/get-emoji-resource';
import { ComposableEditor } from '@atlaskit/editor-core/composable-editor';
import { EditorPresetBuilder } from '@atlaskit/editor-common/preset';
import {usePreset} from "@atlaskit/editor-core/use-preset";
import { basePlugin } from '@atlaskit/editor-plugins/base';
import { listPlugin } from '@atlaskit/editor-plugins/list';
import { textColorPlugin } from '@atlaskit/editor-plugins/text-color';
import { blockTypePlugin } from '@atlaskit/editor-plugins/block-type';
import { textFormattingPlugin } from '@atlaskit/editor-plugins/text-formatting';

 

Everything is working well instead of lists , tables, panels, emojis

Like LynnG likes this
Norbert Tovt March 20, 2024

for list I don't have errors while building, but it doesn't display, for code block I have the error:
TS2345: Argument of type 'NextEditorPluginFunctionOptionalConfigDefinition<"codeBlock", { pluginConfiguration: CodeBlockOptions | undefined; dependencies: [NextEditorPluginFunctionOptionalConfigDefinition<"decorations", { sharedState: DecorationState; actions: { ...; }; }, undefined>, NextEditorPluginFunctionOptionalConfigDefinition<...>, Op...' is not assignable to parameter of type 'never'.

Like LynnG likes this
Stuart Hinchliff
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
March 20, 2024

Hey @Norbert Tovt 

So I reproduced this on my bench and it seems to work okay:

const { preset } = usePreset(() => {
return new EditorPresetBuilder()
.add(basePlugin)
.add(listPlugin)
.add(blockTypePlugin)
.add(textFormattingPlugin)
.add(textColorPlugin)
}, []);

Correct me if I'm mistaken at this stage the list should work via key input (ie. "1. " or "- " should trigger a numbered list) but doesn't work via the toolbar?

We're still evolving the toolbar APIs, for now in order to add it to the toolbar you'll need to add this plugin "toolbarListsIndentationPlugin".

+import { toolbarListsIndentationPlugin } from '@atlaskit/editor-plugins/toolbar-lists-indentation';

const
{ preset } = usePreset(() => {
return new EditorPresetBuilder()
.add(basePlugin)
.add(listPlugin)
.add(blockTypePlugin)
.add(textFormattingPlugin)
+ .add([toolbarListsIndentationPlugin, { showIndentationButtons: false, allowHeadingAndParagraphIndentation: false }]
.add(textColorPlugin)
}, []);

Now for the other error:
"is not assignable to parameter of type 'never'. "

This occurs because our plugins have dependencies on each other.

On the code block documentation you can see it has dependencies on `decorationsPlugin` and `compositionPlugin`:
https://atlaskit.atlassian.com/packages/editor/editor-plugin-code-block

Your new preset might look something like this:

const { preset } = usePreset(() => {

return new EditorPresetBuilder()
.add(basePlugin)
.add(listPlugin)
.add(blockTypePlugin)
.add(selectionPlugin)
.add(textFormattingPlugin)
.add(compositionPlugin)
.add(decorationsPlugin)
.add(codeBlockPlugin)
.add([toolbarListsIndentationPlugin, { showIndentationButtons: false, allowHeadingAndParagraphIndentation: false }])
.add(textColorPlugin)
});

You also mentioned you want the following: tables, panels, emojis, you could do something like this for all of those:

const { preset } = usePreset(() => {

return (
new EditorPresetBuilder()
.add(basePlugin)
.add(listPlugin)
.add(blockTypePlugin)
.add(selectionPlugin)
.add(textFormattingPlugin)
.add(compositionPlugin)
.add(decorationsPlugin)
.add(codeBlockPlugin)
.add(panelPlugin)
.add(typeAheadPlugin)
.add(emojiPlugin)
.add([
toolbarListsIndentationPlugin,
{
showIndentationButtons: false,
allowHeadingAndParagraphIndentation: false,
},
])
// Required dependency of tables
.add([analyticsPlugin, {}])
// Required dependency of tables
.add(contentInsertionPlugin)
// Required dependency of tables
.add(widthPlugin)
// Required dependency of tables
.add(guidelinePlugin)
.add(tablesPlugin)
.add(textColorPlugin)
// for toolbar that allows for table insertion
.add(insertBlockPlugin)
);
});

Of course if you want more rich controls for the tables plugin for example you might consider adding the `floatingToolbarPlugin` (and its dependencies `copyButtonPlugin` and `editorDisabledPlugin`).

As always adding each plugin is a tradeoff in bundle size for functionality depending on your needs.

Best of luck!

Stuart

Like Norbert Tovt likes this
Norbert Tovt March 20, 2024

 

empty

 

Norbert Tovt March 20, 2024

empty

Norbert Tovt March 20, 2024

it was message 

Norbert Tovt March 20, 2024

it was message, but yesterday, atlassian servers were working badly

Norbert Tovt March 20, 2024

it was message, but yesterday, atlassian servers were working badly

Norbert Tovt March 20, 2024

it was message, but yesterday, atlassian servers were working badly

Norbert Tovt March 20, 2024

it was message, but yesterday, atlassian servers were working badly

Norbert Tovt March 20, 2024

it was message, but yesterday, atlassian servers were working badly

Norbert Tovt March 20, 2024

it was message, but yesterday, atlassian servers were working badly

Norbert Tovt March 20, 2024

empty

Norbert Tovt March 22, 2024

@Stuart Hinchliff Thank you so much!!!!! It was helpful a lot for me. You are the best! Two more question. How can I create custom mention provider and change displaying it in the editor under the hood, so by default it is [~accountid:abcd], but I want to define specific syntax for this , like this: [~norbert], and how can I make redirection to some page, so I want to see with all information View the profile and redirect the users to their profile link.

And how can I add hyperlinks? so I have added hyperLinkPlugin, at the tool bar I see it , but it doesn't work :(

Thank you very very much!

Stuart Hinchliff
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
March 22, 2024

Hey @Norbert Tovt 

There is a little information in our documentation about setting up a mention provider:

https://atlaskit.atlassian.com/packages/editor/editor-core

You will also need to add the `mentionsPlugin` https://atlaskit.atlassian.com/packages/editor/editor-plugin-mentions

Hopefully this helps! However I will need to follow-up if there is this capability currently to do re-direction and specific syntax - I'm not sure if it is supported out of the box. At the end of the day our editor is backed by prosemirror and you can always add custom plugins, but this is a bit more complex.

In terms of hyperlinks you will need the floating toolbar for insertion. It's not actually listed in its dependencies or documentation so I'll raise an improvement ticket on our side.

Here is an example of a basic editor with hyperlink capability:

new EditorPresetBuilder()
.add(basePlugin)
.add([analyticsPlugin, {}])
.add(blockTypePlugin)
.add(hyperlinkPlugin)
.add(typeAheadPlugin)
.add(decorationsPlugin)
.add(copyButtonPlugin)
.add(editorDisabledPlugin)
.add(floatingToolbarPlugin)
.add(insertBlockPlugin)
.add(listPlugin)

Cheers,

Stuart

Like Norbert Tovt likes this
Norbert Tovt March 23, 2024

Thank you @Stuart Hinchliff
You are the best!

Norbert Tovt March 24, 2024

@Stuart Hinchliff 
Thank you again. I have added the mention plugin, it's working, but in the documentation I have not found the solution, how to on click on mention redirect the user to his profile or to some url I can define, in the editor it is just @username . Would be great if we have this possibility, for example you can click on your name in this response and you will be redirected to your profile.

Like Ivad Yves Habimana likes this
Ivad Yves Habimana March 24, 2024

@Stuart Hinchliff I am also working on something similar. Basically I want something that work close to the Jira issue description field. 

I tried to mix different plugins but most of them does not work as expected and functionalities like mentioning, links, macros does not work

I noticed the example named Kitchen sink https://atlaskit.atlassian.com/examples.html?groupId=editor&packageId=editor-core&exampleId=kitchen-sink&mode=light in the docs and I basically want to achieve something similar but I can't refer to the source code since most of the resources used in the example are local files 

I am not sure what I am doing wrong 



// imports are here

const DescriptionField = () => {

const { preset } = usePreset(() =>

new EditorPresetBuilder()

.add(blockTypePlugin)

.add(textFormattingPlugin)

.add(textColorPlugin)

.add(basePlugin)

.add(toolbarListsIndentationPlugin)

.add(hyperlinkPlugin)

.add(mentionsPlugin)

.add(codeBlockPlugin)

.add(compositionPlugin)

.add(decorationsPlugin)

.add(insertBlockPlugin)

.add(layoutPlugin)

.add(panelPlugin)

.add(mediaPlugin)

.add(contentInsertionPlugin)

.add(analyticsPlugin)

.add(contextPanelPlugin)

.add(pastePlugin)

.add(pasteOptionsToolbarPlugin)

.add(floatingToolbarPlugin)

);

return (

<div>

<ComposableEditor preset={preset} />

</div>

);

};

export default DescriptionField;
Ivad Yves Habimana March 24, 2024

@Norbert Tovt How did you manage to get the mentions working? By the way thanks for raising this question from your conversations with @Stuart Hinchliff I have managed to atleast understand how the plugins thingy works but still the emojis and mentions are not working for me

Norbert Tovt March 24, 2024

@Ivad Yves Habimana 

try this editor:

import {getEmojiResource} from '@atlaskit/util-data-test/get-emoji-resource';
import {ComposableEditor} from '@atlaskit/editor-core/composable-editor';
import {usePreset} from "@atlaskit/editor-core/use-preset";

<ComposableEditor
preset={preset}
quickInsert={true}
shouldFocus
emojiProvider={getEmojiResource({
uploadSupported: false
}) as Promise<EmojiProvider>}
mentionProvider={mentionProvider}
onSave={onSave}
onCancel={onCancel}
defaultValue={defaultValue ? formatADF ? JSON.parse(defaultValue) : getADF(defaultValue) : undefined}
/>

 

and try this preset :

import {EditorPresetBuilder} from '@atlaskit/editor-common/preset';
import {basePlugin} from '@atlaskit/editor-plugins/base';
import {listPlugin} from '@atlaskit/editor-plugins/list';
import {textColorPlugin} from '@atlaskit/editor-plugins/text-color';
import {blockTypePlugin} from '@atlaskit/editor-plugins/block-type';
import {textFormattingPlugin} from '@atlaskit/editor-plugins/text-formatting';
import {tablesPlugin} from '@atlaskit/editor-plugins/table';
import {selectionPlugin} from '@atlaskit/editor-plugins/selection';
import {compositionPlugin} from '@atlaskit/editor-plugins/composition'
import {decorationsPlugin} from '@atlaskit/editor-plugins/decorations';
import {toolbarListsIndentationPlugin} from '@atlaskit/editor-plugins/toolbar-lists-indentation';
import {analyticsPlugin} from '@atlaskit/editor-plugins/analytics';
import {insertBlockPlugin} from '@atlaskit/editor-plugins/insert-block';
import {guidelinePlugin} from '@atlaskit/editor-plugins/guideline';
import {widthPlugin} from '@atlaskit/editor-plugins/width';
import {contentInsertionPlugin} from '@atlaskit/editor-plugins/content-insertion';
import {codeBlockPlugin} from '@atlaskit/editor-plugin-code-block';
import {panelPlugin} from '@atlaskit/editor-plugins/panel';
import {typeAheadPlugin} from '@atlaskit/editor-plugins/type-ahead';
import {emojiPlugin} from '@atlaskit/editor-plugins/emoji';
import {floatingToolbarPlugin} from '@atlaskit/editor-plugins/floating-toolbar';
import {hyperlinkPlugin} from '@atlaskit/editor-plugins/hyperlink';
import {copyButtonPlugin} from '@atlaskit/editor-plugins/copy-button';
import {editorDisabledPlugin} from '@atlaskit/editor-plugins/editor-disabled';
import {mentionsPlugin} from '@atlaskit/editor-plugins/mentions';
export const createEditorPreset = () => {
return new EditorPresetBuilder()
.add(basePlugin)
.add(blockTypePlugin)
.add(selectionPlugin)
.add(textFormattingPlugin)
.add(compositionPlugin)
.add(decorationsPlugin)
.add(textColorPlugin)
.add(listPlugin)
.add([toolbarListsIndentationPlugin, {showIndentationButtons: false, allowHeadingAndParagraphIndentation: false}])
.add(codeBlockPlugin)
.add(panelPlugin)
.add(hyperlinkPlugin)
.add(typeAheadPlugin)
.add(emojiPlugin)
.add(mentionsPlugin)
.add([analyticsPlugin, {}])
.add(contentInsertionPlugin)
.add(widthPlugin)
.add(guidelinePlugin)
.add(tablesPlugin)
.add(insertBlockPlugin)
.add(copyButtonPlugin)
.add(floatingToolbarPlugin)
.add(editorDisabledPlugin);
}


Like Ivad Yves Habimana likes this
Norbert Tovt March 24, 2024

@Ivad Yves Habimana for mention provider :

interface Mention {
id: string;
avatarUrl: string;
name: string;
mentionName: string;
nickname: string;
}

interface AvatarUrls {
"48x48": string;
"24x24": string;
"16x16": string;
"32x32": string;
}

interface JiraMentionsResponse {
self: string;
name: string;
emailAddress: string;
avatarUrls: AvatarUrls;
displayName: string;
active: boolean;
}

type MentionResultCallback = (result: Mention[], query: string) => void;
type ErrorCallback = (error: Error, query: string) => void;

export class MyMentionProvider {
private changeListeners: Map<string, MentionResultCallback>;

private errorListeners: Map<string, ErrorCallback>;

// private jiraBaseUrl: string;

constructor() {
this.changeListeners = new Map<string, MentionResultCallback>();
this.errorListeners = new Map<string, ErrorCallback>();
// this.jiraBaseUrl = jiraBaseUrl;
}
recordMentionSelection(mention: Mention): void {}

shouldHighlightMention(mention: Mention): boolean {
return true;
}

isFiltering(query: string): boolean {
return false;
}

subscribe(
key: string,
mentionResultCallback?: MentionResultCallback,
errorCallback?: ErrorCallback,
) {
if (mentionResultCallback) {
this.changeListeners.set(key, mentionResultCallback);
}
if (errorCallback) {
this.errorListeners.set(key, errorCallback);
}
}

unsubscribe(key: string) {
this.changeListeners.delete(key);
this.errorListeners.delete(key);
}

filter = (query: string) => {
setTimeout(async () => {

const usersList = await fetch(`${baseJiraDCUrl}/rest/internal/2/user/mention/search?issueKey=${issueKey}&query=${query}`);
const res = await usersList.json() as JiraMentionsResponse[];
console.log(usersList);
const mockMentions: Mention[] = res.map((item: JiraMentionsResponse)=>{
return{
id: item.name,
avatarUrl: item.avatarUrls["48x48"],
name: item.displayName,
mentionName: item.displayName,
nickname: item.displayName,
} as Mention
})
let results: Mention[];
if (!query) {
results = mockMentions;
} else {
results = mockMentions.filter(
(mention) => mention.name.toLowerCase().indexOf(query) || mention.mentionName.indexOf(query),
);
}
this.changeListeners.forEach((listener) => {
listener(results, query);
});
}, 0);
return Promise.resolve();
};
}
Like Ivad Yves Habimana likes this
Norbert Tovt March 24, 2024

But I have still the problem with redirection, I don't know how to do this, please, guys, try to find the solution and mention me

Ivad Yves Habimana March 24, 2024

@Norbert Tovt I am actually facing the same issue as you are facing because the mention now works for me as well but the after selecting the selected user chip will not be clickable as a link. I think the default behaviour that happens when you use Jira is that the mentioned user should be clickable and open a tooltip that has a link to their profile

I have checked all the examples in the atlaskit editor core docs and non of them has this functionality implemented. I am not sure if it is provided 
Will continue to look around 

Norbert Tovt March 24, 2024

@Ivad Yves Habimana Yes, I am absolutely agree with you, I want just when you click on the mention to redirect to the user profile url, without displaying any view with the button "View the profile", but if it is possible , I would use this approach as well. I am looking to find the solution, if you find the first, please let me know, just mention me, I think must be somewhere the solution...

Ivad Yves Habimana March 24, 2024

By the way @Norbert Tovt in you solution where are these coming from 

defaultValue={defaultValue ? formatADF ? JSON.parse(defaultValue) : getADF(defaultValue) : undefined}

 the  `formatADF` and getADF?

Norbert Tovt March 24, 2024

@Ivad Yves Habimana it's from my server, because editor wants only adf format, but I am also working with wikimarkup, so if on the server adf format, I shouldn't transform, but this transform is not working correctly for emojis, so I used this approach

 

Norbert Tovt March 24, 2024

@Ivad Yves Habimana I think I found the solution, but for now I have not done this, we should use profile card component, https://atlaskit.atlassian.com/packages/people-and-teams/profilecard/example/profilecard

But how can we trigger it when we hover mouse over the mention I don't know, try to help me

 

Norbert Tovt March 24, 2024

@Ivad Yves Habimana The component looks like :

import React from 'react';

import styled from '@emotion/styled';

import { token } from '@atlaskit/tokens';

import { ProfileCard } from '@atlaskit/profilecard';
import { profiles } from '@atlaskit/profilecard/mocks';


export const MainStage = styled.div`
margin: ${token('spacing.scale.200', '16px')};
`;


export default function ProfileCardViewer() {
return (

<ProfileCard
avatarUrl='http://localhost:2990/jira/secure/useravatar?avatarId=10346'
fullName="Norbert Tovt"
nickname="norbert"
email="norbert.tovt@gmail.com"
timestring="18:45"
actions={[
{
label: 'View profile',
id: 'view-profile',
callback: () => {
window.location.href = `http://localhost:2990/jira/secure/ViewProfile.jspa?name=admin`;
}
},
]}
/>

);
}

but I still don't know how put popup component with it on all mentions

Stuart Hinchliff
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
March 24, 2024

Hey @Norbert Tovt @Ivad Yves Habimana 

For now this functionality (specifically re-direction to users page on click) doesn't exist for mentions with the `mentionPlugin`.

The functionality with the ability to click and open the "profile card" UI is only available in the renderer at this stage which is the non-editable UI component which is used to display editor content after publishing.

If this functionality is required the only option currently is to possibly create your own `mentionsPlugin` or creating a patch-package on the mentions plugin to add the functionality yourself. We will not be able support this.

Also feel free to raise a ticket here: https://jira.atlassian.com/projects/CONFCLOUD/summary for this functionality.

Best of luck!

Stuart

Norbert Tovt March 24, 2024

@Stuart Hinchliff Thank you for your response! 
I didn't catch about "The functionality with the ability to click and open the "profile card" UI is only available in the renderer at this stage which is the non-editable UI component which is used to display editor content after publishing."
How can we make it?

 

Stuart Hinchliff
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
March 24, 2024

@Norbert Tovt  The renderer component I am referring to is `@atlaskit/renderer` you can see more information here: https://atlaskit.atlassian.com/packages/editor/renderer

This provides a way to render ADF documents. Generally we use it to render a published page on Confluence, or a published comment on Jira for example. It is different from the editor.

Norbert Tovt March 24, 2024

@Stuart Hinchliff  Hmmm, when I am trying to use ReactRenderer it takes bundle size 12 mb, with only my setting and ComposableEditor it takes 4.8 Maybe I will try to use other versions

Stuart Hinchliff
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
March 24, 2024

Yes unfortunately the renderer is a big component.

Ivad Yves Habimana March 26, 2024

@Norbert Tovt can you please share a snippet of how you are accessing the value from the editor?

0 votes
Ruslan Krasuk March 20, 2024

empty

0 votes
Ruslan Krasuk March 20, 2024

empty

0 votes
Ruslan Krasuk March 20, 2024

empty

Suggest an answer

Log in or Sign up to answer
DEPLOYMENT TYPE
CLOUD
PRODUCT PLAN
PREMIUM
TAGS
AUG Leaders

Atlassian Community Events