Update scripts

components/code-panel/docs-content.ts

@@ -9,19 +9,19 @@ export default {
   content: `
 Welcome to the documentation for tldraw's code editor. You can use the code editor to create shapes using JavaScript or TypeScript code.
 
-\`\`\`ts 
+\`\`\`ts
 const rect = new Rectangle({
   point: [100, 100],
   size: [200, 200],
   style: {
-    color: ColorStyle.Blue
-  }
+    color: ColorStyle.Blue,
+  },
 })
 
 rect.x = 300
 \`\`\`
 
-To run your code, press **Command + S**. 
+To run your code, press **Command + S**.
 
 Your new shapes will appear on the canvas. You can interact with code-created shapes just like any other shape: you can move the shape, change its style, delete it, etc.
 
@@ -46,34 +46,33 @@ You can also create shapes that can _only_ be created with code:
 
 Each of these shapes is a \`class\`. To create the shape, use the following syntax:
 
-\`\`\`ts 
+\`\`\`ts
 const myShape = new Rectangle()
 \`\`\`
 
 You can also create a shape with custom properties like this:
 
-\`\`\`ts 
+\`\`\`ts
 const myShape = new Rectangle({
   point: [100, 100],
   size: [200, 200],
   style: {
     color: ColorStyle.Blue,
     size: SizeStyle.Large,
-    dash: DashStyle.Dotted
-  }
+    dash: DashStyle.Dotted,
+  },
 })
 \`\`\`
 
 Once you've created a shape, you can set its properties like this:
 
-\`\`\`ts 
+\`\`\`ts
 const myShape = new Rectangle()
 
 myShape.x = 100
 myShape.color = ColorStyle.Red
 \`\`\`
 
-
 You can find more information on each shape class by clicking its name in the list above.
 
 ## Controls
@@ -82,12 +81,12 @@ In addition to shapes, you can also use code to create controls.
 
 \`\`\`ts
 new NumberControl({
-  label: "x",
-  value: 0
+  label: 'x',
+  value: 0,
 })
 
 const myShape = new Rectangle({
-  point: [controls.x, 0]
+  point: [controls.x, 0],
 })
 \`\`\`
 
@@ -101,10 +100,10 @@ There are two kinds of controls:
 
 Each of these controls is a \`class\`. To create the control, use the following syntax:
 
-\`\`\`ts 
+\`\`\`ts
 const control = new TextControl({
-  label: "myLabel",
-  value: "my value"
+  label: 'myLabel',
+  value: 'my value',
 })
 \`\`\`
 
@@ -112,13 +111,12 @@ Once you've created a control, you can use its value in your code like this:
 
 \`\`\`ts
 const myShape = new Text({
-  text: controls.myLabel
+  text: controls.myLabel,
 })
 \`\`\`
 
 You can find more information on each control class by clicking its name in the list above.
 
-
 ## Shape Classes
 
 ...
@@ -126,5 +124,6 @@ You can find more information on each control class by clicking its name in the
 ## Control Classes
 
 ...
+
 `,
 }

package.json

@@ -8,7 +8,7 @@
     "dev": "next dev",
     "format": "prettier --write .",
     "lint": "eslint . --ext ts --ext tsx --ext js",
-    "scripts": "node scripts/type-gen && node scripts/docs-gen && prettier --write './components/code-panel/*'",
+    "scripts": "prettier --write './state/code/docs.md' && node scripts/type-gen && node scripts/docs-gen && prettier --write './components/code-panel/*'",
     "start": "next start",
     "test-all": "yarn lint && yarn type-check && yarn test",
     "test:update": "jest --updateSnapshot",

state/code/docs.md

@@ -1,18 +1,18 @@
 Welcome to the documentation for tldraw's code editor. You can use the code editor to create shapes using JavaScript or TypeScript code.
 
-```ts 
+```ts
 const rect = new Rectangle({
   point: [100, 100],
   size: [200, 200],
   style: {
-    color: ColorStyle.Blue
-  }
+    color: ColorStyle.Blue,
+  },
 })
 
 rect.x = 300
 ```
 
-To run your code, press **Command + S**. 
+To run your code, press **Command + S**.
 
 Your new shapes will appear on the canvas. You can interact with code-created shapes just like any other shape: you can move the shape, change its style, delete it, etc.
 
@@ -37,34 +37,33 @@ You can also create shapes that can _only_ be created with code:
 
 Each of these shapes is a `class`. To create the shape, use the following syntax:
 
-```ts 
+```ts
 const myShape = new Rectangle()
 ```
 
 You can also create a shape with custom properties like this:
 
-```ts 
+```ts
 const myShape = new Rectangle({
   point: [100, 100],
   size: [200, 200],
   style: {
     color: ColorStyle.Blue,
     size: SizeStyle.Large,
-    dash: DashStyle.Dotted
-  }
+    dash: DashStyle.Dotted,
+  },
 })
 ```
 
 Once you've created a shape, you can set its properties like this:
 
-```ts 
+```ts
 const myShape = new Rectangle()
 
 myShape.x = 100
 myShape.color = ColorStyle.Red
 ```
 
-
 You can find more information on each shape class by clicking its name in the list above.
 
 ## Controls
@@ -73,12 +72,12 @@ In addition to shapes, you can also use code to create controls.
 
 ```ts
 new NumberControl({
-  label: "x",
-  value: 0
+  label: 'x',
+  value: 0,
 })
 
 const myShape = new Rectangle({
-  point: [controls.x, 0]
+  point: [controls.x, 0],
 })
 ```
 
@@ -92,10 +91,10 @@ There are two kinds of controls:
 
 Each of these controls is a `class`. To create the control, use the following syntax:
 
-```ts 
+```ts
 const control = new TextControl({
-  label: "myLabel",
-  value: "my value"
+  label: 'myLabel',
+  value: 'my value',
 })
 ```
 
@@ -103,17 +102,16 @@ Once you've created a control, you can use its value in your code like this:
 
 ```ts
 const myShape = new Text({
-  text: controls.myLabel
+  text: controls.myLabel,
 })
 ```
 
 You can find more information on each control class by clicking its name in the list above.
 
-
 ## Shape Classes
 
 ...
 
 ## Control Classes
 
-...
+...