@blocksuite/blocks - npm Package Compare versions

Comparing version 0.4.0-20230110192220-0bac914 to 0.4.0-20230111121357-6129124

dist/__internal__/rich-text/rich-text.js

@@ -14,3 +14,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 import { NonShadowLitElement } from '../utils/lit.js';
-Quill.register('modules/cursors', QuillCursors);
+Quill.register('modules/cursors', QuillCursors, true);
 const Clipboard = Quill.import('modules/clipboard');
@@ -17,0 +17,0 @@ class EmptyClipboard extends Clipboard {

dist/code-block/code-block.js

@@ -51,2 +51,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
                   height="24px"
+                  fontSize="14px"
                   class="${this.showLangList === 'hidden' ? '' : 'clicked'}"
@@ -153,3 +154,2 @@ >
     }
-    //</editor-fold>
 
@@ -165,3 +165,2 @@ code-block {
       position: relative;
-      width: 720px;
       padding: 32px 0;
@@ -183,3 +182,3 @@ background: var(--affine-code-block-background);
       top: 12px;
-      left: 9px;
+      left: 12px;
     }
@@ -210,3 +209,3 @@
     .affine-code-block-container .ql-syntax {
-      width: 660px;
+      width: 620px;
       margin: 0;
@@ -235,5 +234,10 @@ overflow: scroll;
 
+    .lang-container code-block-button {
+      padding: 4px 0 0 12px;
+      justify-content: flex-start;
+    }
+
     .code-block-option {
-      box-shadow: 0px 1px 10px -6px rgba(24, 39, 75, 0.8),
-        0px 3px 16px -6px rgba(24, 39, 75, 0.4);
+      box-shadow: 0px 1px 10px -6px rgba(24, 39, 75, 0.08),
+        0px 3px 16px -6px rgba(24, 39, 75, 0.04);
       border-radius: 10px;
@@ -240,0 +244,0 @@ list-style: none;

dist/code-block/components/button.d.ts

@@ -6,2 +6,3 @@ import { IconButton } from '../../components/button.js';
     height: string | number;
+    fontSize: string | number;
     connectedCallback(): void;
@@ -8,0 +9,0 @@ render(): import("lit-html").TemplateResult<1>;

dist/code-block/components/button.js

@@ -16,2 +16,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
         this.height = '32px';
+        this.fontSize = '16px';
     }
@@ -22,2 +23,3 @@ connectedCallback() {
         this.style.setProperty('--button-height', typeof this.height === 'string' ? this.height : `${this.height}px`);
+        this.style.setProperty('font-size', typeof this.fontSize === 'string' ? this.fontSize : `${this.fontSize}px`);
     }
@@ -42,2 +44,5 @@ render() {
 ], CodeBlockButton.prototype, "height", void 0);
