@tinacms/app 0.0.0-942e18f-20250102010803 → 0.0.0-96fe3b4-20251217041317

package/src/Playground.tsx

@@ -1,28 +1,28 @@
-import { createGraphiQLFetcher } from '@graphiql/toolkit'
-import { GraphiQL } from 'graphiql'
-import { parse, print } from 'graphql'
-import React from 'react'
-import { useCMS } from 'tinacms'
-import { FolderIcon } from '@heroicons/react/outline'
-import { queries } from 'CLIENT_IMPORT'
+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 React from 'react';
+import { useCMS } from 'tinacms';
 
-import 'graphiql/graphiql.min.css'
+import 'graphiql/graphiql.min.css';
 
 const Playground = () => {
-  const cms = useCMS()
-  const [query, setQuery] = React.useState('')
-  const [variables, setVariables] = React.useState('')
-  const [autoQueries, setAutoQueries] = React.useState()
+  const cms = useCMS();
+  const [query, setQuery] = React.useState('');
+  const [variables, setVariables] = React.useState('');
+  const [autoQueries, setAutoQueries] = React.useState();
   const [collectionInfo, setCollectionInfo] = React.useState<{
     collections: {
-      name: string
-      documents: { edges: { node: { _sys: { relativePath: string } } }[] }
-    }[]
-  }>()
+      name: string;
+      documents: { edges: { node: { _sys: { relativePath: string } } }[] };
+    }[];
+  }>();
   React.useEffect(() => {
     const run = async () => {
       if (queries) {
-        const q = queries({ request: async () => query })
+        const q = queries({ request: async () => query });
         setCollectionInfo(
           await cms.api.tina.request(
             `
@@ -45,52 +45,50 @@ const Playground = () => {
       `,
             { variables: {} }
           )
-        )
-        setAutoQueries(q)
+        );
+        setAutoQueries(q);
       } else {
-        setAutoQueries({})
+        setAutoQueries({});
       }
-    }
-    run()
-  }, [])
+    };
+    run();
+  }, []);
 
-  const ref = React.useRef()
+  const ref = React.useRef();
 
   const getToken = () => {
-    return JSON.parse(localStorage.getItem('tinacms-auth') || '{}')?.id_token
-  }
+    return JSON.parse(localStorage.getItem('tinacms-auth') || '{}')?.id_token;
+  };
 
   if (!autoQueries) {
-    return null
+    return null;
   }
 
   const Plugin = () => {
-    const noAutoQueries = Object.keys(autoQueries).length === 0
+    const noAutoQueries = Object.keys(autoQueries).length === 0;
     return (
       <div>
-        <div className="graphiql-doc-explorer-title">Queries</div>
-        <div className="graphiql-doc-explorer-content">
-          <div className="graphiql-markdown-description">
+        <div className='graphiql-doc-explorer-title'>Queries</div>
+        <div className='graphiql-doc-explorer-content'>
+          <div className='graphiql-markdown-description'>
             {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">
+          <nav className='space-y-1' aria-label='Sidebar'>
             <ul>
               {Object.entries(autoQueries).map(([key, value]) => {
                 const collection = collectionInfo?.collections.find(
                   ({ name }) => name === key
-                )
-                let variables = ''
-                let relativePath = ''
+                );
+                let variables = '';
+                let relativePath = '';
                 if (collection) {
                   relativePath =
                     collection?.documents?.edges[0]?.node?._sys.relativePath ||
-                    ''
-                  variables = JSON.stringify({ relativePath }, null, 2)
+                    '';
+                  variables = JSON.stringify({ relativePath }, null, 2);
                 }
                 return (
                   <li>
@@ -100,47 +98,47 @@ 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') {
-                          const v = await value({})
-                          const ast = parse(v.query)
-                          setVariables(variables)
-                          setQuery(print(ast))
+                          const v = await value({});
+                          const ast = parse(v.query);
+                          setVariables(variables);
+                          setQuery(print(ast));
                         }
                       }}
                     >
-                      <span className="truncate">
+                      <span className='truncate'>
                         {key}{' '}
                         {relativePath && (
-                          <span className="pl-2 text-sm text-gray-300">
+                          <span className='pl-2 text-sm text-gray-300'>
                             ({relativePath})
                           </span>
                         )}{' '}
                       </span>
                     </button>
                   </li>
-                )
+                );
               })}
             </ul>
           </nav>
         </div>
       </div>
-    )
-  }
+    );
+  };
   return (
     <div style={{ height: '100vh' }}>
       <GraphiQL
         fetcher={async (params, options) => {
           const fetcher = createGraphiQLFetcher({
-            url: __API_URL__,
+            url: cms.api.tina.contentApiUrl || __API_URL__,
             headers: { Authorization: `Bearer ${getToken()}` },
-          })
-          return fetcher(params, options)
+          });
+          return fetcher(params, options);
         }}
         query={query}
