I am trying to implement decoupled document ckeditor5 in react with custom build plugins but i am always seeing classis build editor

Question

When i use this i only get the classis build view i alread tried to install and use DecoupleEditor from the package it's showing only classis build view import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';

import { CKEditor } from "@ckeditor/ckeditor5-react";
import Editor from "ckeditor5-custom-build/build/ckeditor";

function App() {
  let editorr = null;
  return (
    <div className="App">
      <CKEditor
        onReady={(editor) => {
          console.log("Editor is ready to use!", editor);
          editor.ui
            .getEditableElement()
            .parentElement.insertBefore(
              editor.ui.view.toolbar.element,
              editor.ui.getEditableElement()
            );
          editorr = editor;
        }}
        onError={(error, { willEditorRestart }) => {
         
          if (willEditorRestart) {
            editorr.ui.view.toolbar.element.remove();
          }
        }}
        onChange={(event, editor) => console.log({ event, editor })}
        editor={Editor}
        data="<p>Hello from CKEditor 5's decoupled editor!</p>"
      />
    </div>
  );
}

export default App;

Folder Structure enter image description here

Frontend view

Answer 1

Found the answer I need to add the document editor CSS file to view the changes.