Merge pull request #3357 from udecode/sync-shadcn

Sync shadcn

.nvmrc

@@ -1 +1 @@
-18
+v20.12.1

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

@@ -8,6 +8,12 @@ Since Plate UI is not a component library, a changelog is maintained here.
 
 Use the [CLI](https://platejs.org/docs/components/cli) to install the latest version of the components.
 
+## July 2024 #12
+
+### July 12 #12.1
+
+- `fixed-toolbar`: `top-0`
+
 ## June 2024 #11
 
 ### June 23 #11.3

apps/www/content/docs/components/installation/next.mdx

@@ -32,13 +32,7 @@ You will be asked a few questions to configure `plate-components.json`:
 ```txt showLineNumbers
 Which style would you like to use? › Default
 Which color would you like to use as base color? › Slate
-Where is your global CSS file? › src/style/globals.css
 Do you want to use CSS variables for colors? › no / yes
-Are you using a custom tailwind prefix eg. tw-? (Leave blank if not) ...
-Where is your tailwind.config.js located? › tailwind.config.js
-Configure the import alias for components: › @/components
-Configure the import alias for ui: › @/components/plate-ui
-Are you using React Server Components? › no / yes
 ```
 
 ### Fonts

apps/www/contentlayer.config.js

@@ -1,21 +1,21 @@
+import { getHighlighter, loadTheme } from '@shikijs/compat';
 import {
   defineDocumentType,
   defineNestedType,
   makeSource,
-} from 'contentlayer/source-files';
+} from 'contentlayer2/source-files';
 import path from 'node:path';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 import rehypePrettyCode from 'rehype-pretty-code';
 import rehypeSlug from 'rehype-slug';
 import { codeImport } from 'remark-code-import';
 import remarkGfm from 'remark-gfm';
-import { getHighlighter, loadTheme } from 'shiki';
 import { visit } from 'unist-util-visit';
 
 import { rehypeComponent } from './src/lib/rehype-component';
 import { rehypeNpmCommand } from './src/lib/rehype-npm-command';
 
