feat: handle root with Fragment only

Author: mu29

packages/react/src/editor/Droppable/Droppable.module.css

@@ -30,3 +30,14 @@
   background-color: var(--composify-palette-primary);
   opacity: 0.8;
 }
+
+.Droppable--fullScreen {
+  display: block !important;
+  position: fixed !important;
+  width: auto !important;
+  height: auto !important;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}

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

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

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

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