fix(admin): do not render trash block in block editor

Author: matej21

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<EntityId>()
+	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 })
 

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<EntityAccessor[]>,
 	contentField: SugaredFieldProps['field'],
@@ -21,12 +21,12 @@ export const useRefreshBlocks = ({ editor, sortedBlocksRef, sortableBy, contentF
 	blockElementPathRefs: BlockElementPathRefs
 	referencesField?: SugaredRelativeEntityList | string
 	monolithicReferencesMode?: boolean
+	trashFakeBlockId: MutableRefObject<EntityId | undefined>
 }) => {
 	const desugaredBlockList = useDesugaredRelativeEntityList(blockList)
 	const desugaredBlockContentField = useDesugaredRelativeSingleField(contentField)
 	const desugaredSortableByField = useDesugaredRelativeSingleField(sortableBy)
 	const getParentEntityRef = useGetParentEntityRef()
-	const trashFakeBlockId = useRef<EntityId>()
 	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])
 }