chore: docs

packages/docs/docs/basics.mdx

@@ -8,7 +8,6 @@ import { SimpleSplitview2 } from '@site/src/components/simpleSplitview2';
 
 # Basics
 
-asd
 This section will take you through a number of concepts that can be applied to all dockview components.
 
 ## Panels

packages/docs/docs/components/dockview.mdx

@@ -340,7 +340,9 @@ return (
 
 ### Third Party Dnd Libraries
 
-To be completed...
+This shows a simple example of a third-party library used inside a panel that relies on drag
+and drop functionalities. This examples serves to show that `dockview` doesn't interfer with
+any drag and drop logic for other controls.
 
 <Container>
     <DockviewExternalDnd />
@@ -612,6 +614,8 @@ to the entire width of the group. For example:
 
 ### Tab Height
 
+Tab height can be controlled through CSS.
+
 <Container sandboxId="tabheight-dockview">
     <DockviewTabheight />
 </Container>

packages/docs/sandboxes/dnd-dockview/src/app.tsx

@@ -18,6 +18,29 @@ const components = {
     },
 };
 
+const DraggableElement = () => (
+    <span
+        tabIndex={-1}
+        onDragStart={(event) => {
+            if (event.dataTransfer) {
+                event.dataTransfer.effectAllowed = 'move';
+
+                event.dataTransfer.setData('text/plain', 'nothing');
+            }
+        }}
+        style={{
+            backgroundColor: 'orange',
+            padding: '0px 8px',
+            borderRadius: '4px',
+            width: '100px',
+            cursor: 'pointer',
+        }}
+        draggable={true}
+    >
+        Drag me
+    </span>
+);
+
 const DndDockview = (props: { renderVisibleOnly: boolean }) => {
     const onReady = (event: DockviewReadyEvent) => {
         event.api.addPanel({
@@ -77,19 +100,9 @@ const DndDockview = (props: { renderVisibleOnly: boolean }) => {
                 height: '100%',
             }}
         >
-            <div
-                style={{
-                    backgroundColor: 'orange',
-                    padding: '0px 8px',
-                    borderRadius: '4px',
-                    width: '100px',
-                    cursor: 'pointer',
-                }}
-                draggable={true}
-            >
-                Drag me
+            <div style={{ margin: '2px 0px' }}>
+                <DraggableElement />
             </div>
-
             <DockviewReact
                 components={components}
                 onReady={onReady}

packages/docs/sandboxes/externaldnd-dockview/src/treeview.tsx

@@ -50,7 +50,6 @@ const SampleData = [
 const TreeComponent = () => {
     const [treeData, setTreeData] = useState(SampleData);
     const handleDrop = (newTreeData: any) => {
-        console.log('handleDrop');
         setTreeData(newTreeData);
     };
     return (