@tinacms/app 2.5.10 → 2.5.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tinacms/app",
-  "version": "2.5.10",
+  "version": "2.5.11",
   "main": "src/main.tsx",
   "files": [
     "src",
@@ -11,9 +11,11 @@
   ],
   "license": "Apache-2.0",
   "devDependencies": {
+    "@testing-library/react": "^16.2.0",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
     "happy-dom": "15.10.2",
+    "monaco-editor": "0.31.0",
     "typescript": "^5.7.3",
     "vite": "^5.4.14",
     "vitest": "^2.1.9"
@@ -24,20 +26,18 @@
   },
   "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/loader": "^1.7.0",
+    "@radix-ui/react-popover": "^1.1.18",
     "final-form": "4.20.10",
     "graphiql": "3.0.0-alpha.1",
     "graphql": "15.8.0",
-    "monaco-editor": "0.31.0",
+    "lucide-react": "^0.424.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.30.3",
-    "typescript": "^5.7.3",
     "zod": "^3.24.2",
-    "@tinacms/mdx": "^2.1.11",
-    "tinacms": "^3.11.0"
+    "tinacms": "^3.12.0",
+    "@tinacms/mdx": "^2.2.0"
   },
   "repository": {
     "url": "https://github.com/tinacms/tinacms.git",

package/src/App.tsx

@@ -2,6 +2,7 @@ import React, { Suspense } from 'react';
 import TinaCMS, { TinaAdmin, useCMS, MdxFieldPluginExtendible } from 'tinacms';
 import { Preview } from './preview';
 import Playground from './Playground';
+import { RawEditorErrorBoundary } from './fields/rich-text/error-boundary';
 
 // TODO: Resolve this to local file in tsconfig.json
 // @ts-expect-error
@@ -21,9 +22,11 @@ const Editor = (props) => {
       setRawMode={setRawMode}
       {...props}
       rawEditor={
-        <Suspense fallback={<div>Loading raw editor...</div>}>
-          <RawEditor {...props} setRawMode={setRawMode} rawMode={rawMode} />
-        </Suspense>
+        <RawEditorErrorBoundary onDismiss={() => setRawMode(false)}>
+          <Suspense fallback={<div>Loading raw editor...</div>}>
+            <RawEditor {...props} setRawMode={setRawMode} rawMode={rawMode} />
+          </Suspense>
+        </RawEditorErrorBoundary>
       }
     />
   );

package/src/Playground.tsx

@@ -1,8 +1,8 @@
 import { createGraphiQLFetcher } from '@graphiql/toolkit';
-import { FolderIcon } from '@heroicons/react/outline';
 import { queries } from 'CLIENT_IMPORT';
 import { GraphiQL } from 'graphiql';
 import { parse, print } from 'graphql';
+import { Folder } from 'lucide-react';
 import React from 'react';
 import { useCMS } from 'tinacms';
 
@@ -56,8 +56,9 @@ const Playground = () => {
 
   const ref = React.useRef();
 
-  const getToken = () => {
-    return JSON.parse(localStorage.getItem('tinacms-auth') || '{}')?.id_token;
+  const getToken = async () => {
+    const token = await cms.api.tina.authProvider.getToken();
+    return token?.id_token ?? token?.access_token;
   };
 
   if (!autoQueries) {
@@ -133,7 +134,7 @@ const Playground = () => {
         fetcher={async (params, options) => {
           const fetcher = createGraphiQLFetcher({
             url: cms.api.tina.contentApiUrl || __API_URL__,
-            headers: { Authorization: `Bearer ${getToken()}` },
+            headers: { Authorization: `Bearer ${await getToken()}` },
           });
           return fetcher(params, options);
         }}
@@ -144,7 +145,7 @@ const Playground = () => {
         plugins={[
           {
             title: 'Queries',
-            icon: () => <FolderIcon />,
+            icon: () => <Folder />,
             content: (values) => <Plugin />,
           },
         ]}

package/src/fields/rich-text/error-boundary.test.tsx

@@ -0,0 +1,58 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { RawEditorErrorBoundary } from './error-boundary';
+
+const Throws = ({ message }: { message: string }) => {
+  throw new Error(message);
+};
+
+const FAILED_IMPORT = 'Failed to fetch dynamically imported module';
+const FAILED_SERIALIZE = 'Marks inside inline code are not supported';
+
+const renderWithThrow = (message: string, onDismiss = () => {}) => {
+  const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {});
+  render(
+    <RawEditorErrorBoundary onDismiss={onDismiss}>
+      <Throws message={message} />
+    </RawEditorErrorBoundary>
+  );
+  consoleError.mockRestore();
+};
+
+describe('RawEditorErrorBoundary', () => {
+  it('renders its children when nothing throws', () => {
+    render(
+      <RawEditorErrorBoundary onDismiss={() => {}}>
+        <div>raw editor</div>
+      </RawEditorErrorBoundary>
+    );
+    expect(screen.getByText('raw editor')).toBeTruthy();
+  });
+
+  it('keeps a failed lazy import inside the field', () => {
+    renderWithThrow(FAILED_IMPORT);
+    expect(
+      screen.getByText(/Couldn't open this field in raw markdown/)
+    ).toBeTruthy();
+  });
+
+  it('keeps a failure to serialize the field inside the field', () => {
+    renderWithThrow(FAILED_SERIALIZE);
+    expect(
+      screen.getByText(/Couldn't open this field in raw markdown/)
+    ).toBeTruthy();
+  });
+
+  it('shows the underlying message so the editor knows what to undo', () => {
+    renderWithThrow(FAILED_SERIALIZE);
+    expect(screen.getByText(FAILED_SERIALIZE)).toBeTruthy();
+  });
+
+  it('offers a way back to the rich-text editor', () => {
+    const onDismiss = vi.fn();
+    renderWithThrow(FAILED_IMPORT, onDismiss);
+    fireEvent.click(screen.getByRole('button'));
+    expect(onDismiss).toHaveBeenCalledOnce();
+  });
+});

package/src/fields/rich-text/error-boundary.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+
+interface Props {
+  children: React.ReactNode;
+  onDismiss: () => void;
+}
+
+/**
+ * The raw editor fails in more than one way: its chunk is loaded lazily, so the
+ * import can reject, and it serializes the field on render, so content it can't
+ * represent throws. Either one unmounts the whole admin without a boundary,
+ * leaving a blank page.
+ *
+ * The heading names the outcome rather than a cause, since the boundary cannot
+ * tell them apart. The message underneath is the one thing that lets an editor
+ * act — "Marks inside inline code are not supported" says which formatting to
+ * undo — and it is what a bug report needs verbatim.
+ */
+export class RawEditorErrorBoundary extends React.Component<
+  Props,
+  { message: string | null }
+> {
+  state: { message: string | null } = { message: null };
+
+  static getDerivedStateFromError(error: Error) {
+    return { message: error?.message ?? '' };
+  }
+
+  componentDidCatch(error: Error) {
+    console.error('Raw markdown editor failed to open:', error);
+  }
+
+  render() {
+    if (this.state.message === null) {
+      return this.props.children;
+    }
+    // `whitespace-normal` because the field wrapper sets `nowrap`, which this
+    // would otherwise inherit and clip the message.
+    return (
+      <div className='p-4 text-sm whitespace-normal text-gray-700'>
+        <p className='mb-2'>
+          Couldn't open this field in raw markdown. Your content hasn't changed.
+        </p>
+        {this.state.message ? (
+          <p className='mb-3 font-mono text-xs break-words text-gray-500'>
+            {this.state.message}
+          </p>
+        ) : null}
+        <button
+          type='button'
+          className='rounded border border-gray-200 bg-white px-2 py-1 font-medium shadow hover:bg-blue-500 hover:text-white'
+          onClick={() => {
+            this.setState({ message: null });
+            this.props.onDismiss();
+          }}
+        >
+          Back to rich-text editor
+        </button>
+      </div>
+    );
+  }
+}

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

@@ -1,17 +1,11 @@
-import {
-  Popover,
-  PopoverButton,
-  PopoverPanel,
-  Transition,
-} from '@headlessui/react';
-import { XCircleIcon } from '@heroicons/react/solid';
+import { CircleX } from 'lucide-react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
 /**
 
 
 
 */
 import React from 'react';
-import { Fragment } from 'react';
 // import { InvalidMarkdownElement } from '@tinacms/mdx/src/parse/plate'
 export type EmptyTextElement = { type: 'text'; text: '' };
 export type PositionItem = {
@@ -72,47 +66,38 @@ export function ErrorMessage({ error }: { error: InvalidMarkdownElement }) {
   const message = buildErrorMessage(error);
 
   return (
-    <Popover className='relative'>
-      {() => (
-        <>
-          <PopoverButton
-            className={`p-2 shaodw-lg border ${
-              error ? '' : ' opacity-0 hidden '
-            }`}
-          >
-            <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'
-          >
-            <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 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'
-                      />
-                    </div>
-                    <div className='ml-3'>
-                      <h3 className='text-sm font-medium text-red-800 whitespace-pre-wrap'>
-                        {message}
-                      </h3>
-                    </div>
-                  </div>
+    <PopoverPrimitive.Root>
+      <PopoverPrimitive.Trigger
+        className={`p-2 shaodw-lg border ${error ? '' : ' opacity-0 hidden '}`}
+      >
+        <span className='sr-only'>Errors</span>
+        <CircleX className='h-5 w-5 text-red-400' aria-hidden='true' />
+      </PopoverPrimitive.Trigger>
+      <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Content
+          align='end'
+          sideOffset={12}
+          className='z-50 w-[300px] outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0'
+        >
+          <div className='overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5'>
+            <div className='rounded bg-red-50 p-4 overflow-scroll'>
+              <div className='flex'>
+                <div className='flex-shrink-0'>
+                  <CircleX
+                    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'>
+                    {message}
+                  </h3>
                 </div>
               </div>
-            </PopoverPanel>
-          </Transition>
-        </>
-      )}
-    </Popover>
+            </div>
+          </div>
+        </PopoverPrimitive.Content>
+      </PopoverPrimitive.Portal>
+    </PopoverPrimitive.Root>
   );
 }

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

@@ -1,5 +1,4 @@
-import React from 'react';
-import MonacoEditor, { useMonaco, loader } from '@monaco-editor/react';
+import loader from '@monaco-editor/loader';
 /**
  * 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
@@ -8,14 +7,15 @@ 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 { RichTextEditorSwitchedEvent, captureEvent } from 'tinacms';
 import {
   ErrorMessage,
   InvalidMarkdownElement,
   buildError,
 } from './error-message';
 import { useDebounce } from './use-debounce';
-import { RichTextEditorSwitchedEvent, captureEvent } from 'tinacms';
 
 export const uuid = () => {
   // @ts-ignore
@@ -29,6 +29,76 @@ export const uuid = () => {
 
 type Monaco = typeof monaco;
 
+/**
+ * The editor itself is fetched from a CDN at runtime by @monaco-editor/loader;
+ * the `monaco-editor` package is a devDependency used only for its types.
+ */
+const useMonaco = (): Monaco | null => {
+  const [instance, setInstance] = React.useState<Monaco | null>(null);
+  React.useEffect(() => {
+    let cancelled = false;
+    loader
+      .init()
+      .then((m) => {
+        if (!cancelled) {
+          setInstance(m as Monaco);
+        }
+      })
+      .catch((error) => {
+        console.error('Monaco initialization: error:', error);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  return instance;
+};
+
+const MonacoEditor = (props: {
+  monaco: Monaco;
+  path: string;
+  value: string;
+  language: string;
+  options: monaco.editor.IStandaloneEditorConstructionOptions;
+  onMount: (
+    editor: monaco.editor.IStandaloneCodeEditor,
+    monaco: Monaco
+  ) => void;
+  onChange: (value: string) => void;
+}) => {
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  // Read through a ref so re-creating the editor isn't tied to callback identity.
+  const onChangeRef = React.useRef(props.onChange);
+  onChangeRef.current = props.onChange;
+
+  React.useEffect(() => {
+    const { monaco, path, value, language, options, onMount } = props;
+    if (!containerRef.current) {
+      return;
+    }
+    const uri = monaco.Uri.parse(`inmemory://tina/${path}`);
+    const model =
+      monaco.editor.getModel(uri) ||
+      monaco.editor.createModel(value, language, uri);
+    const editor = monaco.editor.create(containerRef.current, {
+      model,
+      automaticLayout: true,
+      ...options,
+    });
+    const subscription = editor.onDidChangeModelContent(() => {
+      onChangeRef.current(editor.getValue());
+    });
+    onMount(editor, monaco);
+    return () => {
+      subscription.dispose();
+      model.dispose();
+      editor.dispose();
+    };
+  }, [props.monaco]);
+
+  return <div ref={containerRef} style={{ height: '100%', width: '100%' }} />;
+};
+
 /**
  * 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.
@@ -166,52 +236,52 @@ export const RawEditor = (props: RichTextType) => {
         <ErrorMessage error={error} />
       </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,
-            disableLayerHinting: true,
-            accessibilitySupport: 'off',
-            codeLens: false,
-            wordWrap: 'on',
-            minimap: {
-              enabled: false,
-            },
-            fontSize: 14,
-            lineHeight: 2,
-            formatOnPaste: true,
-            lineNumbers: 'on',
-            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'}
-          value={value}
-          onChange={(value) => {
-            try {
-              setValue(value);
-            } catch (e) {
-              console.log('error', e);
-            }
-          }}
-        />
+        {monaco ? (
+          <MonacoEditor
+            monaco={monaco}
+            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,
+              disableLayerHinting: true,
+              accessibilitySupport: 'off',
+              codeLens: false,
+              wordWrap: 'on',
+              minimap: {
+                enabled: false,
+              },
+              fontSize: 14,
+              lineHeight: 2,
+              formatOnPaste: true,
+              lineNumbers: 'on',
+              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'}
+            value={value}
+            onChange={(value) => {
+              try {
+                setValue(value);
+              } catch (e) {
+                console.log('error', e);
+              }
+            }}
+          />
+        ) : null}
       </div>
     </div>
   );

package/src/index.css

@@ -9,7 +9,15 @@
   @apply bg-blue-600 !important;
 }
 
-.icon-parent svg {
+/*
+ * Exists for the hand-written Tina SVGs (AddIcon, CloseIcon, TinaIcon, …), which
+ * are solid shapes and expect to be coloured via `fill`.
+ *
+ * lucide icons are stroke-based and ship `fill="none"`. CSS beats a presentation
+ * attribute, so without the :not() they get flooded with currentColor and their
+ * internal detail disappears — a filled disc instead of a refresh arrow.
+ */
+.icon-parent svg:not(.lucide) {
   fill: currentColor;
 }
 

package/src/preview.tsx

@@ -20,7 +20,7 @@ export const Preview = (
       data-test='tina-iframe'
       id='tina-iframe'
       ref={props.iframeRef}
-      className='h-screen w-full bg-white'
+      className='h-full w-full bg-white'
       src={props.url}
     />
   );