Merge pull request #726 from contember/fix/editor-blocks

Fix editor blocks

Author: matej21

build/api/react-slate-editor-legacy.api.md

@@ -18,7 +18,7 @@ import { EntityAccessor } from '@contember/react-binding';
 import { EntityAccessor as EntityAccessor_2 } from '@contember/binding';
 import { EntityId } from '@contember/react-binding';
 import { EntityId as EntityId_2 } from '@contember/binding';
-import type { Environment } from '@contember/react-binding';
+import { Environment } from '@contember/react-binding';
 import { FieldAccessor } from '@contember/react-binding';
 import { FieldValue } from '@contember/react-binding';
 import { FunctionComponent } from 'react';
@@ -339,7 +339,7 @@ export interface UseBlockEditorSlateNodesOptions {
 }
 
 // @public (undocumented)
-export const useBlockProps: (children: ReactNode) => BlockProps[];
+export const useBlockProps: (children: ReactNode, env: Environment) => BlockProps[];
 
 // @public (undocumented)
 export const useDiscriminatedData: <Datum extends DiscriminatedDatum = DiscriminatedDatum>(source: Iterable<Datum>) => NormalizedDiscriminatedData<Datum>;
@@ -348,7 +348,7 @@ export const useDiscriminatedData: <Datum extends DiscriminatedDatum = Discrimin
 export const useEditorReferenceBlocks: () => EditorReferenceBlocks;
 
 // @public (undocumented)
