@tinacms/app 2.2.2 → 2.2.4

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

@@ -4,23 +4,23 @@
 
 */
 
-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, stringifyMDX } from '@tinacms/mdx';
+import { useDebounce } from './use-debounce';
+import type * as monaco from 'monaco-editor';
 import {
   buildError,
   ErrorMessage,
   InvalidMarkdownElement,
-} from './error-message'
-import { RichTextType } from 'tinacms'
+} from './error-message';
+import { RichTextType } from 'tinacms';
 
 export const uuid = () => {
   // @ts-ignore
@@ -29,15 +29,15 @@ export const uuid = () => {
       c ^
       (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
     ).toString(16)
-  )
-}
+  );
+};
 
-type Monaco = typeof monaco
+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
@@ -45,81 +45,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 = 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)
+  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 +143,24 @@ export const RawEditor = (props: RichTextType) => {
       //   },
       // })
     }
-  }, [monaco])
+  }, [monaco]);
 
   function handleEditorDidMount(
     monacoEditor: monaco.editor.IStandaloneCodeEditor,
     monaco: Monaco
   ) {
-    monacoEditorRef.current = 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()
-    })
+      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>
@@ -204,16 +204,16 @@ 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 (
@@ -223,14 +223,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/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;

package/src/index.css

@@ -1,5 +1,5 @@
-@import 'global.css';
-@import 'preflight.css';
+@import "global.css";
+@import "preflight.css";
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -16,15 +16,15 @@
 body {
   margin: 0;
   padding: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  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',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
 
@@ -38,32 +38,32 @@ div.graphiql-explorer-root > div:last-child {
 }
 
 /* if the last block has margin-bottom it makes the text box larger but some of it isn't clickable */
-.tina-prose [data-slate-editor='true'] {
+.tina-prose [data-slate-editor="true"] {
   padding-bottom: 0.5em;
   /* Outline is placed on the parent element for styling consistency with other elements */
   outline: none;
 }
 /* prose adds backticks, which look like they should be editable */
-.tina-prose [data-slate-editor='true'] .slate-code::before {
-  content: '';
+.tina-prose [data-slate-editor="true"] .slate-code::before {
+  content: "";
 }
-.tina-prose [data-slate-editor='true'] .slate-code::after {
-  content: '';
+.tina-prose [data-slate-editor="true"] .slate-code::after {
+  content: "";
 }
-.tina-prose [data-slate-editor='true'] .slate-code_block {
+.tina-prose [data-slate-editor="true"] .slate-code_block {
   margin: 0;
 }
 /* code lines as part of a block don't need the same background formatting */
-.tina-prose [data-slate-editor='true'] .slate-code_block .slate-code {
+.tina-prose [data-slate-editor="true"] .slate-code_block .slate-code {
   background: none;
 }
 /* prose makes the first p in a block slightly larger */
-.tina-prose [data-slate-editor='true'] p:first-of-type {
+.tina-prose [data-slate-editor="true"] p:first-of-type {
   font-size: 1em;
 }
 
 /* experimental floating toolbar doesn't need a large text area */
-.with-toolbar [data-slate-editor='true'] {
+.with-toolbar [data-slate-editor="true"] {
   min-height: 72px;
 }
 
@@ -190,7 +190,7 @@ div.graphiql-explorer-root > div:last-child {
 }
 
 .tina-date-field .rdtPicker td.rdtToday:before {
-  content: '';
+  content: "";
   display: inline-block;
   border-left: 7px solid transparent;
   border-bottom: 7px solid var(--tina-color-primary);

package/src/lib/build-form.ts

@@ -1,42 +1,42 @@
-import { Field, Form, FormOptions, TinaCMS, TinaField } from 'tinacms'
+import { Field, Form, FormOptions, TinaCMS, TinaField } from 'tinacms';
 
-export type FieldType = Field & TinaField
-export type FormValues = Record<string, unknown>
-export type FormType = Form<FormValues, FieldType>
+export type FieldType = Field & TinaField;
+export type FormValues = Record<string, unknown>;
+export type FormType = Form<FormValues, FieldType>;
 
-type FormCreator = (formConfig: FormOptions<any>) => Form
+type FormCreator = (formConfig: FormOptions<any>) => Form;
 interface GlobalFormOptions {
-  icon?: any
-  layout: 'fullscreen' | 'popup'
+  icon?: any;
+  layout: 'fullscreen' | 'popup';
 }
 type GlobalFormCreator = (
   formConfig: FormOptions<any>,
   options?: GlobalFormOptions
-) => Form
+) => Form;
 interface GlobalFormOptions {
-  icon?: any
-  layout: 'fullscreen' | 'popup'
+  icon?: any;
+  layout: 'fullscreen' | 'popup';
 }
 export interface FormifyArgs {
-  formConfig: FormOptions<any>
-  createForm: FormCreator
-  createGlobalForm: FormCreator
-  skip?: () => void
+  formConfig: FormOptions<any>;
+  createForm: FormCreator;
+  createGlobalForm: FormCreator;
+  skip?: () => void;
 }
 
-export type FormifyCallback = (args: FormifyArgs, cms: TinaCMS) => Form | void
+export type FormifyCallback = (args: FormifyArgs, cms: TinaCMS) => Form | void;
 export type onSubmitArgs = {
   /**
    * @deprecated queryString is actually a mutation string, use `mutationString` instead
    */
-  queryString: string
-  mutationString: string
-  variables: object
-}
+  queryString: string;
+  mutationString: string;
+  variables: object;
+};
 
 export const createForm = (formConfig: FormOptions<any, any>) => {
-  return new Form(formConfig)
-}
+  return new Form(formConfig);
+};
 export const createGlobalForm: GlobalFormCreator = (
   formConfig,
   options?: { icon?: any; layout: 'fullscreen' | 'popup' }
@@ -44,6 +44,6 @@ export const createGlobalForm: GlobalFormCreator = (
   const form = new Form({
     ...formConfig,
     global: { global: true, ...options },
-  })
-  return form
-}
+  });
+  return form;
+};

package/src/lib/errors.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
-import { TinaCMS } from 'tinacms'
+import React from 'react';
+import { TinaCMS } from 'tinacms';
 
 const ErrorModalContent = (props: { title: string; errors: string[] }) => {
-  const { title, errors } = props
+  const { title, errors } = props;
   return (
     <>
       <div>{title}</div>
@@ -12,13 +12,13 @@ const ErrorModalContent = (props: { title: string; errors: string[] }) => {
         ))}
       </ul>
     </>
-  )
-}
+  );
+};
 
 export const showErrorModal = (
   title: string,
   errors: string[],
   cms: TinaCMS
 ) => {
-  cms.alerts.error(() => <ErrorModalContent title={title} errors={errors} />)
-}
+  cms.alerts.error(() => <ErrorModalContent title={title} errors={errors} />);
+};