@tinacms/app 2.5.13 → 2.5.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tinacms/app",
-  "version": "2.5.13",
+  "version": "2.5.15",
   "main": "src/main.tsx",
   "files": [
     "src",
@@ -28,7 +28,7 @@
     "@graphiql/toolkit": "^0.11.3",
     "@monaco-editor/loader": "^1.7.0",
     "@radix-ui/react-popover": "^1.1.18",
-    "final-form": "^5.0.1",
+    "final-form": "4.20.10",
     "graphiql": "^4.1.2",
     "graphql": "15.8.0",
     "lucide-react": "^0.424.0",
@@ -36,8 +36,8 @@
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.30.3",
     "zod": "^3.24.2",
-    "@tinacms/mdx": "^2.2.2",
-    "tinacms": "^3.13.0"
+    "tinacms": "^3.14.4",
+    "@tinacms/mdx": "^2.3.0"
   },
   "repository": {
     "url": "https://github.com/tinacms/tinacms.git",

package/src/global.css

@@ -45,8 +45,8 @@
   --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;

package/src/index.css

@@ -28,16 +28,16 @@
 body {
   margin: 0;
   padding: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
+    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+  font-family:
+    source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
 }
 
 div.graphiql-explorer-root > div:last-child {

package/src/lib/graphql-reducer.ts

@@ -18,14 +18,14 @@ import {
   TinaState,
   isSessionExpiredError,
   resolveField,
+  showErrorModal,
   useCMS,
 } from 'tinacms';
 import { z } from 'zod';
 import { FormifyCallback, createForm, createGlobalForm } from './build-form';
-import { showErrorModal } from './errors';
 import { expandQuery, isConnectionType, isNodeType } from './expand-query';
 import {
-  getExpectedPreviewOrigin,
+  getPreviewOrigin,
   isFromTrustedPreviewOrigin,
   postMessageToPreview,
 } from './preview-origin';
@@ -205,12 +205,9 @@ export const useGraphQLReducer = (
 
   const activeField = searchParams.get('active-field');
 
-  // Origin of the preview document we load in the iframe. Used to validate
+  // The preview is always loaded from the admin's own origin. Used to validate
   // inbound messages and as the explicit `targetOrigin` for outbound ones.
-  const expectedOrigin = React.useMemo(
-    () => getExpectedPreviewOrigin(url),
-    [url]
-  );
+  const expectedOrigin = getPreviewOrigin();
 
   React.useEffect(() => {
     const run = async () => {
@@ -725,12 +722,13 @@ const onSubmit = async (
   } catch (e) {
     // request() already sent the user back to the login modal; no alert over it
     if (isSessionExpiredError(e)) throw e;
-    cms.alerts.error(() =>
-      ErrorDialog({
-        title: 'There was a problem saving your document',
-        message: 'Tina caught an error while updating the page',
-        error: e,
-      })
+    cms.alerts.error(
+      () =>
+        ErrorDialog({
+          message: 'Tina caught an error while updating the page',
+          error: e,
+        }),
+      { title: 'Save Failed' }
     );
     console.error(e);
   }

package/src/lib/preview-origin.test.ts

@@ -1,11 +1,10 @@
 import { describe, expect, it, vi } from 'vitest';
 import {
-  getExpectedPreviewOrigin,
+  getPreviewOrigin,
   isFromTrustedPreviewOrigin,
   postMessageToPreview,
 } from './preview-origin';
 
-const ADMIN = 'https://admin.example';
 const PREVIEW = 'https://preview.example';
 
 // A stand-in for the iframe's content window; we only need an identity to
@@ -15,15 +14,23 @@ const makePeerWindow = () =>
     postMessage: ReturnType<typeof vi.fn>;
   };
 
-describe('getExpectedPreviewOrigin', () => {
-  it('resolves a relative admin URL to the admin origin', () => {
-    expect(getExpectedPreviewOrigin('/posts/hello', ADMIN)).toBe(ADMIN);
+describe('getPreviewOrigin', () => {
+  it('is the origin the admin itself is served from', () => {
+    expect(getPreviewOrigin()).toBe(window.location.origin);
   });
 
-  it('keeps the origin of an absolute preview URL', () => {
-    expect(getExpectedPreviewOrigin(`${PREVIEW}/posts/hello`, ADMIN)).toBe(
-      PREVIEW
-    );
+  /**
+   * The origin used to be resolved from the preview URL, so a URL naming
+   * another origin moved the trust anchor to it. The preview is always loaded
+   * from the admin's own origin, so nothing it carries is consulted here.
+   */
+  it('takes no argument that could name another origin', () => {
+    expect(getPreviewOrigin.length).toBe(0);
+    expect(
+      (getPreviewOrigin as (...args: unknown[]) => string)(
+        `${PREVIEW}/posts/hello`
+      )
+    ).toBe(window.location.origin);
   });
 });
 

package/src/lib/preview-origin.ts

@@ -7,23 +7,15 @@
  */
 
 /**
- * Returns the origin expected for the preview iframe.
+ * Returns the origin the preview iframe is allowed to be on.
  *
- * Relative URLs resolve against `baseOrigin`; absolute URLs keep their own
- * origin.
+ * The admin only ever loads the preview from its own origin, so this is that
+ * origin and nothing else. It is deliberately not derived from the preview URL:
+ * reading the trust anchor out of a value the URL supplies is what allowed a
+ * crafted link to nominate the origin it would then be trusted from.
  */
-export const getExpectedPreviewOrigin = (
-  url: string,
-  baseOrigin: string = typeof window !== 'undefined'
-    ? window.location.origin
-    : ''
-): string => {
-  try {
-    return new URL(url, baseOrigin || undefined).origin;
-  } catch {
-    return baseOrigin;
-  }
-};
+export const getPreviewOrigin = (): string =>
+  typeof window !== 'undefined' ? window.location.origin : '';
 
 /**
  * Checks whether a MessageEvent came from the trusted preview iframe.

package/src/lib/errors.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import { TinaCMS } from 'tinacms';
-
-const TROUBLESHOOTING_URL = 'https://tina.io/docs/tinacloud/troubleshooting';
-
-const ErrorModalContent = (props: { title: string; message: string }) => {
-  const { title, message } = props;
-  return (
-    <>
-      <div>{title}</div>
-      <p>{message}</p>
-      <a href={TROUBLESHOOTING_URL} target='_blank' rel='noopener noreferrer'>
-        Try these troubleshooting tips
-      </a>
-    </>
-  );
-};
-
-export const showErrorModal = (
-  title: string,
-  message: string,
-  cms: TinaCMS
-) => {
-  if (cms.alerts.all.some((a: { level: string }) => a.level === 'error'))
-    return;
-  cms.alerts.error(() => <ErrorModalContent title={title} message={message} />);
-};