custom-block-editor

import ReactDOM from "react-dom";
 
import {
	BlockEditorProvider,
	BlockList,
	WritingFlow,
	ObserveTyping,
	BlockEditorKeyboardShortcuts,
	storeConfig as blockEditorStoreConfig,
	BlockInspector,
	BlockBreadcrumb,
	MediaUpload,
	MediaUploadCheck,
	MediaPlaceholder,
	MediaReplaceFlow,
} from '@wordpress/block-editor';

import { serialize, parse } from '@wordpress/blocks';

import { DropZoneProvider, SlotFillProvider, Popover } from '@wordpress/components';
import { useState } from '@wordpress/element';

import { registerCoreBlocks } from '@wordpress/block-library';
registerCoreBlocks();

export function MyCustomBlockEditor () {
	const [ blocks, updateBlocks ] = useState( parse( '<!-- wp:paragraph --><p>Default block!</p><!-- /wp:paragraph -->' ) );
	
	function getEditorSettings() {
		const editorSettings = JSON.parse( JSON.stringify( wp.data.select( 'core/block-editor' ).getSettings() ) );
		
		// Make media library work.
		editorSettings.mediaUploadCheck = MediaUploadCheck;
		editorSettings.mediaUpload      = MediaUpload;
		editorSettings.mediaPlaceholder = MediaPlaceholder;
		editorSettings.mediaReplaceFlow = MediaReplaceFlow;

		return editorSettings;
	}

	return (
		<SlotFillProvider>
			<DropZoneProvider>
				<BlockEditorProvider
					value={ blocks }
					onChange={ updateBlocks }
					onInput={ updateBlocks }
					settings={ getEditorSettings() }
				>
					<BlockEditorKeyboardShortcuts />
					<WritingFlow>
						<ObserveTyping>
							<Popover.Slot name="block-toolbar" />
								<BlockList />
								<BlockBreadcrumb />
								<BlockInspector />
						</ObserveTyping>
					</WritingFlow>
				</BlockEditorProvider>
			</DropZoneProvider>
			<Popover.Slot />
		</SlotFillProvider>
	)
	
}

ReactDOM.render(<MyCustomBlockEditor />, document.getElementById('YOUR_ELEMENT_ID_HERE'));