Font size adjustment migration (#3338)

This PR adds migrations for font size adjustment.

### Change Type

- [x] `sdk` — Changes the tldraw SDK
- [x] `improvement` — Improving existing features

packages/tldraw/api-report.md

@@ -1174,7 +1174,7 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
     static props: {
         color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
         size: EnumStyleProp<"l" | "m" | "s" | "xl">;
-        fontSizeAdjustment: Validator<number | undefined>;
+        fontSizeAdjustment: Validator<number>;
         font: EnumStyleProp<"draw" | "mono" | "sans" | "serif">;
         align: EnumStyleProp<"end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start">;
         verticalAlign: EnumStyleProp<"end" | "middle" | "start">;

packages/tldraw/api/api.json

@@ -13517,7 +13517,7 @@
                 },
                 {
                   "kind": "Content",
-                  "text": "<number | undefined>;\n        font: import(\"@tldraw/editor\")."
+                  "text": "<number>;\n        font: import(\"@tldraw/editor\")."
                 },
                 {
                   "kind": "Reference",

packages/tlschema/api-report.md

@@ -705,7 +705,7 @@ export const noteShapeMigrations: Migrations;
 export const noteShapeProps: {
     color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
     size: EnumStyleProp<"l" | "m" | "s" | "xl">;
-    fontSizeAdjustment: T.Validator<number | undefined>;
+    fontSizeAdjustment: T.Validator<number>;
     font: EnumStyleProp<"draw" | "mono" | "sans" | "serif">;
     align: EnumStyleProp<"end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start">;
     verticalAlign: EnumStyleProp<"end" | "middle" | "start">;

packages/tlschema/api/api.json

@@ -2909,7 +2909,7 @@
             },
             {
               "kind": "Content",
-              "text": "<number | undefined>;\n    font: import(\"..\")."
+              "text": "<number>;\n    font: import(\"..\")."
             },
             {
               "kind": "Reference",

packages/tlschema/src/migrations.test.ts

@@ -20,7 +20,7 @@ import { embedShapeMigrations } from './shapes/TLEmbedShape'
 import { GeoShapeVersions, geoShapeMigrations } from './shapes/TLGeoShape'
 import { imageShapeMigrations } from './shapes/TLImageShape'
 import { lineShapeMigrations, lineShapeVersions } from './shapes/TLLineShape'
-import { noteShapeMigrations } from './shapes/TLNoteShape'
+import { noteShapeMigrations, noteShapeVersions } from './shapes/TLNoteShape'
 import { textShapeMigrations } from './shapes/TLTextShape'
 import { videoShapeMigrations } from './shapes/TLVideoShape'
 import { storeMigrations, storeVersions } from './store-migrations'
@@ -2030,6 +2030,18 @@ describe('Fractional indexing for line points', () => {
 	})
 })
 
+describe('Add font size adjustment to notes', () => {
+	const { up, down } = noteShapeMigrations.migrators[noteShapeVersions.AddFontSizeAdjustment]
+
+	test('up works as expected', () => {
+		expect(up({ props: {} })).toEqual({ props: { fontSizeAdjustment: 0 } })
+	})
+
+	test('down works as expected', () => {
+		expect(down({ props: { fontSizeAdjustment: 0 } })).toEqual({ props: {} })
+	})
+})
+
 /* ---  PUT YOUR MIGRATIONS TESTS ABOVE HERE --- */
 
 for (const migrator of allMigrators) {

packages/tlschema/src/shapes/TLNoteShape.ts

@@ -14,7 +14,7 @@ import { ShapePropsType, TLBaseShape } from './TLBaseShape'
 export const noteShapeProps = {
 	color: DefaultColorStyle,
 	size: DefaultSizeStyle,
-	fontSizeAdjustment: T.optional(T.positiveNumber),
+	fontSizeAdjustment: T.positiveNumber,
 	font: DefaultFontStyle,
 	align: DefaultHorizontalAlignStyle,
 	verticalAlign: DefaultVerticalAlignStyle,
@@ -29,19 +29,20 @@ export type TLNoteShapeProps = ShapePropsType<typeof noteShapeProps>
 /** @public */
 export type TLNoteShape = TLBaseShape<'note', TLNoteShapeProps>
 
-const Versions = {
+export const noteShapeVersions = {
 	AddUrlProp: 1,
 	RemoveJustify: 2,
 	MigrateLegacyAlign: 3,
 	AddVerticalAlign: 4,
 	MakeUrlsValid: 5,
+	AddFontSizeAdjustment: 6,
 } as const
 
 /** @internal */
 export const noteShapeMigrations = defineMigrations({
-	currentVersion: Versions.MakeUrlsValid,
+	currentVersion: noteShapeVersions.AddFontSizeAdjustment,
 	migrators: {
-		[Versions.AddUrlProp]: {
+		[noteShapeVersions.AddUrlProp]: {
 			up: (shape) => {
 				return { ...shape, props: { ...shape.props, url: '' } }
 			},
@@ -50,7 +51,7 @@ export const noteShapeMigrations = defineMigrations({
 				return { ...shape, props }
 			},
 		},
-		[Versions.RemoveJustify]: {
+		[noteShapeVersions.RemoveJustify]: {
 			up: (shape) => {
 				let newAlign = shape.props.align
 				if (newAlign === 'justify') {
@@ -70,7 +71,7 @@ export const noteShapeMigrations = defineMigrations({
 			},
 		},
 
-		[Versions.MigrateLegacyAlign]: {
+		[noteShapeVersions.MigrateLegacyAlign]: {
 			up: (shape) => {
 				let newAlign: TLDefaultHorizontalAlignStyle
 				switch (shape.props.align) {
@@ -116,7 +117,7 @@ export const noteShapeMigrations = defineMigrations({
 				}
 			},
 		},
-		[Versions.AddVerticalAlign]: {
+		[noteShapeVersions.AddVerticalAlign]: {
 			up: (shape) => {
 				return {
 					...shape,
@@ -135,7 +136,7 @@ export const noteShapeMigrations = defineMigrations({
 				}
 			},
 		},
-		[Versions.MakeUrlsValid]: {
+		[noteShapeVersions.MakeUrlsValid]: {
 			up: (shape) => {
 				const url = shape.props.url
 				if (url !== '' && !T.linkUrl.isValid(shape.props.url)) {
@@ -145,5 +146,14 @@ export const noteShapeMigrations = defineMigrations({
 			},
 			down: (shape) => shape,
 		},
+		[noteShapeVersions.AddFontSizeAdjustment]: {
+			up: (shape) => {
+				return { ...shape, props: { ...shape.props, fontSizeAdjustment: 0 } }
+			},
+			down: (shape) => {
+				const { fontSizeAdjustment: _, ...props } = shape.props
+				return { ...shape, props }
+			},
+		},
 	},
 })