feat: replace fragment type root node on drop

Author: mu29

packages/react/src/editor/Droppable/Droppable.tsx

@@ -10,13 +10,13 @@ import styles from './Droppable.module.css';
 type Props = PropsWithChildren<{
   item: Node;
   index: number;
-  replace?: boolean;
+  fullScreen?: boolean;
   onDrop?: (item: Node) => void;
 }>;
 
 const getClassName = getClassNameFactory('Droppable', styles);
 
-export const Droppable: FC<Props> = ({ item, index, replace, onDrop, ...props }) => {
+export const Droppable: FC<Props> = ({ item, index, fullScreen, onDrop, ...props }) => {
   const { isDragging, focusedBlock, relocateFocusedBlock, insertBlock } = useEditing();
 
   const [{ isOver }, dropRef] = useDrop<Node, unknown, { isOver: boolean }>({
@@ -56,7 +56,7 @@ export const Droppable: FC<Props> = ({ item, index, replace, onDrop, ...props })
       className={getClassName({
         active: isDragging,
         over: isOver,
-        fullScreen: !!replace,
+        fullScreen: !!fullScreen,
       })}
       {...props}
     />

packages/react/src/editor/Preview/Preview.tsx

@@ -55,10 +55,10 @@ const pragma: Pragma = {
 };
 
 export const Preview = () => {
-  const { root } = useEditing();
+  const { root, replaceRoot } = useEditing();
 
   if (root.type === 'Fragment' && root.children.length === 0) {
-    return <Droppable item={root} index={0} replace={true} />;
+    return <Droppable item={root} index={0} fullScreen={true} onDrop={replaceRoot} />;
   }
 
   return <Renderer source={root} pragma={pragma} />;