@tinacms/app 0.0.0-67b5c0b-20250414080731 → 0.0.0-67e1a3d-20251124055417

package/CHANGELOG.md

@@ -1,13 +1,144 @@
 # @tinacms/app
 
-## 0.0.0-67b5c0b-20250414080731
+## 0.0.0-67e1a3d-20251124055417
 
 ### Patch Changes
 
-- [#5623](https://github.com/tinacms/tinacms/pull/5623) [`613fbf0`](https://github.com/tinacms/tinacms/commit/613fbf04bd3ebcc0dbfdfadecc07f5e1068408e4) Thanks [@JackDevAU](https://github.com/JackDevAU)! - ⚠️ TESTING
+- [#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 [[`613fbf0`](https://github.com/tinacms/tinacms/commit/613fbf04bd3ebcc0dbfdfadecc07f5e1068408e4)]:
-  - tinacms@0.0.0-67b5c0b-20250414080731
+- 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@0.0.0-67e1a3d-20251124055417
+  - @tinacms/mdx@0.0.0-67e1a3d-20251124055417
+
+## 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
+
+### Patch Changes
+
+- [#5741](https://github.com/tinacms/tinacms/pull/5741) [`0e9de37`](https://github.com/tinacms/tinacms/commit/0e9de379dab2970206b9b60eb014808662f67287) Thanks [@wicksipedia](https://github.com/wicksipedia)! - CMS admin UI - Refactor Sidebar and Branch Button Components
+  Forms header - Adds breadcrumb navigation
+
+- [#5784](https://github.com/tinacms/tinacms/pull/5784) [`b25c5f0`](https://github.com/tinacms/tinacms/commit/b25c5f0b0e1d3f37870b780230b41dbc56bef1ab) Thanks [@JackDevAU](https://github.com/JackDevAU)! - - Fixed padding issues in FormLists
+
+  - Fixed Visual Editing's "Edit" button (Reference Fields)
+
+- [#5789](https://github.com/tinacms/tinacms/pull/5789) [`5040a6a`](https://github.com/tinacms/tinacms/commit/5040a6aa24e62166d942c47b61a3f18585caded6) Thanks [@JackDevAU](https://github.com/JackDevAU)! - ✨ Adds click to focus for nested objects
+
+- Updated dependencies [[`2a3ed6c`](https://github.com/tinacms/tinacms/commit/2a3ed6c3ec3233fd90fd94f3dd3d0243aaad079a), [`bc47f93`](https://github.com/tinacms/tinacms/commit/bc47f938431c400714808613f633b05659a87be1), [`0e9de37`](https://github.com/tinacms/tinacms/commit/0e9de379dab2970206b9b60eb014808662f67287), [`468f0ee`](https://github.com/tinacms/tinacms/commit/468f0eefc0a15a9a9a23737d29ea9a5cb5c6aef6), [`e27c017`](https://github.com/tinacms/tinacms/commit/e27c0172005797af93b908152d51b2966c0cf059), [`b25c5f0`](https://github.com/tinacms/tinacms/commit/b25c5f0b0e1d3f37870b780230b41dbc56bef1ab), [`5040a6a`](https://github.com/tinacms/tinacms/commit/5040a6aa24e62166d942c47b61a3f18585caded6), [`dbef36f`](https://github.com/tinacms/tinacms/commit/dbef36f594b949024d5525184b6a9e1b9085b759), [`3ba6d78`](https://github.com/tinacms/tinacms/commit/3ba6d78f35f817d55bfc3d12b750e54b7e0d11f2)]:
+  - tinacms@2.7.9
+  - @tinacms/mdx@1.7.0
+
+## 2.2.8
+
+### Patch Changes
+
+- Updated dependencies [[`5e36123`](https://github.com/tinacms/tinacms/commit/5e361239a372e21dda624d17b4ff274bab23ce90), [`856e07a`](https://github.com/tinacms/tinacms/commit/856e07a0b8d742ee78d5eba565623cf081a61534), [`4d9c8ab`](https://github.com/tinacms/tinacms/commit/4d9c8abf6badd1bcc833bda432ab22dace4925ae), [`7346dc9`](https://github.com/tinacms/tinacms/commit/7346dc996fd81ecb395b62f373976512e8224c21)]:
+  - tinacms@2.7.8
+  - @tinacms/mdx@1.6.3
+
+## 2.2.7
+
+### Patch Changes
+
+- [#5607](https://github.com/tinacms/tinacms/pull/5607) [`1965236`](https://github.com/tinacms/tinacms/commit/19652363784e48b065ec1924a9cd9611c8e79cae) Thanks [@jeffsee55](https://github.com/jeffsee55)! - Specify react and react-dom as peer deps
+
+- Updated dependencies [[`1965236`](https://github.com/tinacms/tinacms/commit/19652363784e48b065ec1924a9cd9611c8e79cae)]:
+  - tinacms@2.7.7
+
+## 2.2.6
+
+### Patch Changes
+
+- Updated dependencies [[`65cee5d`](https://github.com/tinacms/tinacms/commit/65cee5d6ae16c7320a4a14f0d9a82dc5f9103e34)]:
+  - tinacms@2.7.6
 
 ## 2.2.5
 

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-67b5c0b-20250414080731",
+  "version": "0.0.0-67e1a3d-20251124055417",
   "main": "src/main.tsx",
   "license": "Apache-2.0",
   "devDependencies": {
@@ -21,10 +21,12 @@
     "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.6.2",
-    "tinacms": "0.0.0-67b5c0b-20250414080731"
+    "@tinacms/mdx": "0.0.0-67e1a3d-20251124055417",
+    "tinacms": "0.0.0-67e1a3d-20251124055417"
   }
 }

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>
@@ -100,7 +98,7 @@ const Playground = () => {
                         false
                           ? 'bg-gray-100 text-gray-900'
                           : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900',
-                        'flex items-center rounded-md px-3 py-2 text-sm font-medium w-full text-left'
+                        'flex items-center rounded px-3 py-2 text-sm font-medium w-full text-left'
                       )}
                       onClick={async () => {
                         if (typeof value === 'function') {

package/src/fields/rich-text/monaco/error-message.tsx

@@ -1,16 +1,16 @@
-/**
-
-
-
-*/
-import React from 'react';
-import { XCircleIcon } from '@heroicons/react/solid';
 import {
   Popover,
   PopoverButton,
   PopoverPanel,
   Transition,
 } from '@headlessui/react';
+import { XCircleIcon } from '@heroicons/react/solid';
+/**
+
+
+
+*/
+import React from 'react';
 import { Fragment } from 'react';
 // import { InvalidMarkdownElement } from '@tinacms/mdx/src/parse/plate'
 export type EmptyTextElement = { type: 'text'; text: '' };
@@ -93,7 +93,7 @@ export function ErrorMessage({ error }: { error: InvalidMarkdownElement }) {
           >
             <PopoverPanel className='absolute top-8 w-[300px] -right-3 z-10 mt-3 px-4 sm:px-0'>
               <div className='overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5'>
-                <div className='rounded-md bg-red-50 p-4 overflow-scroll'>
+                <div className='rounded bg-red-50 p-4 overflow-scroll'>
                   <div className='flex'>
                     <div className='flex-shrink-0'>
                       <XCircleIcon

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

@@ -1,7 +1,13 @@
-import MonacoEditor, { Monaco } from '@monaco-editor/react';
-import { parseMDX, stringifyMDX } from '@tinacms/mdx';
-import type * as monaco from 'monaco-editor';
 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.
+ * Since we drop the package.json in to the end users folder, we can't
+ * easily install the current version of the mdx package in all scenarios
+ * (when we're working in the monorepo, or working with a tagged npm version)
+ */
+import { parseMDX, serializeMDX } from '@tinacms/mdx';
+import type * as monaco from 'monaco-editor';
 import { RichTextType } from 'tinacms';
 import {
   ErrorMessage,
@@ -9,9 +15,9 @@ import {
   buildError,
 } from './error-message';
 import { useDebounce } from './use-debounce';
-import useCustomMonaco from './use-monaco';
 
 export const uuid = () => {
+  // @ts-ignore
   return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
     (
       c ^
@@ -20,143 +26,128 @@ export const uuid = () => {
   );
 };
 
+type Monaco = typeof monaco;
+
 /**
  * Since monaco lazy-loads we may have a delay from when the block is inserted
- * to when monaco has instantiated.
+ * to when monaco has intantiated, keep trying to focus on it.
+ *
+ * Will try for 3 seconds before moving on
  */
-const retryFocus = (editor) => {
-  if (editor && editor.focus) {
-    try {
-      editor.focus();
-    } catch (err) {
-      console.warn('Error focusing editor:', err);
+let retryCount = 0;
+const retryFocus = (ref) => {
+  if (ref.current) {
+    ref.current.focus();
+  } else {
+    if (retryCount < 30) {
+      setTimeout(() => {
+        retryCount = retryCount + 1;
+        retryFocus(ref);
+      }, 100);
     }
   }
 };
 
 export const RawEditor = (props: RichTextType) => {
-  const monacoInstance = useCustomMonaco();
-  const editorRef = React.useRef<monaco.editor.IStandaloneCodeEditor | null>(
-    null
-  );
+  const monaco = useMonaco() as Monaco;
+  const monacoEditorRef =
+    React.useRef<monaco.editor.IStandaloneCodeEditor>(null);
   const [height, setHeight] = React.useState(100);
   const id = React.useMemo(() => uuid(), []);
   const field = props.field;
-
-  // Get initial value safely
   const inputValue = React.useMemo(() => {
-    try {
-      // @ts-ignore no access to the rich-text type from this package
-      const res = stringifyMDX(props.input.value, field, (value) => value);
-      return typeof props.input.value === 'string' ? props.input.value : res;
-    } catch (err) {
-      console.error('Error stringifying MDX:', err);
-      return '';
-    }
-  }, []); // Empty dependency array to only run once
-
+    // @ts-ignore no access to the rich-text type from this package
+    const res = serializeMDX(props.input.value, field, (value) => value);
+    return typeof props.input.value === 'string' ? props.input.value : res;
+  }, []);
   const [value, setValue] = React.useState(inputValue);
   const [error, setError] = React.useState<InvalidMarkdownElement>(null);
 
   const debouncedValue = useDebounce(value, 500);
 
-  // Update parsed MDX when value changes
   React.useEffect(() => {
-    let isMounted = true;
-
-    try {
-      // @ts-ignore no access to the rich-text type from this package
-      const parsedValue = parseMDX(debouncedValue, field, (value) => value);
-
-      if (!isMounted) return;
-
-      if (
-        parsedValue.children[0] &&
-        parsedValue.children[0].type === 'invalid_markdown'
-      ) {
-        setError(parsedValue.children[0]);
-      } else {
-        setError(null);
-        props.input.onChange(parsedValue);
-      }
-    } catch (err) {
-      console.error('Error parsing MDX:', err);
+    // @ts-ignore no access to the rich-text type from this package
+    const parsedValue = parseMDX(value, field, (value) => value);
+    if (
+      parsedValue.children[0] &&
+      parsedValue.children[0].type === 'invalid_markdown'
+    ) {
+      const invalidMarkdown = parsedValue.children[0];
+      setError(invalidMarkdown);
+    } else {
+      setError(null);
     }
+    props.input.onChange(parsedValue);
+  }, [JSON.stringify(debouncedValue)]);
 
-    return () => {
-      isMounted = false;
-    };
-  }, [debouncedValue, field]); // Only dependency should be the debounced value and field
-
-  // Handle error markers in editor
   React.useEffect(() => {
-    if (!monacoInstance || !editorRef.current) return;
-
-    try {
-      const model = editorRef.current.getModel();
-      if (!model) return;
-
+    if (monacoEditorRef.current) {
       if (error) {
         const errorMessage = buildError(error);
-
-        // Make sure all position properties are numbers (not undefined)
-        const markerData = {
-          message: errorMessage.message,
-          severity: monacoInstance.MarkerSeverity?.Error || 8,
-          startLineNumber: errorMessage.position?.startLineNumber || 1,
-          endLineNumber: errorMessage.position?.endLineNumber || 1,
-          startColumn: errorMessage.position?.startColumn || 1,
-          endColumn: errorMessage.position?.endColumn || 1,
-        };
-
-        monacoInstance.editor.setModelMarkers(model, id, [markerData]);
+        monaco.editor.setModelMarkers(monacoEditorRef.current.getModel(), id, [
+          {
+            ...errorMessage.position,
+            message: errorMessage.message,
+            severity: 8,
+          },
+        ]);
       } else {
-        monacoInstance.editor.setModelMarkers(model, id, []);
+        monaco.editor.setModelMarkers(
+          monacoEditorRef.current.getModel(),
+          id,
+          []
+        );
       }
-    } catch (err) {
-      console.error('Error setting model markers:', err);
     }
-  }, [error, monacoInstance, id]);
+  }, [JSON.stringify(error), monacoEditorRef.current]);
 
-  // Configure TypeScript settings once when Monaco loads
   React.useEffect(() => {
-    if (!monacoInstance) return;
-
-    try {
-      monacoInstance.languages.typescript.typescriptDefaults.setEagerModelSync(
-        true
-      );
-      monacoInstance.languages.typescript.typescriptDefaults.setDiagnosticsOptions(
-        {
-          noSemanticValidation: true,
-          noSyntaxValidation: true,
-        }
-      );
-    } catch (err) {
-      console.error('Error configuring Monaco TypeScript settings:', err);
+    if (monaco) {
+      monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true);
+      monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+        // disable errors
+        noSemanticValidation: true,
+        noSyntaxValidation: true,
+      });
+      // TODO: autocomplete suggestions
+      // monaco.languages.registerCompletionItemProvider('markdown', {
+      //   provideCompletionItems: function (model, position) {
+      //     const word = model.getWordUntilPosition(position)
+      //     const range = {
+      //       startLineNumber: position.lineNumber,
+      //       endLineNumber: position.lineNumber,
+      //       startColumn: word.startColumn,
+      //       endColumn: word.endColumn,
+      //     }
+      //     return {
+      //       suggestions: [
+      //         {
+      //           label: '<DateTime />',
+      //           insertText: '<DateTime format="iso" />',
+      //           kind: 0,
+      //           range,
+      //         },
+      //       ],
+      //     }
+      //   },
+      // })
     }
-  }, [monacoInstance]);
+  }, [monaco]);
 
   function handleEditorDidMount(
-    editor: monaco.editor.IStandaloneCodeEditor,
+    monacoEditor: monaco.editor.IStandaloneCodeEditor,
     monaco: Monaco
   ) {
-    if (!editor) return;
-
-    try {
-      editorRef.current = editor;
-
-      // Focus the editor once when mounted
-      setTimeout(() => editor.focus(), 100);
-
-      // Set up content size listener
-      editor.onDidContentSizeChange(() => {
-        const contentHeight = editor.getContentHeight();
-        setHeight(Math.min(Math.max(100, contentHeight), 1000));
-        editor.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();
       });
-    } catch (err) {
-      console.error('Error in editor mount handler:', err);
     }
   }
 
@@ -170,8 +161,14 @@ 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.
+          // So we end up with the default (light) theme in some scenarios. Seems like a race condition.
+          // theme="vs-dark"
           options={{
             scrollBeyondLastLine: false,
             tabSize: 2,
@@ -189,19 +186,23 @@ export const RawEditor = (props: RichTextType) => {
             lineNumbersMinChars: 2,
             formatOnType: true,
             fixedOverflowWidgets: true,
+            // Takes too much horizontal space for iframe
             folding: false,
             renderLineHighlight: 'none',
             scrollbar: {
               verticalScrollbarSize: 4,
               horizontalScrollbarSize: 4,
+              // https://github.com/microsoft/monaco-editor/issues/2007#issuecomment-644425664
               alwaysConsumeMouseWheel: false,
             },
           }}
-          language='markdown'
+          language={'markdown'}
           value={value}
-          onChange={(newValue) => {
-            if (newValue !== undefined) {
-              setValue(newValue);
+          onChange={(value) => {
+            try {
+              setValue(value);
+            } catch (e) {
+              console.log('error', e);
             }
           }}
         />
@@ -214,10 +215,8 @@ const Button = (props) => {
   return (
     <button
       className={`${
-        props.align === 'left'
-          ? 'rounded-l-md border-r-0'
-          : 'rounded-r-md border-l-0'
-      } flex justify-center w-full shadow rounded-md bg-white cursor-pointer relative inline-flex items-center px-2 py-2 border border-gray-200 hover:text-white text-sm font-medium transition-all ease-out duration-150 hover:bg-blue-500 focus:z-10 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500`}
+        props.align === 'left' ? 'rounded-l border-r-0' : 'rounded-r border-l-0'
+      } flex justify-center w-full shadow rounded bg-white cursor-pointer relative inline-flex items-center px-2 py-2 border border-gray-200 hover:text-white text-sm font-medium transition-all ease-out duration-150 hover:bg-blue-500 focus:z-10 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500`}
       type='button'
       onClick={props.onClick}
     >

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/expand-query.ts

@@ -103,12 +103,11 @@ const addMetadataField = (
         kind: 'SelectionSet',
         selections: [],
       }),
-      selections:
-        [
-          ...(node.selectionSet?.selections || []),
-          METADATA_FIELD,
-          CONTENT_SOURCE_FIELD,
-        ] || [],
+      selections: [
+        ...(node.selectionSet?.selections || []),
+        METADATA_FIELD,
+        CONTENT_SOURCE_FIELD,
+      ],
     },
   };
 };
@@ -127,8 +126,7 @@ const addMetaFieldsToQuery = (
           kind: 'SelectionSet',
           selections: [],
         }),
-        selections:
-          [...(node.selectionSet?.selections || []), ...metaFields] || [],
+        selections: [...(node.selectionSet?.selections || []), ...metaFields],
       },
     };
   };
@@ -242,6 +240,7 @@ export const isNodeType = (type: G.GraphQLOutputType) => {
       return true;
     }
   }
+  return false;
 };
 
 export const isConnectionType = (type: G.GraphQLOutputType) => {
@@ -270,4 +269,5 @@ export const isConnectionType = (type: G.GraphQLOutputType) => {
       return true;
     }
   }
+  return false;
 };

package/src/lib/graphql-reducer.ts

@@ -45,7 +45,7 @@ const sysSchema = z.object({
   collection: z.object({
     name: z.string(),
     slug: z.string(),
-    label: z.string(),
+    label: z.string().optional().nullable(),
     path: z.string(),
     format: z.string().optional().nullable(),
     matches: z.string().optional().nullable(),
@@ -305,6 +305,7 @@ export const useGraphQLReducer = (
               prefix: '',
             };
           }
+
           if (isConnectionType(info.returnType)) {
             const name = G.getNamedType(info.returnType).name;
             const connectionCollection = tinaSchema
@@ -339,6 +340,7 @@ export const useGraphQLReducer = (
               const maybeResolvedDocument = resolvedDocuments.find(
                 (doc) => doc._internalSys.path === value
               );
+
               // If we already have this document, use it.
               if (maybeResolvedDocument) {
                 resolvedDocument = maybeResolvedDocument;
@@ -349,6 +351,7 @@ export const useGraphQLReducer = (
                 // here and just grab it from the response
                 const maybeResolvedDocument =
                   documentSchema.parse(valueFromSetup);
+
                 if (maybeResolvedDocument._internalSys.path === value) {
                   resolvedDocument = maybeResolvedDocument;
                 } else {
@@ -559,12 +562,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)]
   );

package/src/lib/util.ts

@@ -108,27 +108,22 @@ 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/fields/rich-text/monaco/use-monaco.tsx

@@ -1,53 +0,0 @@
-import { loader } from '@monaco-editor/react';
-import * as monaco from 'monaco-editor';
-// hooks/useCustomMonaco.ts
-import { useEffect, useRef, useState } from 'react';
-
-export function useCustomMonaco() {
-  const [monacoInstance, setMonacoInstance] = useState<typeof monaco | null>(
-    null
-  );
-  const mountedRef = useRef(true);
-  const loaderRef = useRef<any>(null);
-
-  useEffect(() => {
-    const instance = loader.__getMonacoInstance();
-
-    if (instance) {
-      setMonacoInstance(instance);
-      return;
-    }
-
-    if (!loaderRef.current) {
-      loader.config({
-        'vs/nls': { availableLanguages: {} },
-      });
-
-      try {
-        loaderRef.current = loader.init();
-
-        loaderRef.current
-          .then((monacoApi: typeof monaco) => {
-            if (mountedRef.current) {
-              setMonacoInstance(monacoApi);
-            }
-          })
-          .catch((error: any) => {
-            if (mountedRef.current && error.type !== 'cancelation') {
-              console.error('Monaco initialization error:', error);
-            }
-          });
-      } catch (err) {
-        console.error('Failed to initialize Monaco:', err);
-      }
-    }
-
-    return () => {
-      mountedRef.current = false;
-    };
-  }, []);
-
-  return monacoInstance;
-}
-
-export default useCustomMonaco;