diff --git a/build/api/react-slate-editor-legacy.api.md b/build/api/react-slate-editor-legacy.api.md index 23fc38889..4a8fec334 100644 --- a/build/api/react-slate-editor-legacy.api.md +++ b/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: (source: Iterable) => NormalizedDiscriminatedData; @@ -348,7 +348,7 @@ export const useDiscriminatedData: EditorReferenceBlocks; // @public (undocumented) -export const useNormalizedBlocks: (children: ReactNode) => NormalizedBlocks; +export const useNormalizedBlocks: (children: ReactNode, env: Environment) => NormalizedBlocks; // @public (undocumented) export interface WithBlockElements { diff --git a/packages/playground/tailwind.config.js b/packages/playground/tailwind.config.js index 176f2ae78..380ba1da9 100644 --- a/packages/playground/tailwind.config.js +++ b/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: { diff --git a/packages/react-slate-editor-legacy/src/blockEditor/BlockEditor.tsx b/packages/react-slate-editor-legacy/src/blockEditor/BlockEditor.tsx index b8c517cdb..e47cfaf0b 100644 --- a/packages/react-slate-editor-legacy/src/blockEditor/BlockEditor.tsx +++ b/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 = 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 = Component( embedReferenceDiscriminant !== undefined ? getDiscriminatedBlock(editorReferenceBlocks, embedReferenceDiscriminant)?.datum.children : undefined, // TODO this may crash + refEnv, ) const entity = useEntity() diff --git a/packages/react-slate-editor-legacy/src/blockEditor/templating/useEditorReferenceBlocks.ts b/packages/react-slate-editor-legacy/src/blockEditor/templating/useEditorReferenceBlocks.ts index e780ef6b6..021ad3288 100644 --- a/packages/react-slate-editor-legacy/src/blockEditor/templating/useEditorReferenceBlocks.ts +++ b/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 -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 => ({ diff --git a/packages/react-slate-editor-legacy/src/blocks/useBlockProps.ts b/packages/react-slate-editor-legacy/src/blocks/useBlockProps.ts index f36b68b7b..1a92802d8 100644 --- a/packages/react-slate-editor-legacy/src/blocks/useBlockProps.ts +++ b/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]) } diff --git a/packages/react-slate-editor-legacy/src/blocks/useNormalizedBlocks.ts b/packages/react-slate-editor-legacy/src/blocks/useNormalizedBlocks.ts index ee11fb907..72b1763a9 100644 --- a/packages/react-slate-editor-legacy/src/blocks/useNormalizedBlocks.ts +++ b/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 -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(propList) } diff --git a/packages/react-slate-editor/src/plugins/references/withReferences.tsx b/packages/react-slate-editor/src/plugins/references/withReferences.tsx index 7792d2d9b..0dfffef9f 100644 --- a/packages/react-slate-editor/src/plugins/references/withReferences.tsx +++ b/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 })