Editor-core dependencies required

Forge Forge UI Kit and Custom UI
, ,
1

Hello,
im troubling with dependencies for the atlaskit/editor-core (Atlaskit by Atlassian).
Could anyone help me with a usage of proper dependecies for editor ?
My current dependencies:

 "dependencies": {
    "@atlaskit/avatar": "^21.18.1",
    "@atlaskit/avatar-group": "^11.1.2",
    "@atlaskit/button": "^20.5.0",
    "@atlaskit/checkbox": "^15.3.2",
    "@atlaskit/comment": "^12.1.2",
    "@atlaskit/css-reset": "^6.12.0",
    "@atlaskit/editor-core": "^203.18.3",
    "@atlaskit/eslint-plugin-design-system": "^10.22.0",
    "@atlaskit/eslint-plugin-ui-styling-standard": "^0.19.1",
    "@atlaskit/form": "^11.1.2",
    "@atlaskit/heading": "^4.1.0",
    "@atlaskit/icon": "^23.7.0",
    "@atlaskit/modal-dialog": "^12.20.6",
    "@atlaskit/pagination": "^15.1.0",
    "@atlaskit/primitives": "^13.4.1",
    "@atlaskit/tabs": "^17.2.2",
    "@atlaskit/tag": "^13.0.2",
    "@atlaskit/textarea": "^7.0.0",
    "@atlaskit/textfield": "^6.8.2",
    "@atlaskit/tokens": "^3.3.1",
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@compiled/eslint-plugin": "^0.19.1",
    "@forge/bridge": "4.3.0",
    "buffer": "^6.0.3",
    "install": "^0.13.0",
    "npm": "^11.1.0",
    "react": "^16.8.0",
    "react-dom": "^16.8.0",
    "react-router": "6.27",
    "react-router-dom": "6.27"
  },
  "devDependencies": {
    "@compiled/babel-plugin": "^0.37.0",
    "react-scripts": "^5.0.1"
  }

Im currently getting error:

npm run build
...
Module not found: Error: Can't resolve '@compiled/react/runtime' in 'D:\XXXX\node_modules\@atlaskit\editor-core\dist\esm\ui\Toolbar'

while installing compiled\react im getting:

npm install @compiled/react
npm ERR! code ERESOLVE

<--- Last few GCs --->

[8396:093D8588]    60964 ms: Scavenge 614.9 (633.6) -> 614.9 (633.6) MB, 0.2 / 0.0 ms  (average mu = 0.984, 
current mu = 0.985) allocation failure;
[8396:093D8588]    60979 ms: Mark-sweep (reduce) 614.9 (633.6) -> 502.9 (509.2) MB, 15.8 / 0.0 ms  (average 
mu = 0.980, current mu = 0.975) last resort; GC in old space requested
[8396:093D8588]    61017 ms: Mark-sweep (reduce) 502.9 (509.2) -> 502.9 (506.2) MB, 37.7 / 0.0 ms  (average 
mu = 0.933, current mu = 0.002) last resort; GC in old space requested


<--- JS stacktrace --->

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory

Additionally, i also tried the editor-core with react 17.X.X and got similar result: JavaScript heap out of memory

2

To be honest, its a really anoying tool. Docs have tons of deprecated stuff.
But its started to work, yea …

For coming annoyed devs maybe it will be helpfull,
my libs:

dependencies": {
    "@atlaskit/avatar": "^21.18.1",
    "@atlaskit/avatar-group": "^11.1.2",
    "@atlaskit/button": "^20.5.0",
    "@atlaskit/checkbox": "^15.3.2",
    "@atlaskit/comment": "^12.1.2",
    "@atlaskit/css-reset": "^6.12.0",
    "@atlaskit/editor-core": "^203.18.3",
    "@atlaskit/eslint-plugin-design-system": "^10.22.0",
    "@atlaskit/eslint-plugin-ui-styling-standard": "^0.19.1",
    "@atlaskit/form": "^11.1.2",
    "@atlaskit/heading": "^4.1.0",
    "@atlaskit/icon": "^23.7.0",
    "@atlaskit/modal-dialog": "^12.20.6",
    "@atlaskit/pagination": "^15.1.0",
    "@atlaskit/primitives": "^13.4.1",
    "@atlaskit/tabs": "^17.2.2",
    "@atlaskit/tag": "^13.0.2",
    "@atlaskit/textarea": "^7.0.0",
    "@atlaskit/textfield": "^6.8.2",
    "@atlaskit/tokens": "^3.3.1",
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@compiled/eslint-plugin": "^0.19.1",
    "@forge/bridge": "4.3.0",
    "buffer": "^6.0.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router": "6.27",
    "react-router-dom": "6.27"

and usage:

import React, { useState } from "react";

import { ComposableEditor } from "@atlaskit/editor-core/composable-editor";
import { usePreset } from "@atlaskit/editor-core/use-preset";
import { basePlugin } from "@atlaskit/editor-plugins/base";
import { blockTypePlugin } from "@atlaskit/editor-plugins/block-type";
import { listPlugin } from "@atlaskit/editor-plugins/list";
import { analyticsPlugin } from "@atlaskit/editor-plugins/analytics";
import { textFormattingPlugin } from "@atlaskit/editor-plugins/text-formatting";
import { JSONTransformer } from "@atlaskit/editor-json-transformer";
import { useMemo } from "react";

const CustomizedEditor = ({ setWrappedText }) => {
  const [initial] = useState("");

  const { editorApi, preset } = usePreset(
    (builder) => builder.add(basePlugin).add(analyticsPlugin).add(blockTypePlugin).add(listPlugin).add(textFormattingPlugin),
    []
  );
  const transformer = useMemo(() => editorApi?.core?.actions?.createTransformer((schema) => new JSONTransformer(schema)), [editorApi]);

  return (
    <ComposableEditor
      preset={preset}
      contentTransformerProvider={transformer}
      defaultValue={initial}
      onChange={() => {
        editorApi?.core?.actions.requestDocument(
          (doc) => {
            console.log(doc);
            setWrappedText(doc);
          },
          { transformer }
        );
      }}
    />
  );
};```
1 Like