@tinacms/app 0.0.0-649e1f8-20241115062112 → 0.0.0-67b5c0b-20250414080731

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

@@ -3,45 +3,45 @@
 
 
 */
-import React from 'react'
-import { XCircleIcon } from '@heroicons/react/solid'
+import React from 'react';
+import { XCircleIcon } from '@heroicons/react/solid';
 import {
   Popover,
   PopoverButton,
   PopoverPanel,
   Transition,
-} from '@headlessui/react'
-import { Fragment } from 'react'
+} from '@headlessui/react';
+import { Fragment } from 'react';
 // import { InvalidMarkdownElement } from '@tinacms/mdx/src/parse/plate'
-export type EmptyTextElement = { type: 'text'; text: '' }
+export type EmptyTextElement = { type: 'text'; text: '' };
 export type PositionItem = {
-  line?: number | null
-  column?: number | null
-  offset?: number | null
-  _index?: number | null
-  _bufferIndex?: number | null
-}
+  line?: number | null;
+  column?: number | null;
+  offset?: number | null;
+  _index?: number | null;
+  _bufferIndex?: number | null;
+};
 export type Position = {
-  start: PositionItem
-  end: PositionItem
-}
+  start: PositionItem;
+  end: PositionItem;
+};
 export type InvalidMarkdownElement = {
-  type: 'invalid_markdown'
-  value: string
-  message: string
-  position?: Position
-  children: [EmptyTextElement]
-}
+  type: 'invalid_markdown';
+  value: string;
+  message: string;
+  position?: Position;
+  children: [EmptyTextElement];
+};
 
 type ErrorType = {
-  message: string
+  message: string;
   position?: {
-    startColumn: number
-    endColumn: number
-    startLineNumber: number
-    endLineNumber: number
-  }
-}
+    startColumn: number;
+    endColumn: number;
+    startLineNumber: number;
+    endLineNumber: number;
+  };
+};
 export const buildError = (element: InvalidMarkdownElement): ErrorType => {
   return {
     message: element.message,
@@ -51,28 +51,28 @@ export const buildError = (element: InvalidMarkdownElement): ErrorType => {
       startLineNumber: element.position.start.line,
       endLineNumber: element.position.end.line,
     },
-  }
-}
+  };
+};
 export const buildErrorMessage = (element: InvalidMarkdownElement): string => {
   if (!element) {
-    return ''
+    return '';
   }
-  const errorMessage = buildError(element)
+  const errorMessage = buildError(element);
   const message = errorMessage
     ? `${errorMessage.message}${
         errorMessage.position
           ? ` at line: ${errorMessage.position.startLineNumber}, column: ${errorMessage.position.startColumn}`
           : ''
       }`
-    : null
-  return message
-}
+    : null;
+  return message;
+};
 
 export function ErrorMessage({ error }: { error: InvalidMarkdownElement }) {
-  const message = buildErrorMessage(error)
+  const message = buildErrorMessage(error);
 
   return (
-    <Popover className="relative">
+    <Popover className='relative'>
       {() => (
         <>
           <PopoverButton
@@ -80,29 +80,29 @@ export function ErrorMessage({ error }: { error: InvalidMarkdownElement }) {
               error ? '' : ' opacity-0 hidden '
             }`}
           >
-            <span className="sr-only">Errors</span>
-            <XCircleIcon className="h-5 w-5 text-red-400" aria-hidden="true" />
+            <span className='sr-only'>Errors</span>
+            <XCircleIcon className='h-5 w-5 text-red-400' aria-hidden='true' />
           </PopoverButton>
           <Transition
-            enter="transition ease-out duration-200"
-            enterFrom="opacity-0 translate-y-1"
-            enterTo="opacity-100 translate-y-0"
-            leave="transition ease-in duration-150"
-            leaveFrom="opacity-100 translate-y-0"
-            leaveTo="opacity-0 translate-y-1"
+            enter='transition ease-out duration-200'
+            enterFrom='opacity-0 translate-y-1'
+            enterTo='opacity-100 translate-y-0'
+            leave='transition ease-in duration-150'
+            leaveFrom='opacity-100 translate-y-0'
+            leaveTo='opacity-0 translate-y-1'
           >
-            <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="flex">
-                    <div className="flex-shrink-0">
+            <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='flex'>
+                    <div className='flex-shrink-0'>
                       <XCircleIcon
-                        className="h-5 w-5 text-red-400"
-                        aria-hidden="true"
+                        className='h-5 w-5 text-red-400'
+                        aria-hidden='true'
                       />
                     </div>
-                    <div className="ml-3">
-                      <h3 className="text-sm font-medium text-red-800 whitespace-pre-wrap">
+                    <div className='ml-3'>
+                      <h3 className='text-sm font-medium text-red-800 whitespace-pre-wrap'>
                         {message}
                       </h3>
                     </div>
@@ -114,5 +114,5 @@ export function ErrorMessage({ error }: { error: InvalidMarkdownElement }) {
         </>
       )}
     </Popover>
-  )
+  );
 }

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

@@ -1,166 +1,168 @@
-/**
-
-
-
-*/
-
-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 MonacoEditor, { Monaco } from '@monaco-editor/react';
+import { parseMDX, stringifyMDX } from '@tinacms/mdx';
+import type * as monaco from 'monaco-editor';
+import React from 'react';
+import { RichTextType } from 'tinacms';
 import {
-  buildError,
   ErrorMessage,
   InvalidMarkdownElement,
-} from './error-message'
-import { RichTextType } from 'tinacms'
+  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 ^
       (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
     ).toString(16)
-  )
-}
-
-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.
- *
- * Will try for 3 seconds before moving on
+ * to when monaco has instantiated.
  */
-let retryCount = 0
-const retryFocus = (ref) => {
-  if (ref.current) {
-    ref.current.focus()
-  } else {
-    if (retryCount < 30) {
-      setTimeout(() => {
-        retryCount = retryCount + 1
-        retryFocus(ref)
-      }, 100)
+const retryFocus = (editor) => {
+  if (editor && editor.focus) {
+    try {
+      editor.focus();
+    } catch (err) {
+      console.warn('Error focusing editor:', err);
     }
   }
-}
+};
 
 export const RawEditor = (props: RichTextType) => {
-  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
+  const monacoInstance = useCustomMonaco();
+  const editorRef = React.useRef<monaco.editor.IStandaloneCodeEditor | null>(
+    null
+  );
+  const [height, setHeight] = React.useState(100);
+  const id = React.useMemo(() => uuid(), []);
+  const field = props.field;
+
+  // Get initial value safely
   const inputValue = React.useMemo(() => {
-    // @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)
+    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
+
+  const [value, setValue] = React.useState(inputValue);
+  const [error, setError] = React.useState<InvalidMarkdownElement>(null);
 
-  const debouncedValue = useDebounce(value, 500)
+  const debouncedValue = useDebounce(value, 500);
 
+  // Update parsed MDX when value changes
   React.useEffect(() => {
-    // @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)
+    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);
     }
-    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 (monacoEditorRef.current) {
+    if (!monacoInstance || !editorRef.current) return;
+
+    try {
+      const model = editorRef.current.getModel();
+      if (!model) return;
+
       if (error) {
-        const errorMessage = buildError(error)
-        monaco.editor.setModelMarkers(monacoEditorRef.current.getModel(), id, [
-          {
-            ...errorMessage.position,
-            message: errorMessage.message,
-            severity: 8,
-          },
-        ])
+        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]);
       } else {
-        monaco.editor.setModelMarkers(
-          monacoEditorRef.current.getModel(),
-          id,
-          []
-        )
+        monacoInstance.editor.setModelMarkers(model, id, []);
       }
+    } catch (err) {
+      console.error('Error setting model markers:', err);
     }
-  }, [JSON.stringify(error), monacoEditorRef.current])
+  }, [error, monacoInstance, id]);
 
+  // Configure TypeScript settings once when Monaco loads
   React.useEffect(() => {
-    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,
-      //         },
-      //       ],
-      //     }
-      //   },
-      // })
+    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);
     }
-  }, [monaco])
+  }, [monacoInstance]);
 
   function handleEditorDidMount(
-    monacoEditor: monaco.editor.IStandaloneCodeEditor,
+    editor: 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 (!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);
+    }
   }
 
   return (
-    <div className="relative">
-      <div className="sticky top-1 w-full flex justify-between mb-2 z-50 max-w-full bg-white">
+    <div className='relative'>
+      <div className='sticky top-1 w-full flex justify-between mb-2 z-50 max-w-full bg-white'>
         <Button onClick={() => props.setRawMode(false)}>
           View in rich-text editor 📝
         </Button>
@@ -170,9 +172,6 @@ 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,
@@ -190,30 +189,26 @@ 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={(value) => {
-            try {
-              setValue(value)
-            } catch (e) {
-              console.log('error', e)
+          onChange={(newValue) => {
+            if (newValue !== undefined) {
+              setValue(newValue);
             }
           }}
         />
       </div>
     </div>
-  )
-}
+  );
+};
 
 const Button = (props) => {
   return (
@@ -223,14 +218,14 @@ const Button = (props) => {
           ? '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`}
-      type="button"
+      type='button'
       onClick={props.onClick}
     >
-      <span className="text-sm font-semibold tracking-wide align-baseline mr-1">
+      <span className='text-sm font-semibold tracking-wide align-baseline mr-1'>
         {props.children}
       </span>
     </button>
-  )
-}
+  );
+};
 
