@tinacms/app 0.0.0-20230516164752 → 0.0.0-20230516170903

package/CHANGELOG.md

@@ -1,14 +1,14 @@
 # @tinacms/app
 
-## 0.0.0-20230516164752
+## 0.0.0-20230516170903
 
 ### Patch Changes
 
 - 7f95c1ce5: Reorganize the way fields are presented on the form to allow for deep-linking
 - Updated dependencies [b3d98d159]
 - Updated dependencies [7f95c1ce5]
-  - @tinacms/toolkit@0.0.0-20230516164752
-  - tinacms@0.0.0-20230516164752
+  - @tinacms/toolkit@0.0.0-20230516170903
+  - tinacms@0.0.0-20230516170903
 
 ## 1.2.12
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tinacms/app",
-  "version": "0.0.0-20230516164752",
+  "version": "0.0.0-20230516170903",
   "main": "src/main.tsx",
   "license": "Apache-2.0",
   "devDependencies": {
@@ -13,8 +13,6 @@
     "@headlessui/react": "1.6.6",
     "@heroicons/react": "1.0.6",
     "@monaco-editor/react": "4.4.5",
-    "@tinacms/mdx": "1.3.10",
-    "@tinacms/toolkit": "0.0.0-20230516164752",
     "@xstate/react": "3.0.0",
     "final-form": "4.20.7",
     "graphiql": "^2.4.0",
@@ -27,8 +25,10 @@
     "react-is": "17.0.2",
     "react-router-dom": "6.3.0",
     "tailwindcss": "^3.2.7",
-    "tinacms": "0.0.0-20230516164752",
     "typescript": "^4.6.4",
-    "zod": "^3.14.3"
+    "zod": "^3.14.3",
+    "@tinacms/mdx": "1.3.10",
+    "@tinacms/toolkit": "0.0.0-20230516170903",
+    "tinacms": "0.0.0-20230516170903"
   }
 }

package/src/lib/expand-query.ts

@@ -67,6 +67,13 @@ const addTypenameToDocument = (doc: G.DocumentNode) => {
   })
 }
 
+const CONTENT_SOURCE_FIELD: G.FieldNode = {
+  kind: G.Kind.FIELD,
+  name: {
+    kind: G.Kind.NAME,
+    value: '_content_source',
+  },
+}
 const METADATA_FIELD: G.FieldNode = {
   kind: G.Kind.FIELD,
   name: {
@@ -94,7 +101,11 @@ const addMetadataField = (
         selections: [],
       }),
       selections:
-        [...(node.selectionSet?.selections || []), METADATA_FIELD] || [],
+        [
+          ...(node.selectionSet?.selections || []),
+          METADATA_FIELD,
+          CONTENT_SOURCE_FIELD,
+        ] || [],
     },
   }
 }

package/src/lib/graphql-reducer.ts

@@ -1,7 +1,7 @@
 import React from 'react'
 import * as G from 'graphql'
 import { getIn } from 'final-form'
-import { z, ZodError } from 'zod'
+import { z } from 'zod'
 // @ts-expect-error
 import schemaJson from 'SCHEMA_IMPORT'
 import { expandQuery, isConnectionType, isNodeType } from './expand-query'
@@ -25,9 +25,10 @@ import type {
   PostMessage,
   Payload,
   SystemInfo,
-  Document,
   ResolvedDocument,
 } from './types'
