Any examples of running this in NextJS?

[zammitjames]

Is there a basic demo example of importing the Isolated Block Editor and having it render in a fresh new NextJS app?

When I try to do this in NextJS v13 I get the following error:

./node_modules/.pnpm/@automattic+isolated-block-editor@2.26.0_@emotion+react@11.11.1_@types+react-dom@18.2.7_@type_4jbpzvjhgix3p6ararhn6cndoy/node_modules/@automattic/isolated-block-editor/build-module/components/block-editor-container/style.scss
Global CSS cannot be imported from within node_modules.

[johngodley]

There isn't a demo of it being used in NextJS - it's not something that has been specifically tried.

You might find information about that error elsewhere. For example:

https://josipmisko.com/next-js/global-css-cannot-be-imported-from-files-other-than-your-custom-app

[maheshwaghmare]

Right. Tried with code:

'use client'

import React from 'react'
import IsolatedBlockEditor from '@automattic/isolated-block-editor'

import '@automattic/isolated-block-editor/build-browser/core.css';
import '@automattic/isolated-block-editor/build-browser/isolated-block-editor.css';

const settings = {
    iso: {
        moreMenu: false,
    },
}

const Page = () => {
    return (
        <div>
            <h1>Editor</h1>
            <IsolatedBlockEditor
                settings={ settings }
                onLoad={ ( parser, rawHandler ) => {
                    console.log( 'parser: ', parser )
                    console.log( 'rawHandler: ', rawHandler )
                    // onLoad( textarea.value, parser, rawHandler )
                } }
                onSaveContent={ ( content ) => {
                    console.log( 'onContentSave' )
                    // saveBlocks( content, textarea )
                } }
                onError={ () => {
                    console.log( 'error' )
                    // document.location.reload()
                } }
            >
            </IsolatedBlockEditor>
        </div>
    )
}

export default Page

But not works.

Even instead of:

import IsolatedBlockEditor from '@automattic/isolated-block-editor'

with:

const IsolatedBlockEditor = dynamic(
    () => import('@automattic/isolated-block-editor'),
    { ssr: false }
)

But no success.

[johngodley]

Sorry, NextJS is not something I have experience with and can't really offer any advice.

There are a lot of search results for the same error so all I can suggest is to investigate those.

I'll close this issue, but it's here if anyone else knows anything more.