-export default RawEditor
+export default RawEditor;

package/src/fields/rich-text/monaco/use-debounce.ts

@@ -3,23 +3,23 @@
 
 
 */
-import { useState, useEffect } from 'react'
+import { useState, useEffect } from 'react';
 export function useDebounce(value, delay) {
-  const [debouncedValue, setDebouncedValue] = useState(value)
+  const [debouncedValue, setDebouncedValue] = useState(value);
   useEffect(
     () => {
       // Update debounced value after delay
       const handler = setTimeout(() => {
-        setDebouncedValue(value)
-      }, delay)
+        setDebouncedValue(value);
+      }, delay);
       // Cancel the timeout if value changes (also on delay change or unmount)
       // This is how we prevent debounced value from updating if value is changed ...
       // .. within the delay period. Timeout gets cleared and restarted.
       return () => {
-        clearTimeout(handler)
-      }
+        clearTimeout(handler);
+      };
     },
     [value, delay] // Only re-call effect if value or delay changes
-  )
-  return debouncedValue
+  );
+  return debouncedValue;
 }

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

@@ -0,0 +1,53 @@
+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;

package/src/global.css

@@ -40,13 +40,13 @@
   --tina-font-size-7: 26px;
   --tina-font-size-8: 32px;
 
-  --tina-font-family: 'Inter', sans-serif;
+  --tina-font-family: "Inter", sans-serif;
 
   --tina-font-weight-regular: 400;
   --tina-font-weight-bold: 600;
 
-  --tina-shadow-big: 0px 2px 3px rgba(0, 0, 0, 0.05),
-    0 4px 12px rgba(0, 0, 0, 0.1);
+  --tina-shadow-big: 0px 2px 3px rgba(0, 0, 0, 0.05), 0 4px 12px
+    rgba(0, 0, 0, 0.1);
   --tina-shadow-small: 0px 2px 3px rgba(0, 0, 0, 0.12);
 
   --tina-timing-short: 85ms;