@tinacms/app 0.0.0-a5bc4cd-20241024211559 → 0.0.0-a63a1f5-20251124043708

package/src/fields/rich-text/monaco/use-debounce.ts

@@ -3,23 +3,23 @@
 
 
 */
-import { useState, useEffect } from 'react'
+import { useState, useEffect } from 'react';
 export function useDebounce(value, delay) {
-  const [debouncedValue, setDebouncedValue] = useState(value)
+  const [debouncedValue, setDebouncedValue] = useState(value);
   useEffect(
     () => {
       // Update debounced value after delay
       const handler = setTimeout(() => {
-        setDebouncedValue(value)
-      }, delay)
+        setDebouncedValue(value);
+      }, delay);
       // Cancel the timeout if value changes (also on delay change or unmount)
       // This is how we prevent debounced value from updating if value is changed ...
       // .. within the delay period. Timeout gets cleared and restarted.
       return () => {
-        clearTimeout(handler)
-      }
+        clearTimeout(handler);
+      };
     },
     [value, delay] // Only re-call effect if value or delay changes
-  )
-  return debouncedValue
+  );
+  return debouncedValue;
 }

package/src/global.css

@@ -40,13 +40,13 @@
   --tina-font-size-7: 26px;
   --tina-font-size-8: 32px;
 
-  --tina-font-family: 'Inter', sans-serif;
+  --tina-font-family: "Inter", sans-serif;
 
   --tina-font-weight-regular: 400;
   --tina-font-weight-bold: 600;
 
-  --tina-shadow-big: 0px 2px 3px rgba(0, 0, 0, 0.05),
-    0 4px 12px rgba(0, 0, 0, 0.1);
+  --tina-shadow-big: 0px 2px 3px rgba(0, 0, 0, 0.05), 0 4px 12px
+    rgba(0, 0, 0, 0.1);
   --tina-shadow-small: 0px 2px 3px rgba(0, 0, 0, 0.12);
 
   --tina-timing-short: 85ms;

package/src/index.css

@@ -1,5 +1,5 @@
-@import 'global.css';
-@import 'preflight.css';
+@import "global.css";
+@import "preflight.css";
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -13,18 +13,22 @@
   fill: currentColor;
 }
 