-        defaultEditorToolsVisibility="variables"
+        defaultEditorToolsVisibility='variables'
         isHeadersEditorEnabled={false}
         defaultTabs={[]}
         plugins={[
@@ -153,11 +151,11 @@ const Playground = () => {
         variables={variables}
       ></GraphiQL>
     </div>
-  )
-}
+  );
+};
 
-export default Playground
+export default Playground;
 
 function classNames(...classes: string[]) {
-  return classes.filter(Boolean).join(' ')
+  return classes.filter(Boolean).join(' ');
 }

package/src/dummy-client.ts

@@ -1 +1 @@
-export const queries = false
+export const queries = false;

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

@@ -1,6 +1,6 @@
 /**
 
 */
-import RawEditor from './monaco'
+import RawEditor from './monaco';
 
-export default RawEditor
+export default RawEditor;

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

@@ -1,47 +1,47 @@
-/**
-
-
-
-*/
-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 { 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: '' }
+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 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,26 +1,20 @@
-/**
-
-
-
-*/
-
-import React from 'react'
-import MonacoEditor, { useMonaco, loader } 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 { parseMDX, serializeMDX } from '@tinacms/mdx';
+import type * as monaco from 'monaco-editor';
+import { RichTextType } from 'tinacms';
 import {
-  buildError,
   ErrorMessage,
   InvalidMarkdownElement,
-} from './error-message'
-import { RichTextType } from 'tinacms'
+  buildError,
+} from './error-message';
+import { useDebounce } from './use-debounce';
 
 export const uuid = () => {
   // @ts-ignore
@@ -29,15 +23,10 @@ export const uuid = () => {
       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' },
-})
+type Monaco = typeof monaco;
 
 /**
  * Since monaco lazy-loads we may have a delay from when the block is inserted
@@ -45,81 +34,81 @@ loader.config({
  *
  * Will try for 3 seconds before moving on
  */
-let retryCount = 0
+let retryCount = 0;
 const retryFocus = (ref) => {
   if (ref.current) {
-    ref.current.focus()
+    ref.current.focus();
   } else {
     if (retryCount < 30) {
       setTimeout(() => {
-        retryCount = retryCount + 1
-        retryFocus(ref)
-      }, 100)
+        retryCount = retryCount + 1;
+        retryFocus(ref);
+      }, 100);
     }
   }
-}
+};
 
 export const RawEditor = (props: RichTextType) => {
-  const monaco = useMonaco() as Monaco
+  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
+    React.useRef<monaco.editor.IStandaloneCodeEditor>(null);
+  const [height, setHeight] = React.useState(100);
+  const id = React.useMemo(() => uuid(), []);
+  const field = props.field;
   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)
+    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)
+  const debouncedValue = useDebounce(value, 500);
 
   React.useEffect(() => {
     // @ts-ignore no access to the rich-text type from this package
-    const parsedValue = parseMDX(value, field, (value) => value)
+    const parsedValue = parseMDX(value, field, (value) => value);
     if (
       parsedValue.children[0] &&
       parsedValue.children[0].type === 'invalid_markdown'
     ) {
-      const invalidMarkdown = parsedValue.children[0]
-      setError(invalidMarkdown)
+      const invalidMarkdown = parsedValue.children[0];
+      setError(invalidMarkdown);
     } else {
-      setError(null)
+      setError(null);
     }
-    props.input.onChange(parsedValue)
-  }, [JSON.stringify(debouncedValue)])
+    props.input.onChange(parsedValue);
+  }, [JSON.stringify(debouncedValue)]);
 
   React.useEffect(() => {
     if (monacoEditorRef.current) {
       if (error) {
-        const errorMessage = buildError(error)
+        const errorMessage = buildError(error);
         monaco.editor.setModelMarkers(monacoEditorRef.current.getModel(), id, [
           {
             ...errorMessage.position,
             message: errorMessage.message,
             severity: 8,
           },
-        ])
+        ]);
       } else {
         monaco.editor.setModelMarkers(
           monacoEditorRef.current.getModel(),
           id,
           []
-        )
+        );
       }
     }
-  }, [JSON.stringify(error), monacoEditorRef.current])
+  }, [JSON.stringify(error), monacoEditorRef.current]);
 
   React.useEffect(() => {
     if (monaco) {
-      monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true)
+      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) {
@@ -143,24 +132,28 @@ export const RawEditor = (props: RichTextType) => {
       //   },
       // })
     }
-  }, [monaco])
+  }, [monaco]);
 
   function handleEditorDidMount(
     monacoEditor: 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 (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();
+      });
+    }
   }
 
   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>
@@ -168,6 +161,9 @@ 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.
@@ -204,33 +200,31 @@ export const RawEditor = (props: RichTextType) => {
           value={value}
           onChange={(value) => {
             try {
-              setValue(value)
+              setValue(value);
             } catch (e) {
-              console.log('error', e)
+              console.log('error', e);
             }
           }}
         />
       </div>
     </div>
-  )
-}
+  );
+};
 
 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`}
-      type="button"
+        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}
     >
-      <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;