You can inspect that the rendered HTML by the headless editor is served
in the network tab of your browser's devTools.
You can start editing this page once you convert the editor to edit mode by clicking the button on the top of this page.
This is just a simple demo to check compatibility of Lexical and Next.js.
You can explore more Lexical on the playground.
The playground is a demo environment built with @lexical/react. Try typing in some text with different formats.
Make sure to check out the various plugins in the toolbar.
If you'd like to find out more about Lexical, you can:
Lastly, we're constantly adding cool new features to this playground. So make sure you check back here when you next get a chance.
function setupDom() {
const dom = new JSDOM();
const _window = global.window;
const _document = global.document;
// @ts-expect-error
global.window = dom.window;
global.document = dom.window.document;
return () => {
global.window = _window;
global.document = _document;
};
}
async function getHtml() {
const html: string = await new Promise(resolve => {
const editor = createHeadlessEditor({
namespace: 'Editor',
nodes: [],
onError: () => {},
});
editor.setEditorState(editor.parseEditorState(JSON.stringify(editorState)));
editor.update(() => {
try {
const cleanup = setupDom();
const _html = $generateHtmlFromNodes(editor, null);
cleanup();
resolve(_html);
} catch (e) {
console.log(e);
}
});
});
return html;
}
export default async function Home() {
const html = await getHtml();
return (
<div className='container mx-auto'>
<div className='viewer' dangerouslySetInnerHTML={{ __html: html }}></div>
</div>
);
}