+.font-libre-baskerville {
+  font-family: "Libre Baskerville", serif;
+}
+
 body {
   margin: 0;
   padding: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
 
@@ -38,32 +42,32 @@ div.graphiql-explorer-root > div:last-child {
 }
 
 /* if the last block has margin-bottom it makes the text box larger but some of it isn't clickable */
-.tina-prose [data-slate-editor='true'] {
+.tina-prose [data-slate-editor="true"] {
   padding-bottom: 0.5em;
   /* Outline is placed on the parent element for styling consistency with other elements */
   outline: none;
 }
 /* prose adds backticks, which look like they should be editable */
-.tina-prose [data-slate-editor='true'] .slate-code::before {
-  content: '';
+.tina-prose [data-slate-editor="true"] .slate-code::before {
+  content: "";
 }
-.tina-prose [data-slate-editor='true'] .slate-code::after {
-  content: '';
+.tina-prose [data-slate-editor="true"] .slate-code::after {
+  content: "";
 }
-.tina-prose [data-slate-editor='true'] .slate-code_block {
+.tina-prose [data-slate-editor="true"] .slate-code_block {
   margin: 0;
 }
 /* code lines as part of a block don't need the same background formatting */
-.tina-prose [data-slate-editor='true'] .slate-code_block .slate-code {
+.tina-prose [data-slate-editor="true"] .slate-code_block .slate-code {
   background: none;
 }
 /* prose makes the first p in a block slightly larger */
-.tina-prose [data-slate-editor='true'] p:first-of-type {
+.tina-prose [data-slate-editor="true"] p:first-of-type {
   font-size: 1em;
 }
 
 /* experimental floating toolbar doesn't need a large text area */
-.with-toolbar [data-slate-editor='true'] {
+.with-toolbar [data-slate-editor="true"] {
   min-height: 72px;
 }
 
@@ -190,7 +194,7 @@ div.graphiql-explorer-root > div:last-child {
 }
 
 .tina-date-field .rdtPicker td.rdtToday:before {
-  content: '';
+  content: "";
   display: inline-block;
   border-left: 7px solid transparent;
   border-bottom: 7px solid var(--tina-color-primary);
@@ -382,3 +386,8 @@ td.rdtYear:hover {
 .tina-date-field .rdtTime td {
   cursor: default;
 }
+
+/* Override Radix UI Portal wrapper z-index for dropdown menus */
+[data-radix-popper-content-wrapper] {
+  z-index: 10800 !important;
+}

package/src/lib/build-form.ts

@@ -1,42 +1,42 @@
-import { Field, Form, FormOptions, TinaCMS, TinaField } from 'tinacms'
+import { Field, Form, FormOptions, TinaCMS, TinaField } from 'tinacms';
 
-export type FieldType = Field & TinaField
-export type FormValues = Record<string, unknown>
-export type FormType = Form<FormValues, FieldType>
+export type FieldType = Field & TinaField;
+export type FormValues = Record<string, unknown>;
+export type FormType = Form<FormValues, FieldType>;
 
-type FormCreator = (formConfig: FormOptions<any>) => Form
+type FormCreator = (formConfig: FormOptions<any>) => Form;
 interface GlobalFormOptions {
-  icon?: any
-  layout: 'fullscreen' | 'popup'
+  icon?: any;
+  layout: 'fullscreen' | 'popup';
 }
 type GlobalFormCreator = (
   formConfig: FormOptions<any>,
   options?: GlobalFormOptions
-) => Form
+) => Form;
 interface GlobalFormOptions {
-  icon?: any
-  layout: 'fullscreen' | 'popup'
+  icon?: any;
+  layout: 'fullscreen' | 'popup';
 }
 export interface FormifyArgs {
-  formConfig: FormOptions<any>
-  createForm: FormCreator
-  createGlobalForm: FormCreator
-  skip?: () => void
+  formConfig: FormOptions<any>;
+  createForm: FormCreator;
+  createGlobalForm: FormCreator;
+  skip?: () => void;
 }
 
-export type FormifyCallback = (args: FormifyArgs, cms: TinaCMS) => Form | void
+export type FormifyCallback = (args: FormifyArgs, cms: TinaCMS) => Form | void;
 export type onSubmitArgs = {
   /**
    * @deprecated queryString is actually a mutation string, use `mutationString` instead
    */
-  queryString: string
-  mutationString: string
-  variables: object
-}
+  queryString: string;
+  mutationString: string;
+  variables: object;
+};
 
 export const createForm = (formConfig: FormOptions<any, any>) => {
-  return new Form(formConfig)
-}
+  return new Form(formConfig);
+};
 export const createGlobalForm: GlobalFormCreator = (
   formConfig,
   options?: { icon?: any; layout: 'fullscreen' | 'popup' }
@@ -44,6 +44,6 @@ export const createGlobalForm: GlobalFormCreator = (
   const form = new Form({
     ...formConfig,
     global: { global: true, ...options },
-  })
-  return form
-}
+  });
+  return form;
+};

package/src/lib/errors.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
-import { TinaCMS } from 'tinacms'
+import React from 'react';
+import { TinaCMS } from 'tinacms';
 
 const ErrorModalContent = (props: { title: string; errors: string[] }) => {
-  const { title, errors } = props
+  const { title, errors } = props;
   return (
     <>
       <div>{title}</div>
@@ -12,13 +12,13 @@ const ErrorModalContent = (props: { title: string; errors: string[] }) => {
         ))}
       </ul>
     </>
-  )
-}
+  );
+};
 
 export const showErrorModal = (
   title: string,
   errors: string[],
   cms: TinaCMS
 ) => {
-  cms.alerts.error(() => <ErrorModalContent title={title} errors={errors} />)
-}
+  cms.alerts.error(() => <ErrorModalContent title={title} errors={errors} />);
+};

package/src/lib/expand-query.ts