+__decorate([
+    property()
+], CodeBlockButton.prototype, "fontSize", void 0);
 CodeBlockButton = __decorate([
@@ -44,0 +49,0 @@ customElement('code-block-button')

dist/code-block/components/lang-list.js

@@ -82,3 +82,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
         border-radius: 10px;
-        padding-left: 20.25%;
+        padding-left: 44px;
         padding-top: 4px;
@@ -103,3 +103,3 @@
       .search-icon {
-        left: 8.25%;
+        left: 13.65px;
         position: absolute;
@@ -106,0 +106,0 @@ top: 16px;

dist/code-block/components/syntax-code-block.js

@@ -44,3 +44,3 @@ import Quill from 'quill';
         const lineNumberDigits = lineNum.toString().length;
-        container.style.left = 25 - lineNumberDigits * 8 + 'px';
+        container.style.left = 32 - lineNumberDigits * 8 + 'px';
         for (let i = 1; i <= lineNum; i++) {
@@ -47,0 +47,0 @@ const node = document.createElement('div');

dist/components/drag-handle.d.ts

@@ -43,3 +43,3 @@ import { LitElement } from 'lit';
     private _onDragEnd;
-    render(): import("lit-html").TemplateResult<1> | null;
+    render(): import("lit-html").TemplateResult<1>;
 }
@@ -46,0 +46,0 @@ declare global {

dist/components/drag-handle.js

@@ -12,3 +12,2 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 import { assertExists, getBlockElementByModel } from '../__internal__/index.js';
-const IS_PROD = location.href.includes('pathfinder');
 const handlePreventDocumentDragOverDelay = (event) => {
@@ -194,4 +193,2 @@ // Refs: https://stackoverflow.com/a/65910078
     render() {
-        if (IS_PROD)
-            return null;
         return html `
@@ -198,0 +195,0 @@ <div class="affine-drag-handle">

dist/index.js

 /// <reference types="./index.d.ts" />
 /**/
 
-import { aN as p, aL as g, at as k, am as S, au as y, aO as C, av as h, an as u, aK as M, ao as P, aM as v, aJ as D, ak as x, ap as F, aP as T, al as E, aR as f, aQ as L, aS as A, ae as I, a8 as N, a9 as R, a as b, ax as z, ad as H, aj as j, e as q, c as w, b as O, aq as G, af as K, ar as Q, az as U, d as J, A as W, f as _, j as V, r as X, q as Y, x as Z, w as $, p as aa, aw as ea, aD as oa, v as ta, u as sa, n as la, m as na, k as ca, o as ra, l as ia, y as Ba, t as da, g as ma, s as pa, z as ga, aH as ka, aE as Sa, aC as ya, aF as Ca, aG as ha, i as ua, ac as Ma, aa as Pa, ag as va, ay as Da, ah as xa, ab as Fa, ai as Ta, as as Ea, aB as fa, aI as La, aA as Aa } from "./index-d66a453b.js";
+import { aN as p, aL as g, at as k, am as S, au as y, aO as C, av as h, an as u, aK as M, ao as P, aM as v, aJ as D, ak as x, ap as F, aP as T, al as E, aR as f, aQ as L, aS as A, ae as I, a8 as N, a9 as R, a as b, ax as z, ad as H, aj as j, e as q, c as w, b as O, aq as G, af as K, ar as Q, az as U, d as J, A as W, f as _, j as V, r as X, q as Y, x as Z, w as $, p as aa, aw as ea, aD as oa, v as ta, u as sa, n as la, m as na, k as ca, o as ra, l as ia, y as Ba, t as da, g as ma, s as pa, z as ga, aH as ka, aE as Sa, aC as ya, aF as Ca, aG as ha, i as ua, ac as Ma, aa as Pa, ag as va, ay as Da, ah as xa, ab as Fa, ai as Ta, as as Ea, aB as fa, aI as La, aA as Aa } from "./index-34efcb47.js";
 import { e as Na, j as Ra, C as ba, D as za, k as Ha, E as ja, n as qa, F as wa, i as Oa, L as Ga, h as Ka, g as Qa, l as Ua, d as Ja, a as Wa, m as _a, f as Va, T as Xa, c as Ya } from "./models-c8c329a2.js";
@@ -6,0 +6,0 @@ import "lit";

dist/page-block/default/components.js

@@ -181,3 +181,2 @@ import { html } from 'lit';
           class="has-tool-tip"
-          width="100%"
           @click=${() => copyCode(codeBlockOption)}
@@ -192,3 +191,2 @@ >
           class="has-tool-tip ${isWrapped ? 'filled' : ''}"
-          width="100%"
           @click=${() => toggleWrap(codeBlockOption)}
@@ -203,3 +201,2 @@ >
           class="has-tool-tip"
-          width="100%"
           @click=${() => deleteCodeBlock(codeBlockOption)}
@@ -206,0 +203,0 @@ >

dist/page-block/default/default-page-block.d.ts

@@ -1,2 +0,2 @@
-import { Signal, Page, BaseBlockModel } from '@blocksuite/store';
+import { BaseBlockModel, Page, Signal } from '@blocksuite/store';
 import type { PageBlockModel } from '../index.js';
@@ -3,0 +3,0 @@ import { type BlockHost, SelectionPosition } from '../../__internal__/index.js';

dist/page-block/default/default-page-block.js

@@ -8,3 +8,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 /// <reference types="vite/client" />
-import { html, css } from 'lit';
+import { css, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
@@ -11,0 +11,0 @@ import { Signal, Text } from '@blocksuite/store';

dist/page-block/default/selection-manager.d.ts

@@ -39,3 +39,3 @@ import type { Page } from '@blocksuite/store';
     private _container;
-    private _mouseDisposeCallback;
+    private _disposeCallbacks;
     private _signals;
@@ -42,0 +42,0 @@ private _embedResizeManager;

dist/page-block/default/selection-manager.js

@@ -96,3 +96,5 @@ import { showFormatQuickBar } from '../../components/format-quick-bar/index.js';
         this.state = new PageSelectionState('none');
+        this._disposeCallbacks = [];
         this._dragHandleAbortController = new AbortController();
+        this._dragHandle = null;
         this._setSelectedBlocks = (selectedBlocks) => {
@@ -226,11 +228,13 @@ this.state.selectedBlocks = selectedBlocks;
             else if (hoverEditingState?.model.flavour === 'affine:code') {
-                hoverEditingState.position.x = hoverEditingState.position.right + 10;
+                hoverEditingState.position.x = hoverEditingState.position.right + 12;
                 this._signals.updateCodeBlockOption.emit(hoverEditingState);
             }
             else {
-                const clickDragState = getBlockEditingStateByPosition(this._blocks, e.raw.pageX, e.raw.pageY, {
-                    skipX: true,
-                });
-                if (clickDragState?.model) {
-                    this._dragHandle.show(clickDragState);
+                if (this._dragHandle) {
+                    const clickDragState = getBlockEditingStateByPosition(this._blocks, e.raw.pageX, e.raw.pageY, {
+                        skipX: true,
+                    });
+                    if (clickDragState?.model) {
+                        this._dragHandle.show(clickDragState);
+                    }
                 }
@@ -248,31 +252,51 @@ this._signals.updateEmbedEditingState.emit(null);
         this._container = container;
-        this._dragHandle = new DragHandle({
-            setSelectedBlocks: this._setSelectedBlocks,
-            onDropCallback: (e, start, end) => {
-                const startModel = start.model;
-                const rect = end.position;
-                const nextModel = end.model;
-                if (doesInSamePath(this.page, nextModel, startModel)) {
-                    return;
+        const createHandle = () => {
+            this._dragHandle = new DragHandle({
+                setSelectedBlocks: this._setSelectedBlocks,
+                onDropCallback: (e, start, end) => {
+                    const startModel = start.model;
+                    const rect = end.position;
+                    const nextModel = end.model;
+                    if (doesInSamePath(this.page, nextModel, startModel)) {
+                        return;
+                    }
+                    this.page.captureSync();
+                    const distanceToTop = Math.abs(rect.top - e.y);
+                    const distanceToBottom = Math.abs(rect.bottom - e.y);
+                    this.page.moveBlock(startModel, nextModel, distanceToTop < distanceToBottom);
+                    this.clearRects();
+                },
+                getBlockEditingStateByPosition: (pageX, pageY, skipX) => {
+                    return getBlockEditingStateByPosition(this._blocks, pageX, pageY, {
+                        skipX,
+                    });
+                },
+                getBlockEditingStateByCursor: (pageX, pageY, cursor, size, skipX) => {
+                    return getBlockEditingStateByCursor(this._blocks, pageX, pageY, cursor, {
+                        size,
+                        skipX,
+                    });
+                },
+            });
+        };
+        this._disposeCallbacks.push(this.page.awareness.signals.update.on(msg => {
+            if (msg.id !== this.page.doc.clientID) {
+                return;
+            }
+            if (msg.state?.flags.enable_drag_handle) {
+                // todo: implement subscribe with selector
+                if (!this._dragHandle) {
+                    createHandle();
                 }
-                this.page.captureSync();
-                const distanceToTop = Math.abs(rect.top - e.y);
-                const distanceToBottom = Math.abs(rect.bottom - e.y);
-                this.page.moveBlock(startModel, nextModel, distanceToTop < distanceToBottom);
-                this.clearRects();
-            },
-            getBlockEditingStateByPosition: (pageX, pageY, skipX) => {
-                return getBlockEditingStateByPosition(this._blocks, pageX, pageY, {
-                    skipX,
-                });
-            },
-            getBlockEditingStateByCursor: (pageX, pageY, cursor, size, skipX) => {
-                return getBlockEditingStateByCursor(this._blocks, pageX, pageY, cursor, {
-                    size,
-                    skipX,
-                });
-            },
-        });
+            }
+            else {
+                this._dragHandle?.remove();
+                this._dragHandle = null;
+            }
+        }).dispose);
+        if (this.page.awareness.getFlag('enable_drag_handle')) {
+            createHandle();
+        }
         this._embedResizeManager = new EmbedResizeManager(this.state, signals);
-        this._mouseDisposeCallback = initMouseEventHandlers(this._mouseRoot, this._onContainerDragStart, this._onContainerDragMove, this._onContainerDragEnd, this._onContainerClick, this._onContainerDblClick, this._onContainerMouseMove, this._onContainerMouseOut, this._onContainerContextMenu);
+        this._disposeCallbacks.push(initMouseEventHandlers(this._mouseRoot, this._onContainerDragStart, this._onContainerDragMove, this._onContainerDragEnd, this._onContainerClick, this._onContainerDblClick, this._onContainerMouseMove, this._onContainerMouseOut, this._onContainerContextMenu));
     }
@@ -381,3 +405,5 @@ get _blocks() {
     dispose() {
-        this._dragHandle.remove();
+        if (this._dragHandle) {
+            this._dragHandle.remove();
+        }
         this._dragHandleAbortController.abort();
@@ -388,3 +414,3 @@ this._signals.updateSelectedRects.dispose();
         this._signals.updateEmbedRects.dispose();
-        this._mouseDisposeCallback();
+        this._disposeCallbacks.forEach(callback => callback());
     }
@@ -391,0 +417,0 @@ resetSelectedBlockByRect(blockRect, pageSelectionType = 'block') {

dist/page-block/default/utils.js

@@ -14,3 +14,5 @@ import { toast } from '../../components/toast.js';
     if (block.flavour === 'affine:code') {
-        return hoverDom;
+        const codeBlockDom = hoverDom.querySelector('.affine-code-block-container');
+        assertExists(codeBlockDom);
+        return codeBlockDom;
     }
@@ -24,2 +26,13 @@ else if (block.flavour === 'affine:embed' && block.type === 'image') {
 }
+function getDetectRect(block, blockRect) {
+    const detectRect = copyRect(blockRect);
+    // there is a optionBar on the right side
+    if (block.flavour === 'affine:code') {
+        detectRect.width += 52;
+    }
+    else if (block.flavour === 'affine:embed' && block.type === 'image') {
+        detectRect.width += 50;
+    }
+    return detectRect;
+}
 // Workaround native DOMRect clone issue in #632
@@ -101,5 +114,3 @@ // See https://stackoverflow.com/questions/42713229/getboundingclientrect-object-properties-cannot-be-copied
         blockRect = getBlockWithOptionBarRect(hoverDom, block).getBoundingClientRect();
-        detectRect = copyRect(blockRect);
-        // there is a optionBar on the right side
-        detectRect.width += 50;
+        detectRect = getDetectRect(block, blockRect);
     }
@@ -106,0 +117,0 @@ else {

dist/std.js

@@ -5,3 +5,3 @@ /// <reference types="./std.d.ts" />
 import { B as e, P as a, A as s, H as t, M as o, S as i, f as l, C as n, d as r, D as c, n as g, e as d, F as B, c as S, T as p, a as T } from "./models-c8c329a2.js";
-import { a as u, i as m, d as y, c as k, b as R, e as E, P as h, R as f, h as v, g as C, f as L, j as x, k as M, l as N, m as P, n as D, o as F, p as O, q as _, r as I, s as A, t as H, u as b, v as z, w as j, x as K, y as U, z as V, A as q, B as w, C as Q, D as W, E as Y, F as G, G as J, H as X, I as Z, J as $, K as ee, L as ae, M as se, N as te, O as oe, Q as ie, S as le, T as ne, U as re, V as ce, W as ge, X as de, Y as Be, Z as Se, _ as pe, $ as Te, a0 as ue, a1 as me, a2 as ye, a3 as ke, a4 as Re, a5 as Ee, a6 as he, a7 as fe, a8 as ve, a9 as Ce, aa as Le, ab as xe, ac as Me, ad as Ne, ae as Pe, af as De, ag as Fe, ah as Oe, ai as _e, aj as Ie, ak as Ae } from "./index-d66a453b.js";
+import { a as u, i as m, d as y, c as k, b as R, e as E, P as h, R as f, h as v, g as C, f as L, j as x, k as M, l as N, m as P, n as D, o as F, p as O, q as _, r as I, s as A, t as H, u as b, v as z, w as j, x as K, y as U, z as V, A as q, B as w, C as Q, D as W, E as Y, F as G, G as J, H as X, I as Z, J as $, K as ee, L as ae, M as se, N as te, O as oe, Q as ie, S as le, T as ne, U as re, V as ce, W as ge, X as de, Y as Be, Z as Se, _ as pe, $ as Te, a0 as ue, a1 as me, a2 as ye, a3 as ke, a4 as Re, a5 as Ee, a6 as he, a7 as fe, a8 as ve, a9 as Ce, aa as Le, ab as xe, ac as Me, ad as Ne, ae as Pe, af as De, ag as Fe, ah as Oe, ai as _e, aj as Ie, ak as Ae } from "./index-34efcb47.js";
 import "@blocksuite/store";
@@ -8,0 +8,0 @@ import "lit/static-html.js";

package.json

 {
   "name": "@blocksuite/blocks",
-  "version": "0.4.0-20230110192220-0bac914",
+  "version": "0.4.0-20230111121357-6129124",
   "description": "Default BlockSuite editable blocks.",
@@ -11,4 +11,4 @@ "main": "dist/index.js",
   "dependencies": {
-    "@blocksuite/phasor": "0.4.0-20230110192220-0bac914",
-    "@blocksuite/store": "0.4.0-20230110192220-0bac914",
+    "@blocksuite/phasor": "0.4.0-20230111121357-6129124",
+    "@blocksuite/store": "0.4.0-20230111121357-6129124",
     "@tldraw/intersect": "^1.8.0",
@@ -18,3 +18,3 @@ "autosize": "^5.0.2",
     "hotkeys-js": "^3.10.1",
-    "lit": "^2.5.0",
+    "lit": "^2.6.0",
     "perfect-freehand": "^1.2.0",
@@ -21,0 +21,0 @@ "quill": "^1.3.7",

src/__internal__/rich-text/rich-text.ts

@@ -13,3 +13,3 @@ import { html, css } from 'lit';
 
-Quill.register('modules/cursors', QuillCursors);
+Quill.register('modules/cursors', QuillCursors, true);
 const Clipboard = Quill.import('modules/clipboard');
@@ -16,0 +16,0 @@

src/code-block/code-block.ts

@@ -83,3 +83,2 @@ import { customElement, property, query, state } from 'lit/decorators.js';
     }
-    //</editor-fold>
 
@@ -95,3 +94,2 @@ code-block {
       position: relative;
-      width: 720px;
       padding: 32px 0;
@@ -113,3 +111,3 @@ background: var(--affine-code-block-background);
       top: 12px;
-      left: 9px;
+      left: 12px;
     }
@@ -140,3 +138,3 @@
     .affine-code-block-container .ql-syntax {
-      width: 660px;
+      width: 620px;
       margin: 0;
@@ -165,5 +163,10 @@ overflow: scroll;
 
+    .lang-container code-block-button {
+      padding: 4px 0 0 12px;
+      justify-content: flex-start;
+    }
+
     .code-block-option {
-      box-shadow: 0px 1px 10px -6px rgba(24, 39, 75, 0.8),
-        0px 3px 16px -6px rgba(24, 39, 75, 0.4);
+      box-shadow: 0px 1px 10px -6px rgba(24, 39, 75, 0.08),
+        0px 3px 16px -6px rgba(24, 39, 75, 0.04);
       border-radius: 10px;
@@ -250,2 +253,3 @@ list-style: none;
                   height="24px"
+                  fontSize="14px"
                   class="${this.showLangList === 'hidden' ? '' : 'clicked'}"
@@ -252,0 +256,0 @@ >

src/code-block/components/button.ts

@@ -23,2 +23,5 @@ import { css, html } from 'lit';
 
+  @property()
+  fontSize: string | number = '16px';
+
   override connectedCallback() {
@@ -35,2 +38,6 @@ super.connectedCallback();
     );
+    this.style.setProperty(
+      'font-size',
+      typeof this.fontSize === 'string' ? this.fontSize : `${this.fontSize}px`
+    );
   }
@@ -37,0 +44,0 @@

src/code-block/components/lang-list.ts

@@ -73,3 +73,3 @@ import { customElement, property, query, state } from 'lit/decorators.js';
         border-radius: 10px;
-        padding-left: 20.25%;
+        padding-left: 44px;
         padding-top: 4px;
@@ -94,3 +94,3 @@
       .search-icon {
-        left: 8.25%;
+        left: 13.65px;
         position: absolute;
@@ -97,0 +97,0 @@ top: 16px;

src/code-block/components/syntax-code-block.ts

@@ -62,3 +62,3 @@ import Quill from 'quill';
     const lineNumberDigits = lineNum.toString().length;
-    container.style.left = 25 - lineNumberDigits * 8 + 'px';
+    container.style.left = 32 - lineNumberDigits * 8 + 'px';
 
@@ -65,0 +65,0 @@ for (let i = 1; i <= lineNum; i++) {

src/components/drag-handle.ts

@@ -9,4 +9,2 @@ import { css, html, LitElement } from 'lit';
 
-const IS_PROD = location.href.includes('pathfinder');
-
 const handlePreventDocumentDragOverDelay = (event: MouseEvent) => {
@@ -282,4 +280,2 @@ // Refs: https://stackoverflow.com/a/65910078
   override render() {
-    if (IS_PROD) return null;
-
     return html`
@@ -286,0 +282,0 @@ <div class="affine-drag-handle">

src/index.ts

@@ -12,2 +12,3 @@ // manual import to avoid being tree-shaked
 import './surface-block';
+
 export * from './counter-block/index.js';
@@ -14,0 +15,0 @@ export * from './embed-block/index.js';

src/page-block/default/components.ts

@@ -215,3 +215,2 @@ import { html } from 'lit';
           class="has-tool-tip"
-          width="100%"
           @click=${() => copyCode(codeBlockOption)}
@@ -226,3 +225,2 @@ >
           class="has-tool-tip ${isWrapped ? 'filled' : ''}"
-          width="100%"
           @click=${() => toggleWrap(codeBlockOption)}
@@ -237,3 +235,2 @@ >
           class="has-tool-tip"
-          width="100%"
           @click=${() => deleteCodeBlock(codeBlockOption)}
@@ -240,0 +237,0 @@ >

src/page-block/default/default-page-block.ts

 /// <reference types="vite/client" />
-import { html, css } from 'lit';
+import { css, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
-import { Signal, Page, Text, BaseBlockModel } from '@blocksuite/store';
+import { BaseBlockModel, Page, Signal, Text } from '@blocksuite/store';
 import type { PageBlockModel } from '../index.js';
@@ -6,0 +6,0 @@ import {

src/page-block/default/selection-manager.ts

@@ -155,3 +155,3 @@ import type { Page } from '@blocksuite/store';
   private _container: DefaultPageBlockComponent;
-  private _mouseDisposeCallback: () => void;
+  private _disposeCallbacks: (() => void)[] = [];
   private _signals: DefaultPageSignals;
@@ -161,3 +161,3 @@ private _embedResizeManager: EmbedResizeManager;
 
-  private _dragHandle: DragHandle;
+  private _dragHandle: DragHandle | null = null;
 
@@ -179,50 +179,73 @@ constructor({
     this._container = container;
-    this._dragHandle = new DragHandle({
-      setSelectedBlocks: this._setSelectedBlocks,
-      onDropCallback: (e, start, end) => {
-        const startModel = start.model;
-        const rect = end.position;
-        const nextModel = end.model;
-        if (doesInSamePath(this.page, nextModel, startModel)) {
+    const createHandle = () => {
+      this._dragHandle = new DragHandle({
+        setSelectedBlocks: this._setSelectedBlocks,
+        onDropCallback: (e, start, end) => {
+          const startModel = start.model;
+          const rect = end.position;
+          const nextModel = end.model;
+          if (doesInSamePath(this.page, nextModel, startModel)) {
+            return;
+          }
+          this.page.captureSync();
+          const distanceToTop = Math.abs(rect.top - e.y);
+          const distanceToBottom = Math.abs(rect.bottom - e.y);
+          this.page.moveBlock(
+            startModel,
+            nextModel,
+            distanceToTop < distanceToBottom
+          );
+          this.clearRects();
+        },
+        getBlockEditingStateByPosition: (pageX, pageY, skipX) => {
+          return getBlockEditingStateByPosition(this._blocks, pageX, pageY, {
+            skipX,
+          });
+        },
+        getBlockEditingStateByCursor: (pageX, pageY, cursor, size, skipX) => {
+          return getBlockEditingStateByCursor(
+            this._blocks,
+            pageX,
+            pageY,
+            cursor,
+            {
+              size,
+              skipX,
+            }
+          );
+        },
+      });
+    };
+    this._disposeCallbacks.push(
+      this.page.awareness.signals.update.on(msg => {
+        if (msg.id !== this.page.doc.clientID) {
           return;
         }
-        this.page.captureSync();
-        const distanceToTop = Math.abs(rect.top - e.y);
-        const distanceToBottom = Math.abs(rect.bottom - e.y);
-        this.page.moveBlock(
-          startModel,
-          nextModel,
-          distanceToTop < distanceToBottom
-        );
-        this.clearRects();
-      },
-      getBlockEditingStateByPosition: (pageX, pageY, skipX) => {
-        return getBlockEditingStateByPosition(this._blocks, pageX, pageY, {
-          skipX,
-        });
-      },
-      getBlockEditingStateByCursor: (pageX, pageY, cursor, size, skipX) => {
-        return getBlockEditingStateByCursor(
-          this._blocks,
-          pageX,
-          pageY,
-          cursor,
-          {
-            size,
-            skipX,
+        if (msg.state?.flags.enable_drag_handle) {
+          // todo: implement subscribe with selector
+          if (!this._dragHandle) {
+            createHandle();
           }
-        );
-      },
-    });
+        } else {
+          this._dragHandle?.remove();
+          this._dragHandle = null;
+        }
+      }).dispose
+    );
+    if (this.page.awareness.getFlag('enable_drag_handle')) {
+      createHandle();
+    }
     this._embedResizeManager = new EmbedResizeManager(this.state, signals);
-    this._mouseDisposeCallback = initMouseEventHandlers(
-      this._mouseRoot,
-      this._onContainerDragStart,
-      this._onContainerDragMove,
-      this._onContainerDragEnd,
-      this._onContainerClick,
-      this._onContainerDblClick,
-      this._onContainerMouseMove,
-      this._onContainerMouseOut,
-      this._onContainerContextMenu
+    this._disposeCallbacks.push(
+      initMouseEventHandlers(
+        this._mouseRoot,
+        this._onContainerDragStart,
+        this._onContainerDragMove,
+        this._onContainerDragEnd,
+        this._onContainerClick,
+        this._onContainerDblClick,
+        this._onContainerMouseMove,
+        this._onContainerMouseOut,
+        this._onContainerContextMenu
+      )
     );
@@ -485,15 +508,17 @@ }
     } else if (hoverEditingState?.model.flavour === 'affine:code') {
-      hoverEditingState.position.x = hoverEditingState.position.right + 10;
+      hoverEditingState.position.x = hoverEditingState.position.right + 12;
       this._signals.updateCodeBlockOption.emit(hoverEditingState);
     } else {
-      const clickDragState = getBlockEditingStateByPosition(
-        this._blocks,
-        e.raw.pageX,
-        e.raw.pageY,
-        {
-          skipX: true,
+      if (this._dragHandle) {
+        const clickDragState = getBlockEditingStateByPosition(
+          this._blocks,
+          e.raw.pageX,
+          e.raw.pageY,
+          {
+            skipX: true,
+          }
+        );
+        if (clickDragState?.model) {
+          this._dragHandle.show(clickDragState);
         }
-      );
-      if (clickDragState?.model) {
-        this._dragHandle.show(clickDragState);
       }
@@ -517,3 +542,5 @@ this._signals.updateEmbedEditingState.emit(null);
   dispose() {
-    this._dragHandle.remove();
+    if (this._dragHandle) {
+      this._dragHandle.remove();
+    }
     this._dragHandleAbortController.abort();
@@ -524,3 +551,3 @@ this._signals.updateSelectedRects.dispose();
     this._signals.updateEmbedRects.dispose();
-    this._mouseDisposeCallback();
+    this._disposeCallbacks.forEach(callback => callback());
   }
@@ -527,0 +554,0 @@

src/page-block/default/utils.ts

@@ -56,3 +56,7 @@ import type { BaseBlockModel, Page } from '@blocksuite/store';
   if (block.flavour === 'affine:code') {
-    return hoverDom;
+    const codeBlockDom = hoverDom.querySelector(
+      '.affine-code-block-container'
+    ) as HTMLElement;
+    assertExists(codeBlockDom);
+    return codeBlockDom;
   } else if (block.flavour === 'affine:embed' && block.type === 'image') {
@@ -66,2 +70,13 @@ const imgElement = hoverDom.querySelector('img');
 
+function getDetectRect(block: BaseBlockModel, blockRect: DOMRect): DOMRect {
+  const detectRect = copyRect(blockRect);
+  // there is a optionBar on the right side
+  if (block.flavour === 'affine:code') {
+    detectRect.width += 52;
+  } else if (block.flavour === 'affine:embed' && block.type === 'image') {
+    detectRect.width += 50;
+  }
+  return detectRect;
+}
+
 // Workaround native DOMRect clone issue in #632
@@ -198,5 +213,3 @@ // See https://stackoverflow.com/questions/42713229/getboundingclientrect-object-properties-cannot-be-copied
     ).getBoundingClientRect();
-    detectRect = copyRect(blockRect);
-    // there is a optionBar on the right side
-    detectRect.width += 50;
+    detectRect = getDetectRect(block, blockRect);
   } else {
@@ -203,0 +216,0 @@ blockRect = hoverDom.getBoundingClientRect() as DOMRect;

No alert changes

Improved metrics

Total package byte prevSize

1942148

increased by0.29%

Lines of code

40357

increased by0.27%

Dependency changes

• + Added@blocksuite/phasor@0.4.0-20230111121357-6129124(transitive)

• + Added@blocksuite/store@0.4.0-20230111121357-6129124(transitive)

• - Removed@blocksuite/phasor@0.4.0-20230110192220-0bac914(transitive)

• - Removed@blocksuite/store@0.4.0-20230110192220-0bac914(transitive)

• Updated@blocksuite/phasor@0.4.0-20230111121357-6129124

• Updated@blocksuite/store@0.4.0-20230111121357-6129124

• Updatedlit@^2.6.0