[pull] main from tinacms:main

.changeset/real-suns-double.md

@@ -0,0 +1,5 @@
+---
+"tinacms": minor
+---
+
+Added parse field for filename field

packages/@tinacms/schema-tools/src/types/index.ts

@@ -987,6 +987,16 @@ export interface UICollection<Form = any, CMS = any, TinaForm = any> {
    * Customize the way filenames are generated during content creation
    */
   filename?: {
+    /**
+     * A callback function which formats the filename each time the value changes
+     * to enforce naming constraints (the extension is not necessary)
+     *
+     * eg:
+     * ```ts
+     * parse: (value) => value.toLowerCase().split(" ").join("-")
+     * ```
+     */
+    parse?: (filename: string) => string;
     /**
      * A callback which receives form values as an argument. The return value
      * here will be used as the filename (the extension is not necessary)

packages/tinacms/src/admin/pages/CollectionCreatePage.tsx

@@ -190,10 +190,11 @@ export const RenderForm = ({
     {};
 
   const fileReadOnly = schemaCollection?.ui?.filename?.readonly;
-
+  const parse = schemaCollection?.ui?.filename?.parse;
   const filenameField = {
     name: 'filename',
     label: 'Filename',
+    parse,
     component:
       slugFunction && !fileReadOnly
         ? wrapFieldsWithMeta(({ field, input, meta }) => {

packages/tinacms/src/admin/pages/CollectionListPage.tsx

@@ -352,7 +352,7 @@ const CollectionListPage = () => {
                 const collectionDefinition = cms.api.tina.schema.getCollection(
                   collection.name
                 );
-
+                const parse = collectionDefinition?.ui?.filename?.parse;
                 const allowCreate =
                   collectionDefinition?.ui?.allowedActions?.create ?? true;
                 const allowDelete =
@@ -440,6 +440,7 @@ const CollectionListPage = () => {
 
                     {renameModalOpen && (
                       <RenameModal
+                        parser={parse}
                         filename={vars.relativePathWithoutExtension}
                         newRelativePath={vars.newRelativePath}
                         setNewRelativePath={(newRelativePath) => {
@@ -1459,12 +1460,13 @@ interface ModalProps {
 }
 
 const RenameModal = ({
+  parser,
   close,
   renameFunc,
   filename,
   newRelativePath,
   setNewRelativePath,
-}: ModalProps) => {
+}: ModalProps & { parser?: (filename: string) => string }) => {
   return (
     <Modal>
       <PopupModal>
@@ -1477,7 +1479,13 @@ const RenameModal = ({
             <BaseTextField
               placeholder="Enter a new name for the document's file"
               value={newRelativePath}
-              onChange={(event) => setNewRelativePath(event.target.value)}
+              onChange={(event) => {
+                let value = event.target.value;
+                if (parser) {
+                  value = parser(value);
+                }
+                setNewRelativePath(value);
+              }}
             />
           </>
         </ModalBody>