diff --git a/packages/admin/src/components/bindingFacade/richText/blockEditor/state/useBlockEditorState.ts b/packages/admin/src/components/bindingFacade/richText/blockEditor/state/useBlockEditorState.ts index 5e41786d18..8d219ba840 100644 --- a/packages/admin/src/components/bindingFacade/richText/blockEditor/state/useBlockEditorState.ts +++ b/packages/admin/src/components/bindingFacade/richText/blockEditor/state/useBlockEditorState.ts @@ -1,9 +1,12 @@ import { useBlockElementCache } from './useBlockElementCache' import { Editor } from 'slate' -import { SugaredFieldProps, SugaredRelativeEntityList, useEntityList, useSortedEntities } from '@contember/binding' +import { + EntityId, SugaredFieldProps, SugaredRelativeEntityList, + sortEntities, useDesugaredRelativeSingleField, useEntityList, +} from '@contember/binding' import { useBlockElementPathRefs } from './useBlockElementPathRefs' import { useBlockEditorOnChange } from './useBlockEditorOnChange' -import { useRef } from 'react' +import { useEffect, useMemo, useRef } from 'react' import { useBlockEditorSlateNodes } from '../useBlockEditorSlateNodes' import { useRefreshBlocks } from './useRefreshBlocks' @@ -15,13 +18,23 @@ export const useBlockEditorState = ({ editor, blockList, sortableBy, contentFiel referencesField?: SugaredRelativeEntityList | string monolithicReferencesMode?: boolean }) => { - const { entities: sortedBlocks } = useSortedEntities(useEntityList(blockList), sortableBy) + const entityList = useEntityList(blockList) + const desugaredSortableByField = useDesugaredRelativeSingleField(sortableBy) + const trashFakeBlockId = useRef() + const sortedBlocks = useMemo(() => { + return sortEntities( + Array.from(entityList).filter(it => it.id !== trashFakeBlockId.current), + desugaredSortableByField, + ) + }, [desugaredSortableByField, entityList]) const sortedBlocksRef = useRef(sortedBlocks) - sortedBlocksRef.current = sortedBlocks + useEffect(() => { + sortedBlocksRef.current = sortedBlocks + }, [sortedBlocks]) const blockElementCache = useBlockElementCache({ editor, blockList, sortableBy, contentField }) const blockElementPathRefs = useBlockElementPathRefs({ editor, blockList }) - const refreshBlocks = useRefreshBlocks({ editor, sortableBy, contentField, blockList, blockElementCache, blockElementPathRefs, referencesField, monolithicReferencesMode, sortedBlocksRef }) + const refreshBlocks = useRefreshBlocks({ editor, sortableBy, contentField, blockList, blockElementCache, blockElementPathRefs, referencesField, monolithicReferencesMode, sortedBlocksRef, trashFakeBlockId }) const onChange = useBlockEditorOnChange({ editor, blockList, contentField, blockElementCache, sortedBlocksRef, refreshBlocks }) const nodes = useBlockEditorSlateNodes({ editor, blockElementCache, blockElementPathRefs, blockContentField: contentField, topLevelBlocks: sortedBlocks }) diff --git a/packages/admin/src/components/bindingFacade/richText/blockEditor/state/useRefreshBlocks.ts b/packages/admin/src/components/bindingFacade/richText/blockEditor/state/useRefreshBlocks.ts index 207d514479..e908bd810d 100644 --- a/packages/admin/src/components/bindingFacade/richText/blockEditor/state/useRefreshBlocks.ts +++ b/packages/admin/src/components/bindingFacade/richText/blockEditor/state/useRefreshBlocks.ts @@ -11,7 +11,7 @@ import { MutableRefObject, useCallback, useRef } from 'react' import { BlockElementCache } from './useBlockElementCache' import { BlockElementPathRefs } from './useBlockElementPathRefs' -export const useRefreshBlocks = ({ editor, sortedBlocksRef, sortableBy, contentField, blockList, blockElementCache, blockElementPathRefs, referencesField, monolithicReferencesMode }: { +export const useRefreshBlocks = ({ editor, sortedBlocksRef, sortableBy, contentField, blockList, blockElementCache, blockElementPathRefs, referencesField, monolithicReferencesMode, trashFakeBlockId }: { editor: Editor, sortedBlocksRef: MutableRefObject, contentField: SugaredFieldProps['field'], @@ -21,12 +21,12 @@ export const useRefreshBlocks = ({ editor, sortedBlocksRef, sortableBy, contentF blockElementPathRefs: BlockElementPathRefs referencesField?: SugaredRelativeEntityList | string monolithicReferencesMode?: boolean + trashFakeBlockId: MutableRefObject }) => { const desugaredBlockList = useDesugaredRelativeEntityList(blockList) const desugaredBlockContentField = useDesugaredRelativeSingleField(contentField) const desugaredSortableByField = useDesugaredRelativeSingleField(sortableBy) const getParentEntityRef = useGetParentEntityRef() - const trashFakeBlockId = useRef() useEntityBeforePersist(() => { if (trashFakeBlockId.current) { const block = getParentEntityRef.current().getRelativeEntityList(desugaredBlockList).getChildEntityById(trashFakeBlockId.current) @@ -168,5 +168,5 @@ export const useRefreshBlocks = ({ editor, sortedBlocksRef, sortableBy, contentF } cleanupStack() }) - }, [blockElementCache, blockElementPathRefs, desugaredBlockContentField, desugaredBlockList, desugaredSortableByField, editor, getParentEntityRef, monolithicReferencesMode, referencesField, sortedBlocksRef]) + }, [trashFakeBlockId, blockElementCache, blockElementPathRefs, desugaredBlockContentField, desugaredBlockList, desugaredSortableByField, editor, getParentEntityRef, monolithicReferencesMode, referencesField, sortedBlocksRef]) }