-/** @type {import('contentlayer/source-files').ComputedFields} */
+/** @type {import('contentlayer2/source-files').ComputedFields} */
 const computedFields = {
   slug: {
     resolve: (doc) => `/${doc._raw.flattenedPath}`,

apps/www/next.config.js → apps/www/next.config.mjs

@@ -1,5 +1,4 @@
-const { withAxiomNextConfig } = require('next-axiom');
-// import { createContentlayerPlugin } from 'next-contentlayer';
+import { globSync } from 'glob';
 
 const nextConfig = async (phase, { defaultConfig }) => {
   /** @type {import('next').NextConfig} */
@@ -86,11 +85,8 @@ const nextConfig = async (phase, { defaultConfig }) => {
 
   if (phase === 'phase-development-server') {
     const fs = await import('node:fs');
-    const glob = await import('glob').then((mod) => mod.default);
 
-    const packageNames = new glob.GlobSync(
-      '../../packages/**/package.json'
-    ).found
+    const packageNames = new globSync('../../packages/**/package.json')
       .map((file) => {
         try {
           const packageJson = JSON.parse(fs.readFileSync(file, 'utf8'));
@@ -108,4 +104,4 @@ const nextConfig = async (phase, { defaultConfig }) => {
   return config;
 };
 
-module.exports = withAxiomNextConfig(nextConfig);
+export default nextConfig;

apps/www/package.json

@@ -3,12 +3,13 @@
   "version": "0.0.1",
   "private": true,
   "description": "A simple NextJS app with Plate",
+  "type": "module",
   "scripts": {
     "prebuild": "yarn build:contentlayer",
     "build": "yarn prebuild && yarn build:registry && next build",
-    "build:contentlayer": "contentlayer build",
-    "build:registry": "tsx --tsconfig ./scripts/tsconfig.scripts.json ./scripts/build-registry.ts",
-    "dev": "concurrently \"contentlayer dev\" \"NODE_OPTIONS=--max-old-space-size=16192 next dev\"",
+    "build:contentlayer": "contentlayer2 build",
+    "build:registry": "tsx --tsconfig ./scripts/tsconfig.scripts.json scripts/build-registry.mts",
+    "dev": "concurrently \"contentlayer2 dev\" \"NODE_OPTIONS=--max-old-space-size=16192 next dev\"",
     "dev:quick": "NODE_OPTIONS=--max-old-space-size=16192 next dev",
     "lint": "npx eslint . --ext .js,.jsx,.ts,.tsx",
     "lint:debug": "TIMING=1 DEBUG=eslint:cli-engine yarn lint:fix",
@@ -129,15 +130,14 @@
     "@vercel/analytics": "^1.2.2",
     "@vercel/og": "^0.6.2",
     "class-variance-authority": "^0.7.0",
-    "cmdk": "^0.2.1",
-    "contentlayer": "0.3.4",
+    "cmdk": "^0.2.0",
+    "contentlayer2": "^0.4.6",
     "date-fns": "^2.30.0",
     "framer-motion": "^10.18.0",
     "lodash.template": "^4.5.0",
-    "lucide-react": "^0.288.0",
-    "next": "14.1.4",
-    "next-axiom": "^1.1.1",
-    "next-contentlayer": "0.3.4",
+    "lucide-react": "^0.408.0",
+    "next": "14.3.0-canary.43",
+    "next-contentlayer2": "^0.4.6",
     "next-themes": "^0.2.1",
     "nuqs": "^1.17.1",
     "prism-react-renderer": "^1.3.5",
@@ -147,6 +147,7 @@
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.2.0",
     "react-lite-youtube-embed": "^2.4.0",
+    "react-resizable-panels": "^0.0.55",
     "react-syntax-highlighter": "^15.5.0",
     "react-tweet": "^3.2.0",
     "react-wrap-balancer": "^1.1.0",
@@ -157,16 +158,21 @@
     "slate-react": "0.102.0",
     "slate-test-utils": "1.3.2",
     "sonner": "^1.4.32",
+    "swr": "2.2.6-beta.3",
     "tailwind-merge": "^2.2.2",
+    "ts-morph": "^22.0.0",
     "unist-builder": "4.0.0",
-    "unist-util-visit": "^5.0.0"
+    "unist-util-visit": "^5.0.0",
+    "vaul": "^0.9.1"
   },
   "devDependencies": {
+    "@shikijs/compat": "^1.1.7",
     "@types/lodash.template": "^4.5.3",
     "@types/react-color": "^3.0.12",
     "@types/react-syntax-highlighter": "^15.5.11",
     "autoprefixer": "^10.4.18",
     "concurrently": "^8.2.2",
+    "glob": "^11.0.0",
     "mdast-util-toc": "^6.1.1",
     "postcss": "^8.4.38",
     "rehype": "^12.0.1",
@@ -175,14 +181,13 @@
     "rehype-slug": "^5.1.0",
     "remark": "^14.0.3",
     "remark-code-import": "^1.2.0",
-    "remark-gfm": "^3.0.1",
+    "remark-gfm": "^4.0.0",
     "rimraf": "^5.0.5",
-    "shiki": "^0.12.1",
+    "shiki": "^1.10.1",
     "tailwindcss": "^3.4.1",
     "tailwindcss-animate": "^1.0.7",
     "ts-node": "^10.9.2",
     "tsx": "^4.7.1",
-    "typescript": "5.4.2",
-    "vaul": "^0.9.0"
+    "typescript": "5.4.2"
   }
 }

apps/www/public/registry/index.json

@@ -648,17 +648,6 @@
     "registryDependencies": [],
     "type": "components:plate-ui"
   },
-  {
-    "dependencies": [
-      "@udecode/plate-mention"
-    ],
-    "files": [
-      "plate-ui/mention-element.tsx"
-    ],
-    "name": "mention-element",
-    "registryDependencies": [],
-    "type": "components:plate-ui"
-  },
   {
     "dependencies": [
       "@udecode/plate-mention"

apps/www/public/registry/styles/default/command.json

@@ -4,7 +4,7 @@
   ],
   "files": [
     {
-      "content": "'use client';\n\nimport * as React from 'react';\n\nimport type { DialogProps } from '@radix-ui/react-dialog';\n\nimport { cn, createPrimitiveElement, withCn, withRef } from '@udecode/cn';\nimport { Command as CommandPrimitive } from 'cmdk';\n\nimport { Icons } from '@/components/icons';\n\nimport { Dialog, DialogContent } from './dialog';\n\nexport const Command = withCn(\n  CommandPrimitive,\n  'flex size-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground'\n);\n\nexport function CommandDialog({ children, ...props }: DialogProps) {\n  return (\n    <Dialog {...props}>\n      <DialogContent className=\"overflow-hidden p-0 shadow-lg\">\n        <Command className=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\nexport const CommandInput = withRef<typeof CommandPrimitive.Input>(\n  ({ className, ...props }, ref) => (\n    <div className=\"flex items-center border-b px-3\" cmdk-input-wrapper=\"\">\n      <Icons.search className=\"mr-2 size-4 shrink-0 opacity-50\" />\n      <CommandPrimitive.Input\n        className={cn(\n          'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',\n          className\n        )}\n        ref={ref}\n        {...props}\n      />\n    </div>\n  )\n);\n\nexport const CommandList = withCn(\n  CommandPrimitive.List,\n  'max-h-[500px] overflow-y-auto overflow-x-hidden'\n);\n\nexport const CommandEmpty = withCn(\n  CommandPrimitive.Empty,\n  'py-6 text-center text-sm'\n);\n\nexport const CommandGroup = withCn(\n  CommandPrimitive.Group,\n  'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground'\n);\n\nexport const CommandSeparator = withCn(\n  CommandPrimitive.Separator,\n  '-mx-1 h-px bg-border'\n);\n\nexport const CommandItem = withCn(\n  CommandPrimitive.Item,\n  'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50'\n);\n\nexport const CommandShortcut = withCn(\n  createPrimitiveElement('span'),\n  'ml-auto text-xs tracking-widest text-muted-foreground'\n);\n",
+      "content": "'use client';\n\nimport * as React from 'react';\n\nimport type { DialogProps } from '@radix-ui/react-dialog';\n\nimport { cn, createPrimitiveElement, withCn, withRef } from '@udecode/cn';\nimport { Command as CommandPrimitive } from 'cmdk';\n\nimport { Icons } from '@/components/icons';\n\nimport { Dialog, DialogContent } from './dialog';\n\nexport const Command = withCn(\n  CommandPrimitive,\n  'flex size-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground'\n);\n\nexport function CommandDialog({ children, ...props }: DialogProps) {\n  return (\n    <Dialog {...props}>\n      <DialogContent className=\"overflow-hidden p-0 shadow-lg\">\n        <Command className=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\nexport const CommandInput = withRef<typeof CommandPrimitive.Input>(\n  ({ className, ...props }, ref) => (\n    <div className=\"flex items-center border-b px-3\" cmdk-input-wrapper=\"\">\n      <Icons.search className=\"mr-2 size-4 shrink-0 opacity-50\" />\n      <CommandPrimitive.Input\n        className={cn(\n          'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',\n          className\n        )}\n        ref={ref}\n        {...props}\n      />\n    </div>\n  )\n);\n\nexport const CommandList = withCn(\n  CommandPrimitive.List,\n  'max-h-[500px] overflow-y-auto overflow-x-hidden'\n);\n\nexport const CommandEmpty = withCn(\n  CommandPrimitive.Empty,\n  'py-6 text-center text-sm'\n);\n\nexport const CommandGroup = withCn(\n  CommandPrimitive.Group,\n  'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground'\n);\n\nexport const CommandSeparator = withCn(\n  CommandPrimitive.Separator,\n  '-mx-1 h-px bg-border'\n);\n\nexport const CommandItem = withCn(\n  CommandPrimitive.Item,\n  'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50'\n);\n\nexport const CommandShortcut = withCn(\n  createPrimitiveElement('span'),\n  'ml-auto text-xs tracking-widest text-muted-foreground'\n);\n",
       "name": "command.tsx"
     }
   ],