@tinacms/app 0.0.0-4c2c724-20250521232559 → 0.0.0-4ddd310-20250618051738

package/CHANGELOG.md

@@ -1,12 +1,26 @@
 # @tinacms/app
 
-## 0.0.0-4c2c724-20250521232559
+## 0.0.0-4ddd310-20250618051738
+
+### Minor Changes
+
+- [#5744](https://github.com/tinacms/tinacms/pull/5744) [`d774d98`](https://github.com/tinacms/tinacms/commit/d774d987933bcb2cd0a434eeb59aada05467276a) Thanks [@Ben0189](https://github.com/Ben0189)! - Upgrade Plate editor to v48 beta, integrating latest features and improvements.
 
 ### Patch Changes
 
-- Updated dependencies [[`5e36123`](https://github.com/tinacms/tinacms/commit/5e361239a372e21dda624d17b4ff274bab23ce90)]:
-  - tinacms@0.0.0-4c2c724-20250521232559
-  - @tinacms/mdx@1.6.2
+- [#5741](https://github.com/tinacms/tinacms/pull/5741) [`0e9de37`](https://github.com/tinacms/tinacms/commit/0e9de379dab2970206b9b60eb014808662f67287) Thanks [@wicksipedia](https://github.com/wicksipedia)! - CMS admin UI - Refactor Sidebar and Branch Button Components
+  Forms header - Adds breadcrumb navigation
+- Updated dependencies [[`d774d98`](https://github.com/tinacms/tinacms/commit/d774d987933bcb2cd0a434eeb59aada05467276a), [`2a3ed6c`](https://github.com/tinacms/tinacms/commit/2a3ed6c3ec3233fd90fd94f3dd3d0243aaad079a), [`bc47f93`](https://github.com/tinacms/tinacms/commit/bc47f938431c400714808613f633b05659a87be1), [`0e9de37`](https://github.com/tinacms/tinacms/commit/0e9de379dab2970206b9b60eb014808662f67287), [`468f0ee`](https://github.com/tinacms/tinacms/commit/468f0eefc0a15a9a9a23737d29ea9a5cb5c6aef6), [`dbef36f`](https://github.com/tinacms/tinacms/commit/dbef36f594b949024d5525184b6a9e1b9085b759), [`3ba6d78`](https://github.com/tinacms/tinacms/commit/3ba6d78f35f817d55bfc3d12b750e54b7e0d11f2)]:
+  - @tinacms/mdx@0.0.0-4ddd310-20250618051738
+  - tinacms@0.0.0-4ddd310-20250618051738
+
+## 2.2.8
+
+### Patch Changes
+
+- Updated dependencies [[`5e36123`](https://github.com/tinacms/tinacms/commit/5e361239a372e21dda624d17b4ff274bab23ce90), [`856e07a`](https://github.com/tinacms/tinacms/commit/856e07a0b8d742ee78d5eba565623cf081a61534), [`4d9c8ab`](https://github.com/tinacms/tinacms/commit/4d9c8abf6badd1bcc833bda432ab22dace4925ae), [`7346dc9`](https://github.com/tinacms/tinacms/commit/7346dc996fd81ecb395b62f373976512e8224c21)]:
+  - tinacms@2.7.8
+  - @tinacms/mdx@1.6.3
 
 ## 2.2.7
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tinacms/app",
-  "version": "0.0.0-4c2c724-20250521232559",
+  "version": "0.0.0-4ddd310-20250618051738",
   "main": "src/main.tsx",
   "license": "Apache-2.0",
   "devDependencies": {
@@ -16,15 +16,17 @@
     "@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/react": "4.4.5",
     "final-form": "4.20.10",
     "graphiql": "3.0.0-alpha.1",
     "graphql": "15.8.0",
     "monaco-editor": "0.31.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-router-dom": "6.3.0",
     "typescript": "^5.7.3",
     "zod": "^3.24.2",
-    "@tinacms/mdx": "1.6.2",
-    "tinacms": "0.0.0-4c2c724-20250521232559"
+    "@tinacms/mdx": "0.0.0-4ddd310-20250618051738",
+    "tinacms": "0.0.0-4ddd310-20250618051738"
   }
 }

package/src/Playground.tsx

@@ -100,7 +100,7 @@ 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') {

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

@@ -1,16 +1,16 @@
-/**
-
-
-
-*/
-import React from 'react';
-import { XCircleIcon } from '@heroicons/react/solid';
 import {
   Popover,
   PopoverButton,
   PopoverPanel,
   Transition,
 } 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: '' };
@@ -93,7 +93,7 @@ export function ErrorMessage({ error }: { error: InvalidMarkdownElement }) {
           >
             <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='rounded bg-red-50 p-4 overflow-scroll'>
                   <div className='flex'>
                     <div className='flex-shrink-0'>
                       <XCircleIcon

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

@@ -1,9 +1,3 @@
-/**
-
-
-
-*/
-
 import React from 'react';
 import MonacoEditor, { useMonaco, loader } from '@monaco-editor/react';
 /**
@@ -13,14 +7,14 @@ import MonacoEditor, { useMonaco, loader } from '@monaco-editor/react';
  * (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 { RichTextType } from 'tinacms';
 import {
-  buildError,
   ErrorMessage,
   InvalidMarkdownElement,
+  buildError,
 } from './error-message';
-import { RichTextType } from 'tinacms';
+import { useDebounce } from './use-debounce';
 
 export const uuid = () => {
   // @ts-ignore
@@ -34,11 +28,6 @@ export const uuid = () => {
 
 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.
@@ -149,13 +138,17 @@ export const RawEditor = (props: RichTextType) => {
     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 (
@@ -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.
@@ -219,10 +215,8 @@ 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`}
+        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}
     >

package/src/index.css

@@ -13,6 +13,10 @@
   fill: currentColor;
 }
 
+.font-libre-baskerville {
+  font-family: "Libre Baskerville", serif;
+}
+
 body {
   margin: 0;
   padding: 0;