fix: fix note data compatibility

packages/blocks/src/_common/edgeless/note/consts.ts

@@ -1,3 +1,4 @@
+import { StrokeStyle } from '../../../surface-block/consts.js';
 import type { CssVariableName } from '../../theme/css-variables.js';
 
 export const NOTE_COLORS: CssVariableName[] = [
@@ -19,3 +20,14 @@ export const NOTE_SHADOWS = [
  '--affine-note-shadow-float',
  `--affine-note-shadow-film`,
 ];
+
+export const DEFAULT_EDGELESS_PROP = {
+ style: {
+ borderRadius: 8,
+ borderSize: 4,
+ borderStyle: StrokeStyle.Solid,
+ shadowType: NOTE_SHADOWS[1],
+ },
+ collapse: false,
+ collapsedHeight: 0,
+};

packages/blocks/src/page-block/edgeless/components/auto-complete/utils.ts

@@ -1,6 +1,7 @@
 import { assertExists } from '@blocksuite/global/utils';
 import { Workspace } from '@blocksuite/store';
 
+import { DEFAULT_EDGELESS_PROP } from '../../../../_common/edgeless/note/consts.js';
 import type { NoteBlockModel } from '../../../../models.js';
 import {
  CanvasTextFontFamily,
@@ -306,6 +307,9 @@ export function createEdgelessElement(
  );
  const note = page.getBlockById(id) as NoteBlockModel;
  assertExists(note);
+ if (!note.edgeless) {
+ note.edgeless = DEFAULT_EDGELESS_PROP;
+ }
  note.edgeless.collapse = true;
  page.addBlock('affine:paragraph', {}, note.id);
  }

packages/blocks/src/page-block/edgeless/components/block-portal/note/edgeless-note.ts

@@ -136,8 +136,10 @@ export class EdgelessBlockPortalNote extends EdgelessPortalBase<NoteBlockModel>
  }
 
  private get _isShowCollapsedContent() {
+ const edgeless = this.model.edgeless;
+ const collapse = edgeless ? edgeless.collapse : false;
  return (
- this.model.edgeless.collapse &&
+ collapse &&
  (this._isResizing || this._isHover) &&
  this.edgeless.selectionManager.elements.includes(this.model)
  );
@@ -179,9 +181,12 @@ export class EdgelessBlockPortalNote extends EdgelessPortalBase<NoteBlockModel>
  override render() {
  const { model, surface, index } = this;
  const { xywh, background, hidden, edgeless } = model;
- const { borderRadius, borderSize, borderStyle, shadowType } =
- edgeless.style;
- const { collapse } = edgeless;
+ const borderRadius = edgeless ? edgeless.style.borderRadius : 8;
+ const borderSize = edgeless ? edgeless.style.borderSize : 4;
+ const borderStyle = edgeless ? edgeless.style.borderStyle : 'solid';
+ const shadowType = edgeless ? edgeless.style.shadowType : 'none';
+ const collapse = edgeless ? edgeless.collapse : false;
+
  const bound = Bound.deserialize(xywh);
 
  const style = {

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

@@ -9,6 +9,7 @@ import { WithDisposable } from '@blocksuite/lit';
 import { css, html, LitElement, nothing, type PropertyValues } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 
+import { DEFAULT_EDGELESS_PROP } from '../../../../_common/edgeless/note/consts.js';
 import {
  ExpandIcon,
  HiddenIcon,
@@ -216,6 +217,10 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
 
  private _setShadowType(shadowType: string) {
  this.notes.forEach(note => {
+ if (!note.edgeless) {
+ // FIXME: this is a temporary fix for the note without edgeless
+ note.edgeless = DEFAULT_EDGELESS_PROP;
+ }
  note.edgeless.style.shadowType = shadowType;
  });
  }
@@ -246,12 +251,18 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
 
  private _setStrokeWidth(borderSize: number) {
  this.notes.forEach(note => {
+ if (!note.edgeless) {
+ note.edgeless = DEFAULT_EDGELESS_PROP;
+ }
  note.edgeless.style.borderSize = borderSize;
  });
  }
 
  private _setStrokeStyle(borderStyle: StrokeStyle) {
  this.notes.forEach(note => {
+ if (!note.edgeless) {
+ note.edgeless = DEFAULT_EDGELESS_PROP;
+ }
  note.edgeless.style.borderStyle = borderStyle;
  });
  }
@@ -279,15 +290,24 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
 
  private _setBorderRadius = (size: number) => {
  this.notes.forEach(note => {
+ if (!note.edgeless) {
+ note.edgeless = DEFAULT_EDGELESS_PROP;
+ }
  note.edgeless.style.borderRadius = size;
  });
  };
 
  private _setCollapse() {
  this.notes.forEach(element => {
- const { collapse, collapsedHeight } = element.edgeless;
+ const { edgeless } = element;
+ const collapse = edgeless ? element.edgeless.collapse : false;
+ const collapsedHeight = edgeless ? element.edgeless.collapsedHeight : 0;
 
  const bound = Bound.deserialize(element.xywh);
+ if (!edgeless) {
+ element.edgeless = DEFAULT_EDGELESS_PROP;
+ }
+
  if (collapse) {
  element.edgeless.collapsedHeight = bound.h;
  element.edgeless.collapse = false;
@@ -350,10 +370,11 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
  const enableIndex =
  this.surface.page.awarenessStore.getFlag('enable_note_index');
  const { hidden, background, edgeless } = note;
- const { shadowType, borderRadius, borderSize, borderStyle } =
- edgeless.style;
-
- const { collapse } = edgeless;
+ const borderRadius = edgeless ? edgeless.style.borderRadius : 8;
+ const borderSize = edgeless ? edgeless.style.borderSize : 4;
+ const borderStyle = edgeless ? edgeless.style.borderStyle : 'solid';
+ const shadowType = edgeless ? edgeless.style.shadowType : 'none';
+ const collapse = edgeless ? edgeless.collapse : false;
 
  return html`
  ${enableIndex

packages/blocks/src/page-block/edgeless/components/rects/edgeless-hover-rect.ts

@@ -62,7 +62,7 @@ export class EdgelessHoverRect extends WithDisposable(LitElement) {
  this.rect.style.width = `${rect.width}px`;
  this.rect.style.height = `${rect.height}px`;
  this.rect.style.borderRadius = isNote
- ? `${element.edgeless.style.borderRadius * zoom}px`
+ ? `${(element?.edgeless?.style?.borderRadius ?? 8) * zoom}px`
  : '';
  this.rect.style.backgroundColor = isNote
  ? 'var(--affine-hover-color)'

packages/blocks/src/page-block/edgeless/components/rects/edgeless-selected-rect.ts

@@ -6,6 +6,7 @@ import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
+import { DEFAULT_EDGELESS_PROP } from '../../../../_common/edgeless/note/consts.js';
 import { stopPropagation } from '../../../../_common/utils/event.js';
 import { pickValues } from '../../../../_common/utils/iterable.js';
 import { clamp } from '../../../../_common/utils/math.js';
@@ -425,6 +426,11 @@ export class EdgelessSelectedRect extends WithDisposable(LitElement) {
  if (isNoteBlock(element)) {
  const curBound = Bound.deserialize(element.xywh);
  const props: Partial<NoteBlockModel> = {};
+
+ if (!element.edgeless) {
+ element.edgeless = DEFAULT_EDGELESS_PROP;
+ }
+
  if (curBound.h !== bound.h && !element.edgeless.collapse) {
  element.edgeless.collapse = true;
  }

packages/blocks/src/page-block/edgeless/utils/note-resize-observer.ts

@@ -66,17 +66,18 @@ export class NoteResizeObserver {
  const container = blockElement?.querySelector(
  '.affine-note-block-container'
  );
-
+ const { edgeless } = model;
+ const collapse = edgeless ? edgeless.collapse : false;
  const cachedElement = this._cachedElements.get(blockId);
  if (cachedElement) {
- if (container === cachedElement && !model.edgeless.collapse) {
+ if (container === cachedElement && !collapse) {
  return;
  }
  this._observer.unobserve(cachedElement);
  this._cachedElements.delete(blockId);
  }
 
- if (!container || model.edgeless.collapse) return;
+ if (!container || collapse) return;
  this._lastRects.set(blockId, container.getBoundingClientRect());
  this._observer.observe(container);
  this._cachedElements.set(blockId, container);

packages/store/src/workspace/page.ts

@@ -695,6 +695,7 @@ export class Page extends BlockTree {
  );
  return;
  }
+
  this._onBlockAdded(id, {
  onChange: (block, key) => {
  block.model.propsUpdated.emit({ key });