chore: docs

packages/docs/docs/core/dnd/dragAndDrop.mdx

@@ -5,8 +5,6 @@ sidebar_position: 1
 
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import { MultiFrameworkContainer } from '@site/src/components/ui/container';
-import DndDockview from '@site/sandboxes/dnd-dockview/src/app';
-import DockviewExternalDnd from '@site/sandboxes/externaldnd-dockview/src/app';
 import LiveExample from '@site/src/components/ui/exampleFrame';
 
 import { DocRef } from '@site/src/components/ui/reference/docRef';
@@ -16,7 +14,7 @@ The dock makes heavy use of drag and drop functionalities.
 <DocRef declaration="DockviewApi"
   methods={[
     'onWillDragPanel', 'onWillDragGroup',
-    'onWillDrop', 'onDidDrop', 'onWillShowOverlay'
+    'onWillDrop', 'onWillShowOverlay'
   ]}
   />
 
@@ -79,12 +77,6 @@ return (
 );
 ```
 
-## Intercepting Drag Events
-
-You can intercept drag events to attach your own metadata using the `onWillDragPanel` and `onWillDragGroup` api methods.
-
-<MultiFrameworkContainer sandboxId="dnd-dockview" react={DndDockview} />
-
 ## Third Party Dnd Libraries
 
 This shows a simple example of a third-party library used inside a panel that relies on drag

packages/docs/docs/core/dnd/external.mdx

@@ -0,0 +1,31 @@
+---
+title: 'External Dnd Events'
+sidebar_position: 3
+---
+
+External Dnd events can be intercepted through a number of utilities.
+
+import { DocRef } from '@site/src/components/ui/reference/docRef';
+import LiveExample from '@site/src/components/ui/exampleFrame';
+
+<DocRef declaration="DockviewApi"
+  methods={['onDidDrop']}
+/>
+
+
+<FrameworkSpecific framework='React'>
+  <DocRef declaration="IDockviewReactProps" methods={['showDndOverlay']} />
+</FrameworkSpecific>
+
+<FrameworkSpecific framework='JavaScript'>
+  <DocRef declaration="DockviewComponentOptions"
+  methods={['showDndOverlay']}
+  />
+</FrameworkSpecific>
+
+
+## Intercepting Drag Events
+
+You can intercept drag events to attach your own metadata using the `onWillDragPanel` and `onWillDragGroup` api methods.
+
+<LiveExample framework='react' id="dockview/dnd-external" />

packages/docs/docs/core/dnd/overview.mdx

@@ -4,11 +4,6 @@ sidebar_position: 0
 ---
 
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import { MultiFrameworkContainer } from '@site/src/components/ui/container';
-import DndDockview from '@site/sandboxes/dnd-dockview/src/app';
-import DockviewExternalDnd from '@site/sandboxes/externaldnd-dockview/src/app';
-
-import { DocRef } from '@site/src/components/ui/reference/docRef';
 
 Dockview supports a wide variety of built-in Drag and Drop possibilities.
 

packages/docs/sandboxes/dnd-dockview/package.json → packages/docs/sandboxes/react/dockview/dnd-external/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "dnd-dockview",
+  "name": "dockview.dnd-external",
   "description": "",
   "keywords": [
     "dockview"

packages/docs/sandboxes/dnd-dockview/src/app.tsx → packages/docs/sandboxes/react/dockview/dnd-external/src/app.tsx

@@ -1,7 +1,7 @@
 import {
     DockviewApi,
     DockviewDndOverlayEvent,
-    DockviewDropEvent,
+    DockviewDidDropEvent,
     DockviewReact,
     DockviewReadyEvent,
     IDockviewPanelProps,
@@ -123,7 +123,7 @@ const DndDockview = (props: { renderVisibleOnly: boolean; theme?: string }) => {
         setApi(event.api);
     };
 
-    const onDidDrop = (event: DockviewDropEvent) => {
+    const onDidDrop = (event: DockviewDidDropEvent) => {
         event.api.addPanel({
             id: 'test',
             component: 'default',