Content field is unusable in Admin UI.

[johnnycrich]

Bug report

Describe the bug

The Content field renders no content blocks in the admin app editor.

To Reproduce

1. Create a project via the keystone-app starter template, e.g. yarn create keystone-app content-field-test. I used the Todo starter.
2. Add the @keystonejs/fields-content dependency (v9.0.6 as of now), e.g. yarn add @keystonejs/fields-content.
3. In the newly created index.js, refactor as follows

const { Content, } = require('@keystonejs/fields-content');
....
	fields: {
		name: { type: Text, schemaDoc: 'This is the thing you need to do', isRequired: true },
		
		body: { type: Content,
		  blocks: [
		      Content.blocks.blockquote,
		      Content.blocks.heading
		  ],
	}
	....

4. Run yarn dev.
5. Navigate to http://localhost:3000/admin/todos and click Create.
6. Focus the field for Body and click the plus icon. Note the "INSERT BLOCK" label followed by none of the content blocks (see screen below).

Expected behaviour

Clicking the plus icon in the Body field shows "INSERT BLOCK" label followed by the content blocks we specify for the field.

Screenshots

System information

• OS: macOS 10.15.7
• Browser: FF or Chrome
• node v14.4.0 (npm v7.5.3)

Additional context

Just poking around the Keystone 5 repository, I decided to run the Todo example directly, and replicated the issue there.

In the file ./packages/fields-content/src/views/editor/add-block.js, this assignment does not destructure as intended (unable to diagnose why) and is always undefined:
let { Sidebar } = blocks[key]

This is merely a very quick and dirty workaround.

function Sidebar(props) {
	let SidebarBlock = blocks[key];
	if(SidebarBlock.ToolbarElement) {
	  return (
	    <div>
	      <SidebarBlock.Node key={props.id} editor={props.editor} blocks={props.blocks} />           
	      <SidebarBlock.ToolbarElement key={`${props.id}-tool`} editor={props.editor} editorState={editorState} blocks={props.blocks} />
	    </div>
	  )
	}
	
	return <SidebarBlock.Node key={props.id} editor={props.editor} blocks={props.blocks} />
}
if (blocks[key] === undefined) {
	return null;
}

....

<Sidebar id={key} editor={editor} blocks={blocks} />
              

Doing this allows the content blocks/toolbar to show, though styling is rather broken and I am sure this would result in downstream issues.

[dejavu1987]

Having the same issue, actually, I tried all possible block types and only the image block is listed, including CloudinaryImage block.

[GLBaird]

Also, the UI completely breaks if you add an image and set it to be aligned left or right. No error message appears if you upload an image which is too large. Will confuse users if this happens. Makes Keystone a bit unusable.