add beforeSubmit and file path docs

content/docs/extending-tina/before-submit.md

@@ -0,0 +1,129 @@
+---
+title: Before Submit Function
+id: '/docs/extending-tina/before-submit'
+prev: /docs/extending-tina/filename-customization
+# next: /docs/extending-tina/before-submit
+---
+
+The before submit function allows you to run a function on the frontend before the form is submitted to the backend and optionally modify the values of a document.
+
+## Definition
+
+```ts
+import { TinaCMS, Form } from 'tinacms'
+
+type BeforeSubmitFunction = (args: {
+  values: Record<string, unknown>
+  cms: TinaCMS
+  form: Form
+}) => Promise<void | Record<string, unknown>>
+```
+
+## Examples
+
+### Adding a last updated field
+
+```js
+// tina/config.{ts.js}
+
+export default defineConfig({
+  schema: {
+    collections: [
+      {
+        ui: {
+          // Example of beforeSubmit
+          beforeSubmit: async ({
+            form,
+            cms,
+            values,
+          }: {
+            form: Form
+            cms: TinaCMS
+            values: Record<string, any>
+          }) => {
+            return {
+              ...values,
+              lastUpdated: new Date().toISOString(),
+            }
+          },
+          //...
+        },
+        //...
+      },
+      //...
+    ],
+  },
+  //...
+})
+```
+
+### Adding a created at field
+
+```js
+export default defineConfig({
+  schema: {
+    collections: [
+      {
+        ui: {
+          beforeSubmit: async ({
+            form,
+            cms,
+            values,
+          }: {
+            form: Form
+            cms: TinaCMS
+            values: Record<string, any>
+          }) => {
+            if (form.crudType === 'create') {
+              return {
+                ...values,
+                createdAt: new Date().toISOString(),
+              }
+            }
+          },
+          //...
+        },
+        //...
+      },
+      //...
+    ],
+  },
+  //...
+})
+```
+
+### Adding a slug field
+
+```js
+export default defineConfig({
+  schema: {
+    collections: [
+      {
+        ui: {
+          beforeSubmit: async ({
+            form,
+            cms,
+            values,
+          }: {
+            form: Form
+            cms: TinaCMS
+            values: Record<string, any>
+          }) => {
+            return {
+              ...values,
+              slug: values.title
+                .toLowerCase()
+                .replace(/ /g, '-')
+                .replace(/[^\w-]+/g, ''),
+            }
+          },
+          //...
+        },
+        //...
+      },
+      //...
+    ],
+  },
+  //...
+})
+```

content/docs/extending-tina/filename-customization.md

@@ -2,11 +2,21 @@
 title: Filename customization
 id: '/docs/extending-tina/filename-customization'
 prev: /docs/extending-tina/format-and-parse
-# next: /docs/extending-tina/format-and-parse
+next: /docs/extending-tina/before-submit
 ---
 
 The filename customization API allows you to customize the filename of a document based on its content. This is useful when you do not want your editors to have to worry about the filename of a document.
 
+A couple things to keep in mind when customizing the filename:
+
+- Filename can not contain any spaces
+- Filename must contain only a-z, A-Z, 0-9, -, \_, ., or /.
+- Filename must be unique within the collection
+- If the filename starts with `/` it will be treated as an absolute path relative to the collection root
+  - Example: `/foo/bar/blog-post` will be saved as `<MyCollectionPath>/post/blog-post.md`
+- If the filename does not start with `/` it will be treated as a relative to your current folder
+  - Example: `bar/blog-post` will be saved as `<MyCollectionPath>/<CurrentDirectory>/bar/blog-post.md`
+
 ## Definition
 
 | Property               | Description                                                              |
@@ -35,10 +45,11 @@ export default defineConfig({
             // if disabled, the editor can not edit the filename
             readonly: true,
             // Example of using a custom slugify function
-            slugify: values => {
+            slugify: (values) => {
               // Values is an object containing all the values of the form. In this case it is {title?: string, topic?: string}
-              return `${values?.topic ||
-                'no-topic'}-${values?.title?.toLowerCase().replace(/ /g, '-')}`
+              return `${values?.topic || 'no-topic'}-${values?.title
+                ?.toLowerCase()
+                .replace(/ /g, '-')}`
             },
           },
         },

content/docs/reference/collections.md

@@ -24,6 +24,7 @@ Collections represent a type of content (EX, blog post, page, author, etc). We r
 | `frontmatterFormat`               | The format used to parse the frontmatter. This can be `"yaml"` ,`"toml"`, or `"json"`. It defaults to `"yaml"`                                                                                                                       |
 | `frontmatterDelimiters`           | The Delimiters used for the frontmatter for a document. This is what Has type `string \| [string, string]` . The default is `---`. Read more about delimiters [here](https://github.com/jonschlinkert/gray-matter#optionsdelimiters) |
 | `ui.filename`                     | See [Filename customization](/docs/extending-tina/filename-customization/)                                                                                                                                                           |
+| `ui.beforeSubmit`                 | This function is called before the form is submitted. If values are returned from this function they will be the values used to submit the form. (_optional_)                                                                        |
 | `ui.global`                       | A boolean that if true will make this collection Global. (_optional_)                                                                                                                                                                |
 | `ui.router`                       | A function that takes in a document and returns the route for it. If nothing is returned the basic editor will be used. Read more about visual editing [here](/docs/contextual-editing/router/#the-router-property)(_optional_)      |
 | `ui.allowedActions.create`        | If this is false, the create button will not appear in the collection list page. See [example](#example-with-allowed-actions). (_optional_)                                                                                          |

content/toc-doc.json

@@ -163,6 +163,10 @@
       {
         "title": "Filename Customization",
         "slug": "/docs/extending-tina/filename-customization/"
+      },
+      {
+        "title": "Before Submit function",
+        "slug": "/docs/extending-tina/before-submit"
       }
     ]
   },