Fixing Custom CKEditor Integration in React Component

[round narwhal]

help me fix this code for custom ckeditor

"use client";

import React, { useRef } from "react";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

export const CKEditorField: React.FC = ({ path, label }) => {
    const { value, setValue } = useField<string>({ path });

    const editorRef = useRef<any>();

    return (
        <div className="field-type">
            {label && <label className="field-label">{label}</label>}
            <CKEditor
                editor={ClassicEditor}
                data={value || ""}
                onReady={(editor) => {
                    editorRef.current = editor;
                }}
                onChange={(_, editor) => {
                    const data = editor.getData();
                    setValue(data);
                }}
            />
        </div>
    );
};

[spice pagoda]

Original message from @stiff plume - Moved from #general message

New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

• Blocks Field - Admin Options - Customizing the way your block is rendered in Lexical
• Custom Features - Do I need a custom feature?
• Swap in your own React components - Building Custom Components - Client Components

Community-Help:

• Creating custom form field payload 3.0, using the form builder plugin
• How Can We Create Custom Field Types in Payload?
• Lexical markdown
• How can I achieve an array of relationships in a Field? | PayloadCMS 3.0

[burnt moss]

Hey @stiff plume

What's not working for you here? Can you provide more details? Are you sure your richText is serializable to just a string like that?

[stiff plume]

i am seeing this, no formatting, no styling, nothing

also i see this when ckeditor loads

⨯ ReferenceError: window is not defined
    at (ssr)/./node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js (C:\Users\krish\Desktop\blog-cms\.next\server\vendor-chunks\@ckeditor.js:19:1)
    at __webpack_require__ (C:\Users\krish\Desktop\blog-cms\.next\server\webpack-runtime.js:33:43)
    at eval (webpack-internal:///(ssr)/./src/app/components/Fields/CkEditor.tsx:11:91)
    at __webpack_require__.a (C:\Users\krish\Desktop\blog-cms\.next\server\webpack-runtime.js:100:13)
    at eval (webpack-internal:///(ssr)/./src/app/components/Fields/CkEditor.tsx:1:21)
    at (ssr)/./src/app/components/Fields/CkEditor.tsx (C:\Users\krish\Desktop\blog-cms\.next\server\app\(payload)\admin\[[...segments]]\page.js:291:1)
    at Object.__webpack_require__ [as require] (C:\Users\krish\Desktop\blog-cms\.next\server\webpack-runtime.js:33:43) {
  digest: '2874954605'
}

[burnt moss]

Maybe try loading it dynamically using dynamic()

[worn vigil]

@stiff plume In CKEditor integrations, you need to set which features you want in your CKEditor config file. Check installation of features in CKEditor docs: https://ckeditor.com/docs/ckeditor5/latest/features/font.html#installation

[stiff plume]

is there any guide to add simple ckeditor with theme matched in payload cms without confusion?

[worn vigil]

Unfortunately, I couldn't find a guide or tutorial. Only resource is CKEditor docs at this point.