fix(core): split view reordering crash (#9461)
a workaround fix AF-1940
This commit is contained in:
@@ -14,7 +14,7 @@ import {
|
|||||||
import { useService } from '@toeverything/infra';
|
import { useService } from '@toeverything/infra';
|
||||||
import clsx from 'clsx';
|
import clsx from 'clsx';
|
||||||
import type { HTMLAttributes, RefObject } from 'react';
|
import type { HTMLAttributes, RefObject } from 'react';
|
||||||
import { useCallback, useMemo, useRef, useState } from 'react';
|
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||||
import { createPortal } from 'react-dom';
|
import { createPortal } from 'react-dom';
|
||||||
|
|
||||||
import type { View } from '../../entities/view';
|
import type { View } from '../../entities/view';
|
||||||
@@ -50,6 +50,10 @@ export const SplitView = ({
|
|||||||
const { appSettings } = useAppSettingHelper();
|
const { appSettings } = useAppSettingHelper();
|
||||||
const workbench = useService(WorkbenchService).workbench;
|
const workbench = useService(WorkbenchService).workbench;
|
||||||
|
|
||||||
|
// blocksuite's lit host element has an issue on remounting.
|
||||||
|
// Add a workaround here to force remounting after dropping.
|
||||||
|
const [visible, setVisibility] = useState(true);
|
||||||
|
|
||||||
const sensors = useSensors(
|
const sensors = useSensors(
|
||||||
useSensor(
|
useSensor(
|
||||||
PointerSensor,
|
PointerSensor,
|
||||||
@@ -102,11 +106,25 @@ export const SplitView = ({
|
|||||||
const fromIndex = views.findIndex(v => v.id === active.id);
|
const fromIndex = views.findIndex(v => v.id === active.id);
|
||||||
const toIndex = views.findIndex(v => v.id === over?.id);
|
const toIndex = views.findIndex(v => v.id === over?.id);
|
||||||
onMove?.(fromIndex, toIndex);
|
onMove?.(fromIndex, toIndex);
|
||||||
|
setVisibility(false);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[onMove, views]
|
[onMove, views]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!visible) {
|
||||||
|
const timeoutId = setTimeout(() => {
|
||||||
|
setVisibility(true);
|
||||||
|
}, 0);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
clearTimeout(timeoutId);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}, [visible]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
ref={rootRef}
|
ref={rootRef}
|
||||||
@@ -121,11 +139,13 @@ export const SplitView = ({
|
|||||||
onDragEnd={handleDragEnd}
|
onDragEnd={handleDragEnd}
|
||||||
>
|
>
|
||||||
<SortableContext items={views} strategy={horizontalListSortingStrategy}>
|
<SortableContext items={views} strategy={horizontalListSortingStrategy}>
|
||||||
{views.map((view, index) => (
|
{views.map((view, index) =>
|
||||||
<SplitViewPanel view={view} key={view.id} setSlots={setSlots}>
|
visible ? (
|
||||||
{resizeHandleRenderer(view, index)}
|
<SplitViewPanel view={view} key={view.id} setSlots={setSlots}>
|
||||||
</SplitViewPanel>
|
{resizeHandleRenderer(view, index)}
|
||||||
))}
|
</SplitViewPanel>
|
||||||
|
) : null
|
||||||
|
)}
|
||||||
</SortableContext>
|
</SortableContext>
|
||||||
</DndContext>
|
</DndContext>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user