Update annotations -> notes in docs to correspond with updates to UI (#292)

* Update docs to reflect update to notes (aka annotations)

* Update V4 notes docs and update internal docs links to notes page

* Fix URL

Author: laurakalbag

docs/annotations.mdx

@@ -1,40 +1,32 @@
 ---
-title: Annotations
+title: Notes
 ---
 
-import EmbedMachine from '@site/src/components/EmbedMachine';
-
-Annotations are notes you can use to annotate your machine, positioned anywhere inside your machine. Annotations are useful for information or comments you want to add to your machine that are only visible inside Stately Studio and not included when you export as code.
+You can use notes to annotate your machine, positioned anywhere inside your machine. Notes are useful for information or comments you want to add to your machine that are only visible inside Stately Studio and not included when you export as code.
 
 <EmbedMachine
   embedURL="https://stately.ai/registry/editor/embed/5b170468-d66a-4136-84c8-676c8fea82e8?machineId=7879be19-d267-4e75-9a7d-6a870d540257"
   name="Annotated dog walk machine"
 />
 
-Unlike [**descriptions**](descriptions.mdx), annotations don’t need to be connected to a state or transition and can be added or positioned anywhere inside your machine.
+Notes are formatted with Markdown so you can add links, images, and other formatting to your annotations.
 
 :::tip
 
-For now, annotations only support plain text. If you want to include text formatting, links, or images, [use **descriptions**, which have markdown support](descriptions.mdx).
+Unlike [**descriptions**](descriptions.mdx), notes don’t need to be connected to a state or transition and can be added or positioned anywhere inside your machine.
 
 :::
 
-## Add annotations to your machine
-
-You can add annotations anywhere on your machine from **Design** and **Simulate** mode, but you can only edit them in **Design** mode.
-
-Annotations are unrelated to a state or transition. Still, their layout position is connected to the closest root or parent state when you create them, which helps give your annotations enough space in the auto layout.
+## Add notes to your machine
 
-1. Right-click anywhere on the canvas to open the canvas menu.
-2. Choose **Add annotation** to create a new annotation on the canvas.
-3. Type your annotation text into the annotation.
+You can add notes anywhere on your machine from **Design** and **Simulate** mode, but you can only edit them in **Design** mode.
 
-## Edit annotations
+Notes are unrelated to a state or transition. Still, their layout position is connected to the closest root or parent state when you create them, which helps give your notes enough space in the auto layout.
 
-- Select an annotation to edit it, then click inside the annotation to edit its text.
-- Select and hold an annotation to drag and change its position on the canvas.
+- Use the <PlusSquare size={18}/> plus icon button in the canvas tools and choose **Note**.
+- Right-click anywhere on the canvas and choose **Add note**.
 
-## Delete annotations
+### Edit and delete notes
 
-- Select an annotation to edit it, then use backspace to delete the annotation.
-- Right-click on an annotation to open the **Delete** option menu, then use **Delete** to delete the annotation.
+- Double-click or use the <kbd>Enter</kbd> key to edit the contents of a note.
+- Use the <kbd>Backspace</kbd> key to delete the selected note.

docs/canvas-view-controls.mdx

@@ -65,7 +65,7 @@ Below is a preview of a machine _without_ the UI hidden.
 
 The zoom menu and canvas context menu contain the same options:
 
-- **Add [annotation](annotations.mdx)**
+- **Add [note](annotations.mdx)**
 - **[Autolayout](autolayout.mdx)**
 - **Zoom In**
 - **Zoom out**

docs/export-as-code.mdx

@@ -4,7 +4,7 @@ title: Export as code
 
 Exporting as code is useful if you want to use your machine with [XState](xstate.mdx) inside your codebase or if you want to duplicate your machine without using **Fork**.
 
-Every feature of your state machine will be included in the code, except for colors and annotations.
+Every feature of your state machine will be included in the code, except for [colors](colors.mdx) and [notes](annotations.mdx).
 
 ## Export formats
 

sidebars.js

@@ -135,7 +135,11 @@ const sidebars = {
               label: 'Colors',
               id: 'colors',
             },
-            'annotations',
+            {
+              type: 'doc',
+              label: 'Notes',
+              id: 'annotations',
+            },
             'descriptions',
             {
               type: 'doc',

versioned_docs/version-4/annotations.mdx

@@ -2,37 +2,31 @@
 title: Annotations
 ---
 
-Annotations are notes you can use to annotate your machine, positioned anywhere inside your machine. Annotations are useful for information or comments you want to add to your machine that are only visible inside Stately Studio and not included when you export as code.
+You can use notes to annotate your machine, positioned anywhere inside your machine. Notes are useful for information or comments you want to add to your machine that are only visible inside Stately Studio and not included when you export as code.
 
 <EmbedMachine
   embedURL="https://stately.ai/registry/editor/embed/5b170468-d66a-4136-84c8-676c8fea82e8?machineId=7879be19-d267-4e75-9a7d-6a870d540257"
   name="Annotated dog walk machine"
 />
 
-Unlike [**descriptions**](descriptions.mdx), annotations don’t need to be connected to a state or transition and can be added or positioned anywhere inside your machine.
+Notes are formatted with Markdown so you can add links, images, and other formatting to your annotations.
 
 :::tip
 
-For now, annotations only support plain text. If you want to include text formatting, links, or images, [use **descriptions**, which have markdown support](descriptions.mdx).
+Unlike [**descriptions**](descriptions.mdx), notes don’t need to be connected to a state or transition and can be added or positioned anywhere inside your machine.
 
 :::
 
-## Add annotations to your machine
+## Add notes to your machine
 
-You can add annotations anywhere on your machine from **Design** and **Simulate** mode, but you can only edit them in **Design** mode.
+You can add notes anywhere on your machine from **Design** and **Simulate** mode, but you can only edit them in **Design** mode.
 
-Annotations are unrelated to a state or transition. Still, their layout position is connected to the closest root or parent state when you create them, which helps give your annotations enough space in the auto layout.
+Notes are unrelated to a state or transition. Still, their layout position is connected to the closest root or parent state when you create them, which helps give your notes enough space in the auto layout.
 
-1. Right-click anywhere on the canvas to open the canvas menu.
-2. Choose **Add annotation** to create a new annotation on the canvas.
-3. Type your annotation text into the annotation.
+- Use the <PlusSquare size={18}/> plus icon button in the canvas tools and choose **Note**.
+- Right-click anywhere on the canvas and choose **Add note**.
 
-## Edit annotations
+### Edit and delete notes
 
-- Select an annotation to edit it, then click inside the annotation to edit its text.
-- Select and drag an annotation to change its position on the canvas.
-
-## Delete annotations
-
-- Select an annotation to edit it, then use backspace to delete the annotation.
-- Right-click on an annotation to open the **Delete** option menu, then use **Delete** to delete the annotation.
+- Double-click or use the <kbd>Enter</kbd> key to edit the contents of a note.
+- Use the <kbd>Backspace</kbd> key to delete the selected note.

versioned_sidebars/version-4-sidebars.json

@@ -118,7 +118,11 @@
             "export-as-code",
             "machine-restore",
             "autolayout",
-            "annotations",
+            {
+              "type": "doc",
+              "label": "Notes",
+              "id": "annotations"
+            },
             "descriptions",
             {
               "type": "doc",