Fix drag and drop for inline databases (#181)

packages/ui/src/editor/views/database.tsx

@@ -25,7 +25,19 @@ export const DatabaseNodeView = ({ node }: NodeViewProps) => {
   const { node: database, role } = data;
   if (node.attrs.inline) {
     return (
-      <NodeViewWrapper data-id={node.attrs.id} className="my-4 w-full">
+      <NodeViewWrapper
+        data-id={node.attrs.id}
+        className="my-4 w-full"
+        contentEditable={false}
+        onDragStart={(e: React.DragEvent<HTMLDivElement>) => {
+          e.stopPropagation();
+          e.preventDefault();
+        }}
+        onDragOver={(e: React.DragEvent<HTMLDivElement>) => {
+          e.preventDefault();
+          e.stopPropagation();
+        }}
+      >
         <Database database={database} role={role}>
           <DatabaseViews inline />
         </Database>
@@ -39,7 +51,7 @@ export const DatabaseNodeView = ({ node }: NodeViewProps) => {
   return (
     <NodeViewWrapper
       data-id={node.attrs.id}
-      className="my-0.5 w-full cursor-pointer flex-row items-center gap-1 rounded-md bg-gray-50 p-2 hover:bg-gray-100"
+      className="my-0.5 flex h-12 w-full cursor-pointer flex-row items-center gap-1 rounded-md bg-gray-50 p-2 hover:bg-gray-100"
       onClick={() => {
         layout.previewLeft(id, true);
       }}

packages/ui/src/lib/dnd-backend.ts

@@ -8,7 +8,12 @@ import { HTML5Backend as ReactDndHTML5Backend } from 'react-dnd-html5-backend';
 // https://github.com/react-dnd/react-dnd/issues/802
 
 const shouldIgnoreTarget = (domNode: HTMLElement) => {
-  return domNode.closest('.ProseMirror');
+  const hasProseMirror = domNode.closest('.ProseMirror');
+  if (hasProseMirror) {
+    return !domNode.closest('.react-renderer.node-database');
+  }
+
+  return false;
 };
 
 export const HTML5Backend = (...args: unknown[]) => {