@@ -1,19 +1,22 @@
-import * as G from 'graphql'
+import * as G from 'graphql';
 
 export const expandQuery = ({
   schema,
   documentNode,
 }: {
-  schema: G.GraphQLSchema
-  documentNode: G.DocumentNode
+  schema: G.GraphQLSchema;
+  documentNode: G.DocumentNode;
 }): G.DocumentNode => {
-  const documentNodeWithTypenames = addTypenameToDocument(documentNode)
-  return addMetaFieldsToQuery(documentNodeWithTypenames, new G.TypeInfo(schema))
-}
+  const documentNodeWithTypenames = addTypenameToDocument(documentNode);
+  return addMetaFieldsToQuery(
+    documentNodeWithTypenames,
+    new G.TypeInfo(schema)
+  );
+};
 
 const addTypenameToDocument = (doc: G.DocumentNode) => {
   function isField(selection: G.SelectionNode): selection is G.FieldNode {
-    return selection.kind === 'Field'
+    return selection.kind === 'Field';
   }
   return G.visit(doc, {
     SelectionSet: {
@@ -24,13 +27,13 @@ const addTypenameToDocument = (doc: G.DocumentNode) => {
           (parent as G.OperationDefinitionNode).kind ===
             G.Kind.OPERATION_DEFINITION
         ) {
-          return
+          return;
         }
 
         // No changes if no selections.
-        const { selections } = node
+        const { selections } = node;
         if (!selections) {
-          return
+          return;
         }
 
         // If selections already have a __typename, or are part of an
@@ -40,32 +43,32 @@ const addTypenameToDocument = (doc: G.DocumentNode) => {
             isField(selection) &&
             (selection.name.value === '__typename' ||
               selection.name.value.lastIndexOf('__', 0) === 0)
-          )
-        })
+          );
+        });
         if (skip) {
-          return
+          return;
         }
 
         // If this SelectionSet is @export-ed as an input variable, it should
         // not have a __typename field (see issue #4691).
-        const field = parent as G.FieldNode
+        const field = parent as G.FieldNode;
         if (
           isField(field) &&
           field.directives &&
           field.directives.some((d) => d.name.value === 'export')
         ) {
-          return
+          return;
         }
 
         // Create and return a new SelectionSet with a __typename Field.
         return {
           ...node,
           selections: [...selections, TYPENAME_FIELD],
-        }
+        };
       },
     },
-  })
-}
+  });
+};
 
 const CONTENT_SOURCE_FIELD: G.FieldNode = {
   kind: G.Kind.FIELD,
@@ -73,14 +76,14 @@ const CONTENT_SOURCE_FIELD: G.FieldNode = {
     kind: G.Kind.NAME,
     value: '_content_source',
   },
-}
+};
 const METADATA_FIELD: G.FieldNode = {
   kind: G.Kind.FIELD,
   name: {
     kind: G.Kind.NAME,
     value: '_tina_metadata',
   },
-}
+};
 
 const TYPENAME_FIELD: G.FieldNode = {
   kind: G.Kind.FIELD,
@@ -88,7 +91,7 @@ const TYPENAME_FIELD: G.FieldNode = {
     kind: G.Kind.NAME,
     value: '__typename',
   },
-}
+};
 
 const addMetadataField = (
   node: G.FieldNode | G.InlineFragmentNode | G.FragmentDefinitionNode
@@ -100,15 +103,14 @@ const addMetadataField = (
         kind: 'SelectionSet',
         selections: [],
       }),
-      selections:
-        [
-          ...(node.selectionSet?.selections || []),
-          METADATA_FIELD,
-          CONTENT_SOURCE_FIELD,
-        ] || [],
+      selections: [
+        ...(node.selectionSet?.selections || []),
+        METADATA_FIELD,
+        CONTENT_SOURCE_FIELD,
+      ],
     },
-  }
-}
+  };
+};
 
 const addMetaFieldsToQuery = (
   documentNode: G.DocumentNode,
@@ -124,65 +126,64 @@ const addMetaFieldsToQuery = (
           kind: 'SelectionSet',
           selections: [],
         }),
-        selections:
-          [...(node.selectionSet?.selections || []), ...metaFields] || [],
+        selections: [...(node.selectionSet?.selections || []), ...metaFields],
       },
