How to use the @wordpress/blocks.serialize function in @wordpress/blocks

constructor( props: PropsType ) {
		super( props );

		const post = props.post || {
			id: 1,
			content: {
				raw: '', // props.initialHtml,
			},
			type: 'draft',
		};

		this.props.setupEditor( post );
		this.lastHtml = serialize( parse( props.initialHtml ) );
	}

export const saveReusableBlocks = async ( action, store ) => {
	// TODO: these are potentially undefined, this fix is in place
	// until there is a filter to not use reusable blocks if undefined
	const postType = await resolveSelector( 'core', 'getPostType', 'wp_block' );
	if ( ! postType ) {
		return;
	}

	const { id } = action;
	const { dispatch } = store;
	const state = store.getState();
	const { clientId, title, isTemporary } = getReusableBlock( state, id );
	const { name, attributes, innerBlocks } = getBlock( state, clientId );
	const content = serialize( createBlock( name, attributes, innerBlocks ) );

	const data = isTemporary ? { title, content } : { id, title, content };
	const path = isTemporary ? `/wp/v2/${ postType.rest_base }` : `/wp/v2/${ postType.rest_base }/${ id }`;
	const method = isTemporary ? 'POST' : 'PUT';

	try {
		const updatedReusableBlock = await apiFetch( { path, data, method } );
		dispatch( {
			type: 'SAVE_REUSABLE_BLOCK_SUCCESS',
			updatedId: updatedReusableBlock.id,
			id,
		} );
		const message = isTemporary ? __( 'Block created.' ) : __( 'Block updated.' );
		dispatch( createSuccessNotice( message, { id: REUSABLE_BLOCK_NOTICE_ID } ) );
	} catch ( error ) {
		dispatch( { type: 'SAVE_REUSABLE_BLOCK_FAILURE', id } );

// Let native copy behaviour take over in input fields.
		if ( ! hasMultiSelection() && documentHasSelection() ) {
			clearCopiedMarkup();
			return;
		}

		// Don't allow story blocks to be copyied.
		for ( const selectedBlockClientId of selectedBlockClientIds ) {
			if ( isPageBlock( selectedBlockClientId ) ) {
				clearCopiedMarkup();
				return;
			}
		}

		const copyBlocks = getBlocksByClientId( selectedBlockClientIds );
		const serialized = serialize( copyBlocks );
		// Workout what type of event, from event object passed to this function.
		const isCut = ( event.type === 'cut' );

		// Make sure that setCopiedMarkup finishes before doing anything else.
		setCopiedMarkup( serialized ).then( () => {
			copyTextToClipBoard( serialized );

			if ( isCut ) {
				const pageClientId = getCurrentPage();
				for ( const clientId of selectedBlockClientIds ) {
					// On removing block, change focus to the page, to make sure that editor doesn't get confused and tries to select an already removed block.
					selectBlock( pageClientId );
					removeBlock( clientId );
				}
			}
		} );

it( type, () => {
				const HTML = readFile( path.join( __dirname, `fixtures/${ type }-in.html` ) );
				const plainText = readFile( path.join( __dirname, `fixtures/${ type }-in.txt` ) );
				const output = readFile( path.join( __dirname, `fixtures/${ type }-out.html` ) );
				const converted = pasteHandler( { HTML, plainText, canUserUseUnfilteredHTML: true } );
				const serialized = typeof converted === 'string' ? converted : serialize( converted );

				expect( serialized ).toBe( output );

				if ( type !== 'gutenberg' ) {
					expect( console ).toHaveLogged();
				}
			} );
		} );

it( 'should convert a caption shortcode with caption', () => {
		const HTML = readFile( path.join( __dirname, 'fixtures/shortcode-caption-with-caption-link.html' ) );
		expect( serialize( rawHandler( { HTML } ) ) ).toMatchSnapshot();
	} );
} );

Object.keys( nextWidgetAreas ).reduce( ( value, id ) => {
				value[ id ] = serialize( nextWidgetAreas[ id ] );
				return value;
			}, {} )
		);

export function getEditorDOM(excludeInvalid = false): HTMLDivElement {
    const doc = document.createElement('div');
    if (excludeInvalid) {
        const filteredBlocks = select('core/editor')
            .getEditorBlocks()
            .filter(
                block =>
                    !INVALID_BLOCK_TYPES.includes(block.name) && block.isValid,
            );
        doc.innerHTML = serialize(filteredBlocks);
    } else {
        doc.innerHTML = select('core/editor').getEditedPostContent();
    }
    return doc;
}

serializeToNativeAction() {
		if ( this.props.mode === 'text' ) {
			this.updateHtmlAction( this.props.getEditedPostContent() );
		}

		const html = serialize( this.props.getEditorBlocks() );
		const title = this.props.getEditedPostAttribute( 'title' );

		const hasChanges = title !== this.post.title.raw || html !== this.post.content.raw;

		RNReactNativeGutenbergBridge.provideToNative_Html( html, title, hasChanges );

		if ( hasChanges ) {
			this.post.title.raw = title;
			this.post.content.raw = html;
		}
	}

serializeToNativeAction() {
		if ( this.props.mode === 'text' ) {
			this.updateHtmlAction( this.props.getEditedPostContent() );
		}

		const html = serialize( this.props.blocks );
		const title = this.props.title;

		const hasChanges = title !== this.post.title.raw || html !== this.post.content.raw;

		RNReactNativeGutenbergBridge.provideToNative_Html( html, title, hasChanges );

		if ( hasChanges ) {
			this.post.title.raw = title;
			this.post.content.raw = html;
		}
	}

serializeToNativeAction() {
		if ( this.props.mode === 'text' ) {
			this.updateHtmlAction( this.props.getEditedPostContent() );
		}

		const html = serialize( this.props.blocks );
		const title = this.props.title;

		const hasChanges = title !== this.lastTitle || html !== this.lastHtml;

		RNReactNativeGutenbergBridge.provideToNative_Html( html, title, hasChanges );

		this.lastTitle = title;
		this.lastHtml = html;
	}