@tinacms/app 0.0.0-67b5c0b-20250414080731 → 0.0.0-6a83617-20250426154716

package/CHANGELOG.md

@@ -1,13 +1,11 @@
 # @tinacms/app
 
-## 0.0.0-67b5c0b-20250414080731
+## 0.0.0-6a83617-20250426154716
 
 ### 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
-
-- Updated dependencies [[`613fbf0`](https://github.com/tinacms/tinacms/commit/613fbf04bd3ebcc0dbfdfadecc07f5e1068408e4)]:
-  - tinacms@0.0.0-67b5c0b-20250414080731
+- Updated dependencies []:
+  - tinacms@0.0.0-6a83617-20250426154716
 
 ## 2.2.5
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tinacms/app",
-  "version": "0.0.0-67b5c0b-20250414080731",
+  "version": "0.0.0-6a83617-20250426154716",
   "main": "src/main.tsx",
   "license": "Apache-2.0",
   "devDependencies": {
@@ -8,23 +8,21 @@
     "@types/react-dom": "^18.3.5",
     "typescript": "^5.7.3"
   },
-  "peerDependencies": {
-    "react": ">=18.3.1 <20.0.0",
-    "react-dom": ">=18.3.1 <20.0.0"
-  },
   "dependencies": {
     "@graphiql/toolkit": "0.8.4",
     "@headlessui/react": "2.1.8",
     "@heroicons/react": "^1.0.6",
-    "@monaco-editor/react": "4.7.0-rc.0",
+    "@monaco-editor/react": "4.4.5",
     "final-form": "4.20.10",
     "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": "0.0.0-6a83617-20250426154716"
   }
 }

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

@@ -1,17 +1,29 @@
-import MonacoEditor, { Monaco } from '@monaco-editor/react';
+/**
+
+
+
+*/
+
+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, stringifyMDX } from '@tinacms/mdx';
+import { useDebounce } from './use-debounce';
 import type * as monaco from 'monaco-editor';
-import React from 'react';
-import { RichTextType } from 'tinacms';
 import {
+  buildError,
   ErrorMessage,
   InvalidMarkdownElement,
-  buildError,
 } from './error-message';
-import { useDebounce } from './use-debounce';
-import useCustomMonaco from './use-monaco';
+import { RichTextType } from 'tinacms';
 
 export const uuid = () => {
+  // @ts-ignore
   return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
     (
       c ^
@@ -20,144 +32,130 @@ 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 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 = stringifyMDX(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();
-      });
-    } catch (err) {
-      console.error('Error in editor mount handler:', err);
-    }
+    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 (
@@ -172,6 +170,9 @@ export const RawEditor = (props: RichTextType) => {
         <MonacoEditor
           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 +190,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);
             }
           }}
         />

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;