fix

Author: zbeyens

apps/www/content/docs/components/changelog.mdx

@@ -51,7 +51,7 @@ screens: {
   - remove `DragOverCursorPlugin`, `SelectionOverlayPlugin`. Use `@udecode/plate-selection` instead.
 - `ghost-text`: hide for xs media, add `pointer-events-none`
 - `floating-toolbar`: add `overflow-x-auto scrollbar-hide` to allow horizontal scrolling (mobile)
-- `fixed-toolbar`: add `scrollbar-hide`, update from `sticky` to `absolute`
+- `fixed-toolbar`: add `scrollbar-hide`
 - `emoji-picker-content`: add emoji font
 - `column-element`: add `w-full` as default
 - New hook: `use-is-touch-device`

apps/www/public/r/styles/default/fixed-toolbar.json

@@ -8,7 +8,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport { withCn } from '@udecode/cn';\n\nimport { Toolbar } from './toolbar';\n\nexport const FixedToolbar = withCn(\n  Toolbar,\n  'supports-backdrop-blur:bg-background/60 absolute left-0 top-0 z-50 w-full justify-between overflow-x-auto rounded-t-lg border-b border-b-border bg-background/95 p-1 backdrop-blur scrollbar-hide'\n);\n",
+      "content": "'use client';\n\nimport { withCn } from '@udecode/cn';\n\nimport { Toolbar } from './toolbar';\n\nexport const FixedToolbar = withCn(\n  Toolbar,\n  'supports-backdrop-blur:bg-background/60 sticky left-0 top-0 z-50 w-full justify-between overflow-x-auto rounded-t-lg border-b border-b-border bg-background/95 p-1 backdrop-blur scrollbar-hide'\n);\n",
       "path": "plate-ui/fixed-toolbar.tsx",
       "target": "components/plate-ui/fixed-toolbar.tsx",
       "type": "registry:ui"

apps/www/src/app/(blocks)/blocks/playground/page.tsx

@@ -18,7 +18,7 @@ export default function PlaygroundPage() {
       className={cn('themes-wrapper bg-background', block.container?.className)}
     >
       {/* <BlockWrapper block={block}> */}
-      <PlaygroundDemo className="h-dvh" />
+      <PlaygroundDemo className="h-dvh [&_[data-slate-editor]]:h-[calc(100dvh-37px)]" />
       {/* {chunks?.map((chunk, index) => (
           <BlockChunk
             key={chunk.name}

apps/www/src/components/component-installation.tsx

@@ -82,9 +82,12 @@ export function ComponentInstallation({
     </>
   );
 
+  if (!files[0]) {
+    console.log(files[0]);
+  }
   if (codeTabs) {
     return (
-      <Tabs className="relative w-full" defaultValue={files[0].name}>
+      <Tabs className="relative w-full" defaultValue={files[0]?.name}>
         <TabsList className="w-full justify-start rounded-none border-b bg-transparent p-0">
           {files.map((file: any) => (
             <TabsTrigger

apps/www/src/registry/default/example/playground-demo.tsx

@@ -104,7 +104,7 @@ export default function PlaygroundDemo({
         >
           <Editor
             variant="demo"
-            className={cn(!id && 'pb-[20vh]', id && 'pb-8')}
+            className={cn(!id && 'pb-[20vh]', id && 'h-[463px] pb-8')}
             spellCheck={false}
           />
         </EditorContainer>

apps/www/src/registry/default/plate-ui/editor.tsx

@@ -14,7 +14,7 @@ import {
 import { cva } from 'class-variance-authority';
 
 const editorContainerVariants = cva(
-  'relative flex w-full cursor-text overflow-y-auto caret-primary selection:bg-brand/25 [&_.slate-selection-area]:border [&_.slate-selection-area]:border-brand/25 [&_.slate-selection-area]:bg-brand/15',
+  'relative w-full cursor-text overflow-y-auto caret-primary selection:bg-brand/25 [&_.slate-selection-area]:border [&_.slate-selection-area]:border-brand/25 [&_.slate-selection-area]:bg-brand/15',
   {
     defaultVariants: {
       variant: 'default',
@@ -80,7 +80,7 @@ const editorVariants = cva(
           'max-h-[min(70vh,320px)] w-full max-w-[700px] overflow-y-auto px-3 py-2 text-sm',
         default:
           'min-h-full w-full px-16 pb-72 pt-4 text-base sm:px-[max(64px,calc(50%-350px))]',
-        demo: 'min-h-full w-full px-16 pb-72 pt-14 text-base sm:px-[max(64px,calc(50%-350px))]',
+        demo: 'h-[613px] w-full px-16 pb-72 pt-4 text-base sm:px-[max(64px,calc(50%-350px))]',
         fullWidth: 'min-h-full w-full px-16 pb-72 pt-4 text-base sm:px-24',
       },
     },

apps/www/src/registry/default/plate-ui/fixed-toolbar.tsx

@@ -6,5 +6,5 @@ import { Toolbar } from './toolbar';
 
 export const FixedToolbar = withCn(
   Toolbar,
-  'supports-backdrop-blur:bg-background/60 absolute left-0 top-0 z-50 w-full justify-between overflow-x-auto rounded-t-lg border-b border-b-border bg-background/95 p-1 backdrop-blur scrollbar-hide'
+  'supports-backdrop-blur:bg-background/60 sticky left-0 top-0 z-50 w-full justify-between overflow-x-auto rounded-t-lg border-b border-b-border bg-background/95 p-1 backdrop-blur scrollbar-hide'
 );