@tinacms/app 0.0.0-d7c745e-20250102002342 → 0.0.0-d94de9b-20250707010010

package/src/lib/types.ts

@@ -1,51 +1,53 @@
 export type PostMessage =
   | {
-      type: 'open' | 'close' | 'isEditMode'
-      id: string
-      data: object
+      type: 'open' | 'close' | 'isEditMode';
+      id: string;
+      data: object;
     }
   | { type: 'field:selected'; fieldName: string }
   | { type: 'quick-edit'; value: boolean }
+  | { type: 'user-select-form'; formId: string }
+  | { type: 'url-changed' };
 
 export type Payload = {
-  id: string
-  variables: object
-  query: string
-  data: object
-  expandedQuery?: string
-  expandedData?: object
-  expandedQueryForResolver?: string
-}
+  id: string;
+  variables: object;
+  query: string;
+  data: object;
+  expandedQuery?: string;
+  expandedData?: object;
+  expandedQueryForResolver?: string;
+};
 
 export type SystemInfo = {
-  breadcrumbs: string[]
-  basename: string
-  filename: string
-  path: string
-  extension: string
-  relativePath: string
-  title?: string | null | undefined
-  template: string
+  breadcrumbs: string[];
+  basename: string;
+  filename: string;
+  path: string;
+  extension: string;
+  relativePath: string;
+  title?: string | null | undefined;
+  template: string;
   // __typename: string
   collection: {
-    name: string
-    slug: string
-    label: string
-    path: string
-    format?: string | null | undefined
-    matches?: string | null | undefined
+    name: string;
+    slug: string;
+    label: string;
+    path: string;
+    format?: string | null | undefined;
+    matches?: string | null | undefined;
     // templates?: object
     // fields?: object
     // __typename: string
-  }
-}
+  };
+};
 
 export type Document = {
-  _values: Record<string, unknown>
-  _sys: SystemInfo
-}
+  _values: Record<string, unknown>;
+  _sys: SystemInfo;
+};
 
 export type ResolvedDocument = {
-  _internalValues: Record<string, unknown>
-  _internalSys: SystemInfo
-}
+  _internalValues: Record<string, unknown>;
+  _internalSys: SystemInfo;
+};

package/src/lib/util.ts

@@ -1,5 +1,5 @@
-const charCodeOfDot = '.'.charCodeAt(0)
-const reEscapeChar = /\\(\\)?/g
+const charCodeOfDot = '.'.charCodeAt(0);
+const reEscapeChar = /\\(\\)?/g;
 const rePropName = RegExp(
   // Match anything that isn't a dot or bracket.
   '[^.[\\]]+' +
@@ -16,7 +16,7 @@ const rePropName = RegExp(
     // Or match "" as the space between consecutive dots or empty brackets.
     '(?=(?:\\.|\\[\\])(?:\\.|\\[\\]|$))',
   'g'
-)
+);
 
 /**
  * Converts `string` to a property path array.
@@ -26,31 +26,31 @@ const rePropName = RegExp(
  * @returns {Array} Returns the property path array.
  */
 const stringToPath = (string: string) => {
-  const result = []
+  const result = [];
   if (string.charCodeAt(0) === charCodeOfDot) {
-    result.push('')
+    result.push('');
   }
   string.replace(rePropName, (match, expression, quote, subString) => {
-    let key = match
+    let key = match;
     if (quote) {
-      key = subString.replace(reEscapeChar, '$1')
+      key = subString.replace(reEscapeChar, '$1');
     } else if (expression) {
-      key = expression.trim()
+      key = expression.trim();
     }
-    result.push(key)
-  })
-  return result
-}
+    result.push(key);
+  });
+  return result;
+};
 