+import { getFormAndFieldNameFromMetadata } from './util'
+import { useSearchParams } from 'react-router-dom'
 
 const sysSchema = z.object({
   breadcrumbs: z.array(z.string()),
@@ -57,6 +58,50 @@ const astNode = schemaJson as G.DocumentNode
 const astNodeWithMeta: G.DocumentNode = {
   ...astNode,
   definitions: astNode.definitions.map((def) => {
+    if (def.kind === 'InterfaceTypeDefinition') {
+      return {
+        ...def,
+        fields: [
+          ...(def.fields || []),
+          {
+            kind: 'FieldDefinition',
+            name: {
+              kind: 'Name',
+              value: '_tina_metadata',
+            },
+            arguments: [],
+            type: {
+              kind: 'NonNullType',
+              type: {
+                kind: 'NamedType',
+                name: {
+                  kind: 'Name',
+                  value: 'JSON',
+                },
+              },
+            },
+          },
+          {
+            kind: 'FieldDefinition',
+            name: {
+              kind: 'Name',
+              value: '_content_source',
+            },
+            arguments: [],
+            type: {
+              kind: 'NonNullType',
+              type: {
+                kind: 'NamedType',
+                name: {
+                  kind: 'Name',
+                  value: 'JSON',
+                },
+              },
+            },
+          },
+        ],
+      }
+    }
     if (def.kind === 'ObjectTypeDefinition') {
       return {
         ...def,
@@ -80,6 +125,24 @@ const astNodeWithMeta: G.DocumentNode = {
               },
             },
           },
+          {
+            kind: 'FieldDefinition',
+            name: {
+              kind: 'Name',
+              value: '_content_source',
+            },
+            arguments: [],
+            type: {
+              kind: 'NonNullType',
+              type: {
+                kind: 'NamedType',
+                name: {
+                  kind: 'Name',
+                  value: 'JSON',
+                },
+              },
+            },
+          },
         ],
       }
     }
@@ -96,6 +159,18 @@ export const useGraphQLReducer = (
   const cms = useCMS()
   const tinaSchema = cms.api.tina.schema as TinaSchema
   const [payloads, setPayloads] = React.useState<Payload[]>([])
+  const [searchParams, setSearchParams] = useSearchParams()
+  const [results, setResults] = React.useState<
+    {
+      id: string
+      data:
+        | {
+            [key: string]: any
+          }
+        | null
+        | undefined
+    }[]
+  >([])
   const [documentsToResolve, setDocumentsToResolve] = React.useState<string[]>(
     []
   )
@@ -104,6 +179,11 @@ export const useGraphQLReducer = (
   >([])
   const [operationIndex, setOperationIndex] = React.useState(0)
 
+  const helper = React.useMemo(() => {
+    const previewPlugins = cms.plugins.getType('preview-helper')
+    return previewPlugins.find('preview-helper')
+  }, [cms])
+
   React.useEffect(() => {
     const run = async () => {
       return Promise.all(
@@ -145,7 +225,7 @@ export const useGraphQLReducer = (
         setPayloads(updatedPayloads)
       })
     }
-  }, [payloads.map(({ id }) => id).join('.'), cms])
+  }, [JSON.stringify(payloads), cms])
 
   const processPayload = React.useCallback(
     (payload: Payload) => {
@@ -192,6 +272,13 @@ export const useGraphQLReducer = (
           if (fieldName === '_values') {
             return source._internalValues
           }
+          if (info.fieldName === '_content_source') {
+            const pathArray = G.responsePathAsArray(info.path)
+            return {
+              queryId: payload.id,
+              path: pathArray.slice(0, pathArray.length - 1),
+            }
+          }
           if (info.fieldName === '_tina_metadata') {
             if (value) {
               return value
@@ -201,6 +288,7 @@ export const useGraphQLReducer = (
             return {
               id: null,
               fields: [],
+              prefix: '',
             }
           }
           if (isConnectionType(info.returnType)) {
@@ -271,13 +359,9 @@ export const useGraphQLReducer = (
                 return pathString.startsWith(item.path)
               }
             })
-            let parent = ancestors[ancestors.length - 1]
+            const parent = ancestors[ancestors.length - 1]
             if (parent) {
               if (parent.type === 'document') {
-                // console.log(
-                //   'its a parent',
-                //   JSON.stringify({ id, value, pathString, parent }, null, 2)
-                // )
                 parent.subItems.push({
                   type: 'document',
                   path: pathString,
@@ -307,7 +391,12 @@ export const useGraphQLReducer = (
                 },
                 { values: true }
               )
-              return resolveDocument(resolvedDocument, template, form)
+              return resolveDocument(
+                resolvedDocument,
+                template,
+                form,
+                pathString
+              )
             } else {
               existingForm.tinaForm.addQuery(payload.id)
               const { template } = getTemplateForDocument(
@@ -318,10 +407,19 @@ export const useGraphQLReducer = (
               return resolveDocument(
                 resolvedDocument,
                 template,
-                existingForm.tinaForm
+                existingForm.tinaForm,
+                pathString
               )
             }
           }
+          if (typeof value === 'string' && source?._tina_metadata) {
+            // FIXME: hack to prevent breaking images
+            if (helper) {
+              const pathArray = G.responsePathAsArray(info.path)
+
+              return helper.encode(pathArray.join('.'), value, payload.id)
+            }
+          }
           return value
         },
       })
@@ -344,6 +442,32 @@ export const useGraphQLReducer = (
           }
         })
       } else {
+        if (result.data) {
+          setResults((results) => [
+            ...results,
+            { id: payload.id, data: result.data },
+          ])
+        }
+        const activeField = searchParams.get('active-field')
+        if (activeField) {
+          setSearchParams({})
+          const [queryId, eventFieldName] = activeField.split('---')
+          if (queryId === payload.id) {
+            if (result?.data) {
+              cms.dispatch({
+                type: 'forms:set-active-field-name',
+                value: getFormAndFieldNameFromMetadata(
+                  result.data,
+                  eventFieldName
+                ),
+              })
+            }
+            cms.dispatch({
+              type: 'sidebar:set-display-state',
+              value: 'openOrFull',
+            })
+          }
+        }
         iframe.current?.contentWindow?.postMessage({
           type: 'updateData',
           id: payload.id,
@@ -363,24 +487,40 @@ export const useGraphQLReducer = (
     [resolvedDocuments.map((doc) => doc._internalSys.path).join('.')]
   )
 
-  const notifyEditMode = React.useCallback(
+  const handleMessage = React.useCallback(
     (event: MessageEvent<PostMessage>) => {
+      if (event?.data?.type === 'quick-edit') {
+        cms.dispatch({
+          type: 'set-quick-editing-supported',
+          value: event.data.value,
+        })
+      }
       if (event?.data?.type === 'isEditMode') {
         iframe?.current?.contentWindow?.postMessage({
           type: 'tina:editMode',
         })
       }
-    },
-    []
-  )
-  const handleOpenClose = React.useCallback(
-    (event: MessageEvent<PostMessage>) => {
+      if (event.data.type === 'field:selected') {
+        const [queryId, eventFieldName] = event.data.fieldName.split('---')
+        const result = results.find((res) => res.id === queryId)
+        if (result?.data) {
+          cms.dispatch({
+            type: 'forms:set-active-field-name',
+            value: getFormAndFieldNameFromMetadata(result.data, eventFieldName),
+          })
+        }
+        cms.dispatch({
+          type: 'sidebar:set-display-state',
+          value: 'openOrFull',
+        })
+      }
       if (event.data.type === 'close') {
         const payloadSchema = z.object({ id: z.string() })
         const { id } = payloadSchema.parse(event.data)
         setPayloads((previous) =>
           previous.filter((payload) => payload.id !== id)
         )
+        setResults((previous) => previous.filter((result) => result.id !== id))
         cms.forms.all().map((form) => {
           form.removeQuery(id)
         })
@@ -401,7 +541,7 @@ export const useGraphQLReducer = (
         ])
       }
     },
-    [cms]
+    [cms, JSON.stringify(results)]
   )
 
   React.useEffect(() => {
@@ -415,23 +555,31 @@ export const useGraphQLReducer = (
   React.useEffect(() => {
     return () => {
       setPayloads([])
+      setResults([])
       cms.removeAllForms()
       cms.dispatch({ type: 'form-lists:clear' })
     }
   }, [url])
 
   React.useEffect(() => {
+    iframe.current?.contentWindow?.postMessage({
+      type: 'quickEditEnabled',
+      value: cms.state.quickEditEnabled,
+    })
+  }, [cms.state.quickEditEnabled])
+
+  React.useEffect(() => {
+    cms.dispatch({ type: 'set-edit-mode', value: 'visual' })
     if (iframe) {
-      window.addEventListener('message', handleOpenClose)
-      window.addEventListener('message', notifyEditMode)
+      window.addEventListener('message', handleMessage)
     }
 
     return () => {
-      window.removeEventListener('message', handleOpenClose)
-      window.removeEventListener('message', notifyEditMode)
+      window.removeEventListener('message', handleMessage)
       cms.removeAllForms()
+      cms.dispatch({ type: 'set-edit-mode', value: 'basic' })
     }
-  }, [iframe.current])
+  }, [iframe.current, JSON.stringify(results)])
 }
 
 const onSubmit = async (
@@ -469,7 +617,8 @@ type Path = (string | number)[]
 const resolveDocument = (
   doc: ResolvedDocument,
   template: Template<true>,
-  form: Form
+  form: Form,
+  pathToDocument: string
 ): ResolvedDocument => {
   // @ts-ignore AnyField and TinaField don't mix
   const fields = form.fields as TinaField<true>[]
@@ -480,6 +629,7 @@ const resolveDocument = (
     values: form.values,
     path,
     id,
+    pathToDocument,
   })
   const metadataFields: Record<string, string> = {}
   Object.keys(formValues).forEach((key) => {
@@ -492,7 +642,9 @@ const resolveDocument = (
     sys: doc._internalSys,
     values: form.values,
     _tina_metadata: {
+      prefix: pathToDocument,
       id: doc._internalSys.path,
+      name: '',
       fields: metadataFields,
     },
     _internalSys: doc._internalSys,
@@ -506,12 +658,14 @@ const resolveFormValue = <T extends Record<string, unknown>>({
   values,
   path,
   id,
+  pathToDocument,
 }: // tinaSchema,
 {
   fields: TinaField<true>[]
   values: T
   path: Path
   id: string
+  pathToDocument: string
   // tinaSchema: TinaSchema
 }): T & { __typename?: string } => {
   const accum: Record<string, unknown> = {}
@@ -528,6 +682,7 @@ const resolveFormValue = <T extends Record<string, unknown>>({
       value: v,
       path,
       id,
+      pathToDocument,
     })
   })
   return accum as T & { __typename?: string }
@@ -537,11 +692,13 @@ const resolveFieldValue = ({
   value,
   path,
   id,
+  pathToDocument,
 }: {
   field: TinaField<true>
   value: unknown
   path: Path
   id: string
+  pathToDocument: string
 }) => {
   switch (field.type) {
     case 'object': {
@@ -562,13 +719,16 @@ const resolveFieldValue = ({
                 __typename: NAMER.dataTypeName(template.namespace),
                 _tina_metadata: {
                   id,
+                  name: nextPath.join('.'),
                   fields: metadataFields,
+                  prefix: pathToDocument,
                 },
                 ...resolveFormValue({
                   fields: template.fields,
                   values: item,
                   path: nextPath,
                   id,
+                  pathToDocument,
                 }),
               }
             })
@@ -597,13 +757,16 @@ const resolveFieldValue = ({
               __typename: NAMER.dataTypeName(field.namespace),
               _tina_metadata: {
                 id,
+                name: nextPath.join('.'),
                 fields: metadataFields,
+                prefix: pathToDocument,
               },
               ...resolveFormValue({
                 fields: templateFields,
                 values: item,
-                path,
+                path: nextPath,
                 id,
+                pathToDocument,
               }),
             }
           })
@@ -618,13 +781,16 @@ const resolveFieldValue = ({
           __typename: NAMER.dataTypeName(field.namespace),
           _tina_metadata: {
             id,
+            name: nextPath.join('.'),
             fields: metadataFields,
+            prefix: pathToDocument,
           },
           ...resolveFormValue({
             fields: templateFields,
             values: value as any,
-            path,
+            path: nextPath,
             id,
+            pathToDocument,
           }),
         }
       }
@@ -687,7 +853,7 @@ const expandPayload = async (payload: Payload, cms: TinaCMS) => {
     documentNode,
   })
   const expandedQueryForResolver = G.print(expandedDocumentNodeForResolver)
-  return { ...payload, expandQuery, expandedData, expandedQueryForResolver }
+  return { ...payload, expandedQuery, expandedData, expandedQueryForResolver }
 }
 
 /**

package/src/lib/types.ts

@@ -1,8 +1,11 @@
-export type PostMessage = {
-  type: 'open' | 'close' | 'isEditMode'
-  id: string
-  data: object
-}
+export type PostMessage =
+  | {
+      type: 'open' | 'close' | 'isEditMode'
+      id: string
+      data: object
+    }
+  | { type: 'field:selected'; fieldName: string }
+  | { type: 'quick-edit'; value: boolean }
 
 export type Payload = {
   id: string

package/src/lib/util.ts

@@ -0,0 +1,124 @@
+const charCodeOfDot = '.'.charCodeAt(0)
+const reEscapeChar = /\\(\\)?/g
+const rePropName = RegExp(
+  // Match anything that isn't a dot or bracket.
+  '[^.[\\]]+' +
+    '|' +
+    // Or match property names within brackets.
+    '\\[(?:' +
+    // Match a non-string expression.
+    '([^"\'][^[]*)' +
+    '|' +
+    // Or match strings (supports escaping characters).
+    '(["\'])((?:(?!\\2)[^\\\\]|\\\\.)*?)\\2' +
+    ')\\]' +
+    '|' +
+    // Or match "" as the space between consecutive dots or empty brackets.
+    '(?=(?:\\.|\\[\\])(?:\\.|\\[\\]|$))',
+  'g'
+)
+
+/**
+ * Converts `string` to a property path array.
+ *
+ * @private
+ * @param {string} string The string to convert.
+ * @returns {Array} Returns the property path array.
+ */
+const stringToPath = (string: string) => {
+  const result = []
+  if (string.charCodeAt(0) === charCodeOfDot) {
+    result.push('')
+  }
+  string.replace(rePropName, (match, expression, quote, subString) => {
+    let key = match
+    if (quote) {
+      key = subString.replace(reEscapeChar, '$1')
+    } else if (expression) {
+      key = expression.trim()
+    }
+    result.push(key)
+  })
+  return result
+}
+
+const keysCache: { [key: string]: string[] } = {}
+const keysRegex = /[.[\]]+/
+
+const toPath = (key: string): string[] => {
+  if (key === null || key === undefined || !key.length) {
+    return []
+  }
+  if (typeof key !== 'string') {
+    throw new Error('toPath() expects a string')
+  }
+  if (keysCache[key] == null) {
+    /**
+     * The following patch fixes issue 456, introduced since v4.20.3:
+     *
+     * Before v4.20.3, i.e. in v4.20.2, a `key` like 'choices[]' would map to ['choices']
+     * (e.g. an array of choices used where 'choices[]' is name attribute of an input of type checkbox).
+     *
+     * Since v4.20.3, a `key` like 'choices[]' would map to ['choices', ''] which is wrong and breaks
+     * this kind of inputs e.g. in React.
+     *
+     * v4.20.3 introduced an unwanted breaking change, this patch fixes it, see the issue at the link below.
+     *
+     * @see https://github.com/final-form/final-form/issues/456
+     */
+    if (key.endsWith('[]')) {
+      // v4.20.2 (a `key` like 'choices[]' should map to ['choices'], which is fine).
+      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)
+    }
+  }
+  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
+  for (let i = 0; i < path.length; i++) {
+    const key = path[i]
+    if (
+      current === undefined ||
+      current === null ||
+      typeof current !== 'object' ||
+      (Array.isArray(current) && isNaN(Number(key)))
+    ) {
+      return undefined
+    }
+    const value = current[key]
+    if (value?._tina_metadata) {
+      metadata = value._tina_metadata
+    }
+    current = value
+  }
+  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) {
+        n = value.fields[localFieldName]
+      } else {
+        n = value.name
+      }
+      formId = value.id
+    }
+  }
+  return { formId, fieldName: n }
+}