@tinacms/app 0.0.0-c0f1b7d-20250702023438 → 0.0.0-c19d29e-20251224001156

package/CHANGELOG.md

@@ -1,11 +1,166 @@
 # @tinacms/app
 
-## 0.0.0-c0f1b7d-20250702023438
+## 0.0.0-c19d29e-20251224001156
 
 ### Patch Changes
 
-- Updated dependencies [[`3026a2b`](https://github.com/tinacms/tinacms/commit/3026a2b492113a53c036e43d5d85837cea4a6de3), [`28a94a6`](https://github.com/tinacms/tinacms/commit/28a94a602186f48b528b91236007839e5d02a9de)]:
-  - tinacms@0.0.0-c0f1b7d-20250702023438
+- [#6211](https://github.com/tinacms/tinacms/pull/6211) [`790c860`](https://github.com/tinacms/tinacms/commit/790c860ae85c3bdcb7d3c07321ed4032ebbb7b49) Thanks [@Pat-Stuart](https://github.com/Pat-Stuart)! - ✨ Visual element highlighting between iframe and form
+
+- Updated dependencies [[`790c860`](https://github.com/tinacms/tinacms/commit/790c860ae85c3bdcb7d3c07321ed4032ebbb7b49), [`60814a3`](https://github.com/tinacms/tinacms/commit/60814a3b56f99843211ef144576109857ad6ba86), [`9630795`](https://github.com/tinacms/tinacms/commit/963079526fbdb07fa415ad6508dc39283ee3832a)]:
+  - tinacms@0.0.0-c19d29e-20251224001156
+  - @tinacms/mdx@0.0.0-c19d29e-20251224001156
+
+## 2.3.17
+
+### Patch Changes
+
+- Updated dependencies [[`8335218`](https://github.com/tinacms/tinacms/commit/833521832f91c98ff3cb48535eecb3824cb0f7bd)]:
+  - tinacms@3.1.2
+
+## 2.3.16
+
+### Patch Changes
+
+- Updated dependencies [[`3a12a39`](https://github.com/tinacms/tinacms/commit/3a12a392d5a8eb9bba5a5be65d080f24afa08de3)]:
+  - tinacms@3.1.1
+
+## 2.3.15
+
+### Patch Changes
+
+- Updated dependencies [[`998975c`](https://github.com/tinacms/tinacms/commit/998975cc8e3c71489f3ed6cbf9ca0a5a7619c18b), [`a125472`](https://github.com/tinacms/tinacms/commit/a125472d3278c140cb416dba5cd1478fb5dfe320), [`3097535`](https://github.com/tinacms/tinacms/commit/3097535275e813db907a592ee96bd8481f0eacc5), [`9fb397d`](https://github.com/tinacms/tinacms/commit/9fb397da515468f72b01f5a7cf881187a9c33d6e)]:
+  - tinacms@3.1.0
+  - @tinacms/mdx@2.0.1
+
+## 2.3.14
+
+### Patch Changes
+
+- Updated dependencies [[`5c1e891`](https://github.com/tinacms/tinacms/commit/5c1e89181f595d392ad6cb56ca5fc0b6d9e60a23), [`f717193`](https://github.com/tinacms/tinacms/commit/f717193aa4a1d3205df42d120fd1f6192b5e41e5), [`ac59522`](https://github.com/tinacms/tinacms/commit/ac59522053c71c713057c4c2b6ce610617bce85e)]:
+  - tinacms@3.0.2
+  - @tinacms/mdx@2.0.0
+
+## 2.3.13
+
+### Patch Changes
+
+- Updated dependencies [[`50fa9f4`](https://github.com/tinacms/tinacms/commit/50fa9f4bf932a3dc45b88d245e35917efe8d3423), [`428ec7e`](https://github.com/tinacms/tinacms/commit/428ec7eca20603e2cb666d562fd4cc16dda4cbed), [`6946476`](https://github.com/tinacms/tinacms/commit/69464767d339a5df3c6c530ece94ef80049e534f), [`f99bbbc`](https://github.com/tinacms/tinacms/commit/f99bbbc221eead8d714b3791348d415dd8fcd063)]:
+  - tinacms@3.0.1
+
+## 2.3.12
+
+### Patch Changes
+
+- Updated dependencies [[`2e1535d`](https://github.com/tinacms/tinacms/commit/2e1535dd5495dc390902f2db6ef1f26afb072396), [`ed6025e`](https://github.com/tinacms/tinacms/commit/ed6025ee87ebe051957fc93e987ba8de8b003995), [`3bf79e1`](https://github.com/tinacms/tinacms/commit/3bf79e19c005dca745a8ddd46546190741b322a5), [`bb1ad6a`](https://github.com/tinacms/tinacms/commit/bb1ad6a11d10976074453ed218b178935ec96fd3)]:
+  - @tinacms/mdx@2.0.0
+  - tinacms@3.0.0
+
+## 2.3.11
+
+### Patch Changes
+
+- Updated dependencies [[`a76fdb6`](https://github.com/tinacms/tinacms/commit/a76fdb639b94cfefa169ebbd184f55d62e4a8a76), [`dd2089d`](https://github.com/tinacms/tinacms/commit/dd2089dbde4a7b1a0116cce096f50a97fdca9d81)]:
+  - tinacms@2.10.1
+  - @tinacms/mdx@1.8.3
+
+## 2.3.10
+
+### Patch Changes
+
+- [#5822](https://github.com/tinacms/tinacms/pull/5822) [`4b824be`](https://github.com/tinacms/tinacms/commit/4b824be53572f9231753ebd3b5f14fd778fd73d6) Thanks [@copilot-swe-agent](https://github.com/apps/copilot-swe-agent)! - Migrate from react-beautiful-dnd to dnd-kit to fix deprecation error.
+
+- Updated dependencies [[`f2577b9`](https://github.com/tinacms/tinacms/commit/f2577b911a97ecc1c3f53a98ae8218cc33bc9867), [`3ffa092`](https://github.com/tinacms/tinacms/commit/3ffa0929e4964f17d5ffa05e0d4cbbff5d9ef4d9), [`38920ce`](https://github.com/tinacms/tinacms/commit/38920ce29a9b63c54b04f39537f19beab62d2c86), [`d1bd1a1`](https://github.com/tinacms/tinacms/commit/d1bd1a1312fa910e237ec06608e7c11830c78346), [`67e1a3d`](https://github.com/tinacms/tinacms/commit/67e1a3d4c52e0acdab0a8dc53956e39f2e3075fa), [`9fb1402`](https://github.com/tinacms/tinacms/commit/9fb1402491f52d16e763c875ee550f7d879c83c8), [`3fa1098`](https://github.com/tinacms/tinacms/commit/3fa109849f552406dd0059041afe0bf09edadb25), [`ccab7a5`](https://github.com/tinacms/tinacms/commit/ccab7a5d0fd1f4167e8f72306e9d32e8750ed9bf), [`4b824be`](https://github.com/tinacms/tinacms/commit/4b824be53572f9231753ebd3b5f14fd778fd73d6), [`d9487bf`](https://github.com/tinacms/tinacms/commit/d9487bff276ba20a84b76944c5a7a333666f4984)]:
+  - tinacms@2.10.0
+  - @tinacms/mdx@1.8.2
+
+## 2.3.9
+
+### Patch Changes
+
+- Updated dependencies [[`d900f4e`](https://github.com/tinacms/tinacms/commit/d900f4e6c6f0a86c94bba5f0925bbaa54eeb90db)]:
+  - tinacms@2.9.5
+
+## 2.3.8
+
+### Patch Changes
+
+- Updated dependencies [[`e1b6d05`](https://github.com/tinacms/tinacms/commit/e1b6d05c6b31c5c0928633064a065ddd331667ca), [`4ee0dd9`](https://github.com/tinacms/tinacms/commit/4ee0dd95913392b0da12dd5c9344909e5292e911), [`27e5ca9`](https://github.com/tinacms/tinacms/commit/27e5ca9b18a90f13f92425ebb2628b143d6a81be)]:
+  - tinacms@2.9.4
+
+## 2.3.7
+
+### Patch Changes
+
+- Updated dependencies [[`9e8bc37`](https://github.com/tinacms/tinacms/commit/9e8bc37402c8aa4d408c38e00d4402d596b0d896), [`0f265aa`](https://github.com/tinacms/tinacms/commit/0f265aadf918ae6f5b789e298fc2c406a6df0b16), [`32bd9b2`](https://github.com/tinacms/tinacms/commit/32bd9b21b54462be3e83b2d3e4b4237a48758bb1), [`ce1414c`](https://github.com/tinacms/tinacms/commit/ce1414ce1b82e6755a96c9c12949cd469b43e283)]:
+  - tinacms@2.9.3
+
+## 2.3.6
+
+### Patch Changes
+
+- [#6087](https://github.com/tinacms/tinacms/pull/6087) [`1286e87`](https://github.com/tinacms/tinacms/commit/1286e87323694dc819edc56360613dc654f3d3ca) Thanks [@kulesy](https://github.com/kulesy)! - feat: Enhance branch creation modal with improved UI/UX and dropdown button component
+
+- [#6098](https://github.com/tinacms/tinacms/pull/6098) [`a2d983e`](https://github.com/tinacms/tinacms/commit/a2d983ed886f66db2c133e902eacaa8d07e88bdb) Thanks [@Pat-Stuart](https://github.com/Pat-Stuart)! - Change from blue accent coloring to orange
+
+- Updated dependencies [[`1286e87`](https://github.com/tinacms/tinacms/commit/1286e87323694dc819edc56360613dc654f3d3ca), [`4416a28`](https://github.com/tinacms/tinacms/commit/4416a283ac1cfea5e9c4890cd71f2edf3b704344), [`6cba118`](https://github.com/tinacms/tinacms/commit/6cba118c90f7c7ab6356c0ef83fca18526e47f8d), [`572fb28`](https://github.com/tinacms/tinacms/commit/572fb28236b56db4ede5fe53b177b80323ae7284), [`f224124`](https://github.com/tinacms/tinacms/commit/f224124220811fb44749122d46eb7100af89ee77), [`a2d983e`](https://github.com/tinacms/tinacms/commit/a2d983ed886f66db2c133e902eacaa8d07e88bdb), [`bc35474`](https://github.com/tinacms/tinacms/commit/bc354740d0cb359c372ba287974e7e9db3c5119c)]:
+  - tinacms@2.9.2
+
+## 2.3.5
+
+### Patch Changes
+
+- Updated dependencies [[`003e348`](https://github.com/tinacms/tinacms/commit/003e348472ddc08eee63d78190038097542b6311), [`5527e8a`](https://github.com/tinacms/tinacms/commit/5527e8ab5821c8613fcfd1b0b8bc6d93291a6d03), [`5ffd60e`](https://github.com/tinacms/tinacms/commit/5ffd60e7b07b19cde6fab36a911503276c83715f), [`b23aa0c`](https://github.com/tinacms/tinacms/commit/b23aa0c5defc51b8f9fe00a59dd87e1d2f8b9f0b), [`5d13c0d`](https://github.com/tinacms/tinacms/commit/5d13c0d023373692233c8be2127ae6e3d7d68b47)]:
+  - tinacms@2.9.1
+
+## 2.3.4
+
+### Patch Changes
+
+- Updated dependencies [[`0bbe080`](https://github.com/tinacms/tinacms/commit/0bbe0804e334238850a4f8f33be5cd123ff68ab3), [`98fbc94`](https://github.com/tinacms/tinacms/commit/98fbc941a07fbc52edafaeb43b49b5ea30ea4172), [`ced9076`](https://github.com/tinacms/tinacms/commit/ced9076d25d7177bd8d9ae3c6133d0560366511c)]:
+  - tinacms@2.9.0
+
+## 2.3.3
+
+### Patch Changes
+
+- Updated dependencies [[`ea917dd`](https://github.com/tinacms/tinacms/commit/ea917dd2840c955d462b66b58009d2a16da39377), [`b012b6c`](https://github.com/tinacms/tinacms/commit/b012b6c7fae2674c613fd4c54e1819a86c6d2c3e), [`39e5b05`](https://github.com/tinacms/tinacms/commit/39e5b0562af7bca1e2923fc94b7c8119e12a0133), [`55e018b`](https://github.com/tinacms/tinacms/commit/55e018b9826a540005bbadf8fd51e9bac456d531)]:
+  - tinacms@2.8.3
+
+## 2.3.2
+
+### Patch Changes
+
+- Updated dependencies [[`eaa6ed5`](https://github.com/tinacms/tinacms/commit/eaa6ed551c76349c5849cd1e19a8066ecbbe205c), [`60a15d5`](https://github.com/tinacms/tinacms/commit/60a15d533b85a0c3f9f483f6f0f0b6824616284b), [`2fb1c4e`](https://github.com/tinacms/tinacms/commit/2fb1c4e79d1cae5ab29c3f93b0867214e193f59c)]:
+  - tinacms@2.8.2
+  - @tinacms/mdx@1.8.1
+
+## 2.3.1
+
+### Patch Changes
+
+- Updated dependencies [[`41359ed`](https://github.com/tinacms/tinacms/commit/41359edaf08def7a5e26969ec114155038c09752), [`b20a2c4`](https://github.com/tinacms/tinacms/commit/b20a2c4fd64fa2d06711850db63fb317302ee361), [`41359ed`](https://github.com/tinacms/tinacms/commit/41359edaf08def7a5e26969ec114155038c09752)]:
+  - tinacms@2.8.1
+
+## 2.3.0
+
+### Minor Changes
+
+- [#5744](https://github.com/tinacms/tinacms/pull/5744) [`98a61e2`](https://github.com/tinacms/tinacms/commit/98a61e2d263978a7096cc23ac7e94aa0039981be) Thanks [@Ben0189](https://github.com/Ben0189)! - Upgrade Plate editor to v48 beta, integrating latest features and improvements.
+
+### Patch Changes
+
+- Updated dependencies [[`98a61e2`](https://github.com/tinacms/tinacms/commit/98a61e2d263978a7096cc23ac7e94aa0039981be)]:
+  - @tinacms/mdx@1.8.0
+  - tinacms@2.8.0
+
+## 2.2.10
+
+### Patch Changes
+
+- [#5833](https://github.com/tinacms/tinacms/pull/5833) [`5269d65`](https://github.com/tinacms/tinacms/commit/5269d6578d361c55326f39375eaa175707342d51) Thanks [@JackDevAU](https://github.com/JackDevAU)! - 🐛 FIX - Visual Editor Webpack HMR loading issue
+
+- Updated dependencies [[`5269d65`](https://github.com/tinacms/tinacms/commit/5269d6578d361c55326f39375eaa175707342d51), [`3026a2b`](https://github.com/tinacms/tinacms/commit/3026a2b492113a53c036e43d5d85837cea4a6de3), [`28a94a6`](https://github.com/tinacms/tinacms/commit/28a94a602186f48b528b91236007839e5d02a9de)]:
+  - tinacms@2.7.10
 
 ## 2.2.9
 

package/index.html

@@ -51,7 +51,7 @@
             the assets for this page.\
           </p>\
           <p>\
-            Please visit <a href="https://tina.io/docs/tina-cloud/faq/#how-do-i-resolve-failed-loading-tinacms-assets-error">this doc</a> for help.\
+            Please visit <a href="https://tina.io/docs/r/FAQ/#13-how-do-i-resolve-failed-loading-tinacms-assets-error">this doc</a> for help.\
           </p>\
         </div>'
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tinacms/app",
-  "version": "0.0.0-c0f1b7d-20250702023438",
+  "version": "0.0.0-c19d29e-20251224001156",
   "main": "src/main.tsx",
   "license": "Apache-2.0",
   "devDependencies": {
@@ -21,10 +21,16 @@
     "graphiql": "3.0.0-alpha.1",
     "graphql": "15.8.0",
     "monaco-editor": "0.31.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-router-dom": "6.3.0",
     "typescript": "^5.7.3",
     "zod": "^3.24.2",
-    "@tinacms/mdx": "1.7.0",
-    "tinacms": "0.0.0-c0f1b7d-20250702023438"
+    "@tinacms/mdx": "0.0.0-c19d29e-20251224001156",
+    "tinacms": "0.0.0-c19d29e-20251224001156"
+  },
+  "repository": {
+    "url": "https://github.com/tinacms/tinacms.git",
+    "directory": "packages/@tinacms/app"
   }
 }

package/src/Playground.tsx

@@ -74,9 +74,7 @@ const Playground = () => {
             {noAutoQueries
               ? 'No auto-generated queries found, the Tina config is likely set to client.skip = true'
               : "Tina's auto-generated queries can be found here as well as any queries you may have defined yourself."}{' '}
-            <a href='https://tina.io/docs/data-fetching/custom-queries/'>
-              Learn more here
-            </a>
+            <a href='https://tina.io/docs/r/custom-queries/'>Learn more here</a>
           </div>
           <nav className='space-y-1' aria-label='Sidebar'>
             <ul>

package/src/fields/rich-text/monaco/index.tsx

@@ -1,9 +1,4 @@
-/**
-
-
-
-*/
-
+import React from 'react';
 import MonacoEditor, { useMonaco, loader } from '@monaco-editor/react';
 /**
  * MDX is built directly to the app because of how we load dependencies.
@@ -13,7 +8,6 @@ import MonacoEditor, { useMonaco, loader } from '@monaco-editor/react';
  */
 import { parseMDX, serializeMDX } from '@tinacms/mdx';
 import type * as monaco from 'monaco-editor';
-import React from 'react';
 import { RichTextType } from 'tinacms';
 import {
   ErrorMessage,
@@ -34,11 +28,6 @@ export const uuid = () => {
 
 type Monaco = typeof monaco;
 
-// 0.33.0 has a bug https://github.com/microsoft/monaco-editor/issues/2947
-loader.config({
-  paths: { vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.31.1/min/vs' },
-});
-
 /**
  * Since monaco lazy-loads we may have a delay from when the block is inserted
  * to when monaco has intantiated, keep trying to focus on it.
@@ -149,13 +138,17 @@ export const RawEditor = (props: RichTextType) => {
     monacoEditor: monaco.editor.IStandaloneCodeEditor,
     monaco: Monaco
   ) {
-    monacoEditorRef.current = monacoEditor;
-    monacoEditor.onDidContentSizeChange(() => {
-      // FIXME: if the window is too tall the performance degrades, come up with a nice
-      // balance between the two
-      setHeight(Math.min(Math.max(100, monacoEditor.getContentHeight()), 1000));
-      monacoEditor.layout();
-    });
+    if (monacoEditor) {
+      monacoEditorRef.current = monacoEditor;
+      monacoEditor.onDidContentSizeChange(() => {
+        // FIXME: if the window is too tall the performance degrades, come up with a nice
+        // balance between the two
+        setHeight(
+          Math.min(Math.max(100, monacoEditor.getContentHeight()), 1000)
+        );
+        monacoEditor.layout();
+      });
+    }
   }
 
   return (
@@ -168,6 +161,9 @@ export const RawEditor = (props: RichTextType) => {
       </div>
       <div style={{ height: `${height}px` }}>
         <MonacoEditor
+          beforeMount={() => {}}
+          height='100%'
+          width='100%'
           path={id}
           onMount={handleEditorDidMount}
           // Setting a custom theme is kind of buggy because it doesn't get defined until monaco has mounted.

package/src/index.css

@@ -13,6 +13,10 @@
   fill: currentColor;
 }
 
+.font-libre-baskerville {
+  font-family: "Libre Baskerville", serif;
+}
+
 body {
   margin: 0;
   padding: 0;
@@ -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/graphql-reducer.ts

@@ -526,9 +526,17 @@ export const useGraphQLReducer = (
         const [queryId, eventFieldName] = event.data.fieldName.split('---');
         const result = results.find((res) => res.id === queryId);
         if (result?.data) {
+          const { formId, fieldName } = getFormAndFieldNameFromMetadata(
+            result.data,
+            eventFieldName
+          );
           cms.dispatch({
             type: 'forms:set-active-field-name',
-            value: getFormAndFieldNameFromMetadata(result.data, eventFieldName),
+            value: { formId: formId, fieldName: fieldName },
+          });
+          cms.events.dispatch({
+            ...event.data,
+            type: 'field:focus',
           });
         }
         cms.dispatch({
@@ -536,6 +544,30 @@ export const useGraphQLReducer = (
           value: 'openOrFull',
         });
       }
+      if (event.data.type === 'field:hovered') {
+        if (event.data.fieldName) {
+          const [queryId, eventFieldName] = event.data.fieldName.split('---');
+          const result = results.find((res) => res.id === queryId);
+          if (result?.data) {
+            const fieldData = getFormAndFieldNameFromMetadata(
+              result.data,
+              eventFieldName
+            );
+            cms.dispatch({
+              type: 'forms:set-hovered-field-name',
+              value: fieldData,
+            });
+          }
+        } else {
+          // Clear hover state when fieldName is null
+          cms.forms.all().forEach((form) => {
+            cms.dispatch({
+              type: 'forms:set-hovered-field-name',
+              value: { formId: form.id, fieldName: null },
+            });
+          });
+        }
+      }
       if (event.data.type === 'close') {
         const payloadSchema = z.object({ id: z.string() });
         const { id } = payloadSchema.parse(event.data);
@@ -562,12 +594,14 @@ export const useGraphQLReducer = (
           payload,
         ]);
       }
-      if (event.data.type === 'url-changed') {
-        cms.dispatch({
-          type: 'sidebar:set-loading-state',
-          value: true,
-        });
-      }
+      // TODO: This is causing a webpack HMR issue - look into refactoring this logic
+      // if (event.data.type === 'url-changed') {
+      //   console.log('[EVENT_TRIGGERED] url-changed: ', event);
+      //   cms.dispatch({
+      //     type: 'sidebar:set-loading-state',
+      //     value: true,
+      //   });
+      // }
     },
     [cms, JSON.stringify(results)]
   );
@@ -596,6 +630,33 @@ export const useGraphQLReducer = (
     });
   }, [cms.state.sidebarDisplayState]);
 
+  // Compute the active field name to send to iframe
+  const activeFieldName = React.useMemo(() => {
+    const activeForm = cms.state.forms.find(
+      (form: any) => form.tinaForm.id === cms.state.activeFormId
+    );
+    if (!activeForm) {
+      return null;
+    }
+    const fieldName = activeForm.activeFieldName;
+    if (fieldName === null) {
+      return null;
+    }
+    const queries = activeForm.tinaForm.queries;
+    if (queries && queries.length > 0) {
+      const queryId = queries[queries.length - 1];
+      return `${queryId}---${fieldName}`;
+    }
+    return null;
+  }, [cms.state.forms, cms.state.activeFormId]);
+
+  React.useEffect(() => {
+    iframe.current?.contentWindow?.postMessage({
+      type: 'field:set-focused',
+      fieldName: activeFieldName,
+    });
+  }, [activeFieldName, iframe]);
+
   React.useEffect(() => {
     cms.dispatch({ type: 'set-edit-mode', value: 'visual' });
     if (iframe) {

package/src/lib/types.ts

@@ -5,6 +5,7 @@ export type PostMessage =
       data: object;
     }
   | { type: 'field:selected'; fieldName: string }
+  | { type: 'field:hovered'; fieldName: string | null }
   | { type: 'quick-edit'; value: boolean }
   | { type: 'user-select-form'; formId: string }
   | { type: 'url-changed' };