refactor(editor): toc dragging with std.dnd (#9883)

Close [BS-2458](https://linear.app/affine-design/issue/BS-2458/toc-dnd重构)

### What Changes
- Refactor toc note card dnd with `std.dnd`
- Extract note display mode change to command `changeNoteDisplayMode`
  - It will reorder notes when the display mode changed from `EdgelessOnly` to page mode visible (a.k.a `DocOnly` or `Both`)

blocksuite/playground/apps/_common/components/custom-outline-panel.ts

@@ -1,10 +1,11 @@
+import { ShadowlessElement } from '@blocksuite/block-std';
 import { WithDisposable } from '@blocksuite/global/utils';
 import type { AffineEditorContainer } from '@blocksuite/presets';
-import { css, html, LitElement, nothing } from 'lit';
+import { css, html, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 
 @customElement('custom-outline-panel')
-export class CustomOutlinePanel extends WithDisposable(LitElement) {
+export class CustomOutlinePanel extends WithDisposable(ShadowlessElement) {
   static override styles = css`
     .custom-outline-container {
       position: absolute;