-const keysCache: { [key: string]: string[] } = {}
-const keysRegex = /[.[\]]+/
+const keysCache: { [key: string]: string[] } = {};
+const keysRegex = /[.[\]]+/;
 
 const toPath = (key: string): string[] => {
   if (key === null || key === undefined || !key.length) {
-    return []
+    return [];
   }
   if (typeof key !== 'string') {
-    throw new Error('toPath() expects a string')
+    throw new Error('toPath() expects a string');
   }
   if (keysCache[key] == null) {
     /**
@@ -68,67 +68,62 @@ const toPath = (key: string): string[] => {
      */
     if (key.endsWith('[]')) {
       // v4.20.2 (a `key` like 'choices[]' should map to ['choices'], which is fine).
-      keysCache[key] = key.split(keysRegex).filter(Boolean)
+      keysCache[key] = key.split(keysRegex).filter(Boolean);
     } else {
       // v4.20.3 (a `key` like 'choices[]' maps to ['choices', ''], which breaks applications relying on inputs like `<input type="checkbox" name="choices[]" />`).
-      keysCache[key] = stringToPath(key)
+      keysCache[key] = stringToPath(key);
     }
   }
-  return keysCache[key]
-}
+  return keysCache[key];
+};
 export const getDeepestMetadata = (state: Object, complexKey: string): any => {
   // Intentionally using iteration rather than recursion
-  const path = toPath(complexKey)
-  let current: any = state
-  let metadata: any
+  const path = toPath(complexKey);
+  let current: any = state;
+  let metadata: any;
   for (let i = 0; i < path.length; i++) {
-    const key = path[i]
+    const key = path[i];
     if (
       current === undefined ||
       current === null ||
       typeof current !== 'object' ||
       (Array.isArray(current) && isNaN(Number(key)))
     ) {
-      return undefined
+      return undefined;
     }
-    const value = current[key]
+    const value = current[key];
     if (value?._tina_metadata) {
       // We're at a reference field, we don't want to select the
       // reference form, just the reference select field
       if (complexKey === value._tina_metadata?.prefix && metadata) {
       } else {
-        metadata = value._tina_metadata
+        metadata = value._tina_metadata;
       }
     }
-    current = value
+    current = value;
   }
-  return metadata
-}
+  return metadata;
+};
 export const getFormAndFieldNameFromMetadata = (
   object: object,
   eventFieldName: string
 ) => {
-  let formId
-  let n
-  const value = getDeepestMetadata(object, eventFieldName)
-  if (value) {
-    if (value.prefix) {
-      const fieldName = eventFieldName.slice(value?.prefix?.length + 1)
-      const localFieldName = value.name
-        ? fieldName.slice(value?.name?.length + 1)
-        : fieldName
-      if (localFieldName) {
-        // If localFieldName is tags.2, just use `tags`
-        if (!isNaN(Number(localFieldName.split('.')[1]))) {
-          n = value.fields[localFieldName.split('.')[0]]
-        } else {
-          n = value.fields[localFieldName]
-        }
-      } else {
-        n = value.name
-      }
-      formId = value.id
-    }
+  const metadata = getDeepestMetadata(object, eventFieldName);
+
+  if (!metadata) {
+    console.warn(
+      '[getFormAndFieldNameFromMetadata] No metadata found for:',
+      eventFieldName
+    );
+    return { formId: undefined, fieldName: undefined };
   }
-  return { formId, fieldName: n }
-}
+
+  const { id: formId, prefix } = metadata;
+  const prefixLength = prefix?.length ?? 0;
+  const localFieldName = eventFieldName.slice(prefixLength + 1);
+
+  return {
+    formId,
+    fieldName: localFieldName,
+  };
+};

package/src/main.tsx

@@ -1,12 +1,12 @@
-import React from 'react'
-import { createRoot } from 'react-dom/client'
-import App from './App'
-import './index.css'
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+import './index.css';
 
-const container = document.getElementById('root')
-const root = createRoot(container!)
+const container = document.getElementById('root');
+const root = createRoot(container!);
 root.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>
-)
+);

package/src/preflight.css

@@ -15,7 +15,7 @@ body {
 
   ::before,
   ::after {
-    --tw-content: '';
+    --tw-content: "";
   }
 
   hr {
@@ -53,14 +53,14 @@ body {
   samp,
   pre {
     font-family: theme(
-      'fontFamily.mono',
+      "fontFamily.mono",
       ui-monospace,
       SFMono-Regular,
       Menlo,
       Monaco,
       Consolas,
-      'Liberation Mono',
-      'Courier New',
+      "Liberation Mono",
+      "Courier New",
       monospace
     ); /* 1 */
     font-size: 1em; /* 2 */
@@ -111,9 +111,9 @@ body {
   }
 
   button,
-  [type='button'],
-  [type='reset'],
-  [type='submit'] {
+  [type="button"],
+  [type="reset"],
+  [type="submit"] {
     -webkit-appearance: button; /* 1 */
     background-image: none; /* 2 */
   }
@@ -135,7 +135,7 @@ body {
     height: auto;
   }
 
-  [type='search'] {
+  [type="search"] {
     -webkit-appearance: textfield; /* 1 */
     outline-offset: -2px; /* 2 */
   }
@@ -197,11 +197,11 @@ body {
   input::placeholder,
   textarea::placeholder {
     opacity: 1; /* 1 */
-    color: theme('colors.gray.400', #9ca3af); /* 2 */
+    color: theme("colors.gray.400", #9ca3af); /* 2 */
   }
 
   button,
-  [role='button'] {
+  [role="button"] {
     cursor: pointer;
   }
 

package/src/preview.tsx

@@ -1,27 +1,27 @@
 /**
 
 */
-import React from 'react'
-import { defineConfig } from 'tinacms'
-import { useGraphQLReducer } from './lib/graphql-reducer'
+import React from 'react';
+import { defineConfig } from 'tinacms';
+import { useGraphQLReducer } from './lib/graphql-reducer';
 
-type Config = Parameters<typeof defineConfig>[0]
+type Config = Parameters<typeof defineConfig>[0];
 
 export const Preview = (
   props: Config & {
-    url: string
-    iframeRef: React.MutableRefObject<HTMLIFrameElement>
+    url: string;
+    iframeRef: React.MutableRefObject<HTMLIFrameElement>;
   }
 ) => {
-  useGraphQLReducer(props.iframeRef, props.url)
+  useGraphQLReducer(props.iframeRef, props.url);
 
   return (
     <iframe
-      data-test="tina-iframe"
-      id="tina-iframe"
+      data-test='tina-iframe'
+      id='tina-iframe'
       ref={props.iframeRef}
-      className="h-screen w-full bg-white"
+      className='h-screen w-full bg-white'
       src={props.url}
     />
-  )
-}
+  );
+};

package/src/vite-env.d.ts

@@ -3,6 +3,6 @@
 */
 
 /// <reference types="vite/client" />
-declare const __API_URL__: string
-declare const __BASE_PATH__: string
-declare const __TINA_GRAPHQL_VERSION__: string
+declare const __API_URL__: string;
+declare const __BASE_PATH__: string;
+declare const __TINA_GRAPHQL_VERSION__: string;