Editor js in Laravel

For anyone else who happens upon this:

Import EditorJS:

npm i @editorjs/editorjs --save

Add this to app.js

    import EditorJS from '@editorjs/editorjs'
    window.EditorJS = EditorJS

Then within <script> tags of your blade files start EditorJS with:

    const editor = new EditorJS('editorjs')

Run npm run dev etc to re-build the js.

You need to add the X-CSRF-TOKEN:

const editor = new EditorJS({ holder: "editor", tools: { header: { class: Header, inlineToolbar: true, }, list: { class: List, inlineToolbar: true, }, image: { class: ImageTool, config: { uploader: { async uploadByFile(file) { try { let csrfToken = document .querySelector('meta[name="csrf-token"]') .getAttribute("content");

                        const formData = new FormData();
                        formData.append("image", file);

                        const response = await fetch("/upload/image", {
                            method: "POST",
                            headers: {
                                "X-CSRF-TOKEN": csrfToken,
                            },
                            body: formData,
                        });

                        if (!response.ok) {
                            throw new Error("Error uploading image");
                        }

                        const data = await response.json();

                        let result = {
                            success: 1,
                            file: {
                                url: data.file.url,
                            },
                        };
                        return result;
                    } catch (error) {
                        console.error("Error:", error);
                        return {
                            success: 0,
                            file: { url: null },
                        };
                    }
                },
            },
        },
    },
},
placeholder: "Write your post...",

});

This is my route:

Route::post('/upload/image', function (Request $request) { $request->validate(['image' => 'required|image|max:5120']); $path = $request->file('image')->store('editor-images', 'public'); return response()->json([ 'success' => 1, 'file' => ['url' => asset('storage/'.$path)] ]); })->middleware('auth');