refactor(blocks): split code (toeverything#3228)

.eslintrc.cjs

@@ -36,6 +36,15 @@ const createPattern = packageName => [
  message: 'Do not import package itself',
  allowTypeImports: false,
  },
+ ...(packageName === 'blocks'
+ ? [
+ {
+ group: ['**/std.js'],
+ message: 'Do not import from std',
+ allowTypeImports: false,
+ },
+ ]
+ : []),
 ];
 
 module.exports = {

packages/blocks/src/__internal__/clipboard/edgeless-clipboard.ts

@@ -13,19 +13,19 @@ import type { Page } from '@blocksuite/store';
 import { assertExists } from '@blocksuite/store';
 
 import type { EdgelessPageBlockComponent } from '../../page-block/edgeless/edgeless-page-block.js';
-import type { Selectable } from '../../page-block/edgeless/selection-manager.js';
 import {
  DEFAULT_NOTE_HEIGHT,
  DEFAULT_NOTE_WIDTH,
- isTopLevelBlock,
-} from '../../page-block/edgeless/utils.js';
+} from '../../page-block/edgeless/utils/consts.js';
+import { isTopLevelBlock } from '../../page-block/edgeless/utils/query.js';
+import type { Selectable } from '../../page-block/edgeless/utils/selection-manager.js';
 import { deleteModelsByRange } from '../../page-block/utils/container-operations.js';
 import type { SerializedBlock, TopLevelBlockModel } from '../index.js';
 import { getService } from '../service.js';
 import { addSerializedBlocks } from '../service/json2block.js';
 import { activeEditorManager } from '../utils/active-editor-manager.js';
 import { getCurrentBlockRange } from '../utils/block-range.js';