-export const useNormalizedBlocks: (children: ReactNode) => NormalizedBlocks;
+export const useNormalizedBlocks: (children: ReactNode, env: Environment) => NormalizedBlocks;
 
 // @public (undocumented)
 export interface WithBlockElements {

packages/playground/tailwind.config.js

@@ -1,7 +1,7 @@
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-	content: ['./**/*.{html,js,tsx,ts}'],
+	content: ['./**/*.{html,js,tsx,ts}', '../react-ui-lib/src/**/*.{html,js,tsx,ts}'],
 	darkMode: ['class'],
 	theme: {
 		container: {

packages/react-slate-editor-legacy/src/blockEditor/BlockEditor.tsx

@@ -7,6 +7,7 @@ import {
 	SugaredField,
 	SugaredFieldProps,
 	SugaredRelativeEntityList,
+	TreeNodeEnvironmentFactory,
 	useDesugaredRelativeSingleField,
 	useEntity,
 	useEnvironment,
@@ -81,7 +82,17 @@ const BlockEditorComponent: FunctionComponent<BlockEditorProps> = Component(
 		const desugaredEmbedContentDiscriminationField = useDesugaredRelativeSingleField(embedContentDiscriminationField)
 
 
-		const editorReferenceBlocks = useEditorReferenceBlocks(children)
+
+		let refEnv = environment
+		if (!props.monolithicReferencesMode) {
+			refEnv = TreeNodeEnvironmentFactory.createEnvironmentForEntityList(refEnv, {
+				field: props.field,
+			})
+		}
+		refEnv = referencesField ? TreeNodeEnvironmentFactory.createEnvironmentForEntityList(refEnv, typeof referencesField === 'string' ? {
+			field: referencesField,
+		} : referencesField) : refEnv
+		const editorReferenceBlocks = useEditorReferenceBlocks(children, refEnv)
 
 		//
 
@@ -96,6 +107,7 @@ const BlockEditorComponent: FunctionComponent<BlockEditorProps> = Component(
 			embedReferenceDiscriminant !== undefined
 				? getDiscriminatedBlock(editorReferenceBlocks, embedReferenceDiscriminant)?.datum.children
 				: undefined, // TODO this may crash
+			refEnv,
 		)
 
 		const entity = useEntity()

packages/react-slate-editor-legacy/src/blockEditor/templating/useEditorReferenceBlocks.ts

@@ -1,4 +1,4 @@
-import { useEnvironment } from '@contember/react-binding'
+import { Environment, useEnvironment } from '@contember/react-binding'
 import { useConstantValueInvariant } from '@contember/react-utils'
 import { ReactNode, useMemo } from 'react'
 import { BlockProps, useBlockProps } from '../../blocks'
@@ -11,11 +11,10 @@ export interface EditorReferenceBlock extends BlockProps {
 
 export type EditorReferenceBlocks = NormalizedDiscriminatedData<EditorReferenceBlock>
 
-export const useEditorReferenceBlocks = (children: ReactNode): EditorReferenceBlocks => {
+export const useEditorReferenceBlocks = (children: ReactNode, env: Environment): EditorReferenceBlocks => {
 	useConstantValueInvariant(children, `BlockEditor: cannot change the set of Blocks between renders!`)
-	const env = useEnvironment()
 
-	const propList = useBlockProps(children)
+	const propList = useBlockProps(children, env)
 	const propsWithTemplates = useMemo(() => {
 		return propList.map(
 			(props): EditorReferenceBlock => ({

packages/react-slate-editor-legacy/src/blocks/useBlockProps.ts

@@ -1,15 +1,13 @@
-import { useEnvironment } from '@contember/react-binding'
+import { Environment, useEnvironment } from '@contember/react-binding'
 import { ReactNode, useMemo } from 'react'
 import type { BlockProps } from './Block'
 import { blockAnalyzer } from './blockAnalyzer'
 
-export const useBlockProps = (children: ReactNode): BlockProps[] => {
-	const environment = useEnvironment()
-
+export const useBlockProps = (children: ReactNode, env: Environment): BlockProps[] => {
 	return useMemo(() => {
 		if (children === undefined) {
 			return []
 		}
-		return blockAnalyzer.processChildren(children, environment)
-	}, [children, environment])
+		return blockAnalyzer.processChildren(children, env)
+	}, [children, env])
 }

packages/react-slate-editor-legacy/src/blocks/useNormalizedBlocks.ts

@@ -2,11 +2,12 @@ import type { ReactNode } from 'react'
 import { NormalizedDiscriminatedData, useDiscriminatedData } from '../discrimination'
 import type { BlockProps } from './Block'
 import { useBlockProps } from './useBlockProps'
+import { Environment } from '@contember/react-binding'
 
 export type NormalizedBlocks = NormalizedDiscriminatedData<BlockProps>
 
-export const useNormalizedBlocks = (children: ReactNode): NormalizedBlocks => {
-	const propList = useBlockProps(children)
+export const useNormalizedBlocks = (children: ReactNode, env: Environment): NormalizedBlocks => {
+	const propList = useBlockProps(children, env)
 
 	return useDiscriminatedData<BlockProps>(propList)
 }

packages/react-slate-editor/src/plugins/references/withReferences.tsx

@@ -1,6 +1,6 @@
 import { EditorPlugin, EditorPluginWrapperProps } from '@contember/react-slate-editor-base'
 import { useMemo } from 'react'
-import { SugaredRelativeEntityList, SugaredRelativeSingleField } from '@contember/binding'
+import { SugaredRelativeEntityList, SugaredRelativeSingleField, TreeNodeEnvironmentFactory } from '@contember/binding'
 import { isElementWithReference } from './elements'
 import { referenceOverrides } from './referenceOverrides'
 import { ErrorBoundary } from 'react-error-boundary'
@@ -22,7 +22,9 @@ export interface ReferencesPluginArgs {
 export const withReferences = (args: ReferencesPluginArgs): EditorPlugin => {
 	return {
 		extendEditor: ({ editor, children, environment, entity }) => {
-			const blocks = getEditorReferenceBlocks(children, environment)
+			const blocks = getEditorReferenceBlocks(children, TreeNodeEnvironmentFactory.createEnvironmentForEntityList(environment, {
+				field: args.field,
+			}))
 			for (const block of Object.values(blocks)) {
 				editor.registerElement({
 					type: block.name,
@@ -58,7 +60,9 @@ export const withReferences = (args: ReferencesPluginArgs): EditorPlugin => {
 			const env = useEnvironment()
 
 			const editorReferenceBlocks = useMemo(() => {
-				return getEditorReferenceBlocks(children, env)
+				return getEditorReferenceBlocks(children, TreeNodeEnvironmentFactory.createEnvironmentForEntityList(env, {
+					field: args.field,
+				}))
 			}, [children, env])
 			useCleanupReferences({ field: args.field, editor })