-    }
-  }
+    };
+  };
 
   const formifyVisitor: G.Visitor<G.ASTKindToNode, G.ASTNode> = {
     FragmentDefinition: {
       enter: (node, key, parent, path, ancestors) => {
-        typeInfo.enter(node)
-        const type = typeInfo.getType()
+        typeInfo.enter(node);
+        const type = typeInfo.getType();
         if (type) {
-          const namedType = G.getNamedType(type)
+          const namedType = G.getNamedType(type);
           if (G.isObjectType(namedType)) {
             if (namedType.getFields()['_tina_metadata']) {
-              return addMetadataField(node)
+              return addMetadataField(node);
             }
           }
-          return node
+          return node;
         }
       },
     },
     InlineFragment: {
       enter: (node, key, parent, path, ancestors) => {
-        typeInfo.enter(node)
-        const type = typeInfo.getType()
+        typeInfo.enter(node);
+        const type = typeInfo.getType();
         if (type) {
-          const namedType = G.getNamedType(type)
+          const namedType = G.getNamedType(type);
           if (G.isObjectType(namedType)) {
             if (namedType.getFields()['_tina_metadata']) {
-              return addMetadataField(node)
+              return addMetadataField(node);
             }
           }
-          return node
+          return node;
         }
       },
     },
     Field: {
       enter: (node, key, parent, path, ancestors) => {
-        typeInfo.enter(node)
-        const type = typeInfo.getType()
+        typeInfo.enter(node);
+        const type = typeInfo.getType();
         if (type) {
           if (isNodeType(type)) {
-            return addMetaFields(node, key, parent, path, ancestors)
+            return addMetaFields(node, key, parent, path, ancestors);
           }
-          const namedType = G.getNamedType(type)
+          const namedType = G.getNamedType(type);
           if (G.isObjectType(namedType)) {
             if (namedType.getFields()['_tina_metadata']) {
-              return addMetadataField(node)
+              return addMetadataField(node);
             }
-            return node
+            return node;
           }
         }
-        return node
+        return node;
       },
     },
-  }
-  return G.visit(documentNode, G.visitWithTypeInfo(typeInfo, formifyVisitor))
-}
+  };
+  return G.visit(documentNode, G.visitWithTypeInfo(typeInfo, formifyVisitor));
+};
 /**
  * This is a dummy query which we pull apart and spread
  * back into the the selectionSet for all "Node" fields
@@ -212,57 +213,61 @@ const node = G.parse(`
       }
     }
   }
- }`)
+ }`);
 const metaFields: G.SelectionNode[] =
   // @ts-ignore
-  node.definitions[0].selectionSet.selections
+  node.definitions[0].selectionSet.selections;
 
 export const isNodeType = (type: G.GraphQLOutputType) => {
-  const namedType = G.getNamedType(type)
+  const namedType = G.getNamedType(type);
   if (G.isInterfaceType(namedType)) {
     if (namedType.name === 'Node') {
-      return true
+      return true;
     }
   }
   if (G.isUnionType(namedType)) {
-    const types = namedType.getTypes()
+    const types = namedType.getTypes();
     if (
       types.every((type) => {
-        return type.getInterfaces().some((intfc) => intfc.name === 'Node')
+        return type.getInterfaces().some((intfc) => intfc.name === 'Node');
       })
     ) {
-      return true
+      return true;
     }
   }
   if (G.isObjectType(namedType)) {
     if (namedType.getInterfaces().some((intfc) => intfc.name === 'Node')) {
-      return true
+      return true;
     }
   }
-}
+  return false;
+};
 
 export const isConnectionType = (type: G.GraphQLOutputType) => {
-  const namedType = G.getNamedType(type)
+  const namedType = G.getNamedType(type);
   if (G.isInterfaceType(namedType)) {
     if (namedType.name === 'Connection') {
-      return true
+      return true;
     }
   }
   if (G.isUnionType(namedType)) {
-    const types = namedType.getTypes()
+    const types = namedType.getTypes();
     if (
       types.every((type) => {
-        return type.getInterfaces().some((intfc) => intfc.name === 'Connection')
+        return type
+          .getInterfaces()
+          .some((intfc) => intfc.name === 'Connection');
       })
     ) {
-      return true
+      return true;
     }
   }
   if (G.isObjectType(namedType)) {
     if (
       namedType.getInterfaces().some((intfc) => intfc.name === 'Connection')
     ) {
-      return true
+      return true;
     }
   }
-}
+  return false;
+};