-import { groupBy } from '../utils/std.js';
+import { groupBy } from '../utils/common.js';
 import type { Clipboard } from './type.js';
 import {
  clipboardData2Blocks,

packages/blocks/src/__internal__/rich-text/rich-text-operations.ts

@@ -8,6 +8,7 @@ import { Text, Utils } from '@blocksuite/store';
 
 import type { PageBlockModel } from '../../models.js';
 import { checkFirstLine, checkLastLine } from '../utils/check-line.js';
+import { supportsChildren } from '../utils/common.js';
 import {
  asyncFocusRichText,
  asyncSetVRange,
@@ -24,7 +25,6 @@ import {
  focusTitle,
  getCurrentNativeRange,
 } from '../utils/selection.js';
-import { supportsChildren } from '../utils/std.js';
 import type { ExtendedModel } from '../utils/types.js';
 
 export function handleBlockEndEnter(page: Page, model: ExtendedModel) {

packages/blocks/src/__internal__/service/index.ts

@@ -11,12 +11,12 @@ import {
 } from '../rich-text/rich-text-operations.js';
 import type { AffineVEditor } from '../rich-text/virgo/types.js';
 import { getService } from '../service.js';
+import { supportsChildren } from '../utils/common.js';
 import type {
  BlockRange,
  BlockTransformContext,
  SerializedBlock,
 } from '../utils/index.js';
-import { supportsChildren } from '../utils/std.js';
 import { json2block } from './json2block.js';
 import {
  enterMarkdownMatch,

packages/blocks/src/__internal__/theme/utils.ts

@@ -1,6 +1,6 @@
 import { assertExists } from '@blocksuite/store';
 
-import { capitalize, uncapitalize } from '../utils/std.js';
+import { capitalize, uncapitalize } from '../utils/common.js';
 import type { CssVariableName, CssVariablesMap } from './css-variables.js';
 import type { ThemeObserver } from './theme-observer.js';
 

packages/blocks/src/__internal__/utils/std.unit.spec.ts → packages/blocks/src/__internal__/utils/common.unit.spec.ts

@@ -9,7 +9,7 @@ import {
  maxBy,
  toHex,
  uncapitalize,
-} from './std.js';
+} from './common.js';
 
 describe('countBy', () => {
  it('basic', () => {

packages/blocks/src/__internal__/utils/event.ts

@@ -31,3 +31,7 @@ export function createDragEvent(type: string, event?: MouseEvent) {
 export function isMiddleButtonPressed(e: MouseEvent) {
  return (MOUSE_BUTTONS.AUXILIARY & e.buttons) === MOUSE_BUTTONS.AUXILIARY;
 }
+
+export function stopPropagation(event: Event) {
+ event.stopPropagation();
+}

packages/blocks/src/__internal__/utils/index.ts

@@ -15,5 +15,5 @@ export * from './rect.js';
 export * from './reordering.js';
 export * from './selection.js';
 // Compat with SSR
-export * from './std.js';
+export * from './common.js';
 export * from './types.js';

packages/blocks/src/__internal__/utils/query.ts

@@ -12,9 +12,9 @@ import type { Loader } from '../../components/loader.js';
 import type { DefaultPageBlockComponent } from '../../page-block/default/default-page-block.js';
 import type { EdgelessPageBlockComponent } from '../../page-block/edgeless/edgeless-page-block.js';
 import type { RichText } from '../rich-text/rich-text.js';
+import { clamp } from './common.js';
 import { type Point, Rect } from './rect.js';
 import { getCurrentNativeRange } from './selection.js';
-import { clamp } from './std.js';
 
 const ATTR_SELECTOR = `[${ATTR}]`;
 

packages/blocks/src/__internal__/utils/rect.ts

@@ -1,5 +1,5 @@
 import type { IPoint } from '../index.js';
-import { clamp } from './std.js';
+import { clamp } from './common.js';
 
 export class Point {
  public x: number;

packages/blocks/src/code-block/affine-code-line.ts

@@ -7,7 +7,7 @@ import { styleMap } from 'lit/directives/style-map.js';
 import type { Highlighter, IThemedToken, Lang } from 'shiki';
 
 import type { AffineTextAttributes } from '../__internal__/rich-text/virgo/types.js';
-import { queryCurrentMode } from '../std.js';
+import { queryCurrentMode } from '../__internal__/utils/query.js';
 import { DARK_THEME, LIGHT_THEME } from './utils/consts.js';
 import {
  highlightCache,

packages/blocks/src/components/format-quick-bar/format-bar-node.ts

@@ -23,8 +23,10 @@ import {
  getCurrentBlockRange,
  restoreSelection,
 } from '../../__internal__/utils/block-range.js';
-import { getRichTextByModel } from '../../__internal__/utils/index.js';
-import { stopPropagation } from '../../page-block/edgeless/utils.js';
+import {
+ getRichTextByModel,
+ stopPropagation,
+} from '../../__internal__/utils/index.js';
 import { actionConfig } from '../../page-block/utils/const.js';
 import { formatConfig } from '../../page-block/utils/format-config.js';
 import {

packages/blocks/src/components/format-quick-bar/index.ts

@@ -4,8 +4,8 @@ import type { Page } from '@blocksuite/store';
 import { matchFlavours, Slot } from '@blocksuite/store';
 
 import { getCurrentBlockRange } from '../../__internal__/utils/block-range.js';
+import { throttle } from '../../__internal__/utils/common.js';
 import { getViewportElement } from '../../__internal__/utils/query.js';
-import { throttle } from '../../__internal__/utils/std.js';
 import { onModelElementUpdated } from '../../page-block/index.js';
 import {
  calcPositionPointByRange,

packages/blocks/src/components/linked-page/index.ts

@@ -4,8 +4,8 @@ import {
  DisposableGroup,
 } from '@blocksuite/store';
 
+import { throttle } from '../../__internal__/utils/common.js';
 import { getViewportElement } from '../../__internal__/utils/query.js';
-import { throttle } from '../../__internal__/utils/std.js';
 import { getPopperPosition } from '../../page-block/utils/position.js';
 import { LinkedPagePopover } from './linked-page-popover.js';
 

packages/blocks/src/components/linked-page/linked-page-popover.ts

@@ -12,11 +12,11 @@ import { styleMap } from 'lit/directives/style-map.js';
 import { createPage } from '../../__internal__/index.js';
 import { REFERENCE_NODE } from '../../__internal__/rich-text/reference-node.js';
 import type { AffineVEditor } from '../../__internal__/rich-text/virgo/types.js';
+import { isFuzzyMatch } from '../../__internal__/utils/common.js';
 import {
  getRichTextByModel,
  getVirgoByModel,
 } from '../../__internal__/utils/query.js';
-import { isFuzzyMatch } from '../../__internal__/utils/std.js';
 import { showImportModal } from '../import-page/index.js';
 import { createKeydownObserver } from '../utils.js';
 import { styles } from './styles.js';

packages/blocks/src/components/utils.ts

@@ -1,8 +1,8 @@
 import { assertExists, sleep } from '@blocksuite/global/utils';
 
 import type { RichText } from '../__internal__/rich-text/rich-text.js';
-import { isControlledKeyboardEvent } from '../__internal__/utils/std.js';
-import { getCurrentNativeRange } from '../std.js';
+import { isControlledKeyboardEvent } from '../__internal__/utils/common.js';
+import { getCurrentNativeRange } from '../__internal__/utils/selection.js';
 
 export const createKeydownObserver = ({
  target,

packages/blocks/src/database-block/database-service.ts

@@ -8,8 +8,12 @@ import {
 
 import { getService } from '../__internal__/service.js';
 import { BaseService } from '../__internal__/service/index.js';
-import type { DatabaseSelection, DatabaseSelectionState } from '../std.js';
-import { asyncFocusRichText, type SerializedBlock } from '../std.js';
+import { asyncFocusRichText } from '../__internal__/utils/common-operations.js';
+import type {
+ DatabaseSelection,
+ DatabaseSelectionState,
+ SerializedBlock,
+} from '../__internal__/utils/types.js';
 import { multiSelectHelper } from './common/column-manager.js';
 import type { DatabaseBlockModel } from './database-model.js';
 import type { Cell, Column } from './table/types.js';

packages/blocks/src/database-block/table/components/toolbar/index.ts

@@ -4,8 +4,8 @@ import { assertExists, DisposableGroup } from '@blocksuite/store';
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
+import { Point, Rect } from '../../../../__internal__/utils/rect.js';
 import type { DragIndicator } from '../../../../components/drag-handle.js';
-import { Point, Rect } from '../../../../std.js';
 import type { InsertPosition } from '../../../database-model.js';
 
 @customElement('affine-database-new-record-preview')

packages/blocks/src/database-block/table/components/toolbar/toolbar.ts

@@ -16,9 +16,9 @@ import { css, html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 
 import { copyBlocks } from '../../../../__internal__/clipboard/index.js';
+import { stopPropagation } from '../../../../__internal__/utils/event.js';
 import { popFilterableSimpleMenu } from '../../../../components/menu/menu.js';
 import { toast } from '../../../../components/toast.js';
-import { stopPropagation } from '../../../../page-block/edgeless/utils.js';
 import type { FilterGroup } from '../../../common/ast.js';
 import { firstFilterByRef } from '../../../common/ast.js';
 import { columnManager } from '../../../common/column-manager.js';
@@ -442,7 +442,7 @@ export class DatabaseToolbar extends WithDisposable(ShadowlessElement) {
  @input="${this._onSearch}"
  @click="${(event: MouseEvent) => event.stopPropagation()}"
  @keydown="${this._onSearchKeydown}"
- @pointerdown="${stopPropagation}"
+ @pointerdown=${stopPropagation}
  />
  <div class="has-tool-tip close-icon" @click="${this._clearSearch}">
  ${closeIcon}

packages/blocks/src/image-block/image-block.ts

@@ -9,9 +9,9 @@ import { customElement, query, state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import { registerService } from '../__internal__/service.js';
+import { clamp } from '../__internal__/utils/common.js';
+import { stopPropagation } from '../__internal__/utils/event.js';
 import { getViewportElement } from '../__internal__/utils/query.js';
-import { stopPropagation } from '../page-block/edgeless/utils.js';
-import { clamp } from '../std.js';
 import { ImageOptionsTemplate } from './image/image-options.js';
 import { ImageResizeManager } from './image/image-resize-manager.js';
 import { ImageSelectedRectsContainer } from './image/image-selected-rects.js';

packages/blocks/src/image-block/image/image-options.ts

@@ -8,14 +8,14 @@ import type { Slot } from '@blocksuite/store';
 import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
+import { stopPropagation } from '../../__internal__/utils/event.js';
 import type { IPoint } from '../../__internal__/utils/types.js';
 import { tooltipStyle } from '../../components/tooltip/tooltip.js';
 import {
  copyImage,
  downloadImage,
  focusCaption,
 } from '../../page-block/default/utils.js';
-import { stopPropagation } from '../../page-block/edgeless/utils.js';
 import type { ImageBlockModel } from '../image-model.js';
 
 export function ImageOptionsTemplate({

packages/blocks/src/image-block/image/image-resize-manager.ts

@@ -1,12 +1,12 @@
 import type { PointerEventState } from '@blocksuite/block-std';
 import { assertExists } from '@blocksuite/global/utils';
 
+import { throttle } from '../../__internal__/utils/common.js';
 import {
  type BlockComponentElement,
  getClosestBlockElementByElement,
  getModelByElement,
 } from '../../__internal__/utils/query.js';
-import { throttle } from '../../__internal__/utils/std.js';
 
 export class ImageResizeManager {
  private _activeComponent: BlockComponentElement | null = null;

packages/blocks/src/index.ts

@@ -23,11 +23,11 @@ export * from './__internal__/theme/css-variables.js';
 export * from './__internal__/theme/theme-observer.js';
 export * from './__internal__/utils/active-editor-manager.js';
 export * from './__internal__/utils/block-range.js';
+export * from './__internal__/utils/common.js';
 export * from './__internal__/utils/common-operations.js';
 export * from './__internal__/utils/filesys.js';
 export * from './__internal__/utils/query.js';
 export * as SelectionUtils from './__internal__/utils/selection.js';
-export * from './__internal__/utils/std.js';
 export * from './__internal__/utils/types.js';
 export * from './bookmark-block/index.js';
 export * from './code-block/index.js';

packages/blocks/src/page-block/default/backlink-popover.ts

@@ -10,7 +10,7 @@ import { css, html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 
 import type { AffineTextAttributes } from '../../__internal__/rich-text/virgo/types.js';
-import { type BlockHost } from '../../std.js';
+import type { BlockHost } from '../../__internal__/utils/types.js';
 
 const styles = css`
  :host {

packages/blocks/src/page-block/edgeless/components/tool-icon-button.ts → packages/blocks/src/page-block/edgeless/components/buttons/tool-icon-button.ts

@@ -2,7 +2,7 @@ import type { TemplateResult } from 'lit';
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import { tooltipStyle } from '../../../components/tooltip/tooltip.js';
+import { tooltipStyle } from '../../../../components/tooltip/tooltip.js';
 
 @customElement('edgeless-tool-icon-button')
 export class EdgelessToolIconButton extends LitElement {

packages/blocks/src/page-block/edgeless/components/component-toolbar/change-brush-button.ts

@@ -1,6 +1,6 @@
-import '../tool-icon-button.js';
-import '../color-panel.js';
-import '../line-width-panel.js';
+import '../buttons/tool-icon-button.js';
+import '../panel/color-panel.js';
+import '../panel/line-width-panel.js';
 
 import { WithDisposable } from '@blocksuite/lit';
 import type { BrushElement, SurfaceManager } from '@blocksuite/phasor';
@@ -10,16 +10,16 @@ import { customElement, property, query, state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import type { CssVariableName } from '../../../../__internal__/theme/css-variables.js';
-import { countBy, maxBy } from '../../../../__internal__/utils/std.js';
+import { countBy, maxBy } from '../../../../__internal__/utils/common.js';
 import { BrushSize } from '../../../../__internal__/utils/types.js';
 import type { EdgelessSelectionSlots } from '../../edgeless-page-block.js';
-import type { EdgelessSelectionState } from '../../selection-manager.js';
+import type { EdgelessSelectionState } from '../../utils/selection-manager.js';
 import {
  type ColorEvent,
  type EdgelessColorPanel,
  GET_DEFAULT_LINE_COLOR,
-} from '../color-panel.js';
-import type { LineWidthEvent } from '../line-width-panel.js';
+} from '../panel/color-panel.js';
+import type { LineWidthEvent } from '../panel/line-width-panel.js';
 import { createButtonPopper } from '../utils.js';
 
 function getMostCommonColor(elements: BrushElement[]): CssVariableName | null {

packages/blocks/src/page-block/edgeless/components/component-toolbar/change-connector-button.ts

@@ -1,5 +1,5 @@
-import '../tool-icon-button.js';
-import '../color-panel.js';
+import '../buttons/tool-icon-button.js';
+import '../panel/color-panel.js';
 
 import {
  ConnectorLIcon,
@@ -16,27 +16,27 @@ import { customElement, property, query } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import type { CssVariableName } from '../../../../__internal__/theme/css-variables.js';
-import { countBy, maxBy } from '../../../../__internal__/utils/std.js';
+import { countBy, maxBy } from '../../../../__internal__/utils/common.js';
 import type { EdgelessSelectionSlots } from '../../edgeless-page-block.js';
-import type { EdgelessSelectionState } from '../../selection-manager.js';
+import type { EdgelessSelectionState } from '../../utils/selection-manager.js';
+import type { LineSizeButtonProps } from '../buttons/line-size-button.js';
+import { lineSizeButtonStyles } from '../buttons/line-size-button.js';
+import type { LineStyleButtonProps } from '../buttons/line-style-button.js';
+import type { EdgelessToolIconButton } from '../buttons/tool-icon-button.js';
 import {
  generateConnectorPath,
  getConnectorAttachedInfo,
-} from '../../utils.js';
+} from '../connector/utils.js';
 import {
  type ColorEvent,
  type EdgelessColorPanel,
  GET_DEFAULT_LINE_COLOR,
-} from '../color-panel.js';
-import type { LineSizeButtonProps } from '../line-size-button.js';
-import { lineSizeButtonStyles } from '../line-size-button.js';
-import type { LineStyleButtonProps } from '../line-style-button.js';
+} from '../panel/color-panel.js';
 import {
  LineStylesPanel,
  type LineStylesPanelClickedButton,
  lineStylesPanelStyles,
-} from '../line-styles-panel.js';
-import type { EdgelessToolIconButton } from '../tool-icon-button.js';
+} from '../panel/line-styles-panel.js';
 import { createButtonPopper } from '../utils.js';
 
 function getMostCommonColor(