Sync shadcn

.eslintrc.cjs

@@ -34,7 +34,7 @@ module.exports = {
     '.out',
     '**/*.mdx',
     '**/__registry__',
-    '**/scripts/build-registry.mts',
+    '**/scripts/*.mts',
   ],
   overrides: [
     {

apps/www/content/docs/components/code-block-element.mdx

@@ -45,7 +45,8 @@ Copy and paste the following code into your project.
 </Step>
 
 <ComponentSource name="code-block-element" />
-<ComponentSource src="../../templates/plate-playground-template/src/components/plate-ui/code-block-element.css" />
+<ComponentSource name="code-block-element.css" src="src/registry/default/plate-ui/code-block-element.css" />
+<ComponentSource name="code-block-combobox.tsx" src="src/registry/default/plate-ui/code-block-combobox.tsx" />
 
 <Step>
 

apps/www/content/docs/components/color-dropdown-menu.mdx

@@ -56,11 +56,11 @@ Copy and paste the following code into your project.
 </Step>
 
 <ComponentSource name="color-dropdown-menu" />
-<ComponentSource name="color-dropdown-menu-items" />
-<ComponentSource name="color-constants" />
-<ComponentSource name="color-input" />
-<ComponentSource name="color-picker" />
-<ComponentSource name="colors-custom" />
+<ComponentSource name="color-dropdown-menu-items" src="src/registry/default/plate-ui/color-dropdown-menu-items.tsx" />
+<ComponentSource name="color-constants" src="src/registry/default/plate-ui/color-constants.ts" />
+<ComponentSource name="color-input" src="src/registry/default/plate-ui/color-input.tsx" />
+<ComponentSource name="color-picker" src="src/registry/default/plate-ui/color-picker.tsx" />
+<ComponentSource name="colors-custom" src="src/registry/default/plate-ui/colors-custom.tsx" />
 
 <Step>
 

apps/www/content/docs/components/comments-popover.mdx

@@ -51,14 +51,15 @@ Copy and paste the following code into your project.
 
 </Step>
 
-<ComponentSource name="comment-avatar" />
-<ComponentSource name="comment-create-form" />
-<ComponentSource name="comment-item" />
-<ComponentSource name="comment-more-dropdown" />
-<ComponentSource name="comment-reply-items" />
-<ComponentSource name="comment-resolve-button" />
-<ComponentSource name="comment-value" />
 <ComponentSource name="comments-popover" />
+<ComponentSource name="comment-avatar" src="src/registry/default/plate-ui/comment-avatar.tsx" />
+<ComponentSource name="comment-create-form" src="src/registry/default/plate-ui/comment-create-form.tsx" />
+<ComponentSource name="comment-item" src="src/registry/default/plate-ui/comment-item.tsx" />
+<ComponentSource name="comment-more-dropdown" src="src/registry/default/plate-ui/comment-more-dropdown.tsx" />
+<ComponentSource name="comment-reply-items" src="src/registry/default/plate-ui/comment-reply-items.tsx" />
+<ComponentSource name="comment-resolve-button" src="src/registry/default/plate-ui/comment-resolve-button.tsx" />
+<ComponentSource name="comment-value" src="src/registry/default/plate-ui/comment-value.tsx" />
+
 
 <Step>
 

apps/www/content/docs/components/emoji-dropdown-menu.mdx

@@ -49,13 +49,13 @@ Copy and paste the following code into your project.
 </Step>
 
 <ComponentSource name="emoji-dropdown-menu" />
-<ComponentSource src="src/registry/default/plate-ui/emoji-icons.tsx" />
-<ComponentSource src="src/registry/default/plate-ui/emoji-picker.tsx" />
-<ComponentSource src="src/registry/default/plate-ui/emoji-picker-content.tsx" />
-<ComponentSource src="src/registry/default/plate-ui/emoji-picker-navigation.tsx" />
-<ComponentSource src="src/registry/default/plate-ui/emoji-picker-preview.tsx" />
-<ComponentSource src="src/registry/default/plate-ui/emoji-picker-search-and-clear.tsx" />
-<ComponentSource src="src/registry/default/plate-ui/emoji-picker-search-bar.tsx" />
+<ComponentSource name="emoji-icons" src="src/registry/default/plate-ui/emoji-icons.tsx" />
+<ComponentSource name="emoji-picker" src="src/registry/default/plate-ui/emoji-picker.tsx" />
+<ComponentSource name="emoji-picker-content" src="src/registry/default/plate-ui/emoji-picker-content.tsx" />
+<ComponentSource name="emoji-picker-navigation" src="src/registry/default/plate-ui/emoji-picker-navigation.tsx" />
+<ComponentSource name="emoji-picker-preview" src="src/registry/default/plate-ui/emoji-picker-preview.tsx" />
+<ComponentSource name="emoji-picker-search-and-clear" src="src/registry/default/plate-ui/emoji-picker-search-and-clear.tsx" />
+<ComponentSource name="emoji-picker-search-bar" src="src/registry/default/plate-ui/emoji-picker-search-bar.tsx" />
 
 <Step>
 

apps/www/content/docs/components/emoji-toolbar-dropdown.mdx

@@ -40,7 +40,7 @@ Copy and paste the following code into your project.
 
 </Step>
 
-<ComponentSource name="emoji-toolbar-dropdown" />
+<ComponentSource name="emoji-toolbar-dropdown" src="src/registry/default/plate-ui/emoji-toolbar-dropdown.tsx" />
 
 <Step>
 

apps/www/contentlayer.config.js

@@ -1,10 +1,9 @@
-import { getHighlighter, loadTheme } from '@shikijs/compat';
+import { getHighlighter } from '@shikijs/compat';
 import {
   defineDocumentType,
   defineNestedType,
   makeSource,
 } 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';
@@ -130,13 +129,8 @@ export default makeSource({
       [
         rehypePrettyCode,
         {
-          getHighlighter: async () => {
-            const theme = await loadTheme(
-              path.join(process.cwd(), '/src/lib/highlighter-theme.json')
-            );
-
-            return await getHighlighter({ theme });
-          },
+          getHighlighter,
+          theme: 'github-dark',
           onVisitHighlightedLine(node) {
             node.properties.className.push('line--highlighted');
           },

apps/www/package.json

@@ -178,6 +178,7 @@
     "glob": "^11.0.0",
     "mdast-util-toc": "^7.1.0",
     "postcss": "^8.4.45",
+    "puppeteer": "^23.6.0",
     "rehype": "^12.0.1",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-pretty-code": "^0.6.0",

apps/www/public/r/index.json

@@ -39,40 +39,6 @@
     ],
     "type": "registry:ui"
   },
-  {
-    "dependencies": [
-      "@udecode/plate-cloud"
-    ],
-    "files": [
-      {
-        "path": "plate-ui/cloud.tsx",
-        "type": "registry:ui"
-      },
-      {
-        "path": "plate-ui/cloud-attachment-element.tsx",
-        "type": "registry:ui"
-      },
-      {
-        "path": "plate-ui/cloud-image-element.tsx",
-        "type": "registry:ui"
-      },
-      {
-        "path": "plate-ui/cloud-resize-controls.tsx",
-        "type": "registry:ui"
-      },
-      {
-        "path": "plate-ui/cloud-status-bar.tsx",
-        "type": "registry:ui"
-      },
-      {
-        "path": "plate-ui/cloud-toolbar-buttons.tsx",
-        "type": "registry:ui"
-      }
-    ],
-    "name": "cloud",
-    "registryDependencies": [],
-    "type": "registry:ui"
-  },
   {
     "dependencies": [
       "@udecode/plate-code-block"

apps/www/public/r/styles/default/align-dropdown-menu.json

@@ -6,7 +6,7 @@
     {
       "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport {\n  useAlignDropdownMenu,\n  useAlignDropdownMenuState,\n} from '@udecode/plate-alignment/react';\n\nimport { Icons, iconVariants } from '@/components/icons';\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuTrigger,\n  useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nconst items = [\n  {\n    icon: Icons.alignLeft,\n    value: 'left',\n  },\n  {\n    icon: Icons.alignCenter,\n    value: 'center',\n  },\n  {\n    icon: Icons.alignRight,\n    value: 'right',\n  },\n  {\n    icon: Icons.alignJustify,\n    value: 'justify',\n  },\n];\n\nexport function AlignDropdownMenu({ children, ...props }: DropdownMenuProps) {\n  const state = useAlignDropdownMenuState();\n  const { radioGroupProps } = useAlignDropdownMenu(state);\n\n  const openState = useOpenState();\n  const IconValue =\n    items.find((item) => item.value === radioGroupProps.value)?.icon ??\n    Icons.alignLeft;\n\n  return (\n    <DropdownMenu modal={false} {...openState} {...props}>\n      <DropdownMenuTrigger asChild>\n        <ToolbarButton pressed={openState.open} tooltip=\"Align\" isDropdown>\n          <IconValue />\n        </ToolbarButton>\n      </DropdownMenuTrigger>\n\n      <DropdownMenuContent className=\"min-w-0\" align=\"start\">\n        <DropdownMenuRadioGroup\n          className=\"flex flex-col gap-0.5\"\n          {...radioGroupProps}\n        >\n          {items.map(({ icon: Icon, value: itemValue }) => (\n            <DropdownMenuRadioItem key={itemValue} value={itemValue} hideIcon>\n              <Icon className={iconVariants({ variant: 'toolbar' })} />\n            </DropdownMenuRadioItem>\n          ))}\n        </DropdownMenuRadioGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
       "path": "plate-ui/align-dropdown-menu.tsx",
-      "target": "",
+      "target": "components/plate-ui/align-dropdown-menu.tsx",
       "type": "registry:ui"
     }
   ],

apps/www/public/r/styles/default/avatar.json

@@ -6,7 +6,7 @@
     {
       "content": "'use client';\n\nimport * as AvatarPrimitive from '@radix-ui/react-avatar';\nimport { withCn } from '@udecode/cn';\n\nexport const Avatar = withCn(\n  AvatarPrimitive.Root,\n  'relative flex size-10 shrink-0 overflow-hidden rounded-full'\n);\n\nexport const AvatarImage = withCn(\n  AvatarPrimitive.Image,\n  'aspect-square size-full'\n);\n\nexport const AvatarFallback = withCn(\n  AvatarPrimitive.Fallback,\n  'flex size-full items-center justify-center rounded-full bg-muted'\n);\n",
       "path": "plate-ui/avatar.tsx",
-      "target": "",
+      "target": "components/plate-ui/avatar.tsx",
       "type": "registry:ui"
     }
   ],

apps/www/public/r/styles/default/basic-editor-default-demo.json

@@ -0,0 +1,13 @@
+{
+  "files": [
+    {
+      "content": "import React from 'react';\n\nimport {\n  Plate,\n  PlateContent,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\n\nexport default function BasicEditorDefaultDemo() {\n  const editor = usePlateEditor();\n\n  return (\n    <Plate editor={editor}>\n      <PlateContent placeholder=\"Type...\" />\n    </Plate>\n  );\n}\n",
+      "path": "example/basic-editor-default-demo.tsx",
+      "target": "components/basic-editor-default-demo.tsx",
+      "type": "registry:example"
+    }
+  ],
+  "name": "basic-editor-default-demo",
+  "registryDependencies": [],
+  "type": "registry:example"
+}

apps/www/public/r/styles/default/basic-editor-handler-demo.json

@@ -0,0 +1,13 @@
+{
+  "files": [
+    {
+      "content": "import React, { useState } from 'react';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from '@/components/ui/accordion';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { Editor } from '@/components/plate-ui/editor';\n\nconst value = [\n  {\n    children: [\n      {\n        text: 'This is editable plain text with react and history plugins, just like a textarea!',\n      },\n    ],\n    type: 'p',\n  },\n];\n\nexport default function BasicEditorHandlerDemo() {\n  const [debugValue, setDebugValue] = useState<Value>(value);\n\n  const localValue =\n    typeof window !== 'undefined' && localStorage.getItem('editorContent');\n\n  const editor = usePlateEditor({\n    value: localValue ? JSON.parse(localValue) : value,\n  });\n\n  return (\n    <Plate\n      onChange={({ value }) => {\n        localStorage.setItem('editorContent', JSON.stringify(value));\n        setDebugValue(value);\n      }}\n      editor={editor}\n    >\n      <Editor {...editableProps} />\n\n      <Accordion type=\"single\" collapsible>\n        <AccordionItem value=\"manual-installation\">\n          <AccordionTrigger>Debug Value</AccordionTrigger>\n          <AccordionContent>{JSON.stringify(debugValue)}</AccordionContent>\n        </AccordionItem>\n      </Accordion>\n    </Plate>\n  );\n}\n",
+      "path": "example/basic-editor-handler-demo.tsx",
+      "target": "components/basic-editor-handler-demo.tsx",
+      "type": "registry:example"
+    }
+  ],
+  "name": "basic-editor-handler-demo",
+  "registryDependencies": [],
+  "type": "registry:example"
+}

apps/www/public/r/styles/default/basic-editor-styling-demo.json

@@ -0,0 +1,13 @@
+{
+  "files": [
+    {
+      "content": "import React from 'react';\n\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\n\nimport { Editor } from '@/components/plate-ui/editor';\n\nexport default function BasicEditorStylingDemo() {\n  const editor = usePlateEditor();\n\n  return (\n    <Plate editor={editor}>\n      <Editor placeholder=\"Type...\" />\n    </Plate>\n  );\n}\n",
+      "path": "example/basic-editor-styling-demo.tsx",
+      "target": "components/basic-editor-styling-demo.tsx",
+      "type": "registry:example"
+    }
+  ],
+  "name": "basic-editor-styling-demo",
+  "registryDependencies": [],
+  "type": "registry:example"
+}

apps/www/public/r/styles/default/basic-editor-value-demo.json

@@ -0,0 +1,13 @@
+{
+  "files": [
+    {
+      "content": "import React from 'react';\n\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\n\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { Editor } from '@/components/plate-ui/editor';\n\nconst value = [\n  {\n    children: [\n      {\n        text: 'This is editable plain text with react and history plugins, just like a <textarea>!',\n      },\n    ],\n    type: 'p',\n  },\n];\n\nexport default function BasicEditorValueDemo() {\n  const editor = usePlateEditor({ value });\n\n  return (\n    <Plate editor={editor}>\n      <Editor {...editableProps} />\n    </Plate>\n  );\n}\n",
+      "path": "example/basic-editor-value-demo.tsx",
+      "target": "components/basic-editor-value-demo.tsx",
+      "type": "registry:example"
+    }
+  ],
+  "name": "basic-editor-value-demo",
+  "registryDependencies": [],
+  "type": "registry:example"
+}

apps/www/public/r/styles/default/basic-plugins-components-demo.json

@@ -0,0 +1,13 @@
+{
+  "files": [
+    {
+      "content": "import {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { HeadingPlugin } from '@udecode/plate-heading/react';\nimport Prism from 'prismjs';\n\nimport { createPlateUI } from '@/lib/plate/create-plate-ui';\nimport { Editor } from '@/components/plate-ui/editor';\n\nexport default function BasicPluginsComponentsDemo() {\n  const editor = usePlateEditor({\n    override: { components: createPlateUI() },\n    plugins: [\n      BlockquotePlugin,\n      CodeBlockPlugin.configure({ options: { prism: Prism } }),\n      HeadingPlugin,\n      BoldPlugin,\n      ItalicPlugin,\n      UnderlinePlugin,\n      StrikethroughPlugin,\n      CodePlugin,\n    ],\n    value: basicEditorValue,\n  });\n\n  return (\n    <Plate editor={editor}>\n      <Editor placeholder=\"Type...\" autoFocus={false} spellCheck={false} />\n    </Plate>\n  );\n}\n\nexport const basicEditorValue = [\n  {\n    id: '1',\n    children: [\n      {\n        text: '🌳 Blocks',\n      },\n    ],\n    type: 'h1',\n  },\n  {\n    id: '2',\n    children: [\n      {\n        text: 'Easily create headings of various levels, from H1 to H6, to structure your content and make it more organized.',\n      },\n    ],\n    type: 'p',\n  },\n  {\n    id: '3',\n    children: [\n      {\n        text: 'Create blockquotes to emphasize important information or highlight quotes from external sources.',\n      },\n    ],\n    type: 'blockquote',\n  },\n  {\n    id: '4',\n    children: [\n      {\n        children: [\n          {\n            text: '// Use code blocks to showcase code snippets',\n          },\n        ],\n        type: 'code_line',\n      },\n      {\n        children: [\n          {\n            text: 'function greet() {',\n          },\n        ],\n        type: 'code_line',\n      },\n      {\n        children: [\n          {\n            text: \"  console.info('Hello World!');\",\n          },\n        ],\n        type: 'code_line',\n      },\n      {\n        children: [\n          {\n            text: '}',\n          },\n        ],\n        type: 'code_line',\n      },\n    ],\n    lang: 'javascript',\n    type: 'code_block',\n  },\n  {\n    id: '1',\n    children: [\n      {\n        text: '🌱 Marks',\n      },\n    ],\n    type: 'h1',\n  },\n  {\n    id: '2',\n    children: [\n      {\n        text: 'Add style and emphasis to your text using the mark plugins, which offers a variety of formatting options.',\n      },\n    ],\n    type: 'p',\n  },\n  {\n    id: '3',\n    children: [\n      {\n        text: 'Make text ',\n      },\n      {\n        bold: true,\n        text: 'bold',\n      },\n      {\n        text: ', ',\n      },\n      {\n        italic: true,\n        text: 'italic',\n      },\n      {\n        text: ', ',\n      },\n      {\n        text: 'underlined',\n        underline: true,\n      },\n      {\n        text: ', or apply a ',\n      },\n      {\n        bold: true,\n        italic: true,\n        text: 'combination',\n        underline: true,\n      },\n      {\n        text: ' of these styles for a visually striking effect.',\n      },\n    ],\n    type: 'p',\n  },\n  {\n    id: '4',\n    children: [\n      {\n        text: 'Add ',\n      },\n      {\n        strikethrough: true,\n        text: 'strikethrough',\n      },\n      {\n        text: ' to indicate deleted or outdated content.',\n      },\n    ],\n    type: 'p',\n  },\n  {\n    id: '5',\n    children: [\n      {\n        text: 'Write code snippets with inline ',\n      },\n      {\n        code: true,\n        text: 'code',\n      },\n      {\n        text: ' formatting for easy readability.',\n      },\n    ],\n    type: 'p',\n  },\n  {\n    id: '6',\n    children: [\n      {\n        text: 'Press ',\n      },\n      {\n        kbd: true,\n        text: '⌘+B',\n      },\n      {\n        text: ' to apply bold mark or ',\n      },\n      {\n        kbd: true,\n        text: '⌘+I',\n      },\n      {\n        text: ' for italic mark.',\n      },\n    ],\n    type: 'p',\n  },\n];\n",
+      "path": "example/basic-plugins-components-demo.tsx",
+      "target": "components/basic-plugins-components-demo.tsx",
+      "type": "registry:example"
+    }
+  ],
+  "name": "basic-plugins-components-demo",
+  "registryDependencies": [],
+  "type": "registry:example"
+}