From 872a578bf76ab99b73a97683be3a75dd0c052e62 Mon Sep 17 00:00:00 2001 From: doodlewind <7312949+doodlewind@users.noreply.github.com> Date: Thu, 23 Jan 2025 10:57:49 +0000 Subject: [PATCH] refactor(editor): move zod schema with model for non surface blocks (#9876) --- .../edgeless-text/edgeless-text-model.ts | 23 ++++++ .../model/src/blocks/frame/frame-model.ts | 9 ++- .../model/src/blocks/note/note-model.ts | 34 ++++++++- blocksuite/affine/model/src/consts/note.ts | 4 + blocksuite/affine/model/src/consts/text.ts | 7 ++ .../affine/shared/src/utils/zod-schema.ts | 74 +++---------------- 6 files changed, 85 insertions(+), 66 deletions(-) diff --git a/blocksuite/affine/model/src/blocks/edgeless-text/edgeless-text-model.ts b/blocksuite/affine/model/src/blocks/edgeless-text/edgeless-text-model.ts index 4fadf8295..ea36b21df 100644 --- a/blocksuite/affine/model/src/blocks/edgeless-text/edgeless-text-model.ts +++ b/blocksuite/affine/model/src/blocks/edgeless-text/edgeless-text-model.ts @@ -4,20 +4,43 @@ import type { } from '@blocksuite/block-std/gfx'; import { GfxCompatible } from '@blocksuite/block-std/gfx'; import { BlockModel, defineBlockSchema } from '@blocksuite/store'; +import { z } from 'zod'; import { FontFamily, + FontFamilySchema, FontStyle, + FontStyleSchema, FontWeight, + FontWeightSchema, TextAlign, + TextAlignSchema, type TextStyleProps, } from '../../consts/index.js'; +import { ColorSchema } from '../../themes/color.js'; +import { DefaultTheme } from '../../themes/default.js'; type EdgelessTextProps = { hasMaxWidth: boolean; } & Omit & GfxCommonBlockProps; +export const EdgelessTextZodSchema = z + .object({ + color: ColorSchema, + fontFamily: FontFamilySchema, + fontWeight: FontWeightSchema, + fontStyle: FontStyleSchema, + textAlign: TextAlignSchema, + }) + .default({ + color: DefaultTheme.textColor, + fontFamily: FontFamily.Inter, + fontWeight: FontWeight.Regular, + fontStyle: FontStyle.Normal, + textAlign: TextAlign.Left, + }); + export const EdgelessTextBlockSchema = defineBlockSchema({ flavour: 'affine:edgeless-text', props: (): EdgelessTextProps => ({ diff --git a/blocksuite/affine/model/src/blocks/frame/frame-model.ts b/blocksuite/affine/model/src/blocks/frame/frame-model.ts index 6d9c39ab5..58dd9aa58 100644 --- a/blocksuite/affine/model/src/blocks/frame/frame-model.ts +++ b/blocksuite/affine/model/src/blocks/frame/frame-model.ts @@ -16,8 +16,9 @@ import { } from '@blocksuite/block-std/gfx'; import { Bound } from '@blocksuite/global/utils'; import { BlockModel, defineBlockSchema, type Text } from '@blocksuite/store'; +import { z } from 'zod'; -import type { Color } from '../../themes/index.js'; +import { type Color, ColorSchema } from '../../themes/index.js'; export type FrameBlockProps = { title: Text; @@ -26,6 +27,12 @@ export type FrameBlockProps = { presentationIndex?: string; } & GfxCompatibleProps; +export const FrameZodSchema = z + .object({ + background: ColorSchema.optional(), + }) + .default({}); + export const FrameBlockSchema = defineBlockSchema({ flavour: 'affine:frame', props: (internal): FrameBlockProps => ({ diff --git a/blocksuite/affine/model/src/blocks/note/note-model.ts b/blocksuite/affine/model/src/blocks/note/note-model.ts index cc554d4c8..cd0c143ad 100644 --- a/blocksuite/affine/model/src/blocks/note/note-model.ts +++ b/blocksuite/affine/model/src/blocks/note/note-model.ts @@ -5,6 +5,7 @@ import type { import { GfxCompatible } from '@blocksuite/block-std/gfx'; import { Bound } from '@blocksuite/global/utils'; import { BlockModel, defineBlockSchema } from '@blocksuite/store'; +import { z } from 'zod'; import { DEFAULT_NOTE_BORDER_SIZE, @@ -14,9 +15,38 @@ import { DEFAULT_NOTE_SHADOW, DEFAULT_NOTE_WIDTH, NoteDisplayMode, + NoteDisplayModeSchema, + NoteShadowsSchema, type StrokeStyle, -} from '../../consts/index.js'; -import { type Color, DefaultTheme } from '../../themes/index.js'; + StrokeStyleSchema, +} from '../../consts/note'; +import { type Color, ColorSchema, DefaultTheme } from '../../themes'; + +export const NoteZodSchema = z + .object({ + background: ColorSchema, + displayMode: NoteDisplayModeSchema, + edgeless: z.object({ + style: z.object({ + borderRadius: z.number(), + borderSize: z.number(), + borderStyle: StrokeStyleSchema, + shadowType: NoteShadowsSchema, + }), + }), + }) + .default({ + background: DefaultTheme.noteBackgrounColor, + displayMode: NoteDisplayMode.EdgelessOnly, + edgeless: { + style: { + borderRadius: DEFAULT_NOTE_CORNER, + borderSize: DEFAULT_NOTE_BORDER_SIZE, + borderStyle: DEFAULT_NOTE_BORDER_STYLE, + shadowType: DEFAULT_NOTE_SHADOW, + }, + }, + }); export const NoteBlockSchema = defineBlockSchema({ flavour: 'affine:note', diff --git a/blocksuite/affine/model/src/consts/note.ts b/blocksuite/affine/model/src/consts/note.ts index 7321290eb..d0f5770dc 100644 --- a/blocksuite/affine/model/src/consts/note.ts +++ b/blocksuite/affine/model/src/consts/note.ts @@ -44,6 +44,10 @@ export enum StrokeStyle { Solid = 'solid', } +export const StrokeStyleSchema = z.nativeEnum(StrokeStyle); + +export const NoteDisplayModeSchema = z.nativeEnum(NoteDisplayMode); + export const DEFAULT_NOTE_BORDER_STYLE = StrokeStyle.None; export const StrokeStyleMap = createEnumMap(StrokeStyle); diff --git a/blocksuite/affine/model/src/consts/text.ts b/blocksuite/affine/model/src/consts/text.ts index 6fd0223ca..ebe2f3f55 100644 --- a/blocksuite/affine/model/src/consts/text.ts +++ b/blocksuite/affine/model/src/consts/text.ts @@ -1,3 +1,5 @@ +import { z } from 'zod'; + import type { Color } from '../themes/color.js'; import { createEnumMap } from '../utils/enum.js'; @@ -59,3 +61,8 @@ export enum TextResizing { AUTO_WIDTH_AND_HEIGHT, AUTO_HEIGHT, } + +export const FontFamilySchema = z.nativeEnum(FontFamily); +export const FontWeightSchema = z.nativeEnum(FontWeight); +export const FontStyleSchema = z.nativeEnum(FontStyle); +export const TextAlignSchema = z.nativeEnum(TextAlign); diff --git a/blocksuite/affine/shared/src/utils/zod-schema.ts b/blocksuite/affine/shared/src/utils/zod-schema.ts index 1e929c64b..63f6ae2b9 100644 --- a/blocksuite/affine/shared/src/utils/zod-schema.ts +++ b/blocksuite/affine/shared/src/utils/zod-schema.ts @@ -2,39 +2,35 @@ import { ColorSchema, ConnectorMode, DEFAULT_FRONT_END_POINT_STYLE, - DEFAULT_NOTE_BORDER_SIZE, - DEFAULT_NOTE_BORDER_STYLE, - DEFAULT_NOTE_CORNER, - DEFAULT_NOTE_SHADOW, DEFAULT_REAR_END_POINT_STYLE, DEFAULT_ROUGHNESS, DefaultTheme, + EdgelessTextZodSchema, FontFamily, + FontFamilySchema, FontStyle, + FontStyleSchema, FontWeight, + FontWeightSchema, + FrameZodSchema, LayoutType, LineWidth, MindmapStyle, - NoteDisplayMode, - NoteShadowsSchema, + NoteZodSchema, PointStyle, ShapeStyle, StrokeStyle, + StrokeStyleSchema, TextAlign, + TextAlignSchema, TextVerticalAlign, } from '@blocksuite/affine-model'; import { z, ZodDefault, ZodObject, type ZodTypeAny, ZodUnion } from 'zod'; const ConnectorEndpointSchema = z.nativeEnum(PointStyle); -const StrokeStyleSchema = z.nativeEnum(StrokeStyle); const LineWidthSchema = z.nativeEnum(LineWidth); const ShapeStyleSchema = z.nativeEnum(ShapeStyle); -const FontFamilySchema = z.nativeEnum(FontFamily); -const FontWeightSchema = z.nativeEnum(FontWeight); -const FontStyleSchema = z.nativeEnum(FontStyle); -const TextAlignSchema = z.nativeEnum(TextAlign); const TextVerticalAlignSchema = z.nativeEnum(TextVerticalAlign); -const NoteDisplayModeSchema = z.nativeEnum(NoteDisplayMode); const ConnectorModeSchema = z.nativeEnum(ConnectorMode); const LayoutTypeSchema = z.nativeEnum(LayoutType); const MindmapStyleSchema = z.nativeEnum(MindmapStyle); @@ -145,48 +141,6 @@ export const TextSchema = z textAlign: TextAlign.Left, }); -export const EdgelessTextSchema = z - .object({ - color: ColorSchema, - fontFamily: FontFamilySchema, - fontWeight: FontWeightSchema, - fontStyle: FontStyleSchema, - textAlign: TextAlignSchema, - }) - .default({ - color: DefaultTheme.textColor, - fontFamily: FontFamily.Inter, - fontWeight: FontWeight.Regular, - fontStyle: FontStyle.Normal, - textAlign: TextAlign.Left, - }); - -export const NoteSchema = z - .object({ - background: ColorSchema, - displayMode: NoteDisplayModeSchema, - edgeless: z.object({ - style: z.object({ - borderRadius: z.number(), - borderSize: z.number(), - borderStyle: StrokeStyleSchema, - shadowType: NoteShadowsSchema, - }), - }), - }) - .default({ - background: DefaultTheme.noteBackgrounColor, - displayMode: NoteDisplayMode.EdgelessOnly, - edgeless: { - style: { - borderRadius: DEFAULT_NOTE_CORNER, - borderSize: DEFAULT_NOTE_BORDER_SIZE, - borderStyle: DEFAULT_NOTE_BORDER_STYLE, - shadowType: DEFAULT_NOTE_SHADOW, - }, - }, - }); - export const MindmapSchema = z .object({ layoutType: LayoutTypeSchema, @@ -197,20 +151,14 @@ export const MindmapSchema = z style: MindmapStyle.ONE, }); -export const FrameSchema = z - .object({ - background: ColorSchema.optional(), - }) - .default({}); - export const NodePropsSchema = z.object({ connector: ConnectorSchema, brush: BrushSchema, text: TextSchema, mindmap: MindmapSchema, - 'affine:edgeless-text': EdgelessTextSchema, - 'affine:note': NoteSchema, - 'affine:frame': FrameSchema, + 'affine:edgeless-text': EdgelessTextZodSchema, + 'affine:note': NoteZodSchema, + 'affine:frame': FrameZodSchema, // shapes 'shape:diamond': ShapeSchema, 'shape:ellipse': ShapeSchema,