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

[AppsDelivered]

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')
  },
}

[Stuart Hinchliff · Accepted solution]

Hi @AppsDelivered

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

[AppsDelivered]

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

[AppsDelivered]

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'.

[Stuart Hinchliff]

Hey @AppsDelivered 

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

[AppsDelivered]

empty

[AppsDelivered]

empty

[AppsDelivered]

it was message 

[AppsDelivered]

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

[AppsDelivered]

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

[AppsDelivered]

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

[AppsDelivered]

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

[AppsDelivered]

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

[AppsDelivered]

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

[AppsDelivered]

empty

[AppsDelivered]

@Stuart Hinchliff Thank you so much!!!!! It was helpful a lot for me. You are the best!
Thank you very very much!

[Stuart Hinchliff]

Hey @AppsDelivered 

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

[AppsDelivered]

Thank you @Stuart Hinchliff
You are the best!

[AppsDelivered]

@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.

[Ivad Yves Habimana]

@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]

@AppsDelivered 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

[AppsDelivered]

@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);
}

[AppsDelivered]

@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();
    };
}

[AppsDelivered]

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]

@AppsDelivered 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 

[AppsDelivered]

@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]

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

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

 the  `formatADF` and getADF?

[AppsDelivered]

@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

[AppsDelivered]

@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

[AppsDelivered]

@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=""
                    nickname=""
                    email=""
                    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]

Hey @AppsDelivered @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

[AppsDelivered]

@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]

@AppsDelivered  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.

[AppsDelivered]

@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]

Yes unfortunately the renderer is a big component.

[Ivad Yves Habimana]

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

[Rostyslav Klym]

Faced the same problem today

[Ruslan Krasuk]

empty

[Ruslan Krasuk]

empty

[Ruslan Krasuk]

empty